let, const, var

ES5시절 자바스크립트는 var 변수만 선언이 가능했다. 하지만 ES6에서 const, let이 새롭게 나왔는데 그 이유는 무엇인지 스코프를 통해 알아보자.

스코프(Scope)

스코프는 식별자(변수명, 함수명, 클래스명)의 유효범위를 의미한다. 전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 가진다.

전역 변수는 어디에서나 참조가 가능하지만 지역 변수는 함수의 몸체 안에서만 참조가 가능하다.

자바스크립트는 모든 코드 블록(if, for, while, try/catch)이 지역 스코프를 만든다. 이러한 특성을 블록 레벨 스코프라고 한다. 하지만 var로 선언된 변수는 오로지 함수의 코드 블록만 지역 스코프로 인정한다. 이를 함수 레벨 스코프라 한다.

var a = 1

if (true) {
	var a = 5
}

console.log(a)	// 5

위와 같이 var은 함수 레벨 스코프 이므로 if절 안에서 변경된 값이 그대로 콘솔로그에 찍히는 것을 볼 수 있다. 이러한 단점을 고치기 위해 나온 것이 let, const이다.

var, let, const의 차이

var 키워드는 2가지 문제점이 존재한다.

• 변수 중복 선언이 가능하여, 예상치 못한 에러를 만든다.
• 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.

📍 변수 중복 선언 불가

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 name; // output: Uncaught SyntaxError: Missing initializer in const declaration
const name = 'kmj'

// 원시값의 재할당
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" }

하지만 원시값이 아닌 객체는 재할당이 가능하다.

📍 블록 레벨 스코프

let, const로 선언한 변수는 모두 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

let a = 1

if (true) {
  let a = 5
}

console.log(a) // 1

var의 경우 콘솔로그에서 5값이 반환되었지만 let, const는 if절 안에서의 선언은 if안에서만 호출이 가능하므로 1이 반환되었다.

References

---

https://www.howdy-mj.me/javascript/var-let-const/