JavaScript 변수와 상수 정리, ES6 이후 변화와 활용 사례

JavaScript 변수와 상수 정리, ES6 이후 변화와 활용 사례

JavaScript는 ES6(ECMAScript 2015) 이후 변수 선언 방식과 상수의 개념에서 큰 변화를 맞이했습니다. 기존의 var에서 let과 const로 확장되면서 변수와 상수의 관리가 더욱 체계적이고 직관적으로 바뀌었습니다. 이번 글에서는 ES6 이후 추가된 변수 선언 방식과 상수의 특징을 비교하며, 각각의 활용 사례를 알아보겠습니다.

 

 

목차

1. 전통적인 변수 선언: var
2. let의 도입과 활용
3. const: 불변성을 보장하는 상수
4. 블록 스코프와 변수의 생명주기
5. Temporal Dead Zone(TDZ)의 이해
6. 활용 사례: 최적의 코드 작성법
7. 변수 선언의 모범 사례

 

1. 전통적인 변수 선언: var

ES6 이전에는 var 키워드만 사용하여 변수를 선언했습니다. 그러나 var는 아래와 같은 문제점을 가지고 있습니다.

• 전역 스코프(Global Scope)에 쉽게 영향을 미칠 수 있습니다.
• 블록 스코프(Block Scope)를 지원하지 않습니다.
• 호이스팅(Hoisting)으로 인해 변수 선언의 위치가 명확하지 않을 수 있습니다.

console.log(x); // undefined (호이스팅 발생)
var x = 10;

 

 

 

2. let의 도입과 활용

let은 ES6에서 도입된 변수 선언 방식으로, var의 단점을 보완하기 위해 설계되었습니다.

• 블록 스코프를 지원하여 변수의 범위를 명확히 할 수 있습니다.
• 호이스팅은 발생하지만, 초기화되기 전에 접근할 수 없습니다.

{
    let y = 20;
    console.log(y); // 20
}
// console.log(y); // ReferenceError: y is not defined

 

 

 

3. const: 불변성을 보장하는 상수

const는 상수를 선언할 때 사용하며, 선언 후 값을 변경할 수 없습니다. 단, 객체나 배열과 같은 참조형 데이터는 내부 속성 변경이 가능합니다.

특징

• 선언과 동시에 초기화가 필요합니다.
• 기본적으로 불변성을 유지하지만, 참조형 데이터의 경우 내부 속성을 수정할 수 있습니다.

const z = 30;
z = 40; // TypeError: Assignment to constant variable.

const obj = { key: "value" };
obj.key = "new value"; // 가능
console.log(obj); // { key: "new value" }

 

 

 

4. 블록 스코프와 변수의 생명주기

let과 const는 블록 스코프를 따릅니다. 이는 변수가 선언된 블록 내에서만 유효함을 의미합니다.

if (true) {
    let a = 10;
    const b = 20;
    console.log(a, b); // 10, 20
}
// console.log(a, b); // ReferenceError: a is not defined

 

 

 

 

5. Temporal Dead Zone(TDZ)의 이해

let과 const는 선언 전에 접근하려고 하면 Temporal Dead Zone(TDZ)에 의해 ReferenceError를 발생시킵니다.

console.log(myVar); // ReferenceError
let myVar = 50;

 

 

 

6. 활용 사례: 최적의 코드 작성법

변수와 상수를 올바르게 사용하는 방법을 실제 사례를 통해 살펴봅니다.

• const: 불변 데이터, 설정 값, 환경 변수 선언
• let: 반복문, 조건문 등 동적으로 변경되는 변수 선언

const PI = 3.14159; // 상수
let radius = 10;    // 변수
let area = PI * radius ** 2;
console.log(area); // 314.159

 

 

 

7. 변수 선언의 모범 사례

• 가능한 경우 const를 사용하고, 필요한 경우에만 let을 사용합니다.
• 전역 변수를 최소화하여 코드의 의존성을 줄입니다.
• 변수와 상수의 이름을 직관적으로 지정하여 가독성을 높입니다.