객체 배열을 키-값 형태의 JSON으로 변환하는 방법 | JSON.stringify

const data = [
  { name: 'a', value: 'b' },
  { name: 'c', value: 'd' },
];

이런 형태의 데이터를

{
  "a": "b",
  "c": "d"
}

이렇게 만들고 싶을 때

 

⬇️

 

const dataArr = data.reduce((acc, item) => {
  acc[item.name] = item.value;
  return acc;
}, {});

const jsonString = JSON.stringify(dataArr, null, 2);

1. 배열 고차 함수인 reduce를 이용해 {a: 'b', c: 'd'} 형태의 객체로 먼저 변환

2. JSON.stringify를 실행하여 JSON으로 변환

 

 

🔎 Array.prototype.reduce

reduce 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다. 이때 원본 배열은 변경되지 않는다.

reduce 메서드는 첫 번째 인수로 콜백 함수, 두 번째 인수로 초기값을 전달받는다.

reduce 메서드의 콜백 함수에는 4개의 인수, 초기값 또는 콜백 함수의 이전 반환값, reduce 메서드를 호출한 배열의 요소값과 인덱스, reduce 메서드를 호출한 배열(this)가 전달된다.

두 번째 인수로 전달하는 초기값은 옵션이다. 하지만 reduce 메서드를 호출할 때는 언제나 초기값을 전달하는 것이 안전하다.

 

 

 

---

🐥 JSON.stringify의 replacer를 활용하는 방법은 없을까?

 

배열이 첫 번째 인자로 들어가더라도 일반적인 방법의 순회를 하는 것 같지 않다.

그래서 key, value를 찍어봤다.

const replacer = (key, value) => {
  console.log('key    : ', key);
  console.log('value  : ', value);
  return value;
};

 

흥미로운 결과.

 

그렇기 때문에 처음에 key 값이 없을 때 빨리 배열을 순회하고 치워야 한다.

const replacer = (key, value) => {
    if (key === '') {
        return value.reduce((acc, item) => {
            acc[item.name] = item.value;
            return acc;
        }, {});
    }
    return value;
};

const jsonString = JSON.stringify(data, replacer, 2);

 

굳.