[JavaScript] foreach, for in, for of 반복문

[해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다.
따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.]

1. Array.prototype.forEach()

forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행한다. 오직 Array 타입에서만 사용 가능하지만 ES6부터는 Map, Set 같은 Collection에서도 사용이 가능하다. 

 

var ar = [52, 273, 103, 32];

ar.forEach((value) => {
    console.log(value);
})

//결과 : 52, 273, 103, 32

 

2. for...in

for in은 모든 객체를 반복하여 사용가능하다. Object에 있는 항목들을 반복적으로 반환하여 어떠한 처리를 할 수 있게 해 준다. 다만 객체의 Key값에 접근할 순 있지만, Value에 접근할 순 없다.

 

- Array

for...in은 인덱스 순서가 중요한 Array의 iterate로 사용되어질 수 없다.

배열의 인덱스들은 Integer 이름의 Enumerable Properties이며 일반적인 Object Properties와 동일하다. for...in은 어떤 특정 순서의 인덱스를 리턴할 거란 보장이 없다. for...in 반복문은 Non-Integer 이름들과 이러한 상속된 것들을 포함한 모든 Enumberable propertie들을 리턴할 것이다.

그렇기 때문에 IE8의 경우, 정상적으로 동작되지 않는 문제가 발생한다. IE 버전을 고려하여 for 형태를 사용하는 것이 바람직 하다.

 

var ar = [52, 273, 103, 32];

for (var prop in ar){
    console.log(ar[prop]); 
}

 

-Object

객체의 경우에는 객체의 속성명이 들어가기 때문에 Array에서 발생했던 문제점이 존재하지 않는다. Key가 Non-Integer Type이므로 IE에서도 문제없이 사용이 가능하다.

 

var obj = { a : 1, b : 2, c : 3};

for (var props in obj){
    console.log(obj[props]);  
}

 

3. for...of

반복 가능한 객체인 Array, Map, Set 객체 등에 대해서 반복하고 각 개별 속성 값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성한다. for...in과 다르게 Key값이 아니라 Value값을 가져온다.

 

let ar = [10, 20, 30];

for (let value of ar) {
    console.log(value);
}
// 결과: 10 20 30