📝 호이스팅(Hoisting)
함수 안에 있는 선언들을 끌어올려서 해당 함수
유효 범위의 최상단에 선언하는 것을 말합니다.
-
자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모아서 유효 범위의 최상단에 선언합니다.
- javaScript Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
- 함수 안에 존재하는 변수/함수 선언에 대한 정보를 기억하고 있다가 실행시킨다.
- 유효범위 :
{}안에서 유효
-
함수 내에서 아래 쪽에 존재하는 내용 중 필요한 값들을 끌어 올리는 것입니다.
- 실제로 코드가 끌어올려지는 것은 아니며, javaScript Parser 내부적으로 끌어올려서 처리하는 것이다.
- 실제 메모리에는 변화가 없다.
📜 변수 호이스팅
- 자바스크립트의
모든 선언에는 호이스팅이 일어납니다. - let, const, class를 이용한 선언문은 호이스팅이 발생하지 않는 것 처럼 동작합니다.
- var 로 선언된 변수와 달리 let 으로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생합니다.
- let 으로 선언된 변수는 스코프 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone: TDZ) 에 빠지기 때문
📜 함수 선언문과 함수 표현식에서의 호이스팅
📌 함수 선언문에서의 호이스팅
- 함수 선언문은 코드를 구현한 위치와 관계 없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려집니다.
ex)
function printName(firstname){ //함수 선언문
var result = inner();
console.log(typeof inner);
console.log("name is" + result);
function inner(){ //함수 선언문
return "inner value";
};
};
printName(); //함수 호출위 예제에서는 함수선언문이 아래에 있어도 printName 함수 내에서 inner를 function으로 인식하기 때문에 오류가 발생하지 않습니다.
📌 함수 표현식에서의 호이스팅
- 함수 표현식은 함수 선언문과 달리 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있습니다.
- 표현식에서는 선언과 할당의 분리가 발생합니다.
1. 함수 표현식의 선언이 호출보다 위에 있는 경우(정상 출력)
ex)
function printName(firstname){ //함수 선언문
var inner = function(){ //함수 표현식
return "inner value";
}
var result = inner(); //함수 호출
console.log("name is" + result);
}
printName();2. 함수 표현식의 선언이 호출보다 아래에 있는 경우 - var 변수에 할당(Type Error)
ex)
function printName(firstname){ //함수 선언문
console.log(inner);
var result = inner(); //함수 호출
console.log("name is" + result);
var inner = function(){ //함수 표현식
return "inner value";
};
};
printName();3. 함수 표현식의 선언이 호출보다 아래에 있는 경우 - const/let 변수에 할당(ReferenceError)
ex)
function printName(firstname){ //함수 선언문
console.log(inner);
let result = inner(); //함수 호출
console.log("name is" + result);
let inner = function(){ //함수 표현식
return "inner value";
};
};
printName();함수 표현식 보다 함수 선언문을 더 자주 사용하지만, 어떤 코딩 컨벤셩에서는 함수 표현식을 권장하기도 합니다.
📜 호이스팅 우선 순위
- 같은 이름 var 변수 선언과 함수 선언에서의 호이스팅
- 변수 선언이 함수 선언보다 위로 끌어 올려집니다.
- 값이 할당되어 있지 않은 변수의 경우, 함수 선언문이 변수를 덮어씁니다.
📜 호이스팅 사용 시 주의 사항
- 코드의 가독성과 유지 보수를 위해 호이스팅이 일어나지 않도록 합니다.
-- 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있습니다.
- let/const 를 사용합니다.
- var를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있습니다.
- 왜 var 과 호이스팅을 이해해야 할까
- ES6를 어디에서든 쓸 수 있으려면 아직 시간이 더 필요하므로 ES5로 트랜스컴파일을 해야한다.
- 왜 var 과 호이스팅을 이해해야 할까
Frontend Developer