[Javascript] 객체 배열을 다루는 메서드와 처리 기법

다음과 같은 객체 배열에서 원하는 결과를 얻는 다양한 기법을 알아보겠습니다.

객체 배열은 배열의 각 요소가 객체로 이루어진 배열을 말합니다.

프리미티브 데이터 타입이 아니기 때문에 사용할 수 있는 배열 메서드들 중에서 함수를 인자로 넘겨서 배열의 각 요소에 해당하는 객체의 속성에 접근해 처리를 할 수 있는 메서드를 사용해야 합니다.

 

const products = [
    {
    name: '⌚️',
    price: 3200,
    instock: 5,
    },
    {
    name: '📱',
    price: 7000,
    instock: 0,
    },
    {
    name: '💻',
    price: 12500,
    instock: 11,
    },
    {
    name: '📷',
    price: 9900,
    instock: 2,
    },   
]

 

 

 

 

1. reduce() 메서드로 상품 재고 금액 합계 구하기

 

reduce() 메서드는 각 배열 요소를 순회해서 누적 계산 결과를 반환하는 배열의 메서드입니다.

상품 정보를 담고 있는 객체의 배열 전체를 순회해서 전체 재고합을 간편하게 구할 수 있습니다.

 

let sum = products.reduce((res, product) => res += product.price * product.instock, 0)
console.log(sum) //173300

 

 

 

 

2. map()과 finter() 메서드로 객체 배열 가공하기

이름, 가격, 재고수량 속성을 가진 객체를 모아놓은 배열에서 가격이 10,000원을 초과하는 상품만 골라서 이름과 가격을 반환하는 순회 루프를 map() 메서드로 돕니다.

 

const expensiveProducts = products.map(product=> {
    if(product.price > 10000)
    return {
        name: product.name,
        price: product.price,
    }
})
console.log(expensiveProducts)

 

결과 배열을 콘솔에 표시해 보면 예상과는 다른 결과가 표시됩니다.

원하는 결과에 해당하는 세 번째 배열 요소는 정확하게 표시되지만, 나머지 배열 요소들이 undefined로 표시가 됩니다.

map() 메서드는 모든 배열 요소를 순회하고, 반환(return) 값이 없으면 undefined로 배열 요소를 채웁니다.

즉, map() 메서드는 원래의 배열 길이와 같은 배열 길이를 가지는 배열만 반환한 수 있습니다.

 

 

추가로 다음처럼 필터 메서드를 이용해서 map() 메서드에서 반환된 배열 요소중 undefined인 배열 요소는 제외하도록 처리를 해야 합니다.

 

const expensiveProducts = products.map(product=> {
    if(product.price > 10000)
    return {
        name: product.name,
        price: product.price,
    }
}).filter((product)=>{return product !== undefined})
console.log(expensiveProducts)

 

 

 

3. entries(), flat() 메서드로 객체 배열을 1차원 배열로 만들기

 

먼저 객체 배열을 entries() 메서드를 이용해 배열로 변환합니다.

객체의 각 속성이 모두 배열로 변환되므로, 3중첩 배열이 생성됩니다.

 

const arrayProducts = products.map(product=>{return Object.entries(product)})
console.table(arrayProducts)

 

 

 

이제 이 배열을 2중첩까지 풀어서 1차원 배열로 변환합니다.

flat() 메서드는 다중첩 배열의 중첩을 푸는 단계를 인자로 지정해서 원하는 수준까지 배열의 중첩을 해제할 수 있습니다.

 

const arrayProducts = products.map(product=>{return Object.entries(product)}).flat(2)
console.table(arrayProducts)