이 포스팅에서는 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 타입을 기반으로 만들어집니다.
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 루프가 사용됩니다.
