JS (Java Script)

반복문 for ~ in , for ~ of __ enumerable 한가? iterable 한가?

GABOJOK 2023. 9. 13. 15:42

일단 enumerable과,  iterable에 대해 알아보자.

1. enumerable

     셀수 있는가

      true 혹은 false로  말해줌.. 

 

2. iterable

      순회 가능한

 

 

for ( let a in  대상 ) 반복문 _____ (object 에서 쓰인다. )

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

    👉 enumerable 한 것인지 확인하는 방법 

          👀👉👉   Object.getOwnPropertyDescriptor(obj, key).enumerable

let obj = {name : 'kim', age : 30};
Object.getOwnPropertyDescriptor(obj, 'name')
{value: 'kim', writable: true, enumerable: true, configurable: true}

  ❓❓ object 아닌데 나는 꼭 for~in 을 사용하고 싶은뎀...??

        👉  for~ in을 사용하고 싶은 그 대상의 요소들을 하나하나 꺼내서 object에 넣어준 다음 사용하면 된다. 

 

 

2. 부모의 프로토타입도 같이 출력해준다. 

나는 해당 오브젝트를 반복하면서 내용을 출력했을 뿐인데, 프로토타입에 숨겨진 내용도 출력이 되버린다. 

 

아래 예제를 봐보자. 

class prototo {}
prototo.prototype.name = 'park';

let obj = new prototo();
console.log(obj);

for(let k in obj){
	if(obj.hasOwnProperty(k)){       //직접 가지고 있는 키값만 출력해줘.
		console.log(obj[k]);       //당연히 없으니까 출력 안됨.
	}
	console.log(obj[k])  // 결과는 park 출력됨. 부모 프로퍼티 가져온거.
}

 

 

 

 

for ( let a  of  대상 ) 반복문 _____ (iterable 한 것들에서 쓰인다. )

 

let aaaaa = [1,2,3,4,5];
for(let key of aaaaa){
	console.log(key)    //1 2 3 4 5
}

 

1. iterable 한 것들은 어떤게 있을까?

 👉 문자열, 배열, arguments, NodeLIst, Map, Set 같은 주어진 순서대로 데이터 표현이 가능한 것들. 

 

간단한 배열로 for of 반복문을 돌린 예시를 봐보자. 

 

2. iterable 한 것인지 어떻게 확인해 볼 수 있을까?

확인하려는 대상[Symbol.iterator]();

을 이용하면 확인 할 수 있다. 

 

예를 들면,  iterable 한 배열과, 아까 위에서 enumerable하다고 다룬 obj를 시도해 보겠다. 

let aaaaa = [1,2,3,4,5];
aaaaa[Symbol.iterator]();

//콘솔창에는
//Array Iterator {}[[Prototype]]: Array Iteratornext: ƒ next()Symbol(Symbol.toStringTag): "Array Iterator"[[Prototype]]: Object
let bbbbb= {name : 'juho'};
bbbbb[Symbol.iterator]();

//콘솔창에는 
//Uncaught TypeError: bbbbb[Symbol.iterator] is not a function

iterator한 array는 잘 확인이 되지만. 

enumerable 한 obj 는 에러가 나온다. 

 

이렇게 우리는 [Symbol.iterator]() 를 통해 iterator한 것인지 확인해 볼 수 있다. 

 

 

 

 

 

🌟기억하자!!🌟

for of iterator 

for in enumerable