forEach() 함수의 개념

forEach() 함수는
배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 함수입니다.
배열의 각 요소에 대해 주어진 콜백 함수를 적용해서 순서대로 한 번씩 실행합니다.

forEach() 함수를 사용하면 반복문을 통해 배열의 요소를 접근하지 않고도 콜백 함수로 간편하게 배열 요소들을 처리할 수 있습니다.

JavaScript 
const arr = ["가", "나", "다"];

arr.forEach(function(element) {
    console.log(element);
});
// "가"
// "나"
// "다"

각 요소의 값뿐만 아니라 인덱스와 배열 자체도 콜백 함수에서 사용할 수 있습니다. 예를 들어, 배열의 요소들을 출력하거나 특정 동작을 수행할 수 있습니다.

배열을 순회하는 여러 방법이 있지만,
forEach() 함수는 map() 함수와 함께 가장 널리 사용되는 순회 방법 중 하나입니다. forEach() vs. map()을 참조하세요.

forEach() 함수의 사용법에 대해 알아보겠습니다.

구문

JavaScript - 구문 
arr.forEach(function(currentValue[, index[, array]]) {
    // 실행할 코드
}[, thisArg]);

arr은 forEach() 함수에 적용할 배열입니다.

매개변수

forEach() 함수의 매개변수
function arr 배열의 각 요소에 적용할 때 호출되는 콜백 함수입니다.
이 콜백 함수는 세 개의 매개변수를 가질 수 있습니다.
  • currentValue (필수 값): 처리할 현재 요소. 이 매개변수를 통해 현재 요소에 접근할 수 있습니다.
  • index (선택 사항): 처리할 현재 요소의 인덱스. 이 매개변수를 사용하여 현재 요소의 인덱스에 접근할 수 있습니다.
  • array (선택 사항): forEach() 함수를 호출한 배열. 이 매개변수를 사용하여 원본 배열에 접근할 수 있습니다.
thisArg (선택 사항) function을 실행할 때 this로 사용할 객체. 이 매개변수는 필요에 따라 사용됩니다.

콜백 함수

첫 번째 매개변수인 콜백 함수(function)과 관련되어 함수의 형태별 구문 형식은 다음과 같습니다.

JavaScript 
// 화살표 함수
forEach((element) => { /* … */ })
forEach((element[, index]) => { /* … */ })
forEach((element[, index[, array]]) => { /* … */ })

// 콜백 함수
forEach(callbackFn)
forEach(callbackFn[, thisArg])

// 인라인 콜백 함수
forEach(function (element) { /* … */ })
forEach(function (element[, index]) { /* … */ })
forEach(function (element[, index[, array]]) { /* … */ })
forEach(function (element[, index[, array]]) { /* … */ }[, thisArg])
콜백 함수 구현 설명

forEach() 함수는 배열의 각 요소를 순회하며 주어진 함수를 호출합니다.
배열의 각 요소에 대해 함수를 호출할 때, 해당 요소의 값, 인덱스, 그리고 원본 배열을 인수로 넘겨줍니다. 주어진 함수는 배열의 크기만큼 반복 실행되며, 배열 요소의 개수에 따라 콜백 함수가 호출되는 횟수가 결정됩니다.

반환 값

forEach() 함수는 반환 값이 항상 undefined입니다. 새로운 배열을 생성하지 않습니다.

JavaScript 
const numbers = [1, 2, 3, 4, 5];

const result = numbers.forEach(function(number) {
    return number * 2; // 콜백 함수에서 어떤 값을 반환해도 forEach()의 반환 값은 여전히 undefined
});

console.log(result); // 출력: undefined

사용 예제

forEach() 함수는 배열의 각 요소를 순회하며 해당 요소에 대해 어떤 동작을 수행하고자 할 때 사용하기에 적합합니다.
이 함수는 반환 값이 없으므로 각 요소를 처리하거나 어떤 작업을 수행하는 용도로 주로 활용됩니다.

