-
Javascript ES15(ECMAScript 2024) 문법정리JS & TS 2024. 8. 14. 18:01728x90
ES13에 대한 글을 작성한 지 얼마 안 된 것 같은데 벌써 ES15가 정식 출시하였습니다.
JavaScript의 최신 표준인 ECMAScript 2024 (ES15)에서는 개발자들이 더욱 강력한 기능들을 활용할 수 있도록 다양한 새로운 기능들이 도입되었습니다.
아래에서는 ES15의 주요 기능들을 정리하고, 각 기능에 대해 ES15 이전과 이후의 코드를 비교해 보겠습니다.
1. Object 및 Array 그룹화
Object.groupBy() 및 Array.prototype.groupBy() 메서드를 사용하면 객체나 배열의 요소를 특정 조건에 따라 그룹화할 수 있습니다.
예를 들어, 다음과 같이 과일 목록을 양에 따라 그룹화할 수 있습니다.
(참고로 이번에 추가된 메서드는 원래 Array 프로토타입 메서드로 있었으나, 웹 호환성 이슈로 인해 정적 메서드로 이름을 변경하였습니다.)
ES15 이전
데이터를 그룹화하려면 반복문과 조건문을 사용해야 했습니다.
const fruits = [ { name: 'apple', quantity: 10 }, { name: 'banana', quantity: 20 }, { name: 'cherry', quantity: 10 } ]; const groupedByQuantity = {}; fruits.forEach(fruit => { const key = fruit.quantity; if (!groupedByQuantity[key]) { groupedByQuantity[key] = []; } groupedByQuantity[key].push(fruit); }); console.log(groupedByQuantity); // 출력: // { // '10': [{ name: 'apple', quantity: 10 }, { name: 'cherry', quantity: 10 }], // '20': [{ name: 'banana', quantity: 20 }] // }
ES15 이후
Object.groupBy()를 사용하면 코드가 훨씬 간결해집니다.
const groupedByQuantity = Object.groupBy(fruits, fruit => fruit.quantity); console.log(groupedByQuantity); // 출력: // { // '10': [{ name: 'apple', quantity: 10 }, { name: 'cherry', quantity: 10 }], // '20': [{ name: 'banana', quantity: 20 }] // }
2. Temporal API
Temporal API는 기존의 Date 객체보다 더욱 강력한 날짜 및 시간 처리를 제공합니다.
예를 들어, 다음과 같이 Temporal.PlainDate 객체를 사용하여 날짜를 다룰 수 있습니다.
ES15 이전
날짜와 시간을 다루는 작업은 Date 객체를 사용해야 했으며, 이 객체는 불편한 부분이 많았습니다.
const date = new Date('2024-06-30'); console.log(date.getFullYear()); // 2024 console.log(date.getMonth() + 1); // 6 (월은 0부터 시작) console.log(date.getDate()); // 30
ES15 이후
Temporal 객체를 사용하면 날짜와 시간을 더 직관적으로 처리할 수 있습니다.
const date = Temporal.PlainDate.from('2024-06-30'); console.log(date.year); // 2024 console.log(date.month); // 6 console.log(date.day); // 30
3. Top-Level Await
이제 모듈의 최상위 범위에서 await를 사용할 수 있습니다.
이는 비동기 작업의 초기화 코드 작성 시 유용합니다.
ES15 이전
모듈 내에서 비동기 작업을 처리하려면 즉시 실행 함수(IIFE)나 별도의 함수 내에서 await를 사용해야 했습니다.
(async () => { const module = await import('./someModule.js'); console.log(module.someFunction()); })();
ES15 이후
이제 모듈의 최상위 범위에서 await를 사용할 수 있어 코드가 더 간단해졌습니다.
const module = await import('./someModule.js'); console.log(module.someFunction());
4. 패턴 매칭
Pattern Matching 기능을 사용하면 데이터를 더욱 직관적이고 간결하게 처리할 수 있습니다.
ES15 이전
복잡한 조건문을 사용하여 객체의 구조를 검사해야 했습니다.
const data = { type: 'success', value: 42 }; let result; if (data.type === 'success') { result = `Success: ${data.value}`; } else if (data.type === 'error') { result = `Error: ${data.message}`; } console.log(result); // "Success: 42"
ES15 이후
패턴 매칭을 통해 더 간결하게 표현할 수 있습니다.
const result = match(data, [ { when: { type: 'success' }, then: ({ value }) => `Success: ${value}` }, { when: { type: 'error' }, then: ({ message }) => `Error: ${message}` }, ]); console.log(result); // "Success: 42"
5. RegExp v 플래그 및 논리 할당 연산자
RegExp의 v 플래그는 정규 표현식에서 더 세부적인 매칭 정보를 제공합니다.
또한, 논리 할당 연산자(&&=, ||=, ??=)는 코드의 간결성을 높여줍니다.
ES15 이전
정규 표현식에서 세부적인 매칭 정보를 얻으려면 추가적인 코드가 필요했습니다. 또한 논리 할당을 위해 조건문을 사용해야 했습니다.
const regex = /[\w\s]/g; // 알파벳, 숫자, 밑줄, 공백 문자만 매칭 const str = 'foo bar 123!'; const matches = str.match(regex); console.log(matches); // ['f', 'o', 'o', ' ', 'b', 'a', 'r', ' ', '1', '2', '3'] let x = null; if (x === null || x === undefined) { x = 'fallback'; } console.log(x); // 'fallback'
ES15 이후
v 플래그를 사용하여 더 많은 정보를 쉽게 얻을 수 있으며, 논리 할당 연산자로 코드가 간결해집니다.
const regex = /\p{L}/v; // 모든 언어의 문자만 매칭 const str = 'foo bar 123!'; const matches = str.match(regex); console.log(matches); // ['f', 'o', 'o', 'b', 'a', 'r'] let x = null; x ??= 'fallback'; console.log(x); // 'fallback'
'JS & TS' 카테고리의 다른 글
TypeScript 유틸리티 타입 소개 (0) 2024.10.11 구조분해 사용 팁 4가지 (2) 2024.09.14 자바스크립트 비동기 프로그래밍 패턴 (0) 2024.05.28 Javascript ES14 문법정리 (0) 2023.12.15 Javascript ES13 문법정리 (0) 2023.12.04