Learning JavaScript (for..in, for..of)

for...in 

for..in문은 자바에서도 자주 쓰이는 문법이다. 객체를 좀더 쉽게 다루기 위해 생겨난 제어문으로 사용법은 아래와 같다.

const player = {name:'Thomas', rank:'Midshipman', age:25};

for(let prop in player){
    if(!player.hasOwnProperty(prop)) continue;
    console.log(prop+ ':' + player[prop]);
}

player 변수를 넣고 돌리면 key값 들을 순회하는 것이다. 값을 뽑으려면 객체[key]로 뽑아야한다.

4번째 줄은 에러가 생길 수 있기 때문에 예외처리를 해준 것이다.

 

for...of

이 문법은 ES6에서 새로 생긴 반복문이며 컬렉션의 요소에 루프를 실행하는 다른 방법입니다.

이 루프는 배열은 물론 이터러블(iterable) 객체에 모두 사용할 수 있는 범용적인 루프입니다. 하지만 이 루프를 배열에 사용할 땐 주의할 점이 있는데, 각 요소의 인덱스를 알 필요가 없을 때 사용하는게 알맞습니다. 인덱스를 알아야한다면 일반적인 for문을 사용하십시오.

function rand(m,n) {
    return m + Math.floor((n-m+1)*Math.random());
}

function randFace(){
    return ["crown", "anchor", "heart", "spade", "club", "diamond"] 
    [rand(0,5)];
}

const hand =[randFace(),randFace(),randFace()];

for(let face of hand){
    console.log(`You rolled...${face}`);
}

for...in vs for...of vs forEach vs for

출처: https://aljjabaegi.tistory.com/354 [알짜배기 프로그래머]

const array = ['가','나','다','라'];

console.log("basic");
for(let i=0; i<size; i++){
  console.log(array[i]);
}
 
console.log('forEach');
array.forEach(function(j){
  console.log(array[j]);
});
 
console.log('for of');
for (let k of array){
  console.log(array[k]);
}
 
console.log('for in');
for (let z in array){
  console.log(array[z]);
}

위 코드를 실행했을 경우 아래와 같은 결과가 도출됩니다.

forEach와 for...of는 undefined가 나왔습니다. 이유는 for문과 for...in문은 반복 변수에 index를 리턴하지만 forEach와 for...of는 해당 값을 리턴하기 때문이죠.

 

forEach의 콜백함수는 3가지의 매개변수를 받습니다.

첫 번째는 해당 값, 두 번째는 index, 세 번째는 배열입니다.

하지만 위 예제에는 하나의 매개변수만 설정되었기 때문에 값이 리턴된 것 입니다.

 

이렇듯 forEach가 있는데 왜 for..of가 왜 새로 나왔을까요? 그 이유는 forEach는 callback 함수가 필요합니다. 굳이 이걸 쓸 필요가 없어도 말이죠. 그렇기 때문에 더 간편하게 쓰고자 나온 것으로 추측됩니다.