[자바스크립트] forEach, for ... in, for ... of 차이점

1. forEach

forEach는 배열(Array), Map, Set에서 이용 가능하다. 배열의 각 요소를 반복하여 작업을 수행한다

let arr = [1, 2, 3, 4, 5]

arr.forEach((value, index, array) => {
    console.log(value)
})

// 배열의 아이템이 차례대로 출력

2. for .. in

for .. in은 객체의 열거 가능한 속성을 반복하는데 사용된다.
Array에는 사용하지 않는 것이 좋다. 

let obj = {
    name : 'yelee',
    age : 20,
}

for (let key in obj){
    console.log(`${key} : ${obj[key]}`);
}

// name : yelee
// age : 20

단, for .. in의 경우 순회할 때, 객체의 속성뿐만 아니라 prototype chain으로부터 상속받은 속성들도 순회한다.

let obj = {
    name : 'yelee',
    age : 20,
}

Object.prototype.newFunction = function (){
    return 1;
}


for (let key in obj){
    console.log(`${key} : ${obj[key]}`);
}

//name : yelee
//age : 20
//newFunction : function (){
//return 1;
//}

 

3. for .. of

for .. of는 iterable 한 Object의 value를 순회한다.

for(let letter of "abcde"){
    console.log(letter);
}
//a b c d e 차례대로 출력

let arr = [1, 2, 3, 4, 5]

for (let item of arr){
    console.log(item)
}

// 1, 2, 3, 4, 5 차례대로 출력

let obj = {
    name : 'yelee',
    age : 20,
}

for (key of obj){
    console.log(key);
}

// Error!!
// Uncaught TypeError: obj is not iterable