filter , map [ JavaScript / Arra y ]

 Javascript의 Array method 중에서 가장 중요한 method안에 filter와 map을 보겠습니다. for Each와 함께 가장 중요한 메서드입니다. for Each, filter, map만 알면 대부분의 로직들은 다 이루어집니다. 조금 복잡할 수도 있지만 그만큼 사용되는 메서드 입니다.

이번 포스팅에서는 아래의 배열 샘플을 사용할 것입니다.

1.filterfilter는 그대로 배열을 필터링하는 메서드입니다.기본적인 사용법은, 이하대로입니다.순회하는 대상이 되는 배열의 원소가 조건으로 통과하는 요소의 모든 값을 모아 새로운 배열을 작성하고 반환합니다.

예를들어예문을한번보시도록하겠습니다.

상기 코드는, members 배열을 member를 차례차례 순회해, 멤버가 사는 로컬. 주소값이 seoul 인 것을 반환하는 코드입니다. 위의 배열에서는 seoul 값을 가진 sangwon 멤버의 객체가 배열로 반환됩니다.

어떤 값이든 조건만 통과하면 그 원소로 구성된 새로운 배열이 리턴됩니다.

2. mapmap은 배열의 모든 원소를 조건에 맞는 결과를 모아 새로운 배열을 반환합니다. filter나 find의 경우 객체가 반환되지만 map은 새로운 배열, 원소와 다른 유형의 객체로 구성된 배열이 리턴됩니다. 모든 원소의 값을 다룰 수 있습니다.

기본적인 사용방법은 다음과 같습니다.이 경우 age 목록은 Member의 속성 중 age 값으로 구성된 새로운 배열을 반환합니다. 이와 같이 오브젝트 배열을 이용해 새로운 원소로 구성된 배열로 반환할 수 있는 메서드입니다.

filter 와 map 을 사용하는 예시를 보겠습니다.

이와 같이 filter와 map을 사용하여 24세 이상의 사용자 이름만 배열로 출력됩니다.

Array 메서드 안에서 filter와 map은 매우 중요한 메서드로 언제든지 사용할 준비가 되어있고 상황에 맞게 변형되어야 하는 메서드입니다. filter와 map은 reduce로 대체할 수 있기 때문에 reduce의 개념도 생각해보시길 권장합니다.

https://blog.naver.com/wonieie 자바스크립트의 배열을 다루는 방법 중 하나인 Reduce에 대해서 살펴보도록 하겠습니다. 자바스크립트 배열 메서드는 … blog.naver.com