For 루프 문제

for 루프의 문제점과 for-of 루프를 사용할 가치가 있는 이유를 설명하기 전에 아래 코드를 살펴보겠습니다.

//I want to list all combinations of these three arrays
let colors = ["Red ", "Blue ", "Yellow "];
let cars = ["BMW ", "Audi ", "Fiat "];
let models = ["v1.", "v2.", "v3."];

let allOptionsForLoop = [];
let allOptionsForOfLoop = [];

//Let's use for loop to create allOptionsForLoop: 

for(let i=0; i<colors.length; i++) {
    for(let j=0; j<cars.length; j++) {
        for(let k=0; k<models.length; k++) {
            allOptionsForLoop.push(colors[i]+cars[j]+models[k]);
        }
    }
}

// And for-of loop to create allOptionsForOfLoop;

for(const color of colors) {
    for(const car of cars) {
        for(const model of models) {
            allOptionsForOfLoop.push(color+car+model)
        }
    }
}
console.log(allOptionsForLoop)
console.log("_________________________")
console.log(allOptionsForOfLoop)
console.log(JSON.stringify(allOptionsForLoop)===JSON.stringify(allOptionsForOfLoop))
// [
  'Red BMW v1.',     'Red BMW v2.',  
  'Red BMW v3.',     'Red Audi v1.', 
  'Red Audi v2.',    'Red Audi v3.', 
  'Red Fiat v1.',    'Red Fiat v2.', 
  'Red Fiat v3.',    'Blue BMW v1.', 
  'Blue BMW v2.',    'Blue BMW v3.', 
  'Blue Audi v1.',   'Blue Audi v2.',
  'Blue Audi v3.',   'Blue Fiat v1.',
  'Blue Fiat v2.',   'Blue Fiat v3.',
  'Yellow BMW v1.',  'Yellow BMW v2.',
  'Yellow BMW v3.',  'Yellow Audi v1.',
  'Yellow Audi v2.', 'Yellow Audi v3.',
  'Yellow Fiat v1.', 'Yellow Fiat v2.',
  'Yellow Fiat v3.'
]
_________________________
[
  'Red BMW v1.',     'Red BMW v2.',
  'Red BMW v3.',     'Red Audi v1.',
  'Red Audi v2.',    'Red Audi v3.',
  'Red Fiat v1.',    'Red Fiat v2.',
  'Red Fiat v3.',    'Blue BMW v1.',
  'Blue BMW v2.',    'Blue BMW v3.',
  'Blue Audi v1.',   'Blue Audi v2.',
  'Blue Audi v3.',   'Blue Fiat v1.',
  'Blue Fiat v2.',   'Blue Fiat v3.',
  'Yellow BMW v1.',  'Yellow BMW v2.',
  'Yellow BMW v3.',  'Yellow Audi v1.',
  'Yellow Audi v2.', 'Yellow Audi v3.',
  'Yellow Fiat v1.', 'Yellow Fiat v2.',
  'Yellow Fiat v3.'
]
true

차이점이 보이시나요?
for-of 루프를 사용하면 컬렉션 인덱스를 모니터링할 필요가 완전히 없어져 컬렉션 콘텐츠 작업에 집중할 수 있습니다.

그러나 for-of 루프는 주어진 컬렉션을 반복하는 방법을 어떻게 압니까?

반복자

for-of 루프의 작동 방식을 완전히 이해하기 전에 반복자를 이해해야 합니다. 반복자는 무엇입니까?

반복자는 반복하도록 설계된 다소 특이한 인터페이스를 가진 객체입니다. 반복자는 컬렉션에서 위치를 추적하는 내부 포인터와 결과 개체를 포함하는 next() 메서드를 포함합니다. 결과 객체에는 두 개의 값{value, done}이 있고, value에는 반복자의 반환 값이 포함되며, done은 주어진 값이 마지막으로 반환된 값인지true 아닌지false 알려줍니다.

이 정보를 기반으로 이러한 반복자를 직접 생성해 보겠습니다.

function myFirstIterator(itemsToIterate) {
    // i is an "iteration pointer"
    let i = 0;
    return {
        next: function() {
            //check if itemsToIterate[i] exists
            let done = i >= itemsToIterate.length;

            //if its done return undefined
            let value = !done ? itemsToIterate[i] : undefined;

            //ok we've got {done, value} so lets move forward
            i++;
            return {
                done,
                value
            }
        }
    }
}

