for in / for of

반복문의 한 종류인 for in과 for of의 차이를 알아보겠다.

 

결론부터 말하면
for in은 객체의 반복에서 사용

for of는 배열의 반복에서 사용

 

 

for in

객체를 순환 할 때 사용 

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

for (let item in obj) {
  console.log(item) // a, b, c
}

객체 안에서 순환 할때 사용하지만

객체의 키 값을 순환 함

 

객체가 아닌 배열에서 사용한다면?

let arr = [1, 2, 3];

for (let item in arr) {
  console.log(item) // 0, 1, 2
}

배열도 객체의 일부분이기 때문에 순환을 하지만, value 값을 나타내는게 아닌 index 값을 나타낸다.

 

 

for of

배열를 순환 할때 사용

let arr = [1, 2, 3];

for (let item of arr) {
  console.log(item); // 1, 2, 3
}

for (let val of 'abc') { 
	console.log(val); // 'a','b','c' 
}

for in과 다르게 배열의 경우 index가 아닌 value 값을 순환함

배열 뿐만 아니라 일반 문자열에서도 사용 가능하다.

 

배열이 아닌 객체에서 사용한다면?

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

for (let item of obj) {
    console.log(item);  // Uncaught TypeError: obj is not iterable
}

객체는 배열이 아니기 때문에 순환하지 못한다.

 

 

정리

for in

객체의 key값에 접근 가능, value값에는 직접 접근 불가
모든 객체에서 사용 가능(배열도 가능하나 index 접근)

객체의 열거 가능한 '속성들'을 순회할 수 있도록 해줌

 

for of

배열에서는 value, 문자열에서는 각 문자열을 순환

반복 가능한 객체(iterable)를 순회할 수 있도록 해줌

Array, Map, Set, arguments 등이 해당됨 (Object는 해당 X)

 

[JavaScript] for ...in, for ...of의 차이