[Javascript] for in / for of 차이

1 for in

---

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

✔️ 객체의 key 값에 접근 가능. value 값에는 직접 접근 불가

✔️ 모든 객체에서 사용 가능.

 

//Array
let arr = ['a', 'b', 'c'];
for(let i in arr){
	console.log(i, arr[i]); 
}
//0 a, 1 b, 2 c

//Object
let object = {a:1, b:2, c:3};
for(let prop in obj){
	console.log(prop, obj[prop]);
}
//a 1, b 2, c 3

//Rendering template literal
let TemObject = {a:1, b:2, c:3};

for(let property in object){
	console.log(`${property} : ${object[property]}`);
}
//a:1
//b:2
//c:3

 

 

2 for of

---

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

✔️ Array, Map, Set, arguments 등이 해당됨(Object는 해당 x)

 

// Array
const arr = [1,2,3];

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

// String
let iterable = 'boo';

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

// Object
let object = {
  1:'a',
  2:'b',
  3:'c'
}

for(element of object){
  console.log(element); //Uncaught typeError : object is not iterable
}

 

Reference

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of
• https://joooing.tistory.com/entry/Iteration2-for-in%EB%AC%B8-for-of%EB%AC%B8