배열의 범위 기반 for문, forEach()

forEach() 메서드

• 기능: 배열의 각 요소에 대해 주어진 콜백 함수(callback function)를 순서대로 한 번씩 실행하는 반복 메서드입니다.
• 목적: 배열의 모든 요소를 가지고 **어떤 작업(주로 부수 효과(Side Effect)가 있는 작업)**을 수행하고 싶을 때 사용합니다. 예를 들어, 각 요소를 콘솔에 출력하거나, 각 요소를 사용하여 외부 변수의 값을 업데이트하는 등의 작업을 할 수 있습니다.
• 반환값: forEach() 메서드 자체는 항상 undefined를 반환합니다. map() 메서드처럼 새로운 배열을 생성하여 반환하지 않습니다.
• 원본 배열 변경: forEach() 메서드 자체는 원본 배열을 직접 변경하지 않습니다. 하지만 콜백 함수 내부에서 원본 배열의 요소를 변경하는 코드를 작성하는 것은 가능합니다 (권장되지는 않는 경우가 많습니다).

기본 문법:

array.forEach(callbackFunction);

// 콜백 함수는 보통 다음과 같은 인수를 받을 수 있습니다.
array.forEach(function(currentValue, index, array) {
    // currentValue: 현재 처리 중인 배열 요소의 값 (필수)
    // index: 현재 처리 중인 요소의 인덱스 (선택 사항)
    // array: forEach()를 호출한 원본 배열 (선택 사항)

    // 여기서 각 요소에 대한 작업을 수행합니다.
    // 이 콜백 함수에서 return하는 값은 forEach에서 사용되지 않습니다.
});

// 화살표 함수 사용 시
array.forEach((currentValue, index, array) => {
    // 작업 수행
});

 

map()과의 주요 차이점:

	forEach()	map()
주 목적	각 요소에 대한 작업 반복 수행 (주로 부수 효과)	각 요소를 변환하여 새 배열 생성
반환값	undefined	새로운 배열
원본 배열 변경	안 함 (콜백에서 직접 수정은 가능)	안 함

 

for...of 루프와의 비교:

• forEach(): 배열 메서드. 콜백 함수 내에서 break나 continue를 사용하여 반복을 중간에 멈추거나 건너뛸 수 없습니다. index, array 인수를 쉽게 받을 수 있습니다.
• for...of: JavaScript의 반복문 구문. break, continue 사용이 가능합니다. 인덱스가 필요하면 별도로 관리해야 합니다. 더 간단한 반복에 적합할 수 있습니다.

 

사용 예시:

각 요소 출력: (이전 답변의 예시)

const matrixRows = [[1, 0, 0], [0, 1, 0], [0, 0, 1]];
matrixRows.forEach(row => {
    console.log(row.join(' ')); // 각 행 배열을 문자열로 만들어 출력
});
// 출력:
// 1 0 0
// 0 1 0
// 0 0 1

 

요소와 인덱스 함께 사용:

const fruits = ["사과", "바나나", "딸기"];
fruits.forEach((fruit, index) => {
    console.log(`${index + 1}번째 과일: ${fruit}`);
});
// 출력:
// 1번째 과일: 사과
// 2번째 과일: 바나나
// 3번째 과일: 딸기

 

부수 효과 예시 (합계 계산):

const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(num => {
    sum += num; // 외부 변수 sum의 값을 변경 (부수 효과)
});
console.log("합계:", sum); // 출력: 합계: 15
// 참고: 합계 계산은 reduce 메서드가 더 적합한 경우가 많습니다.

 

반환값 확인:

const numbers = [1, 2, 3];
let result = numbers.forEach(num => {
    num * 2; // 어떤 작업을 하지만 return 값은 forEach에 영향을 안 줌
});
console.log(result); // 출력: undefined

 

요약:

forEach()는 배열의 각 요소를 가지고 단순히 어떤 작업을 반복적으로 수행하고 싶을 때 사용하는 메서드입니다.

map()처럼 결과를 모아 새로운 배열을 만들 필요가 없을 때 유용하며, 그 자체의 반환값은 항상 undefined라는 점을 기억하는 것이 중요합니다.

 

기타

배열과 map 의 인자 차이

호출 대상	콜백 함수 매개변수 1	콜백 함수 매개변수 2	콜백 함수 매개변수 3
Array	currentValue (값)	index (인덱스)	array (원본 배열)
Map	value (값)	key (키)	map (원본 맵)