📘 7.4.4 배열의 모든 친구들을 하나씩 만나보기 - forEach()
어느 조용한 오후, 서랍 속에서 오래된 앨범을 꺼내어 펼쳐보는 순간을 떠올려보세요. 그 앨범 속 사진들을 한 장씩 넘기며, 각각의 추억과 다시 만나는 그런 시간 말이에요. 첫 번째 사진에 잠시 머물고, 두 번째 사진에서 미소 짓고, 세 번째 사진에서 눈물을 글썽이며, 마지막 사진까지 빠짐없이 모든 순간들과 인사하는 거죠.
우리가 지금까지 배운 배열에서도 이런 순간들이 필요해요. 특정한 보물을 찾는 것(indexOf(), includes())도 중요하지만, 때로는 배열 안의 모든 친구들을 하나씩 차례대로 만나고 싶을 때가 있어요. 오늘 만날 forEach()는 바로 그런 따뜻한 만남을 도와주는 친구예요.
🧠 새로운 단어들과 친해지기
새로운 개념과 만날 때마다 그 개념이 품고 있는 단어들을 천천히 이해하는 것이 중요해요. 마치 새로운 노래의 가사를 한 줄씩 곱씹어보는 것처럼요.
| 단어 | 쉬운 설명 |
|---|---|
| forEach() | 배열의 모든 요소를 처음부터 끝까지 하나씩 차례대로 만나주는 기능이에요 |
| 순회하기 | 배열의 첫 번째 친구부터 마지막 친구까지 빠짐없이 모두 만나러 가는 것이에요 |
| 콜백 함수 | forEach에게 "각 친구를 만날 때마다 뭘 할지" 알려주는 지시서 같은 거예요 |
| 반복 처리 | 똑같은 일을 여러 번 계속해서 하는 것을 말해요 |
forEach는 영어로 "각각에 대해"라는 뜻이에요. 배열의 각각의 친구에 대해 같은 마음으로 같은 일을 반복한다는 의미를 담고 있어요.
✨ forEach()가 뭔지 알아보기
forEach()는 배열을 다루는 정말 친절한 도우미예요. 어려운 for 반복문보다 훨씬 자연스럽고 이해하기 쉬운 방법으로 배열의 모든 친구들과 만날 수 있게 해줘요.
forEach()의 가장 아름다운 점은 복잡한 숫자 세기의 부담을 덜어준다는 거예요. for 반복문에서는 i < array.length 같은 조건을 직접 관리해야 했지만, forEach()는 자동으로 처음부터 끝까지 모든 친구를 찾아가줘요. 마치 숙련된 안내자가 미술관의 모든 작품을 빠짐없이 보여주는 것처럼요.
또한 forEach()는 각 친구에게 온전히 집중할 수 있게 해줘요. 복잡한 번호 계산이나 배열 길이 확인 없이, 오직 지금 만나고 있는 친구와 그 친구와 무엇을 나눌지에만 마음을 쓸 수 있어요.
forEach()는 원본 배열을 건드리지 않아요. 각 친구를 하나씩 만나서 우리가 하고 싶은 일을 할 뿐, 배열 자체를 바꾸지는 않아요. 마치 도서관에서 책을 읽을 때 책에 메모를 하지 않고 따로 노트에 적는 것처럼요.
재미있는 비유: 교실에서 친구들과 하나씩 인사하기
forEach()를 더 친근하게 이해하기 위해 하나의 이야기를 들려드릴게요.
새 학기가 시작되어 교실에 친구들이 한 줄로 서 있어요. 선생님이 여러분에게 "친구들과 한 명씩 인사해보세요"라고 말씀하셨어요.
여러분은 첫 번째 친구부터 시작해서 차례대로 인사해요. "안녕! 이름이 뭐야?"라고 똑같은 따뜻함으로 각 친구에게 말해주죠. 두 번째 친구, 세 번째 친구... 이렇게 마지막 친구까지 한 명도 소외되지 않게 모두 만나서 인사해요.
이 과정에서 여러분은 몇 번째 친구인지 일일이 세지 않아도 돼요. 그냥 다음 친구가 누구인지만 알면 되죠. 각 친구마다 똑같은 진심으로 인사하고, 모든 친구를 만날 때까지 자연스럽게 계속되어요.
바로 이것이 forEach()의 역할이에요. 배열 안의 모든 친구들과 하나씩 만나서 우리가 정한 따뜻한 일을 반복하는 자동 인사 도우미인 거예요.
🎯 왜 forEach()를 사용할까요?
forEach()를 사용하는 이유들을 생각해보면, 우리의 일상과 참 많이 닮아있어요.
가장 기본적으로는 모든 친구들을 화면에 소개하고 싶을 때 사용해요. 배열에 들어있는 모든 값들을 예쁘게 출력하거나 확인하고 싶을 때 forEach()만큼 편리한 방법은 없어요. 마치 가족사진을 보며 한 명씩 이름을 부르는 것처럼요.
각 친구에게 같은 일을 해주고 싶을 때도 정말 유용해요. 모든 점수에 5점을 더해주거나, 모든 이름을 예쁘게 꾸며주거나, 모든 가격에 세금을 계산해주는 등의 일을 할 수 있어요. 마치 엄마가 모든 아이들에게 똑같이 따뜻한 우유를 한 잔씩 주시는 것처럼요.
특별한 조건에 맞는 친구를 찾거나 세는 일에서도 활용돼요. 배열을 돌면서 특정 조건을 만족하는 친구들을 찾아내거나 몇 명인지 세는 일을 자연스럽게 할 수 있죠.
무엇보다 forEach()는 코드를 훨씬 읽기 쉽게 만들어줘요. 어려운 for 반복문 대신, "각 친구에 대해 이걸 해줘"라는 자연스러운 언어로 코드를 쓸 수 있어요.
⚙️ forEach() 사용법 배우기
forEach()의 사용법은 처음에는 조금 낯설 수 있지만, 이해하고 나면 정말 자연스러워요.
// 기본 형태
배열이름.forEach(function(친구) {
// 각 친구마다 할 일
});
// 순서도 함께 알고 싶을 때
배열이름.forEach(function(친구, 순서) {
// 친구와 순서를 모두 활용
});
// 실제 예시
let animals = ["강아지", "고양이"];
animals.forEach(function(animal) {
console.log("동물: " + animal);
});중요한 부분들:
- 배열이름: 만나고 싶은 친구들이 있는 배열
- forEach(): 순서대로 만나기를 시작하는 명령어
- function(): 각 친구마다 할 일을 정해주는 지시서
- 친구: 지금 만나고 있는 배열의 값
- 순서: 지금 친구가 몇 번째인지 알려주는 번호 (필요할 때만)
실제 예시:
let fruits = ["사과", "바나나", "딸기"];
// 모든 과일에게 인사하기
fruits.forEach(function(fruit) {
console.log("안녕, " + fruit + "!");
});
// 순서와 함께 인사하기
fruits.forEach(function(fruit, order) {
console.log(order + "번째 과일: " + fruit);
});🧪 직접 해보면서 배우기
이제 실제 예시들을 통해 forEach()가 품고 있는 따뜻함을 하나씩 경험해보겠어요. 각각의 예시는 우리가 실제로 마주할 수 있는 일상의 순간들이에요.
🔹 첫 번째 예시: 우리 반 친구들과 하나씩 인사하기
새 학기의 첫날, 우리 반 친구들과 하나씩 인사하는 시간을 가져보세요. forEach()와 함께하는 이 과정을 통해 기본 사용법을 자연스럽게 익혀보겠어요.
// 우리 반 친구들의 이름이 담긴 배열이 있어요
let ourClassmates = ["김지우", "이서연", "박준혁", "최민지"];
console.log("=== 우리 반 친구들 소개 ===");
console.log("우리 반 친구들:", ourClassmates);
console.log("총 친구 수:", ourClassmates.length + "명");
console.log("\n=== 친구들과 하나씩 인사하기 ===");
// forEach를 사용해서 모든 친구와 인사해봐요
ourClassmates.forEach(function(friend) {
console.log("안녕, " + friend + "! 만나서 반가워! 😊");
});
console.log("모든 친구들과 인사를 마쳤어요!");
console.log("\n=== 순서와 함께 친구들 소개하기 ===");
// 이번에는 순서도 함께 알아봐요
ourClassmates.forEach(function(friend, number) {
console.log((number + 1) + "번째 친구: " + friend + ", 안녕! 👋");
});
console.log("\n=== 옛날 방식(for문)과 비교해보기 ===");
// 같은 일을 옛날 방식으로 하면 이렇게 복잡해요
console.log("옛날 방식으로 같은 일 하기:");
for (let i = 0; i < ourClassmates.length; i++) {
console.log("안녕, " + ourClassmates[i] + "! 만나서 반가워!");
}
console.log("forEach가 훨씬 간단하고 이해하기 쉽죠!");이 예시를 통해 forEach()가 어떻게 모든 친구를 자동으로 찾아가는지, 그리고 기존 방식보다 얼마나 자연스러운지 이해할 수 있어요.
🔹 두 번째 예시: 장보기 목록의 가격 모두 더해보기
엄마와 함께 장보기를 가는 날, 모든 물건의 가격을 확인하고 계산하는 과정을 통해 forEach()의 실용적인 활용법을 알아보겠어요.
// 오늘 마트에서 살 물건들과 가격이에요 (간단하게 가격만 저장)
let shoppingPrices = [2500, 1500, 3000, 2000]; // 우유, 빵, 사과, 달걀 가격
let shoppingItems = ["우유", "빵", "사과", "달걀"];
console.log("=== 오늘의 장보기 목록 ===");
console.log("살 물건 개수:", shoppingItems.length + "개");
console.log("\n=== 각 물건 정보 확인하기 ===");
// forEach로 모든 물건 정보를 예쁘게 보여줘요
shoppingItems.forEach(function(item, number) {
console.log((number + 1) + ". " + item + " - " + shoppingPrices[number] + "원");
});
console.log("\n=== 총 얼마나 필요한지 계산하기 ===");
// 모든 물건의 총 가격을 계산해봐요
let totalMoney = 0; // 총 가격을 저장할 변수
shoppingPrices.forEach(function(price, number) {
console.log(shoppingItems[number] + " 가격을 더하기: " + price + "원");
totalMoney = totalMoney + price; // 가격을 모으기
console.log("지금까지 모인 돈: " + totalMoney + "원");
});
console.log("\n=== 최종 결과 발표! ===");
console.log("🛒 살 물건 총 개수: " + shoppingItems.length + "개");
console.log("💰 총 필요한 돈: " + totalMoney + "원");
// 용돈이 충분한지 확인해보기
let myPocketMoney = 10000; // 내 용돈
console.log("💵 내가 가진 용돈: " + myPocketMoney + "원");
if (myPocketMoney >= totalMoney) {
let change = myPocketMoney - totalMoney;
console.log("✅ 용돈이 충분해요! 거스름돈: " + change + "원");
} else {
let needed = totalMoney - myPocketMoney;
console.log("❌ 용돈이 부족해요. " + needed + "원 더 필요해요.");
}이 예시를 통해 forEach()를 사용하여 실제 계산 작업을 수행하고, 외부 변수와 함께 활용하는 방법을 이해할 수 있어요.
🔹 세 번째 예시: 시험 점수 확인하고 격려 메시지 주기
시험이 끝난 후, 우리 반 친구들의 점수를 확인하고 각 점수에 따라 따뜻한 격려 메시지를 주는 과정을 알아보겠어요.
// 우리 반 친구들의 수학 시험 점수가 나왔어요
let mathTestScores = [85, 92, 78, 95, 88, 76, 90];
console.log("=== 수학 시험 결과 발표 ===");
console.log("시험 점수들:", mathTestScores);
console.log("시험 본 친구 수:", mathTestScores.length + "명");
console.log("\n=== 각 친구에게 격려 메시지 주기 ===");
// forEach로 각 점수를 확인하고 따뜻한 격려 메시지를 줘봐요
mathTestScores.forEach(function(score, studentNumber) {
console.log((studentNumber + 1) + "번 친구 점수: " + score + "점");
// 점수에 따라 다른 메시지 주기
if (score >= 90) {
console.log(" → 와! 정말 훌륭해요! 최고예요! 🌟");
} else if (score >= 80) {
console.log(" → 정말 잘했어요! 조금만 더 힘내요! 💪");
} else {
console.log(" → 괜찮아요! 다음엔 더 잘할 수 있을 거예요! 😊");
}
console.log(""); // 줄 바꾸기
});
console.log("=== 우리 반 전체 성적 분석 ===");
// 추가 분석을 위한 변수들
let allScoresSum = 0; // 모든 점수 합계
let excellentStudents = 0; // 90점 이상 우수한 친구들
let needMoreHelp = 0; // 80점 미만 도움 필요한 친구들
// forEach로 모든 점수를 분석해봐요
mathTestScores.forEach(function(score) {
allScoresSum = allScoresSum + score; // 점수를 모두 더하기
if (score >= 90) {
excellentStudents = excellentStudents + 1; // 우수한 친구 세기
} else if (score < 80) {
needMoreHelp = needMoreHelp + 1; // 도움 필요한 친구 세기
}
});
// 분석 결과 예쁘게 보여주기
let classAverage = allScoresSum / mathTestScores.length; // 평균 계산
console.log("📊 우리 반 평균: " + classAverage + "점");
console.log("🏆 90점 이상 우수한 친구: " + excellentStudents + "명");
console.log("📚 더 도움이 필요한 친구: " + needMoreHelp + "명");
// 우리 반 전체에 대한 따뜻한 격려
if (classAverage >= 85) {
console.log("🎉 우리 반 정말 잘했어요! 모두 수고했어요! 👏");
} else {
console.log("🔥 다음에는 더 좋은 결과가 있을 거예요! 모두 화이팅! 💪");
}이 예시를 통해 forEach()를 사용하여 조건문과 함께 복잡한 일을 수행하고, 데이터 분석을 하는 방법을 이해할 수 있어요.
🧠 자주 하는 실수와 주의할 점
새로운 도구를 배울 때는 자주 하는 실수들을 미리 알아두는 것이 도움이 되어요. 실수는 배움의 일부이지만, 미리 알고 있으면 더 부드럽게 배울 수 있어요.
❌ 실수 1: function 키워드를 빼먹기
가장 흔한 실수 중 하나는 할 일을 정할 때 function 키워드를 빼먹는 거예요.
let pets = ["강아지", "고양이", "토끼"];
console.log("=== 올바른 방법과 틀린 방법 ===");
// ❌ 틀린 방법: function 키워드가 없어요
// pets.forEach(pet { // 문법 오류!
// console.log(pet);
// });
// ✅ 올바른 방법: function 키워드 포함
pets.forEach(function(pet) {
console.log("귀여운 " + pet + " 🐾");
});
console.log("\n기억하는 방법:");
console.log("'각 애완동물에 대해 함수(function)를 실행해줘'");❌ 실수 2: forEach()가 새로운 배열을 만들어준다고 생각하기
forEach()는 새로운 배열을 만들어주지 않는다는 것을 모르고 결과를 저장하려는 실수예요.
let numbers = [1, 2, 3];
console.log("=== forEach의 올바른 이해 ===");
// ❌ 틀린 생각: forEach가 새 배열을 만들어 줄 거라고 생각
let doubled = numbers.forEach(function(num) {
return num * 2; // 이 return은 의미가 없어요
});
console.log("잘못 생각한 결과:", doubled); // undefined
// ✅ 올바른 방법 1: 새 배열을 직접 만들기
let doubledNumbers = [];
numbers.forEach(function(num) {
doubledNumbers.push(num * 2); // 새 배열에 직접 넣기
});
console.log("올바른 doubled 배열:", doubledNumbers); // [2, 4, 6]
// ✅ 올바른 방법 2: forEach는 보여주기용으로 사용
console.log("숫자들 2배로 보여주기:");
numbers.forEach(function(num) {
console.log(num + " × 2 = " + (num * 2));
});
console.log("\n기억하세요: forEach는 '각 친구와 놀기'용이지, '새 친구 그룹 만들기'용이 아니에요!");✏️ 직접 해보기 - 쉬운 연습 문제들
이제 배운 내용들을 연습문제를 통해 우리의 마음과 손에 익혀보겠어요. 연습은 이해를 더욱 깊게 만들고, 실제로 사용할 수 있는 능력으로 바꾸어주는 소중한 과정이에요.
Ex1) 좋아하는 동물들에게 인사하기
// 좋아하는 동물들 배열
let favoriteAnimals = ["강아지", "고양이", "토끼", "햄스터"];
console.log("=== 좋아하는 동물들에게 인사하기 ===");
// forEach를 사용해서 모든 동물에게 인사하기
favoriteAnimals.forEach(function(animal) {
console.log("안녕, 귀여운 " + animal + "! 🐾");
});
console.log("모든 동물 친구들과 인사 완료!");Ex2) 숫자들을 10배로 만들어서 보여주기
// 원래 숫자들
let originalNumbers = [2, 5, 8];
console.log("=== 숫자들을 10배로 만들어보기 ===");
console.log("원래 숫자들:", originalNumbers);
// forEach를 사용해서 각 숫자를 10배로 만들어서 보여주기
originalNumbers.forEach(function(number, position) {
let result = number * 10;
console.log((position + 1) + "번째: " + number + " × 10 = " + result);
});Ex3) 이름이 3글자인 친구들 찾기
// 우리 반 친구들 이름
let friendNames = ["김철수", "이영희", "박민수", "최지영", "정다현"];
console.log("=== 3글자 이름인 친구들 찾기 ===");
console.log("우리 반 친구들:", friendNames);
// forEach를 사용해서 3글자 이름 친구들 찾기
friendNames.forEach(function(name, number) {
if (name.length === 3) {
console.log((number + 1) + "번째 친구: " + name + " (3글자 이름!) ✓");
} else {
console.log((number + 1) + "번째 친구: " + name);
}
});지금까지 forEach()의 모든 특성과 활용법을 자세히 알아봤어요. forEach()는 배열의 모든 친구들을 하나씩 만날 때 없어서는 안 될 정말 친근하고 강력한 도구예요. 앞으로 배열을 다룰 때 복잡한 for 반복문 대신 forEach()를 자신 있게 활용해보세요!
🔄 복습 문제 - 이전에 배운 내용들 기억하나요?
새로운 것을 배우는 것과 이전에 배운 것을 기억하는 것, 이 둘 사이의 균형을 맞추는 것이 진정한 학습이에요. 우리가 함께 걸어온 길을 다시 한번 돌아보면서 기억을 되살려보겠어요.
🔁 5단원 복습: 함수 만들어보기
함수에 대한 기억을 조용히 불러와 보세요. 함수는 우리가 반복해서 사용할 코드를 하나의 이름으로 묶어준 소중한 도구였어요.
// 문제: 배열의 모든 값을 출력하는 함수를 만들어보세요
function printAllItems(array) {
console.log("=== 배열의 모든 내용 출력 ===");
array.forEach(function(item, index) {
console.log((index + 1) + ". " + item);
});
console.log("총 " + array.length + "개의 항목이 있어요!");
}
// 사용해보기
let hobbies = ["독서", "게임", "운동", "그림그리기"];
printAllItems(hobbies);
// 화살표 함수와 forEach 함께 사용해보기
const showFruits = (fruits) => {
fruits.forEach(function(fruit) {
console.log("맛있는 " + fruit + " 🍎");
});
};
showFruits(["사과", "바나나", "오렌지"]);🔁 4단원 복습: for문과 forEach 비교하기
반복문도 기억나시나요? 같은 일을 여러 번 해야 할 때 우리를 도와주던 친구였어요.
// 문제: 같은 일을 for문과 forEach로 모두 해보세요
let colors = ["빨강", "파랑", "노랑", "초록"];
console.log("=== for문으로 출력하기 ===");
for (let i = 0; i < colors.length; i++) {
console.log((i + 1) + "번째 색깔: " + colors[i]);
}
console.log("\n=== forEach로 출력하기 ===");
colors.forEach(function(color, index) {
console.log((index + 1) + "번째 색깔: " + color);
});
console.log("\n어떤 방법이 더 쉽고 이해하기 좋나요?");
console.log("forEach가 더 간단하고 실수가 적어요!");✅ 학습 완료 체크리스트
우리가 오늘 함께 걸어온 길을 돌아보며, 각각의 내용을 마음속에 잘 정리했는지 확인해보세요.
| 학습 내용 | 이해했나요? |
|---|---|
| forEach()의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 주요 특징과 차이점 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
🎯 추가 연습 문제들
더 깊이 있는 이해를 원하는 여러분을 위해 몇 가지 문제를 더 준비했어요. 이 문제들을 통해 오늘 배운 내용을 더욱 단단하게 만들어보세요.
추가 문제 1. 색깔 배열의 모든 색깔을 forEach로 출력해보세요.
let colors = ["빨강", "파랑", "노랑", "초록"];
console.log("모든 색깔:");
colors.forEach(function(color) {
console.log("색깔: " + color);
});
console.log("출력 완료!");추가 문제 2. 숫자 배열의 각 숫자에 10을 더한 결과를 출력해보세요.
let numbers = [5, 10, 15];
console.log("각 숫자에 10 더하기:");
numbers.forEach(function(num, index) {
let result = num + 10;
console.log(index + "번째: " + num + " + 10 = " + result);
});추가 문제 3. 동물 배열에서 이름이 3글자인 동물만 찾아서 출력해보세요.
let animals = ["강아지", "고양이", "토끼", "햄스터"];
console.log("3글자 동물 찾기:");
animals.forEach(function(animal) {
if(animal.length === 3) {
console.log("3글자 동물: " + animal);
}
});추가 문제 4. forEach를 사용해서 학생들의 점수 평균을 계산해보세요.
let scores = [80, 90, 75, 85];
let total = 0;
let count = 0;
scores.forEach(function(score) {
total = total + score;
count = count + 1;
});
let average = total / count;
console.log("총점:", total);
console.log("평균:", average);답: 위 코드가 정답이에요.
설명: forEach로 모든 점수를 더하고 개수를 세어서 평균을 계산할 수 있어요.
📂 마무리 정보
오늘 우리가 함께 배운 7.4.4의 내용이 여러분의 마음속 지식 정원에 잘 심어졌기를 바라요. forEach()가 여러분의 프로그래밍 여정에서 언제나 친근하고 든든한 동반자가 되기를 바랍니다.
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요. 그것이 바로 진정한 학습이 일어나는 방식이니까요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'7. 여러 개 모아두기 (배열) > 7.4 배열 조작하기' 카테고리의 다른 글
| 7.4.3 배열에서 보물찾기 게임하기 - `indexOf()`와 `includes()` (0) | 2025.07.09 |
|---|---|
| 7.4.2 배열에서 필요한 부분만 복사해서 가져오기 - `slice()` (0) | 2025.07.09 |
| 7.4.1 배열의 어느 곳에서든 자유자재로 편집하기 - `splice()` (0) | 2025.07.09 |