스코프

프론트엔드분야를 공부하며 생길수 있는 의문점과 가져야할 지식에 대하여 공부하는 바를 적은 글입니다.

1. 스코프?

• 말 그대로 유효범위이다. js의 변수, 함수들이 영향을 미치는 범위라고 생각하면 된다.

모든 식별자 (변수, 함수, 클래스 등)는 자신이 선언된 위치에 의하여 다른 코드들이 자신을 참조 할 수 있는 범위가 결정된다.

Code 1.

var x ="global x";
var y = "global y";

function outer(){
	var z = "outer is local z"
    console.log(x); // global x
    
    function inner(){
    	var x = "inner is local x";
        console.log(x); // inner is local x
        console.log(z); // outer is local z
    }
    inner();
};
outer();

console.log(x); // global x
console.log(y); // global y

1 - 1. 전역

• Code 1에서 x, y라는 변수를 선언했다. 두 변수는 코드의 가장 바깥에서 선언되었고, 전역변수이다.

• 즉, x,y는 코드의 모든 부분에서 참조가 가능하기 때문에 outer 함수안에서도 참조가 가능하다.

1 - 2. 지역

• Code 1에서 outer라는 함수가 선언되었고, 이 함수 내부에서 선언한 변수, 함수는 outer라는 함수 내부에서 유효하다.

• 이것을 지역변수, 지역 스코프 라고 한다.

• 코드를 보면, outer함수 안에서 z라는 변수가 선언되었는데, 이 변수가 바로 지역변수이다.

  • 따라서, outer 함수 내부에서 선언된 z변수는 outer 함수 내부와 하위 스코프인 inner함수 내부에서 참조가 가능하다.

    • 전역에서 참조시, 참조 오류가 발생한다.

2. 렉시컬 스코프

Code 2.

var x = 1;
function foo(){
	var x = 10;
    bar();
}

function bar(){
	console.log(x);
}
foo();
bar();

• Code 2에서 마지막에 실행시킨 foo 함수와 bar 함수의 결과를 생각해보자.

• 실행 결과는 bar 함수의 상위 스코프가 무엇이냐에 따라 결정되고 2가지의 갈래로 나뉜다.
  1. 함수를 어디서 호출했는지가 상위 스코프를 결정
  2. 함수를 어디서 정의했는지가 상위 스코프를 결정
  

• 1번의 방식으로 스코프를 결정한다면, bar 함수의 상위 스코프는 foo의 지역 스코프와 전역 스코프 이다.

  1번의 방식을 동적 스코프 라고 한다.

• 2번의 방식으로 스코프를 결정한다면, bar 함수의 상위 스코프는 전역스코프 이다.

  2번의 방식을 정적 스코프, 렉시컬 스코프 라고 한다.

• js는 2번, 렉시컬 스코프를 따르기 때문에, 위 코드의 결과는 둘다 1이 나온다.

• 즉, 함수의 상위 스코프는 함수가 정의될때 정적으로 결정된다.

reference

모던 자바스크립트 Deep Dive