Array.prototype.forEach

Array.prototype.forEach

1. for문을 대체할 수 있는 고차 함수이다.
2. 자신의 내부에서 반복문을 실행한다.
3. 원본 배열을 변경하지 않는다. 하지만 콜백 함수를 통해 원본 배열을 변경할 수는 있다.
4. 반환값은 언제나 undefind다.

// forEach 메서드는 콜백 함수를 호출하면서 3개(요소값, 인덱스, this)의 인수를 전달한다.
// 인덱스와 this는 필수는 아니다.

[1, 2, 3].forEach((item, index, arr) => {
	console.log(`요소값: ${item}, 인덱스: ${index}, this: ${JSON.stringify(arr)}`);
});

/*
요소값: 1, 인덱스: 0, this: [1, 2, 3]
요소값: 2, 인덱스: 1, this: [1, 2, 3]
요소값: 3, 인덱스: 2, this: [1, 2, 3]
*/

📌 JSON.stringify 메서드
객체를 JSON 포맷의 문자열로 변환한다. 
위 예제에서는 객체인 arr 배열을 문자열로 출력하기 위해서 사용했다. 

/* 반복문은 로직의 흐름을 이해하기 어렵게 한다. for문은 반복을 위한 변수를 선언해야 하며, 
조건식과 증감식으로 이루어져 있어서 함수형 프로그래밍이 추구하는 바와 맞지 않는다. 
아래 코드는 number의 배열안에 있는 요소들을 제곱 했을때 나오는 결과를 result라는 변수에 담고 
싶을때 for문을 이용하여 작성한 코드이다. */

const number = [1, 2, 3, 4];
const result = [];

for (let i = 0; i < number.length; i++) {
	result.push(number[i] ** 2);
}

console.log(result); // [1, 4, 9, 16]

/* 위의 코드를 forEach 메서드로 구현하면 다음과 같다.
forEach 메서드는 number 배열의 모든 요소를 순회하며 콜백 함수를 반복 호출한다.
number 배열 요소가 4개이므로 콜백 함수도 4번 호출된다. */

const number = [1, 2, 3, 4];
const result = [];

number.forEach(item => result.push(item ** 2));
console.log(result); // [1, 4, 9, 16]

✍ forEach 메서드는 for문에 비해 성능이 좋지는 않지만 가독성은 더 좋다.
따라서 요소가 많은 배열을 순회하거나 시간이 많이 걸리는 복잡한 코드 또는 높은 성능이 필요한
경우가 아니라면 for문 대신 forEach 메서드를 사용할 것을 권장한다.