map()메서드는 배열(array)내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 가진 새로운 배열을 만들어낸다. 맵 메서드로 맵핑해준다! 고 이해하면 쉬울 것 같다. (매개변수로 함수가 들어가면 callback이라고 한다.)
let newArr=arr.map(function callback (현재값 [, index [, array]] ) {
// return newArr를 위한 요소
}[,thisArg)
callback
은 여기서 arr의 모든 요소를 호출하는 함수이다. 그 결과가 newArr에 더해진다.[예시] 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]
reduce()메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환한다. 배열 축소의 원리로 작용한다. 즉 여러개의 값이 담긴 배열이 줄어서 최종적으로 하나의 값으로 만드는 과정
arr.reduce(callback (누산기, 현재값 [, currentindex [, array]]){
//return 누적 결과의 결과 값
[, 초기값]}
[예시]
[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]
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]
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