FE 기술면접에서 반드시 묻는 질문이다. 어느정도 예상된 질문이기 떄문에 준비한 내용대로 답변을 했지만 블로그에 한번 정리해 보는것이 좋을 것 같아 정리해 보았다.
호이스팅이란?
- 사전적 의미로 아래에 위치한 것을 위로 끌어 올리는 것을 의미한다.
Javascript에서 호이스팅(Hoisting)은 코드에 선언된 변수 및 함수를 코드 상단으로 끌어 올리는 것이다.
호이스팅 대상
- var변수 선언과 함수 선언문에서만 호이스팅이 일어난다.
- var변수/함수 선언만 위로 끌어 올려지며, 할당은 끌어올려지지 않는다.
- let/const 변수 선언과 함수 표현식에서는 호이스팅이 발생하지 않는다.
// 예시1 변수선언
console.log('hello world');
var name = 'eddy';
let age = 20;
// 예시1 Js Parser내부의 호이스팅의 결과
var name; // 호이스팅 '변수 선언'
console.log('hello world');
name = 'eddy'; // '변수 할당'
let age = 20; //호이스팅 X
// 예시2 함수 선언문 vs 함수 표현식
name();
age();
function name() { // 함수 선언문
console.log('hello world');
};
var age = function () { // 함수 표현식
console.log('hello world');
};
// 예시2 Js Parser 내부의 호이스팅 결과
var age; // 호이스팅, 함수 표현식의 변수값 '선언'
function name() { // 호이스팅, 함수 선언문
console.log('hello world2');
};
name();
age(); // ERROR!
age = function () {
console.log('hello world2');
}변수에 할당된 함수표현식은 호이스팅이 발생하지 않기 때문에 변수의 스코프 규칙을 그대로 따른다.
함수 선언문에서 호이스팅
- 함수 선언문은 코드를 구현한 위치와 상관없이 JS의 특징인 호이스팅에 따라 브라우저가 JS를 해석할 떄 맨 위로 올려진다.
함수 표현식에서 호이스팅
- 함수 선언문과 달리 선언과 호출 순서에 따라 정상적으로 함수가 실행되지 않을 수 있다. 함수 표현식에서는 선언과 할당의 분리가 발생한다.
호이스팅 우선순위
- 변수와 함수명이 같을 때 변수 값이 초기화 되어있다면 변수가 함수를 덮어 씌운다.
var getName = 'ken';
function getName() {
console.log('ken');
};
console.log(typeof getName); //string- 반대로 변수 값이 undefined로 선언되어있을 경우 변수를 함수가 덮는다.
var getName; //undefined
function getName() {
console.log('ken');
};
console.log(typeof getName); //function결론
- 호이스팅을 제대로 모르더라도 함수와 변수는 코드 상단부에서 미리 선언하는게 좋다. 이는 코드의 가독성과 디버깅에도 용이하다.
- var사용을 자제하고, let/const를 적극 사용하자.
참고
기록하는 습관