자바스크립트 Array 를 map 으로 변환, 일부만 변경, 합치기

javascript array to map

Array(배열, 리스트, List)를 map으로 변환하여 특정키의 값이 존재하는지 여부를 찾고 싶을 때가 있습니다.

(저는 자바를 주로 사용하기 때문에 자바 stream의 collect  사용하고 싶었습니다.)

Array to map, list to map

const books = [
  {id: 'a', name: '1', author: 'q'},
  {id: 'b', name: '2', author: 'w'},
  {id: 'c', name: '3', author: 'e'}
];

// array to map , list to map
const bookMap = books.reduce((acc, currentValue) => {
  acc[currentValue.id] = currentValue;
  return acc;
}, {});
console.log(bookMap);

const newBooks = [
  {id: 'b', name: 'n2', author: 'w'},
  {id: 'c', name: 'n3', author: 'e'},
  {id: 'd', name: 'n4', author: 'r'},
  {id: 'f', name: 'n5', author: 't'}
]

// 이전에 등록된 데이터 확인하기
const oldBooks = newBooks.filter(each => !bookMap[each.id])
console.log(oldBooks)

acc의 이전 결과 내용 부분에 현재 변수 currentValue의 id값으로 데이터를 할당합니다.

출력 결과

1. {a: {…}, b: {…}, c: {…}}
1. a: {id: 'a', name: '1', author: 'q'}
2. b: {id: 'b', name: '2', author: 'w'}
3. c: {id: 'c', name: '3', author: 'e'}
4. [[Prototype]]: Object

1. (2) [{…}, {…}]
1. 0: {id: 'd', name: 'n4', author: 'r'}
2. 1: {id: 'f', name: 'n5', author: 't'}
3. length: 2
4. [[Prototype]]: Array(0)

부가 설명으로 자료형 중에서 map을 사용하여 데이터를 조회할 경우 시간복잡도는 O(1)가 됩니다.

배열 일부만 변경

// 두 배열에서 이전값이 있는경우 이전 데이터, 없으면 신규 데이터 할당하기
const mixedBooks = newBooks.map(each => bookMap[each.id] ? bookMap[each.id] : each)
console.log(mixedBooks)

출력 결과

1. 1. (4) [{…}, {…}, {…}, {…}]
   1. 0: {id: 'b', name: '2', author: 'w'}
   2. 1: {id: 'c', name: '3', author: 'e'}
   3. 2: {id: 'd', name: 'n4', author: 'r'}
   4. 3: {id: 'f', name: 'n5', author: 't'}
   5. length: 4
   6. [[Prototype]]: Array(0)

newBooks 배열에서 id가 b,c는 bookMap의 데이터로 변경되어 할당된 것을 확인할 수 있습니다.

두 배열 합치기

// 두 배열 합치기
const arr1 = [1,2,3]
const arr2 = [4,5,6]
const mergedArr = [...arr1, ...arr2]
console.log(mergedArr)

출력 결과

1. [1, 2, 3, 4, 5, 6]

...은 전개 구문이라고 합니다.

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax