자바스크립트 for...of, 반복문이 이렇게 쉬워졌다고요? 🤩

오늘은 자바스크립트에서 반복 작업을 아주 편리하게 만들어주는 for...of 문법에 대해 알아볼게요! 😊

이 친구는 주로 배열이나 문자열, 맵(Map), 셋(Set)처럼 순서대로 하나씩 값을 꺼낼 수 있는 특별한 객체들, 바로 이터러블(iterable) 객체를 순회할 때 사용해요. 코드가 훨씬 깔끔해지고 이해하기 쉬워진답니다!

1. 기본 사용법부터 알아볼까요? (배열 예시)

for...of 문법은 이터러블 객체 안의 값(value)들을 하나씩 꺼내서 작업을 수행하게 해줘요. 가장 기본적인 배열 예시부터 볼게요.

let numbers = [10, 20, 30, 40, 50];

for (let number of numbers) {
  // numbers 배열 안의 값을 'number'라는 변수에 하나씩 담아줘요!
  console.log(number); // 10, 20, 30, 40, 50 이 순서대로 출력돼요.
}

기존의 for 루프처럼 인덱스(i)를 쓸 필요 없이, 배열 안의 실제 값을 바로바로 꺼내 쓸 수 있어서 정말 편해요! 👍

2. 문자열도 하나씩 꺼내볼 수 있어요!

놀랍게도 문자열(string) 역시 이터러블 객체예요! 그래서 for...of를 사용하면 문자열 안의 글자들을 한 자 한 자 순서대로 꺼내볼 수 있답니다.

let myString = "안녕하세요";

for (let char of myString) {
  // myString 안의 글자를 'char' 변수에 하나씩 담아요.
  console.log(char); // '안', '녕', '하', '세', '요' 가 순서대로 출력돼요.
}

정말 간편하죠? 😉

3. 맵(Map)과 셋(Set)도 문제 없어요!

맵(Map)과 셋(Set) 객체도 당연히 for...of 문법으로 순회할 수 있어요.

맵 (Map) 예시

맵은 키(key)와 값(value) 쌍으로 이루어져 있죠? for...of와 배열 구조 분해 할당을 함께 쓰면 키와 값을 아주 쉽게 꺼낼 수 있어요.

let myMap = new Map();
myMap.set('a', 1); // 키 'a'에 값 1 저장
myMap.set('b', 2); // 키 'b'에 값 2 저장
myMap.set('c', 3); // 키 'c'에 값 3 저장

for (let [key, value] of myMap) {
  // [key, value] 형태로 키와 값을 바로 받아요!
  console.log(`키는 ${key}, 값은 ${value}`);
  // 출력 예시
  // 키는 a, 값은 1
  // 키는 b, 값은 2
  // 키는 c, 값은 3
}

셋 (Set) 예시

셋은 중복되지 않는 값들의 모음이죠? for...of를 쓰면 셋 안의 값들을 순서대로 꺼내볼 수 있어요.

let mySet = new Set([1, 2, 2, 3, 4, 4, 5]); // 중복된 값은 알아서 제거돼요.

console.log(mySet); // Set(5) { 1, 2, 3, 4, 5 }

for (let value of mySet) {
  // mySet 안의 값을 'value' 변수에 하나씩 담아요.
  console.log(value); // 1, 2, 3, 4, 5 가 순서대로 출력돼요.
}

✨ 마무리하며

for...of 문법은 자바스크립트에서 반복 가능한 객체들을 정말 쉽고 편리하게 순회할 수 있는 방법을 제공해줘요. 배열, 문자열, 맵, 셋 등 다양한 친구들과 함께 쓸 수 있고, 코드를 훨씬 간결하고 읽기 쉽게 만들어 준답니다.

예전의 for (let i = 0; ...) 루프나 forEach 메서드보다 값을 직접 다루는 데 있어서 더 직관적이고 편할 때가 많으니, 앞으로 자주 활용해보세요! 😊