배열의 함수형 메소드

웹 프론트엔드에서 배열을 순회하며 데이터들의 처리를 쉽게 할수 있도록 도와주는 자바스크립트 메소드에 대해 알아보겠습니다 . 자바스크립트에서 지원하는 배열 메소드는 아래와 같습니다.

1. forEach
2. map
3. filter
4. reduce
5. immutable

forEach vs for

var data = [{title : "이기적 유전자",author : "리처드 도킨스", price : 13500},
            {title : "객관성의 칼날",author : "찰스 길리스피", price : 25200},
            {title : "부분과 전체",author : "베르너 하이젠베르크", price : 15120}];

위와같은 데이터가 있습니다.

 

for(var i=0; i<data.length; i++) {
  console.log(data[i].title , data[i].price)
}

data.forEach(function(v) {
   console.log(v.title, v.price);
});

forEach에서는 더 이상 i++이나 length를 판단하는 코드가 필요 없습니다. 그만큼 실수를 줄일 수 있고, 코드는 더 보기 좋습니다.

for vs filter

for 이용해 특정 조건에 맞는 원소 추려 새로운 배열에 넣기.

var models = [];
for(var i = 0; i < data.length; i++) {
    if(data[i].title === "부분과 전체") {
        models.push(data[i]);
    }
}
console.log(models);
//output 
//[{title:"부분과 전체", author:"베르너 하이젠베르크"}];

filter 메소드이용해 특정 조건에 맞는 원소 찾아 새로운 배열 얻기

var useFilter = data.filter(function(elem,i,array){
    return data[i].title === "부분과 전체"
});

console.log(useFilter);
//output
//[{title:"부분과 전체", author:"베르너 하이젠베르크"}]

for문 이용시 고려해야할 변수와 새로운 배열에 데이터를 넣기위한 코드가 필요하지만, filter 메소드는 조건에 맞는 배열만 새로 생성해 넣어주므로 특정 조건에 맞는 원소를 추려내기 위해서는 filter문 사용이 for문보다 쉬울수 있습니다.

map()

map메서드는 함수에서 정의한 방법대로 모든 원소를 가공해서 새로운 배열을 반환합니다. 즉, 배열의 모든 요소를 다른값으로 변경하려할떄 사용합니다.

var data = [1,2,3,4,5];
var filteredData = data.map(function(v, index, array) {
    return v * 10;
});

//ES6 arrow함수 사용
var rNum = numberData.map(v => v *10);

//output
[10,20,30,40,50];

map 메소드 param값	내용
v	data 배열의 원소값
index	왼쪽에서 오른쪽으로 이동하는 index 값
array	원래 배열값
thisArg	콜백시 참조할 객체

filter()

조건에 맞지 않는 원소 삭제할때 사용하며 새로운 배열을 반환합니다.

배열에서 중복되는 요소 삭제 예시

var data = [1,2,3,4,1,1,1,2,3,10];
var newData = data.filter(function(v, index){
	return data.indexOf(v) === index;
});
console.log(newData); //output [1,2,3,4,10]

data.indexOf(v) : data 배열에서 찾고자 하는 것( v )의 위치( index )를 return. 

filter 메소드 param값	내용
v	data 배열의 원소값
index	(왼쪽에서 오른쪽으로 이동하는) 현재 index 값
array	원래 배열값
thisArg	콜백시 참조할 객체

 

reduce()

reduce는 배열의 모든 요소에 대해 지정된 콜백 함수를 호출하며, 콜백 함수의 반환 값을 누적하여 반환하는 함수입니다.

reduce 함수의 매개변수로 콜백 함수와 누적을 시작하기 위한 초기 값이며 초기 값은 선택사항입니다.

 

전체 price 더하기

var data = [
    { title:'곰젤리', price:1000 },
    { title:'꼬북칩', price:2000 },
    { title:'츄러스', price:2000 }
];

var sum = data.reduce(function(prevVal, elem) {
    return prevVal + elem.price;
}, 0);

console.log(sum);//output 5000

param값	내용
prevVal	콜백함수로부터 받는 누적 계산 값
elem	원소값
index	인덱스
array	메소드 호출하는 기존 배열
initialValue	(Optional) reduce 함수의 매개변수로 콜백 함수와 누적을 시작하기 위한 초기 값

 

immutable ( 원본데이터 유지하기)

immutable은 변경불가성이란 의미를 가지며 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 말합니다. 또한 함수형 프로그래밍의 핵심 원리이기도 합니다. 위에서 공부한 filter(), map() 메소드는 참조한 원본 데이터는 원래 값 그대로 유지되면서 새로운 배열을 반환합니다. 이를 immutable 하다고 표현합니다.

var data = [{title : "이기적 유전자",author : "리처드 도킨스", price : 13500},
            {title : "객관성의 칼날",author : "찰스 길리스피", price : 25200},
            {title : "부분과 전체",author : "베르너 하이젠베르크", price : 15120}];

var filteredData = data.filter(function(v) {
    return v.price > 15000;
}).map(function(v) {
  var obj = {};
  obj.title = v.title;
  obj.author = v.author;
  obj.price = (''+v.price).replace(/^(\d+)(\d{3})$/, "$1,$2원");
  return obj;
});

console.log(filteredData);
/* output
[{title: "객관성의 칼날", author: "찰스 길리스피", price: "25,200원"}
 title: "부분과 전체", author: "베르너 하이젠베르크", price: "15,120원"}]
*/
console.log(data);
/* output
[{title : "이기적 유전자",author : "리처드 도킨스", price : 13500},
 {title : "객관성의 칼날",author : "찰스 길리스피", price : 25200},
 {title : "부분과 전체",author : "베르너 하이젠베르크", price : 15120}]
 */

data의 객체를 이용하여 data의 price 중 15000 이상의 조건을 갖는 값만 추려내기 위해 filter() 메소드를 사용하였고, 이후 3번째 자리에 ,(콤마)를 찍기위해 map() 메소드를 이용해 값을 재정립해 새로운 배열을 반환하였습니다. 

 

---

출처

1. https://danmartensen.svbtle.com/javascripts-map-reduce-and-filter#drawbacks-of-looping_1

JavaScript's Map, Reduce, and Filter • Dan Martensen

2. https://www.edwith.org/boostcourse-web/lecture/16778/

[LECTURE] 1) 배열의 함수형 메소드 : edwith