특정 작업을 반복하는 메서드 - forEach(), map(), reduse()

1. forEach()

---

forEach() 메서드란?

• 배열을 순회하며, 인자로 전달된 함수를 반복적으로 호출하는 문법
• 'return'하는 값이 없다는 것이 특징이다.
• 인자와 함께 배열에 각각 적용될 콜백 함수(callback function)를 전달한다. 이 콜백 함수가 호출 될 때 인덱스와 배열에 접근할 수 있다.

 

forEach()의 사용법은?

//기본문법
arr.forEach((element, index, array) => { });

const arr = [1,2,3,4,5]

arr.forEach((item, index, array) => {
    console.log(item) // 1부터 차례대로 5까지
    console.log(index) // 0부터 차례대로 4까지
    console.log(array) // [1, 2, 3, 4, 5]
});

• forEach()의 인수

• item : 처리할 현재 요소
• index : 처리할 현재 요소의 인덱스
• array : forEach() 순회중인 배열

여기서 item를 제외한 나머지 두 인자는 사용하지 않는다면 제거해도 상관없다.

 

 

2. map()

---

map() 메서드란?

• map = Mapping
• 배열을 순회하며 각 요소별로 짝을 지운 후, 주어진 함수를 호출한 결과를 반환하는 문법
• forEach()와 달리 새로운 배열을 return한다.
• 단, 배열 안에 객체가 있을 시 그 객체는 공유된다.
• 함수 안에 적어준대로 반환할 수 있기 때문에 자유도 높음

 

map() 사용법은?

//기본문법
arr.map(callback(item[, index[, array]])[, thisArg])

const arr = ['foo', 'bar', 'baz']
const r = arr.map((item, index, array) => {
    return item.toUpperCase()
})
console.log(r) //FOO, BAR, BAZ

참고 :  toUpperCase() - 소문자를 대문자로 바꾸는 메서드다.

 

• map()의 매개변수와 인수

• callback : 새로운 배열을 생성하는 함수 
• item, index, array는 forEach와 동일
• thisArg : 콜백을 실행할 때 this로 사용되는 값

 

 

3. reduse()

---

reduse() 메서드란?

• 배열의 각 요소에 주어준 함수를 실행하고, 하나의 결과값을 반환한다.
• 이때, 누적값으로 배열을 돈다.

 

arr.reduce((accumulator, currentValue, index, array) => { return }, initialValue);

const arr = [1,2,3,4,5]

const r = arr.reduce((acc,cur,idx) => {
    return acc+cur
},0)
console.log(r) //15

• reduse()의 매개변수와 인수

• callback : 배열의 각 요소에 대해 실행하는 함수
• accumulator : 누적값
• currentValue : 현재의 값
• index, array : 위 다른 메서드와 동일
• initialValue : 초기값, 이 값이 없을 시 배열의 첫번째 요소를 사용한다.