[JavaScript]배열 메소드 forEach(), map(),filter(),find(),reduce()

처음 자바스크립트를 입문하는 사용자에게는 익숙한 for()은 지금 소개할 배열 메소드 보다는 덜 직관적이며, 코드의 가독성이 떨어진다. 이러한 배열 메소드들이 어떤식으로 구현되며, 왜 for()을 대체할 수 있는지 하나씩 살펴 보자

 

for vs forEach

배열.forEach( (처리할 현재 요소, 처리할 현재 요소의 인덱스, forEach()를 호출한 배열) => { return 요소 });

- 배열의 인자수 만큼 반복되는 For문으로 이해하면 편하다.

var arr = [3, 9, 4, 2, 7, 6];

/*arrow function*/
arr.forEach( (currentValue,index,array) => {
    if (currentValue % 2 == 0) {
        console.log("currentValue:"+currentValue);
        console.log("index:"+index);
        console.log("array:"+array);
        /*console.log
         "currentValue:4"
         "index:2"
         "array:3,9,4,2,7,6"
         "currentValue:2"
         "index:3"
         "array:3,9,4,2,7,6"
         "currentValue:6"
         "index:5"
         "array:3,9,4,2,7,6"
        */
    }
});

/*normal*/
arr.forEach( function(currentValue,index,array){
    if (currentValue % 2 == 0) {
        console.log("currentValue:"+currentValue);
        console.log("index:"+index);
        console.log("array:"+array);
    }
});

/*for*/
for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 == 0) {
        console.log(arr[i]);
    }
}

 코드라인의 수나 구문을 읽을때 가독성은 for문이나, foreach나 큰 차이는 없어보인다.

하지만 2가지의 다른 부분이 존재한다.

1. 스코프가 간섭받지 않는다.

   for 예제에서 임시 변수  i 에 대해서 사용을 하였다, 이는 메모리나 성능에는 아주 미미한 간섭정도이나 추후 언제

   사용할지 모르게 되는  i 로 인해 가독성의 문제가 생길 여지는 존재

 

2. 값에 대한 접근 방법의 차이

   foreach의 경우 currentValue로 첫 번째 인자 값이 들어오므로 좀더 손쉽게 요소의 값을 얻을 수 있으나, 

   for문의 경우 arr[i]로 값을 얻어야 하므로 조금 더 불편한 점이 분명 존재

 

map

배열.map((요소, 인덱스, 배열) => { return 요소 });

let arrValue = [1,2,3,4];

let result = arrValue.map((returnVal) => { 
        return returnVal+1;
    });

console.log(arrValue);	//[1, 2, 3, 4]
console.log(result);	//[2, 3, 4, 5]

map은 해당 배열의 요소만큼 반복문을 돌며 해당 요소를 순서대로 불러와 매핑을 시켜줍니다. 이때 요소로 사용된 배열은 영향을 받지 않는것이 map의 특징이며 이 특징으로 인해 콜백의 값을 모아 새로운 배열을 만들때 사용됨

 

filter

배열.filter((요소, 인덱스, 배열) => { return 조건 });

const words = ['computer', 'ace', 'coffe', 'axe', 'kinfe', 'present'];

const result = words.filter(word => word.length > 6);
console.log(result); //["computer", "present"]

filter는 요소만큼 반복문을 돌며 해당 조건 true/false에 해당하는 것만 배열로 반환해 준다.

 

find

배열.find((요소, 인덱스, 배열) => { return 조건 });

let arr = [4, 15, 377, 395, 400, 1024, 3000];

let arr2 = arr.find((n) => (n % 5 === 0));
/* 
let arr2 = arr.find(function( n ){
  //if(n%5===0);
  //console.log(n%5);
  console.log("n:"+n);
  return n%5===0;
});
*/
console.log(arr2);	// 15

find는 조건에 해당하는 요소 하나만 반환한다.

(배열의 인덱스를 반환하고 싶다면 findIndex(), 배열 요소의 위치를 찾고싶다면 indexOf() )

 

reduce

reduce는 map, find, filter의 대체로 사용이 가능하다.

배열.reduce(( 이전값, 현재값, 현재인덱스, 배열) => { return 조건 });

let arr = [9, 2, 8, 5, 7]
let sum = arr.reduce((pre, val) => pre + val)
console.log(sum)	// 31

// map
var arr = ['foo', 'hello', 'diamond', 'A']
var arr2 = arr.reduce((pre, value) => {
    pre.push(value.length)
    return pre
}, [])
console.log(arr2)   // [3, 5, 7, 1]

// filter
var arr = [4, 15, 377, 395, 400, 1024, 3000]
var arr2 = arr.reduce((pre, value) => {
    if (value % 5 == 0) {
        pre.push(value);
    }
    return pre;
}, []);
console.log(arr2)    // [15, 395, 400, 3000]

// find
var arr = [4, 15, 377, 395, 400, 1024, 3000]
var arr2 = arr.reduce((pre, value) => {
    if (typeof pre == 'undefined' && value % 5 == 0) {
        pre = value;
    }
    return pre;
}, undefined);
console.log(arr2)  // 15