Hoisting과 TDZ

Hoisting

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. - MDN -

 

변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다. 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되는 것이다. 자바스크립트 엔진은 런타임 이전에 소스코드의 평가 과정을 거치면서 소스코드를 실행할 준비를 하는데, 이때 자바스크립트 엔진은 변수 및 함수 선언문을 소스코드에서 찾아내 먼저 실행한다. 그리고 소스코드의 평가 과정이 끝나면 비로소 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄 씩 순차적으로 실행한다. 변수 선언뿐 아니라 var, let, const, function, class 키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)는 호이스팅된다.

 

TDZ

let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다. 또 let 키워드로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다. 또한 var 키워드와 다른 점이 var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 "선언 단계"와 "초기화 단계"가 한번에 진행된다. 따라서 변수 선언문 이전에 변수를 참조할 수 있지만, 초기화 단계에서 undefined로 변수를 초기화하기 때문에 출력하면 undefined를 반환한다. 참고로 선언 단계에서는 스코프에 변수 식별자를 등록해 자바스크립트 엔진에 변수의 존재를 알린다. 또 초기화 단계는 어려운 뜻이 아니라 그냥 맨 처음하는 할당을 초기화라고 한다.

 

그런데 let 키워드로 선언한 변수는 "선언 단계"와 "초기화 단계"가 분리되어 진행된다. 즉 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다. 그러므로 초기화 단계가 실행되기 이전에 변수에 접근하려고 하면 참조 에러가 발생한다. let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점(변수 선언문)까지 변수를 참조할 수 없다. 이와 같이 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대(그 유명한 TDZ)라고 부른다.

 

// 런타임 이전에 선언 단계만 실행되고 변수 초기화는 되지 않았다.
console.log(foo); // 초기화 이전이므로 참조 에러가 발생한다.

let foo; // 변수 선언문에서 초기화 단계 실행
console.log(foo); // undefined

foo = 1;
console.log(foo); // 1

 

결국 let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 보이지만 그렇지 않다. let 키워드로 선언한 변수의 경우 변수 호이스팅이 발생하지 않는다면 전역 변수 foo의 값을 출력해야 하지만, 여전히 호이스팅이 발생하기 때문에 참조 에러가 뜨게 된다. 참고로 let, const, function을 포함한 모든 선언을 호이스팅하지만 let, const, class를 사용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작한다.

 

let foo = 1; // 전역 변수
{
    console.log(foo); // 참조 오류
    let foo = 2 // 지역 변수
}

 

Parameter(매개변수)와 Argument(인수)의 차이

함수를 정의할 때 사용되는 변수를 Parameter, 실제로 함수가 호출될 때 넘기는 변수값을 Argument라고 한다.

오라클에서 설명하는 차이점

해석하자면 다음과 같다. "매개변수는 메서드 선언의 변수 목록을 나타냅니다. 인수는 메서드가 호출될 때 전달되는 실제 값입니다."

매개변수(Parameter)와 인수(Argument)의 차이점은 무엇일까?