ES6 이후의 주요 변화 - JavaScript

ECMAScript 2015 (ES6)

1. Let과 Const :  블록 스코프 변수 선언

    let x = 10;
    const y = 20;
  
2. 화살표 함수: 간결한 함수 표현

    const add = (a, b) => a + b;
  
3. 클래스: 객체 지향 프로그래밍을 위한 클래스 문법

  class Person {
    constructor(name) {
      this.name = name;
    }
    greet() {
      console.log(`Hello, ${this.name}`);
    }
  }
  
4. 템플릿 리터럴**: 백틱(`)을 사용한 문자열 템플릿

     const name = "John";
     console.log(`Hello, ${name}!`);
  
5. 디스트럭처링 할당 : 배열과 객체의 값을 추출하는 문법

    const [a, b] = [1, 2];
    const {x, y} = {x: 1, y: 2};
  
6. 모듈 : `import`와 `export`를 사용한 모듈 시스템

     import { myFunction } from './myModule.js';
    export const myFunction = () => {};

7. Promise() 등장

let promise = new Promise(function(resolve, reject) {
  // 비동기 작업 수행
  let success = true;

  if (success) {
    resolve('작업 성공');
  } else {
    reject('작업 실패');
  }
});

promise.then(function(result) {
  console.log(result); // '작업 성공'
}).catch(function(error) {
  console.log(error); // '작업 실패'
});

  
ECMAScript 2016 (ES7)

1. 지수 연산자: 거듭제곱 연산을 위한 연산자.

    const square = 2 ** 2;
  
2. Array.prototype.includes : 배열에 특정 요소가 포함되어 있는지 확인

  const arr = [1, 2, 3];
  console.log(arr.includes(2)); // true
  

ECMAScript 2017 (ES8)

1. Async/Await : 비동기 프로그래밍을 위한 문법

    async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  }
  
2. Object.values / Object.entries**: 객체의 값과 엔트리를 배열로 반환
    const obj = {a: 1, b: 2};
    console.log(Object.values(obj)); // [1, 2]
    console.log(Object.entries(obj)); // [['a', 1], ['b', 2]]

ECMAScript 2018 (ES9)

1. Rest/Spread Properties: 객체에서 사용되는 나머지/전개 문법
   const { a, ...rest } = { a: 1, b: 2, c: 3 };
   console.log(rest); // { b: 2, c: 3 }
  
2. Asynchronous Iteration : `for await...of` 문법을 사용한 비동기 반복
    async function process(array) {
       for await (let item of array) {
          console.log(item);
       }
    }
  
ECMAScript 2019 (ES10)

1. Array.prototype.flat / flatMap : 다차원 배열을 평탄화.
   const arr = [1, [2, [3, 4]]];
   console.log(arr.flat(2)); // [1, 2, 3, 4]
  
2. Object.fromEntries : 엔트리 리스트로부터 객체 생성.

  const entries = [['a', 1], ['b', 2]];
  console.log(Object.fromEntries(entries)); // { a: 1, b: 2 }

 

ECMAScript 2020 (ES11)

1. Dynamic Import : 동적 모듈 임포트.
   import('./module.js').then(module => {
     module.doSomething();
   });
  
2. BigInt : 큰 정수를 위한 새로운 데이터 타입.
   const bigInt = 1234567890123456789012345678901234567890n;
  
3. Nullish Coalescing Operator : `null` 또는 `undefined`일 때만 대체값을 반환
    const value = null ?? 'default';
  
4. Optional Chaining : 체인의 각 단계에서 유효성을 검사.
    const user = {};
    console.log(user?.profile?.name);
 

ECMAScript 2021 (ES12)

1. String.prototype.replaceAll : 문자열의 모든 일치를 교체.
    const str = 'aabbcc';
    console.log(str.replaceAll('b', 'd')); // aaddcc
  
2. Logical Assignment Operators : 논리 연산 할당.
    let a = 1;
    a ||= 2;   // a가 falsy일 때만 2 할당