ES2016

■ Array.prototype.includes

배열 내장 함수 includes가 추가

['a', 'b', 'c'].includes('a') // true

■ Exponentiation operator

거듭제곱 기능

let x = 5;
let z = x ** 2;          // result is 25

ES2017

■ async await

비동기 처리 패턴 중 가장 최근에 나온 문법
콜백 함수와 프로미스의 단점 보완,
읽기 좋은 코드를 작성할 수 있게 도와줌

async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

참고

■ object entry/values

객체 key/value 접근 기능

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));
// expected output: Array ["somestring", "42", "false"]

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}
// expected output:
// "a: somestring"
// "b: 42"
// order is not guaranteed

■ trailling commas

마지막 요소 콤마 가능
요소 순서를 바꾸기가 용이하고 어떤 부분이 바뀌었는지 감지하기 쉬움

let obj = {
    first: 'Jane',
    last: 'Doe',
};

let arr = [
    'red',
    'green',
    'blue',
];

ES2018

■ Asynchronous iteration

비동기 이터러블 객체를 순회 가능

for await (const req of requests) {
  console.log(req)
}

■ Promise.prototype.finally()

promise의 then과 catch에 이어 finally도 추가

Promise.resolve('reslove')
.then((res) => console.log('success'))
.catch((err) => console.log('fail'))
.finally(() => console.log('finally'))

■ ... operator(Rest/Spread Properties)

기존의 배열에서 사용하던 rest/spread를 객체에서도 사용가능

참고 작성 글

const obj = {foo: 1, bar: 2, baz: 3};
const obj2 = {...obj, foo: true}
//{ foo: true, bar: 2, baz: 3 }

💡 spread operator

이터러블요소 앞에 ... 를 붙여 개별요소로 만들 수 있다.

const array = [1, 2, 3]
console.log(array) // [1, 2, 3]
console.log(...array) // 1 2 3

❗️ 불변성으로 인한 문제 방지용 객체 및 배열 복사

const newData = [...arr]
console.log(newData) // [1, 2, 3]

❕ concat 대신 사용

const arr1 = [1, 2, 3]
const arr2 = ['a', 'b', 'c']
console.log([...arr1, ...arr2]) 
// [1, 2, 3, 'a', 'b', 'c']

💡 destructuring

배열, 객체 등을 필요한 부분만 분해하여 추출할 수 있다
❗️ 배열은 순서대로, 객체는 순서가 중요하지 않다.

❕모든 요소 분해

const numbers = [1, 2, 3]
const [first, second, third] = numbers

const obj = {a: 1, b: 2, c: 3}
const {c, b, a} = obj // 3 2 1 

❕필요 요소 분해

const chars = ['a', 'b', 'c', 'd', 'e', 'f']
const [a, b, c, ...rest] = chars
console.log(rest) // ['d', 'e', 'f']


const obj = {a: 1, b: 2, c: 3, d: 4}
const {a, b, ...rest} = obj 
console.log(rest)  // {c: 3, d: 4}

ES2019

■ Array.flat()

배열안의 배열을 쉽게 합칠 수 있게함

const arr = [1, , 2, [3, 4, [5, 6]]];

// 인자는 배열의 깊이
console.log(arr.flat());  // [1, 2, 3, 4, [5, 6]]
console.log(arr.flat(1)); // [1, 2, 3, 4, [5, 6]]

ES2020

■ Optional Chaining

속성에 접근한다고 했을 때, a가 없다면 오류가 발생.
Optional Chaining을 이용하면 오류가 발생하지 않고 undefined를 반환

const foo = {
  a: {
    b: true
  }
}; 

console.log(foo.a.b); // true
console.log(foo.b?.b); // undefined 
// => foo && foo.b
console.log(foo.b.aa); // TypeError

---

js 버전 history 정리 글

참고 글