let iterateMe = myFirstIterator(["Hello", "World", "!"]);

console.log("1. ", iterateMe.next()) // 1.  { done: false, value: 'Hello' }
console.log("2. ", iterateMe.next()) // 2.  { done: false, value: 'World' } 
console.log("3. ", iterateMe.next()) // 3.  { done: false, value: '!' }     
console.log("4. ", iterateMe.next()) // 4.  { done: true, value: undefined }
console.log("5. ", iterateMe.next()) // 5.  { done: true, value: undefined }

보시다시피 위에 설명된 규칙(ES6에 정의된 규칙)에 따라 동작하는 반복자를 만드는 것은 쉬운 일이 아닙니다. 다행히도 ES6이 구출되어 반복자 생성을 더 쉽게 해주는 생성기를 제공합니다. 어떻게?

발전기

간단히 말해서 제너레이터는 반복자를 반환하는 함수입니다. 아래 코드를 살펴보겠습니다.

// * placed in front of myFisrstGenerator makes this function a generator
function *myFirstGenerator() {
    //yield specifies the values that should be returned by the iterator when calling the next () method
    yield "Hello";
    yield "World";
    yield "!"
}

let iterateMe = myFirstGenerator()
console.log("1. ", iterateMe.next()) // 1.  { done: false, value: 'Hello' }
console.log("2. ", iterateMe.next()) // 2.  { done: false, value: 'World' } 
console.log("3. ", iterateMe.next()) // 3.  { done: false, value: '!' }     
console.log("4. ", iterateMe.next()) // 4.  { done: true, value: undefined }
console.log("5. ", iterateMe.next()) // 5.  { done: true, value: undefined }

각 yield 명령 후에 생성기는 생성기 함수 실행을 중지합니다. 이를 통해 반복자에 요소를 추가하는 생성기를 개발할 수 있습니다.

function *iterateMyArray(myArray) {
    for(let i=0; i<myArray.length; i++) {
        yield myArray[i]
    }
}
let iterateMe = iterateMyArray(["Hello", "World", "!"])
console.log("1. ", iterateMe.next()) // 1.  { done: false, value: 'Hello' }
console.log("2. ", iterateMe.next()) // 2.  { done: false, value: 'World' } 
console.log("3. ", iterateMe.next()) // 3.  { done: false, value: '!' }     
console.log("4. ", iterateMe.next()) // 4.  { done: true, value: undefined }
console.log("5. ", iterateMe.next()) // 5.  { done: true, value: undefined }

이제 생성기* iterateMyArray()를 처음부터 반복자와 비교합니다. ES5와 비교하여 제너레이터로 ES6 반복자를 작성하는 용이성의 차이는 엄청납니다.

제너레이터 팁과 트릭

생성기 만들기:

//✅✅✅
function* sampleGenerator() {}
//✅✅✅
function * sampleGenerator() {}
//✅✅✅
function *sampleGenerator() {}
//✅✅✅
function*sampleGenerator() {}

//✅✅✅
let sampleGenerator = function *() {}

//❌ ❌ ❌ 
let sampleGenerator =  *() => {}

yield를 사용할 때 주의하세요.

//yield can be used only inside generators
//❌ ❌ ❌ 
function *newGen() {
    function insideNewGen() {
        //it will throw an error
        yield "Hello"
    }
 }

생성기를 개체 메서드로 추가할 수 있습니다.

let obj = {
    //like this (ES5)✅✅✅:
    generatorNr1: function*(myArray) {
        for(let i=0; i<myArray.length; i++) {
            yield myArray[i]
        }
    },
    //or like this (ES6)✅✅✅:
    *generatorNr2(myArray) {
        for(let i=0; i<myArray.length; i++) {
            yield myArray[i]
        }
    }
}

[Symbol.iterator]

