[JS] var, let, const 차이점

IMJOne·2023년 3월 2일

목록 보기

3/5

🪄 변수 (Variable)

프로그래밍 언어에서 변수(Variable)란 이름이 주어진 데이터 보관함이다.

변수를 선언하고 값을 할당하면 메모리 어딘가에 값이 보관되고, 해당 변수는 값이 보관된 메모리의 주소를 가리키게 된다. 자바스크립트에서는 var, let, const 키워드를 통해 변수를 선언할 수 있다. 이번 포스팅에서는 이 세 가지 키워드의 차이점에 대해 정리해보고자 한다.

1. var

재선언 및 재할당 가능 ✔️
호이스팅 적용 ✔️
블록 스코프

var은 호이스팅이 적용된다.
변수 선언 키워드 없이 선언 및 할당이 가능하기 때문에, 변수를 선언하기도 전에 값에 접근할 수 있다. 변수를 유연하게 사용할 수 있지만, 해당 코드가 선언인지 재할당인지 구분하기 어렵다.

age = 4;
var age;
console.log(age); // 4

또한 var은 이미 선언한 변수와 동일한 이름으로 중복 선언이 가능하다.
즉, 가장 마지막에 할당된 값이 최종적으로 변수에 저장되는 것이다.

var title = 'book';
console.log(title); // book

var title = 'movie';
console.log(title); // movie

title = 'music';
console.log(title); // music

이처럼 동일한 이름의 변수를 여러 번 재선언할 경우, 이전에 선언하면서 할당했던 값이 덮어씌워지기 때문에 예상치 못한 문제가 발생할 수 있다. 일반적인 코딩 방식과 어긋날 뿐더러 코드의 가독성과 유지보수성 또한 떨어진다.

마지막으로 가장 치명적인 단점은, 바로 함수 레벨 스코프 라는 점이다.
블록 레벨 스코프를 지원하기 않기 때문에 지역 변수와 전역 변수의 구분이 없다.

var scope = 'outer';
{
  var scope = 'inner';
}
console.log(scope); // inner

오로지 함수 내부에 선언된 변수만 지역 변수로 한정되며, 나머지는 모두 전역 변수로 간주한다.

function example() {
  var poo = '💩';
}
console.log(poo); // ReferenceError: poo is not defined

💡 function, if, for, while, try/catch 문 등의 코드 블록 {} 내부에서 선언된 변수는 지역 변수로 간주하며, 외부에서 지역 변수에 접근할 시 에러가 발생한다.

2. let

Mutable (read/write)
재할당 가능 ✔️
재선언 및 호이스팅 ❌

let은 중복 선언이 불가능하며, 호이스팅 또한 적용되지 않는다. 따라서 변수를 선언하지 않은 채로 값에 접근하면 에러가 발생한다. 하지만 변수에 새로운 값을 재할당하는 것은 가능하다.

let title = 'book';
console.log(title); // book

title = 'music';
console.log(title); // music

let title = 'movie';
console.log(title); // 'title' has already been declared

또한 블록 레벨 스코프를 지원하기 때문에, 블록 내부에서 선언된 변수는 지역 변수로 간주한다.

let scope = 'outer';
{
  let scope = 'inner';
  console.log(scope); // inner
}
console.log(scope); // outer

3. const

Immutable (read only)
재선언 및 재할당 불가능 ❌
호이스팅 적용 ❌

const는 상수 변수라고도 불리며, let과 마찬가지로 블록 레벨 스코프를 지원한다.
하지만 재선언 및 재할당 모두 불가능하기 때문에 호이스팅 또한 적용되지 않는다.

const title = 'book';
console.log(title); // book

const title = 'movie';
console.log(title); // SyntaxError: Identifier 'title' has already been declared

title = 'music';
console.log(title); // TypeError: Assignment to constant variable

const는 한 번 할당하면 값을 절대 변경할 수 없다.
이는 객체도 마찬가지다. 한 번 객체를 할당하고 나면 이후에는 다른 객체로 재할당이 불가능하다. 하지만 아래 예시를 보면, 변수를 const로 선언했음에도 불구하고 apple의 프로퍼티가 정상적으로 변경된 것을 볼 수 있다. 왜 그럴까?

const apple = {
  name: 'apple',
  color: 'red',
  emoji: '🍎',
}
apple.color = 'green';
apple.emoji = '🍏';
console.log(apple); // { name: 'apple', color: 'green', emoji: '🍏' }

여기서 apple 이라는 변수는 객체가 보관된 메모리의 주소를 담고 있다.
객체의 프로퍼티를 수정한다는 것은 객체 자체를 다른 객체로 변경하는 것이 아닌, 해당 변수가 가리키고 있는 메모리의 주소를 따라가서 그 주소에 있는 객체 안의 데이터를 변경하는 것이다.
즉, 변수가 가리키고 있는 메모리 셀에 다른 객체를 재할당하는 것이 불가능할 뿐, 해당 메모리 셀에 저장된 주소가 가리키는 객체의 프로퍼티를 재할당하는 것은 가능하다는 말이다.