1. ES6 let과 const의 특징 알아보기

ES6 let,const 알아보기

let과 const

ES5까지는 var 키워드로 변수를 선언했었는데 이는 중복 선언이 가능하며 Function-level scope를 가짐.
ES6에서는 Block-level scope를 갖는 변수 let과 상수 const를 지원한다

let이란

간단한 예로let의 특징을 알아보자

1. block-level scope

   let a = 111;
   {
    let a = 222;
    let b = 222;
   }
   console.log(a); // 111
   console.log(b); // b is not defined
   

   위에 설명한 것과 같이 let은 블록 레벨 스코프이므로 a는 블록 밖에서 먼저 선언된 111이란 값이 나오고,
   b는 블록 밖에서는 정의 되지 않은 변수라는 결과가 나옴.

2. 변수 중복 선언 불가

   var a = 111;
   var a = 222;
   console.log(a); // 222
   

   let a = 111;
   let a = 222; // Error
   

   같은 레벨에서 var은 재설정이 가능하지만, let은 같은 변수를 다시 선언하면 에러가 반환

3. 호이스팅 불가

   console.log(a); // undefined
   var a;
   

   console.log(b); // error
   let b;
   

   위의 코드와 같이 var로 변수를 선언하기 전에 참조를하면 error가 뜨지 않고 undefined가 출력된다.
   이렇게 변수 선언전에 호출을 했을때 변수가 상단으로 이동하는 것을 호이스팅(hoisting)이라고 함.
   let으로 var과 같이 호이스팅을 기대하고 코드를 작성하면 error가 뜨게된다.

const란

const는 상수를 만드는데 사용함.(이전까지 상수는 그냥 숫자인줄만 알았는데 변하지 않는 값을 상수라 한다고 함..)
const의 특징을 알아보자

1. block-level scope
   let과 마찬가지로 const도 block-level scope이다.

   {
    const a = 11;
    console.log(a); // 11
   }
   console.log(a); // error
   

2. 재할당 불가능
   let은 변수의 재할당이 가능하지만(재선언 x), const는 불가함

   let a = 111;
   a = 222; // 222가 출력
   const b = 111;
   b = 222; // error
   

3. 객체의 내용 변경 가능
   객체의 속성이 보호되지 않음. 즉 객체의 내용이 변경 가능함

   const a = {
    name: 'Jung',
    info: {
        phone: 123123
    }
   };
   a.name = 'Lee'; //가능
   console.log(a); // { name: 'Lee', info: { phone: 123123 }}
   

   이때 객체의 내용을 보호하고 싶다면 객체를 선언한 아래에 Object.freeze(a) 메소드를 사용하면 속성이 변하지 않고, console.log(Object.isFrozen(a))로 해당 객체에 freeze 메소드를 선언했는지 알 수 있다.
   하지만 객체안의 객체 즉 뎁스가 2인곳은 바꿀 수 있는데 이마저도 막으려면 Deep freeze를 위한 함수를 만들어야 한다.

4. 가독성, 유지보수를 위해 사용

   if (x > 3) {
   }
   const MINBUY = 10;
   if (x > MINBUY) {
   }
   

   위의 코드와 같이 쓴다면 코드를 작성하고 나중에 보면 3이 어떤 의미로 사용했나 잊어버리거나 파악하기 힘들 수도 있기 때문에 의미를 부여해 const로 대체한다면 나중에 보고도 쉽게 파악이 가능하다.

잘못된 정보가 있다면 지적해주시면 감사하겠습니다.

앞으로 작성하는 모든 포스팅은 아래 링크를 메인으로 참고해 작성했습니다.
참고 사이트 링크