[JavaScript] forEach 함수 예제, 사용법

일반적으로는 배열의 요소 값을 조작해야하거나 특정 작업을 배열의 요소마다 수행해야 하는 경우 반복문을 사용해야하는데요.

자바스크립트 Array.forEach() 메서드는 배열(Array) 객체에 활용 가능한 메서드로 배열의 요소들을 하나씩 반복하여 특정 작업을 수행할 수 있게 해줍니다.

본 포스팅에서는 forEach 메서드의 사용법과 예제들을 다루어 보겠습니다.

forEach 사용 문법

“배열”.forEach(“콜백 함수”);

기본적으로 forEach 메서드는 아래처럼 호출이 가능하며,

"배열".forEach("콜백 함수");

“콜백 함수“는 최대 세가지의 인자를 forEach 메서드로부터 활용할 수 있습니다.

currentElement: 필수 값이며, 배열의 요소를 의미합니다.
index: 선택 값이며, 현재 요소의 색인(index)을 의미합니다.
array: 선택 값이며, forEach 메서드를 호출한 배열을 의미합니다.

이제 예시를 통해 구체적인 사용 방법을 알아보겠습니다.

const A = [1, 2, 3, 4, 5]; // 배열 A

function print(number) { // 콜백 함수 print
  console.log(number);
}

A.forEach(print); // 배열 A에 forEach() 메서드 호출

위에 예시는 배열 “A“의 요소들을 모두 출력합니다.

“print()” 함수는 “콜백 함수“를 의미하며, 배열의 요소 개수만큼 호출되고, forEach 메서드로부터 “number“를 통해 요소들을 전달받습니다.

이때 “number“는 위에서 말한 “currentElement” 인자를 의미합니다.

즉, “number” 라는 “currentElement” 인자를 통해서 “print()” 라는 콜백 함수가 배열의 요소들을 전달받고 콘솔에 출력하는 것이라고 이해할 수 있습니다.

// 배열 A
const A = [1, 2, 3, 4, 5];

// 콜백 함수 print
function print(number, i) {
  console.log(number, i);
}

// 배열 A에 forEach() 메서드 호출
A.forEach(print);

첫 번째 예시와 다른 점은 “print()” 콜백 함수에게 “i“라는 인자를 하나 더 넣어준 것뿐입니다. 여기서 “i“는 “index” 인자를 의미하며, 해당 “currentElement” 인자의 배열 안 색인(인덱스) 값을 가지고 있습니다.

// 배열 A
const A = [1, 2, 3, 4, 5];

// 콜백 함수 print
function print(number, i, arr) {
  console.log(number, i, arr);
}

// 배열 A에 forEach() 메서드 호출
A.forEach(print);

자바스크립트 forEach currentElement index array

마지막으로 콜백 함수 “print()”에게 “arr“라는 “array” 인자를 넣고 실행한 모습입니다. 결과값에서 알 수 있듯이 해당 인자는 forEach 메서드를 호출한 배열 객체를 의미합니다.

“배열”.forEach(“콜백 함수”, thisValue);

forEach 메서드는 “콜백 함수” 말고도 추가적으로 “thisValue“라는 매개변수를 넣어줄 수 있습니다. 이는 해당 “콜백 함수” 안에서의 this 값을 정의하는데 사용할 수 있습니다.

// 배열 A
const A = [1, 2, 3, 4, 5];

// 콜백 함수 print
function print(number, i, arr) {
  console.log(this);
}

// 배열 A에 forEach() 메서드 호출
A.forEach(print, 1234);

이렇게 forEach 메서드에게 “thisValue“(1234) 인자를 넘겨주면, this의 값은 “thisValue“에 의해 정의됩니다. “콜백 함수“는 배열의 요소 개수만큼 호출되기 때문에 this 값이 5번 출력된 모습입니다.

forEach 예제 모음

forEach 메서드를 활용한 예제들로 마무리 하겠습니다.

요소들의 합

// 합 변수
let sum = 0;

// 배열
const numbers = [65, 44, 12, 4];

// 콜백 함수
function myFunction(/*currentElement*/item) {
  sum += item;
}

numbers.forEach(myFunction);

// 요소들의 합 출력
console.log(sum);

결과값: 125

각 요소 10배 곱하기

// 배열
const numbers = [65, 44, 12, 4];

// 콜백 함수
function myFunction(/*currentElement*/item,/*index*/index, /*array*/arr) {
  arr[index] = item * 10;
}

numbers.forEach(myFunction);

// 배열 출력
console.log(numbers);