[Q&A] 변수의 생성과정과 호이스팅에 대해 설명해라

변수의 생성과정

자바스크립트에서 변수를 선언하면, 해당 변수는 생성 및 초기화 과정을 거칩니다. 변수의 생성 및 초기화 과정은 다음과 같습니다

1. 변수 선언: 변수를 선언합니다. 이때 변수의 이름이 메모리에 등록됩니다.
2. 메모리 할당: 변수를 위한 메모리 공간이 할당됩니다. 이때 변수의 타입에 따라 할당되는 메모리 공간의 크기가 결정됩니다.
3. 초기화: 변수에 초기값을 할당합니다. 변수의 타입에 따라, 초기값을 할당하지 않을 수도 있습니다.

변수의 생성 과정이 완료되면, 해당 변수를 사용할 수 있습니다. 그러나 자바스크립트에서는 변수의 생성과정에서 특별한 동작인 "호이스팅(Hoisting)"이 발생합니다.

호이스팅이란?

변수의 선언 부분이 해당 스코프의 맨 위로 끌어올려지는 동작을 의미합니다. 즉, 변수의 선언이 해당 스코프의 맨 위로 옮겨져, 변수를 선언하기 전에도 변수를 참조할 수 있게 됩니다.

 

예를 들어, 다음 코드를 보면

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

위 코드에서 변수 a가 선언되기 전에 console.log 함수를 호출하고 있습니다. 그러나 변수 a는 var 키워드를 사용하여 선언되었기 때문에, 변수의 선언 부분이 해당 스코프의 맨 위로 끌어올려지면서, console.log 함수 호출 전에 a 변수가 이미 선언된 것으로 처리됩니다. 그래서 위 코드에서 console.log 함수 호출 결과는 undefined가 출력됩니다.

이러한 호이스팅 동작은 변수 선언문뿐 아니라, 함수 선언문에서도 발생합니다. 따라서 함수 선언문도 해당 스코프의 맨 위로 끌어올려지기 때문에, 함수를 선언하기 전에 함수를 호출할 수 있습니다.

let,var,const의 차이점?

• var : var 키워드는 함수 스코프를 갖습니다. 함수 내에서 선언된 변수는 함수 내에서만 유효하며, 함수 외부에서는 접근할 수 없습니다. 그러나 var 키워드로 선언된 변수는 호이스팅이 발생하기 때문에, 변수를 선언하기 전에 참조할 수 있습니다.
• let : let 키워드는 블록 스코프를 갖습니다. 블록 내에서 선언된 변수는 해당 블록 내에서만 유효하며, 블록 외부에서는 접근할 수 없습니다. let 키워드로 선언된 변수는 호이스팅이 발생하지 않습니다.
• const : const 키워드는 let과 마찬가지로 블록 스코프를 갖습니다. const로 선언된 변수는 상수(constant)를 나타내기 때문에, 선언과 동시에 초기화되어야 합니다. 이후에 값을 변경할 수 없습니다. const로 선언된 변수는 호이스팅이 발생하지 않습니다.

따라서 변수를 선언할 때, 해당 변수의 스코프와 값을 변경할 수 있는지 여부에 따라 적절한 키워드를 선택해야 합니다. let 키워드는 변수의 값을 변경할 수 있는 경우에, const 키워드는 변수의 값을 변경하지 않아야 하는 경우에 사용됩니다.

var 키워드는 ES6 이전 버전에서 사용되던 키워드이지만, 호환성 문제를 고려할 때나 특수한 경우를 제외하면 let 또는 const 키워드를 사용하는 것이 좋습니다.

함수 스코프와 블록 스코프란?

스코프(scope)는 변수와 함수의 유효 범위를 의미합니다. 변수나 함수는 스코프 내에서만 유효하며, 스코프 외부에서는 접근할 수 없습니다.

JavaScript에서는 기본적으로 함수 스코프를 사용합니다. 함수 내에서 선언된 변수는 함수 내에서만 유효하며, 함수 외부에서는 접근할 수 없습니다. 예를 들어, 아래의 코드에서 x 변수는 foo 함수 내에서만 유효합니다.

function foo() {
  var x = 1;
  console.log(x); // 1
}
foo();
console.log(x); // ReferenceError: x is not defined

ES6(ES2015)에서는 블록 스코프를 사용할 수 있도록 let과 const 키워드가 추가되었습니다. 블록 스코프는 중괄호({})로 감싸인 영역에서 변수가 유효한 범위를 의미합니다. 예를 들어, 아래의 코드에서 x 변수는 if 블록 내에서만 유효합니다.

if (true) {
  let x = 1;
  console.log(x); // 1
}
console.log(x); // ReferenceError: x is not defined

따라서 변수를 선언할 때, 해당 변수가 사용될 스코프를 고려하여 적절한 키워드(var, let, const)를 사용해야 합니다. 함수 스코프는 함수 내에서만 유효한 변수를 선언할 때 사용하고, 블록 스코프는 if, for, while 등의 블록 내에서 유효한 변수를 선언할 때 사용합니다.