[Javascript] 배열을 다루는 Javascript 메소드 (map, filter, reduce)

배열을 다루는 Javascript 메소드 (map, filter, reduce)

1. map

map() 메소드는 새로운 배열을 리턴하는 메소드입니다. 어떻게? 순서대로 주어진 함수를 실행한 return 값을 모아서 새로운 배열을 만들어 반환합니다. 그렇기 때문에 원본 배열을 변경하지 않고 새로 가공한 배열을 얻을 수 있습니다.

const arr = [1, 2, 3, 4 ,5];
const mapArr = arr.map(v => v);

map() 메소드에 들어가는 인자는 총 세가지인데요. 1)현재값, 2) index값, 3) 현재요소가 속한 배열 하지만 인자 세개 모두 꼭 입력해야하는 것은 아닙니다. map() 메소드를 사용하면 작성해줘야할 조건이 많은 for문을 사용하지 않아도 되기 때문에 코드가 간결해집니다. 
간단하게 가공할 수 있는 콜백함수를 사용한다면 map() 메소드 안에서 화살표 함수로 작성해도 되지만 map() 메소드 안에서 해주어야하는 작업이 많아진다면 콜백함수를 외부로 빼서 작성하는 편이 낫습니다.

 

2. flatMap

map() 메소드를 사용해서 새로운 배열을 만들어냈을 때 배열로 감싸진 상태의 요소들의 배열이 return 될 때가 있습니다. 그럴 때 그 감싸진 것을 해체하기 위해 또 가공해야할 때가 있는데요. flatMap() 메소드를 사용하면 그럴 필요없이 알아서 펼쳐진, 평탄화된 배열이 return 됩니다. 이 flatMap()은 일반적인 숫자만 있는 배열말고 문자열, 객체배열을 사용할 때 빛을 발하는데요. 한번 결과의 차이를 예제를 통해 보자면

const member = [
  { id: 1, name: "james" },
  { id: 2, name: "leo" },
  { id: 3, name: "jen" }
];

const mapArr = member.map(obj => Object.entries(obj));
const flatMapArr = member.flatMap(obj => Object.entries(obj));

이렇게 [키, 값] 쌍을 배열로 만들어주는 Object.entries메서드를 사용해 결과를 보면

//map의 경우
[
  [ [ 'id', 1 ], [ 'name', 'james' ] ],
  [ [ 'id', 2 ], [ 'name', 'leo' ] ],
  [ [ 'id', 3 ], [ 'name', 'jen' ] ]
]

//flatMap의 경우
[
  [ 'id', 1 ], [ 'name', 'james' ],
  [ 'id', 2 ], [ 'name', 'leo' ],
  [ 'id', 3 ], [ 'name', 'jen' ]
]

flatMap()메서드는 이렇게 배열의 껍데기가 한꺼풀 벗겨진 결과가 나옵니다.

 

2. filter

filter() 메소드는 주어진 함수의 조건, 테스트를 참으로 통과하는 배열의 요소들을 모아 새로운 배열로 return 하는 메소드입니다. 이름에서 알 수 있듯이 배열 요소 중에 특정한 것들을 필터링 하여 사용하고 싶을 때 사용합니다. 

const arr = [1, 3, 7, 9, 2, 8]
const fillterdArr = arr.filter(v => v > 5); // [7, 9, 8]

이러한 filter() 메소드는 객체배열에서도 사용할 수 있는데요. 객체의 특정 키, 값의 조건도 순회하면서 걸러낼 수 있습니다. 예시를 한번 보자면요. 

//도시의 정보가 있는 객체 배열
const city = [
  { id: 1, name: "seoul" },
  { id: 2, name: "london" },
  { id: 4, name: "newyork" },
  { id: 5, name: "tokyo" },
  { id: 6, name: "moscow" },
  { id: 7, name: "paris" },
  { id: 8, name: "beijing" }
];

//객체의 id의 값이 양수가 아닌 것을 필터링한다.
const filteredArr = city.filter(obj => obj.id % 2 === 0);

이런 객체배열이 있을 경우 값을 체크하면서 필터링 합니다. 위의 필터된 배열의 결과는 다음과 같습니다.

[
  { id: 2, name: 'london' },
  { id: 4, name: 'newyork' },
  { id: 6, name: 'moscow' },
  { id: 8, name: 'beijing' }
]

id의 값이 2의 배수, 양수인 도시가 담긴 객체만 추려낸 배열이 return 되었습니다.

 

 

3. reduce

reduce() 메서드는 배열을 순환하면서 reduce 콜백함수를 실행하며 하나의 결과값을 return 합니다. 배열요소의 합, 최대값 구하기 등과 같은 연산을 해줄 때 편리하게 사용할 수 있는 메서드인데요.

예제를 보자면

const products = [
  { name: "양말", price: 3000, quantities: 20 },
  { name: "모자", price: 6000, quantities: 32 },
  { name: "자켓", price: 83000, quantities: 15 },
  { name: "청바지", price: 42000, quantities: 27 }
];

이렇게 상품이 담겨있는 객체배열이 있다고 합시다. 이 상품의 price 총 합은 무엇일까요?

// reducer로 넣어줄 함수 만들어준다. 
// 받은 값의 합을 구해주는 함수
function reducer(sum, val) {
  return sum + val;
}

//map()로 price만 추려서 reduce 실행
const priceTotal = products.map(el => el.price).reduce(reducer, 0);

//map()로 quantities만 추려서 reduce 실행
const quantityTotal = products.map(el => el.quantities).reduce(reducer, 0);

 

이렇게 reduce 메서드를 실행하여 편하게 수량 총합, 가격 총합을 구했습니다. 저도 이러한 배열함수를 잘 다루지는 못하는데요. 그래서 더 검색하고 찾아보면서 정리한 거 같네요. 도움이 되시길 !!