Javascript - var, let, const 완벽하게 이해하기

Javascript - var, let const 완벽하게 이해하기

 

자바스크립트는 웹 개발에서 클라이언트 측 프로그래밍의 주요 언어로 사용되어 왔습니다. ECMAScript 2015 (ES6)의 도입으로 변수를 선언하는 방법이 var, let, const 세 가지로 확장되었습니다. 이 세 가지 변수 선언의 차이점을 이해하는 것은 효율적이고 깔끔한 최신 자바스크립트 코드를 작성하는 데 중요합니다.
이 블로그 글에서는 var, let, const의 뉘앙스를 깊이 파고들어 각각의 스코프, 호이스팅 동작 및 사용 사례를 살펴볼 것입니다. 또한 예제를 제공하여 개념을 더 잘 이해하고 자신의 코드에 적용할 수 있도록 도와드리겠습니다.

 

1. Var:  자바스크립트의 원래 변수 선언

자바스크립트 초기부터 사용되어 온 'var'는 변수를 선언하는 가장 널리 알려진 방법입니다. 그러나 특이한 점이 몇 가지 있어 특히 자바스크립트 초보자들에게 혼란을 줄 수 있습니다.

 

함수 스코프

var와 다른 두 선언, let과 const의 가장 큰 차이점은 var는 함수 스코프라는 것입니다. 함수 내에서 var로 선언된 변수는 해당 함수 내에서만 접근할 수 있습니다.

 

예시:

function exampleFunction() {
  var x = 10;
  console.log(x); // 10
}

exampleFunction();
console.log(x); // ReferenceError: x is not defined

 

 

호이스팅

var의 또 다른 독특한 특징은 호이스팅입니다. 호이스팅은 var를 사용하여 선언된 변수가 컴파일 단계에서 해당 범위(전역 또는 함수)의 맨 위로 올려지는 것을 의미합니다. 이로 인해 선언 행보다 먼저 변수에 접근할 수 있게 됩니다.

 

예시:

console.log(y); // undefined
var y = 20;
console.log(y); // 20

 

---

2. Let: 블록 스코프 변수

ES6에 도입된 'let' 키워드는 var와 관련된 몇 가지 문제와 이상한 점을 해결합니다. 가장 큰 개선 사항 중 하나는 블록 스코핑으로, var보다 더 예측 가능하고 오류가 적게되어 있습니다.

 

블록 스코프

let으로 선언된 변수는 선언된 블록 내에서만 접근할 수 있습니다. 이는 if 문, for 루프 및 기타 블록 구조를 포함합니다.

 

예시:

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

 

호이스팅 없음

var와 달리 let은 변수 선언을 호이스트하지 않습니다. 이는 코드에서 예기치 않은 동작을 방지하는 데 도움이 됩니다. 선언 행 전에 let으로 선언된 변수에 접근하려고 하면 ReferenceError가 발생합니다.

 

예시:

console.log(b); // ReferenceError: b is not defined
let b = 40;

 

3. Const: 변경 불가능한 블록 스코프 변수

Const는 또 다른 ES6 추가 사항으로, 변경 불가능한 변수를 선언할 수 있게 해줍니다. let과 마찬가지로 블록 스코핑과 호이스팅이 없는 동작을 공유하지만, const로 선언된 변수에 새 값을 재할당할 수 없는 제약을 추가합니다.

 

불변성

const로 선언된 변수에 값을 할당한 후에는 값을 변경할 수 없습니다. 이를 통해 코드 전체에서 특정 값이 일정하게 유지되도록 할 수 있습니다.

 

예시:

const c = 50;
c = 60; // TypeError: Assignment to constant variable.

 

 

객체와 배열

const는 변수 자체의 재할당만 방지할 뿐, 객체나 배열의 수정을 방지하지는 않는다는 점을 이해하는 것이 중요합니다.

예시:

const obj = { key: "value" };
obj.key = "newValue"; // No error, obj is still mutable

const arr = [1, 2, 3];
arr.push(4); // No error, arr is still mutable

 

 

정리

자바스크립트에서 변수를 선언하는 방법은 var, let, const 세 가지로 나뉩니다. var는 함수 스코프를 가지며 호이스팅이 발생하는 반면, let과 const는 블록 스코프를 가지며 호이스팅이 발생하지 않습니다. const는 불변성을 가지기 때문에 값이 변경되지 않아야 하는 경우에 유용합니다.

이 글을 통해 var, let, const의 차이점과 사용 사례를 이해하셨기를 바랍니다. 이를 자신의 코드에 적용함으로써 더 효율적이고 깔끔한 자바스크립트 코드를 작성할 수 있을 것입니다. 이제 이러한 개념들을 마음속에 각인하고, 자바스크립트 프로젝트에서 적절한 변수 선언을 선택하여 더욱 견고하고 가독성 높은 코드를 구현하세요 !