for..in 대신 for..of 루프를 사용해야 하는 경우

전통적인 for 루프는 이제 ES6이 루프 오버를 위한 새롭고 간결한 형식을 가져왔기 때문에 과거의 일이 되었습니다. 그러나 두 구문의 차이점과 서로 다른 데이터 유형에서 작동하는 방식을 아는 것이 중요합니다.
for..in와 for..of의 주요 차이점은 for..in는 객체의 열거 가능한 속성을 반복하는 반면 for..of는 iterable이 반복되도록 정의한 값을 반복한다는 것입니다. 이것은 1분 안에 명확해질 것입니다. 그러나 이것이 다른 대신 하나를 사용하는 데 어떤 영향을 줍니까?

var fares = [0.3, 0.5, 0.7, 1, 1.3] 
for(let fare in fares){     
    console.log(fare);  //0,1,2,3,4     
}

콘솔에서 배열 값을 예상했지만 대신 인덱스를 볼 수 있습니다. Javascript에서 배열은 속성으로 인덱스가 있는 객체이기도 하기 때문입니다. for..in가 열거 가능한 속성을 반복하므로 거기에 인덱스가 표시됩니다.

이제 배열의 값을 반복하는 방법은 무엇입니까? 여기에서 for..of 루프가 작동합니다.

var fares = [0.3, 0.5, 0.7, 1, 1.3] 
for(let fare of fares){     
    console.log(fare);  //0.3,0.5,0.7,1,1.3     
}

그것은 완벽하게 작동했고 우리는 콘솔에서 값을 얻었습니다! 두 가지를 다시 살펴보지만 이번에는 객체를 사용합니다.

var cars={
    one: "car1",
    two: "car2",
    three: "car3"
    }; 

for(let car in cars){       
    console.log(car);  //"one","two","three"    
}

예상대로 for..in 콘솔에 로그인한 개체의 열거 가능한 속성을 반복합니다. 그러나 객체와 함께 for..of를 사용하면 어떻게 될까요?

var cars={
    one: "car1",
    two: "car2",
    three: "car3"
    }; 

for(let car of cars){       
    console.log(car);  //Uncaught TypeError: cars is not iterable   
}

앗! 이 작업을 수행하면 TypeError가 발생하며 이는 for..of 루프에서 두 번째 인수가 반복 가능해야 하기 때문입니다. Javascript의 객체는 iterable protocol을 구현하지 않는 한 반복할 수 없으므로 오류가 발생합니다.

이제 어디에서 어떤 for 루프를 사용할지 알았습니다. 요지는 객체의 경우 for..in, 배열의 경우 for..of입니다.

이것은 dev.to에 대한 첫 번째 게시물이며 귀하의 생각을 듣고 싶습니다. 저는 이제 막 블로깅을 시작하고 있으며 더 나은 경험을 제공하기 위한 귀하의 지침과 제안에 감사드립니다. 읽어 주셔서 감사합니다!