모던자바스크립트 Deep Dive에서 발췌한 let, const 키워드와 블록 레벨 스코프에 관한 내용을 적어보자

let, const 키워드와 블록 레벨 스코프

var 키워드로 선언한 변수의 문제점

• 변수 중복 선언 허용 : 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생
• 함수 레벨 스코프 : var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정. 따라서 함수 외부의 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 됨. 함수 레벨 스코프는 전역 변수를 남발할 가능성을 높여서 전역 변수가 중복 선언되는 경우가 발생할 수 있음
• 변수 호이스팅 : 가독성을 떨어뜨리고 오류 발생 여지를 남김

var 키워드의 단점을 보완하기 위해 ES6에서 새로운 변수 선언 키워드인 let과 const를 도입

let 키워드

let a = 1;
a = 2;

console.log(a) // 2

• 중복선언 금지 : let 키워드로 선언한 변수는 같은 스코프 안에서 중복 선언이 금지됨.
• 재할당 가능:변수에 다른 값으로 재할당이 가능하다.

function getAllLetters(str) {
  let strArray = [];

  for(let i=0; i < str.length; i++){
    strArray.push(str[i])
  }

  return strArray;
}

console.log(getAllLetters('wecode')) // ["w", "e", "c", "o", "d", "e"]

-- 같은 스코프 안에서 중복선언을 하는 경우

function getAllLetters(str) {
  let strArray = [];
  let strArray = [1, 3];
  for(let i=0; i < str.length; i++){
    strArray.push(str[i])
  }

  return strArray;
}

console.log(getAllLetters('wecode')) // SyntaxError: Identifier 'strArray' has already been declared

-- 재할당은 가능하다!!
  
function getAllLetters(str) {
  let strArray = [];
  strArray = [1, 3];
  
  for(let i=0; i < str.length; i++){
    strArray.push(str[i])
  }

  return strArray;
}

console.log(getAllLetters('wecode')) // [1, 3, "w", "e", "c", "o", "d", "e"]

• 블록 레벨 스코프 : let 키워드로 선언한 변수는 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다
• 변수 호이스팅 : let 키워드로 선언한 변수는 "선언 단계"와 "초기화 단계"가 분리되어 진행되기 때문에 변수 호이스팅이 발생하지 않는 것처럼 보인다

const 키워드

✨ let 키워드의 차이점

• const 키워드의 재할당 금지 : const 키워드로 선언된 변수에 원시 값을 할당한 경우 원시 값은 변경할 수 없는 값이고 const 키워드에 의해 재할당이 금지되므로 할당된 값을 변경할 수 있는 방법은 없다

const a = 1;
a = 2; // TypeError: Assignment to constant variable.

const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다(변수에 할당된 참조 값(메모리주소)은 변경되지 않는다)

const a = {name : "Lee"}
a.name = "Kim"
console.log(a) // {name: "Kim"}

• 선언과 초기화 : const 키워드로 선언한 변수는 반드시 선언과 동시에 값을 할당해야 한다

const a; // Uncaught SyntaxError: Missing initializer in const declaration(문법 에러)

const a = 1
---
      
let lalala; // undefined

✨ let 키워드의 공통점

• 블록 레벨 스코프 : const 키워드로 선언한 변수는 let 키워드로 선언한 변수와 마찬가치로 블록 레벨 스코프를 가진다
• 변수 호이스팅이 발생하지 않는 것처럼 동작

var vs let vs const

• ES6를 사용한다면 var의 사용은 권장하지 않음
• 재할당이 필요한 경우에 한정해 let 사용 권장. 이때 변수의 스코프는 최대한 좁게 만들 것을 권장
• 변경이 발생하지 않고 읽기 전용으로 사용하는 원시 값과 객체에는 const 키워드 사용 권장. 더 안전하다.