-
Javascript ES14 문법정리JS & TS 2023. 12. 15. 14:00728x90반응형
계속 작성하다 보니 어느덧 가장 최신인 ECMAScript 2023까지 왔습니다.
이렇게 정리를 해보니 점점 발전하고 있는 JS에 대해 새삼 느끼는 시간이었습니다.
1. findLast와 findLastIndex
배열 작업 시 특정 요소를 찾는 것은 자주 발생하는 작업입니다. find 메서드는 이러한 프로세스를 단순화하기 위해 도입되었지만, 첫 번째 일치하는 요소만 반환합니다.
그러나 때로는 배열의 끝에서부터 마지막 일치하는 요소를 찾아야 하는 상황이 있습니다. 이럴 때 findLast와 findLastIndex가 유용하게 사용됩니다.
// 이전 방법 const users = [ {id: 1, name: 'user1', age: 19}, {id: 2, name: 'user2', age: 14}, {id: 3, name: 'user3', age: 22}, {id: 4, name: 'user4', age: 13}, ]; let lastUser; for (let i = users.length - 1; i >= 0; i--) { if (users[i].age > 18) { lastUser = users[i]; break; } } console.log(lastUser); // {id: 3, name: 'user3', age: 22} // findLast() 사용 const lastUser = users.findLast(user => user.age > 18); console.log(lastUser); // {id: 3, name: 'user3', age: 22}
마찬가지로 findLastIndex 메서드는 조건을 만족하는 마지막 요소의 인덱스를 찾아야 할 때 유용할 수 있습니다.
하루 종일 기록된 일련의 온도가 있고 온도가 30도를 초과한 마지막 인스턴스를 찾고 싶다고 가정해 보겠습니다.
// 이전 버전 const temperatures = [25, 28, 30, 32, 33, 31, 29]; let lastIndex = -1; for (let i = temperatures.length - 1; i >= 0; i--) { if (temperatures[i] > 30) { lastIndex = i; break; } } console.log("Last index with temperature > 30:", lastIndex); => Last index with temperature > 30 (New): 5 // using findLastIndex() const lastIndexNew = temperatures.findLastIndex(temp => temp > 30); console.log("Last index with temperature > 30 (New):", lastIndexNew); => Last index with temperature > 30 (New): 5
2. Change Array by copy
ECMAScript 2023에서는 Array.prototype 및 TypedArray.prototype에 변경 사항을 유지한 채 배열을 수정할 수 있는 향상된 배열 메서드가 도입되었습니다.
2.1. toReversed
const months = ['January', 'February', 'March', 'April', 'May']; // 이전 방법 const reversedMonths = months.reverse(); console.log(months); // ['May', 'April', 'March', 'February', 'January']; // 원래 배열이 변경됨 console.log(reversedMonths); // ['May', 'April', 'March', 'February', 'January']; // toReversed() 사용 const reversedMonths = months.toReversed(); console.log(months); // ['January', 'February', 'March', 'April', 'May']; // 원래 배열은 변경되지 않음 console.log(reversedMonths); // ['May', 'April', 'March', 'February', 'January'];
2.2. toSorted
const prime = [13, 7, 17, 2]; // 이전 방법 const sortPrime = prime.sort(); console.log(prime); // [2, 7, 13, 17]; // 원래 배열이 변경됨 console.log(sortPrime); // [2, 7, 13, 17]; // toSorted() 사용 const sortPrime = prime.toSorted(); console.log(prime); // [13, 7, 17, 2]; // 원래 배열은 변경되지 않음 console.log(sortPrime); // [2, 7, 13, 17];
2.3. toSpliced
const numbers = [1, 2, 3, 4, 5, 6]; // 이전 방법 const spliceNumbers = numbers.splice(4, 1); console.log(numbers); // [1, 2, 3, 4, 6]; // 원래 배열이 변경됨 console.log(spliceNumbers); // [1, 2, 3, 4, 6]; // toSpliced() 사용 const sortPrime = prime.toSorted(4, 1); console.log(prime); // [1, 2, 3, 4, 5, 6]; // 원래 배열은 변경되지 않음 console.log(sortPrime); // [1, 2, 3, 4, 6];
2.4. with
const usernames = ['user1', 'user2', 'user3']; // 이전 방법 usernames[1] = 'newUser'; console.log(usernames); // ['user1', 'newUser', 'user3'] // with() 사용 const updatedUsernames = usernames.with(1, 'newUser'); console.log(usernames); // ['user1', 'user2', 'user3'] // 원래 배열은 변경되지 않음 console.log(updatedUsernames); // ['user1', 'newUser', 'user3']
3. Hashbang Grammar
ECMAScript 2023에서 도입된 해시뱅(#!) 문법은 소스 코드에서 쉬뱅 표기법을 사용할 수 있게 합니다.
이 기능은 스크립트와 모듈을 구분하는 데 도움이 되며 빌드 도구와의 호환성을 향상하며 다른 언어와의 일관성을 제공합니다.
#!/usr/bin/env node console.log('Hello from Hashbang Grammar!');
4. Symbols as WeakMap Keys
JavaScript에서 객체를 키로 사용하는 것은 때때로 원치 않는 부작용을 일으킬 수 있습니다. 객체는 참조 타입이므로 키로 사용하면 메모리 누수나 예상치 못한 동작이 발생할 수 있습니다. 이러한 문제를 해결하기 위해 불변하고 고유한 Symbol을 사용하여 키를 만들어 충돌을 방지할 수 있습니다.
// 이전 방법 const privateData = new Map(); const obj = {}; privateData.set(obj, 'This is private data'); console.log(privateData.get(obj)); // Output: "This is private data" // WeakMap과 Symbol 사용 const privateData = new WeakMap(); const obj = {label: 'Private data'}; const key = Symbol('privateKey'); privateData.set(key, obj); console.log(privateData.get(key)); // {label: 'Private data'}
반응형'JS & TS' 카테고리의 다른 글
Javascript ES15(ECMAScript 2024) 문법정리 (0) 2024.08.14 자바스크립트 비동기 프로그래밍 패턴 (0) 2024.05.28 Javascript ES13 문법정리 (0) 2023.12.04 Javascript ES12 문법정리 (0) 2023.12.01 Javascript ES11 문법정리 (2) 2023.11.24