[Javascript] 유용한 배열 메서드 6가지(forEach, map, some, every, filter, reduce)

자바스크립트에서는 배열 내 데이터를 접근할 수 있는 메서드는 여러 개가 존재한다. 

1. forEach

forEach 메서드는 원본 배열 자체를 사용자 입맛에 맞게 조작한다.

var arr = [1, 2, 3, 4];

// 함수 인자로 3개가 올 수 있는데 순서를 지켜야한다. (요소, 인덱스, 원본배열)
// 최소 요소는 넣어주어야 하고 인덱스부터는 생략할 수 있다.

arr.forEach(function(element, index, array) { 
array[index] = element * 100;
});

console.log(arr);  // [100, 200, 300, 400]

2. map

map 메서드는원본 배열은 유지한 채, 원본 배열을 조작해 새로운 배열을 만든다.

var arr = [1, 2, 3, 4]

// forEach와 마찬가지로 인자 3개를 받고 순서를 지켜야한다.
// return은 필수이다.

var newArr = arr.map(function(element) {
return element * 100;  
}

console.log(arr);    // [1, 2, 3, 4]

console.log(newArr); // [100, 200, 300, 400]

3. some

만약 우리가 어떤 배열 내 'AAA'라는 값을 찾아야한다.  이럴 때 사용하는 것이 some 메소드이다.

원본 배열에서 찾는 값이 있으면 true를 리턴, 메서드 수행 중 true가 리턴되면 메서드 수행을 중단하고 true를 리턴한다.

var arr = ['AAA', 'BBB', 'CCC', 'DDD'];    
    arr.some(function (element, index, array) {
        console.log(index + '번째 요소 : ' + element);
        return !!~element.search('CCC');  // 2번째 요소 : CCC를 출력하고 종료
    })

// true를 리턴하는 콜백이 있었으므로 리턴값은 true

위 예시는 원본 배열 내 'CCC' 요소가 있는지 확인하는 것이다.

2번 째 요소에서 'CCC'를 확인할 수 있기 때문에 그 시점에서 메서드를 종료하고 true를 리턴한다.

4. every

every 메서드는 some 메서드와 반대라고 생각하면 된다.

우리가 찾고자 하는 값이 각 인덱스마다 모두 존재하면 true를 리턴하고 메서드 수행중 찾고자 하는 값이 한 개라도 없으면 그 부분에서 수행을 중단하고 false를 리턴한다.

var arr = ['AAA', 'BBB', 'CCC', 'DDD'];
        
    arr.every(function (element, index, array) {
        console.log(index + '번째 요소 : ' + element);
        return !!~element.search('AAA');  // 1번째 요소 : BBB를 출력하고 종료
    })

// false를 리턴하는 콜백이 있었으므로 리턴값은 false

위 예시는 원본 배열의 모든 요소에 'AAA'가 포함되는지 확인하는 것이다.

하지만, 0번째 요소에서 'AAA'를 찾고 1번째 요소에서 우리가 찾는 값이 아닌 'BBB'이므로 그 시점에서 메서드가 종료되고 false를 리턴한다.

5. filter

원본 배열에서 특정 케이스만 필터링을 해서 새로운 배열을 만들고 싶을 때 사용한다.

 var arr = ['AAA', 'BBB', 'CCC', 'DDD'];
        
    var newArray = arr.filter(function(element, index, array) {
        return !!~element.search(/[AB]+/); // 배열의 요소가 A또는 B로 이루어진 것을 추출해 새로운 배열만듬
    })
        
    console.log(arr); // ['AAA', 'BBB', 'CCC', 'DDD']
    console.log(newArray); // ['AAA', 'BBB']

6. reduce

reduce 메서드는 다음과 같이 사용한다. 

 원본배열.reduce(function (누적값, 현재값, index, array) {
return 결과
}, 초기값);

만약에 초기값을 넣어주지 않으면 자동으로 초기값은 원본배열의 0번째 인덱스로 지정이 된다.

 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        
    var result = arr.reduce(function (previousElement, currentElement, index, array) {
        // 반환된 결과는 다음번 콜백의 첫 번째 파라메터로 다시 전달된다.
        return previousElement + currentElement;
    });
        
    console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    console.log(result);  // 55

초기값을 넣어준다면 이렇게.

function computeProductOfAllElements(arr) {
    var output = arr.reduce(function(pre, current, index, array) {
        return pre * current;    
    }, 10);
        
    console.log(output);
    console.log(arr);
};

computeProductOfAllElements([1, 2, 3, 4, 5]); // 1200 (초기값 10 * 1 * 2 * 3 * 4 * 5)

p.s. 잘못된 부분이 있으면 댓글로 알려주시면 감사합니다.