하지만 for 루프는 어떻습니까? 반복자와 생성기에 대한 코드가 너무 많지만 for 루프와 어떤 관련이 있습니까? 좋은 질문. 반복자는 반복하는 요소, 즉 Symbol.iterator 객체와 연결됩니다. 주어진 객체에 대한 반복자를 반환하는 함수를 지정합니다. 모든 반복 가능한 요소에는 기본 Symbol.iterator가 정의되어 있습니다. 이 덕분에 for 루프를 사용할 수 있습니다. 루프가 반복에 대한 지식을 필요로 하는 반복자이기 때문입니다. 그러나 모든 요소에 그러한 기본 반복자가 있습니까? 점검 해보자:

function doIhaveDefaultIterator(obj) {
    return typeof obj[Symbol.iterator] === 'function'
}
//array✅
console.log(doIhaveDefaultIterator(["Hello", "World", "1"])) //true
//Map✅
console.log(doIhaveDefaultIterator(new Map())) //true
//String✅
console.log(doIhaveDefaultIterator("hello")) //true
//Object❌
console.log(doIhaveDefaultIterator(new Object())) //false
console.log(doIhaveDefaultIterator({})) //false
//Set✅
console.log(doIhaveDefaultIterator(new Set())) //true
//Weakmap❌ 
console.log(doIhaveDefaultIterator(new WeakMap)) //false
//WeakSet❌
console.log(doIhaveDefaultIterator(new WeakSet)) //false

우와. 보시다시피 JS의 모든 것이 기본적으로 반복될 수 있는 것은 아닙니다. 특히 객체에 반복자가 없는 것은 고통스럽습니다. 이것은 for-of 루프가 객체에 쓸모가 없다는 것을 의미합니까? 반드시는 아닙니다 ...

반복 가능한 객체를 만드는 방법은 무엇입니까?

[Symbol.iterator]를 사용하여 새 반복자를 생성해야 합니다.

let object = {
    "name":"Michal",
    "surname":"Zarzycki",
    *[Symbol.iterator]() {
       let keys = Object.keys(object);
       for(let i=0; i<keys.length; i++) {
           yield [`${keys[i]}: ${object[keys[i]]}`]
       }
    }
}

for(const props of object) {
    console.log(props)
}
//[ 'name: Michal' ]
//[ 'surname: Zarzycki' ]

위의 예를 보면 관찰자는 이것이 객체의 키-값 쌍을 인쇄하는 것이기 때문에 for ... in 루프를 사용하는 것이 더 낫지 않을까요? 이것은 또 다른 좋은 질문입니다. 반복자를 생성하거나 기본 반복자를 덮어쓰는 것은 우리의 반복이 반드시 일반적일 필요는 없는 좀 더 특정한 상황에서 작동하지만, 객체에 반복자를 추가하는 것은 또 다른 이유로 유용할 수 있습니다. for..in은 기호를 볼 수 없습니다:

let symbol1 = Symbol('symbol1')

obj = {
    "name":"Michal",
    "surname":"Zarzycki",
}

obj[symbol1] = "Secret message: I love puppies"
for(const prop in obj) {
    console.log(`${key}: ${prop[key]}`)
}
//console.log
//name: Michal
//surname: Zarzycki

어, 내 비밀 메시지는 이제 안전합니다. 반복자를 사용하지 않는 한:

let symbol1 = Symbol('symbol1')

obj = {
    "name":"Michal",
    "surname":"Zarzycki",
    *[Symbol.iterator]() {
        let arr = Object.getOwnPropertySymbols(obj)
        let ob_keys = Object.keys(obj);
               let keys = [...arr, ...ob_keys]
               for(let i=0; i<keys.length; i++) {
                   yield [keys[i], obj[keys[i]]]
               }
            }
}

obj[symbol1] = "Secret message: I love puppies"

for(const prop of obj) {
    console.log(prop)
}
//console.log():
//[ Symbol(Symbol.iterator), [GeneratorFunction:[Symbol.iterator]] ]
//[ Symbol(symbol1), 'Secret message: I love puppies' ]
//[ 'name', 'Michal' ]
//[ 'surname', 'Zarzycki' ]

보시다시피, 반복자는 매우 강력한 도구이며 많은 용도를 가지고 있습니다. 나만의 반복자를 만드는 것이 좋습니다. 반복할 때 메시지 비밀을 건너뛸 수 있습니다. 😃.

읽어 주셔서 감사합니다! 🚀🚀🚀