[java script] map() / filter() 함수란? 배열 가공하기.

1. map()

배열의 요소를 순회하려면 for문과 같은 반복문이 필요한데, map() 함수를 쓰면 for문을 쓰지 않고도 배열 전체를 순회하면서 각 요소에 대해 함수를 호출한다. 각 요소는 순서대로 함수를 타고, 함수에 정의된 새로운 형태의 배열로 반환되는 것이다.

js에 약한데 실무에서 굉장히 유용하게 쓰게 되어 기록으로 남긴다. 

 

map()함수 기본 문법

array.map(callBackFunction(currValue, index, array), newValue);

• currValue: 원본 배열의 데이터 
• index : 현재처리중인 인덱스 
• array : 기존 배열 
• newValue: callBackFunction에서 사용될 값 

 

ex1)  

let array = ["월", "화", "수"];
let map = array.map(item => item + "요일");
//기존요소 + 요일 추가
console.log(map);

//결과
["월요일", "화요일", "수요일"]

*참고로 람다식(=>)을 사용하지 않고도 직접 함수를 만들어 콜해도 된다. 하지만 람다식을 쓰면 소스가 확! 줄어듦.

 

let array = ["월", "화", "수"];
let map = array.map(customFunc);//사용자 함수 넣기 

function customFunc(item){
 return item + "요일";
}
console.log(map);


//같은 결과
["월요일", "화요일", "수요일"]

//OR 

let array = ["월", "화", "수"];
let map = array.map(function(item){return item + "요일"}); //바로 함수넣기 

console.log(map);


//같은 결과
["월요일", "화요일", "수요일"]

 

방법만 다를 뿐, 같은 결과를 확인할 수 있다. 편한것으로 사용하자.

 

 

ex2) key:value로 이루어진  List 데이터의 value는 유지하면서 key이름만 가공해보자.

let originDataList = 
    [{"param1":"아무개1", "param2":"01012341234"}
    ,{"param1":"아무개2", "param2":"01012341234"}
    ,{"param1":"아무개3", "param2":"01012341234"}];

let customDataList = originDataList.map(item => {name:item.param1, phone_num:item.param2}); 
//name key에 param1의 value, 
//phone_num key에 param2 value 셋팅. 

console.log(customDataList);

//결과 
 [{"name":"아무개1", "phone_num":"01012341234"}
 ,{"name":"아무개2", "phone_num":"01012341234"}
 ,{"name":"아무개3", "phone_num":"01012341234"}]

ex1,2 의 예제와 같이 기존의 요소는 유지하되, 내가 원하는 새로운 key-value의 배열로 반환되었다. 

 

2. filter() 

filter()함수도 map()과 마찬가지로 기존 데이터의 요소를 순회하는데, 이때 호출되는 콜백 함수는 boolean값을 리턴한다.

즉, 콜백함수의 실행 결과가 조건에 맞으면 true, 맞지 않으면 false를 반환하여 결과가 true인 요소만 빼내어 반환하는 것. 

 

filter()함수 기본 문법

array.filter(callBackFunction(currValue, index, array), newValue);

• currValue: 원본 배열의 데이터 
• index : 현재처리중인 인덱스 
• array : 기존 배열 
• newValue: callBackFunction에서 사용될 값  

 ex1)  

let array = ["월", "화", "수"];
let filter = array.filter(item => item === "월");//요소가 월인 요소만 반환.
console.log(map);

//결과
["월"]

// OR 

let array = ["월", "화", "수"];
let filter = array.filter(function(item){item === "월"});

console.log(map);
//결과
["월"]

 

ex2) 이번에는 아무개 1의 정보만 가지고 와보자. 

 

var originDataList = 
	[{"param1":"아무개1", "param2":"01012341234"}
        ,{"param1":"아무개2", "param2":"01012341234"}
        ,{"param1":"아무개3", "param2":"01012341234"} ]

 customDataList = originDataList.filter(item => item.param1 === "아무개1");

//결과
[{"param1":"아무개1", "param2":"01012341234"}]

 

조건에 맞는 결과만 가지고 왔다.

이상태에서 앞에서 map()처럼 key명을 변경해주고 싶다면 두 함수를 연속적으로 사용해서 적용하면 된다.

 customDataList = originDataList.filter(item => item.param1 === "아무개1").map(item => {name:item.param1, phone_num:item.param2});

//결과
[{"name":"아무개1", "phone_num":"01012341234"}]

 

앞에서 조건을 이용해 특정 정보를 빼냈다면 

이번에는 name 만 가지고 오고 싶을때는 어떻게 할까? 

var name = customDataList.map(item => {name:item.name});

//결과
 [{"name":"아무개1"}
 ,{"name":"아무개2"}
 ,{"name":"아무개3"}]

 

새로운 요소를 추가할 수도 있다.  

var name = customDataList.map(item => { name: item.name, position:"junior" });

//결과
 [{"name":"아무개1", position:"junior"}
 ,{"name":"아무개2", position:"junior"}
 ,{"name":"아무개3", position:"junior"}]

 

응용해서 아무개1의 position만 senior로 변경하고 싶은 경우라면?

responseData.map(function(item) {   if(item.name === "아무개1"){
            				return item.position = "senior"} 
                                 });

//결과
 [{"name":"아무개1", position:"senior"}
 ,{"name":"아무개2", position:"junior"}
 ,{"name":"아무개3", position:"junior"}]

 

람다식이 아닌 함수를 만들어 쉽게 if절을 사용할 수 있다.

조건문이기 때문에 혹시 filter() 함수를 생각한 사람이 있을지 모르겠다. (내가 그랬다)

필터함수는 앞서 설명했듯 조건이 true인 요소만!! 가지고 오기 떄문에 모든 요소를 가지고 오는 map과 달리 조건에 맞는 요소만 반환하게 되므로 여기서는 적합하지 않다. 

responseData.filter(function(item) { 
         if(item.name === "아무개1"){
            return item.position = "senior"} 
 });

//결과
 [{"name":"아무개1", position:"senior"}]