[Javascript] var, let, const

var , let , const

자바스크립트에서 변수를 선언하는 방법은 총 3가지가 있다.

var a = 10;
let b = 100;
const c = 1000;

ES6 이전에는 var를 사용해서 변수를 선언하였다.

ES6 이후에 let, const가 도입되었다는 것은 기존의 var에 문제점이 있고 이를 개선하기 위해 새로운 문법이 등장했다고 생각할 수 있다.

 

var의 문제점

1. 중복 선언이 가능하다

중복 선언이란, 동일한 스코프 내에 동일한 식별자가 2개 이상 존재하는 것을 뜻한다.

var 키워드로 선언된 변수는 같은 스코프 내에 중복 선언하여도 에러가 발생하지 않는다.

var x = 1;
var x = 100;

console.log(x); // 100

위 코드가 제대로 동작하는 이유

• 초기화문이 있는 경우, 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
• 초기화문이 없는 경우, 변수 선언문이 무시된다

// 위 코드는 아래와 같이 동작한다. 

var x = 1;
x = 100;

중복 선언이 문제인 이유

• 동일한 이름으로 선언한 변수에 새로운 값을 할당할 수 있다.
• 개발자의 의도와 다르게 코드가 동작하는 상황을 만든다. 예측할 수 없는 코드는 디버깅과 유지보수를 어렵게 한다.

 

에러가 발생하지 않도록 설계한 이유는 무엇일까?

초기 자바스크립트는 단순히 웹 페이지의 보조적인 기능만 수행하였다. 대부분의 자바스크립트는 웹 서버에서 실행되었고 이 때 중요한 것은 에러가 발생하지 않는 것이었다. 에러가 발생하면 페이지 전체가 렌더링이 안되는 문제가 발생할 수 있기 때문이다. 따라서, 최대한 "포괄적인" 문법을 허용한 것이 아닌가 추측된다.

 

2. 함수 레벨 스코프

var로 선언한 변수는 함수 내부 또는 외부에서 선언되었는지에 따라 함수 스코프 또는 전역 스코프를 가진다.

 

함수 레벨 스코프는 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다.

var x = 1;

if (true) {
  var x = 10;
}
console.log(x); // 10

var로 선언한 변수는 함수 코드 블록 내에서만 유효하기 때문에 함수 외부에서 선언한 변수는 코드 블록 내에서 선언해도 모두 전역변수가 된다. 이때, 중괄호로 표시된 블록이 스코프를 생성하지 않는다는 점에서 혼란을 일으킬 수 있다.

 

함수 레벨 스코프가 문제인 이유

• 의도치 않은 전역 변수의 값이 재할당될 수 있다.
• 역시 의도와 다르게 동작하는 코드는 디버깅과 유지보수를 어렵게 한다.

 

과거에 var만 있었을 때에는 블록 스코프를 구현할 수 없었을까?

즉시실행함수를 사용하면 var를 이용해도 블록 레벨 스코프를 구현할 수 있다.

(function () {
  statements;
})();

• 즉시실행함수(IIFE)는 선언과 동시에 실행되기 때문에 블록 레벨 스코프를 구현할 수 있다
• 불필요한 전역변수의 오염을 방지할 수 있다.
• IIFE 내부로 다른 변수들이 접근하는 것을 막을 수 있다.

 

3. 변수 호이스팅

자바스크립트의 모든 선언문은 호이스팅 되어 스코프의 가장 위로 끌어올려진 것처럼 동작한다.

 

자바스크립트 엔진은 소스코드를 실행할 때 아래와 같이 동작한다.

1. 모든 선언문을 소스코드에서 찾아 먼저 실행한다 (소스코드 평가 과정)
2. 모든 선언문을 제외하고 소스코드를 한줄씩 실행한다.

console.log(foo); // undefined

var foo;

 

var로 선언한 변수는 자바스크립트 엔진에 의해 암묵적으로 선언 단계와 초기화 단계가 동시에 일어난다.

1. 실행 컨텍스트의 렉시컬 환경(스코프)에 변수 식별자를 등록한다.
2. 초기화 단계에서 undefined로 변수를 초기화한다.

따라서, 선언문 이전에 변수에 접근해도 스코프에 변수가 존재하기 때문에 undefined가 출력된다.

 

변수 호이스팅의 문제점

• 선언문 이전에 참조가 가능해서 코드의 흐름이 복잡해져 가독성이 떨어진다.
• 의도치 않은 오류가 발생할 수 있다.

---

var의 문제를 해결하기 위한 let, const

var의 문제점으로는 3가지가 있다.

1. 중복 선언이 가능하다.
2. 함수 레벨 스코프를 갖는다.
3. 변수 호이스팅이 발생한다.

이 3가지를 let, const를 통해 어떻게 해결했는지 살펴보자.

 

1. 중복 선언 → 중복 선언 불가능

let 키워드로 변수 이름이 동일한 변수를 중복 선언하게 되면 Syntax Error 가 발생한다.

