본문 바로가기
language/javascript

🎨 ES6~ES2023까지의 핵심 문법 정리 – 꼭 알아야 할 최신 자바스크립트 기능

by 죄니안죄니 2025. 5. 11.

🎨 ES6~ES2023까지의 핵심 문법 정리 – 꼭 알아야 할 최신 자바스크립트 기능

ES6 이후 자바스크립트는 매년 새로운 기능을 추가하며 개발 생산성, 가독성, 안전성을 빠르게 향상시켜왔습니다.
이번 글에서는 ES6부터 ES2023까지 등장한 실무 중심의 핵심 문법을 정리합니다.
초보자라면 처음 정리용으로, 중급자라면 복습 및 체크리스트 용도로 활용할 수 있습니다.


 

버전 주요 키워드
ES6 (2015) 클래스,
let/const,
템플릿,
화살표 함수
ES7 (2016) includes(),
지수 연산자 **
ES8 (2017) async/await,
Object.entries
ES9 (2018) rest/spread in object,
async iterator
ES10 (2019) flat,
trimStart,
optional catch
ES11 (2020) nullish,
optional chaining,
Promise.allSettled
ES12 (2021) replaceAll,
Logical Assignment
ES13 (2022) top-level await,
class fields
ES14 (2023) Array findLast,
Hashbang
ES15 (2024+) Symbol.dispose,
decorator 표준화

1. let, const – 블록 스코프 변수 선언 (ES6)

let count = 0;      // 재할당 가능, 블록 스코프
const PI = 3.14;    // 재할당 불가
  • var는 함수 스코프, let/const는 블록 스코프
  • const는 객체 내부는 변경 가능

2. 템플릿 리터럴 (Template Literals)

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

줄바꿈, 표현식 삽입이 편리해짐


3. 화살표 함수 (Arrow Function)

const add = (a, b) => a + b;
  • this를 바인딩하지 않음 → 콜백 함수에 적합

4. 디스트럭처링 (Destructuring)

const user = { name: "Bob", age: 30 };
const { name, age } = user;

const nums = [1, 2];
const [a, b] = nums;

객체, 배열을 쉽게 분해 가능


5. 전개 연산자 / 나머지 매개변수 (...)

// 복사 및 병합
const arr = [1, 2];
const copy = [...arr, 3];

// 나머지 매개변수
function sum(...nums) {
  return nums.reduce((a, b) => a + b);
}

6. 기본 매개변수 (Default Parameters)

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

7. 비구조화 + alias + 기본값

const { title = "Untitled", author: writer = "Unknown" } = book;

8. Promise, async/await (ES6/ES2017)

async function fetchData() {
  const res = await fetch("/api");
  const json = await res.json();
  return json;
}

9. Optional Chaining (?.) – ES2020

const name = user?.profile?.name ?? "Unknown";
  • ?.: 중첩 객체에서 안전한 접근
  • ??: null/undefined만을 위한 기본값

10. Nullish Coalescing (??) – ES2020

const value = input ?? "기본값"; // undefined 또는 null일 경우만 대체

11. BigInt – ES2020

const big = 1234567890123456789012345678901234567890n;

정확한 고정 정수 연산 가능 (숫자 말고 n 접미사)


12. Top-level await (ES2022)

// 모듈 상단에서 바로 await 가능
const res = await fetch("/api/data");

13. Object.hasOwn(obj, key) – ES2022

if (Object.hasOwn(user, "email")) {
  // 객체 자체의 속성인지 확인
}

14. at() 메서드 – 배열/문자열 인덱싱 개선 (ES2022)

const arr = [10, 20, 30];
arr.at(-1); // 👉 30

15. Array.prototype.findLast / findLastIndex – ES2023

arr.findLast(v => v % 2 === 0);       // 마지막 짝수 값
arr.findLastIndex(v => v < 10);       // 마지막으로 조건 만족하는 인덱스

📌 마무리

ES6 이후 자바스크립트는 꾸준히 진화하며 가독성, 안정성, 기능성을 강화해 왔습니다.
특히 Optional Chaining, Nullish Coalescing, async/await는 실무에서 매우 자주 쓰이는 최신 문법입니다.
이 글을 체크리스트처럼 참고하며 실전에 자연스럽게 녹여보세요.

다음 글에서는 전개 연산자(...), 나머지 매개변수, 구조 분해 할당의 고급 활용을 예제로 이어서 설명합니다.

댓글