JavaScript - For...in Loop: A Beginner's Guide

안녕하세요, 꿈을 가진 프로그래머 여러분! 오늘 우리는 JavaScript의 유용한 도구 중 하나인 for...in 루프에 대해 배울 거예요. 코드를 작성한 적이 없어도 걱정 마세요 - 단계별로 안내해드릴 테니까요. 수년 동안 수많은 학생들에게 가르쳐온 경험을 바탕으로 말이죠. 그럼 커피 한 잔을 마시며(또는 차를 좋아하신 분들은 차를) 챙겨오시고, 시작해보겠습니다!

for...in 루프는 무엇인가요?

구체적인 내용으로 들어가기 전에 for...in 루프가 무엇인지 이해해보겠습니다. 대형 상자 안에 많은 장난감이 가득 차 있다고 상상해보세요(이 상자를 JavaScript에서는 "객체"라고 부릅니다). for...in 루프는 마법의 손처럼 상자 안으로 손을 뻗어 하나씩 장난감을 꺼내주는 역할을 합니다. 이를 통해 각 장난감을 개별적으로 살펴볼 수 있습니다.

프로그래밍 용어로는, for...in 루프는 객체의 속성을 반복적으로 순회할 수 있게 해줍니다. 객체에 저장된 각 데이터 조각을 하나씩 검토할 수 있는 방법입니다.

for...in 루프의 문법

이제 for...in 루프를 어떻게 작성하는지 살펴보겠습니다. 처음에는 이상하게 보일 수 있지만, 함께 설명해보겠습니다!

for (let key in object) {
// 실행할 코드
}

이를 하나씩 해부해보겠습니다:

• for: 이 키워드는 JavaScript에게 우리가 루프를 시작하고 있다고 알립니다.
• let key: 이는 각 속성의 이름을 저장할 변수를 생성합니다(여기서는 key라고 부릅니다).
• in: 이 키워드는 변수 이름과 순회할 객체를 구분합니다.
• object: 이는 검토하고자 하는 객체입니다.
• 중괄호 {}는 각 속성에 대해 실행될 코드를 포함합니다.

for...in 루프의 활용 사례

사례 1: 간단한 객체 탐색

먼저 간단한 예제로 시작해보겠습니다. 책을 나타내는 객체를 상상해보세요:

let book = {
title: "The Great Gatsby",
author: "F. Scott Fitzgerald",
year: 1925
};

for (let property in book) {
console.log(property + ": " + book[property]);
}

이 코드를 실행하면 콘솔에 다음과 같은 내용이 나타납니다:

title: The Great Gatsby
author: F. Scott Fitzgerald
year: 1925

여기서 무슨 일이 일어나고 있을까요? 우리의 for...in 루프는 book 객체의 각 속성을 순회하고 있습니다. 각 반복에서:

• property는 현재 속성의 이름을 가집니다("title", "author", 또는 "year").
• book[property]은 해당 속성의 값을 가져줍니다.
• console.log()를 사용하여 속성 이름과 그 값을 출력합니다.

사례 2: 속성 개수 계산

객체에 얼마나 많은 속성이 있는지 계산하고 싶다면 어떻게 할까요:

let car = {
make: "Toyota",
model: "Corolla",
year: 2020,
color: "blue"
};

let propertyCount = 0;

for (let prop in car) {
propertyCount++;
}

console.log("The car object has " + propertyCount + " properties.");

이 outputs: "The car object has 4 properties."

이 예제에서는 for...in 루프를 사용하여 car 객체의 각 속성을 순회하고 있습니다. 속성 자체에 대해 아무 것도 하지 않고, 루프가 실행될 때마다 카운터를 증가시키는 것입니다. 이를 통해 객체의 속성 수를 쉽게 계산할 수 있습니다.

사례 3: 속성 필터링

occasionally, you might want to do something only with certain properties. Let's look at an example:

let person = {
name: "Alice",
age: 30,
city: "New York",
job: "Engineer",
hobby: "painting"
};

console.log("Properties that start with 'j':");
for (let prop in person) {
if (prop.startsWith('j')) {
console.log(prop + ": " + person[prop]);
}
}

이 outputs:

Properties that start with 'j':
job: Engineer

이 예제에서는 for...in 루프를 사용하여 person 객체의 모든 속성을 순회하지만, 'j'로 시작하는 속성만 출력합니다. startsWith() 메서드를 사용하여 이 조건을 확인합니다.

for...in 루프와 함께 사용하는 일반 메서드

다음은 for...in 루프와 함께 사용할 수 있는 일반 메서드 표입니다:

메서드	설명	예제
hasOwnProperty()	속성이 객체에 직접 존재하는지 확인	if (object.hasOwnProperty(property))
Object.keys()	객체의 자신의 가수열할 수 있는 속성 이름을 반환	Object.keys(object)
Object.values()	객체의 자신의 가수열할 수 있는 속성 값을 반환	Object.values(object)
Object.entries()	객체의 자신의 가수열할 수 있는 문자열 키를 가진 속성 [key, value] 쌍을 반환	Object.entries(object)

결론

이제 for...in 루프의 세계로 첫 걸음을 뗐습니다. 기억해야 할 점은, 자전거 타기와 마찬가지로 프로그래밍은 연습이 필요합니다. 바로 이해가 되지 않는다면 낙담하지 마세요 - 계속 다양한 객체를 만들어 for...in 루프를 실험해보세요. 좋아하는 영화나 책을 나타내는 객체를 만들어보고, 그것으로 무엇을 할 수 있는지 보세요.

기쁜 코딩을 하시고, 기억하세요 - 모든 전문가는 초보자였습니다. 꾸준히 하시면 곧 프로처럼 객체를 순회할 수 있을 것입니다!

Credits: Image by storyset