때는 데브코스 면접날..
Lia님이 내가 최근에 스터디를 했던 내용 중에 호이스팅에 대해 물어보셨다.
나 : "어.. 변수 선언할 때 끌어올림 현상.. 입니다..
다행히 정말 운좋게 합격해서 강의를 듣는중..
이선협 강사님 : var를 사용할 순 있지만 권장하진 않습니다. 그 이유는 호이스팅이라는 자바스크립트 특징 때문입니다. 도대체 호이스팅이 뭐길래 var를 안쓰는지는 오늘 숙제로 남기도록 하겠습니다. 🤗
호이스팅에 대해 알아보자^^
호이스팅
Hoisting (무언가를 들어올리다 / 끌러올리다) 라는 의미로,
인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
예제로 확인해보자.
함수의 호이스팅
자바스크립트에서 함수를 어떤식으로 선언하느냐에 따라 다르다.
// 함수 선언식 호이스팅됨 O
console.log(square(5); // 25
function square(x) {
return x * x;
}
// 함수 표현식 호이스팅 안됨 X
console.log(add(1,2)); // TypeError: add is not a function
var add = function(a,b) {
return a + b;
}
// new Function 호이스팅 안됨 X
showName(); // TypeError: showName is not a function
var showName = new Function("", console.log("KIM"));변수의 호이스팅
var 키워드로 변수를 선언해야 호이스팅 현상이 일어나는 것을 "볼 수 있다"
// var 키워드 사용 시 호이스팅됨 O
console.log(a); // undefined
var a = "Hello";
console.log(a); // Hello
// var 키워드 미사용 시 호이스팅 안됨 X
console.log(a); // ReferenceError: a is not defined
a = "Hello";
console.log(a);
// let, const 키워드 사용 시 호이스팅 둘 다 안됨 X
console.log(a); // ReferenceError: Cannot access 'a' before initialization
console.log(b);
let a = "hello";
const b = "world";
console.log(a);
console.log(b);그럼 여기서,
"let이랑 const는 호이스팅이 안일어나니까 그냥 그거 두개 쓰면 되지 않나??"
라는 의문이 들 수 있다.
하지만 let과 const도 호이스팅 대상이다. 다만 var와 달리 호이스팅 시 undefined로 변수를 초기화 하지 않기 때문에 예외처리 되면서 에러를 던져준다.
호이스팅 주의할 점
- 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다.
- 함수와 변수를 가급적 코드 상단부에 선언한다.
let/const를 사용한다.
출처
FrontEnd Developer