forEach() 함수의 개념

자바스크립트의 forEach() 함수는 배열을 순회해서 처리하는 데 사용되는 메서드로, 배열의 각 요소에 대해 주어진 함수를 순서대로 한 번씩 실행합니다. 배열을 순회하는 여러 방법이 있지만, forEach() 함수는 map() 함수와 함께 가장 널리 사용되는 순회 방법 중 하나입니다.

자바스크립트 map() 함수 – 개념 정리 및 사용 예제

forEach() 함수를 사용하면 반복문을 통해 배열의 요소를 접근하지 않고도, 간편하게 배열 요소들을 처리할 수 있습니다. 각 요소의 값뿐만 아니라 인덱스와 배열 자체도 콜백 함수에서 사용할 수 있습니다. 예를 들어, 배열의 요소들을 출력하거나 특정 동작을 수행할 수 있습니다.

forEach() 함수의 구문

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

구조와 매개변수

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

반환 값

undefined

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() 함수는 반환 값이 없으므로 새로운 배열을 생성하지 않습니다.

forEach() 함수의 간단한 예제

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!']

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

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
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]

forEach() 함수와 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() 함수에 대한 명세서

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

forEach() 함수에 대한 브라우저 호환성

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

caniuse.com에서 더 자세한 정보를 확인해 보세요.

참고문헌

같이 보기