객체를 배열로 바꾸는 방법 feat.JavaScript

개발을 하다보면 진짜 자주 사용하는 것중 하나가 객체를 배열로 바꾸는거다.

보통 데이터를 가공할때 정말 많이 사용한다.

매일 나도 구글링하면서 사용하다보니 어느순간 나도 블로그에 정리하면서 외워보자 생각이들어 드디어 정리를 한다.

 

 

1. Object.keys()를 사용하여 객체의 키 배열 생성

Object.keys() 메서드는 객체의 키를 배열 형태로 반환합니다.

const obj = { a: 1, b: 2, c: 3 };
const keysArray = Object.keys(obj);
console.log(keysArray); // ["a", "b", "c"]

 

2. Object.values()를 사용하여 객체의 값 배열 생성

Object.values() 메서드는 객체의 값을 배열 형태로 반환합니다.

const obj = { a: 1, b: 2, c: 3 };
const valuesArray = Object.values(obj);
console.log(valuesArray); // [1, 2, 3]

 

3. Object.entries()를 사용하여 객체를 키-값 쌍 배열로 변환

Object.entries() 메서드는 객체의 키-값 쌍을 배열 형태로 반환합니다.

const obj = { a: 1, b: 2, c: 3 };
const entriesArray = Object.entries(obj);
console.log(entriesArray); // [["a", 1], ["b", 2], ["c", 3]]

 

 

 

 

 

 

 

 

 

4. 배열 메서드를 활용하여 객체 변환

객체를 배열로 변환할 때 map() 등의 배열 메서드를 사용할 수 있습니다.

 

4.1 키-값 쌍 배열을 객체로 변환

const obj = { a: 1, b: 2, c: 3 };
const entriesArray = Object.entries(obj);
const newArray = entriesArray.map(([key, value]) => ({ key, value }));
console.log(newArray); // [{ key: "a", value: 1 }, { key: "b", value: 2 }, { key: "c", value: 3 }]

 

4.2 키 배열과 값 배열을 결합하여 객체로 변환

const keys = ['a', 'b', 'c'];
const values = [1, 2, 3];
const obj = keys.reduce((acc, key, index) => {
  acc[key] = values[index];
  return acc;
}, {});
console.log(obj); // { a: 1, b: 2, c: 3 }

 

5. Spread Operator를 이용한 배열 변환

Spread Operator를 사용하면 객체를 배열로 변환할 수 있습니다.

const obj = { a: 1, b: 2, c: 3 };
const array = [...Object.entries(obj)];
console.log(array); // [["a", 1], ["b", 2], ["c", 3]]

 

6. JSON 메서드를 사용한 배열 변환

객체를 JSON 문자열로 변환한 후 파싱하여 배열로 만들 수 있습니다.

const obj = { a: 1, b: 2, c: 3 };
const jsonArray = JSON.parse(JSON.stringify(Object.entries(obj)));
console.log(jsonArray); // [["a", 1], ["b", 2], ["c", 3]]

 

 

 

JavaScript에서 객체를 배열로 변환하는 방법은 여러 가지가 있습니다. Object.keys(), Object.values(), Object.entries()와 같은 메서드를 사용하면 간단하게 키와 값을 배열로 변환할 수 있습니다. 이 외에도 Spread Operator와 JSON 메서드를 활용하는 방법도 매우 유용합니다. 이 글에서는 다양한 방법을 소개하여 여러분이 필요에 따라 적절한 방법을 선택할 수 있도록 도움을 드렸습니다.