자바스크립트
함수형 프로그래밍
forEach()

자바스크립트 forEach(): 예제, index, map 차이, break continue return

자바스크립트에서 배열과 반복문을 사용해야 하는 경우에. 가장 일반적으로 사용하는 메서드 중 하나는 forEach() 메서드입니다. 이번 포스팅에서는 forEach() 메서드 사용 예제부터, index, array 매개 변수, map() 등 다른 메서드와의 차이, break continue return 키워드 사용 등에 대해 알아보겠습니다.

forEach()메서드는 배열 뿐 아니라 Set, Map 등 대부분의 자바스크립트 데이터 타입에 구현되어 있습니다. 이번 시간에는 배열 메서드에 대해서만 살펴볼게요.

💡

JS를 실행하기 위한 Node.js 는 asdf 로 설치하는 것을 추천합니다. 관련 내용은 이 포스트에서 확인할 수 있습니다.

1. JavaScript forEach() 기초

1.1. Array.prototype.forEach() 메서드 이해하기

forEach 메서드는 Array.prototype 객체의 일부이므로 모든 배열 인스턴스에서 사용할 수 있습니다. 이 메서드는 배열을 순회하고 각 요소에 대해 지정한 함수를 실행하는 가독성 높은 방법을 제공합니다. forEach() 메서드는 배열의 각 요소에 대해 실행하는 콜백 함수를 매개변수로 받습니다.

1.2. forEach() 메서드 기본 문법

forEach()메서드를 사용하기 위한 기본 문법은 간단합니다.

array.forEach(function callback(currentValue[, index[, array]]) {
    // Your code here
})

콜백 함수는 현재 값, 인덱스, 배열의 세 가지 매개변수를 받습니다. currentValue는 배열의 현재 요소를 나타내고, index는 해당 위치를 나타내며, array는 배열 자체에 대한 참조입니다. 인덱스와 배열 매개변수는 선택 사항입니다.

다음은, 단순한 forEach() 메서드 사용 예제입니다.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => console.log(number));

1.3. 일반적인 for 문과 비교

기존의 for문에 비해 forEach()메서드는 더 읽기 쉽고 간결한 구문을 제공합니다. 또한, 인덱스를 벗어나는 반복이나 배열 값이 수정되어 오류가 발생하는 등의 개발자의 실수를 미연에 방지합니다.

그러나 forEach 는 특히 반복문에서 벗어나거나, 반복을 건너뛸 때 for 문과 동일한 수준의 제어 기능을 제공하지 않는다는 점에 유의하여 사용해야 합니다.

2. forEach(), map() 차이

자바스크립트에서 배열 반복에 사용할 수 있는 다른 메서드는 filter(), map(), reduce() 등이 있습니다. 이러한 메서드는 forEach보다 더 전문화되어 있으며 특정 사용 사례에 최적화되어 있습니다:

  • map(): 각 요소에 콜백 함수를 적용하여 배열을 변환하고, 변환된 요소가 포함된 새 배열을 반환합니다.
  • reduce(): 이전 값과 현재 값을 결합하는 함수를 적용하여 배열의 값을 하나의 값으로 합산합니다.
  • filter(): 지정된 조건을 통과하는 요소만 남겨서 새 배열을 만듭니다.

특히, map()메서드가 새 배열을 반환하는 것에 비해, forEach()메서드는 항상 undefined를 반환합니다.

다른 배열 메서드에 대한 더 자세한 사항은 각각의 포스트를 참고해주세요.

3. forEach() 메서드 내 break, continue, return 키워드

함수형 프로그래밍 기반의 forEach()메서드는 배열의 모든 원소를 순회하는 것을 기본으로 전제합니다. 이에 따라, 순회를 정지하거나, 재개하는 break, continue 키워드 사용을 지원하지 않습니다.

다만, return키워드를 사용해서, break키워드의 역할을 대신할 수 있습니다.

아래 예제에서 요소값이 3인 경우에, return키워드로 다음 원소로 넘어간 것을 확인할 수 있습니다.

const array = [1, 2, 3, 4, 5];
 
array.forEach((element) => {
  if (element === 3) {
    return; // Skips the current iteration
  }
 
  console.log(element);
});

4. forEach() 사용 예제

4.1. 데이터 정리 및 포맷팅

자바스크립트 forEach()메서드는 데이터를 처리하거나 표시하기 전에, 데이터를 정리하고 포맷팅하는 데 유용하게 사용할 수 있습니다. 예를 들어 이름에 대소문자가 섞여있는 사용자 객체 배열이 있다고 가정해 보겠습니다.

forEach()메서드를 사용하여 대소문자를 표준화할 수 있습니다:

const users = [
    { id: 1, name: "ALICE" },
    { id: 2, name: "BOb" },
    { id: 3, name: "Charlie" }
];
 
users.forEach((user) => {
    user.name =
    user.name.charAt(0).toUpperCase() + user.name.slice(1).toLowerCase();
});
 
console.log(users);
 
// 출력:
// [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Bob' },
//   { id: 3, name: 'Charlie' }
// ]

