🎨 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
는 실무에서 매우 자주 쓰이는 최신 문법입니다.
이 글을 체크리스트처럼 참고하며 실전에 자연스럽게 녹여보세요.
다음 글에서는 전개 연산자(...), 나머지 매개변수, 구조 분해 할당의 고급 활용을 예제로 이어서 설명합니다.
'language > javascript' 카테고리의 다른 글
🎨 템플릿 리터럴, Symbol, BigInt – 자바스크립트 특수 타입 완전 정리 (0) | 2025.05.11 |
---|---|
🎨 전개 연산자(...), 나머지 매개변수, 구조 분해 할당 – 고급 활용 정리 (0) | 2025.05.11 |
🪄 순수 함수(Pure Function), 불변성(Immutability), 사이드 이펙트(Side Effect) 정리 (0) | 2025.05.11 |
🪄 함수 합성(Compose, Pipe)과 Lodash 실전 예제 (0) | 2025.05.11 |
🪄 커링(Currying)과 부분 적용(Partial Application) – 개념과 실전 패턴 비교 (0) | 2025.05.11 |
댓글