<aside> 💡 Syntax: for(variable of iterable){ }

</aside>

• 이터러블 오브젝트를 반복합니다.

  const list = [1, 2, 3];
  for(let k = 0; k < list.length; k++){
  	console.log(list[k]);
  };
  for(let value of list){
  	console.log(value);
  };
  

• iterable

  • 이터러블 오브젝트를 작성
  • 표현식을 작성하면 평가 결과를 사용합니다.

• variable

  • 변수 이름 작성
  • 이터러블 오브젝트를 반복할 때마다 variable에 값이 할당됩니다.

• 배열

  • 배열을 반복하며 엘리먼트를 하나씩 전개합니다.

for( let value of [1,2,3]){
	console.log(value);
}

• String
  • 문자열을 반복하면서 문자를 하나씩 전개합니다.

for( let value of "ABC"){
	console.log(value);
}

[실행 결과]

A

B

C

• NodeList
  • NodeList를 반복하며 엘리먼트를 하나씩 전개

<ul>
	<li class="show">첫 번째</li>
	<li class="show">두 번째</li>
	<li class="show">세 번째</li>
</ul>

const nodes = document.querySelectorAll(".show");
for(let node of nodes){
	console.log(node.textContent);
};

for-in, for-of차이점

• for-in
  • 열거 가능한 프로퍼티가 대상입니다.
  • {key: value}형태는 디폴트가 enumerable: true
  • Object.defineProperty()는 디폴트가 enumerable: false

const obj = { };
Object.defineProperties(obj, {
	sports:{
		enumerable: false, value: "스포츠"
	},
	book: {
		enumerable: true, value: "책"
	},
});
for(let item in obj){
	console.log(item + ": " + obj[item]);
};

• for-of
  • 이터러블 오브젝트가 대상
  • Object는 전개되지 않습니다.
  • prototype의 프로퍼티도 전개
  • 되지 않습니다.

for-of, Object

• Object는 이터러블 오브젝트가 아니기에 for-of 사용이 불가능합니다.
• 하지만 Object.keys()로 프로퍼티 이름을 배열로 만든 뒤 만든 배열을 for-of로 전개하면 사용가능합니다.

const sports ={
	soccer: "축구",
	baseball: "야구"
};
const keyList = Object.keys(sports);
for(let key of keyList){
	console.log(key + ": " + sports[key]);
};