[JavaScript] Scope란?

 👁‍🗨자바스크립트는 함수 레벨 스코프(function-level scope)를 따른다.
함수 레벨 스코프란 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않다(참조할 수 없다)는 것이다.

👉🏻단, ECMAScript 6에서 도입된 let keyword를 사용하면 블록 레벨 스코프를 사용할 수 있다.

👨🏻‍💻 Scope란?

Scope는 직역하면 "범위"라는 뜻이다.
JavaScript 에서 Scope(스코프)는 변수에 접근할 수 있는 범위를 말한다.
식별자(변수)를 찾기위한 규칙이라고도 한다.

 

식별자의 유효 범위 ⇒ 모든 식별자는 자신이 선언된 위치에 의하여 다른 코드가 식별자 자신을 참조할 수 있는

유효 범위가 결정됨.

var x = 'global';

function exampleFunction() {
	// 함수 내에 선언된 x 변수는 함수 내부에서만 참조가능
    var x = "declared inside function";
    console.log(x);
}

exampleFunction(); // "declared inside function"
console.log(x);  // 'global'

위 예제에서 x가 두번 선언되었는데, JavaScript는 각 x가 어떤 값을 가지는지 어떻게 구별할 수 있을까?

 

위 예제에서 전역에 선언된 변수 x는 함수 안에서든 밖에서든지 어디에든 참조할 수 있다.

하지만 함수 exampleFunction 내에서 선언된 변수 x는 함수 exampleFunction 내부에서만 참조할 수 있고,

외부에서는 참조할 수 없다.

 

💫key point

🔔 “식별자 접근 규칙에 따른 유효 범위”를 스코프의 정의라고 한다.

 

한 스코프 내에서는 식별자가 유일해야 하지만, 다른 스코프에는 동명의 식별자를 사용할 수 있음.
( 위 예제에서 변수명이 같은 x를 두개 선언 할 수 있었던 이유.)
⇒ 네임스페이스
식별자 결정(identifier resolution) : 자바스크립트 엔진은 스코프를 통해서 어떤 변수를 참조할 것인지 결정함.

 

---

스코프의 특징

👉 규칙1. 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만 반대는 불가능하다.

• 바깥쪽 스코프에서 선언한 식별자는 안쪽 스코프에서 사용 가능하다.
• 반면, 안쪽에서 선언한 식별자는 바깥쪽 스코프에서는 사용할 수 없다.

👉 규칙2. 스코프는 중첩이 가능하다.

• 스코프는 마치 중첩된 울타리와도 같다.

👉 규칙3. 전역 스코프와 지역 스코프

• 가장 바깥쪽의 스코프를 전역 스코프(Global Scope)라고 부른다.
• 전역이 아닌 다른 스코프는 전부 지역 스코프(Local Scope)이다.

👉 규칙4. 지역 변수는 전역 변수보다 우선순위가 더 높다.

• 전역 스코프에서 선언한 변수는 전역 변수이다.
• 지역 스코프에서 선언한 변수는 지역 변수이다.
• 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.

---

함수 레벨 스코프 VS 블록 레벨 스코프

지역 스코프는 함수에 의해서 생성되는가, 코드 블록에 의해서 생성되는가에 따라 레벨이 나뉨.

📋 블록 레벨 스코프 : if, for, while, try/catch, { } 등 코드 블록이 지역 스코프 생성

⇒ let, const 키워드로 선언된 변수는 모든 코드 블록을 지역 스코프로 인정함.

⇒ 주의해야할 점은 화살표 함수는 블록 스코프로 취급된다.

{
  var a = "A inner"
  let b = "B inner"
  const c = "C inner"
}

console.log(a)
console.log(b)  //ReferenceError: b is not defined
// console.log(c) ReferenceError: c is not defined

👉🏻var로 선언된 변수는 선언된 함수내에서만 지역스코프로 인정하기 때문에 블록스코프안에 있을때
외부에서 호출 시 참조할 수 있지만,

👉🏻let, const는 블록레벨 스코프로 if, for, while, try/catch 등 코드 블록{ } 안에 있을때 지역스코프로 인정을 하기에
외부 호출 시 에러가 뜨는 모습.

 

📋 함수 레벨 스코프 : 함수가 지역 스코프 생성 ⇒ var 키워드로 선언된 변수는

오직 '함수'만을 지역 스코프로 인정함.

{
  // 함수가 아닌 if, for, while, try/catch 등 
  // 코드 블록안에서 지역스코프 인정x
  var x = "inner";
}

// {}스코프 밖에서 x를 콘솔로 호출했지만 함수블록이아닌 코드블록이라
console.log(x);   // inner 출력됨

function example() {
  var x = "inner";
} 

// 함수 스코프에 따라 함수밖에서 함수안 변수에 접근 불가 에러
console.log(x);  // ReferenceError: x is not defined

 

 

📚 참고

---

https://developer.mozilla.org/ko/docs/Glossary/Scope

https://poiemaweb.com/js-scope

JS | 잘 봐, 자바스크립트 스코프(Scope) 싸움이다 🔥