[JavaScript] 완벽가이드 Hoisting

📌 호이스팅

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. -MDN

호이스팅을 이해 하기 전에 먼저 변수의 유효범위(block scope) 에 대해서 알아야 합니다.

1. 변수 유효범위

프로그램에서 어떤 변수가 정의되어 있는 영역
자바스크립트 변수 유효범위는 변수를 어디에서 접근 할 수 있는지를 가리킵니다.

1. 전역변수는 자바스크립트 코드 전체에 걸쳐 접근 가능하며, 어떤 함수 안에서 선언된 변수는 오직 해당 함수 몸체 안에서만 접근 가능합니다.
2. 함수의 매개변수도 지역변수이며 함수의 본문 내에서 접근 할 수 있다.
3. 지역 변수는 전역 변수와 같은 이름을 가질 수 있으며, 이름이 같을 경우에 지역변수를 효과적으로 감출 수 있습니다.(지역변수가 우선순위가 높다.)

전역변수 지역변수 코드

var scope = "전역변수"; // 전역 변수를 선언한다.
function checkscope(){
  var scope = "지역변수"; // 전역 변수와 같은 이름으로 지역변수를 선언한다.
  return scope;
}

checkscope();

함수 정의는 중첩될 수 있습니다. 각 함수에는 자신만의 유효범위가 존재하므로 유효범위가 여러 단계로 중첩될 수 있습니다.

var scope = "전역변수";
function checkscope(){
  var scope = "지역변수";
      function nested(){
          var scope = "중첩변수"; // 함수 안에 포함된 유효범위의 지역 변수
        return scope;
      }
  return nested();
}
checkscope();    // "중첩변수" 리턴

2. 함수 유효범위와 호이스팅

자바스크립트에는 블록내에 유효범위가 존재하며 블록내에서 선언된 변수는 *블록 바깥에서는 접근 할 수 없는 C같은 언어와 달리 블록 유효범위가 없습니다. 즉 자바스크립트에선 블록이 닫힌 이후에도 아래처럼 접근할 수 있습니다.

*블록:코드 내에서 중괄호({})로 둘러싸인 부분을 가리킵니다.

{
  var i = 1
}
console.log(i)  /// 1

다만 자바스크립트는 함수 유효범위를 가지고 있습니다.

function test(o) {
  var i = 0;
  if (o) {
    var j = 0;
    for (var k = 0; k < 10; k++) {
      console.log("for", k);
    }
    console.log("k", k);
  }
  console.log("j", j);
}

자바스크립트 함수의 유효범위는 위 함수 안에서 선언된 모든 변수가 함수 전체에 걸쳐 접근할 수 있다는 의미입니다. 여기에서 호이스팅이 나타나는데 변수가 선언되기 전에 접근할 수 있습니다. 아래의 코드로 자세히 알아보도록 하겠습니다.

var scope="global";
function f (){
  1️⃣ console.log(scope); //'undefined' 호이스팅 초기화
  2️⃣ var scope ="local";
    3️⃣ console.log(scope); // 'local'
}

처음에는 위 코드에서 f 함수 안에 1️⃣이 전역변수인 "global"이 출력될 것이라고 착각할 수 있지만 'undefined'가 출력된다. 이는 함수내에 함수 전체에서 접근할 수 있는 2️⃣ 지역변수가 있기 때문인데 지역변수 1️⃣ 보다 아래에 있는데 'undefined'가 나오는 이유는 변수 선언을 함수 맨 꼭때기로 끌어올려주는 호이스팅 때문입니다. 위 코드를 실제로 자바스크립에선 아래와 같이 실행됩니다.

var scope = "global";
function f() {
  var scope;
  console.log(scope); //'undefined'
  scope = "local";
  console.log(scope); // 'local'
}

참고

• MDN Hoisting
• 자바스크립트 완벽가이드(데이비드 플래너건)
  

해당 글은 자바스크립트 완벽가이드(데이비드 플래너건), 웹사이트 등을 참고하여 개인적으로 정리한 글입니다.