JS - var 선언과 호이스팅(Hoisting)

자바스크립트에서 var 키워드는 변수를 선언할 때 사용되며, 호이스팅(Hoisting)이라는 특수한 동작을 합니다. 

 

var 선언과 호이스팅(Hoisting)

var 선언과 호이스팅(Hoisting)

 

1. var 선언과 호이스팅이란?

2. var과 호이스팅 예제

3. 결론

※ 위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

 

var 선언과 호이스팅이란?

var 선언:

• var는 자바스크립트에서 변수를 선언하는 키워드입니다.
• 함수 스코프(function scope)를 가집니다.

호이스팅:

• 호이스팅은 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 자바스크립트의 동작 방식입니다.
• var로 선언된 변수는 선언부만 호이스팅되며, 할당은 호이스팅되지 않습니다.

 

 

var 과 호이스팅 예제

1) 기본 호이스팅 동작

console.log(x); // undefined
var x = 10;
console.log(x); // 10

1. var x = 10;은 두 부분으로 나뉩니다:

• var x; (선언)
• x = 10; (할당)

2. 선언부(var x;)는 호이스팅되어 코드의 최상단으로 끌어올려집니다.
3. 따라서 첫 번째 console.log(x)는 undefined를 출력합니다.
4. 할당부(x = 10;)는 원래 위치에서 실행되므로 두 번째 console.log(x)는 10을 출력합니다.

 

 

2) 함수 스코프와 호이스팅

function example() {
  console.log(y); // undefined
  var y = 20;
  console.log(y); // 20
}
example();

1. var y = 20;은 함수 스코프 내에서 호이스팅됩니다.
2. 선언부(var y;)는 함수의 최상단으로 끌어올려집니다.
3. 따라서 첫 번째 console.log(y)는 undefined를 출력합니다.
4. 할당부(y = 20;)는 원래 위치에서 실행되므로 두 번째 console.log(y)는 20을 출력합니다.

 

 

3) 중복 선언과 호이스팅

var z = 5;
console.log(z); // 5
var z = 15;
console.log(z); // 15

1. var는 동일한 변수를 중복 선언할 수 있습니다.
2. 첫 번째 var z = 5;는 z를 선언하고 5를 할당합니다.
3. 두 번째 var z = 15;는 z를 다시 선언하고 15를 할당합니다.
4. 따라서 두 번째 console.log(z)는 15를 출력합니다.

 

 

4) 호이스팅과 함수

console.log(greet()); // "Hello, World!"

function greet() {
  return "Hello, World!";
}

1. 함수 선언(function greet())은 전체가 호이스팅됩니다.
2. 따라서 console.log(greet())는 함수가 선언되기 전에 호출되어도 정상적으로 동작합니다.

 

 

5) var 과 블록 스코프

if (true) {
  var a = 30;
}
console.log(a); // 30

1. var는 블록 스코프(block scope)를 무시하고 함수 스코프만 인식합니다.
2. if 블록 내에서 선언된 a는 블록 외부에서도 접근 가능합니다.
3. 따라서 console.log(a)는 30을 출력합니다.

 

6) 호이스팅과 let, const 비교

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

1. let과 const는 호이스팅되지만, TDZ(Temporal Dead Zone)에 의해 초기화 전에 접근할 수 없습니다.
2. 따라서 console.log(b)는 ReferenceError를 발생시킵니다.

 

 

결론

var 선언과 호이스팅은 자바스크립트의 중요한 개념입니다. var는 함수 스코프를 가지며, 선언부가 호이스팅되어 코드의 최상단으로 끌어올려집니다. 하지만 할당은 호이스팅되지 않기 때문에, 변수를 사용하기 전에 선언과 할당을 모두 완료하는 것이 좋습니다. 또한, let과 const는 블록 스코프를 가지며, TDZ로 인해 초기화 전에 접근할 수 없습니다. 따라서 현대 자바스크립트에서는 var 대신 let과 const를 사용하는 것이 권장됩니다.