[JS & ES6 신문법 학습] for in / for of 반복문과 enumerable, iterable 속성

javascript에는 반복문이 있다.
요롷게 생겨먹었지.

// 그냥 for 반복문
for (let index = 0; index < array.length; index++) {
  const element = array[index];
}

// forEach() 반복문 (Array 전용)
[1,2,3].forEach()

// for in 반복문(Object 전용)
for (var key in 오브젝트){

}

// for of 반복문(iterable 전용)
for (var key of 오브젝트){

}

반복문은
1. 코드 여러번 실행할 때
2. Array, Object에서 자료 꺼내쓸 때

for in 반복문

var 오브젝트 = { name : "KIM", age : 30}

// for in 반복문(Object 전용)
for (var key in 오브젝트){
  console.log(오브젝트[key])
}

이런식으로 사용하면 된다.

for in 반복문:

1. enumerable 한 것만 반복해 줌

우리가 object 변수를 만들면 사실 key value만 생각하는데 그 안에 더 많은 게 들어있음.

  var 오브젝트 = { name : "KIM", age : 30}
  console.log(Object.getOwnPropertyDescriptor(오브젝트, 'name'))

를 통해 출력해보면

셀 수 있느뇨? 하는 enumeralbe:true가 되어있는 것을 볼 수 있다.
이렇게 enumeralbe:true가 되어있는 것들은 for in 반복문을 쓸 수 있다 생각하면 되겠다.

일반 자료들은 항상 enumerable이 true가 기본값

2. 부모의 prototype도 반복해줌.

class 부모{

}
부모.prototype.name = "Park"

var 오브젝트 = new 부모()

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

위를 보면 오브젝트 자체에는 뭔가 입력한 값이 없지만, class자체가 가진 name으로 인해 콘솔창에 Park이 출력 되는 것을 볼 수 있다.

만약 내가 직접 가지고 있는 값만 반복시키고 싶으면,

오브젝트.hasOwnProperty(key)

를 통해서 내 소유의 값인지 boolean으로 확인해서 진행할 수 있다.

class 부모{

}
부모.prototype.name = "Park"

var 오브젝트 = new 부모()
// var 오브젝트 = { name : "KIM", age : 30}
// console.log(Object.getOwnPropertyDescriptor(오브젝트, 'name'))

// for in 반복문(Object 전용)
for (var key in 오브젝트){
  if(오브젝트.hasOwnProperty(key)){
    console.log(오브젝트[key])
  }
}

아무것도 나오지 않는 것을 확인할 수 있다.

3. 보통 Object 자료형에만 사용함.

for of 반복문

Array, 문자, arguments. NodeList, Map, Set 을 사용할 때, 쓸 수 있다.
for of 반복문은 iterable한 자료형에서만 사용할 수 있다.

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

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

여기서 자료는 어레이 안에 있던 하나하나의 요소를 의미하고,
출력값은 다음과 같다.

array말고 string도 가능함.

for (var 자료 of '로또1등 한 번에 5개 당첨!'){
  console.log(자료)
}

%참고 : NodelList가 무엇인가?
[HTML1, HTML2]
이러한 자료형을 array 비슷하게 생겼지만, NodelList라고 부름 이때 HTML1은 아래와같은 녀석이 될 수 있다.

document.getElementsByClassName()