[JavaScript] for of 반복문을 사용한 Map, Set 등의 객체 반복하기

ES6부터 새롭게 생겨난 반복문 for...of 에 대해 알아보고자 한다.

for...of 문은 반복가능한 객체(Array, Map, Set, String, TypedArray, arguments 객체 등)를 반복하는 문법이다.

 

▷ 구문

for (variable of iterable) {
    statement
}

variable: 각 반복에 서로 다른 속성값이 variable에 할당된다.

iterable : 반복되는 열거가능(enumerable)한 속성이 있는 객체.

 

예제를 통해 쉽게 접해보자.

---

▷ 예제1) Array에 대한 반복

let arr = [1, 2, 3];

for (let value of arr) {
  console.log(value); //1, 2, 3
}

 

▷ 예제2) String에 대한 반복

let str = 'mine';

for (let value of str) {
  console.log(value); //m, i, n, e
}

 

▷ 예제3) TypedArray에 대한 반복

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value); // 0 , 255
}

 

▷ 예제4) Map에 대한 반복

let animals = new Map();
animals.set("dog", "woof")
       .set("cat", "meow")
       .set("elephant", "toot");

for (let name of animals.keys()) {
    console.log(name); // dog, cat, elephant
}

for (let howling of animals.values()) {
    console.log(howling); //woof, meow, toot
}

for (let [key, value] of animals) {// animals는 animals.entries()와 동일
    console.log(`${key} goes ${value}`);
    // dog goes woof , cat goes meow, elephant goes toot
}

 

▷ 예제5) Set에 대한 반복

let mineSet = new Set([0, 1, 2, 3]);

for (let key of mineSet.keys()) {
    console.log(key); // 0, 1, 2, 3
}

for (let value of mineSet.values()) {
    console.log(value); // 0, 1, 2, 3
}

for (let data of mineSet) {// mineSet mineSet.entries()와 동일
    console.log(data); // 0, 1, 2, 3
}

---

참고 : https://mine-it-record.tistory.com/473

[ES6] Map(), Set() 객체의 특징과 사용법

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of

for...of - JavaScript | MDN