예를 들어, 다음과 같은 경우에 forEach() 함수를 사용할 수 있습니다.
사용 예제를 통해 설명해보겠습니다.

  1. 배열 요소 출력하기
  2. 배열 요소들을 합산하기
  3. 특정 조건을 만족하는 배열 요소 찾기
  4. 배열 요소들을 문자열로 변환하여 새로운 배열 생성하기
  5. 배열 요소들의 특정 속성을 변경하기
  6. 다른 방법을 고려해야 할 때

배열 요소 출력하기

JavaScript 
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
    console.log(number);
}); // 출력: 1 2 3 4 5

배열 요소들을 합산하기

JavaScript 
const numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach(function(number) {
    sum += number;
});

console.log(sum); // 출력: 15 (1 + 2 + 3 + 4 + 5)

특정 조건을 만족하는 배열 요소 찾기

JavaScript 
const numbers = [10, 25, 30, 45];

let foundNumber = null;

numbers.forEach(function(number) {
    if (number > 30) {
        foundNumber = number;
    }
});

console.log(foundNumber); // 출력: 45

배열 요소들을 문자열로 변환하여 새로운 배열 생성하기

JavaScript 
const names = ['Alice', 'Bob', 'Charlie'];
const greetings = [];

names.forEach(function(name) {
    greetings.push(`Hello, ${name}!`); // 배열 끝에 값 추가하기
});

console.log(greetings); // 출력: ['Hello, Alice!', 'Hello, Bob!', 'Hello, Charlie!']

코드 부연설명
배열의 push() 함수는 배열의 끝에 하나 이상의 요소를 추가(push, 뒤에서 밀어 넣기)하는 함수입니다.

배열 요소들의 특정 속성을 변경하기

JavaScript 
const people = [
    {name: 'Alice', age: 30},
    {name: 'Bob', age: 25},
    {name: 'Charlie', age: 35}
];

people.forEach(function(person) {
    person.age += 5; // 모든 사람의 나이를 5살씩 증가시킴
});

console.log(people);
/* 출력:
    [
        {name: 'Alice', age: 35},
        {name: 'Bob', age: 30},
        {name: 'Charlie', age: 40}
    ]
*/

다른 방법을 고려해야 할 때

위 예제들은 forEach() 함수를 활용하여 간단하게 배열 요소들에 대해 다양한 작업을 수행하는 방법을 보여줍니다. forEach() 함수를 사용하면 반복문을 직접 작성하지 않고도 간결하게 배열을 순회하며 원하는 작업을 수행할 수 있습니다

하지만, 중간에 반복(순회)을 중단해야 할 경우에는 for 반복문이나 while 반복문 등과 break 문을 사용하는 것이 더 적합하며, 새로운 배열을 생성해야 할 경우에는 map() 함수를 사용하는 것이 편리합니다.

중간에 반복(순회)을 중단해야 할 경우
JavaScript 중간에 반복을 중단하기 위해서 for 반복문와 break 문을 사용했습니다. 
const numbers = [1, 2, 3, 4];
let foundNumber = null;

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] > 3) {
        foundNumber = numbers[i];
        break; // 반복 중단
    }
}

console.log(foundNumber); // 출력: 4

코드 부연설명
for 반복문은 특정 횟수나 범위만큼 반복하는 문입니다.

코드 부연설명
break 문은 반복문에서 사용되며, 실행 중인 현재 문을 즉시 종료하고, 다음 코드로 제어를 이동시키는 명령어입니다.

새로운 배열을 생성해야 할 경우
JavaScript 새로운 배열을 생성하기 위해 map() 함수를 사용했습니다. 
const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(number) {
    return number * 2;
});

console.log(doubledNumbers); // 출력: [2, 4, 6, 8, 10]

코드 부연설명
배열의 map() 함수는 배열을 순회해서 각 요소를 콜백 함수로 적용해서 처리해 모은 새로운 배열을 반환하기 위한 함수입니다.

