[자바스크립트] 배열 메소드

기존 배열부터 새로 추가된 배열 메소드에 대해 간단히 소개하겠습니다.

1. foreach문

• 기존의 for문과 foreach문을 비교하여 다른점을 찾아봅시다.

// for 구문 버전
var arr = [3, 9, 4, 2, 7, 6];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 == 0) {
        console.log(arr[i]); // 4, 2, 6
    }
}

// forEach() 버전
var arr = [3, 9, 4, 2, 7, 6];
arr.forEach(function (n) {
    if (n % 2 == 0) {
        console.log(n); // 4, 2, 6
    }
});

• 이런식으로 화살표 함수를 이용하여 간단하게 표현 할 수 있습니다.

// forEach() 화살표 함수 버전
var arr = [3, 9, 4, 2, 7, 6];
arr.forEach( n => { if (n % 2 === 0) console.log(n); }); // 4, 2, 6

기존 for문에서는 콜백함수로 arr[i] 배열 인자값으로 받지만 forEach문에서는 n이라는 각 요소의 값으로 반환받아 가독성이 좋습니다.

2. map

• map 메소드는 요소를 일괄적으로 변경하는데 효과적입니다.

// 문자열 배열에서 문자열 길이만 획득하기
var arr = ['foo', 'hello', 'diamond', 'A'];
console.log(arr.map( str => { return str.length; })); // [3, 5, 7, 1]

3. filter

• filter메소드는 배열에 특정 요소들을 걸러주는 기능을 합니다. 반환 값이 boolean값인데 true로 반환되는 배열값만 불러 옵니다.

// 정수 배열에서 5의 배수인 정수만 모으기
var arr = [4, 15, 377, 395, 400, 1024, 3000];
console.log(arr.filter( n => { return n % 5 == 0; })); //15, 395, 400, 3000

4. find

• find메소드는 filter매소드와 동일하게 특정 요소들을 걸러주지만 단 하나의 요소만 리턴해 줍니다.(첫 번째 요소)

// 정수 배열에서 5의 배수인 정수만 모으기
var arr = [4, 15, 377, 395, 400, 1024, 3000];
console.log(arr.filter( n => { return n % 5 == 0; })); //15

5. reduce

• reduce메소드로 위의 map, filter, find 메소드를 구현할 수 있습니다. 우선 복잡한 reduce 구문에 대해 알아봅시다.

  arr.reduce(callback[, initialValue])

• callback
  배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.

  • accumulator
    누산기accmulator는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에 initialValue의 값입니다.
  • currentValue
    처리할 현재 요소.
  • currentIndex(Optional)
    처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.
  • array (Optional)
    reduce()를 호출한 배열.

• initialValue (Optional)
  
  callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

// reduce에서 문자열 배열에서 문자열 길이만 획득하기(map)
var arr = ['foo', 'hello', 'diamond', 'A'];
console.log(arr.reduce(function (pre, value) {
    pre.push(value.length);
    return pre;
}, [])); // [3, 5, 7, 1]

// reduce에서 정수 배열에서 5의 배수인 정수만 모으기(filter)
var arr = [4, 15, 377, 395, 400, 1024, 3000];
console.log(arr.reduce((pre, value) => {
    if (value % 5 == 0) {
        pre.push(value);
    }
    return pre;
}, [])); //15, 395, 400, 3000

• find방식에서는 이미 찾은 경우 더 이상 찾지 않아야 하기 때문에 몇가지 조건문을 더 추가해줍니다.

// reduce에서 정수 배열에서 5의 배수인 정수만 모으기(find)
var arr = [4, 15, 377, 395, 400, 1024, 3000];
console.log(arr.reduce(function (pre, value) {
    if (typeof pre == 'undefined' && value % 5 == 0) {
        pre = value;
    }
    return pre;
}, undefined)); //15

참고 사이트 : MDN web docs - Map배열,편두리 기업블로그
참고 책 : Learning JavaScript (이서 브라운 지음, 한빛미디어)