[JS] 스코프(2) - 스코프 체인, 함수 레벨 스코프, 렉시컬 스코프

https://parkparkpark.tistory.com/51

[JS] 스코프(1) - 전역, 지역 스코프에 대해

 

스코프 체인

함수는 함수 내에 선언할 수 있어 함수는 중첩되어 있을 수도 있다. 이는 함수의 지역 스코프도 중첩될 수 있다는 것을 의미한다.

즉 스코프는 함수의 중첩에 의해 계층적인 구조를 갖는다. 

 

let x = 1;

function fun1(){
    let y = 2;
    
    function fun2(){
    	let x = 3;
    }
    
    fun2()
}

해당 코드에서 스코프를 분석해보면

 

전역 스코프: x = 1 , fun1()

               

fun1 지역 스코프: y = 2 , fun2()

 

fun2 지역 스코프: x = 3

 

이렇게 나눌 수 있다.

 

이처럼 스코프가 계층적으로 연결된 것을 스코프 체인이라 한다. 

 

자바스크립트 엔진은 변수를 참조할 때 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며

변수를 찾는다. 이를 통해 상위 스코프에서 선언한 변수를 하위 스코프에서 참조할 수 있다.

 

스코프의 계층적 구조는 상속과 유사하다. 함수든 코드 블록이든 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다.

for(let i = 0; i < 10; i++){
    console.log(num); // 오류발생 
    for(let j = 0; j < 10; j++){
       let num = 10;
    }
}

 

아래 코드에서 console창으로 1과 2중 뭐가 출력될지 한 번 생각해보자.

function fuc1(){
    console.log(1);
}

function fuc2() {
    function fuc1(){
        console.log(2);
    }
    fuc1();
}

fuc2();

 

함수 선언문으로 작성한 함수는 런타임 이전에 함수 객체가 먼저 생성된다. 즉 답은 2이다.

함수도 식별자에 해당하기 때문에 스코프를 가진다.

 

함수 레벨 스코프 

 

 

대부분의 프로그래밍 언어는 함수 몸체 뿐만 아니라 모든 코드 블록 또한 지역 스코프를 만든다. 하지만 자바스크립트 같은 경우엔 var키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다.

 

var x = 10;

if(1){
   var x = 0;
}

console.log(x); // 0


var y = 100;

function fuc1(){
   var y = 10;
} 

console.log(y); // 100

var는 let, const와 다르게 중복 선언이 가능하고, 코드 블록 레벨 스코프를 지원하지 않아 오류를 일으킬 가능성이 높다.

즉 왠만하면 let과 const를 사용하도록 하자!

 

렉시컬 스코프

렉시컬 스코프란 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정하는 것을 말한다. 

자바스크립트를 포함한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다. 즉 함수의 호출 위치보다 정의 위치를 본다는 말이다.

 

자세히 설명하자면, 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않는다. 다음 코드를 살펴보자.

 

let x = 1;

function fuc1(){
   let x = 10;
   fuc2();
}

function fun2(){
   console.log(x); 
}

fuc1(); // 1
fun2(); // 1

뭔가 우리의 예상과 다르게 fuc1, fuc2 함수 둘 다 1을 출력하는 모습을 볼 수 있다.

fun2 함수는 전역에서 함수 선언문으로 정의된 함수이다. 즉 전역 변수 x를 참조해 어디서 호출하던 fun2를 실행하면 1의 결괏값을 출력한다. 

 

이상 스코프에 대해 다뤄봤다.