[개요]
호이스팅이 무엇인지. 호이스팅에 대해 배우면서 var,let,const와의 차이점과 함수선언문,함수표현식의 차이점을 알아보겠습니다.
[호이스팅(Hoisting) 이란?]
일반적으로 호이스팅은 드를 실행하기 전 함수의 선언과 변수의 선언을 파일의 맨 위로 끌어올린다고 알고 있습니다. 아주 틀린말은 아니지만 엄밀하게 따져보면 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다.
또한 함수와 변수는 메모리에 저장되는 방식이 다릅니다.
- 함는 전체 함수에 대한 참조와 함께 저장됩니다.
- 변수의 경우 ES6 문법인 let과 const는 초기화 되지 않은 채로 저장이 되고, var는 undefined로 저장이 됩니다.
[예제]
함수 선언문을 사용했을 때와, 함수 표현식을 사용했을때의 차이점을 보겠습니다.
- produce 함수를 생성합니다.
- produce 함수를 함수 선언 전, 후로 호출합니다.
produce("LJ");
function produce(name) {
console.log("my name is " + name);
}
produce("LJ");
/*
결과는 오류없이 실행이 되고, my name is LJ 가 출력됩니다.
*/함수 선언문을 사용하게 되면 컴파일단계에서 함수가 메모리에 저장이 되어 함수 선언문의 위에서 함수 호출을 하여도 오류가 발생하지 않습니다.
위와 같은 코드를 함수 표현식으로 변경 해보겠습니다.
produce("LJ");
const produce = function(name){
console.log("my name is " + name);
}
produce("LJ");
/*
함수 표현식으로 함수를 작성하게되면 호이스팅의 영향을 받지 않기때문에
Uncaught ReferenceError: produce is not defined
라는 오류가 발생합니다.
*/변수에서의 차이점을 보겠습니다.
console.log(name); //return LH
console.log(email); // Uncaught ReferenceError: email is not defined
console.log(addr); // Uncaught ReferenceError: addr is not defined
var name = "LH";
let email = "naver";
const addr = "Korea";
console.log(name); //return LH
console.log(email); //return naver
console.log(addr); // return Korea
위의 예제를 보고 let과 const는 호이스팅의 영향을 받지 않는다고 생각하실 수 있는데 let과 const 또한 호이스팅의 영향을 받습니다.
변수의 생성은 [선언 -> 초기화 -> 실행] 순으로 진행됩니다.
var키워드의 경우, 선언과 초기화가 동시에 일어납니다.
하지만, let키워드는 선언과 초기화가 각각 분리되어 진행됩니다.
즉 let으로 생성된 변수는 호이스팅되어 선언이 되지만, 초기화 단계는
실제로 let이 사용된 코드에 도착했을때 이루어집니다.
초기화단계 이전에 변수에 접근하려 할때는 위의 코드와 같이 reference 에러가 발생합니다.
const변수는 선언시 재할당이 불가능하고, let과 const로 생성한 변수는
변수가 실제 있는 위치에 도달할 때까지 액세스할 수 없습니다.
[마치며]
호이스팅에 대해 더 깊게 알고 싶으신 분들은.
TDZ(Temporal Dead Zone)에 대해 검색해 보시는걸 추천드립니다.
또한 호이스팅에 대한 개념을 놓치지 않고, 개발을 한다면
잠재적인 버그와 혼란을 방지할 수 있습니다.
