Javascript ES10 문법정리

ECMAScript 2019 (ES10)은 개인적으로 정말 많이 사용하는 flatMap이나 trimStart, trimEnd와 같은 내용이 업데이트된 버전입니다.

IE를 제외하고 대부분의 브라우저가 지원하기 때문에 지금도 쉽게 사용해 볼 수 있습니다.

1. Array.flat() 및 Array.flatMap()

이전: 중첩된 배열을 결합하고 펼치는 것은 종종 사용자 정의 함수나 루프가 필요했습니다.
이후: flat() 및 flatMap()을 사용하면 이 작업을 간단하게 수행할 수 있습니다.

// 이전
const nestedArray = [1, [2, [3, 4], 5]];
const flattenedArray = [].concat.apply([], nestedArray);
// flattenedArray: [1, 2, [3, 4], 5]

// ES10
const nestedArray = [1, [2, [3, 4], 5]];
const flattenedArray = nestedArray.flat(Infinity);
// flattenedArray: [1, 2, 3, 4, 5]

2. String.trimStart() 및 String.trimEnd() (비슷하게 trimLeft, trimRight도 존재)

이전: 문자열의 시작 또는 끝에서 공백을 제거하는 것은 정규 표현식이나 사용자 정의 함수가 필요했습니다.
이후: trimStart() 및 trimEnd()를 사용하면 이 흔한 작업을 간소화할 수 있습니다.

// 이전
const text = "   안녕, 세계   ";
const trimmedText = text.replace(/^\s+/, "");

// ES10
const text = "   안녕, 세계   ";
const trimmedStart = text.trimStart();
const trimmedEnd = text.trimEnd();

3. Object.fromEntries()

이전: 키-값 쌍 배열에서 객체를 생성하는 것은 복잡했습니다.
이후: fromEntries()를 사용하면 쉽게 수행할 수 있습니다.

// 이전
const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.assign({}, ...entries.map(([key, val]) => ({ [key]: val })));

// ES10
const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries);

4. Object.getOwnPropertyDescriptors()

객체의 속성 설명자를 가져오는 기능이 추가되었습니다.

const obj = { x: 1 };
const descriptors = Object.getOwnPropertyDescriptors(obj);

 

5. Optional Catch Binding

이전: 변수에 바인딩하지 않고 오류를 처리하는 것은 불가능했습니다.
이후: 이제 catch 블록에서 오류 변수를 생략할 수 있습니다.

// 이전
try {
  // 오류가 발생할 수 있는 코드
} catch (error) {
  // 오류 처리
}

// ES10
try {
  // 오류가 발생할 수 있는 코드
} catch {
  // 변수에 바인딩하지 않고 오류를 처리
}