정보실

웹학교

정보실

javascript 오늘 사용할 수있는 5 가지 ES2019 기능

본문

https://blog.logrocket.com/5-es2019-features-you-can-use-today/ 


ES6으로 알려진 ECMAScript 2015는 6 년이 걸린 주요 릴리스였습니다. 그 이후로 ECMAScript 표준을 개발하는 기관인 기술위원회 (TC39)는 매년 새로운 표준 버전을 발표했습니다.


이 연례 릴리스 주기로 인해 프로세스가 간소화되었으며 JavaScript 커뮤니티에서 환영하는 새로운 기능을 신속하게 사용할 수 있게 되었습니다.

올해 ECMAScript 2019 (또는 ES2019)가 발표 될 예정입니다. 새로운 기능에는 Object.fromEntries(), trimStart(), trimEnd(), flat(), flatMap(), 심볼 객체의 설명 속성, 선택적 catch 바인딩 등이 포함됩니다.


좋은 소식은 이러한 기능이 이미 최신 버전의 Firefox 및 Chrome에서 구현되었으며 이전 버전의 브라우저에서 이러한 기능을 처리 할 수 ​​있기 때문입니다.


1. Object.fromEntries() 


한 형식에서 다른 형식으로 데이터를 변환하는 것은 JavaScript에서 매우 일반적입니다. 객체를 배열로 쉽게 변환 할 수 있도록 ES2017에서는 Object.entries() 메소드를 도입했습니다. 이 메소드는 객체를 인수로 취하여 객체 자체의 열거 가능한 문자열 키 특성 쌍의 배열을 [key, value] 형식으로 반환합니다.


const obj = {one: 1, two: 2, three: 3};

console.log(Object.entries(obj));    
// => [["one", 1], ["two", 2], ["three", 3]]

반대의 경우 키 - 값 쌍의 목록을 객체로 변환하고 싶다면 어떻게 해야 할까요? 파이썬과 같은 일부 프로그래밍 언어는이 목적을 위해 dict() 함수를 제공합니다. Underscore.js와 Lodash에도 _.fromPairs 함수가 있습니다.


ES2019는 Object.fromEntries() 메소드를 도입하여 JavaScript와 비슷한 기능을 제공하고자 합니다. 이 정적 메서드를 사용하면 키 - 값 쌍의 목록을 객체로 쉽게 변형 할 수 있습니다.


const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);

console.log(obj);    // => {one: 1, two: 2, three: 3}

보시다시피, Object.fromEntries()는 단순히 Object.entries()의 반대입니다. 이전에는 동일한 결과를 얻을 수 있었지만 그다지 간단하지 않았습니다.


const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Array.from(myArray).reduce((acc, [key, val]) => Object.assign(acc, {[key]: val}), {});

console.log(obj);    // => {one: 1, two: 2, three: 3}

Object.fromEntries()에 전달 된 인수는 두 요소로 된 배열과 유사한 객체를 반환하는 한 반복 가능한 프로토콜을 구현하는 모든 객체가 될 수 있습니다.


예를 들어 다음 코드에서 Object.fromEntries()는 Map 객체를 인수로 사용하고 키와 해당 값이 Map의 쌍에 의해 지정된 새 객체를 만듭니다.


const map = new Map();
map.set('one', 1);
map.set('two', 2);

const obj = Object.fromEntries(map);

console.log(obj);    // => {one: 1, two: 2}

Object.fromEntries() 메서드는 객체 변형에도 매우 유용합니다. 다음 코드를 고려하십시오.


const obj = {a: 4, b: 9, c: 16};

// convert the object into an array
const arr = Object.entries(obj);

// get the square root of the numbers
const map = arr.map(([key, val]) => [key, Math.sqrt(val)]);

// convert the array back to an object
const obj2 = Object.fromEntries(map);

console.log(obj2);  // => {a: 2, b: 3, c: 4}

이 코드는 객체의 값을 제곱근으로 변환합니다. 이를 위해 먼저 객체를 배열로 변환 한 다음 map() 메서드를 사용하여 배열에 있는 값의 제곱근을 가져옵니다. 결과는 객체로 다시 변환 할 수 있는 배열의 배열입니다.


Object.fromEntries()가 유용하게 사용되는 또 다른 상황은 다음 예제와 같이 URL의 쿼리 문자열로 작업하는 경우입니다.


const paramsString = 'param1=foo&param2=baz';
const searchParams = new URLSearchParams(paramsString);

Object.fromEntries(searchParams);    // => {param1: "foo", param2: "baz"}

이 코드에서 쿼리 문자열은 URLSearchParams() 생성자에 전달됩니다. 그런 다음 URLSearchParams 객체 인스턴스인 반환 값이 Object.fromEntries() 메서드에 전달됩니다. 결과는 각 매개 변수를 특성으로 포함하는 오브젝트입니다.


Object.fromEntries() 메서드는 현재 스테이지4 제안이며 ES2019 표준에 포함될 준비가 되었음을 의미합니다.







페이지 정보

조회 71회 ]  작성일19-06-23 11:13

웹학교