[코딩애플] js part 3-7. for in / for of 반복문과 enumerable, iterable 속성

for in / for of 반복문과 enumerable, iterable 속성

반복문

1. 코드 여러번 실행할 때
2. Array, Object에서 자료를 꺼내쓸 때(2,3,4)

1. 그냥 for 반복문(어려움)

for (var i = 0; i < 3; i++){

}

2. forEach() 반복문 (Array 전용)

[1,2,3].forEach();

3. for in 반복문 (Object 전용)

• object에 있던 값을 전부 하나씩 꺼내서 사용할 때 사용
• 사용법

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

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

특징

1. enumerable 한 것만 반복해준다.

이 오브젝트에는 'Kim'말고 숨겨진 정보들도 더 있다.

• **getOwnPropertyDescriptor** : 오브젝트.name의 숨겨진 정보를 출력한다.

Object.getOwnPropertyDescriptor(오브젝트, 'name');
// {value: 'Kim', writable: true, enumable: true, configurable: true}

object안에 보이는 건 'Kim' 정보 하나 뿐이었지만, 실은 숨겨진 정보 3개가 더 곁들어서 저장되어 있었다.

• enumable: **셀수 있는지 여부**(반복문에서 'Kim'을 출력해줄거냐)
• 이게 true면 반복문에서 출력이 된다.
• **일반 자료들은 항상 enumable이 true가 기본값**이다.

2. 부모의 prototype도 반복해준다.

• **hasOwnProperty** : 오브젝트에 해당 key를 가지고 있는지 여부를 true/false로 알려줌
• 내가 가지고 있는 값만 반복하고 싶다면 아래와 같이 작성한다.

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

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

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

3. Object 자료형에만 쓴다

• 정확히 말하자면 enumable한 것에만 쓴다.
• array는 그냥 for, forEach()를 쓴다.

4. for of 반복문 (iterable 전용) - 신문법

적용 대상

• Array
• 문자
• arguments
• NodeList
• Map
• Set

Array

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

for (var 자료 of 어레이) {
	console.log(자료);
}
// 2
// 3
// 4
// 5

문자

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

for (var 자료 of 'ㄴㅇㄹ') {
	console.log(자료);
}
// ㄴ
// ㅇ
// ㄹ

특징

1. iterable한 자료형에만 사용 가능

자바스크립트는 자료형을 만들 때 몰래 심어놓는 flag가 있다(이 자료형은 이런 특징이 있습니다~). 근데 for of의 적용대상에 해당하는 자료형들(Array, string, arguments, NodeList, Map, Set)은 iterable한 특징이 있다.

어레이[Symbol.iterator](); // Array Iterator {}

**이게 있으면 iterable한 자료형이다**. 여기에 for of를 쓸 수 있다.

• **iterable** : 내부 데이터 출력을 도와주는 함수 같은 것.

(+) 참고 NodeList란?

// 상단에 있는 HTML element 여러개를 찾아 가져올 수 있음
document.getElementsByClassName(); // [HTML1, HTML2] -> NodeList
document.querySelectorAll();

이걸 쓰고 나면 대괄호 안에 HTML Elements가 하나씩 들어간다. array는 아니고, 정확히 말하면 NodeList다.