04. forEach

📌 4-1 forEach란?

✔ 배열.forEach(콜백함수(배열의 값, 배열의 인덱스, 배열), thisArg)
✔ 배열의 각 요소의 대해서 오름차순으로 한번 씩 실행된다.
✔ 배열의 메서드 map과 유사하지만 map의 결과는 새로운 값을 반환하지만 forEach는 결과값은 항상 undefined이다.

📌 4-2 forEach의 작동예제

forEach메서드는 배열의 모든 값들을 순회하며 명령문을 실행한다.

const arr = [1,2,3,4,5];
arr.forEach((value, index, array) => console.log(value, index, array));
// 1번실행 1 0 [ 1, 2, 3, 4, 5 ]
// 2번실행 2 1 [ 1, 2, 3, 4, 5 ]
// 3번실행 3 2 [ 1, 2, 3, 4, 5 ]
// 4번실행 4 3 [ 1, 2, 3, 4, 5 ]
// 5번실행 5 4 [ 1, 2, 3, 4, 5 ]

💡 작동방식은 map메서드와 같지만 map메서드의 결과 값은 새로운 배열을 만들어 반환하지만 forEach문은 실행만 하게된다.

const arr = [1,2,3,4,5];
const forEach = arr.forEach((value, index, array) => {
    return value;
});
console.log(forEach); // undefined 출력

📌 4-3 forEach의 사용예제

map메서드는 원본배열을 훼손하지않고 새로운 배열을 반환하였다면 forEach는 원본배열을 수정할 때 용이하게 사용된다.

let arr = [1,2,3,4,5];
const map = arr.map((value) => 2 * value);
console.log(arr); // [ 1, 2, 3, 4, 5 ] 출력
console.log(map); // [ 2, 4, 6, 8, 10 ] 출력
arr.forEach((value, index) => arr[index] = 2 * value);
console.log(arr); // [ 2, 4, 6, 8, 10 ] 출력

💡 이처럼 새로운 배열을 생성해야 할경우에는 map메서드를 사용하고 해당 배열에서 순차적으로 요소들을 방문해서 처리하거나 원본배열을 수정할 경우에는 forEach메서드를 사용한다.

📌 for in, for of 반복문이란?

Js에서는 요소별로 접근해서 반복하는문이 크게 3가지가 있다. for in, for of, forEach를 사용하며 for in, for of 문에 대하여 알아보자

const arr = [1,1,1,1,1];
for(let index in arr) {
    console.log(index); // 0, 1, 2, 3, 4 출력
}
for(let value of arr) {
    console.log(value); // 1, 1, 1, 1, 1 출력
}

💡 이처럼 for in문은 배열이나 문자열의 index번호기준으로 순회하고 for of문은 배열이나 문자열 요소들을 기준으로 순회한다.