자바스크립트 javascript for in , for of 의 차이

자바스크립트 javascript forEach, for of, for in 의 차이

 

보통 자바스크립트에서 반복문의 형태는 4가지 정도가 있죠.

기본 for문, forEach, for of, for in.

 

 

그럼 이들의 차이는 무엇일까요?

아래의 소스를 보면서 알아보도록 하죠.

 

const array = ['가','나','다','라'];
console.log("size : "+array.length);
const size = array.length;
//객체의 반복 in, 배열 of
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]);
}

 

'가', '나', '다', '라' 가 들어있는 배열이 있고 이것을 반복하는 4가지의 for문이 있습니다.

실행했을 때의 결과는 어떻게 될까요?

언뜻보면 다 '가', '나', '다', '라' 가 출력될거 같습니다.

하지만 결과는 다르죠.

 

 

forEach와 for of 는 undefined가 나왔습니다.

이유는 간단합니다.

basic for문과 for in은 반복변수에 index를 리턴하지만

forEach 와 for of 는 해당 값을 리턴하기 때문이죠.

 

 

 

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

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

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

forEach에 대해서는 아래의 Link를 참고하세요.

 

Link : javascript forEach 함수에 대해 알아보자. 자바스크립트 forEach 함수

 

console.log('forEach');
array.forEach(function(j){
  console.log(j);
});
 
console.log('for of');
for (let k of array){
  console.log(k);
}

 

위와 같이수정을 하게 되면 원하는 값을 출력할 수 있습니다.

 

결론적으로 forEach와 for of 는 배열의 반복에 사용됩니다.

만약 위의 array 변수가 object로 변경이 되면 에러가 발생하게 되죠.

그럼 왜 ESMAScrip 6 에서 for of가 나오게 되었을까요?

 

forEach는 위와같이 callback 함수가 필요합니다. 굳이 이걸 쓸 필요 없이 같은 기능을 하기 위해

나온것이 for of이죠.

 

그리고 for in은 object 에서도 사용이 가능합니다.

 

const object = {1 : '가', 2:'나', 3:'다', 4:'라'};
console.log('for in');
for (let z in object){
  console.log(object[z]);
}

 

이렇게도 사용이 가능한 것이죠.