1. 변수 선언 키워드

자바스크립트에서 변수를 선언할 때는 var, let, const라는 세 가지 키워드를 사용할 수 있습니다. 선언된 키워드에 따라서 변수의 특성이 달라지며, 이러한 특성은 변수를 어떻게 다룰지를 결정합니다.

1.1 var

var는 ES6(ES2015) 이전에 사용되던 변수 선언 키워드입니다. var로 선언한 변수는 다시 변수를 선언하는 재선언과 새로운 값을 할당하는 재할당이 가능합니다.

var name = 'weniv';
name = 'licat'; // 재할당
console.log(name);

var name = 'wade'; // 재선언
console.log(name);

var name = 'weniv';
name = 'licat'; // 재할당
console.log(name);

var name = 'wade'; // 재선언
console.log(name);

재선언과 재할당이 가능하기 때문에 var로 선언한 변수는 값을 예측하기 어려워 코드의 가독성이 떨어질 수 있습니다.

1.2 let

let은 ES6에 도입된 변수 선언 키워드로, var의 단점을 보완하기 위해 만들어졌습니다. let으로 선언한 변수는 재할당 은 가능하지만, 재선언 은 불가능합니다.

let name = 'weniv';
name = 'licat'; // 재할당
console.log(name);

let name = 'wade'; // 재선언 시 오류

let name = 'weniv';
name = 'licat'; // 재할당
console.log(name);

let name = 'wade'; // 재선언 시 오류

1.3 const

const도 ES6에 도입된 변수 선언 키워드로, 재선언과 재할당이 불가한 변수를 선언할 때 사용합니다.

const name = 'weniv';
name = 'licat'; // 재할당 오류

const name = 'licat'; // 재선언 오류
console.log(name);

const name = 'weniv';
name = 'licat'; // 재할당 오류

const name = 'licat'; // 재선언 오류
console.log(name);

const로 선언한 변수는 재할당이 불가하기 때문에 선언과 함께 값을 할당해주어야 합니다. 만약 값을 할당하지 않으면 에러가 발생합니다.

const name; // 처음에 값을 할당하지 않으면 에러가 발생합니다.
const name = 'weniv';

const name; // 처음에 값을 할당하지 않으면 에러가 발생합니다.
const name = 'weniv';

2. 키워드 선택하기

ES6(2015) 이후에는 var보다는 let과 const를 사용합니다. 그 중에서도 const를 사용하는 것을 보다 권장합니다. 그 이유는 다음과 같습니다.

의도하지 않은 값의 변경 방지 const를 사용하면 변수의 값이 한 번 할당되면 재할당 될 수 없습니다. 따라서 의도하지 않은 값의 변경을 방지할 수 있습니다. 이것은 코드의 예측 가능성을 높이며, 따라서 에러가 발생되는 상황(버그)을 줄일 수 있습니다.
가독성 향상

const를 사용하면 다른 개발자들이 변수의 값이 변경될 가능성이 없다는 것을 빠르게 인지할 수 있으며, 반드시 초기화를 해야하기 때문에 어떤 데이터가 사용되는지 초기에 확인 할 수 있습니다. 이것은 코드의 가독성(잘 읽히는 것)을 높이고 유지 보수성(누군가 수정을 잘 할 수 있게 하는 것)을 향상시킵니다.

그러나 변수의 가리키는 값이 반드시 변경되어야 하는 경우에는 let을 사용해야 합니다. 예를 들어 산술 연산과 같은 연산자로 값이 변경이 되어야 할 때에는 let을 사용해야 합니다. 따라서 const와 let을 적절하게 사용하여 코드를 작성하는 것이 중요합니다.

저는 강의할 때 이렇게 말합니다. const로 선언하고 문제 생기면 let으로 변경하세요!

3. 스코프와 호이스팅

3.1 스코프

스코프(scope)는 변수의 유효 범위를 의미합니다. 즉, 변수가 접근 가능한 범위를 정의합니다. 자바스크립트에서는 다음과 같은 스코프 유형이 있습니다.

전역 스코프(Global): 코드 어느 곳에서나 접근할 수 있는 변수
함수 스코프(Function): 함수 내에서만 접근할 수 있는 변수
블록 스코프(Block): 블록 내에서만 접근할 수 있는 변수

전역 스코프

코드 어디서든 접근할 수 있는 변수를 전역 스코프라고 합니다. 전역 스코프로 선언된 변수는 어디서든 접근할 수 있습니다.

let value = 'hello';
console.log(value);

