for ...in, for ...of 차이

for in , for of 차이

동일 html에 적용했을때 비교 

    <h1>
        <span>R</span>
        <span>A</span>
        <span>I</span>
        <span>N</span>
        <span>B</span>
        <span>O</span>
        <span>W</span>
    </h1>

 

for...in (객체순환)

index return

        const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; 
        let span = document.querySelectorAll('span');
        for(let i in colors){
            span[i].style.color = colors[i];
            console.log(i);// in : 0,1,2,3,4,5,6 인덱스번호
         
        }

for in 결과

 

for...of (배열 값 순환)

해당 value return

        const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; 
        let span = document.querySelectorAll('span');
        for(let i of colors){
            span[i].style.color = colors[i];
            console.log(i);//of : red, orange, yellow, green, inigo // span[red] 이므로 오류 
        }

for of 결과