[자바스크립트]for in / for of 반복문과 enumerable, iterable 속성
for...of 는 배열의 반복에서 사용되고,
for...in은 객체의 반복에서 사용된다.
✔for in 반복문
객체에 주로 사용합니다.
즉, 객체 자료형에 자료들을 하나씩 꺼내고 싶을때 사용을 하게 되는데요.
var 오브젝트 = { name : 'Kim', age : 30 };
for (var key in 오브젝트) {
console.log(key,오브젝트[key]); //key kim age 30
}오브젝트 라는 객체를 생성 후
for(key in 객체명) {} 형태로 for문을 돌리고 console.log를 찍어보면 key 값에 객체의 key가 들어가게 됩니다.
키값과 밸류를 같이 보고 싶으시다면 key와 밸류값에 접근하는 방법인 객체명[키값]을 입력 하면 됩니다.
for in 반복문 특징
(1)enumerable한 것들만 출력합니다.
enumerable이란?
- 객체자료형을 만들때 단순히 개발자가 적은 키밸류값만 저장되는 것이 아닙니다. 그 외에 숨겨진 속성 3개가 같이 저장됩니다. 그것을 확인해보기 위해선 앞서 만든 객체를 이어서 다음과 같이 코딩합니다.
var 오브젝트 = { name : 'Kim', age : 30 };
console.log( Object.getOwnPropertyDescriptor(오브젝트, 'name') );{value: "Kim", writable: true, enumerable: true, configurable: true}여기서 enumerable이라는게 있는데, 이것은 객체의 프로토타입 체인 상에 존재하는 모든프로토타입 프로퍼티 중에서 프로퍼티 어트리 뷰트 [[Eumerable]]값이 true인 자료들만 for in 반복문이 출력할 수 있습니다.
* enumerable을 번역하면 '셀수있는' 이라는 뜻입니다.
(2)객체의 prototype도 반복문으로 출력이 됩니다.
class 부모 {
}
부모.prototype.name = 'Park';
var 오브젝트 = new 부모();
for (var key in 오브젝트) {
console.log(오브젝트[key]);
}오브젝트.hasOwnProperty()라는 함수는
오브젝트가 이 key값을 직접 가지고 있냐라고 물어보는 함수입니다.
갖고 있으면 true, 없으면 false를 뱉어줍니다.
그래서 내가 가진 것만 반복시키고 싶으면 이걸 꼭 쓰셔야합니다.
✔for of 반복문
for of 반복문은 for in 반복문과 유사하지만 배열에 주로 사용합니다.즉, 배열 안에에 자료들을 하나씩 꺼내고 싶을때 사용하는 것입니다.
배열 뿐만 아니라, 문자, arguments, NodeList(getElementByClassName,querySelectorAll),Map, Set과 같은 자료형에도 사용이 가능합니다. (즉 ,iterable인 자료형들에만 적용 가능)
이터러블(interable)
이터러블은 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체를 말한다
즉 이터러블(interable)이란 자료를 반복할 수 있는 객체를 말하는 것이다.
예를들어
var 어레이 = [2,3,4,5];
console.log( 어레이[Symbol.iterator]() );위 예제의 해당 배열에 Symbol.iterator이라는 메서드를 출력하면
Array Iterator {} 이라는 이상한 것이 출력이됩니다.
즉,해당 배열은 Array.prototype의 Symbol.iterator 메서드를 상속받는 이터러블 이다.
const array = [1, 2, 3];
// 배열은 Symbol.iterator 메소드를 소유한다.
// 따라서 배열은 이터러블 프로토콜을 준수한 이터러블이다.
console.log(Symbol.iterator in array); // true
// 이터러블 프로토콜을 준수한 배열은 for...of 문에서 순회 가능하다.
for (const item of array) {
console.log(item);
}