[JavaScript] Chapter 31. 배열을 다루는 메소드_map, flatMap, filter, reduce

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() 메소드 안에서 해주어야하는 작업이 많아진다면 콜백함수를 외부로 빼서 작성하는 편이 낫다.

 

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()메서드는 이렇게 배열의 껍데기가 한꺼풀 벗겨진 결과가 나온다.

 

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의 배수, 양수인 도시가 담긴 객체만 추려낸 배열이 return.
[
  { id: 2, name: 'london' },
  { id: 4, name: 'newyork' },
  { id: 6, name: 'moscow' },
  { id: 8, name: 'beijing' }
]

 

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 메서드를 실행하여 편하게 수량 총합, 가격 총합을 구한다.