IT/면접

Q. JavaScript 호이스팅

뀨뿌뀨뿌 2023. 8. 9. 14:05

❓JavaScript의 호이스팅이란?

- 호이스팅(Hoisting)은 JavaScript에서의 중요한 메카니즘으로 코드 실행 전 함수와 변수이 선언을 메모리에 저장하는 과정
- JavaScript에서 변수와 함수의 선언을 그들이 코드 상에 작성된 위치와 상관 없이 스코프의 최상단으로 끌어올리는 특성을 지칭함

❔호이스팅이 발생하는 이유

- 호이스팅은 JavaScript의 실행 컨텍스트(Execution Context) 생성 과정 중 하나로 인해 발생
- JavaScript는 코드 실행 전에 컴파일 단계에서 변수와 함수 선언을 먼저 메모리에 저장함 -> 변수나 함수를 선언하기 전에도 사용할 수 있게 됨

1. 함수
- 함수 전체가 메모리에 저장됨 -> 함수 선언 전에 호출이 가능해지는 이유

2. 변수
- var: 호이스팅되며, 초기화되지 않은 상태(undefined)로 메모리에 저장됨, 실제 할당은 코드 상에서 해당 변수에 값이 할당되는 지점에서 이루어짐
- let & const: 호이스팅되지만, 초기화 되지 않은 "일시적 사각 지대(Temporal Dead Zone)"상태에서 시작, 변수를 선언하기 전에 접근하면 ReferenceError가 발생함

console.log(sum(2,3));  // 작동합니다. 결과는 5
console.log(name);      // ReferenceError 발생
console.log(age);       // undefined 출력

function(x,y) {
  return x + y;
}

const name = 'hoo00nn';
var age = 25;

- 호이스팅 이해는 버그 방지에 중요함!!
- 변수는 항상 스코프의 상단에서 선언하고 초기화하는 것이 좋음

호이스팅은 JavaScript의 특성으로, 코드 실행 전 변수와 함수의 선언을 해당 스코프의 최상단으로 끌어올립니다.
이 현상은 JavaScript의 실행 컨텍스트 생성 과정 중 발생합니다. JavaScript는 코드 실행 전에 함수와 변수 선언을 메모리에 미리 저장하기 때문에, 선언 이전에도 참조나 호출이 가능합니다.
함수는 전체 내용이 메모리에 저장되므로 선언 전에도 호출이 가능합니다. 반면, 변수는 다르게 동작합니다.
var로 선언된 변수는 undefined로 호이스팅되며, let과 const는 초기화 되지 않은 상태로 호이스팅됩니다. 따라서, let과 const로 선언된 변수를 초기화 전에 참조하면 ReferenceError가 발생합니다.
호이스틩의 특성으로 인해서 변수 선언과 초기화는 항상 스코프의 상단에서 하는 것이 좋다고 생각합니다.