JavaScript - For...of Loop

안녕하세요, 프로그래밍에 도전하는 여러분! 오늘 우리는 JavaScript의 가장 유용한 기능 중 하나인 for...of 루프에 대해 깊이 다룰 예정입니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 이 여정을 안내해 드리게 되어 기쁩니다. 그러니 여러분의 좋아하는 음료를 손에 쥐고 편안하게 앉아, 함께 코딩 모험을 떠나보겠습니다!

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

자, 구체적인 내용에 들어가기 전에 for...of 루프가 무엇인지 이해해 보겠습니다. 상상해 보세요. 당신 앞에 무지개색 과일이 가득 담긴 바구니가 있습니다. 그리고 당신은 하나씩 과일을 조사하고 싶습니다. for...of 루프는 바구니에서 하나씩 과일을 꺼내어 당신에게 전해주는 도움말자 역할을 합니다. 바구니가 비어질 때까지 계속합니다.

프로그래밍 용어로는, for...of 루프는 배열, 문자열, 그리고 나중에 배울 다른 데이터 구조와 같은 이터러블 객체를 순회할 수 있게 해줍니다.

문법

이제 for...of 루프를 어떻게 작성하는지 살펴보겠습니다. 처음에는 이상하게 보일 수도 있지만, 함께 설명해 나갈 테니 걱정 마세요!

for (variable of iterable) {
// 실행할 코드
}

이를 구성하는 요소를 하나씩 설명해 보겠습니다:

• for: 이 키워드는 JavaScript에게 우리가 루프를 시작하고 있음을 알립니다.
• variable: 이는 이터러블을 순회할 때 각 항목을 저장할 변수입니다.
• of: 이 키워드가 for...of 루프를 만듭니다.
• iterable: 이는 순회할 객체입니다. 예를 들어 과일 바구니와 같습니다.
• 중괄호 {} 안의 코드는 각 항목에 대해 수행하고 싶은 작업입니다.

예제

예제 1: 배열을 순회하는 방법

간단한 예제부터 시작해 보겠습니다. 과일 배열을 만들어 각 과일을 출력해 보겠습니다.

let fruits = ['apple', 'banana', 'cherry', 'date'];

for (let fruit of fruits) {
console.log(fruit);
}

이 코드를 실행하면 다음과 같은 출력을 보게 됩니다:

apple
banana
cherry
date

여기서 무슨 일이 일어나고 있나요? 우리의 for...of 루프는 fruits 배열에서 각 과일을 꺼내 fruit 변수에 저장합니다. 그런 다음 console.log()를 사용하여 각 과일을 출력합니다.

예제 2: 문자열을 순회하는 방법

알고 계신가요? 문자열도 이터러블입니다. 단어를 쓰는 예제를 보겠습니다:

let word = 'Hello';

for (let letter of word) {
console.log(letter);
}

이는 다음과 같은 출력을 생성합니다:

H
e
l
l
o

문자열의 각 문자는 개별 항목으로 처리되어 순회할 수 있습니다. 멋지지 않나요?

예제 3: 숫자를 사용하여 for...of 루프

이제 실용적인 예제로 넘어가 보겠습니다. 교사로서 (나와 같이) 반 평균 점수를 계산하고 싶다면 어떻게 할까요?

let scores = [85, 92, 78, 95, 88];
let total = 0;
let count = 0;

for (let score of scores) {
total += score;
count++;
}

let average = total / count;
console.log(`The class average is ${average}`);

이 스크립트는 평균 점수를 계산하고 출력합니다. 우리는 for...of 루프를 사용하여 모든 점수를 더하고 몇 개의 점수가 있는지 계산합니다.

예제 4: 루프에서 빠져나가는 방법

occasionally, you might want to stop the loop before it finishes. We can do this with the break keyword. Let's say we're looking for a specific fruit:

let fruits = ['apple', 'banana', 'cherry', 'date'];
let searchFor = 'cherry';

for (let fruit of fruits) {
if (fruit === searchFor) {
console.log(`Found ${searchFor}!`);
break;
}
console.log(`Checking ${fruit}...`);
}

이 스크립트는 'cherry'를 찾으면 즉시 중지됩니다. 나머지 과일을 확인하지 않습니다.

예제 5: 항목을 건너뛰는 방법

그런데 특정 항목을 건너뛰고 싶다면 어떻게 하나요? continue 키워드를 사용할 수 있습니다. 'a'로 시작하는 과일만 출력하는 예제를 보겠습니다:

let fruits = ['apple', 'banana', 'apricot', 'cherry', 'avocado'];

for (let fruit of fruits) {
if (!fruit.startsWith('a')) {
continue;
}
console.log(fruit);
}

이는 'apple', 'apricot', 그리고 'avocado'만 출력합니다.

메서드 표

다음은 우리 예제에서 사용한 메서드의 간단한 표입니다:

메서드	설명	예제
console.log()	콘솔에 출력합니다	console.log('Hello, World!')
startsWith()	문자열이 지정된 문자로 시작하는지 확인합니다	'apple'.startsWith('a') // true
break	루프를 종료합니다	if (condition) break;
continue	루프의 다음 반복으로 건너뛰습니다	if (condition) continue;

결론

이제 여러분은 for...of 루프의 세계를 여행했습니다. 간단한 배열에서 문자열, 그리고 중간에 나가거나 건너뛰는 방법까지 배웠습니다. 연습이 완벽을 만드는 것을 기억하시기 바랍니다. 그러니 이 개념들을 실험해 보세요.

제 경험에 따르면, 실제로 만들어 보는 것이 가장 중요합니다. 그러니 작은 과제를 드리겠습니다: 다양한 데이터 유형으로 자신의 for...of 루프를 만들어 보세요. 좋아하는 영화나 친구들의 이름을 순회해 보세요. 가능성은 무한합니다!

행복하게 코딩하시고, 기억하세요 - 프로그래밍의 세계에서 각 루프는 발견의 기회입니다!

Credits: Image by storyset