Array의 map, filter, reduce, forEach 메소드

나연·2020년 3월 29일
1

Javascript

목록 보기
2/8
post-thumbnail

array.map()

map()메서드는 배열(array)내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 가진 새로운 배열을 만들어낸다. 맵 메서드로 맵핑해준다! 고 이해하면 쉬울 것 같다. (매개변수로 함수가 들어가면 callback이라고 한다.)

let newArr=arr.map(function callback (현재값 [, index [, array]] ) {
// return newArr를 위한 요소
}[,thisArg)
  • callback은 여기서 arr의 모든 요소를 호출하는 함수이다. 그 결과가 newArr에 더해진다.
  • [로 감싼 것은 모두 부가적
  • 현재값으로는 array안에서 처리될 현재 요소를 넣어준다.
  • return의 값으로는 newArr에 funtion을 callback한 결과가 각각의 요소에 적용되어 담기게 될 값을 적용한다.

[예시] Mapping an array of numbers using a function containing an argument

let numbers = [1, 4, 9]
let roots = numbers.map(function(num){
return Math.squrt(num)
})
//roots is now [1, 2, 3]
//numbers is still [1, 4, 9]

array.reduce()

reduce()메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환한다. 배열 축소의 원리로 작용한다. 즉 여러개의 값이 담긴 배열이 줄어서 최종적으로 하나의 값으로 만드는 과정

arr.reduce(callback (누산기, 현재값 [, currentindex [, array]]){
//return 누적 결과의 결과 값
 [, 초기값]}
  • callback은 배열의 각 요소에 대해 실행할 함수이다.
  • 누산기는 콜백의 반환값을 누적한다. 콜배의 이전 반환값 또는 첫번째 호출이면 초기값이 있으면 초기값이다.
  • array는 reduce()를 호출한 배열을 넣어준다.
  • 초기값을 제공하면 누산기=초기값, 현재값=배열의 첫번째값 , 초기값을 제공하지 않았다면 누산기=배열의 첫번째값, 현재값=배열의 두번째값
  • 초기값을 제공하지 않으면 reduce()는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫번째 인덱스는 건너 뛴다. 초기값을 제공하면 인덱스0에서 시작한다.

[예시]

[0,1,2,3,4].reduce(function(acc,cur){
 return acc+cur
}); //return 10

아래와 같이 화살표 함수로 작성할 수도 있다.

[0,1,2,3,4].reduce((prev,cur => prev+cur))
var flattended = [[0,1], [2,3], [4,5]]
function (acc,crr){
 return acc.concat(crr)
},
[]); 
//return [0,1,2,3,4,5]

array.forEach()

forEach()메서드는 주어진 함수를 한번씩 각각의 array 요소들에게 실행한다. (for loop를 생각하면 좋을 듯)

let array1= ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
//expected output:'a'
//expected output:'b'
//expected output:'c'
arr.forEach(callback(현재값 [,index [,array]])[, thisArg]

array.filter()

filter()메서드는 주어진 function에 속한 조건을 통과한 요소들을 새로운 배열로 반환한다.

let newArray = arr.filter(callback(curr [,index [,array]]){
return //새로운 배열에 포함되기 위해 통과할 조건
}[,this Arg]
function isBigEnough(value){
return value>=10
}

let filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
//filtered is [12, 130, 44]

🚩위의 메소드는 모두 사본을 반환하며 원래의 배열은 바뀌지 않는다.
참고하면 좋을 레퍼런스('Why and when to use forEach, map, filter, reduce, and find in javascript') https://medium.com/@JeffLombardJr/understanding-foreach-map-filter-and-find-in-javascript-f91da93b9f2c

profile
아름다운 상상을 실현하는 개발자입니다🌈🤍

0개의 댓글