let과 const 심화 개념 - const의 참조 고정과 var를 요즘 안쓰는 이유

JavaScript의 let과 const는 ES6에서 도입된, 기존의 var 키워드에 비해 몇가지 개선된 개념입니다. 오늘은 const의 참조 고정 개념과 var 사용이 지양되는 이유에 대해 자세히 알아보겠습니다.

 

 

 

 

 

const의 참조 고정

const는 상수를 선언하는 데 사용되며, 변수를 선언할 때 초기화해야 하고, 이후에는 재할당이 불가능합니다. 여기까진 많이들 알고 계셨지만, 자바스크립트 변수와 관련된 심화 개념을 익히기 위해서는 const의 참조 고정이라는 개념을 이해하는 것이 중요합니다.

 

 

 

참조와 메모리

JavaScript에서 객체, 배열, 함수와 같은 복합 데이터 타입은 변수에 참조(Reference)로 저장됩니다. 이는 변수가 실제 데이터가 저장된 메모리 주소를 가리킨다는 것을 의미합니다.

 

 

• 기본형 데이터 타입(Primitive types): 숫자, 문자열, 불리언 등의 데이터는 변수에 직접 값이 저장됩니다.
• 참조형 데이터 타입(Reference types): 객체와 배열 등은 메모리의 다른 위치에 데이터가 저장되고, 변수는 그 위치를 가리키는 포인터(메모리 주소)를 저장합니다.

 

 

 

const의 동작 방식

const로 변수를 선언하면, 해당 변수의 참조(Reference)가 고정됩니다. 즉, 변수가 가리키는 메모리 주소가 변경될 수 없다는 것을 의미합니다. 하지만, 그 주소가 가리키는 객체나 배열의 내용은 변경할 수 있습니다.

 

 

const obj = { name: "Bella" };
obj.name = "Luna"; // 내부 속성 변경 가능
console.log(obj); // { name: "Luna" }

 

 

위 코드에서 obj는 특정 메모리 주소(예: 0x001)를 가리키며, const로 선언되었기 때문에 obj는 항상 이 주소를 가리킵니다. 그러나 0x001에 저장된 객체의 속성(name)은 변경 가능합니다.

 

 

 

 

다른 객체를 할당하려는 시도

 

obj = { name: "Elena" }; // TypeError: Assignment to constant variable.

 

 

 

이 코드는 새로운 객체 { name: "Elena" }를 메모리의 다른 주소(예를 들어, 0x002)에 생성합니다. obj의 참조를 0x001에서 0x002로 변경해야 하므로, const의 규칙에 위배됩니다. 따라서, JavaScript는 이를 허용하지 않고 TypeError를 발생시킵니다.

 

 

 

 

 

 

var를 요즘 안쓰는 이유

var는 ES6 이전의 자바스크립트에서 변수를 선언하는 유일한 방법이었지만 몇 가지 문제점 때문에 현재는 사용이 지양되고 있습니다. 이 문제점들은 주로 호이스팅(hoisting)과 스코프(scope)와 관련이 있습니다.

 

 

 

 

var의 호이스팅과 스코프

호이스팅(Hoisting): var로 선언된 변수는 스코프의 최상단으로 끌어올려지며, 초기화되기 전에 undefined로 접근할 수 있습니다. 이는 예기치 않은 결과를 초래할 수 있습니다.

 

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

 

var의 호이스팅 특성은 변수 선언이 실제로 코드의 맨 위로 이동하는 것처럼 동작하여, 초기화되지 않은 변수에 접근할 수 있게 합니다.

 

 

 

- 함수 스코프(Function Scope): var는 함수 스코프를 가지며, 이는 블록 {} 내부에서 선언된 변수라도 블록 외부에서 접근할 수 있음을 의미합니다. 이는 변수가 예상치 못한 방식으로 동작하게 만들 수 있습니다.

 

if (true) {
    var x = 10;
}
console.log(x); // 10, 블록 외부에서 접근 가능

 

이 예제에서 x는 블록 외부에서도 접근 가능하여, 블록 스코프를 따르지 않습니다.

 

 

 

 

let과 const의 장점

let과 const는 이러한 문제점을 해결하고 더 명확하고 안정적인 코드를 작성할 수 있게 해줍니다.

 

 

- 블록 스코프(Block Scope): let과 const는 블록 스코프를 가지며, 변수가 선언된 블록 내에서만 유효합니다. 이는 코드의 구조화와 모듈화를 쉽게 만듭니다.

 

if (true) {
    let y = 20;
    const z = 30;
}
console.log(y); // ReferenceError: y is not defined
console.log(z); // ReferenceError: z is not defined

 

 

 

 

- Temporal Dead Zone (TDZ): let과 const는 선언 전에 접근할 수 없는 상태에 놓여 있으며, 이를 Temporal Dead Zone이라고 합니다. 변수 선언 전에 접근하면 ReferenceError가 발생하여, 명확한 초기화와 예측 가능한 코드 동작을 보장합니다.

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는 코드의 가독성, 안정성, 예측 가능성을 높이는 데 기여하며 let과 const의 블록 스코프와 TDZ는 코드의 예기치 않은 오류를 방지합니다. 이러한 이유로, var보다 let과 const가 현대 JavaScript 코드에서 더 많이 사용되고 있습니다.