Javascript - ECMAScript 버전 히스토리

ECMAScript

ECMA(European Computer Manufacturers Association)는 정보 통신 시스템의 표준을 관리하는 국제 표준화 기구
ECMAScript는 ECMA가 정의한 스크립트 언어 표준으로, JavaScript의 공식 명칭

 

 

버전 히스토리

ES3 (1999)
- 정규표현식, try/catch 추가
- 약 10년간 표준으로 사용

 

ES5(2009)

// strict mode
'use strict';

// Array 메서드
[1, 2, 3].forEach(item => console.log(item));
[1, 2, 3].map(x => x * 2);
[1, 2, 3].filter(x => x > 1);

// Object 메서드
Object.create();
Object.keys();

// JSON 지원
JSON.parse();
JSON.stringify();

 

ES6 / ES2015 (2015) - 대격변!

- 이때부터 매년 업데이트 방식으로 변경

// let, const
let name = 'Kim';
const PI = 3.14;

// Arrow Function
const add = (a, b) => a + b;

// Template Literal
const message = `Hello ${name}`;

// Destructuring
const { name, age } = user;
const [first, second] = array;

// Default Parameter
function greet(name = 'Guest') {
  return `Hello ${name}`;
}

// Class
class Person {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    return `Hi, I'm ${this.name}`;
  }
}

// Promise
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

// Module
import { something } from './module.js';
export const data = 'hello';

// Spread Operator
const newArray = [...oldArray, 4, 5];
const newObj = { ...oldObj, key: 'value' };

 

ES2017 (ES8)

// async/await
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

// Object.entries / values
const obj = { a: 1, b: 2, c: 3 };
Object.entries(obj);  // [['a', 1], ['b', 2], ['c', 3]]
Object.values(obj);   // [1, 2, 3]

// String padding
'5'.padStart(3, '0');   // '005'
'5'.padEnd(3, '0');     // '500'

 

ES2020 (ES11)

// Optional Chaining - null 체크 간편화
const street = user?.address?.street;

// Nullish Coalescing - null/undefined만 체크
const value = data ?? 'default';
const port = config.port ?? 3000;

// BigInt - 큰 정수
const bigNumber = 9007199254740991n;

// Promise.allSettled - 프로미스 성공, 실패 여부 상관 없이 결과 리턴
const results = await Promise.allSettled([
  fetch('/api/1'),
  fetch('/api/2'),
  fetch('/api/3')
]);

 

ES2021 (ES12)

// 논리 할당 연산자
let x = 0;
x ||= 10;  // x = x || 10
x &&= 5;   // x = x && 5
x ??= 20;  // x = x ?? 20

// String.replaceAll
'aaa'.replaceAll('a', 'b');  // 'bbb'

// 숫자 구분자 - 가독성 향상
const million = 1_000_000;
const billion = 1_000_000_000;

 

ES2022 (ES13)

// Top-level await
const data = await fetch('/api/data');

// Array.at() - 음수 인덱스
const arr = [1, 2, 3, 4, 5];
arr.at(-1);   // 5 (마지막 요소)
arr.at(-2);   // 4

// Private Fields
class Counter {
  #count = 0;  // private
  
  increment() {
    this.#count++;
  }
  
  get value() {
    return this.#count;
  }
}

 

ES2023 (ES14)

// Array 불변 메서드
const arr = [3, 1, 2];
arr.toSorted();      // [1, 2, 3], 원본 유지
arr.toReversed();    // [2, 1, 3], 원본 유지

// findLast, findLastIndex
[1, 2, 3, 4].findLast(x => x > 2);  // 4