JavaScript _tip / for ...in , for ...of의 차이!

for...in 과 for ...of 의 차이점

---

기존 for문과 while문 이외에도 여러가지 반복문이 있습니다! 바로 ES6에서는 대상의 요소를 순회하기 위해 for in과 for of이라는 문법이 새롭게 추가 되었습니다. 문법 및 사용방법이 너무 비슷해서 헷갈리는 경우가 있습니다.  그래서 for in /for of의 차이점에 대해 간단히 정리하고자 합니다!

 

for ...in

---

▶ for ...in 반복문은 객체를 프로퍼티의 수 만큼 순회하여 프로퍼티의 키값에 접근합니다. for...in문은 프로퍼티가 무조건 열거형 속성이여야 사용이 가능합니다. 열거형 속성이란 쉽게 말하자면 a의 정보는 b다(a=b)이런식으로 어떤 정보를 나타내주는 것을 말합니다.

 

객체는 프로퍼티의 키값으로 value에 접근이 가능하여 열거형 속성을 가집니다. 예시를 통해 쉽게 알아 봅시다!

 

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
}; 
 
for (let key in obj) {
  console.log(`${key} - ${obj[key]}`);
}
 
// a - 1
// b - 2
// c - 3
// d - 4
// 이와같이 열거형 속성을 갖기 때문에 for in 사용가능합니다.

 

▶ 그렇다면 배열을 사용 할 수 없을까요 ?? 사용 할 수 있습니다. 자바스크립트에선 배열도 객체입니다. 다만 해당 요소를 가져오는 것이 아닌 index 값을 반환합니다. 배열뿐만 아니라 문자열도 같은 개념으루 다룰 수 있습니다. 소위 유사배열 객체라고도 할 수 있는데 그내용은 나중에 세세하게 다루겠습니다. 

 

const arr = [10, 20, 30, 40];
 
for (let key in arr) {
  console.log(`${key} - ${arr[key]}`);
}
 
// 0 - 10
// 1 - 20
// 2 - 30
// 3 - 40
// 배열도 열거형 속성이 있어 for..in표현 가능합니다.
 
const str = ['joycoding']
 
for(let key in str){
 console.log(`${key} - ${str[key}`)
}
 
// 0 - j
// 1 - o 
// 2 - y
// 3 - c
// 4 - o
// 5 - d
// 6 - i
// 7 - n
// 8 - g
// 문자열도 배열처럼 열거 할 수 있습니다.
 

 

▶ 정리를 하자면 for in 구문은 객체, 배열, 문자열에 사용 할 수 있습니다. 하지만 열거형 속성이 명확한 객체에 자주 쓰이며 더 효율적으로 반복문을 활용할 수 있기 떄문에 객체에 자주 쓰입니다. 

 

 

for ...of

---

▶ for ...of 문은 연속성을 갖는 객체인 즉 iterable object를 순회를 할 수 있도록 도와줍니다. 대표적으로 index값이 이미 있는 배열과 문자열이 있습니다.  

 

const arr = [3, 5, 9];
 
for (let val of arr) {
  console.log(val);
}
 
// 3
// 5
// 9
 
const str = "joycoding";
 
for (let val of str) {
  console.log(val);
}
 
// j
// o
// y
// c
// o
// d
// n
// g
 

 

▶ for ...of 문은 객체에 쓸수 없을까요 ?  객체는 iterable 객체가 아닙니다. 쉽게 말해 연속성이 없습니다. 사용하면 아래와 같이 나옵니다.

 

let obj = {
  a: 1,
  b: 2,
  c: 3
};
 
for (var key of obj) {
  console.log(key) // Uncaught TypeError: obj is not iterable
}

 

그래서 for..of는 객체에 사용하기엔 적합하지 않아서 통상 배열에 많이 쓰입니다.

 

▶ 최종 정리

for ...in	객체,배열,문자열은 열거형 속성을 갖고 있지만 명확한 열거 속성을 지닌 객체에 통상적으로 for ...in을 사용합니다.  for ...in   객체
for ...of	배열과, 문자열은 연속성 가지고 있습니다.(index 순서)즉 iterable object객체이기 때문에 통상적으로 for ...of를 사용합니다.  for ...of   배열

 

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

for...of - JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

for...in - JavaScript | MDN