이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

• ▸✅ Array.at(-1) · structuredClone · Object.hasOwn 등 신문법
• ▸✅ Top-level await + Error cause 옵션
• ▸✅ Object.groupBy / using (ES2024) 도입 시점

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

왜 알아둬야 하나

2025년 AI 가 생성하는 JavaScript 코드의 30% 가 ES2022 이후 문법 을 씁니다. 모르면 읽기를 멈추고 검색 — 토큰·시간 모두 낭비.

1. Array.at(-1) — 마지막 요소 (ES2022)

const arr = [10, 20, 30];
console.log(arr.at(-1));            // 30   ← 뒤에서 1번째
console.log(arr.at(-2));            // 20   ← 뒤에서 2번째
console.log(arr[arr.length - 1]);   // 30   ← 옛 방식 (길이 - 1 계산 필요)
//
// 💡 Python 의 arr[-1] 처럼 음수 인덱스 지원 → 코드가 짧아짐

음수 인덱스로 뒤에서부터 접근. Python 의 arr[-1] 같은 편의성.

2. Object.hasOwn() — hasOwnProperty 의 안전판 (ES2022)

Object.hasOwn(obj, 'key');     // ✅ 권장
obj.hasOwnProperty('key');     // ❌ 옛 방식 — 객체가 hasOwnProperty 를 오버라이드 했으면 깨짐

린터 (ESLint) 가 자동 추천 하는 패턴.

3. structuredClone() — 깊은 복사 표준 (Node 17+)

const deep = structuredClone(original);

JSON.parse(JSON.stringify(...)) 의 한계 (Date·Map·Set 손실) 해결. 기본 내장 함수 — 라이브러리 불필요.

4. Top-level await (ES2022 modules)

// ESM 모듈 최상위
const data = await fetch('/config.json').then(r => r.json());
export default data;

async 함수로 감싸지 않아도 모듈 최상위에서 await 사용 가능. 동적 import 와 함께 자주.

5. Error cause (ES2022)

throw new Error('상품 조회 실패', { cause: originalError });

6. Array.fromAsync() (ES2024)

const urls = ['/a', '/b', '/c'];
const results = await Array.fromAsync(
    urls,
    async url => (await fetch(url)).json()
);

Promise 배열을 순차로 풀어 모음. Promise.all + map 의 더 깔끔한 형태 (다만 순차 처리 라 병렬은 여전히 Promise.all).

7. Object.groupBy() (ES2024)

const arr = [
    { type: 'fruit', name: 'apple' },
    { type: 'veg',   name: 'carrot' },
    { type: 'fruit', name: 'banana' }
];

// 🪣 두 번째 인자로 받은 함수 결과를 "키" 로 그룹화
const grouped = Object.groupBy(arr, item => item.type);
console.log(grouped);
// {
//   fruit: [ { type: 'fruit', name: 'apple' }, { type: 'fruit', name: 'banana' } ],
//   veg:   [ { type: 'veg',   name: 'carrot' } ]
// }

Lodash _.groupBy 가 표준 라이브러리 로 흡수. 라이브러리 의존성 -1.

8. using / await using (TC39 Stage 4)

{
    using db = await openDB();
    // 블록 끝나면 자동으로 db[Symbol.dispose]() 호출
}

try-finally 의 자원 정리 패턴 을 언어 차원에서. C# using, Python with 와 같은 사상. TypeScript 5.2+ 부터 사용 가능.

정리

이 8개를 알면 AI 생성 코드의 거의 모든 신규 문법을 멈추지 않고 읽을 수 있습니다. "이 문법이 뭐예요?" 를 AI 에 다시 물어볼 일이 사라집니다 — 직접 토큰 절약.

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

• ▸"이 코드에 Array.at(-1) · structuredClone · Object.hasOwn 등 신문법 적용해줘"
• ▸"이 깊은 복사를 structuredClone 으로 바꿔줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.