호이스팅에 대해 설명해주세요.
면접용
호이스팅(Hoisting)은 자바스크립트에서 변수와 함수 선언이 스코프 내의 최상단으로 끌어올려지는 현상입니다. 중요한 점은 선언만 끌어올려지고, 초기화는 실행 시점에서 이루어진다는 것입니다.
예를 들어, var
로 선언된 변수는 호이스팅되지만 초기화가 나중에 이루어지므로, 초기화 전에는 undefined
가 출력됩니다.
예시를 들자면 코드에서:
이 코드에서 a
는 호이스팅되어 최상단으로 올라가지만, 초기화 a = 10
은 실행 시점에 이루어지기 때문에 첫 번째 console.log
에서는 undefined
가 출력됩니다.
하지만 let
이나 const
는 호이스팅되긴 하지만, 초기화 전에 접근하려고 하면 ReferenceError가 발생합니다.
예를 들어:
이는 '일시적 사각지대(TDZ)' 때문인데, let
과 const
는 선언된 시점까지 초기화되지 않기 때문에 접근할 수 없습니다.
그리고 함수 선언문은 변수와 다르게 선언, 초기화, 할당이 동시에 이루어지기 때문에, 선언 전에 호출해도 정상적으로 실행됩니다.
결론적으로, 호이스팅은 변수나 함수의 선언을 최상단으로 끌어올려 주지만, 초기화 시점은 따로 처리되기 때문에 var
, let
, const
, 함수 선언의 차이를 잘 이해하고 사용하는 것이 중요합니다.
개념 설명
1. 스코프란?
범위( 함수 범위, 블록 범위, 전역 범위)
변수나 함수가 유효한 범위
[ 오류 발생 ] a 라는 변수 모르겠다!
호이스팅과 스코프가 어떤 관계??
호이스팅은 선언을 스코프 내에서 이동시키는 과정이며, 스코프는 그 선언에 접근 가능한 경계를 정의함
예를 들어, 함수 내부에서 선언된 변수는 해당 함수의 스코프를 벗어나면 접근할 수 없음
2. 호이스팅이란?
변수와 함수가 초기화 되기전에 메모리 상에 먼저 올라가는 현상
실행 시점에서 선언된 변수와 함수가 미리 메모리에 할당됨
변수와 함수의 선언은 호이스팅되지만, 초기화는 선언 방식에 따라 다르게 처리됨
변수나 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 자바스크립트의 특징
단 , es6에서 등장한 방식인 let과 const 선언한 변수들은 호이스팅이 되지만 초기화 전에 접근 할 수 없음
1️. 변수와 함수의 호이스팅 차이
변수와 함수 모두 호이스팅이 동일하게 동작할까?
변수 호이스팅
변수 선언이 코드의 최상단으로 끌어올려지는 현상
초기화는 실행 단계에서 이루어지므로, 초기화 전에 참조하면
undefined
를 반환var
변수: 선언과 동시에 초기화
let
과const
변수: 선언은 호이스팅되지만, 초기화 전에 참조하면ReferenceError
발생.변수선언을 맨위로 호이스팅함, but 변수를 초기화 시키지 않음
왜 선언문 이전에 접근하면 에러??
⇒일시적 사각지대(TDZ)때문
let
과const
변수는 일시적 사각지대(TDZ, Temporal Dead Zone)에 놓여 있음.선언부터 초기화가 이루어지기 전까지의 구간
TDZ는 프로그래머가 초기화되지 않은 변수에 접근하지 못함
함수 호이스팅
함수 선언문은 선언, 초기화, 할당이 동시에 호이스팅
따라서 선언 이전에 호출해도 정상적으로 실행 가능
2️. 그럼 왜 함수는 선언과 초기화 모두 호이스팅 되는 것일까??
function 키워드로 선언한 함수
선언, 초기화, 할당 단계가 내부적으로 동시에 진행
변수
선언과 초기화를 한 구문으로 코딩했어도 내부적으로는 두 단계에 걸쳐서 실행됨
3️. 자바스크립트는 인터프리터 언어인데 어떻게 호이스팅 현상이 일어날 수 있음?
js 엔진은 평가와 실행이라는 두 단계를 거쳐 코드를 실행하기 때문!
1.실행 전 자바스크립트 코드를 먼저 한번 읽음 (코드 평가)
2.호이스팅이 처리되는 파싱 단계에서는 호이스팅뿐만 아니라, 구문트리와 실행 컨텍스트를 생성하는 작업도 함께 수행됨
코드 평가 단계: 코드를 읽고, 선언 정보를 등록하며, 실행 환경을 준비
실행 단계: 실제로 코드를 실행하면서 값을 할당하거나 연산 수행.
=>코드평가단계 및 실행 단계에 대한 예제
코드 평가 단계:
var x;
선언이 메모리에 등록, 값은 아직undefined
로 초기화됨첫 번째
console.log(x);
는undefined
를 출력이후
x = 5;
할당 코드가 실행 단계에서 처리
실행 단계:
첫 번째
console.log(x);
실행:x
의 값은undefined
x = 5;
실행: 변수x
에5
가 할당됨두 번째
console.log(x);
실행:x
의 값은5
Last updated