javascript for of, for in 차이점 정리

for...of , for...in 차이점 정리!

처음에는 헷갈렸는데 객체와 배열에 있어서 쓰임새가 다른거였다.

쉽게 정리를 하자면 배열에서는 of 객체에서는 in을 사용하면 될거 같다.

 

 

배열 = for...of

in, of 둘다 사용 가능.

- for...of = 배열 데이터를 반복하며 반환

- for...in =  index값 반환

 

객체 = for...in

in 사용 가능

- for...in = key값 반환

- for...of = type error

 

배열 데이터

let str = [1, 2, 3];

for (let i of str) {
  console.log(i);
}
// 1, 2, 3 // 단순 배열값 반환

for (let i in str) {
  console.log(i);
}
// 0, 1, 2 // index값을 반환

배열데이터에서 for...of를 사용하게 되면 단순 배열값을 반환시킨다.

배열에서는 for...of를 사용하면 된다.

for...in을 사용하면 index값이 반환된다.

배열데이터에서 반복해서 index값이 필요하다면 for...in을 사용하면 될 것 같다!

 

 

객체 데이터

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

for (let i in str) {
  console.log(i);
}
// a, b, c // key값 반환

for (let i of str) {
  console.log(i);
}
// TypeError

객체 데이터에서 for...in를 사용하면 key값을 반환한다.

for...of을 사용하게 되면 오류가 뜨게 된다.

for...of는 배열데이터에서만 사용해야 한다.