[ES6] 5) Map, Filter

요즘 velopert, velog를 운영하고 계시는 김민준 개발자님의 리액트 강의를 듣고 있는 중이다. 

강의 내용 중에 사용자 주소록 정보를 map( ) 과 filter( ) 를 이용해서 데이터를 표현해내는 부분이 있었는데, 추후에도 이 두개의 메서드는 계속적으로 사용할 것 같은 느낌이 들어서 이번 기회에 이 두가지 메서드에 대한 내용을 적어보도록 하겠다.

 

# Map

map( ) 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아, 새로운 배열을 반환합니다.

[참고] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map()

 

기존에 주어진 배열 내부의 요소들을 가지고 새로운 배열을 만들어낸다는 뜻 인데,

새로운 배열을 만드는 기준이 특정 함수에 의해 정해질 수 있다는 뜻이다.

 

아래 코드를 한번 보도록 하자.

 

위 작업은 기존의 test_array 배열을 { index : value } 형태의 요소를 가지게 하는 새로운 test_array로 변환시키는 작업이다. 

그래서 기존 배열에서 접근 가능한 요소는 elem(요소 값), index(요소 순번), array(배열 자체)이고, 이 세가지 인수를 기준으로 map 메서드를 통해 새로운 요소를 정의할 수 있다.

 

**하지만, 원본 배열을 변경시키는 것은 불가능하다.

 

그렇기 때문에 위 코드에서 test_array = test_array.map( . . . ) 이렇게 하였고, 새로운 변수로 다시 할당받게 한 것이다.

 

( 아래 코드에서 직접 결과를 한번 확인해보자. ) 

 

 

# Filter

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

[참고] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter()

 

filter 메서드 같은 경우,

기존 배열에서 특정 함수를 호출 할 때, 그 함수 내에서 선언한 기준을 통과한 요소들로 새로운 배열을 만들어내는 기능을 가지고 있다. 

 

즉, 콜백 함수 내에 기준에 대한 코드를 명시한 후, 각 요소를 검사할 때 그 기준에 대해서 true 값이 나온다면, 그 요소를 새로운 배열의 요소로 쓴다라는 뜻이다. 

 

 

백문이 불여일견, 아래를 코드를 보자.

 

 

위 코드에서는 filter 기준이 되는 부분이,

이라고 볼 수 있다.

 

 

결과적으로 배열 내부에서 null 값과 공백 값을 걸러내기 위해,

null 값과 공백값이 아닌 요소를 검사할 때 true를 반환하면 되는 것이다.

 

 

이런 filter 메서드를 이용해서 조금 더 응용해보자면,

배열 내부의 중복 요소들을 제외해서, 다시 새로운 배열을 만드는 작업도 해 볼 수 있다.

 

역시 주목해야할 부분은 filter( .... ) 내부 부분이다.

 

( 추가적으로, filter 메서드도 map 메서드와 동일하게, 원본 배열 자체를 바꾸는 것은 아니므로, 바뀐 새로운 배열을 얻고 싶다면 이전에 새로운 변수로 할당해주면 된다. )