집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript의 새로운 기능: ECMAScript 에디션

JavaScript의 새로운 기능: ECMAScript 에디션

王林원래의: 2024-09-10 11:34:09581검색

What’s New in JavaScript: ECMAScript Edition

TL;DR: JavaScript ECMAScript 2024의 획기적인 기능을 살펴보세요. 이 가이드에서는 코딩 경험을 변화시키기 위해 고안된 최신 혁신 기술을 살펴봅니다. 간편한 데이터 그룹화를 위한 새로운 그룹별 방법부터 날짜 및 시간 관리를 단순화하는 판도를 바꾸는 Temporal API에 이르기까지 ECMAScript 2024에는 효율성과 정확성을 향상시키는 도구가 가득합니다.

ECMAScript는 JavaScript의 기본 구성 요소입니다. 1990년대 중반 이후 ECMAScript는 개발자에게 새로운 기능을 제공하고 웹 경험의 역동적이고 사용자 친화적인 특성을 강화하도록 발전했습니다. 간단한 스크립트부터 복잡한 프레임워크까지 디지털 환경에 영향을 미치고 웹 개발의 창의성과 혁신을 촉진합니다.

수년에 걸쳐 ECMAScript의 수많은 에디션이 출시되었으며 각 에디션에는 새로운 기능과 개선 사항이 포함되었습니다. 이 가이드에서는 최신 ECMAScript 2024(Edition 15)의 새로운 기능을 설명합니다. 코딩 방식을 혁신할 최신 기능을 탐색할 준비를 하세요!

groupBy 메소드를 사용하여 동기 Iterable 그룹화

자바스크립트 개발자는 특정 기준에 따라 데이터를 그룹으로 구성해야 하는 경우가 많습니다. ECMAScript 2024의 새로운 groupBy 메서드를 사용하면 이 작업이 쉬워집니다. 항목 컬렉션이 있고 이를 특정 속성으로 그룹화하고 싶다고 가정해 보세요. groupBy가 이를 위한 유용한 도구입니다!

그룹바이란 무엇인가요?

groupBy 메소드는 Object 및 Map에서 사용할 수 있는 정적 메소드입니다. 이를 통해 각 항목에서 파생된 키를 기반으로 컬렉션의 항목을 빠르고 효율적으로 그룹화할 수 있습니다. 결과는 각 키가 그룹에 해당하고 값은 해당 그룹에 속하는 항목의 배열인 새 개체입니다.

여러 사람이 있고 연령별로 그룹화하고 싶다고 가정해 보겠습니다. groupBy 방법
을 사용하여 이를 수행하는 방법은 다음과 같습니다.

const people = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 25 },
  { name: "David", age: 30 },
  { name: "Eve", age: 35 }
];
const groupedByAge = Object.groupBy(people, person => person.age);
console.log(groupedByAge);

출력

{
  "25": [
    { "name": "Alice", "age": 25 },
    { "name": "Charlie", "age": 25 }
  ],
  "30": [
    { "name": "Bob", "age": 30 },
    { "name": "David", "age": 30 }
  ],
  "35": [
    { "name": "Eve", "age": 35 }
  ]
}

Promise.withResolvers()

JavaScript Promise는 항상 비동기 작업 관리를 위한 믿음직한 동반자였습니다. 하지만 ECMAScript 2024에는 Promise.withResolvers()라는 새로운 도구가 있습니다. 이 강력한 정적 메서드는 Promise가 해결되건 거부되건 외부 코드에서 직접 Promise의 운명을 완벽하게 제어할 수 있는 열쇠를 제공합니다.

이 Promise.withResolvers() 함수는 세 가지 속성이 있는 객체, 즉 resolve 및 reject 함수를 사용하는 새로운 promise를 반환합니다. 그것과 관련이 있습니다.

사용자 입력에 따라 완료하거나 취소할 수 있는 작업을 관리한다고 가정해 보겠습니다. Promise.withResolvers() 함수를 사용하는 방법은 다음과 같습니다.

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

  // Simulate an async task.
  setTimeout(() => {
    console.log("Task is pending...");
  }, 1000);

  return { promise, resolve, reject };
}

const { promise, resolve, reject } = createControllablePromise();

// Somewhere in your code, you can resolve or reject the promise.
setTimeout(() => {
  resolve("Task completed successfully!");
  // or if something goes wrong.
  reject("Task failed due to an error.");
}, 3000);

promise
  .then(result => console.log(result))
  .catch(error => console.error(error));

일시적인

JavaScript의 Date API로 인해 어려움을 겪은 적이 있습니까? 꽤 어려울 수 있습니다.

ECMAScript 2024에서는 Temporal이라는 현대적이고 강력한 API가 날짜 및 시간 작업을 더욱 쉽고, 직관적이고, 정확하게 수행할 수 있도록 설계되었습니다. 판도를 바꾸는 이 API는 이전 Date 객체의 단점을 수정하고 다양한 새로운 기능을 제공합니다.

임시 API는 날짜와 시간을 처리하는 JavaScript의 새로운 방법입니다. 번거롭고 오류가 발생하기 쉬운 기존 Date API와 달리 Temporal은 더욱 정확하고 유연한 접근 방식을 제공합니다.

예를 들어 프로젝트 마감일을 오늘부터 90일로 계획하고 있다면 임시를 사용하면 정확한 날짜를 간단하게 계산할 수 있습니다.

다음 코드 예시를 참고하세요.

// Getting the current date in ISO format.
const today = Temporal.Now.plainDateISO();
console.log(today.toString()); // Output: "2024-07-02"

