Javascript - 배열을 잘 사용하는 3가지 방법 [map, filter, reduce]

자바스크립트에서 제공하는 기본 자료 구조(Struct) 중에 가장 많이 쓰이고 잘 사용하면 좋은 녀석은 배열(Array)입니다. 배열의 기능 중 꼭 알아야 할 몇 가지 기능이 있는데, 바로 map(), filter(), reduce()입니다. 이미 이전에 map(), filter(), reduce()의 정의와 활용 방법에 대해 글을 올렸지만, 다시 한번 더 정리해보려고 합니다.

 

 자바스크립트의 발전이 있기 이전에 배열을 잘 사용하기 위해서는 lodash, underscore와 같은 라이브러리를 사용했습니다. map(), filter(), reduce()와 같은 기능을 포함해 자료 구조를 편리하게 사용하는 기능들을 제공해주었기 때문입니다.

 

 지금의 모던한 자바스크립트는 인기 있는 여러 가지의 라이브러리의 장점들을 흡수하게 되면서, 별도의 라이브러리를 사용하지 않고도 쉽게 프로그래밍을 할 수 있는 환경을 제공합니다.

배열 요소들을 새롭게 정의해서 사용하는 방법 - map()

 배열의 map()은 배열이 가진 기존 요소들을 새로운 요소들로 정의할 때 사용하는 방법입니다. map()을 조금 더 알고 싶으시다면, 아래의 글을 통해 확인해보세요.

Javascript - Array map 사용법

 map()을 활용하기 좋은 방법은 바로 JSON과 같은 데이터나 요소를 재정의를 해야 하는 경우입니다. 이해를 돕기 위해 문제를 제시하고 코드를 구현하도록 해보겠습니다.

 

 문제: first name과 last name을 가지고 있는 JSON 객체가 있는 경우, first name과 last name을 이용해 full name까지 포함하는 JSON 객체를 만들어보자.

const users = [
  {
    firstName: 'Lena', lastName: 'Miller',
  },
  {
    firstName: 'Tom', lastName: 'Taylor',
  },
  {
    firstName: 'Jone', lastName: 'Smith',
  },
  {
    firstName: 'Lucy', lastName: 'White',
  },
];

const newUsers = users.map(user => {
  const { firstName, lastName } = user;
  return { firstName, lastName, fullName: `${firstName} ${lastName}` };
});

 예제 코드는 map()을 사용해 배열의 요소 하나하나에 접근합니다. firstName, lastName을 조합해 fullName을 만들고, 기존의 값들도 포함하는 반환 문을 만들어 새로운 요소를 정의할 수 있게 합니다. 이와 같이 map()은 기존 형태를 새로운 형태로 사용하는 경우에 사용하기 좋은 기능입니다.

 

 

거름망을 통해 배열의 필요한 요소들만 고르는 선택하는 방법 - filter()

 배열의 filter()는 배열의 요소들 중 필요한 요소들만 찾을 때 사용하는 방법입니다. filter()의 정의를 조금 더 알고 싶으신 분은 아래의 글을 통해 확인해주세요.

Javascript - Array filter 사용법

 filter()를 활용하기 좋은 방법은 의미 그대로 거르기를 사용해야 하는 경우입니다. map()을 설명할 때와 마찬가지로 이해를 돕기 위해 문제를 정의하고 코드를 구현해보도록 하겠습니다.

 

문제: 여러 가지 물품을 정의한 배열의 요소 중 가격이 5000원 이하인 물품들의 이름을 반환하는 목록을 만들어보자.

const items = [
  {
    name: 'snack', price: 4000,
  },
  {
    name: 'bowl', price: 10000,
  },
  {
    name: 'ice cream', price: 400,
  },
  {
    name: 'meat', price: 9800,
  },
];

const newItemNames = items.filter(item => item.price < 5000)
.map(item => item.name);

console.log(newItemNames);

 문제가 요구하는 답을 구하기 위해서 filter() 뿐만 아니라 map()도 같이 사용했습니다. 먼저 filter()를 사용해 가격이 5000원 미만인 물건들을 선택하고, map()을 사용해 item의 name을 추출했습니다.

 

 filter()는 원하는 요소만 선택하는 것이 몇 가지 기법을 통해 중복 요소를 제거하거나, min max를 기준으로 분류할 수도 있습니다. 이와 관련된 내용은 filter 사용법에서 확인해주세요.

배열의 요소들을 이용해 결과를 만드는 방법 - reduce()

 reduce()는 배열의 요소들을 통해 어떤 결과를 만들어 낼 때 사용하는 기능입니다. reduce는 이해가 바로 가기 어려운 부분이 있는데 이 부분은 이전에 발행한 글을 통해 확인해주세요.

Javascript - Array reduce, reduceRight 사용법

 reduce()는 빅데이터에서도 사용되는 개념입니다. 빅데이터는 분산 처리된 시스템을 이용해 빠르고 정확한 연산 결과를 도출하기 때문입니다. reduce()를 활용하기 좋은 경우는 합산과 같이 배열의 결과를 만들어야 하는 경우입니다. reduce() 또한 문제와 예제 코드를 통해 활용 방법을 알아보도록 하겠습니다.

 

 문제: 여러 가지 물품을 정의한 배열의 가격을 합산한 결과를 만들어보자.

const items = [
  {
    name: 'snack', price: 4000,
  },
  {
    name: 'bowl', price: 10000,
  },
  {
    name: 'ice cream', price: 400,
  },
  {
    name: 'meat', price: 9800,
  },
];

const totalPrice = items.reduce((totalPrice, item) => totalPrice + item.price, 0);

console.log(totalPrice);

 filter()에서 사용한 items 배열을 사용해 예제 코드를 만들었습니다. reduce를 통해 이전에 처리한 결과 값, 배열 요소를 전달받아 상품의 가격을 합산합니다. 줄이기라는 개념이 약간은 생소하실 수 있지만 익숙해지면 그리 어렵지 않은 개념이니 이번 기회를 통해 reduce()의 "줄이기" 개념을 익혀보세요.

 

 위에서 만든 map(), filter(), reduce() 예제 코드는 파일을 첨부해 제공합니다. 예제 코드와 실행되는 결과를 통해 map(), filter(), reduce()를 배워보세요.

배열의 기능 알아보기.zip

0.00MB

정리하기

 아직은 어려울 수 있지만 배열을 잘 사용하기 위해 꼭 알아야 하는 map(), filter(), reduce() 기능에 대해 알아보았습니다. 마지막으로 다시 한번 더 정리하면 map()은 배열을 요소들을 새롭게 정의해서 사용하는 경우에 쓰이며, filter()는 배열의 요소들을 거르는 경우에 쓰이며, reduce()는 배열에 식을 더해 결과를 도출하는 경우에 쓰입니다.