[Dseok의 코딩스터디] JavaScript forEach() 한방에 끝내기 | 개념 & 실무 예제 10가지 | API 데이터 가져오기

📌 forEach()란?

forEach() 메서드는 배열(Array)의 각 요소를 순회(iterate)하며 지정된 함수를 실행하는 JavaScript 내장 메서드입니다.
기존의 for 루프와 달리 더 간결하고 가독성이 높은 코드 작성이 가능합니다.

forEach()는 배열의 각 요소를 반복하면서 콜백 함수(callback function)를 실행하며, 원본 배열을 변경하지 않고 순회만 수행합니다. 따라서 새로운 배열을 반환하는 map()과는 차이가 있습니다. 또한 break나 return으로 반복을 중단할 수 없어 특정 조건에서 반복을 멈추려면 some()이나 every() 같은 다른 메서드를 고려해야 합니다.

 

MDN 공식 문서도 참고해보시기 바랍니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN

 

 

✅ 기본 문법

array.forEach(function(element, index, array) {
  // 실행할 코드
});

• element: 현재 순회 중인 요소
• index: 현재 요소의 인덱스 (선택 사항)
• array: forEach()를 호출한 배열 자체 (선택 사항)

✅ 화살표 함수 문법

array.forEach((element, index) => {
  console.log(index, element);
});

 

📌 forEach()의 활용

forEach()는 반복문(iteration loop)으로, 다음과 같은 상황에서 활용됩니다:

• 데이터 가공 및 변환: JSON 데이터 처리, UI 업데이트, 로그 데이터 분석
• 비동기 프로그래밍: AJAX 호출 후 데이터 처리, 이벤트 리스너 적용
• 알고리즘 구현: 탐색(검색), 필터링, 매핑 연산에서 활용
• 데이터 스트리밍: 실시간 데이터 로그 분석, 소켓 프로그래밍

예제: JSON 데이터를 가져와 UI를 업데이트하는 코드

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(users => {
    users.forEach(user => {
      console.log(`사용자: ${user.name}, 이메일: ${user.email}`);
    });
  });

✅ 설명: API에서 받아온 데이터를 forEach()를 사용해 반복 출력합니다.

 

📌 forEach() 실용 예제 10가지

1️⃣ 배열 요소 출력하기

<p>콘솔을 확인하세요!</p>
<script>
let fruits = ["사과", "바나나", "체리"];
fruits.forEach((fruit, index) => {
  console.log(`과일 ${index + 1}: ${fruit}`);
});
</script>

✅ 설명: forEach()를 사용하여 배열의 요소를 하나씩 출력합니다.

 

2️⃣ HTML 리스트 동적으로 생성하기

<ul id="fruitList"></ul>
<script>
let fruits = ["사과", "바나나", "체리"];
let ul = document.getElementById("fruitList");

fruits.forEach((fruit) => {
  let li = document.createElement("li");
  li.textContent = fruit;
  ul.appendChild(li);
});
</script>

✅ 설명: forEach()를 사용해 배열의 값을 동적으로 HTML 리스트에 추가합니다.

 

3️⃣ 객체 배열에서 특정 속성 출력하기

<p>콘솔을 확인하세요!</p>
<script>
let users = [
  { name: "홍길동", age: 25 },
  { name: "김철수", age: 30 },
  { name: "이영희", age: 28 }
];

users.forEach(user => {
  console.log(`이름: ${user.name}, 나이: ${user.age}`);
});
</script>

✅ 설명: forEach()를 사용하여 객체 배열에서 특정 속성을 출력할 수 있습니다.

 

4️⃣ 버튼 클릭 시 배열 요소 하나씩 표시하기

<button id="showItem">다음 항목</button>
<p id="display"></p>
<script>
let items = ["HTML", "CSS", "JavaScript"];
let index = 0;

document.getElementById("showItem").addEventListener("click", function() {
  if (index < items.length) {
    document.getElementById("display").textContent = items[index];
    index++;
  } else {
    alert("더 이상 항목이 없습니다.");
  }
});
</script>

