4.4.1 정보 묶음 속성 반복하기 (for...in) - 서랍 한 칸씩 열어보기

📘 4.4.1 정보 묶음 속성 반복하기 (for...in) - 서랍 한 칸씩 열어보기

여러분과 함께하는 이 시간이 참 소중합니다. 오늘은 반복문의 새로운 얼굴을 만나보려 해요. 바로 for...in문입니다. 이것은 마치 오래된 서랍을 하나씩 열어보며, 그 안에 무엇이 담겨 있는지 천천히 확인하는 것과 같아요.

지금까지 여러분이 배운 반복문들과는 조금 다른 성격을 가지고 있지만, 그만큼 특별한 힘을 가지고 있답니다. 여러 정보가 하나로 모여있는 묶음을 다룰 때, 이보다 더 적절한 도구는 없을 거예요.

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

코딩의 언어를 배우는 것은 새로운 친구와 대화를 시작하는 것과 같아요. 먼저 이 친구들과 인사를 나눠볼까요?

단어	쉬운 설명
정보 묶음	관련된 여러 정보들을 하나로 묶어놓은 것이에요. 마치 앨범에 추억들을 모아두는 것처럼요.
속성	정보 묶음 안에 있는 각각의 정보 항목이에요. 앨범의 각 페이지와 같아요.
이름표	속성의 이름을 말해요. 앨범 페이지에 적힌 날짜나 제목과 같아요.
값	속성에 실제로 저장된 데이터예요. 페이지에 담긴 실제 사진이나 글과 같아요.
for...in 문	정보 묶음의 모든 속성을 하나씩 꺼내서 반복하는 방법이에요.

✨ 핵심 개념 이해하기

for...in문을 이해하려면, 먼저 정보 묶음이라는 개념을 가볍게 만나보면 좋겠어요. 정보 묶음은 여러 가지 관련된 정보를 하나의 공간에 정리해둔 것입니다.

for...in문은 이런 정보 묶음 안의 모든 속성을 하나씩 꺼내어 살펴보고 싶을 때 사용하는 반복문이에요. 지금까지 배운 for문이 1, 2, 3... 이렇게 숫자를 세며 반복했다면, for...in문은 속성의 이름을 하나씩 가져와서 반복합니다.

일상 속의 비유: 일기장 페이지 넘기기

for...in문을 더 친근하게 느껴보기 위해 일기장 읽기에 비유해볼게요.

상상해보세요. 여러분의 책상 위에 소중한 일기장이 하나 놓여 있어요. 그 일기장에는 날짜별로 여러분의 하루가 기록되어 있죠. 각 페이지에는 "오늘의 기분, 한 일, 느낀 점" 등이 적혀 있을 거예요.

만약 이 일기장을 차근차근 읽어보고 싶다면, 첫 페이지부터 마지막 페이지까지 하나씩 넘겨가며 읽겠죠?

for...in문도 이와 똑같은 방식으로 작동해요. 정보 묶음이라는 일기장에서 모든 페이지를 하나씩 넘겨가며 그 안의 내용을 확인할 수 있게 해주는 거예요.

🎯 언제 사용할까요?

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

• 정보 묶음의 모든 속성을 확인하고 싶을 때
• 속성이 몇 개인지 미리 알 수 없을 때
• 정보 묶음의 내용을 차례로 살펴보고 싶을 때

⚙️ 문법 구조 살펴보기

for...in문의 기본 구조는 생각보다 간결하고 아름다워요.

// 먼저 간단한 정보 묶음을 만들어요
let 정보묶음 = {
    이름: "철수",
    나이: 10,
    학년: 4
};

// for...in으로 모든 속성을 하나씩 반복해요
for(let 속성명 in 정보묶음) {
    // 속성명에는 속성 이름이 들어와요
    // 정보묶음[속성명]으로 속성 값을 가져올 수 있어요
    console.log(속성명 + ": " + 정보묶음[속성명]);
}

알아두면 좋은 특징들:

• 반복 대상: 정보 묶음의 속성 이름들
• 반복 변수: 각 속성의 이름이 차례로 들어와요
• 값 접근 방법: 정보묶음[속성명] 방식으로 사용해요

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 for...in문의 작동 원리를 차근차근 살펴보겠어요.

🔹 첫 번째 예시: 학생 정보 모두 출력하기

// 철수라는 학생의 정보를 담은 정보 묶음 만들기
let student = {
    name: "김철수",
    age: 10,
    grade: 4,
    class: 3
};

console.log("=== 철수의 학생 정보 ===");

// for...in으로 모든 정보를 하나씩 출력하기
for(let info in student) {
    let value = student[info];
    console.log(info + ": " + value);
}

console.log("정보 출력 완료!");
// 결과: name: 김철수, age: 10, grade: 4, class: 3

🔹 두 번째 예시: 과일 가격에서 비싼 과일 찾기

// 과일 가게의 가격표를 정보 묶음으로 만들기
let fruitPrices = {
    apple: 1000,
    banana: 500,
    orange: 1500,
    grape: 2000
};

console.log("=== 과일 가격 분석 (1000원 기준) ===");

// 모든 과일을 하나씩 확인해보기
for(let fruit in fruitPrices) {
    let price = fruitPrices[fruit];

    if(price >= 1000) {
        console.log(fruit + "는 비싸요! " + price + "원");
    } else {
        console.log(fruit + "는 저렴해요! " + price + "원");
    }
}

