[js] object to array 변환

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다!

** 해당 글은 영문글의 번역본입니다.

 

 

ES2017 부터, object to array 를 위한 3가지 기능이 제공됩니다.

Array는 array를 위한 method를 제공하고 있죠! (달변가가 아니라... 쏘리 😝)

Object를 array로 변환한다면, array method를 사용할 수 있겠죠 ?! yay~! 🥳

 

[Legacy Code]

var numbers = {
  one: 1,
  two: 2,
};

var keys = [];

for (var number in numbers) {
  if (numbers.hasOwnProperty(number)) {
    keys.push(number);
  }
}

keys; // [ 'one', 'two' ]

 

[Renewal]

const zoo = {
  lion: '🦁',
  panda: '🐼',
};

Object.keys(zoo);
// ['lion', 'panda']

Object.values(zoo);
// ['🦁', '🐼']

Object.entries(zoo);
// [ ['lion', '🦁'], ['panda', '🐼'] ]

 

Object.keys(), Object.values(), Object.entries()를 사용한다면 

간단히 Object to Array 가 가능합니다 👍

 

[Renewal with Object.entries() + data-structuring] 

const numbers = {
  one: 1,
};

const objectArray = Object.entries(numbers);

objectArray.forEach(([key, value]) => {
  console.log(key); // 'one'
  console.log(value); // 1
});

 

Browser 별 지원에 관하여...

Object.keys()가 가장 잘 지원됩니다. 이 말은, Internet Explorer 에서도 지원이 된다는 것입니다~! 😆

Object.values(), Object.entries()의 경우에는, Internet Explorer 에서 지원이 안되요... ㅠㅠ

하지만! 우리에겐 polyfill 이 있죠! (polyfill 에 대해 알고 싶다면, 여기! 에서...)

 

• MDN: Object.keys
• MDN: Object.values
• MDN: Object.entries

 

잠깐! 더 있어요...

여기까지 읽으셨다면, 아마도 "object to array는 어떻게 해야하나?" 라는 의문이 생기셨을거에요!

이것 또한 Object.fromEntries()에서 제공하고 있습니다. 

Object.entries()와는 완전 반대되는 기능이죠!

 

const array = [
  ['one', 1],
  ['two', 2],
];

Object.fromEntries(array);
// { one: 1, two: 2 }

 

• MDN: Object.fromEntries 

이 기능은 완전 최신이라... 지원되는 브라우저가 제한적일 수 있습니다. 

이 점을 꼭 유의해서 사용해주세요~!

 

 

 

 

[References]

Converting Object to an Array | SamanthaMing.com