JavaScript - The Iterables Object

안녕하세요, 꿈나이 프로그래머 여러분! 오늘 우리는 자바스크립트의 이터러블 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 이 모험을 단계별로 안내해 드리겠습니다. 그러니 가상의 등을 챙기고, 시작해 보세요!

이터러블이란?

먼저, 이터러블이 무엇인지 이해해 보겠습니다. 자바스크립트에서 이터러블은 "반복할 수 있는" 객체입니다. 더 간단하게 말하면, 하나씩 거쳐갈 수 있는 항목의 모음입니다. 보석이 가득 찬 보물 상자를 하나씩 탐색하는 것을 생각해 보세요.

자바스크립트에서 흔한 이터러블의 예로는 배열, 문자열, 맵이 있습니다. 이들은 각각 고유한 특성을 가진 다른 종류의 보물 상자입니다.

for...of 루프를 사용하여 반복

이제 이 보물 상자들을 탐색하는 첫 번째 방법을 배워보겠습니다: for...of 루프. 이는 보물 상자의 각 칸을 하나씩 열 수 있는 마법의 열쇠 같은 것입니다.

예제 1: 배열을 반복

const fruits = ['apple', 'banana', 'orange'];

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

이 예제에서, 우리는 과일의 배열(보물 상자)을 가지고 있습니다. for...of 루프는 각 과일을 하나씩 거쳐갑니다. 이 코드를 실행하면 다음과 같은 출력을 보게 됩니다:

apple
banana
orange

보물 상자에서 각 과일을 꺼내고 감상하는 것과 같습니다!

예제 2: 문자열을 반복

문자열도 이터러블입니다. 그럼 이를 어떻게 탐색할 수 있는지 보겠습니다:

const message = "Hello";

for (const character of message) {
console.log(character);
}

이 코드는 다음과 같은 출력을 보여줍니다:

H
e
l
l
o

문자열의 각 문자는 작은 보물처럼 하나씩 검토됩니다.

forEach() 메서드를 사용하여 반복

이제 또 다른 탐색 방법을 배워보겠습니다: forEach() 메서드. 이는 보물 상자를 탐색할 때 도와주는 유용한 비서입니다.

예제 3: 배열에 대해 forEach() 사용

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
console.log(number * 2);
});

이 코드는 다음과 같은 출력을 보여줍니다:

2
4
6
8
10

여기서 비서( forEach() 메서드)는 각 숫자를 보여주는 것뿐만 아니라 두 배로 만들어줍니다!

예제 4: 셋에 대해 forEach() 사용

셋도 자바스크립트의 이터러블 유형 중 하나입니다. 그럼 forEach()를 어떻게 사용할 수 있는지 보겠습니다:

const uniqueColors = new Set(['red', 'blue', 'green']);

uniqueColors.forEach(function(color) {
console.log(`Color: ${color}`);
});

출력은 다음과 같습니다:

Color: red
Color: blue
Color: green

이제 비서는 우리에게 각 고유한 색상을 보여줍니다.

map() 메서드를 사용하여 반복

마지막으로, map() 메서드에 대해 배워보겠습니다. 이는 보물 상자를 탐색할 때 각 아이템을 변환할 수 있는 마법의 지팡이 같은 것입니다.

예제 5: 배열 요소 변환

const prices = [10, 20, 30, 40, 50];

const discountedPrices = prices.map(function(price) {
return price * 0.9;  // 10% 할인
});

console.log(discountedPrices);

출력은 다음과 같습니다:

[9, 18, 27, 36, 45]

이제 마법의 지팡이( map() 메서드)는 각 가격에 10% 할인을 적용합니다.

예제 6: 기존 데이터에서 새로운 배열 만들기

const names = ['Alice', 'Bob', 'Charlie'];

const greetings = names.map(function(name) {
return `Hello, ${name}!`;
});

console.log(greetings);

출력은 다음과 같습니다:

['Hello, Alice!', 'Hello, Bob!', 'Hello, Charlie!']

마법의 지팡이는 각 이름을 친절한 인사로 변환합니다!

반복 메서드 요약

이제 배운 메서드를 요약하는 유용한 표를 제공하겠습니다:

메서드	설명	사용 사례
for...of	이터러블 객체를 반복	간단한 반복 시 값 필요 시
forEach()	배열의 각 요소에 대해 함수 실행	각 아이템에 대해 작업 수행 시
map()	새로운 배열로 변환	배열의 각 아이템 변환 시

기억하시라, 이러한 각 메서드는 프로그래밍 도구 상자에 있는 다른 도구입니다. 경험을 쌓아가면서, 각 메서드를 언제 사용할지 배울 것입니다.

결론적으로, 자바스크립트의 이터러블은 데이터 콜렉션을 효율적으로 처리할 수 있는 강력한 구조입니다. for...of 루프, forEach(), map() 중 어느 것을 사용하든, 이제 여러분은 진정한 프로그래밍 마법사로서 데이터를 탐색하고 조작할 수 있는 능력을 가지고 있습니다!

계속 연습하고, 곧 복잡한 코드 마법을 쉽게 부를 수 있을 것입니다. 행복한 코딩, 내 젊은 제자들!

Credits: Image by storyset