본문으로 바로가기

Object Array 합치기 메모

category JavaScript/javascript 2022. 4. 11. 17:43

Object Array인 두 배열을 합칠 떄 사용한 방법입니다.

더 좋은 방법이 있을 수도 있으나, 현재 사용한 방법을 까먹지 않기 위해 메모합니다.

 

arr1, arr2 라는 2개의 배열이 있다고 가정합니다.

let arr1 = [
  {
    num: 1,
    name: 'kim',
  },
  {
    num: 2,
    name: 'lee',
  },
  {
    num: 3,
    name: 'park',
  },
]

let arr2 = [
  {
    name: 'park',
    old: 10,
  },
  {
    name: 'lee',
    old: 15,
  },
]

선언 후 상태

합칠 조건에 맞게 정렬을 해줍니다.

저는 name을 기준으로 합칠 것이므로 name으로 정렬해주겠습니다.

 

lodash 사용

arr1 = _.sortBy(arr1, ['name'])
arr2 = _.sortBy(arr2, ['name'])

lodash 미사용

문자열 기준 정렬 방법입니다.

const nameSort = (arr, key) => {
  return arr.sort((a, b) => {
    let x = a[key].toLowerCase()
    let y = b[key].toLowerCase()

    if(x < y) {
      return -1
    }
    if(x > y) {
      return 1
    }
    return 0
  })
}

arr1 = nameSort(arr1, 'name')
arr2 = nameSort(arr2, 'name')

 

정렬 기준이 숫자일 경우 다음과 같이 사용하세요.

const numberSort = (arr, key) => {
  return arr.sort((a, b) => {
    return a[key] - b[key]
  })
}

결과는 둘 다 동일합니다.

정렬 후

두 배열을 합쳐줍니다.

저는 아래와 같이 처리를 하였지만, 더 효율적인 방법이 있을 수도 있습니다..

let list = []

for(let i = 0; i < arr1.length; i++) {
  let isSuccess = false
  let idx
  
  for(let j = 0; j < arr2.length; j++) {
    if(arr1[i].name === arr2[j].name) {
      isSuccess = true
      idx = j
      break
    }
  }
  
  if(isSuccess) {
    list.push({
      ...arr1[i],
      ...arr2[idx],
    })
    arr2.splice(idx, idx = 1)	// 추가된 항목은 제거
  }
  else {
    list.push(arr1[i])
  }
}

합친 결과

 

합칠때도 정렬처럼 lodash를 사용하여서 합쳐보고 싶었지만,

아무리 해봐도 값이 중복되거나 누락되어서 실패하였습니다..

좀 더 숙련된 후에 다시 시도하여 업데이트 하겠습니다!

반응형