배열을 객체로, 객체를 배열로 만드는 방법

배열을 객체로 혹은 거꾸로 객체를 배열로 만드는 작업은 참 많이 쓰인다. 코딩테스트에서도 그렇고, 실제 프로젝트를 함에 있어서도 구현할 일이 많이 있다. 이런 작업을 수행하는 방법이 여러가지가 있어서, 치팅시트 마냥 짧게 정리했다. 

---

배열을 객체로 만드는 방법

Array.prototype.reduce()를 이용한 방법

• 문법
  reduce(callbackFn)
  reduce(callbackFn, initialValue
• reduce는 본래 단어의 의미가 '줄이다.'이다. 의미에서 알 수 있듯이 reduce는 배열의 원소에 대해 콜백함수를 반복호출하고 최종적으로 하나의 값(여기선 객체)을 출력한다. 가장 흔하게 볼 수 있는 방법이다. 이 방법을 사용한 코드는 다음과 같다.

const arr = [1, 2, 3];
const obj = arr.reduce((acc, val, index) => {
  acc[index] = val;
  return acc;
}, {});
console.log(obj);  // { '0': 1, '1': 2, '2': 3 }

---

Object.assign()를 이용한 방법

• 문법
  Object.assign(target, ...sources)
• Object.assign()은 sources의 객체들에서 열거 가능한(Enumerable) 속성을 복사하여 target객체에 할당한다.

const arr = [1, 2, 3];
const obj = Object.assign({}, arr);
//배열의 경우 key값으로 인덱스를 사용한다.
console.log(obj);  // { '0': 1, '1': 2, '2': 3 }

---

전개 연산자를 이용한 방법

전개 연산자는 열거 가능한(Enumerable)속성을 간단히 복사할 수 있다. 바로 위에서 설명한 Object.assign()방식과 거의 동일하다.

const arr = [1, 2, 3];
const obj = { ...arr };
console.log(obj); // { '0': 1, '1': 2, '2': 3 }

 

---

객체를 배열로 만드는 방법

Object.key()와 Array.prototype.map()을 이용한 방법

• 문법
  Object.keys(obj)
  map(callbackFn)
  map(callbackFn, thisArg)
• Object.keys()는 인수로 들어온 객체의 key값을 배열에 넣어 반환한다. 이 때 반환된 배열의 map 메소드를 이용하여 key에 대응하는 값들을 반환하도록 만들 수도 있다.

const obj = { '0': 1, '1': 2, '2': 3 };
const arr = Object.keys(obj).map(key => obj[key]);
console.log(arr);  // [1, 2, 3]

동일한 작업을 Object.values(), 혹은 Object.entries()로 해결할 수도 있다.

const obj = { '0': 1, '1': 2, '2': 3 };
const arr = Object.values(obj);
console.log(arr);  // [1, 2, 3]

const obj = { '0': 1, '1': 2, '2': 3 };
const arr = Object.entries(obj).map(([key, value]) => value);
console.log(arr);  // [1, 2, 3]

---

전개연산자를 이용한 방법

이 방법은 객체 프로퍼티의 값들을 배열에 한 번에 넣을 수 있다.

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