[ES6] for ... in문 / for ... of 문

for .. in 문

• 객체의 프로퍼티 키 열거 전용
• for in문은 for문가 다르게 동작하는 반복문이다.
• for에 들어가는 인자 형태가 서로 다르다.
• for / in 문은 해당 객체의 모든 열거할 수 있는 프로퍼티(property)를 순회할 수 있도록 해준다.

(주의) 해당 객체가 상속받는 프로토타입 체인상의 모든 프로퍼티 키를 열거한다.(단, [[Enumerable]] 값이 false인 프로퍼티는 제외)

for(const key in 객체){
	//...반복 수행 코드...
}

const obj = { 
	name: 'curryyou', job: 'engineer' 
} 
for (const key in obj){ 
	console.log(`${key} : ${obj[key]}`); 
}
// name : curryyou 
// job : engineer

 

---

for .. of 문

• 이터러블 순회 전용
• Iterator 속성이 있는 객체인 Array, Map, Set, String, TypedArray, arguments 등의 값을 반복할 수 있으며, string 문자열에도 적용할 수 있다.
• Array, Map, Set, arguments 등이 해당됨 (Object는 해당 X)
• for ...of 문은 반복 가능한 객체(iterable)를 순회할 수 있도록 해준다.
• for in문 문법은 동일하지만 순회하는 대상에 차이가 있다.
• for of 문은 Set 객체를 순회할 수 있지만 for in문은 객체를 순회할 수 없다.

for ...of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다.
for ...of구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다(직접 명시 가능).

// Array 
for (const val of ['a', 'b', 'c']) { 
	console.log(val); 
	// 'a','b','c' 
} 

// Array2
const arr = [10, 20, 30]; 
for (const item of arr){ 
    console.log(item); 
    // 10, 20, 30 출력 
}

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

// Object 
for ( let val of {1 :'a', 2 :'b', 3 :'c'} ) { 
	console.log(val); 
	// TypeError: object is not iterable 
}

 

 

참조

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of
• https://curryyou.tistory.com/202