ES6(2015), ES11(2020)

ES6 === ES2015

ES11 === ES2020

[ ES6 ]

1) 개선된 JavaScript 문법

2) ES6 browser compatibility의 훌륭한 지원

3) ES6를 기반으로 한 JavaScript 생태계의 확산

바벨을 이용해서 ES6 코드를 ES5코드로 변환시킬 수 있다 -> 이를 통해 mobile 앱 지원 가능

 

1) shorthand property names

object는 key와 value로 구성되어 있다.

key와 value의 이름이 동일한 경우, 축약해서 작성 가능

const name = 'Ellie';
const age = '18';

const ellie = {
  name,
  age
}

 

2) Destructuring Assignment

const {name, level} = student;
// 새로운 이름으로 선언할 수도 있다
const {name:studentName, level:studentLevel} = student;

// 배열은 index 사용없이 순서대로 할당 가능
const [first, second] = animals;

 

3) spread syntax

각각의 요소를 복사할 수 있다

object가 가리키고 있는 주소의 참조값만 복사한다!!

따라서 원래의 object가 바뀌면 모두 영향받는다

const obj1 = {key:'key1'};
const obj2 = {key:'key2'};
const array = [obj1, obj2];

const arrayCopy = [...array];
console.log(array, arrayCopy);
arrayCopy[0] = '123';
console.log(array,arrayCopy);

const arrayCopy2 = [...array, {key:'key3'}];

obj를 가리키고 있는 변수는 obj가 담겨있는 메모리의 주소를 가지고 있다.

복사된 것은 주소값일 뿐. 실제로는 모두 동일한 obj를 가리키고 있다.

obj1.key = 'newKey'로 바꾸면 array, arrayCopy, arrayCopy2 모두 값이 바뀐다.

 

object merge

const dog1 = {dog:'1'};
const dog2 = {dog:'2'};
const dog = {...dog1, ...dog2};
console.log(dog); // {dog:'2'} : 제일 뒤에 있는게 앞을 덮어씌운다

 

4) default parameters

function printMessage(message = 'default message') {}

 

5) Ternary Operator

const component = isCat ? 'cat' : 'dog';

 

6) Template literals

문자열 만들 때 '+' 이용하면 불편하다

`Today's weather is ${weather}.`

 

7) Optional Chaining(ES11)

const person1 = {
  name:'Ellie',
  job: {
    title:'S/W Engineer',
    manager: {
      name:'Bpb'
    }
  }
};

const person2 = {
  name:'Bob'
}

function printManager(person) {
  console.log(
    person.job
      ? person.job.manager
        ? person.job.manager.name
        : undefined
      :undefined
  )
}
// 코드가 반복적으로 중복된다
console.log(person.job && person.job.manager && person.job.manager.name)
// optional chaining
console.log(person.job?.manager?.name)

 

8) Nullish Coalescing Operator

( 비교 ) logical or operator

// logical or operator
// false : false,'',0,null,undefined
const username = name || 'Guest'; // false일 때만 뒤가 실행

||를 사용하면 빈 string이거나 0일 때도 false로 인식해서 뒤의 값이 할당된다.

사용자가 일부러 넣은 빈 string이나 0을 넣었을 수도 있는데!

명확하게 null이랑 undefined일 때 출력하고 싶다면

const name = '';
const username = name ?? 'Guest';
console.log(username) // ''
const num = 0;
const message = num ?? 'undefined';
console.log(message) // 0

 

출처 : 모던 자바스크립트 개발을 위한 ES6강좌(inflearn)

dream coding ellie, www.youtube.com/watch?v=36HrZHzPeuY