for ... in / for ... of

for ... in 

객체의 반복을 위해서 만들어졌다.

 

for ... in 을 사용하는 경우

쉽게 객체의 속성을 확인(콘솔이나 다른 방법으로 출력)할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있다.

배열이 데이터의 저장에 있어서는 더 실용적이지만, 키-값 쌍이 선호되는 데이터의 경우(속성이 "key"의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용할 수 있다.

 

for

순서가 중요한 배열의  반복에서는 숫자 인덱스를 사용할 수 있는 for 반복문을 사용하는 것이 좋다.

(또는 for ... of를 사용할 수 있다.)

 

for... of

반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복한다.

 ([Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 반복한다.)

 

 

배열에서 for...in / for...of 의 출력 차이

const array1 = ['a', 'b', 'c'];

for (const element in array1) {
  console.log(element);
}

//output
0
1
2

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

//output
a
b
c

 

객체에서 for...in / for...of 의 출력 차이

const array1 = {
	a:1,
	b:2
}

for (const element of array1) {
  console.log(element);
}

//output
Uncaught TypeError : array1 is not interable

 

const array1 = {
	a:1,
	b:2
}

for (const element in array1) {
  console.log(element);
}

//output
a
b