// Adding 90 days to the current date to calculate the deadline.
const deadline = today.add({ days: 90 });
console.log(deadline.toString()); // Output: "2024-09-30"

// Checking how many days remain until the deadline.
const daysUntilDeadline = deadline.since(today).days;
console.log(`Days until deadline: ${daysUntilDeadline}`); // Output: "Days until deadline: 90"

이 예에서는 임시가 작업 예약을 단순화하여 시간 기반 작업을 처리하는 JavaScript 개발자에게 필수적인 도구가 되는 방법을 보여줍니다.

정규식 v 플래그

ECMAScript 2024에는 정규식에 대한 새로운 개선 사항인 v 플래그가 도입되었습니다. 이 추가 기능을 통해 더욱 정교한 패턴 일치 및 문자열 조작이 가능해 개발자가 복잡한 텍스트 처리 작업을 더 효과적으로 제어할 수 있습니다.

v 플래그는 정규 표현식의 정확성과 표현력에 관한 것입니다. 특정 문자 그룹, 특히 특정 유니코드 속성을 가진 문자 그룹과 일치하는 패턴을 더 쉽게 정의할 수 있는 집합 표기법이 도입되었습니다. 즉, 더 정확하고 읽기 쉬운 정규식 패턴을 만들 수 있습니다.

정규 표현식에서 v 플래그를 사용하여 유니코드 속성을 기반으로 문자 집합을 일치시키는 방법을 살펴보겠습니다.

// Regular expression to match any character with the Unicode property "Letter" (L).
const regex = /\p{L}/v;

// Test string containing various Unicode characters.
const testString = "abc123ΩΩß漢字";

// Matching all characters with the "Letter" property.
const matches = [...testString.matchAll(regex)];
console.log(matches.map(match => match[0])); // Output: ["a", "b", "c", "Ω", "Ω", "ß", "漢", "字"]

Simplifying asynchronous code with Top-Level Await

The JavaScript ECMAScript 2024 introduces Top-Level Await, a game-changer for handling asynchronous operations at the module level. This feature eliminates the need to wrap your code in an async function, making your code more straightforward and easier to maintain.

Traditionally, await could only be used inside async functions, which meant you had to create wrapper functions for any asynchronous operations. Top-Level Await changes that by allowing you to use await directly within the top-level scope of a module. This makes handling asynchronous tasks such as fetching data or loading resources much easier when your module is first loaded.

// data.js
const response = await fetch('https://api.example.com/data');
export const data = await response.json();

// main.js
import { data } from './data.js';
console.log(data); // Logs the fetched data

Well-formed methods

Handling Unicode strings is crucial in a globalized web environment where apps must support multiple languages and symbols. ECMAScript 2024 introduces the concept of Well-formed Unicode Strings, which ensures that JavaScript handles Unicode data consistently and reliably across different environments.

A well-formed Unicode string follows the proper encoding rules, ensuring characters are represented correctly. Previously, malformed Unicode strings—those with invalid sequences—could lead to unexpected behavior or errors in JavaScript. This new feature helps to identify and correct these issues, making your code more robust.

Let’s see how you can check if a string is well-formed and how to correct a malformed string.

// Example of a well-formed Unicode string.
const string1 = "Hello, InfoWorld!";

// Example of a malformed Unicode string.
const string2 = "Hello, \uD800world!"; // \uD800 is an unpaired surrogate

// Checking if strings are well-formed.
console.log(string1.isWellFormed()); // Output: true (well-formed)
console.log(string2.isWellFormed()); // Output: false (malformed)

// Correcting the malformed string.
console.log(string2.toWellFormed()); // Output: 'Hello, �world!'

In the above code example, we have used the following methods:

isWellFormed(): To check whether the string is properly encoded according to Unicode standards. If the string contains any invalid sequences, it returns false.
toWellFormed(): To return a new string where any malformed sequences are replaced with the Unicode replacement character � (Often referred to as the replacement character). This ensures the string is well-formed, even if it originally contained errors.

Conclusion

Thanks for reading! The ECMAScript 2024(Edition 15) introduces a range of powerful features that enhance JavaScript’s flexibility, reliability, and efficiency, making it even more equipped to handle modern web development challenges.

Grouping synchronous iterables with the groupBy method offers an elegant way to categorize and manage data collections, simplifying data processing tasks.
Promise.withResolvers method provides a more controlled and accessible way to handle asynchronous operations, offering developers a streamlined approach for managing promises in their code.
Temporal API revolutionizes managing dates and times in JavaScript, offering a modern, precise, and user-friendly alternative to the traditional Date object.
Top-Level Await simplifies asynchronous programming by allowing await to be used at the module level, making code cleaner and easier to understand.
Regular Expression v Flag introduces new possibilities for complex pattern matching and string manipulation, empowering developers with more expressive and powerful regular expressions.
Well-formed Unicode strings ensure that JavaScript handles text data consistently and accurately across different environments, safeguarding against data corruption and enhancing the reliability of internationalized apps.

These enhancements make JavaScript more robust and easier to use, positioning it as a more powerful tool for developing complex, modern web apps. By embracing these features, developers can write more maintainable, efficient, and error-resistant code, ensuring their apps are ready for the future of web development.

Syncfusion JavaScript UI components library is the only suite you will ever need to build an app. It contains over 85 high-performance, lightweight, modular, and responsive UI components in a single package.

If you are an existing customer, you can access the new version of Essential Studio from the License and Downloads page. For new customers, we offer a 30-day free trial so you can experience the full range of available features.

If you have questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!