JavaScript 2023
JavaScript 2023 (ES14): ECMAScript 2023의 주요 기능
- *ECMAScript 2023 (ES14)**은 2023년에 발표된 JavaScript 표준으로, 이전 버전들처럼 코드의 간결성과 유연성을 향상시키는 여러 새로운 기능들이 도입되었습니다. 배열 및 객체 처리 개선, 비동기 작업 최적화, 메서드 추가 등 다양한 기능들이 추가되어 JavaScript가 더욱 강력하고 사용하기 쉬워졌습니다.
이 가이드는 **ES14(ECMAScript 2023)**에서 도입된 주요 기능과 사용 예시를 설명합니다.
1. Array.prototype.toSorted()
toSorted() 메서드는 배열을 정렬한 후에 새로운 배열을 반환하는 메서드입니다. 기존의
**sort()**는 배열을 제자리에서 변경했지만, **toSorted()**는 원본 배열을 변경하지
않고 정렬된 배열을 반환합니다.
1.1. toSorted() 사용 예시
const numbers = [3, 1, 4, 1, 5, 9];
const sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // [1, 1, 3, 4, 5, 9]
console.log(numbers); // [3, 1, 4, 1, 5, 9] (원본 배열은 변경되지 않음)
주요 특징
- 배열을 변경하지 않고 새로운 배열을 반환.
- 불변성을 유지하면서 정렬 작업을 할 수 있음.
2. Array.prototype.toSpliced()
toSpliced() 메서드는 배열을 수정하는 대신 새로운 배열을 반환하면서 특정
요소를 추가하거나 제거할 수 있습니다. 기존의 **splice()**와 유사하지만, 원본 배열을 수정하지 않는다는 점이 다릅니다.
2.1. toSpliced() 사용 예시
const fruits = ['apple', 'banana', 'cherry'];
const newFruits = fruits.toSpliced(1, 1, 'orange'); // 1번째 인덱스에서 1개 제거하고 'orange' 추가
console.log(newFruits); // ['apple', 'orange', 'cherry']
console.log(fruits); // ['apple', 'banana', 'cherry'] (원본 배열은 변경되지 않음)
주요 특징
- 불변성을 유지하면서 배열 요소를 추가 또는 제거 가능.
- *
splice()*의 불변 버전으로, 원본 배열을 유지하면서 새로운 배열을 반환.
3. Array.prototype.with()
with() 메서드는 배열의 특정 인덱스의 값을 변경한 새로운 배열을 반환합니다. 기존 배열의 값은 유지하면서,
특정 요소를 변경한 배열을 반환하는 방식입니다.
3.1. with() 사용 예시
const numbers = [1, 2, 3, 4, 5];
const updatedNumbers = numbers.with(2, 10); // 2번째 인덱스를 10으로 변경
console.log(updatedNumbers); // [1, 2, 10, 4, 5]
console.log(numbers); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)
주요 특징
- 배열의 특정 인덱스 값을 변경한 새로운 배열을 반환.
- 불변성을 유지하면서 배열 요소를 변경 가능.
4. Object.prototype.toStringTag 속성
- *
Object.prototype.toStringTag*는 객체의toString()메서드에서 반환하는 문자열을 사용자 정의할 수 있는 속성입니다. 이를 통해 객체의 타입을 커스터마이즈할 수 있습니다.
4.1. toStringTag 사용 예시
const myObject = {
[Symbol.toStringTag]: 'CustomObject'
};
console.log(Object.prototype.toString.call(myObject)); // [object CustomObject]
주요 특징
- 객체의 타입을 사용자 정의 가능.
toString()메서드를 사용할 때 객체의 타입을 커스터마이즈.
5. Symbol.prototype.description 추가 개선
- *
Symbol.prototype.description*은 심볼 객체의 **설명(description)**을 반환하는 속성입니다. ES2020에서 도입되었으나, ES2023에서는 이 기능이 더욱 개선되어 심볼의 설명을 더 명확하게 다룰 수 있습니다.
5.1. Symbol.prototype.description 사용 예시
const sym = Symbol('myDescription');
console.log(sym.description); // 'myDescription'
6. WeakMap.prototype.emplace()
WeakMap.prototype.emplace() 메서드는 WeakMap에 값이 존재하는 경우 값을
업데이트하고, 존재하지 않는 경우 새로운 값을 추가하는 메서드입니다. 이는 상태 관리나 참조
관리에서 매우 유용할 수 있습니다.
6.1. emplace() 사용 예시
const weakMap = new WeakMap();
const obj = { key: 'value' };
weakMap.emplace(obj, {
insert: () => ({ initialized: true }),
update: oldValue => ({ ...oldValue, updated: true })
});
console.log(weakMap.get(obj)); // { initialized: true }
주요 특징
- 값이 없으면 추가, 있으면 업데이트하는 메서드.
- WeakMap과 같이 약한 참조를 다루는 구조에서 매우 유용.
7. RegExp 매칭 성능 최적화
정규 표현식(RegExp) 매칭의 성능이 ES2023에서 크게 개선되었습니다. 일치 속도가 최적화되어 더 복잡한 패턴에서도 성능이 크게 향상되었습니다.
주요 특징
- 복잡한 정규 표현식에서도 더 빠른 일치 성능 제공.
- 정규 표현식 매칭에서의 성능 최적화로 대용량 데이터 처리에서 이점.
8. Array.prototype.findLast()와 findLastIndex()
- *
findLast()*와 **findLastIndex()*는 배열에서 마지막으로 조건을 만족하는 요소를 찾는 메서드입니다. 기존의 **find()*는 배열의 앞에서부터 검색했지만, 이 메서드들은 뒤에서부터 검색하여 조건을 만족하는 첫 번째 요소를 반환합니다.
8.1. findLast() 사용 예시
const numbers = [1, 2, 3, 4, 5, 6];
const lastEven = numbers.findLast(num => num % 2 === 0);
console.log(lastEven); // 6 (마지막 짝수)
8.2. findLastIndex() 사용 예시
const numbers = [1, 2, 3, 4, 5, 6];
const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0);
console.log(lastEvenIndex); // 5 (마지막 짝수의 인덱스)
주요 특징
- 배열에서 조건을 뒤에서부터 검색해 첫 번째 일치하는 요소 또는 인덱스를 반환.
- *
find()*의 역방향 검색 버전.
요약
- *ES14(ECMAScript 2023)**은 JavaScript의 배열 처리, 객체 처리, 정규 표현식 성능 등을 개선하는 다양한 기능을 추가했습니다.
Array.prototype.toSorted(): 배열을 변경하지 않고 정렬된 새 배열을 반환.Array.prototype.toSpliced(): 배열의 일부를 변경한 새 배열을 반환.Array.prototype.with(): 배열의 특정 인덱스 값을 변경한 새로운 배열을 반환.- 정규 표현식 성능 최적화: 복잡한 패턴에서 더 빠른 매칭 성능 제공.
Object.prototype.toStringTag: 객체 타입을 커스터마이즈할 수 있는 기능.WeakMap.prototype.emplace(): 값이 없으면 추가, 있으면 업데이트.Array.prototype.findLast()와findLastIndex(): 배열의 뒤에서부터 검색해 조건을 만족하는 요소를 반환.
ES14은 JavaScript 개발자들이 더 안전하고 효율적인 코드를 작성할 수 있도록 도와주며, 배열 및 객체 처리와 같은 중요한 작업에서 성능과 사용성을
더욱 개선했습니다.