자바스크립트 반복문 for/of, for/in

for/of

for/of은 ES6에서 정의되었다.

for/of은 iterable 객체에서 동작한다. 이러한 객체에는 배열, 문자열, 집합, 맵 등이 있다.

let data = [1, 2, 3, 4], sum = 0;
for (let element of data) {
    sum += element;
}

 

object는 기본적으로 iterable이 아니므로 for/of을 사용하면 runtime에 TypeError가 난다. Object.keys() 메소드를 이용해 해결할 수 있다.

let o = { x: 1, y: 2 };
for (let element of o) { // Throws TypeError
    console.log(element);
}

// ***
let o = { x: 1, y: 2 };
for (let k of Object.keys(o)) {
    console.log(k); // x, y
}

// object의 value는 아래처럼 사용
let o = { x: 1, y: 2 };
for (let v of Object.values(o)) {
    console.log(v); // 1, 2
}

for (let [k, v] of Object.entries(o)) {
    console.log(k, v); // x, 1, y, 2
}

 

Object.entries()는 array of arrays를 반환한다. 각각의 내부 array는 object의 하나의 property의 key/value 쌍을 나타내므로, 위 처럼 destructuring 할 수 있다.

// String도 ES6부터 문자별로 iterable하다.
let frequency = {};
for (let letter of "mississippi") {
    if (frequency[letter]) {
        frequency[letter]++;
    } else {
        frequency[letter] = 1;
    }
}
// frequency => {m: 1, i: 4, s: 4, p: 2}

 

// ES6에서 built-in Set과 Map은 iterable이다.

let text = "Na na na na";
let wordSet = new Set(text.split(" "));
let unique = [];
for (let word of wordSet) {
    unique.push(word);
}
// unique => ["Na", "na"]

let m = new Map([[1, "one"]]);
for (let [key, value] of m) {
    key // 1
    value // "one"
}

 

Map 객체의 iterator는 key/value 쌍에 대해 정의된다. 각 반복마다 배열이 반환되며, 첫째 원소는 key, 둘째 원소는 value를 나타낸다.

 

ES2018부터 asynchronous iterator를 도입했다. 

async function printStream(stream) {
    for await (let chunk of stream) {
        console.log(chunk);
    }
}

 

for/in

for/in은 자바스크립트 초창기부터 있었다. of 뒤에는 iterable object가 필요하지만, in 뒤에는 어떤 object이 와도 된다.

for (let p in o) { // 객체 o의 property name을 변수 p에 할당
    console.log(o[p]); // 각 property의 value를 출력
}