-
Javascript ES10 문법정리JS & TS 2023. 11. 8. 16:48728x90반응형
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 { // 변수에 바인딩하지 않고 오류를 처리 }
반응형'JS & TS' 카테고리의 다른 글
Javascript ES12 문법정리 (0) 2023.12.01 Javascript ES11 문법정리 (2) 2023.11.24 Javascript ES9 문법정리 (2) 2023.10.16 Javascript ES8 문법정리 (0) 2023.10.06 Javascript ES7 문법정리 (0) 2023.09.28