스코프와 호이스팅

스코프(Scope)

스코프란 단어를 직역하면 영역, 범위라는 뜻이다. 이를 프로그래밍 언어로 가져와 해석하면 변수와 매개변수의 유효범위를 뜻한다. 이를 통해 변수와 매개변수의 접근성과 생존 기간을 제어할 수 있다. 스코프의 종류는 함수 레벨 스코프와 블록 레벨 스코프 그리고 동적 스코프와 렉시컬 스코프로 구분할 수 있다.

함수 레벨 스코프

자바스크립트에서 var 키워드로 선언된 변수나, 함수 선언식으로 만들어진 함수는 함수 레벨 스코프를 갖는다. 즉, 함수 내부 전체에서 유효한 식별자가 된다. 

아래의 코드는 아무런 문제 없이 blue를 출력한다. 5행에서 color를 참조할 때 같은 함수 내에서 선언된 color를 찾았기 때문에, 다시말해 var color는 함수 블록 전체에서 유효한 식별자가 되었다.

function foo () {
    if (true) {
        var color = 'blue';
    }
    console.log(color); // blue
}
foo();

블록 레벨 스코프

ES6의 let, const 키워드는 블록 레벨 스코프 변수를 만들어 준다.

function foo () {
    if (true) {
        let color = 'blue';
        console.log(color); // blue
    }
    console.log(color); // ReferenceError: color is not defined
}
foo();

let으로 선언한 color는 if 블록 내부에서만 유효한 식별자가 되고 if 블록 안에서만 참조할 수 있다. 그 밖의 영역에서 참조했을 경우 ReferenceError를 발생시킨다.

렉시컬 스코프(Lexical Scope 또는 Static Scope)와 동적 스코프(Dynamic Scope)

렉시컬 스코프는 우리말로 직역하면 어휘적 환경이라는 뜻이다. 렉시컬 스코프는 보통 동적 스코프와 많이 비교한다. 렉시컬 스코프는 정적 스코프라고도 하며 동적스코프와 대비되는 특징을 가지고 있다.

동적 스코프는 프로그램의 런타임 도중의 실행 컨텍스트나 호출 컨텍스트에 의해 결정되고,

렉시컬 스코프는 소스코드가 작성된 문맥에서 결정된다. 

현대 대부분의 프로그래밍 언어들은 렉시컬 스코프 규칙을 따르고 있다.

렉시컬 스코프 규칙을 따르는 자바스크립트는 호출 스택과 관계없이 각각의 대응표를 소스코드 기준으로 정의하고, 런타임에 그 대응표를 변경시키지 않는다.

---

호이스팅(Hoisting)

MDN에 따르면 호이스팅을 다음과 같이 설명하고 있다.

호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 가르치지만 실제로는 그렇지 않습니다. 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다.

출처: https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅이란 단어의 뜻은 '끌어올려진다'이다. 호이스팅은 실제로 '변수의 선언이(선언만, 할당은 아님) 코드의 상단으로 끌어올려진 것처럼(실제로는 그렇지 않지만)' 동작하게 해준다.

아래의 코드는 함수를 선언하고 함수를 호출하는 일반적인 예제이다.

function catName(name) {
  console.log("My cat's name is " + name);
}
 
catName("Tigger");
/*
위 코드의 결과는: "My cat's name is Tigger"
*/

이번에는 함수를 실행하고난 다음 함수를 선언해보겠다.

catName("Chloe");
 
function catName(name) {
  console.log("My cat's name is " + name);
}
/*
위 코드의 결과는: "My cat's name is Chloe"
*/

결과는 마찬가지로 위와 동일하다. 함수의 선언이 코드의 상단으로 옮겨진 것 처럼 동작해 일단 어디서든 선언만 하게되면 어디서든 사용이 가능하다.