[JS] var, let, const 차이점

이지수·2024년 1월 25일

Javascript

목록 보기

3/7

ES6 등장 이전에는 var 로 변수를 선언하는 것이 지배적이었습니다.
그럼 왜 let , const 와 같은 새로운 변수 선언 방식이 나오게 된 걸까요?

변수 선언

우선 변수의 선언에 대해 알아보겠습니다. 변수의 정의는 다음과 같습니다.

변수(variable) 는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

위의 정의를 보면 자바스크립트는 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근이 가능합니다.

위의 예시와 함께 살펴보면 변수명(식별자)(myNumber) 은 변수의 값이 아닌
메모리 주소(0012CCGWH80)를 기억하고 있고,
변수명을 사용하면 자바스크립트 엔진이 변수명과 맵핑된 메모리 주소를 통해 해당 메모리에 저장된 값(23)을 반환하는 것입니다.

이처럼 변수에 값을 저장하는 것을 할당(assignment) 이라 하며
변수에 저장된 값을 읽어 들이는 것을 참조(reference) 라 합니다.
그리고 변수명을 자바스크립트 엔진에 알리는 것을 선언(declaration) 이라 합니다.

변수의 선언에 대해 최종적으로 정리해보자면,

변수는 var, let, const 키워드를 사용하여 선언하고 할당 연산자를 사용해 값을 할당합니다.
그리고 식별자인 변수명을 사용해 변수에 저장된 값을 참조합니다.

✅ 스코프 (Scope)

스코프(scope)는 식별자의 유효범위를 뜻하며, 선언된 위치에 따라 유효 범위가 달라집니다.
전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 갖습니다.

전역 변수는 어디에서든지 참조가 가능한 값입니다.
반면, 지역 변수는 함수 몸체 내부를 말합니다. 따라서 지역 변수는 자신의 지역 스코프와 그 하위 지역 스코프에서 유효합니다.

여기서 또다시 스코프는 모든 코드블록을 지역 스코프로 인정하는 블록 레벨 스코프와
함수의 코드블록만을 지역스코프로 인정하는 함수 레벨 스코프로 나뉩니다.

var a = 1

if (true) {
  var a = 5
}

console.log(a) // 5

💡var는 함수 레벨 스코프로 여기서 문제가 발생합니다.
만약 함수가 아닌 코드 블록에서(위의 예시에서는 if문의 코드 블록) 변수를 선언하면
전역 변수로 취급하면서, 기존에 같은 식별자를 가진 변수가 존재했다면 중복 선언이 되어 최하단에서 값이 재할당됩니다.
이렇게 재할당이 발생하면 예상치 못한 결과를 가져올 수 있는 위험이 있습니다.

✅ 호이스팅

자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가 과정을 거치면서 소스 코드를 실행하기 위한 준비를 합니다.

이때 소스코드 평과 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등)을 소스코드에서 찾아내 먼저 실행하고 난 뒤, 비로소 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 진행합니다.

이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것 처럼 동작하는 자바스크립트의 고유의 특징을 변수 호이스팅 이라 합니다.

💡 var 키워드의 경우 변수 호이스팅에 의해 선언되기 이전에도 변수에 접근이 가능합니다.
console.log(myVariable);
var myVariable; //undefined
var 선언은 호이스팅에 의해 소스코드 평가 과정에서 먼저 실행됩니다.
따라서 소스코드 상의 위치는 console.log 다음이지만, 이미 선언과 동시에 초기화되어 undefined가 출력됩니다.

var 대신 let, const를 쓰자!

위에서 언급한 var 키워드의 문제점은 크게 세 가지가 존재합니다.

✅ 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.
✅ 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
✅ 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다. ( 선언만 되고 할당은 X)

ES6에서 나온 let 과 const 키워드는 위의 세 가지 문제점을 해결하고자 등장했습니다.

1. 변수 중복 선언 불가

📍let

let 키워드로는 변수 중복 선언이 불가하지만, 재할당은 가능합니다.

let name = 'kmj'
console.log(name) // output: kmj

let name = 'howdy' // output: Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'howdy'
console.log(name) // output: howdy

📍const

