Javascript - object와 array 타입 변환 / 일부 값만 뽑아오기

 

자바스크립트에서 사용되는 참조값으로는 대표적으로 object(객체)와 array(배열)이 있다.

 

객체와 배열은 자바스크립트의 Object 객체에서 제공하는 메소드를 이용하여 서로 형변환이 가능하다.

 

 

object를 array로 변환하기 위해서는 Object.entries() 메소드를 사용할 수 있다.

 

Object.entries는 object를 인자로 받아 [key, value] 형태의 배열을 값으로 갖는 2차원 배열을 반환한다.

 

객체의 키나 값만 배열로 가져오고 싶다면 Object.keys(), Object.values() 메소드를 사용하면 된다.

const obj = { name: 'mjkim', age: 26, birth: '0128', address: 'dongdaemungu' };

const arr = Object.entries(obj);  // [['name', 'mjkim'], ['age', 26], ['birth', '0128'], ['address', 'dongdaemungu']];
const keys = Object.keys(obj);  // ['name', 'age', 'birth', 'address']
const values = Object.values(obj);  // ['mjkim', 26, '0128', 'dongdaemungu']

 

 

그럼 array를 object로 변환하는 방법은 무엇일까?

 

Object.fromEntries() 메소드를 사용하면 된다.

 

위와는 반대로 [key, value] 형태의 배열을 값으로 갖는 2차원 배열을 Object.fromEntries()의 인자로 전달하면 객체로 변환할 수 있다.

const arr = [['name', 'mjkim'], ['age', 26], ['birth', '0128'], ['address', 'dongdaemungu']];

const obj = Object.fromEntries(arr);  // { name: 'mjkim', age: 26, birth: '0128', address: 'dongdaemungu' }

 

 

만약 1차원 배열을 객체로 변환하고 싶다면 Object.assign() 메소드를 사용하자.

 

Object.assign()의 첫 번째 인자로 빈 객체({}), 두 번째 인자로 1차원 배열을 전달하면 인덱스 값을 key로 갖는 객체를 얻을 수 있다.

const arr = ['apple', 'banana', 'melon'];
const obj = Object.assign({}, arr);  // { 0: 'apple', 1: 'banana', 2: 'melon' }

 

 

 

---

 

 

 

이제 array와 object의 일부 값만 가져오는 방법에 대해 알아보자.

 

 

object의 일부 키만 갖는 새로운 객체를 만드는 방법은 rest parameter를 이용하면 된다.

const obj = { name: 'mjkim', age: 26, birth: '0128', address: 'dongdaemungu' };

// 객체에서 age만 제외하고 가져오기 
const { age, ...rest } = obj;

 

 

혹은 lodash에서 제공하는 omit 함수를 사용하면 간단하게 특정 키 값을 제외한 객체를 얻을 수 있다.

import { omit } from 'lodash';

const obj = { name: 'mjkim', age: 26, birth: '0128', address: 'dongdaemungu' };
const newObj = omit(obj, ['age', 'birth']);  // age, birth 키를 제외한 객체 반환

 

 

array는 자바스크립트의 map 고차함수를 이용하면 된다.

 

객체를 값으로 갖는 배열의 경우에는 위와 같이 rest parameter를 이용하여 일부 키 값만 갖는 객체 배열을 얻을 수 있다.

const arr = [
  { name: 'apple', price: 2570, id: 'PROD_523' },
  { name: 'banana', price: 1110, id: 'PROD_222' },
  { name: 'tomato', price: 300, id: 'PROD_378' },
  { name: 'grape', price: 1600, id: 'PROD_027' },
];

// price만 제외한 객체를 값으로 갖는 배열 반환
const newArr = arr.map(({ price, ...rest }) => rest);

 

 

배열을 값으로 갖는 배열(2차원 배열)의 경우에는 배열 디스트럭쳐링을 이용하여 값 배열의 일부만 갖는 새로운 배열을 얻을 수 있다.

const arr = [
  ['apple', 2570, 'PROD_523'],
  ['banana', 1110, 'PROD_222'],
  ['tomato', 300, 'PROD_378'],
  ['grape', 1600, 'PROD_027'],
];

// 값 배열의 두 번째 요소를 제외한 새로운 배열 반환
const newArr = arr.map(([e1, , e3]) => [e1, e3]);