[JavaScript] var, let, const 차이 정리 (중복 선언, 호이스팅)

자바스크립트에서 변수를 선언하는 방법은 var, let, const가 있다.

이번 글에서는 각각의 특징과 차이에 대해 정리해보려고 한다.

 

 

🧩 스코프(Scope)란?

var, let, const를 다루기 전에 스코프 개념에 대해 먼저 정리하고자 한다.

스코프는 변수가 유효하게 사용될 수 있는 범위를 의미한다.

(→ 어디까지 이 변수를 사용할 수 있는지를 결정하는 규칙)

자바스크립트는 크게 두 가지 스코프가 있다.

• 함수 스코프(Function Scope)
  • 함수 단위로 변수가 구분된다.
  • 함수 외부에서는 함수 내부 변수를 참조할 수 없다.
• 블록 스코프(Block Scope)
  • {} 블록 단위로 변수가 구분된다.
  • if, for, while 같은 제어문 내부에서 선언한 변수는 블록 안에서만 유효하다.

 

 

🔹 var의 특징과 문제점

var number; // 선언
number = 1; // 할당

var number1 = 1; // 선언과 할당을 동시에
number1 = 2; // 재할당 가능

var 키워드는 선언과 할당을 따로 할 수도 있고

동시에(선언 + 할당) 할 수도 있으며 값의 재할당도 가능하다.

하지만 var는 현재 프로젝트에서 잘 사용하지 않을 뿐더러

자바스크립트를 처음 배울 때 var는 사용하지 말라고 배우기도 한다.

그 이유는 아래와 같다.

 

1) 중복 선언 허용

var number1 = 1;
console.log(number1) // 1;

...

var number1 = 3; // 같은 이름으로 재선언
console.log(number1); // 3

var는 똑같은 이름으로 변수를 한 번 더 선언하게 되면

에러가 발생하는 것이 아니라 이전 변수를 덮어쓰게 된다.

이러한 중복 선언 허용은 코드가 길어질수록 실수를 유발할 수 있기 때문에

안정성이 떨어지고 유지보수에 불리하다.

 

2) 함수 스코프

{
  var x = 3;
}

function myFunction() {
  var y = 4;
}

console.log(x); // 3
console.log(y); // Uncaught ReferenceError: y is not defined

var는 함수스코프(function scope)를 가진다.

그렇기 때문에 블록({}) 내부에서 선언해도 함수가 아니라면 전역에서 접근할 수 있다.

이로 인해 if, for 등 블록문 내에서 변수를 안전하게 관리하기 어렵다.

 

3) 호이스팅 (Hoisiting)

console.log(number); // undefined
var number = 2;
console.log(number); // 2

// 코드 동작 방식
var number; // 호이스팅으로 선언부가 최상단으로 이동되고 undefined로 초기화됨
console.log(number); // undefined
number = 2; // 할당은 원래 위치에서 실행됨
console.log(number); // 2

호이스팅(Hoisting)은 자바스크립트 엔진이

코드를 실행하기 전에 변수 선언을 먼저 메모리에 올려두는 동작 방식이다.

(변수 선언부가 위로 끌어올려짐)

 

var는 호이스팅이 될 때, undefined로 자동 초기화가 되기 때문에

선언 전에 참조해도 에러가 발생하지 않는다.

var는 이와 같이 예측하기 어려운 동작을 만들어낼 수 있어서 문제가 된다.

 

 

🔶 let과 const

위와 같은 var의 단점을 보완하기 위해

ES2015부터 let과 const라는 키워드가 등장했다.

let a; // 선언
a = 1; // 할당
let b = 2; // 선언과 동시에 할당
b = 3; // 재할당 가능

const c = 10; // 선언과 동시에 할당 필요
c = 20; // 재할당 불가 ❌

let은 var 처럼 선언, 할당, 선언과 동시에 할당, 재할당이 가능하다.

const는 선언과 동시에 초기화를 해야하고, 재할당도 불가능하다.

 

⚠️ const 불변성

const obj = { a: 1 };
obj.a = 2; // 객체 내부 값 변경 가능 ✅
console.log(obj); // { a: 2 }

obj = { b: 3 }; // 재할당 불가 ❌

const arr = [1, 2, 3];
arr.push(4); // 배열 내부 값 변경 가능 ✅
console.log(arr); // [1, 2, 3, 4]

arr = [5, 6, 7]; // 재할당 불가 ❌

const로 선언한 변수를 재할당할 수 없다고 해서 값이 절대로 변경되지 않는 것은 아니다.

객체나 배열의 내부 값은 수정할 수 있다.

→ 변수의 참조 값을 바꿀 수 없는 것이지 내부 값이 불변인 것은 아님

 

🔶 let과 const의 장점

장점1) 블록 스코프

{
  let x = 3;
  const y = 4;
}

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

let과 const는 var와 달리 블록 스코프를 가진다.

중괄호로 감싸진 블록 안에서만 변수에 접근할 수 있어서

var보다 안전하게 변수를 사용할 수 있다.

 

장점2) 중복 선언 불가

let name = "김철수";
let name = "박영희"; // SyntaxError: Identifier 'name' has already been declared

const age = 25;
const age = 30; // SyntaxError: Identifier 'age' has already been declared

let과 const는 같은 스코프에서

중복 선언을 허용하지 않기 때문에 실수를 방지할 수 있다.

 

장점3) TDZ (Temporal Dead Zone)

console.log(a); // ReferenceError
let a = 5;

let과 const도 호이스팅은 되지만, TDZ가 존재하기 때문에 이를 막을 수 있다.

TDZ는 우리말로 하면 일시적 사각지대라는 뜻으로,

let과 const로 선언된 변수가 선언된 스코프 내에서 초기화되기 전까지의 구간을 말한다.

 

이 구간에서는 변수에 접근할 수 없어서 에러가 발생하게 된다.

이로 인해 let과 const는 var보다 안전하게 사용할 수 있고

예측 불가능한 동작을 방지할 수 있다.

 

 

☀️ 참고) 변수 선언 권장

const userName = "김철수"; // 일반 변수
const MAX_RETRY_COUNT = 3; // 상수
let currentCount = 0; // 재할당이 필요한 변수

• 기본적으로 const를 우선 사용한다.
• 값의 재할당이 필요한 경우에만 let을 사용한다.
• var는 사용하지 않는다.
• 변수는 카멜케이스(camelCase), 상수는 대문자+스네이크 케이스(UPPER_SNAKE_CASE)로 구분한다.

 

 

✅ 정리

구분	var	let	const
스코프	함수 스코프	블록 스코프	블록 스코프
중복 선언	허용	불가	불가
재할당	가능	가능	불가
호이스팅	선언 + undefined 초기화	선언만, TDZ 적용	선언만, TDZ 적용

 

 

📚 참고 자료

https://ko.javascript.info/variables

변수와 상수

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%8A%A4%EC%BD%94%ED%94%84-%ED%95%A8%EC%88%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85

📚 호이스팅(Hoisting) 발생 원리를 알아보자

https://ccomccomhan.tistory.com/288

[JS] - TDZ(Temporal Dead Zone)이란? 간단하고 쉽게 이해하기 (예제코드, 임시 사각 지대란?)