[JS ES6]-[21] enumerable, iterable(for in/ for of) 이해하기

 

안녕하세요.

이번 글에서는 자바스크립트에서의  enumerable, iterable(for in/ for of) 핵심만 알려드리겠습니다.

 

1. 알아야 하는 이유

자바스크립트 반복문에는 for, forEach 등이 있습니다.

근데 for in/ for of 를 사용해서도 반복을 구현할 수 있는데요.

 

 

두 반복문의 차이를 알려면 enumerable, iterable 속성을 알아야 합니다.

오늘 2가지 속성을 배워 for in/ for of를 언제 쓰는지 정확히 이해해 봐요!

 

 

2. for in - enumerable

2.1 사용이유

for in 반복문은 객체 값들을 반복하고 싶을 때 사용합니다.

 

 

var obj = {num1: 1, num2: 2};

for(let key in obj){
  console.log(obj[key]);
}

for in을 사용하니 객체 안의 값들을 반복할 수 있네요!

 

 

근데 이 for in에는 2가지 특징이 있는데요.

1. enumerable 한 것들만 반복
2. 부모 prototype 값도 출력

 

위 for in의 2가지 특징에 대해서 하나씩 알아봐요!

 

2.2 enumerable(셀수있는)한 것들만 반복

객체에 값을 저장할 때, 값만 저장되지 않고, 3가지 속성이 몰래 저장되는데요.

그 속성을 알려면 getOwnPropertyDescriptor을 사용하면 됩니다.

 

 

var obj = {name: 'kim'};

console.log(Object.getOwnPropertyDescriptor(obj , 'name'))
//{value: 'kim', writable: true, enumerable: true, configurable: true}

위처럼 객체에 값을 저장하면 3가지 속성이 몰래 저장됩니다.

현재는 name의 enumerable속성이 true여서, for in 반복문에서 반복이 됐었네요!

 

 

만약 enumerable 속성을 강제로 false로 만들면 반복이 되지 않아요!

 

 

2.3 부모 prototype 값도 출력

실제로 부모 prototype에 있는 값을 출력하는지 실험해 보겠습니다.

 

 

class parent{};
parent.prototype.name = 'kim';

var obj = new parent();

for (var key in obj) {
  console.log(obj[key]);  //kim
}

객체 안의 값만 출력할 거라 생각했는데,

prototype값까지 출력하면 곤란하겠죠?

 

 

이럴 땐 객채가 직접 가지고 있는지 ture, false를 내뱉어 주는

hasOwnProperty를 사용하면 됩니다.

 

 

for (var key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(obj[key]);  //아무것도 출력안됨
  }
}

그러니 객체 안의 값만 확실하게 반복하고 싶다면 hasOwnProperty를 쓰면 됩니다!

 

 

3. for of - iterable(반복할 수 있는)

iterable인 객체를 반복할 수 있습니다.

예를 들어 배열, 문자, arguments, Map, Set, NodeList 등이 있습니다.

 

 

const arr = [1,2,3];
for (var data of arr) {
  console.log(arr);  //1 2 3
}

iterable은 반복 가능한 객체를 의미하는데요.

그냥 [Symbol.iterator]()라는 메서드를 가지고 있는 자료형이라고 생각하시면 됩니다.

 

 

const arr = [1,2,3];
console.log( arr[Symbol.iterator]() );
//Array Iterator {}

 

 

그냥 [Symbol.iterator]()를 가지고 있으면,

“for of로 반복할 수 있겠구나”라고 생각하시면 됩니다.