4.4.2 목록 값 반복하기 (for...of) - 과일 하나씩 꺼내기

📘 4.4.2 목록 값 반복하기 (for...of) - 과일 하나씩 꺼내기

지난 시간의 기억이 아직 여러분 마음 속에 따뜻하게 남아있나요? 우리는 정보 묶음의 속성을 하나씩 확인하는 for...in문을 함께 배웠어요. 오늘은 그와 닮아있지만 또 다른 매력을 가진 반복문을 만나볼 거예요. 바로 for...of문입니다.

이것은 마치 바구니에서 과일을 하나씩 꺼내어 맛보는 것처럼, 목록의 값들을 하나씩 꺼내어 우리가 원하는 일을 할 수 있게 해주는 아름다운 도구예요.

🧠 새로운 단어들과 친해지기

새로운 개념을 배울 때마다, 그 언어와 먼저 친숙해지는 것이 좋겠어요.

단어	쉬운 설명
목록	여러 개의 값을 순서대로 나열해놓은 것이에요. 마치 일렬로 선 모습과 같아요.
요소	목록 안에 들어있는 각각의 값을 말해요.
순서 번호	목록에서 각 요소의 위치 번호예요. (0부터 시작해요)
for...of 문	목록의 모든 값을 하나씩 꺼내서 반복하는 방법이에요.

예를 들어 ["사과", "바나나", "포도"]라는 목록이 있다면, "사과"는 0번째 요소, "바나나"는 1번째 요소가 되어요. 마치 과일들이 질서정연하게 줄을 서 있는 것처럼요.

✨ 핵심 개념 이해하기

for...of문을 이해하기 위해서는 먼저 목록이라는 개념을 가볍게 만나보면 좋겠어요. 목록은 여러 값을 순서대로 모아놓은 것입니다. 마치 학생들이 차례로 줄을 서 있는 모습과 같아요. (목록에 대한 더 깊은 이야기는 7단원에서 함께 나눌 예정이에요.)

for...of문은 이런 목록의 모든 값을 하나씩 꺼내어 우리가 원하는 일을 하고 싶을 때 사용하는 반복문이에요. 이전에 배운 for...in문이 속성 이름을 가져온다면, for...of문은 실제 값을 가져옵니다.

가장 아름다운 특징은 순서가 지켜진다는 점이에요. 목록의 첫 번째부터 마지막까지, 정확한 순서로 처리해줍니다.

일상 속의 비유: 과일 바구니에서 과일 꺼내먹기

for...of문을 더 친근하게 느껴보기 위해 과일 바구니의 이야기를 해볼게요.

상상해보세요. 여러분 앞에 예쁜 바구니가 하나 놓여 있고, 그 안에는 사과, 바나나, 포도, 오렌지가 차례대로 들어있어요. 이렇게 여러 개를 순서대로 모아놓은 게 바로 목록이에요.

이제 과일을 하나씩 꺼내먹을 때를 생각해보세요. 여러분은 "첫 번째 자리에 뭐가 있지? 두 번째 자리에는?" 이렇게 위치를 굳이 확인하지 않고, 그냥 "다음 과일, 그 다음 과일" 하면서 실제 과일을 꺼내먹겠죠.

for...of문도 바로 이런 방식으로 작동해요. 목록에서 실제 값들을 하나씩 꺼내어 사용할 수 있게 해줍니다.

🎯 언제 사용할까요?

for...of문은 이런 상황에서 우리의 좋은 동반자가 되어줄 거예요.

• 목록의 모든 값을 하나씩 처리하고 싶을 때
• 위치(순서 번호)는 필요 없고 값만 필요할 때
• 간단하고 깔끔하게 목록을 반복하고 싶을 때
• 글자의 각 문자를 하나씩 처리할 때

⚙️ 문법 구조 살펴보기

for...of문의 기본 문법은 놀랍도록 간결하고 우아해요.

// 먼저 목록을 만들어요 (간단한 예시)
let 목록이름 = [값1, 값2, 값3];

// for...of로 모든 값을 하나씩 반복해요
for(let 변수명 of 목록이름) {
    // 변수명에는 실제 값이 들어와요
    // 순서 번호나 위치는 신경 쓸 필요 없어요
}

for...in과 for...of 비교:

구분	for...in	for...of
용도	정보 묶음 속성 반복	목록 값 반복
반복 변수에 들어오는 것	속성 이름	실제 값
주요 사용 대상	정보 묶음	목록, 글자
순서 보장	보장 안 됨	보장됨

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 for...of문이 어떻게 작동하는지 차근차근 살펴보겠어요.

🔹 첫 번째 예시: 좋아하는 동물들 소개하기

// 내가 좋아하는 동물들을 목록으로 만들어보기
let favoriteAnimals = ["강아지", "고양이", "토끼", "햄스터"];

console.log("=== 내가 좋아하는 동물들 ===");

// for...of로 모든 동물 이름을 하나씩 가져와서 소개하기
for(let animal of favoriteAnimals) {
    console.log("나는 " + animal + "을 정말 좋아해요!");
}

console.log("동물 소개 완료! 모든 동물들이 다 사랑스러워요!");
// 결과: 나는 강아지을 정말 좋아해요!, 나는 고양이을 정말 좋아해요! 등등...

🔹 두 번째 예시: 숫자 찾기 게임

// 1부터 10까지의 숫자들이 들어있는 목록
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log("=== 짝수 홀수 찾기 게임 ===");

// 모든 숫자를 하나씩 확인해서 짝수인지 홀수인지 알아내기
for(let number of numbers) {
    if(number % 2 === 0) {
        console.log(number + "는 짝수입니다! 👫");
    } else {
        console.log(number + "는 홀수입니다! 🕺");
    }
}