자바스크립트 forEach() 함수와 map() 함수는 모두 배열의 요소를 순회하면서 접근하여 콜백 함수로 처리하는 함수입니다.
하지만, forEach() 함수는 각 요소를 단순히 순회하면서 콜백 함수로 처리하는데 반하여, map() 함수는 각 요소를 주어진 콜백 함수로 매핑하여 새로운 배열을 반환한다는 차이점이 있습니다.

다음은 forEach() 함수와 map() 함수의 차이점을 나타내는 사례 코드입니다.

JavaScript 
const numbers = [1, 2, 3, 4, 5];

// forEach() 함수 사용
const squaredNumbersForEach = [];

numbers.forEach(function(number) {
    squaredNumbersForEach.push(number * number);
});

console.log("Using forEach():", squaredNumbersForEach);
// 출력: "Using forEach():" [1, 4, 9, 16, 25]

// map() 함수 사용
const squaredNumbersMap = numbers.map(function(number) {
    return number * number;
});

console.log("Using map():", squaredNumbersMap);
// 출력: "Using map():" [1, 4, 9, 16, 25]

위의 예제에서 forEach() 함수는 각 요소를 순회하면서 제곱한 값을 squaredNumbersForEach 배열에 추가합니다. forEach() 함수는 반환 값이 없고, 원본 배열을 변경하거나 다른 배열에 값을 추가해야 합니다.

반면, map() 함수는 각 요소를 제곱하여 새로운 배열 squaredNumbersMap를 생성합니다. map() 함수는 변환 작업을 수행한 결과를 새로운 배열로 반환합니다.

이를 통해 forEach() 함수와 map() 함수의 사용 방식과 결과의 차이를 비교할 수 있습니다. forEach() 함수는 각 요소에 대해 작업을 수행하면서 배열을 변경하거나 다른 배열에 값을 추가며, map() 함수는 변환 작업을 통해 새로운 배열을 생성합니다.

forEach() 함수와 map() 함수의 장단점

forEach() 함수와 map() 함수 는 각각 다른 장단점을 가지고 있습니다. 각각의 장점은 단점이 될 수도 있고 단점은 장점이 될 수도 있으니 이점을 유의해서 참고하시기 바랍니다.

forEach() 함수의 장점
  • map() 함수보다 코드가 간결합니다.
  • 반환 값이 없기 때문에, 작업 결과를 다른 변수에 저장하거나 활용하지 않아도 됩니다.
  • 원본 배열을 직접 변경할 수 있으므로, 필요에 따라 배열을 수정할 수 있습니다.
forEach() 함수의 단점
  • 배열의 각 요소를 다른 값으로 바꾸거나, 특정 작업을 수행하거나, 배열의 각 요소를 필터링하는 데 사용할 수 없습니다.
  • 새로운 배열을 반환하지 않습니다.
map() 함수의 장점
  • 각 배열 요소를 변환하여 새로운 배열을 반환합니다.
  • 반환된 배열은 원본 배열과 길이가 같고, 각 요소는 변환된 값으로 구성됩니다.
  • 변환 작업을 통해 새로운 배열을 생성하기 때문에 원본 배열은 변경되지 않습니다.
map() 함수의 단점
  • 새로운 배열을 생성하는 과정에서 메모리를 사용하므로, 큰 크기의 배열에 대해서는 성능 이슈가 있을 수 있습니다.
  • forEach() 함수보다 코드가 길어질 수 있습니다.

전반적으로, map() 함수는 배열의 요소를 처리하는 데 더 유용한 함수입니다. 하지만, forEach() 함수는 코드가 간결하여 특정 상황에서는 더 유용한 함수가 될 수 있습니다.

브라우저 호환성

forEach() 함수에 대한 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
forEach() 1 12 1.5 3

명세서

forEach() 함수에 대한 명세서
명세서 사양
forEach() ECMAScript Language Specification
#sec-array.prototype.foreach

참고문헌

같이 보기