최신 JavaScript 기능: ES3의 새로운 기능

JavaScript는 끊임없이 발전하고 있으며 매년 개발자의 삶을 더욱 편리하게 만들기 위해 고안된 새로운 기능 세트를 제공합니다. 최신 업데이트인 ES2023에는 코드 작성, 읽기 및 유지 관리 방법을 향상시키는 새로운 도구가 포함되어 있습니다. 프로젝트에서 사용하고 싶은 뛰어난 기능 몇 가지를 자세히 살펴보겠습니다.

1. findLast 및 findLastIndex 배열

끝부터 시작하는 배열에서 항목을 찾아야 했던 적이 있나요? ES2023에는 이를 수행하는 findLast 및 findLastIndex가 도입되었습니다.

• findLast: 이 메소드는 지정된 조건을 충족하는 배열의 마지막 요소를 찾습니다.

  const numbers = [1, 2, 3, 4, 5];
  const lastEven = numbers.findLast(num => num % 2 === 0); // 4

  // Find last user who is 18 years old in large array
  const users = [/* array with 10000 users */]; 
  users.findLast(user => user.age === 18);

• findLastIndex: 이 메소드는 마지막 요소의 인덱스를 반환합니다.

  const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0); // 3

이러한 방법은 검색 논리를 뒤집어 코드를 더 명확하고 잠재적으로 더 효율적으로 만들어야 하는 상황에 적합합니다.

2. JavaScript 파일의 해시뱅(#!)

JavaScript로 명령줄 도구를 작성하고 있다면 해시뱅에 대한 새로운 지원이 마음에 드실 것입니다. #을 추가하면 됩니다! 파일 상단에서 인터프리터를 직접 지정하여 외부 명령 없이도 스크립트를 실행 가능하게 만들 수 있습니다.

#!/usr/bin/env node

console.log("Hello, world!");

이 기능은 특히 Node.js에서 CLI 도구를 구축하는 사람들에게 작지만 편리한 기능입니다.

3. 위크맵 키로서의 심볼

이전에는 WeakMap에서 객체만 키로 사용할 수 있었지만 ES2023에서는 기호도 허용하여 이를 변경합니다.

const wm = new WeakMap();
const sym = Symbol('key');
wm.set(sym, 'value');

console.log(wm.get(sym)); // 'value'

// Storing hidden game data that players can't easily access, such as secret unlock codes:
const secretCode = Symbol('vc-cheat-code');
const gameData = new WeakMap();
gameData.set(secretCode, 'PANZER-ASPIRINE-BIGBANG-PRECIOUSPROTECTION'); 

이 향상된 기능을 통해 WeakMap은 특히 기호가 제공하는 고유하고 충돌 없는 키가 필요한 경우 더욱 다양해졌습니다.

4. 방법에 따른 배열 그룹화

새로운 그룹 방식으로 배열 요소 그룹화가 훨씬 쉬워졌습니다.

• 그룹: 이 방법은 배열을 객체로 구성합니다. 키는 사용자가 제공하는 함수에 의해 결정되고 값은 각 키와 일치하는 요소의 배열로 구성됩니다.

  const animals = [
    { type: 'mammal', name: 'dog' },
    { type: 'bird', name: 'sparrow' },
    { type: 'mammal', name: 'cat' },
  ];

  const grouped = animals.group(({ type }) => type);
  console.log(grouped);
  // {
  //   mammal: [{ type: 'mammal', name: 'dog' }, { type: 'mammal', name: 'cat' }],
  //   bird: [{ type: 'bird', name: 'sparrow' }]
  // }

이 기능은 데이터를 빠르고 효율적으로 분류해야 하는 시나리오에 적합합니다.

5. Array.prototype.toSorted 및 Array.prototype.toReversed()

toSorted를 사용하면 배열 정렬이 훨씬 더 깔끔해졌습니다. 원래 배열을 변경하는 sort와 달리 toSorted는 새로 정렬된 배열을 반환하고 toReversed는 원본을 그대로 유지하면서 새로운 역방향 배열을 반환합니다.

const arr = [3, 1, 4, 1, 5];
const sortedArr = arr.toSorted();
console.log(sortedArr); // [1, 1, 3, 4, 5]
console.log(arr); // [3, 1, 4, 1, 5]

let data = [/* important data that shouldn't be modified */];
let reversedData = data.toReversed(); // Safely reverse

이 방법은 정렬된 버전으로 작업하면서 원본 배열을 보존해야 하는 경우에 매우 적합합니다.

6. Array.prototype.with

with 메소드는 특정 인덱스의 요소를 교체하여 새 배열을 생성하는 간단한 방법을 제공합니다.

const numbers = [10, 20, 30, 40];
const newNumbers = numbers.with(2, 25); // [10, 20, 25, 40]

이 방법은 함수형 프로그래밍 패턴에서 상태를 더 쉽게 관리할 수 있도록 배열을 불변으로 업데이트하려는 경우에 적합합니다.

7. Promise.withResolvers

Promise.withResolvers 덕분에 Promise 관리가 그 어느 때보다 쉬워졌습니다. 이 새로운 방법을 사용하면 Promise와 Resolve 및 Reject 기능을 한 번에 생성할 수 있습니다.

const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => resolve("done"), 1000);

