JavaScript ES2024(ES15)의 모든 신기능을 실무 관점에서 완벽 분석한다. 불변성을 지키면서도 간결한 코드를 작성할 수 있게 해주는 배열 메서드들과 유틸리티 함수들을 다룬다.
JavaScript ES2024(ES15)가 2024년 6월에 정식 발표되면서 웹 개발 생태계에 새로운 바람이 불고 있다. 이번 업데이트는 개발자 경험을 크게 향상시키는 실용적인 기능들로 가득하다.
toReversed() - 불변성을 지키는 배열 뒤집기
기존의 reverse() 메서드는 원본 배열을 변경했지만, 새로운 toReversed()는 원본을 유지하면서 뒤집힌 새 배열을 반환한다.
JavaScript - toReversed()
// ES2024 - toReversed()
const numbers = [1, 2, 3, 4, 5];
const reversed = numbers.toReversed();
console.log(numbers); // [1, 2, 3, 4, 5] (원본 유지)
console.log(reversed); // [5, 4, 3, 2, 1]
// 실무 활용
const userList = [
{ name: '김철수', age: 25 },
{ name: '박영희', age: 30 }
];
const reverseOrder = userList.toReversed();
ES2024 신기능
toReversed(), toSorted(), toSpliced() 등 모든 배열 변경 메서드에 불변성 버전이 추가되어 함수형 프로그래밍이 더 쉬워졌다.
Array.with() - 특정 인덱스 값 변경
배열의 특정 인덱스 값을 변경할 때도 불변성을 유지할 수 있다.
JavaScript - with()
const fruits = ['apple', 'banana', 'orange'];
const updated = fruits.with(1, 'grape');
console.log(fruits); // ['apple', 'banana', 'orange']
console.log(updated); // ['apple', 'grape', 'orange']
// React 상태 업데이트에서 활용
const toggleTodo = (index) => {
setTodoList(prev =>
prev.with(index, {
...prev[index],
completed: !prev[index].completed
})
);
};
Object.groupBy() - 객체 그룹화의 혁신
배열을 특정 조건으로 그룹화하는 작업이 훨씬 간단해졌다.
JavaScript - Object.groupBy()
const users = [
{ name: '김철수', department: '개발팀', age: 25 },
{ name: '박영희', department: '디자인팀', age: 30 },
{ name: '이민수', department: '개발팀', age: 28 }
];
// ES2024 - 한 줄로 그룹화
const grouped = Object.groupBy(users, u => u.department);
// { '개발팀': [...], '디자인팀': [...] }
Promise.withResolvers()
Promise와 resolve, reject를 분리해서 사용할 수 있는 새로운 패턴이다.
JavaScript - Promise.withResolvers()
// ES2024
const { promise, resolve, reject } = Promise.withResolvers();
// 파일 업로드 등 외부에서 resolve 호출이 필요한 경우 유용
class FileUploader {
startUpload(fileId, file) {
const { promise, resolve, reject } = Promise.withResolvers();
this.uploadPromises.set(fileId, { resolve, reject });
this.performUpload(fileId, file);
return promise;
}
}
브라우저 지원 현황과 폴리필
ES2024 기능들의 브라우저 지원 현황을 확인하고 필요시 폴리필을 사용하면 된다.
실무 활용 팁
ES2024의 새로운 기능들은 특히 함수형 프로그래밍과 불변성을 중시하는 현대 웹 개발에 최적화되어 있다. React, Vue 등의 프레임워크에서 상태 관리가 훨씬 편해진다.
마무리
JavaScript ES2024는 개발자 경험을 크게 향상시키는 실용적인 기능들을 제공한다. 특히 불변성을 지키면서도 간결한 코드를 작성할 수 있게 해주는 배열 메서드들과 Object.groupBy() 같은 유틸리티 함수들은 일상적인 개발 작업을 훨씬 편하게 만들어준다.
이러한 신기능들을 점진적으로 도입하면서 더 안전하고 읽기 쉬운 JavaScript 코드를 작성해보길 권한다.
