JavaScript(for in/for of 반복문)

for in 반복문

for in 반복문은 Object 자료형에 저장된 자료들을 하나씩 꺼내고 싶을 때 사용합니다.

반복문은 오브젝트 자료 내부 데이터 갯수만큼 반복하며, 반복할 때마다 변수는 데이터의 key 값이 됩니다. 

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

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

 

for in 반복문의 특징으로는 enumerable 속성을 가진 것만 출력해줍니다.

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

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

위의 예제와 같이 오브젝트에 getOwnPropertyDescriptor 이라는 함수를 사용해보면 여러 가지 속성을 확인할 수 있는데, 여기서 enumerable 값이 true일 때만, for in 반복문이 출력할 수 있습니다.

 

for in 반복문의 다른 특징으로는 부모의 prototype에 저장된 값도 출력해 준다는 것입니다.

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

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

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

예제를 확인해보면, 부모 class 를 만들고 protype에 name 이라는 자료를 저장한 것을 볼 수 있습니다.

그리고 부모 class 를 상속한 오브젝트라는 변수를 생성하고 반복문을 돌리면 부모 class 의 자료까지 출력하고 있습니다.

 

이렇게 부모 class의 상속된 값까지 출력하는 것을 막고 싶다면, 오브젝트.hasOwnProperty() 라는 함수를 사용할 수 있습니다.

이 함수는 오브젝트가 key 값을 직접 가지고 있는지 확인하는 함수로 가지고 있다면 true, 없다면 false를 반환합니다.

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

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

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

 

 

for of 반복문

for of 반복문은 array, 문자, argument, NodeList, Map, Set 자료형과 같이 순회 가능한(iterable) 객체를 반복할 때 사용할 수 있습니다.

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

for (var 글자 of '안녕') {
  console.log(글자);
}
// 안
// 녕