for in, for of 반복문이란?

그냥 여러 코드를 반복실행하거나 String또는 Array의 길이를 순회하며,

 

인덱싱 작업을 할 때 for문을 사용하고,

 

Array자료형 안에서 각 인덱스마다 작업을 해줄 때 forEach를 사용한다.

 

하지만 for in, for of라는 반복문도 존재한다.

 

 

먼저 for in 반복문은 딱 Object자료형에서만 사용한다.

 

const obj = { name: 'Jack', age: 27 };

 

이런 객체를...

 

for(let key in obj) {

    console.log(obj[key]);

};

 

이렇게 객체 안의 프로퍼티 value들을 하나씩 뽑아준다.

 

여기서 key는 예상하다시피 객체 안의 프로퍼티들의 key값인데, 임의 변수명으로 저렇게 작성할 수 있다.

 

console.log(obj.key);

 

이렇게 뽑을 수는 없다.

 

 

for in 반복문의 특징은 대상 객체에서 프로퍼티들 중에 enumerable속성이 true인것만 보여준다.

 

위 예시의 객체 obj를 컴퓨터가 읽어 메모리에 올리면 heap영역에 저장 시 저 프로퍼티의 key와 value값들만 저장되는것이 아니다.

 

함께 저장되는 정보들은...

 

console.log(Object.getOwnPropertyDescriptor(obj, 'name'));

 

이렇게 꺼내볼 수 있는데, 인자로 객체 변수명과 프로퍼티 key값을 ''안에 넣어준다.

 

그러면

이러한 속성들이 추가로 나오는데, 이 프로퍼티가 가진 속성들이다.

 

여기서 enumerable이 true인것들만 for in문은 출력이 가능하다.

 

또 for in은 부모 프로토타입에서 물려받은 속성도 출력된다.

 

따라서 해당 객체 고유만의 프로퍼티를 for in으로 출력하고싶다면...

 

const obj = { name: 'Jack', age: 27 };

 

for(let key in obj) {

    if(obj.hasOwnProperty(key) {

        console.log(obj[key]);

    }

};

 

이렇게 hasOwnProperty라는 내장함수를 써서 이 프로퍼티가 부모 프로토타입을 참조해 가져오는 프로퍼티가 아니라

고유의 그 객체 고유의 프로퍼티일 때만 로직을 수행하도록 만들어줘야한다.

 

 

for of 반복문은 obj를 제외하고 배열, 문자, arguments, NodeList, Map, Set 등의 자료형에서 사용가능하다.

 

정확히 말하면 iterable인 자료형들에만 적용이 가능한데,

 

해당 변수가 iterable인 속성을 가지고있는지 확인하려면...

 

const arr = [1, 2, 3, 4, 5];

console.log(arr[Symbol.iterator]());

 

이렇게 확인할 수 있다.

 

결과가 

이렇게 나온다면 iterable 자료형이 맞다라는것이고,

 

for of를 사용할 수 있다.

 

 

결론)

 

1. for in 은 객체 자료형만 사용. 하지만 그 객체의 프로퍼티 중 enumerable 속성이 true여야만 사용 가능.

+ 부모 프로토타입에 있는 프로퍼티까지 꺼내줌.

 

2. for of 는 그 외 대부분의 배열 비스무리한 자료형 + String에 사용 가능. 정확히는 그 자료형이 iterable이어야함.