[JavaScript] 자바스크립트 호이스팅

공이·2023년 10월 21일

TIL 자바스크립트 호이스팅

JavaScript

목록 보기

1/1

자바스크립트(타입스크립트) 코드를 짜다가 함수가 선언되기도 전에 호출해도 코드가 정상작동 되는 것에 대해 의문을 품게 되었는데, 이것이 자바스크립트의 호이스팅이라는 특성 때문인 것을 알게 되었다.

호이스팅

자바스크립트에서는 함수의 선언 위치가 호출하기 전에는 크게 중요하지 않다. 이는 자바스크립트의 호이스팅 특성 때문이다. 호이스팅은 변수와 함수의 선언을 코드의 상단으로 자동으로 끌어올린다.
변수와 함수 선언은 코드가 실행되기 전에 메모리에 할당되는데, 이를 호이스팅이라고 한다.

자바스크립트는 절차적 언어 아니었나?

자바스크립트는 절차적 언어의 특성도 가지고 있지만, 여러 프로그래밍 패러다임을 지원한다. 그 중 '호이스팅'이라는 특징 때문에 함수를 선언하기 전에도 호출할 수 있다. 이 호이스팅은 코드 실행 전에 변수와 함수 선언을 메모리에 저장하는 과정이다. 함수 선언식에만 적용되며, 함수 표현식에는 적용되지 않는다.

함수 선언식과 함수 표현식의 호이스팅

함수 선언식은 호이스팅의 영향을 받아 선언 전에 호출할 수 있다. 기본 형태는 function functionName() {}이다.

console.log(funcDeclaration()); // "Hello from Function Declaration"
function funcDeclaration() {
  return "Hello from Function Declaration";
}

함수 표현식은 변수에 함수를 할당하는 형태로, 호이스팅의 영향을 받지 않아 선언 전에 호출하면 에러가 발생한다. 기본 형태는 const functionName = function() {};이다. 함수 표현식에는 익명 함수와 기명 함수 둘 다 사용할 수 있다.

console.log(funcExpression()); // TypeError: funcExpression is not a function
var funcExpression = function() {
  return "Hello from Function Expression";
};

일반변수인 let과 const에도 호이스팅이 적용되는가?

var의 호이스팅

var로 선언된 변수는 호이스팅될 때 undefined로 초기화된다.
```
console.log(a); // 출력: undefined
var a = 10;
```

let과 const의 호이스팅

let과 const로 선언된 변수도 호이스팅 된다.
그러나 let과 const로 선언된 변수는 호이스팅 된 후 초기화되지 않는다.

선언 전에 변수에 접근하면 "일시적 사각지대(Temporal Dead Zone, TDZ)"에 들어가게 되며, 이 때문에 에러가 발생한다.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 30;

위의 내용은 let, const, 그리고 var와 호이스팅의 관계를 나타내는 내용이다. let과 const는 호이스팅되긴 하지만, 초기화되지 않는 특징을 가지며, 이로 인해 선언 전에 접근하려고 하면 에러가 발생한다.

그렇다면 함수 표현식도 호이스팅이 적용되는 것 아닌가?

함수 표현식도 호이스팅에 영향을 받는다.
하지만 함수 표현식을 사용하면 변수는 호이스팅되어 undefined로 초기화되지만, 함수 자체는 호이스팅되지 않는다.

예를 들어,

console.log(funcExpression); // 출력 결과는 undefined다.
console.log(funcExpression()); // 에러가 발생하며, "funcExpression is not a function"이라는 메시지가 나온다.

var funcExpression = function() {
   return "Function Expression에서 반환하는 메시지";
};

console.log(funcExpression()); // 이제는 "Function Expression에서 반환하는 메시지"라고 출력된다.

위 예시에서 funcExpression 변수는 호이스팅되기 때문에 처음에 undefined로 평가된다. 그리고 아직 함수가 할당되지 않았기 때문에 호출하려고 하면 에러가 발생한다.
따라서 함수 표현식을 사용할 때는 함수 호출 전에 반드시 함수가 할당되어 있어야 한다.

공이