모던 자바스크립트

for .. of

for .. of 문(statement)은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.

영상 강의

PART 1

예제

배열 순환

const iterable = [9, 19, 109];

for (let item of iterable) {
  console.log(item);
  // 9
  // 19
  // 109
}

for (let [index, item] of iterable.entries()) {
  console.log(index, item);
  // 0, 9
  // 1. 19
  // 2. 109
}

문자 순환

const iterable = 'yamoo9';

for (let char of iterable) {
  console.log(char);
  // 'y'
  // 'a'
  // 'm'
  // 'o'
  // 'o'
  // '9'
}

Set 순환

const iterable = new Set([9, 19, 109, 19, 9]);

for (let number of iterable) {
  console.log(number);
  // 9
  // 19
  // 109
}

Map 순환

const iterable = new Map([['name', 'yamoo9'], ['job', '강사']]);

for (let info of iterable) {
  console.log(info);
  // ['name', 'yamoo9']
  // ['job', '강사']
}

for (let [key, value] of iterable) {
  console.log(`key => ${key}`);
  console.log(`value => ${value}`);
  // key => name
  // value => yamoo9
  // key => job
  // value => 강사
}

NodeList 순환

const buttons = document.querySelectorAll('button');

for (let button of [...buttons]) {
  button.classList.add('button');
}

Generator 순환

function* fibonacci() {
  let [prev, curr] = [1, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  if (n >= 1000) { break; }
}

for..in문과 for..of문의 차이점

아래 예시를 통해 차이점을 확인합니다.

// Object, Array 프로토타입 확장
Object.prototype.addCustom = function () {};
Array.prototype.createCustom = function () {};

// 배열 객체를 정의하고, 임의의 속성을 추가
let iterable = ['스트레칭', '다이어트'];
iterable.interval = '항상';

// for..in문 순환
for (let key in iterable) {
  let value = iterable[key];
  console.log(value);
  // '스트레칭'
  // '다이어트'
  // '항상'
  // function () {}
  // function () {}
}

for (let value of iterable) {
  console.log(value);
  // '스트레칭'
  // '다이어트'
}

참고

← Iterantion →