본문 바로가기

Dev. Front-End/JavaScirpt

[Javascript] for of 반복문 / for in 반복문 개념 및 차이점 (예제)

 

 

 

for in 반복문

: 앞의 반복 변수에 '요소'가 아니라 '인덱스'가 들어갑니다.

 

<script>
     var array = [1,2,3,4];
     for (var i in array){
          console.log(i + '번째 요소는 ' + array[i] + '입니다.');
     }
</script>

array배열에 1,2,3,4의 값이 들어있습니다.

for in반복문을 보면 array배열값을 in키워드 뒤에 적어주고, var i로 임의로 변수를 만들어줍니다.

해당 인덱스가 0부터 3까지 console.log 출력 괄호안에 인덱스i가 들어가고 array[]배열안에

[i]를 적어줘서 해당 인덱스 값을 불러옵니다.

 

 

 

 

 

for of 반복문

: ES6(ECMAScript 6)에서는 for of 반복문이 추가되어 내부의 요소를 바로 넣어 활용할 수 있게 되었습니다.

<script>
     for (const element of [1,2,3,4]){
          console.log(`요소는 ${element}입니다.`);
     }
</script>

for in 반복문과 달리 of키워드 뒤에 배열을 직접 적어주고 element변수로 값을 출력해줍니다.

여기서 ` `는 ES6에서 추가된 사항입니다.