[javascript]Hoisting?

호이스팅(Hoisting - 끌어올리다)

---

변수 선언, 함수 선언 등이 스코프 최상단으로 끌어올려진 것 같은 현상

 

원인

javascript의 경우 인터프리트 언어로 한 줄씩 읽으면서 실행하지만 그전에 먼저 변수, 함수 등의 선언문을 찾아내 힙 메모리에 적재하기 때문입니다.
이때 let, const와는 다르게 var는 선언과 동시에 undefined로 초기화까지 하는데 이로 인해 똑같이 hoisting 돼도 let과 const는 다르게 작동합니다.

예제 소스로 확인

1) 선언문이 먼저 힙에 적재되는지 확인

console.log(a); //var a로 선언되어있기 때문에 선언과 동시에 undefined로 할당 - 참조 가능 : undefined
console.log(b); //let b로 선언되어있기 때문에 선언만 되어 있으므로 참조 에러
//console.log(c); //const c로 선언되어있기 때문에 선언만 되어 있으므로 참조 에러

var a = 10;
let b = 10;
const c = 10;

이로 인해 var는 호이 스팅 발생, let과 const는 호이스팅이 발생하지 않는 것처럼 보이게 됩니다.

2) 변수 선언, 참조, 대입 확인
이 현상은 선언 부분과 대입 부분을 분리해서 보면 더 쉽게 이해가 가능합니다. 

선언이 먼저 수행되고 나머지를 한 줄씩 수행한다고 생각하면 결과를 쉽게 추측할 수 있습니다.

※ var대신 let으로 전부 선언할 경우 이미 2번째 줄에서 선언했기 때문에 4번째 줄에서 중복 선언 에러 발생,

   첫 번째 줄의 참조 에러가 나기도 전에 4번째 줄의 중복 선언 에러가 발생합니다

console.log(a);    //undefined
var a = 1;          //선언 : var a; , 대입 : a = 1;
console.log(a);    //1
var a;               //선언 : var a; , a;
console.log(a);    //1
var a=25;          //선언 : var a; , 대입 : a = 25;
console.log(a);    //25

함수 선언문, 함수 표현식

사실 호이스팅을 제일 많이 겪는 경우는 함수 선언문입니다.
함수 선언문과 함수 표현식을 비교해보는 예제입니다.

funcA();
funcB();

//함수 선언문
function funcA(){
   console.log('funcA');
};

//함수 표현식
const funcB = function(){
   console.log('funcB');
}
의 결과는?

 

 

함수 선언문 funcA는 먼저 선언과 동시에 할당이 되어있으므로 funcA() 호출 시 함수 선언문이 위에 작성된 것처럼(끌어올려진 것처럼) 참조되어 'funcA'가 출력됩니다.
함수 표현식 funcB는 그냥 위에 변수 선언문과 동일하고 다만 할당하는 값이 함수일 뿐입니다.
그렇기에 위의 funcB는 미정의 되어 있다고 나옵니다.

그러면 funcB를 var로 선언한다면?

역시나 undefined로 선언/초기화되기 때문에 funcB는 함수가 아니라는 에러가 발생합니다.


※ 더 깊게 알고 싶으시다면 javascript의 실행 콘텍스트 생성부터 코드가 실행되는 과정을 찾아보시는 것을 추천드립니다.
(나중에 기회가 된다면 다른 글로 추가하겠습니다)