본문 바로가기
Language/JavaScript (Modern)

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

by 썸머워즈 2022. 1. 14.
반응형

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() 객체의 특징과 사용법

ES6에서 새롭게 등장한 자료구조인 맵(Map) 과 셋(Set) 객체에 대해 알아보자. 1. 맵(Map) - 맵(Map)은 키가 있는 데이터를 저장한다는 점에서 객체(obj)와 유사하다. - 객체는 키값으로 문자열만 사용 가

mine-it-record.tistory.com

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

 

for...of - JavaScript | MDN

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

developer.mozilla.org

반응형


댓글

TOP