Array methods

📍 forEach와 map의 차이가 무엇일까! 항상 궁금했었는데 생각난 김에 정리해보기

(참고자료: https://velog.io/@nayeon/Array%EC%9D%98-map-filter-reduce-forEach-%EB%A9%94%EC%86%8C%EB%93%9C, https://medium.com/@JeffLombardJr/understanding-foreach-map-filter-and-find-in-javascript-f91da93b9f2c)

✔ forEach, map, filter, reduce 정리하기
-> 위의 모든 메소드는 모두 사본을 반환하며 원래의 배열은 바뀌지 않음!

1. 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]

2. map

• 주어진 함수를 한번씩 각각의 array 요소들에게 실행
• 결과 값으로 새로운 배열 생성

let newArr=arr.map(function callback (현재값 [, index [, array]] ) {
  // return newArr를 위한 요소
}[,thisArg)

• [예시] 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]

3. filter

• 주어진 함수에 속한 조건을 통과한 요소들을 새로운 배열로 반환

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]

4. 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]

👉🏻 정리

• 단순 for문 대신 forEach
• forEach에서 결과값 변수로 받으려면 map
• 특정 조건으로 필터링하려면 filter
• 배열 내 각 원소에 누적하여 적용 reduce