자바스크립트 배열 forEach 함수

구문

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

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

 

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

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

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

 

반환 값

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

 

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

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

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

 

예제

배열 요소 출력하기

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

numbers.forEach(function(number) {
    console.log(number);
}); //

 

배열 요소들을 합산하기

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)

 

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

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

let foundNumber = null;

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

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

 

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

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

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

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

 

참고한 사이트

https://codingeverybody.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-foreach-%ED%95%A8%EC%88%98/

자바스크립트 forEach() 함수 – 개념 정리 및 사용 예제 - 코딩에브리바디