let bar = 123;
let bar = 456;
// Uncaught SyntaxError: Identifier 'bar' has already been declared

 

2. 함수 레벨 스코프 → 블록 레벨 스코프

let 으로 선언한 변수의 지역 스코프는 블록 레벨 스코프이다.

 

블록 레벨 스코프는 모든 코드 블록에 의해 지역 스코프가 생긴다.

• 함수 레벨 스코프는 코드 블록에 선언한 변수가 전역 변수가 된다.
• 반면에, 블록 레벨 스코프는 코드 블록에 선언한 변수가 지역 변수가 된다.
• 따라서, 중복 선언이나 암묵적 할당과 같은 전역 변수의 위험성을 줄일 수 있다.

 

3. 변수 호이스팅 → 변수 호이스팅이 발생하지 않는 것처럼 동작

자바스크립트의 모든 선언문은 호이스팅이 일어나기 때문에 let, const로 선언한 변수 역시 호이스팅이 발생한다.

 

하지만 let, const는 var와는 다르게 호이스팅이 발생하지 않는 것처럼 동작한다.

console.log(foo); // Uncaught ReferenceError: foo is not defined
let foo;

선언 단계와 초기화 단계가 동시에 일어나는 var 와는 다르게 let 은 선언 단계와 초기화 단계가 분리되어 진행된다.

 

 

TDZ란 스코프 시작 지점부터 초기화 단계 시작 지점(변수 선언문)까지 변수를 참조할 수 없는 구간을 말한다.
즉, let 으로 선언한 변수는 선언문을 만나기 이전까지 참조가 불가능하다.

 

어떻게 TDZ에서 변수에 접근하면 참조 에러가 발생하는 것일까?

참조 에러가 발생한다는 것은 식별자를 참조했다는 뜻이다. 
let으로 선언한 변수 역시 실행 컨텍스트의 렉시컬 환경에 등록된다. 이 때, 빈 값으로 등록이 될 수 없기 때문에 어떤 특정 값을 넣어서 등록해야한다. Symbol과 같은 유일한 값으로 등록한 다음 엔진 내부에서 해당 값이 참조된 경우에는 Reference Error를 발생시킨다고 추측해볼 수 있다.

 

하지만 let, const 키워드로 선언을 해도 역시 호이스팅이 발생한다.

let foo = 1; // 전역 변수
{
  console.log(foo); // Uncaught ReferenceError: Cannot access 'foo' before initialization
  let foo = 2; // 지역 변수
}

let 이 호이스팅이 발생하지 않는다면 전역 변수 foo의 값인 1이 출력되어야한다.

하지만 코드 블록 내에서 호이스팅이 발생하였기 때문에 Reference Error가 발생한다.

 

따라서, let, const 키워드로 선언을 하면 호이스팅이 발생하지 않는 것처럼 동작할 뿐 실제로는 호이스팅이 발생한다.

 

---

let vs const : 재할당이 가능한 변수인가

let 과 const 를 이용해서 var 의 문제점을 해결할 수 있다.

그렇다면 하나의 키워드만으로도 var 의 문제점을 해결할 수 있지 않을까?

왜 let, const 두 개의 키워드가 생겼을까?

 

재할당이 불가능한 const

• const 는 let 과 다르게 재할당이 불가능하다.
• const 는 상수를 선언하기 위해 사용한다.
  상수란, 재할당이 금지된 변수이다.

변수는 메모리 공간의 이름일 뿐, 상수와 반대되는 개념이 아니다.
즉, 변수는 "변"할 수 있는 "수"를 의미하는 것이 아니다.

 

따라서, const는 재할당이 불가능하므로 선언과 동시에 초기화를 해주어야한다.

 

상수의 필요성

• 상수는 읽기 전용이다.
• 즉, const 로 선언한 변수는 이후의 코드에서 변경되지 않으므로 안전하다.
• 이는 상태 유지와 가독성, 유지보수를 편하게 해준다.

 

정말 const로 선언하면 재할당이 불가능할까?

const로 선언한 변수에 객체를 할당한 경우에 값을 변경할 수 있다.

const person = {
  age: 20,
};

person.age = 100;

console.log(person); // {age: 100}

const는 재할당을 금지할 뿐 "불변"을 의미하지 않는다.

 

👉 요약

	var	let	const
중복 선언	⭕️	❌	❌
스코프	함수 레벨 스코프	블록 레벨 스코프	블록 레벨 스코프
변수 호이스팅	⭕️	⭕️ 발생하지 않는 것처럼 동작 : Reference Error, TDZ	⭕️ 발생하지 않는 것처럼 동작 : Reference Error, TDZ
재할당	⭕️	⭕️	❌

 

가치판단

• 최대한 const 를 사용하고 let 을 사용할 경우에는 스코프를 최대한 좁게 사용해주어야한다.
• var는 하위호환 목적이 아니라면 사용을 지양해야한다.