[JavaScript] 스코프(scope)

💡스코프(Scope)

선언된 변수에  접근할 수 있는 유효한 범위를 말하며,
참조 대상 식별자(변수, 함수의 이름과 같이 다른 대상과 구분하여 식별할 수 있는 이름)를 찾아내기 위한 규칙이라고도 한다.

var x = 'global';

function foo () {
  var x = 'function scope';
  console.log(x);
}

foo(); // ?
console.log(x); // ?

 

위와 같이 변수 x가 중복으로 선언되었을 때, 

전역에 선언된 변수 x는 어디에든 참조할 수 있다. 하지만 foo 함수 내에서 선언된 변수 x는 함수 foo 내부에서만 참조할 수 있고 함수 외부에서는 참조할 수 없다. 이러한 규칙을 스코프라고 한다.

 

즉, 변수가 해당 스코프에 존재하지 않는다면 사용할 수 없다. 

또한, 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만, 상위 스코프는 하위 스코프에 접근할 수 없다.

---

💡스코프의 구분

1. 전역 스코프(Global Scope)

 코드 어디에서든지 참조할 수 있다.

 

2. 지역 스코프(Local Scope)

함수 자신과 하위 함수에서만 참조할 수 있다.

--------------------------------

1. 전역 변수(Global Variable)

 전역에서 선언된 변수이며 어디에서든 참조할 수 있다.

 

2. 지역 변수(Local Variable)

지역(함수) 내에 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.

---

💡자바스크립트 스코프의 특징

자바스크립트 스코프는 타 언어와는 다른 특징을 갖는다.

 

대부분의 C 기반 언어들은 블록 레벨 스코프(Block-level scope)를 따르지만,

자바스크립트는 함수 레벨 스코프(Function-level scope)를 따른다.

주의할 점은, 화살표 함수는 함수 스코프가 아니라 블록 스코프를 따른다.

 

 

- 블록 스코프

선언한 변수가 코드 블록(중괄호 내)에서만 참조(접근) 가능한 범위를 말한다.

int main(void) {
  // block-level scope
  if (1) {
    int x = 5;
    printf("x = %d\n", x);
  }

  printf("x = %d\n", x); // use of undeclared identifier 'x'

  return 0;
}

 if문 내에서 선언된 변수 x는 if문 코드 블록 내에서만 유효하다.

즉, if문 코드 블록 밖에서는 참조가 불가능하다.

ES6부터 let과 const을 키워드가 추가되면서 블록 레벨 스코프를 사용할 수 있게 되었다.

 

 

- 함수 스코프

함수 코드 블록 내에서만 참조(접근) 가능한 범위를 말한다.

따라서 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 접근할 수 없다.

var a = 1; // 전역 변수
function print() { // 지역(함수) 스코프
 var a = "test"; // 지역 변수
 console.log(a); // output: test
}
print();
console.log(a); // output: 1

 

 

- 렉시컬 스코프(Lexical Scope) = 정적 스코프(Static Scope)

함수의 스코프를 결정하는 방식 중 정적 방식은 함수를 선언한 시점에 스코프를 결정하는 방식을 의미한다.

자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다.

 

 

- 동적 스코프(Dynamic Scope)

함수를 호출한 시점에 스코프를 결정하는 방식을 의미한다.

동적 스코프의 선언은 런타임 도중에 실행 컨텍스트나 호출 컨텍스트에 의해 결정된다.

 

---

스코프 체인(Scope Chain)

현재 스코프 레벨에서 변수가 존재하지 않는 경우 상위 스코프에서 찾는 방식을 의미한다.

이 찾는 과정은 스코프를 안에서 바깥쪽으로 단계적으로 탐색하는 과정이다(내부->외부->전체)

 

 

 

참조🙇‍♀️

https://shape-coding.tistory.com/entry/JavaScript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%EC%BD%94%ED%94%84Scope-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

https://adjh54.tistory.com/54

https://doozi0316.tistory.com/entry/JavaScript-Scope%EB%9E%80-%EC%8A%A4%EC%BD%94%ED%94%84-%EC%B2%B4%EC%9D%B8-%EC%8B%A4%ED%96%89-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8