프론트엔드/Javascript · JQuery

[자바스크립트] for of 문

경호! 2021. 8. 9. 10:55

가장 익숙하며 검증된 for문으로는

 

let i = -1;

for ( i=0 ; i < xxx.length ; i++ ) {

    console.log(i):

};

 

가 있다고 생각합니다.

 

다만, 주어진 변수가 배열인 경우 for of 문을 사용해보았는데

나쁘지 않았습니다.

앞으로 많이 사용해보면서 차이점을 느끼게 된다면 업데이트 하도록하겠습니다.

 

for of 문은 다음과 같습니다.

 

let arrayColor = ['red', 'green', 'blue'];

for ( color of arrayColor ) {

    console.log( color ); // 'red', 'green', 'blue' 이렇게 하나씩 출력됩니다.

};

 

전통전인 for문으론 인덱스값을 사용하고싶을때

단순히 i를 호출하면 되었습니다.

 

그런데 for of 문에서는 어떻게 해야할까요?

다음과 같이 .keys() 메소드를 사용하면 됩니다.

 

let arrayColor = ['red', 'green', 'blue'];

for ( color of arrayColor.keys() ) {

    console.log( color ); // 이젠 0, 1, 2 가 출력됩니다.

};

 

그럼 value와 index를 모두 사용하고 싶을때는 어떻게 할까요?

다음과 같이 .entries 메소드를 사용하면됩니다.

 

let arrayColor = ['red', 'green', 'blue'];

for ( [ index, value ] of arrayColor.entries() ) {

    colnsole.log( value, index ); // 'red' 0, 'green' 1, 'blue' 2 가 출력됩니다.

};

 

여기까지입니다.

틀린 부분이 있다면 댓글남겨주시기 바랍니다.

 

수정내역:

2021-08-19 : [ value, index ] -> [ index, value ] 로 올바르게 수정했습니다.