✅ 설명: forEach() 대신 버튼 클릭 시 하나씩 요소를 표시하는 방식으로 활용할 수 있습니다.

 

5️⃣ 배열의 값 수정하기

<p>콘솔을 확인하세요!</p>
<script>
let numbers = [1, 2, 3, 4, 5];
numbers.forEach((num, index, arr) => {
  arr[index] = num * 2;
});
console.log(numbers);
</script>

✅ 설명: forEach()를 이용해 배열의 값을 두 배로 변경할 수 있습니다.

 

6️⃣ 특정 조건을 만족하는 요소 필터링

<p>콘솔을 확인하세요!</p>
<script>
let ages = [15, 22, 30, 18, 19, 40];
let adults = [];

ages.forEach(age => {
  if (age >= 18) {
    adults.push(age);
  }
});
console.log("성인 나이 목록:", adults);
</script>

✅ 설명: forEach()를 활용해 성인 나이(18세 이상)만 따로 필터링할 수 있습니다.

 

7️⃣ 배열 요소를 대문자로 변환하기

<p>콘솔을 확인하세요!</p>
<script>
let words = ["hello", "world", "javascript"];
words.forEach((word, index, arr) => {
  arr[index] = word.toUpperCase();
});
console.log(words);
</script>

✅ 설명: forEach()를 활용해 배열 내 모든 문자열을 대문자로 변환할 수 있습니다.

 

8️⃣ 배열 내 특정 값을 찾아서 개수 세기

<p>콘솔을 확인하세요!</p>
<script>
let colors = ["red", "blue", "red", "green", "blue", "red"];
let colorCount = {};

colors.forEach(color => {
  colorCount[color] = (colorCount[color] || 0) + 1;
});

console.log(colorCount);
</script>

✅ 설명: forEach()를 이용해 각 색상의 등장 횟수를 객체로 저장할 수 있습니다.

 

9️⃣ DOM 요소에 이벤트 리스너 추가하기

<button class="click-btn">버튼 1</button>
<button class="click-btn">버튼 2</button>
<button class="click-btn">버튼 3</button>
<script>
document.querySelectorAll(".click-btn").forEach(button => {
  button.addEventListener("click", () => {
    alert("버튼이 클릭되었습니다!");
  });
});
</script>

✅ 설명: forEach()를 활용해 모든 버튼에 클릭 이벤트를 한 번에 추가할 수 있습니다.

 

🔟 배열 요소를 랜덤하게 섞기

<p>콘솔을 확인하세요!</p>
<script>
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

numbers.forEach((_, i, arr) => {
  let randomIndex = Math.floor(Math.random() * arr.length);
  [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]];
});

console.log(numbers);
</script>

✅ 설명: forEach()를 활용해 배열 요소를 랜덤하게 섞는 기능을 구현할 수 있습니다.

 

보너스 예시. API 데이터를 가져와 화면에 출력하기

fetch('<a href=https://jsonplaceholder.typicode.com/users')>https://jsonplaceholder.typicode.com/users')</a>
  .then(response => response.json())
  .then(users => {
    let userList = document.getElementById("userList");
    users.forEach(user => {
      let li = document.createElement("li");
      li.textContent = `${user.name} - ${user.email}`;
      userList.appendChild(li);
    });
  });

✅ 설명: fetch()를 이용해 API에서 데이터를 가져온 후 forEach()를 활용해 사용자 목록을 동적으로 HTML에 추가합니다.

 

 

📌 마무리 정리 🎯

forEach()는 JavaScript에서 배열을 반복할 때 가장 직관적인 메서드 중 하나입니다. for 루프보다 코드가 간결하며, 가독성이 좋아 유지보수에도 용이합니다. 하지만 반복을 중단할 수 없다는 점과 비동기 코드에서 주의해야 한다는 단점도 존재합니다.

실무에서는 forEach()를 사용하여 DOM 조작, 이벤트 핸들링, 데이터 가공 등 다양한 용도로 활용할 수 있습니다. 또한 map(), filter(), reduce()와 같은 다른 고차 함수들과 함께 사용하면 더욱 강력한 기능을 구현할 수 있습니다.