[자바스크립트] ES6(ECMA Script 6) - for ... of 문

for ... of 문

---

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

1. 문법

for (variable of iterable) {
    statement
}

variable

각 반복에 서로 다른 속성값이 variable에 저장됩니다.

iterable

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

2. 예시

Array 반복

let iterable = [10, 20, 30];

for (let value of iterable) {
    console.log(value);
}

for (let ... of array ...)

상수를 사용해야 할 경우 let 대신 const를 사용할 수 있습니다.

let iterable = [10, 20, 30];

for (const value of iterable) {
    console.log(value);
}

for (const ... of array ...)

String 반복

let iterable = "boo";

for (let value of iterable) {
    console.log(value);
}

for (... of array ...)

TypeArray(ES6에서 추가된 객체) 반복

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

for (let value of iterable) {
    console.log(value);
}

for (... of TypeArray ...)

Map(ES6에서 추가된 객체) 반복

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
    console.log(entry);
}

for (... of Map ...)

구조분해를 이용할 수도 있습니다. ([자바스크립트] ES6(ECMA Script 6) - 구조분해 할당(Destructuring assignment) 참고)

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let [key, value] of iterable) {
    console.log(key, value);
}

for (Destructuring ... of Map ...)

Set(ES6에서 추가된 객체) 반복

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

for (let value of iterable) {
    console.log(value);
}

for (... of Set ...)

arguments 반복

(function() {
    for (let argument of arguments) {
        console.log(argument);
    }
})(1,2,3);

for (... of arguments)

즉시실행함수로 1, 2, 3을 매개변수로 넘겨 for문을 실행한 예제입니다.

([자바스크립트] 함수(Function), 즉시실행함수(Immediately-invoked function expression) 참고)

DOM collection 반복

let pre = document.querySelectorAll("pre");

for (let item of pre) {
    console.log(item);
}

for (... of DOM collection)

generators(ES6에서 추가된 객체) 반복

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

for (let n of fibonacci()) {
    console.log(n);
    // truncate the sequence at 1000
    if (n >= 1000) {
        break;
    }
}

for (... of DOM generators)

for문이 종료 되면 generator가 close되어, generators 재사용이 불가능합니다.

var gen = (function *(){
    yield 1;
    yield 2;
    yield 3;
})();
for (let o of gen) {
    console.log(o);
    break;  // Closes iterator
}

// The generator should not be re-used, the following does not make sense!
for (let o of gen) {
    console.log(o); // Never called.
}

generator 재사용 불가능

사용자 정의 iterable(ES6에서 추가) 객체 반복

var iterable = {
    [Symbol.iterator]() {
        return {
            i: 0,
            next() {
                if (this.i < 3) {
                    return { value: this.i++, done: false };
                }
                return { value: undefined, done: true };
            }
        };
    }
};

for (var value of iterable) {
    console.log(value);
}

for (... of DOM user iterable object)

3. for ... in과 for ... of 차이

for ... in 문은 객체의 모든 열거 가능한 속성을 반복합니다.

for ... of 문은 모든 객체가 아닌 컬랙션만 반복합니다. [Symbol.iterator] 속성이 있는 컬렉션의 프로퍼티를 반복합니다.

for ... in

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
    console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for ... in 문

for ... in 문은 추가한 프로퍼티 모두 포함하여 반복하는 것을 확인 할 수 있습니다.

for

for문을 사용하는 경우, 추가한 프로퍼티를 반복하기 위해서 보다는 리스트의 값들을 가져오기 위해서 사용하는 경우가 많을 것입니다.

for ... in 문에서 추가한 프로퍼티를 포함해서 루프를 돌기 때문에 프로퍼티를 출력하지 않기 위해서는 위의 for ... in 문을 아래와 같이 작성해야 합니다.

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i = 0; i < iterable.length; i++) {
    console.log(iterable[i]); // 3, 5, 7
}

보통의 for문

for ... of

위의 for문의 코드를 for ... of 문으로 표현 할 수 있습니다.

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i of iterable) {
    console.log(i); // logs 3, 5, 7
}

for ... of 문