ES6+ | let & const

let & const

ES6에 새로 도입된 변수 선언 키워드
const는 불변 변수를 let은 가변 변수를 선언할 때 사용

---

var

ES5까지 변수를 선언할 수 있었던 유일한 키워드

---

var 특징

1. 함수 레벨 스코프(Function-level scope)
   함수의 코드 블록을 변수 스코프로 함
   즉, 함수 외부에서 생성한 변수는 모두 전역 변수
   for 문의 초기화식에서 선언한 변수(ex. i)를 for문 외부에서 참조 가능
2. var 키워드 생략 가능
   의도치 않은 전역 변수 양산 가능성이 있음
3. 변수 중복 선언 가능
   원치 않게 변수의 값이 변경될 가능성이 있음
4. 변수 호이스팅
   변수를 선언하기 전 문장에서도 변수를 참조할 수 있음

※ 전역 변수는 사용이 편리한 반면 유효 범위가 넓어서 어디에서 사용할 것인지 확인하기가 어려우며
의도치 않게 값이 변경될 수도 있기 때문에 변수의 scope는 좁을 수록 좋음
이러한 단점을 보완하기 위해 도입된 것이 ES6의 const, let 키워드

---

let & const 공통 특징

---

Block-level scope(블록 레벨 스코프)

• 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효
• 코드 블록 내부에서 선언한 변수는 지역 변수
• let, const 키워드는 블록 레벨 스코프를 따름

let hi = 'hi';
{
    let hi = 'hello';
    console.log(hi);    // hello
}
console.log(hi); // hi

---

변수 중복 선언(재선언) 불가

• let, const 키워드로 동일한 이름을 갖는 변수를 중복 선언할 수 없음
• 중복 선언 시 Uncaught SyntaxError 발생

const bye = 'bye';
const bye = 'by~~~~~~~~~~e';
// Uncaught SyntaxError: Identifier 'bye' has already been declared

---

변수 선언 전 참조 불가

• 자바스크립트에서 모든 선언은 호이스팅됨
  Hoisting(호이스팅): 변수와 함수 등의 선언을 해당 스코프의 선두로 옮긴 것처럼 동작하는 자바스크립트의 특성
• var 키워드와 달리 let, const 키워드로 선언된 변수는 변수를 선언하기 전에 참조하면 에러가 발생함

console.log(gg);
let gg = 'gg'
// Uncaught ReferenceError: gg is not defined

• 위의 예제를 보면 호이스팅이 되지 않는 것 같지만
  let, const는 블록 단위 스코프를 가지기 때문에 블록 단위에서 호이스팅이 이루어짐

let aa = "aa"
{
    console.log(aa);
    // 전역 변수로 선언된 1행의 aa가 출력될 것 같지만
    // 아래의 aa가 블록 레벨 스코프의 상단으로 호이스팅되기 때문에
    // 초기화되기 전에 호출하면 에러가 발생함
    let aa = "aa"
}
// Uncaught ReferenceError: Cannot access 'aa' before initialization

---

전역 객체와의 관계

• var 키워드로 선언한 전역 변수는 전역 객체인 window의 프로퍼티가 됨
• let, const 키워드로 선언한 전역 변수는 window객체의 프로퍼티가 아님

var hi = 'hi';
console.log(window.hi);    // hi

const hello = 'hello';
console.log(window.hello);    // undefined

※ Browser-side 전역 객체: window
Server-side(Node.js) 전역 객체: global

---

let 특징

• 공통 특징을 모두 공유함
• 재선언은 불가능 하지만 재할당은 가능

let hi = 'hi';
// let hi = 'hello'; 불가
hi = 'hello';
console.log(hi); // hello

---

const 특징

• 공통 특징 공유
• 재선언 및 재할당 불가
• 반드시 선언과 초기화를 동시에 해야 함

const hi;
// Uncaught SyntaxError: Missing initializer in const declaration

const hi = 'hi';
hi = 'hello';
// Uncaught TypeError: Assignment to constant variable.

---

상수

• const는 재할당이 불가능하기 때문에 상수 선언 시 사용
• 상수의 이름은 일반적으로 전부 대문자로 작성
• 가독성과 유지보수를 위해 상수를 적극 사용해야 함

const MAX_AGE = 150;

---

const와 객체

• const는 재할당이 불가능하기 때문에 객체의 주소값은 고정되나
  객체의 프로퍼티는 보호되지 않음
• 즉, const에 할당된 객체의 속성 값을 변경할 수 있음

const obj = {
    name: "Pathas",
    age: 999
}
// obj = {};
// Uncaught TypeError: Assignment to constant variable.

obj.name="PATHAS";

console.log(obj); // {name: "PATHAS", age: 999}

---

정리

• ES6를 사용한다면 var 키워드는 사용하지 않는 것이 좋음
• 변수를 선언할 때는 기본적으로 const 키워드 사용
• 재할당이 꼭 필요한 경우에 한 하여 let을 사용하며 변수의 스코프는 가능한 좁게 형성

---

ES6에 새롭게 도입된 let, const 키워드에 대해 알아보았습니다.

기본적인 특징은 서로 동일하며 재할당이 가능한지, 어디에 주로 사용하는지에 따라 사용을 달리하면 되겠습니다.

기본적으로는 const를 사용한다고 생각하고, 재할당이 꼭 필요한 경우에 let을 사용하는 것이 바람직하다고 합니다.

 

참고 사이트 

https://poiemaweb.com/es6-block-scope