ECMAScript 2023 (ES14, JavaScript)의 새로운 점은 무엇일까?

이 포스팅에서는 ES14 (ECMAScript 2023, 에크마스크립트 2023)의 새 기능과 개량된 점들을 알아보겠습니다.
 

반응형

---

1. Record와 Tuple 타입

ES14에서는 새로운 두 가지 타입을 선보입니다.  Record와 Tuple 타입인데요, 복잡한 데이터 구조를 간단히 이용하게 도와줍니다.  Record 타입은 object 타입과 비슷하지만, 각 값마다 정해진 키와 데이터 타입이 쓰입니다.  Tuple은 정렬된 데이터 컬렉션입니다, 그리고 각각 데이터 타입이 다를 수 있죠.
 
아래는 ES14에 선보이는 record와 tuple 타입의 예제입니다:

type Person = {
  name: string;
  age: number;
  address: [string, string, number];
};

const john: Person = {
  name: "John",
  age: 30,
  address: ["123 Main St", "Anytown", 12345],
};

이 예제에 보이는 Person 타입은 name에 string타입이, age에 number타입이, 그리고 address에는 tuple 타입이 정의되어 있습니다.  이 tuple타입은 첫 번째가 string (도로명), 두 번째도 string (도시명), 그리고 세 번째는 number (우편번호)로 정의되어 보입니다.  그 후로 john이라는 객체가 Person 타입을 기반으로 만들어집니다.
 

728x90

---

2. Pipeline Operator (파이프 오퍼레이터)

ES14에는 새로운 파이프 오퍼레이터가 선을 보입니다.  |> 파이프 오퍼레이터는 개발자들에게 더 쉽게 transformations (트랜스포메이션)을 읽고 이해할 수 있게 돕습니다.  각 트랜스포메이션은 이 오퍼레이터를 사용하여 나누어집니다.
 
아래는 이 오퍼레이터의 예제입니다:

const result = [1, 2, 3, 4, 5]
  |> ((arr) => arr.filter((n) => n % 2 === 0))
  |> ((arr) => arr.map((n) => n * 2))
  |> ((arr) => arr.reduce((a, b) => a + b));

console.log(result); // 결과값: 12

이 오퍼레이터를 이용함으로써, [1, 2, 3, 4, 5] 배열이 먼저 짝수로 필터가 됩니다.  그런 후에는 각 번호들이 두 배가 된 후, 서로 더해져서 마지막 결괏값이 12가 나오게 됩니다.

---

3. 화살표 함수 (arrow function)의 Named Parameters (네임드 파라미터)

ES14는 화살표 함수에 네임드 파라미터를 사용하여 코드를 쉽게 읽고 관리할 수 있습니다.  개발자는 더 이상 객체의 구조분해가 필요가 없습니다.  
 
아래는 그 예제입니다:

const greet = ({ name, age }) => {
  console.log(`안녕하세요, 저의 이름은 ${name}이고 ${age}세 입니다.`);
};

greet({ name: "홍길동", age: 30 });
// 리턴값: 안녕하세요, 저의 이름은 홍길동이고 30세 입니다.

이 예제에서는 greet이라는 화살표 함수에 name과 age 파라미터로 구조 분해된 객체가 정의되어있습니다.  그 뒤에는 greet 함수가 name과 age가 들어간 객체의 파라미터로 호출이 됩니다.

---

4. 비동기 (Async) 반복자 (Iterators)와 Generators

ES14는 비동기 반복자와 generator를 사용할 수 있습니다.  아래는 예제입니다: 

async function getData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  return data;
}

async function* processData() {
  const data = await getData();
  for (const item of data) {
    yield item * 2;
  }
}

(async () => {
  for await (const result of processData()) {
    console.log(result);
  }
})();

이 예제에서는, getData라는 비동기 함수에서 fetch를 사용하여 JSON 데이터를 불러옵니다.  그리고 데이터를 가지고 와서 각 값에 2를 곱하는 processData라는 비동기 generator 함수가 정의되어 있습니다.  마지막에는 비동기 generator 함수에서의 결괏값을 보여주는 for-await-of 루프가 사용됩니다.

---

도움이 되셨거나 즐거우셨다면 아래의 ❤️공감버튼이나 구독버튼을 눌러 주세요~  감사합니다

 

---

출처 (Source):

makeuseof.com