자바스크립트의 새로운 기능들

ES2022가 확정한 신규 스펙 4가지와 ES2023 Stage 3 제안을 정리한 카카오엔터테인먼트 FE 팀의 정리 글이다. 코드 예제 중심으로 Top-level await, Array.prototype.at(), Object.hasOwn(), Error Cause 각각의 도입 배경과 기존 방식의 문제점을 비교하며 실제 사용 맥락을 설명한다.

핵심 포인트

Top-level await: 모듈 최상위 레벨에서 async 함수 없이 await 사용 가능, import하는 쪽은 비동기 처리 완료 전까지 자동 대기
Array.prototype.at(): 음수 인덱스(Negative Indexing)로 배열 뒤에서부터 접근 가능, Python과 유사한 패턴 - at(-1)이 마지막 원소
Object.hasOwn(): hasOwnProperty()의 오버라이딩 취약점·Object.create(null) 오류 두 가지 문제를 정적 메서드로 해결
Error Cause: new Error(message, { cause: originalError }) 패턴으로 에러 체이닝 시 원인 추적이 용이해짐
2015년 이후 ECMAScript는 매년 6월 새 스펙 발표, ES2022는 2022년 6월 확정

상세 정리

Top-level await 이전: IIAFE(즉시 실행 async 함수 표현식) 또는 Promise export 패턴이 필요해 코드가 복잡하고 Promise를 거치지 않고도 접근 가능한 위험 존재
Top-level await 적용 시: 해당 모듈 전체가 하나의 거대한 async 함수처럼 동작, import하는 모듈은 await 완료 전까지 진입 대기
at() 이전: arr[arr.length - 1], slice(-1)[0], reverse()[0] 세 가지 우회 방법 사용
at(): 양수 인덱스는 기존 대괄호 접근과 동일, 배열 범위 밖 인덱스는 undefined 반환
hasOwnProperty 문제 1 - Overriding: 객체 내부에 hasOwnProperty를 직접 정의하면 prototype 메서드가 shadowed
hasOwnProperty 문제 2 - Object.create(null): prototype 상속이 없는 객체에서 호출 시 TypeError 발생
Object.hasOwn(obj, key) 패턴은 두 문제를 모두 회피, 기존 workaround였던 Object.prototype.hasOwnProperty.call() 불필요
Error Cause 이전: 중첩된 try-catch에서 에러를 다시 throw할 때 원인 에러 정보가 손실되거나 메시지에 직접 포함해야 했음
Error Cause: cause 프로퍼티로 원본 에러 객체 또는 임의 타입의 원인 정보를 체계적으로 전달 가능
ECMAScript는 TC39 제안(proposal) 절차로 Stage 0~4를 거쳐 확정, Stage 3부터 브라우저 구현 시작

왜 읽나ES2022 신규 스펙 4개의 탄생 배경과 기존 패턴의 한계를 코드로 나란히 비교해 실무에서 언제 어떻게 쓸지 바로 감이 오는 글이다.

카카오 엔터테인먼트 FE 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

자바스크립트의 새로운 기능들

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다