자바스크립트 버전별 핵심 기능 정리

// 배열 순회 메서드
[1, 2, 3].forEach((n) => console.log(n));
[1, 2, 3].map((n) => n * 2);
[1, 2, 3].filter((n) => n % 2 === 0);
[1, 2, 3].reduce((acc, n) => acc + n, 0);
 
// JSON 내장 지원
JSON.parse('{"a":1}');
JSON.stringify({ a: 1 });
 
// strict mode
'use strict';
 
// 객체 프로퍼티 세밀 제어
Object.defineProperty(obj, 'key', { value: 1, writable: false });
Object.freeze(obj);
Object.keys(obj);

// var는 함수 스코프, 호이스팅 문제 있음
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0); // 3, 3, 3
}
 
// let은 블록 스코프
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0); // 0, 1, 2
}

// this를 바인딩하지 않고 상위 스코프의 this를 그대로 사용
class Timer {
  constructor() {
    this.seconds = 0;
    setInterval(() => {
      this.seconds++; // 화살표 함수라 this가 Timer 인스턴스
    }, 1000);
  }
}

const name = 'sub';
const greeting = `안녕, ${name}. 오늘은 ${new Date().getFullYear()}년`;

const { name, age } = user;
const [first, second] = list;
 
// 함수 인자에서도 사용
function greet({ name, age = 20 }) {
  console.log(`${name} (${age})`);
}

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a noise.`;
  }
}
 
class Dog extends Animal {
  speak() {
    return `${this.name} barks.`;
  }
}

function fetchUser(id) {
  return new Promise((resolve, reject) => {
    fetch(`/api/users/${id}`)
      .then((res) => res.json())
      .then(resolve)
      .catch(reject);
  });
}

// math.js
export const add = (a, b) => a + b;
export default function multiply(a, b) { return a * b; }
 
// main.js
import multiply, { add } from './math.js';

// 스프레드 / rest
const merged = [...arr1, ...arr2];
function sum(...nums) { return nums.reduce((a, b) => a + b, 0); }
 
// 기본 매개변수
function greet(name = 'Guest') { console.log(name); }
 
// Map / Set
const map = new Map([['a', 1]]);
const set = new Set([1, 2, 2, 3]); // {1, 2, 3}
 
// Symbol — 항상 고유한 값을 만들어주는 원시 타입. 주로 객체 프로퍼티 키 충돌을 막는 용도로 쓴다
const id = Symbol('id');
 
// Generator — 함수 실행을 중간에 멈췄다가(yield) 필요할 때 이어서 실행할 수 있게 해주는 특수 함수
function* range(start, end) {
  for (let i = start; i < end; i++) yield i;
}

// 배열 포함 여부 확인
[1, 2, 3].includes(2); // true (NaN도 정확히 찾음, indexOf는 못 찾음)
 
// 거듭제곱 연산자
2 ** 10; // 1024, 기존엔 Math.pow(2, 10)

// Promise 체이닝
function getUser(id) {
  return fetch(`/api/users/${id}`)
    .then((res) => res.json())
    .then((user) => fetch(`/api/posts?userId=${user.id}`))
    .then((res) => res.json());
}
 
// async/await
async function getUser(id) {
  const userRes = await fetch(`/api/users/${id}`);
  const user = await userRes.json();
  const postsRes = await fetch(`/api/posts?userId=${user.id}`);
  return postsRes.json();
}

async function getUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    return await res.json();
  } catch (err) {
    console.error(err);
  }
}

Object.entries({ a: 1, b: 2 }); // [['a', 1], ['b', 2]]
'5'.padStart(3, '0'); // '005'

// 객체 스프레드/rest
const { a, ...rest } = { a: 1, b: 2, c: 3 };
const merged = { ...obj1, ...obj2 };
 
// 비동기 반복 (for await...of)
async function process(asyncIterable) {
  for await (const item of asyncIterable) {
    console.log(item);
  }
}
 
// Promise.finally
fetchData()
  .then((data) => render(data))
  .catch((err) => showError(err))
  .finally(() => hideLoadingSpinner());

const re = /(?<year>\d{4})-(?<month>\d{2})/;
const match = re.exec('2026-07');
match.groups.year; // '2026'

// 배열 평탄화
[1, [2, 3, [4, 5]]].flat(2); // [1, 2, 3, 4, 5]
[1, 2, 3].flatMap((n) => [n, n * 2]); // [1, 2, 2, 4, 3, 6]
 
// Object.fromEntries — entries의 반대
Object.fromEntries([['a', 1], ['b', 2]]); // { a: 1, b: 2 }
 
// 문자열 트림
'  hi  '.trimStart(); // 'hi  '
'  hi  '.trimEnd();   // '  hi'
 
// optional catch binding
try {
  doSomething();
} catch {
  // 에러 객체가 필요 없으면 () 생략 가능
  console.log('failed');
}

// Optional chaining — 중첩 객체 접근 시 에러 방지
const city = user?.address?.city;
user?.getName?.(); // 메서드 존재 여부까지 체크
 
// Nullish coalescing — null/undefined일 때만 기본값
const count = data.count ?? 0; // count가 0이어도 그대로 유지 (|| 는 0도 fallback됨)
 
// BigInt — Number.MAX_SAFE_INTEGER를 넘는 정수 처리
const big = 9007199254740993n;
 
// Promise.allSettled — 하나가 실패해도 전체 결과 확인 가능
const results = await Promise.allSettled([p1, p2, p3]);
// [{ status: 'fulfilled', value }, { status: 'rejected', reason }, ...]
 
// 동적 import
const module = await import('./module.js');
 
// globalThis — 환경(브라우저/Node) 상관없이 전역 객체 참조
globalThis.setTimeout(() => {}, 1000);

// String.replaceAll — 기존엔 정규식 g 플래그가 필요했음
'a-b-c'.replaceAll('-', '_'); // 'a_b_c'
 
// 논리 할당 연산자
a ||= b; // a가 falsy면 a = b
a &&= b; // a가 truthy면 a = b
a ??= b; // a가 null/undefined면 a = b
 
// 숫자 구분자 — 가독성용
const billion = 1_000_000_000;
 
// Promise.any — 하나라도 성공하면 resolve
const fastest = await Promise.any([fetchFromCDN1(), fetchFromCDN2()]);
 
// WeakRef — 가비지 컬렉션을 방해하지 않는 참조
const ref = new WeakRef(largeObject);

// 클래스 필드 선언 — constructor 없이 바로 필드 정의
class Counter {
  count = 0;              // public 필드
  #privateCount = 0;      // private 필드
  static instances = 0;   // static 필드
 
  increment() {
    this.count++;
    this.#privateCount++;
  }
 
  #privateMethod() {      // private 메서드
    return this.#privateCount;
  }
}
 
// 배열 뒤에서부터 탐색
[1, 2, 3, 4].at(-1); // 4, 기존엔 arr[arr.length - 1]
 
// 객체에 특정 키 존재 여부 (in 연산자보다 프로토타입 체인 영향 없음)
Object.hasOwn(obj, 'key');
 
// top-level await — 모듈 최상단에서 await 사용 가능
const data = await fetch('/api/config').then((r) => r.json());
export default data;
 
// 정규식 매치 인덱스
const re = /\d+/d;
const match = re.exec('abc123');
match.indices; // 매치된 위치 정보

// findLast / findLastIndex — 배열을 뒤에서부터 탐색
const users = [{ id: 1, active: false }, { id: 2, active: true }, { id: 3, active: true }];
users.findLast((u) => u.active);      // { id: 3, active: true }
users.findLastIndex((u) => u.active); // 2
 
// hashbang 문법 — Node 스크립트 shebang을 표준으로 인정
#!/usr/bin/env node
console.log('script');
 
// WeakMap 키 확장 — Symbol도 WeakMap의 키로 사용 가능
const wm = new WeakMap();
const sym = Symbol('key');
wm.set(sym, 'value');