JavaScript Object.fromEntries()

개체 → 배열을 변환하는 Object.entries()가 있습니다. 하지만 반대로 하고 싶다면 어떻게 해야 할까요? 더 이상 궁금해하지 마세요! Object.fromEntries()를 사용하여 배열 → 객체 👏

const keyValuePair = [
  ['cow', '🐮'],
  ['pig', '🐷'],
];

Object.fromEntries(keyValuePair);
// { cow: '🐮', pig: '🐷' }

Object.fromEntries 101

물체의 해부학적 구조를 지적해 봅시다. 객체는 키와 값이 있는 것입니다.

const object = {
  key: 'value',
};

좋습니다. 이 논리로 작업합니다. 무언가를 객체로 변환하려면 키와 값이라는 두 가지 요구 사항이 있는 것을 전달해야 합니다.

이러한 요구 사항을 충족하는 두 가지 유형의 인수가 있습니다.

중첩된 키-값 쌍이 있는 배열

맵 객체

배열 → Object.fromEntries가 있는 객체

다음은 키-값 쌍이 있는 중첩 배열입니다.

const nestedArray = [
  ['key 1', 'value 1'],
  ['key 2', 'value 2'],
];

그리고 그것에 적용Object.fromEntries할 때 우리는 객체를 얻을 수 있습니다.

Object.fromEntries(nestedArray);

// { key 1: "value 1", key 2: "value 2"}

Map → Object.fromEntries가 있는 객체

JavaScript ES6는 객체와 매우 유사한 map이라는 새로운 객체를 가져왔습니다.

TC39: Map objects are collections of key/value pairs where both the keys and values may be arbitrary ECMAScript language values.

Map 및 객체와의 차이점에 대해 자세히 알아보려면 MDN docs을 확인하십시오.

새로운 지도 객체를 만들어 봅시다

// Using the constructor
const map = new Map([
  ['key 1', 'value 1'],
  ['key 2', 'value 2'],
]);

// OR we can use the instance method, "set"
const map = new Map();
map.set('key 1', 'value 1');
map.set('key 2', 'value 2');

// RESULT
// Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

이제 Object.fromEntries를 사용하여 지도를 객체로 변환해 보겠습니다.

Object.fromEntries(map);

// { key 1: "value 1", key 2: "value 2"}

다른 유형의 Object.fromEntries에 대한 TypeError

Object.fromEntries 에 다른 데이터 유형을 전달하려고 할 때 주의하십시오. 이 모든 것이 오류를 발생시킵니다 🚨

❌ 포착되지 않은 TypeError


유형



한정되지 않은Object.fromEntries(undefined)
없는Object.fromEntries(null)
부울Object.fromEntries(true)
숫자Object.fromEntries(100)
끈Object.fromEntries("hi")
물체Object.fromEntries({key: "value"})
단일 값 배열Object.fromEntries([1,2,3])

키-값 쌍만 전달하는지 확인하세요 👍

Object.fromEntries 대 Object.entries

Object.fromEntries는 Object.entries의 효과를 역전시킵니다. 따라서 Object.entries는 배열을 변환하고 키-값 쌍의 새로운 중첩 배열을 반환합니다. 그리고 Object.fromEntries는 그것을 객체로 되돌립니다.

const object = { key1: 'value1', key2: 'value2' };

const array = Object.entries(object);
// [ ["key1", "value1"], ["key2", "value2"] ]

Object.fromEntries(array);
// { key1: 'value1', key2: 'value2' }

객체 대 객체 변환

원작TC39 proposal을 읽어보면 이런 새로운 방식이 도입된 이유가 여기에 있다. Object.entries 가 도입되면서 결과를 다시 객체로 변환하는 간단한 방법이 없었습니다.

종종 우리가 Object.entries 를 사용하기로 선택한 이유는 filter 와 같은 멋진 배열 메서드에 대한 액세스를 제공하기 때문입니다. 그러나 그 변환 후에 우리는 그 배열에 갇혀 있습니다.

const food = { meat: '🥩', broccoli: '🥦', carrot: '🥕' };

// 😖 Stuck in Array land
const vegetarian = Object.entries(food).filter(
  ([key, value]) => key !== 'meat',
);
// [ ["broccoli", "🥦"], ["carrot", "🥕"] ]

그럼 더 이상! 유용한 배열 메서드를 모두 활용할 수 있지만 여전히 개체를 다시 가져올 수 있습니다. 마지막으로 객체 대 객체 변환 👏

const food = { meat: '🥩', broccoli: '🥦', carrot: '🥕' };

// 😄 Yay, still in Object land
const vegetarian = Object.fromEntries(
  Object.entries(food).filter(([key, value]) => key !== 'meat'),
);
// { broccoli: '🥦', carrot: '🥕' }

배열 → 객체 변환을 위한 대체 솔루션

Object.fromEntries는 2019년에 출시되었으니 아직은 상당히 새롭습니다. 따라서 키-값 쌍 배열을 더 나은 지원이 있는 개체로 변환할 수 있는 다른 방법을 살펴보겠습니다.

ES6 축소하여 배열 → 객체 변환

배열을 객체로 변환하는 일반적인 방법 중 하나는 reduce 를 사용하는 것입니다.

const array = [
  ['key1', 'value1'],
  ['key2', 'value2'],
];

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
]);

function toObject(pairs) {
  return Array.from(pairs).reduce(
    (acc, [key, value]) => Object.assign(acc, { [key]: value }),
    {},
  );
}

toObject(array);
toObject(map);

// RESULT
// { key1: 'value1', key2: 'value2' }

배열 → 객체 변환을 위한 라이브러리

키-값 쌍을 개체로 변환하는 기능은 Underscore와 Lodash에서도 사용할 수 있습니다.

밑줄

_.물체

Converts arrays into objects. Pass either a single list of [key, value] pairs, or a list of keys, and a list of values.

const array = [
  ['key1', 'value1'],
  ['key2', 'value2'],
];

_.object(array);
// { key1: 'value1', key2: 'value2' }

밑줄

_.fromPairs

The inverse of _.toPairs; this method returns an object composed from key-value pairs.

const array = [
  ['key1', 'value1'],
  ['key2', 'value2'],
];

_.fromPairs(array);
// { key1: 'value1', key2: 'value2' }

브라우저 지원

Internet Explorer를 제외하고 대부분의 주요 브라우저는 이 방법을 지원합니다 👍


브라우저



크롬
✅

파이어폭스
✅

원정 여행
✅

가장자리
✅

인터넷 익스플로러
❌

Browser Support: object.fromEntries

커뮤니티 입력

: 이 방법에 주의하십시오. 이 방법을 사용하는 데이터가 무엇인지 제어할 수 없으면 항목이 중복되면 해당 데이터를 잃게 됩니다!!

자원

MDN Web Docs: Object.fromEntries()

MDN Web Docs: Object.entries()

MDN Web Docs: Map vs Object

ECMAScript Spec

TC39 Proposal: Object.fromEntries

Stack Overflow: How to create an object from an Array of key-value pairs?

Stack Overflow: Convert Array to Object

Stack Overflow: How to reliably check an object is an EcmaScript 6 Map/Set?

Stack Overflow: Maps vs Objects in ES6, When to use?

Stack Overflow: Map vs Object in JavaScript

읽어주셔서 감사합니다 ❤
더 많은 코드 정보를 찾으려면 samanthaming.com을 방문하십시오.




🎨


🌟


👩🏻‍💻