const 는 상수(변하지 않는 값)를 위해 사용합니다.
let 과 마찬가지로 중복 선언이 불가하며, 더 나아가 재할당도 불가합니다.
그리고 반드시 선언과 초기화를 동시에 진행되어야 합니다.

const name; // output: Uncaught SyntaxError: Missing initializer in const declaration
const name = 'kmj'

여기서 주의할 점은 const 키워드는 재할당을 금지할 뿐, '불변'을 의미하지 않습니다.
따라서 원시 값은 재할당이 불가능하지만, 객체는 가능합니다.

// 원시값의 재할당
const name = 'kmj'
name = 'howdy' // output: Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const name = {
  eng: 'kmj',
}
name.eng = 'howdy'

console.log(name) // output: { eng: "howdy" }

2. 블록 레벨 스코프

let, const 키워드로 선언한 변수는 모두 블록 레벨 스코프를 따릅니다.

위에서 다뤘던 예시 중에서 var 를 let 으로 바꿔보면 아래와 같습니다.


let a = 1

if (true) {
  let a = 5
}

console.log(a) // output: 1

var 키워드로 선언한 경우 5가 나왔지만, let 키워드로 선언한 경우 if 문 안의 a는 지역 스코프를 가져 전역에서 console을 찍었을 경우, 전역에 있는 a가 결과 값으로 출력됩니다. ( const 키워드도 let 키워드와 동일하게 동작)

3. 변수 호이스팅

📍let

let 키워드로 선언한 변수는 선언 단계 와 초기화 단계 가 분리되어 진행됩니다.
즉, 런타임 이전에 자바스크립트 엔진에 의해 선언 단계가 먼저 실행되지만, 초기화 단계가 실행되지 않았을 때 해당 변수에 접근하려고 하면 아래와 같이 참조 에러가 뜹니다.

console.log(name) // output: Uncaught ReferenceError: name is not defined

let name = 'kmj'

이처럼 let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점까지 변수를 참조할 수 없는 일시적 사각지대(Temporal Dead Zone: TDZ) 구간에 존재합니다.

따라서 var 로 선언한 변수는 선언과 동시에 초기화 되어 호이스팅이 일어나 변수 참조가 가능한 반면,
let 으로 선언한 변수는 해당 변수의 선언문에 도달해야만 초기화가 일어나기 때문에 호이스팅은 일어나지만, 변수 선언문 이전에 변수를 참조할 수 없습니다.

📍const

const 키워드는 선언 단계 와 초기화 단계가 동시에 진행됩니다.

console.log(name) // output: Uncaught ReferenceError: Cannot access 'name' before initialization

const name = 'kmj'

let 키워드로 선언한 경우, 런타임 이전에 선언이 되어 자바스크립트 엔진에 이미 존재하지만 초기화가 되지 않았기 때문에 name is not defined라는 문구가 뜹니다.

하지만 const 키워드로 선언한 경우, 선언과 초기화가 동시에 이루어져야 하지만 런타임 이전에는 실행될 수 없습니다.
따라서 초기화가 진행되지 않은 상태이기 때문에 Cannot access 'name' before initialization 에러 문구가 뜹니다.

최최종 결론!

변수 선언에는 기본적으로 const 를 사용하고 let 은 재할당이 필요한 경우에 한정해 사용하는 것이 좋습니다.
원시 값의 경우, 가급적 상수를 사용하는 편이 좋습니다. 그리고 객체를 재할당하는 경우는 생각보다 흔하지 않습니다.
따라서 const 키워드를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전합니다.

💡 var 와 let , 그리고 const 는 다음처럼 사용하는 것을 추천합니다.

ES6를 사용한다면 var 키워드는 사용하지 않는다.

재할당이 필요한 경우에 한정해 let 키워드를 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.

변경이 발생하지 않는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다. const 키워드는 재할당을 금지하므로 var, let 보다 안전하다.

변수를 선언하는 시점에는 재할당이 필요할지 잘 모르는 경우가 많습니다. 그리고 객체는 의외로 재할당을 하는 경우가 드뭅니다.
따라서 변수를 선언할 때에는 일단 const 키워드를 사용하도록 하는 게 좋습니다.
반드시 재할당이 필요하다면(반드시 재할당이 필요한지 한번 생각해 볼 일..) 그때 const 를 let 키워드로 변경해도 결코 늦지 않습니다.