JavaScript 변수 선언 var, let, const의 차이와 활용

var, let, const 키워드

 

자바스크립트 변수의 선언 방식은 시간이 지남에 따라 많이 발전해 왔다. ES6에서 let과 const가 도입되면서 변수 선언에 많은 선택지를 가질 수 있게 되었고 활용법도 다양해졌다. 오늘은 var, let, const의 차이와 활용방법에 대해 확실하게 공부하고 넘어가려고 한다.

 

var

---

var는 자바스크립트에서 가장 오래된 변수 선언 키워드이다. 현재의 코드 구현에서는 자주 만나볼 순 없는 키워드이지만 레거시 한 코드를 만진다면 만나볼 수 있는 키워드이다. 이러한 var 키워드에는 몇 가지 주요 단점이 있는데 이러한 단점들을 보완하기 위해 let, const 키워드가 추가되었다.

 

1. 함수 레벨 스코프 지원

var로 선언된 변수는 함수 레벨 스코프 혹은 전역 레벨 스코프를 지원한다. 블록 레벨 스코프를 지원하지 않기 때문에 의도지 않은 전역 변수로 설정되어 의도하지 않은 문제가 발생하기도 한다.

if (true) {
  var age = 32;
}

console.log(age); // 32

 

조건문 내부에 선언된 var 변수는 블록 밖에서도 접근이 가능하다. 조건문뿐만 아니라 반복문 등의 블록은 무시한다. 그렇기 때문에 블록 레벨 스코프는 존재하지 않고 함수 내부에서 var로 선언한 변수에 한해서 함수 레벨 스코프를 가지고 그 외는 전역 레벨 스코프만 가지고 있다.

 

2. 재선언 및 재할당 모두 가능

var로 선언된 변수는 재선언 과 재할당이 모두 가능하다. 

var name = "mini";

var name = "minu";

 

function hi() {
  var hello = "hello";
  console.log(`함수 내부에서 선언한 var 변수 ${hello}`);
}

hi();

hello = "hi";

console.log(hello);

 

하지만 위의 코드처럼 함수 레벨 스코프를 가진 var로 선언된 hello는 함수 레벨 스코프를 가지기 때문에 재할당을 시도해도 재할당 되지 않고 새로운 전역 hello 변수가 생성된다. 이렇기 때문에 var 키워드는 레거시 한 코드의 유지 보수 혹은 불가피한 전역변수가 필요한 시점에 사용할 수 있을 것 같다.

 

3. 호이스팅(hoisting)발생

자바스크립트 엔진은 코드를 실행하기 전에 코드의 평가 과정을 거치면서 변수 선언을 포함한 선언문을 가장 최상단으로 끌어올린다. 이러한 현상을 호이스팅이라고 하는데 아래의 코드를 보면 좀 더 쉽게 이해할 수 있다. 

 

//실제 작성 코드
console.log(name);

var name; // undefined

-------------------------------------- 
// 호이스팅 예시 코드
var name;

console.log(name) // undefined

 

자바스크립트는 인터프리터 언어이기 때문에 코드가 한 줄씩 차례대로 동작한다. 그래서 console.log(name)을 통해 먼저 출력하는 과정에서 에러가 발생해야 하지만 호이스팅이 일어나기 때문에 값을 할당하기 전 초기화하는 과정으로 undedined가 출력된다.

 

let

---

let은 ES6에서 도입된 변수 선언 키워드이다. let 키워드는 var 키워드와 유사하지만 다른 부분들이 있다. 

 

1. 재선언은 불가, 재할당은 가능

var 키워드는 재선언 및 재할당이 모두 가능했지만 let 키워드는 재선언은 불가하지만 재할당은 가능하다. 재선언 하게되면 SyntaxError 가 발생한다.

let name = "minhoo";

let name = "Kahyoun"; //SyntaxError: Identifier 'name' has already been declared
--------------------------------------------------------------------------------------
let name = "minhoo";

name =  "Kahyoun";

console.log(name) // "Kahyoun"

 

2. 블록 레벨 스코프

let 키워드는 { }  블록 레벨 스코프를 가진다. 그렇기 때문에 블록 밖에서는 let 키워드로 선언된 변수는 외부에서 참조할 수없게 된다. 

function hello() {
  let hi = "hello";
}

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

 

3. 호이스팅(hoisting) 발생 (var 키워드와 다르게 동작)

let 키워드로 선언된 변수도 var 키워드로 선언된 변수와 마찬가지로 호이스팅이 발생한다.그러나 조금 다르게 동작한다. let 키워드로 변수를 선언하게 되면 선언문에 도달하기 전까지 TDZ(Temporal Dead Zone) 즉 일시적인 사각지대에 있게 된다. 이 TDZ에 있는 변수에 접근하려고 하면 ReferenceError가 발생한다. 

 

console.log(hi);

let hi; ReferenceError: Cannot access 'hi' before initialization

 

var 키워드로 선언된 변수에 경우 undefined로 초기화되기 때문에 에러업이 출력이 가능하지만 TDZ를 통해 변수가 선언되기 전에 사용되는 것을 방지하여 코드의 문제를 줄이는 데 도움이 된다. 이렇하기 때문에 값이 변경될 수 있는 변수에 키워드로 사용하기 좋다.

 

const

---

const 키워드도 let 키워드와 마찬가지로 ES6에서 도입된 변수 선언 키워드 이다. const 키워드의 특징 중 일부가 let 과 비슷하다. 호이스팅이 발생하지만 TDZ로 인해 선언 전에 사용할 수 없고 let 키워드와 마찬가지로 블록 레벨 스코프를 가진다. 

 

1. 재선언 및 재할당 모두 불가

const 키워드로 선언된 변수는 주로 상수이다. 즉 변하지 않아야 하는 값을 선언할 때 const 키워드를 사용하기 때문에 재선언 과 재할당이 모두 불가하다. 다만 객체나 배열의 내부 속성은 변경이 가능하다. 

 

const name = "minhoo"; // 선언 및 초기화 후 재할당 에러 발생

name = "kahyoun";

console.log(name); TypeError: Assignment to constant variable.

 

const obj = {
  name: "minhoo",
  age: 30,
};

obj.name = "Kahyoun";

console.log(obj.name);

 

 

 

현대적인 개발 트렌드는 var 키워드를 사용하기보다 const와 let 키워드를 주로 사용하고 있다. var 키워드는 가급적으로 피하는 것이 좋다. 각각의 변수 선언 키워드별로 어떤 상황에 어떻게 적절하게 사용해야 하는지 이해하고 사용할 수 있도록 해야 한다.