keys, values, entries 메서드 사용하기

개발을 하다보면 객체를 배열로 바꿔야 할 때, 객체의 키만 필요할 때, 값만 필요할 때 등등 객체와 배열을 넘나들어야 하는 상황이 자주 생깁니다.

객체의 키 목록 추출하기

먼저 객체의 키 목록을 추출하는 경우입니다.
Object.keys(대상 객체명) 은 해당 객체가 갖는 키의 목록을 배열로 반환합니다.

const productList = {
  backpack: 1200,
  pencil: 800,
  eraser: 600,
}

Object.keys(productList) // [ 'backpack', 'pencil', 'eraser' ]

객체의 값 목록 추출하기

객체의 값만을 배열로 뽑아낼 수도 있습니다.
Object.values(대상 객체명) 은 해당 객체가 갖는 값의 목록을 배열로 반환합니다.

const productList = {
  backpack: 1200,
  pencil: 800,
  eraser: 600,
}

Object.values(productList) // [ 1200, 800, 600 ]

객체를 배열로 변환하기

이제 이를 사용해 객체를 배열의 형태로 변환할 수 있습니다.

const productList = {
  backpack: 1200,
  pencil: 800,
  eraser: 600,
}

const productArray = Object.keys(productList).reduce((arr, key) => {
  return [...arr, [key, productList[key]]]
  /* 또는 이렇게
  arr.push([key, productList[key]]);
  return arr;
  */
}, [])

// [ [ 'backpack', 1200 ], [ 'pencil', 800 ], [ 'eraser', 600 ] ]

reduce 메서드를 사용해 비교적 쉽게 변환할 수 있었지만, 더 쉬운 방법이 있습니다.
Object.entries(대상 객체명)은 해당 객체의 키와 값의 쌍을 배열을 반환해 리턴합니다.

const productList = {
  backpack: 1200,
  pencil: 800,
  eraser: 600,
}

const productArray = Object.entries(productList)

// [ [ 'backpack', 1200 ], [ 'pencil', 800 ], [ 'eraser', 600 ] ]

배열을 객체로 변환하기

반대로 배열을 객체로 변환하는 것도 가능합니다.
Object.fromEntries(대상 배열명)은 [["키 1", "값 1"], ["키 2", "값 2"] ... ] 형태의 배열을 객체로 변환해 리턴합니다.

const productArray = [
  ['backpack', 1200],
  ['pencil', 800],
  ['eraser', 600],
]

Object.fromEntries(productArray) // { backpack: 1200, pencil: 800, eraser: 600 }

이를 사용해, 객체의 각 요소에 배열에 메서드를 적용해 간단하게 값을 조작하는 것이 가능합니다.

배열의 map 메서드를 사용해 각 키의 값을 2배 증가시키는 예시

const productList = {
  backpack: 1200,
  pencil: 800,
  eraser: 600,
}

Object.fromEntries(Object.entries(productList).map(([key, price]) => [key, price * 2]))
// { backpack: 2400, pencil: 1600, eraser: 1200 }