Array method (filter, map, reduce)

Inevitable.Jason·2020년 11월 8일
1

Javascript

목록 보기
4/4
post-thumbnail

INTRO.

자바스크립트를 사용하면서, 다른건 몰라도 배열 메소드 몇개는 확실하게 기억해두어야겠다는 생각이든다. 이 몇개의 method 자체가 상당히 유용하게 쓰이는걸 알지만, 익숙한 for문으로 모든걸 커버하려고 하는게 마음에 들지 않았다.

간단하게 보는 map, filter, reduce 의 기능!


MAP

mdn의 설명을 보면,
Array.prototype.map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

arr.map ( callback ( currentValue [, index[, array]]) [, thisArg])

매개변수
callback
새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.

currentValue
처리할 현재 요소.

index Optional
처리할 현재 요소의 인덱스.

array Optional
map()을 호출한 배열.

thisArg Optional
callback을 실행할 때 this로 사용되는 값.

반환 값
배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.

Example.

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]

callback 함수 인자를 Math.sqrt 로 받아 모든 element에 Math.sqrt 를 씌워준 방법.

내가 자주쓰는 for loop 을 쓴다면,

function sqrt(x) {
    let newNumb = [];
    for (let i = 0; i < x.length; i++) {
        newNumb.push(Math.sqrt(x[i]))
    }
    return newNumb;
} 

같은 return 값을 갖는다 하더라도 map을쓰면 훨신 간결하게 만들수있다.


FILTER

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

arr.filter(callback(element[, index[, array]])[, thisArg])

매개변수
callback

각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.

element
처리할 현재 요소.

index Optional
처리할 현재 요소의 인덱스.

array Optional
filter를 호출한 배열.

thisArg Optional
callback을 실행할 때 this로 사용하는 값.

반환 값
테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.

Example.

function isBigEnough(value) {
  return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

filter method 를 통해, 10보다 작은 수를 제거하는 방법.
isBigeEnough 라는 callback 함수를 통해 배열내에 10보다 작은수 (true) 값만을 배열내에 담아 return 해줬다.


REDUCE

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

arr.reduce(callback[, initialValue])

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

accumulator
누산기accmulator는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출
이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.

currentValue
처리할 현재 요소.

currentIndex Optional
처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.

array Optional
reduce()를 호출한 배열.

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

반환 값
누적 계산의 결과 값.

Example.
중복된 요소 제거

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((accumulator, current) => {
    const length = accumulator.length
    if (length === 0 || accumulator[length - 1] !== current) {
        accumulator.push(current);
    }
    return accumulator;
}, []);
console.log(result); //[1,2,3,4,5]

sort 메소드를 통해, 오름차순으로 정렬후, 중복요소 만을 accumulator에 push


사실 mdn을 보면 더 편하다.
이미 알고있는 내용들이지만, 이미 너무나 익숙해져버린 for loop 대신 쓸수있다는걸 상기시키기 위해 적은것이다. 앞으로 for loop 을 사용할 일이 생기면 다양한 method 를 사용해서 활용도를 높여봐야겠다.

profile
Who wanna be a programming nerd.

0개의 댓글