자바스크립트 - for in과 for of 차이점

 

생김새

 

var arr = [2, 5, 7, 9, 12];

// for in
for(const item in arr){
	console.log(item);
}

// for of
for(const item of arr){
	console.log(item)
}

생김새는 이렇게 생겼습니다. 

 

둘 다 너무 똑같이 생겨서 가끔 사용하려고 할 때마다 혼란이 생깁니다. 

지금부터 이런 식으로 외우시면 됩니다. 

 

for in은 객체(키 값) 순환

for of은 배열 순환

 

참고로 상단 코드의 실행 결과는 이렇습니다. 

// for in
0 1 2 3 4

// for of
2 5 7 9 12

for of는 배열의 값을 순서대로 잘 출력하는 반면에 for in은 0, 1, 2, 3 같은 숫자의 순환을 반환합니다. 

바로 눈치챈 사람도 있겠지만 저 숫자들은 index이며 즉 배열의 키 값들을 리턴한 것입니다.. 

 

 

배열도 객체이기 때문에 키 값인 0, 1, 2, 3... 등을 반환한 것입니다. 

 

다른 객체 예시를 살펴보면

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

이런 형태의 객체를 for in을 통해서 출력하게 되면 

 

"a: 1"
"b: 2"
"c: 3"

마찬가지로 키 값을 가져와 참조하기 때문에 배열의 내용을 함께 출력이 됩니다. 

 

 

 

 

reference: 

https://velog.io/@eomttt/for-...in-for-...of-%EC%B0%A8%EC%9D%B4

for ...in, for ...of 차이

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in

for...in - JavaScript | MDN