호이스팅(hoisting)에 대해서
함수 호이스팅, 변수 호이스팅
호이스트(hoist)의 뜻은 "끌어올려지다" 라는 뜻이다.
스코프 내에서 어느 위치에 선언을 하든 같은 스코프 범위 내에서 같은 이름의 변수 혹은 함수를 찾아서 사용한다는 것이다.
그럼 어떨때 호이스팅이 가능하고, 어떨 때는 오류가 날까?
변수 호이스팅
1. var
console.log(color) // undefined
var color = "red"
var로 선언된 변수는 '선언'까지만 호이스팅된다. 그래서 위 코드에서 color를 참조했을때, color라는 변수는 존재하지만 아직 값이 '할당'되지는 않고 선언 후 undefined로 초기화만 된 상태여서, undefined로 조회된다.
=> var는 '선언'후 undefined로 초기화된 상태로 호이스팅 된다. '할당'된 값은 호이스되지 않는다.
2. let, const
console.log(color) // ReferenceError: Cannot access before initialization
const color = "green"
console.log(animal) // ReferenceError: Cannot access before initialization
let animal = "dog"
반면 let이나 const로 선언된 변수는 호이스팅이 되긴 하지만, "초기화"되지 않은 상태로 존재한다. var의 경우에는 "undefined"로 선언과 동시에 초기화되지만 let과 const는 초기화되지 않은 상태로 존재한다.
이는 TDZ라는 개념과 맞닿아있다. TDZ란, Temporal Dead Zone 의 준말이다. 직역하자면 임시적으로 죽은 공간이다. 변수가 선언되었지만 아직 초기화되지 않은 상태로 존재하는 공간이다. 즉, 같은 스코프내에서라도 변수의 선언문에 도달하기 전까지는 변수에 접근할 수 없다.
// TDZ 시작
console.log(coffee); // ReferenceError
cosnt coffee = "cafe latte" // 변수 선언과 동시에 TDZ 종료
console.log(coffee); // "cafe latte" (정상 출력)
함수 호이스팅
함수의 생성방식에 따라서 호이스팅의 양상이 달라진다.
1. 함수 선언문
앞에 "function"을 붙여서 함수를 만드는 방법을 함수 선언문이라고 한다. 이때는 함수 전체가 호이스팅되어서 선언하기 전에 호출할 수 있다.
myFunction(); // "Hello" 출력됨
function myFunction() {
console.log("Hello")
}
2. 함수 표현식
함수를 선언해서 변수에 담는 방식을 함수 표현식이라고 하는데, 이때는 변수형에 따라 그 성격과 똑같이 작동한다. var에 담으면 var의 특성대로 undefined로 초기화된 값이 호이스팅되고, const나 let에 담으면 TDZ에서는 접근하려면 에러가 나고 선언 후에 함수에 접근할 수 있다.
// 함수 호출 시도
sayHello(); // ReferenceError: Cannot access 'sayHello' before initialization
// 함수 표현식
const myFunction = function() {
console.log("Hello!");
};
결론
앞서 변수형을 살펴볼 때의 결론은 var 대신에 const나 let을 사용하자고 한 것처럼, 이런 특성에 대해서 알되 가급적이면 가독성이 높은 코드를 짜는 것이 좋다.
즉, 가급적 함수나 변수를 사용하기 전에 함수나 변수를 선언하고 사용하는 것이 좋다!!
