JS

JavaScript ES6 (ECMAScript 2015) 이후의 버전들은 많은 중요하고 유용한 변경사항들을 도입하였습니다. 이 변경사항들은 JavaScript 개발의 편의성, 코드의 간결성, 그리고 프로그램의 유지보수성을 크게 향상시켰습니다. 이번 글에서는 주목할 만한 ES6 이상의 변경점들을 정리해 보려 합니다.

ES6 (ECMAScript 2015)

• let과 const : var 대신 let과 const가 도입되어 블록 스코핑을 지원합니다. let은 변경 가능한 변수에, const는 상수(변경 불가능한 값)에 사용됩니다.

let x = 10;
const y = 20;
x = 15; // 가능
y = 25; // TypeError: Assignment to constant variable.

• 화살표 함수 (Arrow Functions) : 더 짧은 함수 표현을 가능하게 하고, this 바인딩에 대한 일반적인 문제를 해결합니다.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

• 템플릿 리터럴 (Template Literals) : 백틱(`)을 사용하여 문자열 내에서 변수를 쉽게 삽입할 수 있게 하는 문자열 템플릿 기능을 제공합니다.

const name = "John";
console.log(`Hello, ${name}!`); // Hello, John!

• 기본 매개변수 (Default Parameters) : 함수 매개변수에 기본값을 설정할 수 있습니다.

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet("Jane"); // Hello, Jane!

• 모듈 (Modules) : import와 export 구문을 통해 모듈화된 JavaScript 코드를 작성할 수 있습니다.

// file: math.js
export function add(a, b) {
  return a + b;
}

// file: app.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

• 클래스 (Classes) : 기존 프로토타입 기반 상속보다 직관적인 객체 지향 프로그래밍을 위한 클래스 기반 문법을 제공합니다.

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}
const person = new Person("John");
person.greet(); // Hello, John!

• 프로미스 (Promises) : 비동기 연산을 위한 더 나은 방법을 제공하며, 콜백 지옥 문제를 해결합니다.

new Promise((resolve, reject) => {
  setTimeout(() => resolve("Hello World!"), 1000);
}).then(message => console.log(message)); // Hello World! after 1 second

• 배열 및 객체의 구조 분해 할당 (Destructuring Assignment) : 배열이나 객체의 속성을 쉽게 추출할 수 있게 합니다.

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

ES2016 (ECMAScript 2016)

• Array.prototype.includes() : 배열이 특정 요소를 포함하고 있는지 쉽게 확인할 수 있습니다.

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

• 지수 연산자 (Exponentiation Operator) : **를 사용하여 거듭제곱 연산을 할 수 있습니다.

console.log(2 ** 3); // 8

ES2017 (ECMAScript 2017)

• Async/Await : 비동기 함수를 동기 함수처럼 쉽게 작성할 수 있게 해 주는 문법으로, 프로미스를 기반으로 합니다.

async function fetchData() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  console.log(json);
}
fetchData();

• Object.entries() 및 Object.values() : 객체의 키-값 쌍이나 값을 배열 형태로 반환합니다.

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

ES2018 (ECMAScript 2018)

• 비동기 이터레이션 (Asynchronous Iteration) : for-await-of 구문을 통해 비동기적으로 데이터를 반복 처리할 수 있습니다.

async function asyncIterable() {
  const arrayOfValues = [1, 2, 3];
  for await (let value of arrayOfValues) {
    console.log(value);
  }
}
asyncIterable(); // Logs 1, 2, 3

• Rest/Spread 프로퍼티 : 객체 리터럴에 대해 Rest 속성과 Spread 연산자를 사용할 수 있습니다.

const { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x); // 1
console.log(rest); // { y: 2, z: 3 }

ES2019 (ECMAScript 2019)

• Array.prototype.flat() 및 flatMap() : 중첩된 배열을 평탄화하거나, 매핑 후 평탄화를 수행합니다.

const arr = [1, [2, 3], [4, [5, 6]]];
console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6]

• Object.fromEntries() : 키-값 쌍의 배열을 객체로 변환합니다.

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

ES2020 (ECMAScript 2020)

• BigInt : 매우 큰 정수를 표현할 수 있는 새로운 숫자 타입입니
  다.

console.log(9007199254740991n + 2n); // 9007199254740993n

• Dynamic Import : 필요에 따라 모듈을 동적으로 가져올 수 있습니다.

async function loadModule() {
  const module = await import('/path/to/module.js');
  module.doSomething();
}

ES2021 (ECMAScript 2021)

• String.prototype.replaceAll()

기존의 replace 메소드는 첫 번째 일치 항목만 바꾸거나, 정규 표현식을 사용해야 했습니다. replaceAll 메소드는 모든 일치 항목을 대체할 수 있어 더 편리합니다.

const phrase = "The cat chased the cat.";
console.log(phrase.replaceAll("cat", "dog")); // "The dog chased the dog."

• Promise.any()

여러 프로미스 중 하나라도 이행(fulfill)되면 해당 프로미스의 결과를 반환합니다. 모든 프로미스가 거부(rejected)되면 에러를 반환합니다.

const promise1 = Promise.reject(0);
const promise2 = Promise.resolve(100);
const promise3 = Promise.resolve(200);

Promise.any([promise1, promise2, promise3])
  .then(value => console.log(value))  // 100
  .catch(error => console.log(error));

• Logical Assignment Operators

논리 연산자와 할당 연산자의 조합으로, 코드를 더 간결하게 만들 수 있습니다.

let a = 1, b = null, c = undefined;

a &&= 2; // a = a && 2
console.log(a); // 1 (변경 없음, a가 true이므로 2가 할당되지 않음)

b ||= 5; // b = b || 5
console.log(b); // 5 (null은 false이므로 5가 할당됨)

c ??= 10; // c = c ?? 10
console.log(c); // 10 (undefined에 10 할당)

• Numeric Separators

큰 숫자를 더 쉽게 읽을 수 있도록 숫자 사이에 언더스코어(_)를 사용할 수 있습니다.

const billion = 1_000_000_000; // 10억
console.log(billion); // 1000000000

• WeakRefs and FinalizationRegistry

WeakRef 객체는 객체에 대한 약한 참조를 생성합니다. FinalizationRegistry는 객체가 가비지 컬렉션으로 수집될 때 콜백을 실행할 수 있게 해 줍니다. 이 기능들은 메모리 관리를 세밀하게 제어해야 할 때 유용합니다.

let obj = {};
const weakref = new WeakRef(obj);

const registry = new FinalizationRegistry(value => {
  console.log(`The ${value} has been garbage collected.`);
});

registry.register(obj, "object");
obj = null; // obj에 대한 참조 해제