function func1() {
   console.log(value);
}
func1();

let value = 'hello';
console.log(value);

function func1() {
   console.log(value);
}
func1();

함수 스코프

var 키워드로 선언한 변수는 함수 스코프를 가집니다. 함수 스코프는 함수 내에서만 접근할 수 있는 변수를 의미합니다. 함수 스코프는 함수가 호출될 때 생성되며, 함수가 종료되면 사라집니다. 함수 내에서 선언된 변수는 함수 외부에서는 접근할 수 없습니다.

function func1() {
   var value = 'hello';
   console.log(value);
}
func1();

// 함수 외부에서는 접근할 수 없습니다.
console.log(value);

function func1() {
   var value = 'hello';
   console.log(value);
}
func1();

// 함수 외부에서는 접근할 수 없습니다.
console.log(value);

블록 스코프

let과 const로 선언된 변수는 블록 스코프를 가집니다. 블록 스코프는 중괄호({})로 둘러싸인 범위 내에서만 접근할 수 있습니다. 블록 스코프는 let과 const로 선언된 변수가 블록 내에서만 유효하다는 것을 의미합니다.

if(true) {
   let value = 'hello';
   console.log(value);
}

// 블록 외부에서는 접근할 수 없습니다.
console.log(value);

if(true) {
   let value = 'hello';
   console.log(value);
}

// 블록 외부에서는 접근할 수 없습니다.
console.log(value);

var로 선언한 변수는 블록 스코프를 가지지 않기 때문에 블록 외부에서도 접근할 수 있습니다. 따라서 코드가 복잡해질 경우 변수의 값이 예측하기 어려워질 수 있습니다.

var value = 'hello';
console.log(value);
if(true) {
   var value = 'world';
   console.log(value);
}
console.log(value);

var value = 'hello';
console.log(value);
if(true) {
   var value = 'world';
   console.log(value);
}
console.log(value);

블록은 무엇인가요? 블록(Block)은 중괄호({})로 둘러싸인 코드의 집합을 의미합니다. 블록은 자바스크립트 문법에서 코드의 범위를 정의하는데 사용됩니다. 블록은 조건문, 반복문, 함수 등에서 사용됩니다.

// 조건문
if (true) {
   let value = 'hello';
   console.log(value);
}
console.log(value);

// 조건문
if (true) {
   let value = 'hello';
   console.log(value);
}
console.log(value);

// 함수
function func1() {
   let value = 'hello';
   console.log(value);
}
func1();

console.log(value);

// 함수
function func1() {
   let value = 'hello';
   console.log(value);
}
func1();

console.log(value);

3.2 호이스팅

이렇게 무언가를 끌어올리는 장치를 영어로 호이스트(hoist)라고 합니다.

호이스팅(Hoisting)은 자바스크립트의 변수 선언이 스코프의 최상단으로 끌어올려지는 현상을 의미합니다. 즉, 변수를 선언하기 전에 사용할 수 있는 것처럼 보이는 현상입니다. 이러한 현상이 발생하는 이유는 코드가 실행되기 전 자바스크립트 엔진이 선언을 먼저 처리하기 때문입니다.

var의 호이스팅

var로 선언된 변수는 선언이 호이스팅 되었을 때, undefined로 초기화됩니다. 따라서 변수를 선언하기 전에 참조해도 오류가 발생하지 않습니다.

console.log(name); // undefined
var name = 'weniv';
console.log(name); // 'weniv'

console.log(name); // undefined
var name = 'weniv';
console.log(name); // 'weniv'

위 코드는 내부적으로 다음과 같이 동작합니다.

var name; // 선언이 최상단으로 호이스팅
console.log(name);
name = 'weniv';
console.log(name);

var name; // 선언이 최상단으로 호이스팅
console.log(name);
name = 'weniv';
console.log(name);

하지만 호이스팅은 코드의 가독성을 떨어뜨릴 수 있습니다.

let과 const의 호이스팅

let과 const로 선언된 변수는 호이스팅이 발생하지만, 초기화가 이루어지기 전까지는 참조할 수 없습니다. 따라서 변수를 선언하기 전에 참조하면 ReferenceError가 발생합니다. 초기화가 이루어지기 전까지는 변수에 접근할 수 없으며, 이를 일시적 사각지대(Temporal Dead Zone) 라고 합니다.

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

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

let과 const는 TDZ를 통해 코드의 가독성을 높이고, 의도하지 않은 결과를 방지할 수 있습니다.

JavaScript 에센셜

변수의 특징