[기술 면접] 호이스팅의 문제점

호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 동작을 의미합니다. 이 동작은 의도치 않은 버그와 예측하기 어려운 코드 동작을 초래할 수 있기 때문에 문제가 될 수 있습니다.

1. 변수 값의 예측 불가

var로 선언된 변수가 호이스팅되면, 코드에서 변수가 선언된 위치와 관계없이 최상단에서 선언된 것처럼 동작합니다. 이로 인해 예상치 못한 undefined 값이 발생하거나, 의도와 다른 동작이 나타날 수 있습니다.

console.log(name); // 출력: undefined
var name = "Alice";
console.log(name); // 출력: "Alice"

2. 재할당과 재선언 문제

var로 선언된 변수는 같은 스코프 내에서 여러 번 재선언할 수 있습니다. 이는 코드의 예측 가능성을 떨어뜨리고, 실수로 변수 값을 덮어쓰는 문제를 일으킬 수 있습니다.

var age = 30;
var age = 25; // 재선언, 기존 변수 값 덮어씀
console.log(age); // 출력: 25

3. 블록 스코프 무시

var는 블록 스코프를 무시하고 함수 스코프만을 따르기 때문에, if, for, while 등의 블록 내에서 선언된 변수가 블록 외부에서 접근 가능하게 됩니다. 이로 인해 스코프에 대한 혼동이 발생할 수 있습니다.

if (true) {
  var message = "Hello, World!";
}
console.log(message); // 출력: "Hello, World!" (블록 외부에서도 접근 가능)

4. 함수 표현식과의 충돌

함수 표현식은 변수에 할당된 형태로 작성될 수 있습니다. 이 경우 호이스팅은 변수를 undefined로 만들어, 함수 호출 전에 예기치 않은 TypeError가 발생할 수 있습니다.

console.log(sayHi); // 출력: undefined
sayHi(); // TypeError: sayHi is not a function

var sayHi = function() {
  console.log("Hi!");
};

호이스팅 때문에 sayHi 변수는 undefined로 평가되며, 함수가 아닌 변수로 인식되어 호출 시 오류가 발생합니다.

 

5. Temporal Dead Zone(TDZ)와의 차이

let과 const는 호이스팅되지만, 호이스팅된 구간에서 접근할 경우 ReferenceError를 발생시켜 오류를 미리 감지할 수 있습니다. 반면, var는 이런 방어를 제공하지 않아서, 초기화 전에 접근해도 undefined로 처리됩니다. 이로 인해 초기화되지 않은 변수에 잘못된 가정을 하게 될 위험이 있습니다.

 

결론

• 예측 불가한 코드 동작: 호이스팅으로 인해 코드가 예상과 다르게 동작할 수 있습니다.
• 스코프 혼란: var는 함수 스코프만을 따르므로, 블록 스코프에 대한 잘못된 이해를 초래할 수 있습니다.
• 재선언 문제: var는 같은 스코프에서 여러 번 재선언할 수 있어, 변수 값이 쉽게 덮어씌워질 수 있습니다.
• 디버깅 어려움: 호이스팅으로 인해 초기화 전에 변수를 참조하는 경우, undefined 값이 나와 디버깅이 어려워질 수 있습니다.

 

참고
ChatGPT