[CS] 호이스팅

Yeong·2023년 4월 18일

“자바스크립트에서 함수 및 변수 선언이 코드 순서상 먼저 일어나지 않아도 실행할 수 있는 것”

호이스팅은 코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니다.
변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.**

이와 같은 자바스크립트에서의 호이스팅이란 특징으로 인해, javascript에서 변수는 사용된 이후 선언 될 수 있다. (==변수를 사용한 후 선언 할 수 있다)

두가지 예시를 들어보자.

$(document).ready(function(){
    var x;
    x = 5;
    console.log(x);
});

⇒ 변수를 선언 후 변수에 값을 저장한 케이스. 보기에도 문제가 없어보이고 실행 결과도 문제가 없다.

$(document).ready(function(){
x = 5;
console.log(x);
var x;
});

⇒ 변수에 값을 저장/사용 후 선언한 케이스.
에러없이 정상 결과가 나온 이유는 바로 hoisting 때문이다.
(var x; 부분(변수 선언부)을 현재 scope에서 최상단으로 끌어올렸기 때문)

💡 자바스크립트는 선언부만 hoisting할 뿐, 초기화부분까지 hoisting하지않는다.

$(document).ready(function(){
console.log(x);
console.log(y);
var x = 5;
});

x 는 'undefined'를 콘솔에 출력하고 있고,y는undefined Error 을 던지고 있다.

var x 부분은 hoisting 되었지만 초기화(=5)부분은 호이스팅되지 않았기 때문이다.

y는 스코프내에 선언되어 있지 않으므로 Error 를 뱉고 있다.

[결론]
예상치 못한 hoisting 동작으로 인한 에러를 피하기 위해 변수 선언 및 초기화는 최상단에서 해주자.

선언만 호이스팅 대상

JavaScript는 초기화를 제외한 선언만 호이스팅한다. 변수를 먼저 사용하고 그 후에 선언 및 초기화가 나타나면, 사용하는 시점의 변수는 기본 초기화 상태(var 선언 시 undefined, 그 외에는 초기화하지 않음)이다. 예를 들어,

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6; // 초기화

반면, 다음 예제는 선언 없이 초기화만 존재한다. 따라서 호이스팅도 없고, 변수를 읽으려는 시도에서는 ReferenceError 예외가 발생한다.

console.log(num); // ReferenceError
num = 6; // 초기화

변수 호이스팅 (var, let, const 키워드)

Var

전역 스코프이므로 전역변수로 선언된 경우 모든 곳에서 사용이 가능하다.
함수 스코프다. 함수 내에 선언된 경우 함수 범위 내에서만 사용 가능하다
변수 재선언과 수정이 가능하다
변수 선언후에 사용이 가능하다
선택적으로 초기화할 수 있다.
장점 : 간단한 테스트 시에 편리하다
단점 : 코드가 복잡해질수록 어디에 사용되는지 파악하기 힘들다

let, const, function

let과 const로 선언한 변수도 호이스팅 대상이지만, var와 달리 호이스팅 시 undefined
로 변수를 초기화하지는 않는다. 따라서 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생한다.

let

let 변수는 var 변수를 개선한 버전이다.
블록 스코프이다. {블록} 안에서만 가능하다.
블록 밖에서 호출하면 에러가 나온다.
변수 재선언이 불가능하지만 수정은 가능하다.
서로 다른 블록에 같은 이름으로 선언 가능하다(겹치지않는다면).
변수 선언 후에 사용 가능하다

Const

let과 동일하지만 값을 수정할 수 없다는 차이점이 있다.
객체의 속성은 수정할 수없지만 값은 수정할 수 있다

function 특징함수

하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다.
이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.
자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성요소를 가진다.

함수의 이름
괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)
중괄호({})로 둘러싸인 자바스크립트 실행문

변수는 어떻게 생성되며, 호이스팅은 어떻게 이뤄질까?

변수는 3단계에 걸쳐 생성된다.

1단계: 선언 단계(Declaration phase)

변수를 실행 컨텍스트의 변수 객체에 등록한다.이 변수 객체는 스코프가 참조하는 대상이 된다.

💡 var, let, const를 통해 선언

2단계: 초기화 단계(Initialization phase)

변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다.이 단계에서 변수는 undefined로 초기화 된다.

3단계: 할당 단계(Assignment phase)

undefined로 초기화된 변수에 실제 값을 할당한다.

var 키워드로 선언한 변수는 선언 단계와 초기화 단계가 한번에 이뤄진다. 즉, 스코프에 변수를 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화한다.

따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않는다. 다만 undefined를 반환한다. 이후 변수 할당문에 도달하면 비로소 값이 할당된다.

let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 즉, 스코프에 변수를 등록(선언 단계)하지만 초기화 단계는 변수 선언문에 도달했을 때(코드 실행 후) 이뤄진다. 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생한다. 이는 아직 변수가 초기화되지 않았기 때문이다. 즉, 변수를 위한 메모리 공간이 아직 확보되지 않았기 때문이다. 따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없다. 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 ‘일시적 사각지대(Temporal Dead Zone; TDZ)’라고 부른다.