이 예제에서 forEach()메서드는 users 배열을 반복하여 각 사용자의 이름을 적절한 대문자로 변경합니다. 이러한 유형의 데이터 정리는 애플리케이션 전체에서 일관성을 보장하여 데이터를 더 쉽게 표시하고 처리하는 데 도움이 됩니다.

4.2. DOM 조작하기

forEach()메서드를 사용하면 HTMLCCollections를 쉽게 반복하여 DOM 요소를 조작할 수 있습니다. 예를 들어 특정 클래스 이름을 가진 모든 요소에 클래스를 추가하고 싶을 수 있습니다:

const elements = document.getElementsByClassName("target");
 
Array.prototype.forEach.call(elements, (element) => {
    element.classList.add("new-class");
});

또한, DOM 엘리먼트의 속성이나 내용을 수정하는 데에도 사용할 수 있습니다. 예를 들어 특정 클래스 이름을 가진 모든 image 요소의 src 속성을 수정하고 싶다면 다음과 같이 할 수 있습니다.

const images = document.querySelectorAll(".image-class");
 
images.forEach((image) => {
    image.src = "new-image-source.jpg";
});

4.3. 다른 배열 메서드와 forEach 연결하기 (체이닝)

forEach()메서드를 다른 배열 메서드와 연결하면 더 강력하면서도 읽기 쉬운 코드를 만들 수 있습니다. 예를 들어, 주문 배열을 처리하고 특정 제품의 주문에 대한 총 수익을 계산한다고 가정해 보겠습니다:

const orders = [
    { id: 1, product: "A", price: 10, quantity: 2 },
    { id: 2, product: "B", price: 20, quantity: 1 },
    { id: 3, product: "A", price: 10, quantity: 3 },
    { id: 4, product: "C", price: 30, quantity: 1 }
];
 
const targetProduct = "A";
 
const totalRevenue = orders
    .filter((order) => order.product === targetProduct)
    .map((order) => order.price * order.quantity)
    .reduce((acc, curr) => acc + curr, 0);
 
console.log(totalRevenue);

이 예제에서는, 먼저 주문 배열을 필터링하여 대상 제품이 포함된 주문만 유지합니다. 그런 다음 map메서드를 사용하여 필터링된 각 주문의 매출을 계산합니다. 마지막으로 reduce메서드를 사용하여 총 수익을 누적합니다. 이러한 체이닝 방식은 더 읽기 쉽고 기능적인 코드로 이어져 코드 이해와 유지 관리가 더 쉬워집니다.

5. 콜백 함수 내에서 index, array 매개변수 활용하기

forEach()메서드의 콜백 함수는 현재 값뿐만 아니라 각 인덱스와 배열 자체에 접근하는 레퍼런스를 제공합니다. 이를 통해, 더욱 유연한 콜백 함수를 정의할 수 있습니다.

const numbers = [10, 20, 30, 40, 50];
 
numbers.forEach((number, index, array) => {
    console.log(`Index: ${index}, Number: ${number}, Array: ${array}`);
});
 
// 출력값:
// Index: 0, Number: 10, Array: 10,20,30,40,50
// Index: 1, Number: 20, Array: 10,20,30,40,50
// Index: 2, Number: 30, Array: 10,20,30,40,50
// Index: 3, Number: 40, Array: 10,20,30,40,50
// Index: 4, Number: 50, Array: 10,20,30,40,50

6. 사용자 정의 forEach 메서드 구현하기

경우에 따라, 필요에 맞게 forEach의 기능을 확장하고 싶을 수 있습니다. 예를 들어, for문에서 break문과 같이 빨리 반복문을 벗어나거나, 콜백 함수에 추가 매개 변수를 제공하는 등의 사용자 정의 forEach 함수를 만들 수 있습니다.

사용자 정의 forEach 함수를 만들려면 for문을 사용하고 원하는 매개변수를 전달하면 됩니다. 다음은 break기능이 포함된 사용자 정의 forEach 함수의 예시입니다:

function customForEach(array, callback) {
    for (let i = 0; i < array.length; i++) {
        const result = callback(array[i], i, array);
        if (result === false)
            break;
    }
}
 
const numbers = [1, 2, 3, 4, 5];
 
customForEach(numbers, (number) => {
    if (number > 3) return false; // "break" when number > 3
        console.log(number);
});
 
// 출력값:
// 1
// 2
// 3

7. 마치며

이번 포스팅에서 forEach() 메서드 사용 예제부터, index array 매개 변수, map() 등 다른 메서드와의 차이, break continue return 키워드 사용 등에 대해 알아보겠습니다.

보다 깔끔하고 효율적인 코드를 작성할 수 있게 해주는 forEach()메서드의 강점과 한계를 이해하면, 다양한 웹 개발 과제를 더 잘 해결할 수 있습니다. 자바스크립트 기술을 향상하고 더욱 효과적이고 매력적인 웹 애플리케이션을 제작하기 위해 forEach() 및 기타 배열 메서드에 대해 계속 탐구해 보시기 바랍니다.

copyright for Javascript foreach
pnpm 패키지 매니저map()
© 2023 All rights reserved.