promise.then(console.log); // "done"

특히 생성자 외부에서 Promise의 결과를 제어해야 할 때 비동기 작업을 처리하는 깔끔하고 간결한 방법입니다.

ES2023에 대한 브라우저 지원

JavaScript의 최신 버전인 ES2023은 2023년에 막 완성되었기 때문에 꽤 새로운 것입니다. 이는 아직 모든 웹 브라우저가 새로운 기능을 사용할 수는 없지만 다음과 같은 기능이 시작되고 있음을 의미합니다.

• Firefox, Chrome 및 Edge는 Array.prototype.findLast() 및 Array.prototype.findLastIndex() 일부 기능을 지원합니다.
• Safari는 아직 이러한 기능을 지원하지 않습니다.

• Node.js

  • Node.js 버전 19.0 이상에서는 다음을 사용할 수 있습니다.
    • Array.prototype.findLast()
    • Array.prototype.findLastIndex() 향후 업데이트에서는 더 많은 ES2023 기능이 추가될 것으로 예상됩니다.

트랜스파일러:
지금 새로운 ES2023 기능을 사용하기 위해 개발자는 Babel과 같은 트랜스파일러라는 도구를 사용하여 ES2023 코드를 더 많은 브라우저가 이해할 수 있는 이전 버전으로 바꿀 수 있습니다. 이렇게 하면 브라우저가 아직 준비되지 않은 경우에도 새로운 기능을 사용할 수 있습니다.

현재 ES2023에 대한 지원은 계속 늘어나고 있습니다. Firefox 및 Chrome과 같은 대형 브라우저에는 일부 기능이 포함되기 시작했습니다. 지원되는 항목에 대한 자세한 내용은 Can I Use를 확인하세요. 트랜스파일러를 사용하면 오늘날 이러한 새로운 기능을 사용할 수 있게 되며 앞으로 몇 년 동안 브라우저가 따라잡기를 기다립니다.

결론

ES2023은 JavaScript를 더욱 강력하고 작업하기 쉽게 만드는 다양한 새로운 기능을 제공합니다. 향상된 배열 방법부터 더 나은 Promise 처리에 이르기까지 이러한 업데이트는 모두 코드를 더 깔끔하고 효율적으로 만드는 것입니다. JavaScript가 지속적으로 성장하고 발전함에 따라 이러한 변경 사항을 최신 상태로 유지하면 항상 언어를 최대한 활용할 수 있습니다.

참고자료:

1. TC39 제안
2. ECMA-262 초안
3. MDN

위 내용은 최신 JavaScript 기능: ES3의 새로운 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!