console.log("숫자 게임 완료! 잘했어요!");

🔹 세 번째 예시: 이름의 글자 하나하나 분석하기

// 분석할 이름 (글자)
let myName = "김민수";

console.log("=== 내 이름 분석하기: " + myName + " ===");

// 글자의 각 문자를 하나씩 확인하기
for(let char of myName) {
    console.log("현재 문자: " + char);

    // 각 문자에 대해 간단한 분석 해보기
    if(char === "김") {
        console.log("  → 성(姓)이에요!");
    } else if(char === "민" || char === "수") {
        console.log("  → 이름이에요!");
    } else {
        console.log("  → 특별한 문자에요!");
    }
}

console.log("총 " + myName.length + "문자로 이루어진 멋진 이름이에요!");

🧠 자주 하는 실수와 주의할 점

코딩을 배우다 보면 누구나 작은 실수들을 하게 되어요. 미리 알아두면 더 부드럽게 학습할 수 있을 거예요.

❌ 실수 1: for...of에서 순서 번호를 사용하려고 하는 실수

// ❌ 잘못된 예시
for(let i of array) { 
    array[i]; // 틀렸어요! i는 순서 번호가 아니라 값이에요
}

// ✅ 올바른 예시
for(let value of array) { 
    value; // 맞아요! value는 실제 값이에요
}

❌ 실수 2: 정보 묶음에 for...of를 사용하는 실수

// ❌ 정보 묶음에는 for...of를 직접 사용할 수 없어요
let person = {name: "철수", age: 10};
for(let item of person) { // 오류 발생!
    console.log(item);
}

// ✅ 정보 묶음에는 for...in을 사용해요
for(let key in person) {
    console.log(key + ": " + person[key]);
}

✏️ 직접 해보기 - 연습 문제들

이제 여러분이 직접 손으로 느껴볼 시간이에요. 코딩은 마음으로 이해하는 것만큼이나, 손끝으로 체험하는 것도 소중하거든요.

Ex1) 과일 목록 출력하기

// 과일 목록을 만들어요
let fruits = ["사과", "바나나", "오렌지"];

// for...of로 모든 과일을 예쁘게 출력해보자
for(let fruit of fruits) {
    console.log("맛있는 " + fruit + "!");
}
// 결과: 맛있는 사과!, 맛있는 바나나!, 맛있는 오렌지!

Ex2) 큰 숫자 찾기

// 점수 목록을 만들어요
let scores = [5, 15, 8, 12, 3, 20];

// 10보다 큰 점수만 출력해보자
for(let score of scores) {
    if(score > 10) {
        console.log(score + "은 10보다 커요!");
    }
}
// 결과: 15은 10보다 커요!, 12은 10보다 커요!, 20은 10보다 커요!

Ex3) 글자 하나하나 출력하기

// 분석할 단어를 정해요
let word = "HELLO";

// 각 글자를 하나씩 출력해보자
for(let letter of word) {
    console.log("글자: " + letter);
}
// 결과: 글자: H, 글자: E, 글자: L, 글자: L, 글자: O

📚 복습하기 - 지난 시간의 기억들

학습은 마치 나무가 자라는 것과 같아요. 새로운 가지가 자라날 때마다 뿌리와 줄기가 더 튼튼해지죠.

🔄 4.4.1 복습: for...in문의 기본 개념

문제: for...in문에서 반복 변수에는 무엇이 들어오나요?

정답과 설명:

• 속성 이름: 반복 변수에는 속성의 이름이 들어와요
• 값을 얻으려면: 대괄호 표기법을 사용해야 해요!

🔄 4.3.2 복습: do...while문과 while문의 차이점

문제: while문과 do...while문 중 어떤 것이 최소 한 번은 실행될까요?

정답과 설명:

• do...while문: 조건이 거짓이어도 최소 한 번은 실행돼요
• 이유: do...while은 실행 후에 조건을 확인하기 때문이에요!

🔄 4.1.1 복습: for문의 기본 구조

문제: for문, for...in문, for...of문의 차이점을 간단히 설명해보세요!

정답과 설명:

• for문: 숫자를 세면서 반복 (1, 2, 3, 4, 5...)
• for...in문: 속성 이름을 하나씩 가져와서 반복 (name, age, grade...)
• for...of문: 실제 값을 하나씩 가져와서 반복 (사과, 바나나, 포도...)

이렇게 지난번에 배운 내용들도 계속 활용하면서 새로운 것을 배우는 거예요! 😊

---

지금까지 for...of문의 기본 개념과 활용법을 함께 살펴보았어요. for...of문은 목록의 실제 값들을 순서대로 꺼내서 반복하는 특별한 반복문입니다.

가장 중요한 포인트는 for...of는 값 자체를 가져온다는 것과, 목록과 글자에 사용하기 좋다는 것이에요. 정보 묶음에는 for...in을, 목록에는 for...of를 사용하는 것을 기억해주세요!

참고: 목록에 대한 더 자세한 내용은 7단원에서 배우게 될 거예요. 지금은 for...of문 사용법에 집중해서 연습해보시면 됩니다!

다음 시간에는 함수라는 또 다른 멋진 도구를 배워볼 예정이에요. 여러분의 코딩 실력이 하루하루 성장하는 모습을 보며 저도 함께 기뻐하고 있어요! 계속 함께해주세요! ✨

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 차근차근 확인해보세요!

학습 내용	이해했나요?
for...of문의 기본 개념	✅
기본 사용법과 문법	✅
for...in문과의 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅

📂 마무리 정보

오늘 배운 4.4.2 내용이 여러분의 마음 속에 잘 자리잡았나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 목록에 대한 더 자세한 설명은 7단원에서 배울 예정이니, 지금은 for...of 사용법에 집중해서 연습해보세요!

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---