요즘 자바스크립트는 그냥 ‘웹사이트 짜는 언어’ 그 이상입니다. 매해 진화하는 문법과 기능은 프론트엔드 개발자뿐 아니라 서버, 데이터 처리, 심지어 하드웨어 제어까지 가능한 범용 언어로 바뀌고 있죠. 특히 ES2020부터 ES2025까지 도입된 기능들은 개발 생산성을 비약적으로 올려주며, 지금 이 순간에도 실무에서 널리 쓰이고 있어요. 이 포스팅에서는 그런 최신 기능들을 간단한 예제와 함께 정리하고, 실제 개발 과정에서 어떻게 활용할 수 있을지 구체적으로 풀어보겠습니다.
- 2의 53제곱보다 큰 숫자도 이젠 걱정 끝, BigInt가 해결합니다
- 안전한 객체 접근? Optional Chaining이면 코드가 훨씬 깔끔해져요
- null만 걸러내고 싶다면 Nullish Coalescing으로 정확하게!
- 동적 import()로 코드 스플리팅까지 자동으로
- 논리 할당 연산자로 상태 업데이트 한 줄이면 끝
- replaceAll과 Numeric Separator로 더 읽기 쉬운 코드 완성
- 프라이빗 필드로 클래스 보안 강화
- Top-level await 덕분에 async IIFE는 이제 그만
- findLast와 toSorted로 더 강력한 배열 처리
- 실무에서 유용한 Atomics.waitAsync, Decorators는 준비 중!
📌 BigInt – 안전하게 다룰 수 있는 초대형 정수
JavaScript에서 253 이상 수를 다룰 때 기존 Number 타입은 오차가 발생하기 쉬워요. 그 해결책이 바로 BigInt입니다. 숫자 뒤에 n을 붙이면 손쉽게 생성 가능하고, 수학 연산도 자유롭죠. 예를 들어 123456789012345678901234567890n 같은 숫자도 문제없이 계산됩니다.
개발자가 실제로 느낀 변화는?
기존엔 큰 수 연산을 다루려면 별도 라이브러리를 써야 했는데, 이제는 기본 문법으로 해결되니까 속도도 빨라지고 유지보수도 훨씬 쉬워졌습니다. 금융 데이터나 블록체인 숫자 처리할 때 특히 유용하더군요.
📌 Optional Chaining – 안전한 객체 탐색
중첩된 객체를 다룰 때 매번 null 체크하느라 코드가 지저분해지곤 했죠. ?. 연산자 덕분에 이제는 그럴 필요가 없습니다. 존재하지 않는 프로퍼티를 접근해도 에러 없이 undefined로 처리되니, 예상치 못한 오류가 확 줄어요.
내가 겪은 실전 예시
API 응답 데이터가 종종 바뀌는데, address 안에 있는 city가 가끔 빠지더라고요. user?.address?.city를 쓰고 나서부터는 JSON 데이터가 달라져도 앱이 뻗지 않았어요. 정말 신세계!
📌 Nullish Coalescing – 디폴트 값 정확하게 지정하기
논리 OR ||와 다르게, ??는 null이나 undefined일 때만 우항 값을 반환해요. 0이나 빈 문자열 같은 ‘거짓 같지만 의미 있는 값’도 살릴 수 있죠. 사용자 입력값 처리에 특히 유용해요.
직관적이면서도 안전한 코드
사용자가 0을 입력했는데도 || 때문에 ‘디폴트 값’으로 대체되는 바람에 버그 생긴 적 있었는데, ??로 바꾸니 딱 해결됐습니다.
📌 동적 import() – 필요할 때만 모듈 불러오기
코드가 길어질수록 중요한 게 ‘필요한 순간에만 불러오는’ 전략입니다. import()를 함수처럼 쓸 수 있어서, 예를 들어 특정 조건일 때만 모듈을 불러오면 초기 로딩 속도가 확 줄어요. SPA에서 정말 유용하죠.
한 줄 설명이 전부인 코드 최적화
다크모드 설정이 있는 앱에서, import('./dark-theme.js') 식으로 처리하면 진짜 필요한 시점에만 테마가 로드되니까 사용자 경험이 한결 좋아졌어요.
📌 논리 할당 연산자 – 가독성과 간결함을 동시에
&&=, ||=, ??=는 기존 변수 상태에 따라 값을 할당하는 방식인데요. 코드를 짧고 명확하게 만들어줍니다. 불필요한 if문이나 긴 조건문 줄이는데 탁월하죠.
개인적으로는 너무 자주 씁니다
예전엔 if (a) { a = b; } 이렇게 썼던 걸, 이제는 a &&= b;로 한 줄에 끝냅니다. 실수도 줄고, 팀원들도 금방 이해하더라고요.
📌 기타 꼭 알아야 할 최신 기능들
| 기능 | 버전 | 설명 |
|---|---|---|
| replaceAll | ES2021 | 문자열 내 모든 일치 항목을 치환 |
| Numeric Separators | ES2021 | 언더스코어로 숫자 가독성 향상 |
| 프라이빗 필드 | ES2022 | 외부 접근 불가한 #필드 제공 |
| Top-level await | ES2022 | 모듈 최상단에서 await 사용 가능 |
| findLast / toSorted 등 | ES2023 | 배열 조작 불변 메서드 도입 |
| Atomics.waitAsync | ES2024 | 메인스레드에서도 비동기 대기 가능 |
| Decorators | ES Stage 3 | 클래스 구성 요소에 선언적 기능 추가 |
이 밖에도 isWellFormed()나 정규표현식의 v 플래그, 심볼을 WeakMap 키로 쓸 수 있게 된 점 등은 아직 실무에 적용한 경험은 적지만, 점점 더 많은 프로젝트에 도입될 걸로 보입니다.
📌 마무리하며 – 최신 JS 기능, 왜 꼭 익혀야 할까?
자바스크립트는 단순히 문법만 아는 걸로 끝나는 언어가 아닙니다. 실제 현업에서는 불변성을 유지하며 상태를 업데이트하고, 비동기 로직을 유연하게 처리하며, 유저의 예외 상황까지 고려한 안전한 코드가 중요하죠. 이번에 정리한 ES2020~ES2025 기능들은 그 모든 걸 가능하게 합니다.
무조건 모두 다 쓸 필요는 없어요. 하지만 지금 프로젝트에 Optional Chaining이나 toSorted 하나만 써봐도, 유지보수가 훨씬 쉬워지고 버그도 줄어드는 걸 바로 느낄 수 있습니다. 저는 최근에 TypeScript와 함께 이 기능들을 적극적으로 도입하면서, 이전보다 훨씬 탄탄하고 읽기 쉬운 코드를 짜게 됐어요.
앞으로도 ES2026, ES2027로 기능은 계속 늘어나겠지만, 핵심은 지금 쓸 수 있는 기능을 ‘내 것’으로 만드는 거라고 생각해요. 괜히 새 기술에 겁먹지 말고, 한두 개씩 실습 프로젝트나 블로그 튜토리얼로 시도해보세요. 확실히 JS를 더 즐겁게 다룰 수 있게 될 거예요 😊