for in / for of 반복문

for in / for of 반복문과 enumerable, iterable에 대해 알아보자.

자바스크립트의 반복문에는

for문, forEach()반복문 ( Array전용 ), for in 반복문 ( Object전용 ), for of 반복문 ( iterable전용 )이 있다.

첫번째 단순 반복문은, 코드를 여러번 실행할 때 사용하지만,

두번째 반복문들은 Array,Object에서 자료를 꺼낼때 사용한다.

 

먼저, for in 반복문을 배워보자.

var 오브젝트 = { name : 'Kim', age : 30 };

for (var key in 오브젝트) {
  console.log(오브젝트[key]);
}

이렇게 오브젝트에 있는 값을 하나씩 꺼내서 사용할 때 사용한다. var 작명 in 오브젝트 형식을 사용하며,

오브젝트에 저장된 자료 개수만큼 반복한다. key는 name age등 데이터의  키를 뜻한다.

 

for in 반복문의 특징은

 

먼저, enumerable한 것만 반복을 한다. enumerable이란 셀수있는 이란 뜻이다. (즉, 반복문에서 출력할 수 있냐)

 

두번째론, 부모의 prototype도 반복해준다.

class 부모 {

}
부모.prototype.name = 'Park';

var 오브젝트 = new 부모();

for (var key in 오브젝트) {
  console.log(오브젝트[key]);
}

이렇게 출력하면 Park가 나온다. 오브젝트라는 자식에 있는 것만 돌리는게 아니라 부모로부터 만들어졌고, 부모의 프로토타입에 name : 'Park' 가 있다면, 그것까지 반복하게 된다.

그래서 내가 가진것만 출력하려면

for (var key in 오브젝트) {
	if (오브젝트.hasOwnProperty(key)) {
 		console.log(오브젝트[key]);
    	}
}

이렇게 hasOwnProperty를 써서 key라는걸 직접 가지고 있냐고 묻는 함수를 써주면 된다. true / false가 남으니 if문을 써서 true 일때 코드를 적어주면 된다. 

 

세번째론, Object자료형에만 사용한다. Array에는 for이나 forEach를 써주면 된다.

 

이제, for of 반복문을 배워보자.

for of반복문은 array, 문자, arguments, NodeList, Map, Set등에 사용가능하고,

var 어레이 = [2,3,4,5];

for (var 자료 of 어레이) {
  console.log(자료);
}

위처럼 사용하며, 어레이 갯수만큼 반복하며, var 작명 of 어레이 형태이다. 작명에는 어레이의 데이터가 하나하나 들어간다. 

for of반복문은 iterable한 자료형에만 사용가능하다.

어레이[Symbol.iterator]();

이라고 쓰면, 콘솔창에 뭐가 뜨는데, 그게 있으면 iterable한 자료형이다.'

 

추가로 NodeList란

document.getElementsByClassName()
document.querySelectorAll()

이렇게 셀렉터로 html을 불러올 때 다 불러오면 그 자리에 [] (대괄호)가 남아서 거기에, [html1, html2] 이렇게 NodeList가 남게된다.