console.log("가격 분석 완료!");

🔹 세 번째 예시: 용돈 정보 분석하기

// 월별 용돈 기록을 정보 묶음으로 만들기
let monthlyAllowance = {
    january: 10000,
    february: 15000,
    march: 12000,
    april: 8000
};

let totalAmount = 0;
let monthCount = 0;

console.log("=== 용돈 정보 분석 시작 ===");

// 모든 월의 용돈을 하나씩 확인
for(let month in monthlyAllowance) {
    let amount = monthlyAllowance[month];

    console.log(month + "월: " + amount + "원");
    totalAmount += amount;
    monthCount++;
}

console.log("--- 분석 결과 ---");
console.log("총 " + monthCount + "개월");
console.log("총 용돈: " + totalAmount + "원");
console.log("평균 용돈: " + (totalAmount / monthCount) + "원");

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

코딩을 배우다 보면 누구나 실수를 하게 되어요. 이런 작은 실수들을 미리 알아두면, 여러분의 코딩 여행이 더 순탄해질 거예요.

❌ 실수 1: 속성값이 아닌 속성명만 출력하는 실수

// ❌ 잘못된 예시
for(let key in obj) { 
    console.log(key); // 속성 이름만 나와요
}

// ✅ 올바른 예시
for(let key in obj) { 
    console.log(obj[key]); // 속성 값이 나와요
}

❌ 실수 2: 점 표기법을 잘못 사용하는 실수

// ❌ 잘못된 예시
for(let key in obj) { 
    console.log(obj.key); // undefined가 나와요
}

// ✅ 올바른 예시
for(let key in obj) { 
    console.log(obj[key]); // 대괄호를 사용해야 해요
}

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

코딩은 머리로만 이해하는 것이 아니라, 손끝에서 피어나는 것이기도 해요. 이 순간, 여러분의 손끝으로 직접 느껴보세요.

Ex1) 게임 캐릭터 정보 출력하기

// 게임 캐릭터 정보 묶음을 만들어요
let character = {
    name: "용사",
    level: 5,
    hp: 100,
    mp: 50
};

// for...in으로 모든 능력치를 출력해보자
for(let stat in character) {
    console.log(stat + ": " + character[stat]);
}
// 결과: name: 용사, level: 5, hp: 100, mp: 50

Ex2) 좋은 점수만 출력하기

// 각 과목별 점수 정보 묶음을 만들어요
let scores = {
    math: 90,
    korean: 75,
    english: 85,
    science: 95
};

// 80점 이상인 과목만 출력해보자
for(let subject in scores) {
    if(scores[subject] >= 80) {
        console.log(subject + ": " + scores[subject] + "점 (잘했어요!)");
    }
}
// 결과: math: 90점 (잘했어요!), english: 85점 (잘했어요!), science: 95점 (잘했어요!)

Ex3) 속성 개수 세기

// 색깔 정보 묶음을 만들어요
let colors = {
    red: "빨강",
    blue: "파랑",
    green: "초록"
};

// 색깔이 몇 개 있는지 세어보자
let count = 0;
for(let color in colors) {
    count++;
}
console.log("색깔 개수: " + count + "개");
// 결과: 색깔 개수: 3개

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

학습은 마치 실타래를 엮어가는 것과 같아요. 새로운 것을 배울 때마다 지난 것들과 연결되면서 더 단단한 지식이 되어가죠.

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

문제: while문과 do...while문의 가장 큰 차이점을 설명해보세요!

정답과 설명:

• while문: 실행 전에 조건 확인 → 거짓이면 0번 실행
• do...while문: 실행 후에 조건 확인 → 거짓이어도 1번은 실행

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

문제: for문과 for...in문의 차이점을 설명해보세요!

정답과 설명:

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

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

---

지금까지 for...in문의 기본 개념과 활용법을 함께 살펴보았어요. for...in문은 정보 묶음의 속성을 하나씩 꺼내면서 반복하는 특별한 반복문입니다.

기억해두면 좋을 가장 중요한 포인트는 반복 변수에 속성 이름이 들어온다는 것과, 속성 값을 얻으려면 대괄호 표기법을 사용해야 한다는 것이에요.

참고: 정보 묶음(객체)에 대한 더 자세한 내용은 8단원에서 만나게 될 거예요. 지금은 for...in문 사용법에 집중해서 연습해보시면 됩니다!

다음 시간에는 또 다른 흥미로운 반복문을 배워볼 예정이에요. 여러분의 코딩 실력이 하루하루 자라나는 모습을 보며 저도 함께 기뻐하고 있어요! 계속 함께해주세요! ✨

✅ 학습 완료 체크리스트

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

학습 내용	이해했나요?
for...in문의 기본 개념	✅
기본 사용법과 문법	✅
정보 묶음과 속성의 관계	✅
자주 하는 실수들	✅
실전 예제 이해	✅

📂 마무리 정보

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

기억할 점: 정보 묶음(객체)에 대한 더 자세한 설명은 8단원에서 배울 예정이니, 지금은 for...in 사용법에 집중해서 연습해보세요!

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

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

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

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

💻 무료로 학습하러 가기

---