JavaScript Scope에 대하여

⭐️ Scope란 ?

scope란 변수나 함수가 접근할 수 있는 유효 범위이다.

 

JavaSciprt는 정적스코프 (Lexical Scoping) 를 따른다.

 

⭐️ 정적 스코프 (Lexical Scoping)

1. 정적 스코프 (Lexical Scoping)

 

변수나 함수의 유효 범위는 코드가 작성된 시점(선언 시점 ‼️)에 결정되며,

함수 호출 시 동적으로 바뀌지 않는다.

 

예를 들면 함수 내부에서 선언된 변수는 그 함수 내에서만 유효하며,

외부에서는 접근할 수 없다.

 

⭐️ var와 let / const의 차이

[ var ]

var로 선언한 변수는 "함수 스코프"를 가지며 , 해당 함수 전체에서 유효하다.

또한 호이스팅이 발생하여 변수 선언이 함수 최상단으로 끌어올려 지지만,

초기화는 원래 위치에서 이루어 진다.

-> 거의 사용하지 않음

 

[ let / const ] 

ES6에서 도입된 let과 const는 "블록 스코프"를 가지며, 중괄호({})로

구분된 영역 내에서만 유효하다.

 

또한 이들은 호이스팅이 되지만 , 선언 이전에는 접근할 수 없고, 이를 일시적

사각지대인 (Temporal Dead Zone - TDZ)에 저장함.

 

---

 

[ 예시 코드 ]

const number1 = 20;

function test3() {
    const number1 = 40;
    test4();
    console.log('number1 : ' + number1);
}

function test4() {
    const number2 = 11;
    console.log('number1 : ' + number1);
    console.log('number2 : ' + number2);
}

test3();
console.log('number1 : ' + number1);

 

 

 

 

위와 같은 코드가 Java에서 동작한다면 test3()를 호출하였을때 number1 을 20에서 40으로

값을 덮어버리고 , test4() 호출시에     console.log('number1 : ' + number1); 에서

40이 호출 되었어야 한다.

 

하지만 현재 출력창을 보면 number1 : 20 이라고 출력된 것을 볼 수 있다.

 

이는 let과 const는 "블록 스코프"를 가지기 때문이다.

 

test3() 함수 위에 선언된 number1은 window 객체의 변수이고 ,

test3() 함수 안에 선언된 number1은 함수의 변수이기 때문에 

 

위와 같이 test4()를 호출한 경우 number1은 블록 스코프 때문에 test3() 함수

안에 있는 number1이 아닌 window 객체인 number1을 호출 하게 되는 것이다 ‼️

 

---

 

Java와 JavaScript의 스코프는 다르기 때문에 
이 차이를 잘 알고 사용해야 나중에 변수의 값을 
정확하게 추적할 수 있다.