[ES6]for in / for of 반복문과 enumerable, iterable 속성

 for in, for of 반복문을 알아봅시다.

그리고 함께 enumerable, iterable 이라는 속성도 알아봅시다. 

 

 

반복문은 용도가 2개라고 보시면 됩니다.

1. 코드 단순 반복

2. 자료형에 담긴 자료들을 하나씩 꺼내고 싶을 때 

사용합니다.

그 중 for in 반복문을 먼저 알아봅시다. 

 

 

 

 

 

for in 반복문은 Object에 사용합니다

 

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

 

이렇게 사용합니다.

(key라는건 변수명입니다. 여러분이 마음대로 작명하시면 됩니다.)

그럼 반복문은 오브젝트라는 자료 내부 데이터 갯수만큼 반복하게 되며

반복할 때마다 key라는 변수는 name, age 이렇게 데이터의 key값이 됩니다. 

 

그럼 반복시마다 변경되는 key 값을 이용하면 오브젝트 내의 자료를 모두 출력할 수 있습니다.

단순하게 오브젝트.key를 콘솔창에 출력하면 되는데, 변수명을 저렇게 쩜찍고 쓸 수는 없으니

오브젝트[key] 라고 사용하시면 됩니다. 

 

 

오브젝트에서 자료 꺼내기 끝입니다. 

 

 

 

 

 

 

for in 반복문의 특징 1. enumerable한 것만 출력해줍니다

 

여러분이 object 자료형을 만들 때

{ name : 'Kim' } 이걸 저장하면 Kim 이라는 자료만 달랑 저장되는게 아닙니다. 

Kim과 함께 비밀스러운 속성들 3개가 저장됩니다. 

 

비밀스런 속성 3개를 출력해보고 싶으면 위처럼 쓰시면 됩니다.

그럼 콘솔창에 뭐 이런게 나오죠?

 

 

이것이 Kim과 함께 몰래 저장되는 속성들입니다.

(그래서 Object 자료형이 좀 무겁습니다)

여기서 enumerable이라는게 있는데, 이게 true인 자료들만 for in 반복문이 출력할 수 있습니다.

이걸 강제로 false로 만들면 for in 반복문이 거릅니다. 

아무튼 이런 동작원리를 가진게 바로 for in 반복문입니다. 

 

 

* enumerable을 번역하면 '셀수있는' 이라는 뜻입니다.

 

 

 

 

 

for in 반복문의 특징 2. 부모의 prototype에 저장된 것도 출력해줍니다.

 

object의 부모의 유전자에 있는 속성도 반복문으로 출력해줍니다.

진짜인지 한번 실험해봅시다. 

 

Kim이라는 자료는 부모가 가지고 있는 것인데도 출력해줍니다.

이게 단점입니다. 

이런게 싫으시다면 if문을 추가해주셔야합니다. 

 

 

오브젝트.hasOwnProperty()라는 함수는

오브젝트가 이 key값을 직접 가지고 있냐라고 물어보는 함수입니다. 

갖고 있으면 true, 없으면 false를 뱉어줍니다. 

그래서 내가 가진 것만 반복시키고 싶으면 이걸 꼭 쓰셔야합니다. 

 

 

 

 

 

 

for of 반복문 

 

사용해봅시다. for in 반복문과 매우 유사합니다. 

이러면 어레이 안에 있던 모든 자료를 하나씩 콘솔창에 출력할 수 있군요.

array 자료형 뿐만 아니라 

array, 문자, arguments, NodeList, Map, Set 이라는 자료형에 적용할 수 있는 반복문입니다. 

 

문자도 가능하다고요?

네  가능합니다. 문자는 마치 배열과 같은 구조라고 다른 ES6포스팅에서 살펴본적이 있습니다.

 

 

 

 

근데 정확히 말하면 iterable인 자료형들에만 적용가능한 반복문입니다.

iterable한 자료형이 뭐냐면 

[Symbol.iterator]() 이라는 일종의 메소드를 가지고 있는 자료형들을 뜻합니다. 

진짜 이런 괴상한게 있는지 출력만 해보도록 합시다. 

 

 

array 자료형 뒤에 붙이면 뭔가 출력되긴 하죠?

문자도 그렇습니다. 

실은 반복문 출력을 도와주는 일종의 함수인데 실용성은 없어서 깊게 이해할 필요는 없고 

이걸 가지고 있으면 for of 반복문을 쓸 수 있구나~라고만 아시면 됩니다. 

 

 

 

for of는 NodeList라는 곳에도 사용할 수 있는데

우리가 흔히 document.getElementsByClassName()이나 document.querySelectorAll() 이런 셀렉터로 찾은 요소들이

[] 대괄호안에 담겨오는데 array는 아니고 NodeList라는 자료형이라고 부릅니다. 

NodeList에 있는 HTML요소들을 하나씩 꺼내서 처리할 때

매우 자주 쓸 수 있는 반복문이라고 보시면 됩니다. 

(하지만 for of의 호환성 주의)

 

 

 

 

새로운 반복문 배운 기념으로 연습이나 해봅시다. 

 

Q1. for of 반복문을 이용해서

2단부터 9단까지의 구구단을 콘솔창에 한번 출력해보십시오.

2 x 1 = 2

2 x 2 = 4 

...

9 x 9 = 81

이런 문자를 쭉 9단까지 출력해보시면 되겠습니다. 

 

 

 

 

 

 

 

Q. 어떤 놈이 key값 마지막 부분에 오타를 섞어놨습니다.

key값 마지막에 한자릿수 숫자가 섞여있으면 그걸 다 제거하고 싶습니다. 

어떻게 코드를 짜면 될까요? 

마지막 글자가 숫자인지 판단하는 방법도 잘 찾아봐야겠군요.

 

(예시)

array안의 object안에 들어있는 

name1 : 'chair' 이게

name : 'chair' 이렇게 숫자만 깔끔하게 없어져야합니다.

 

 

 

 

 

 

출처 : 코딩애플의 매우쉽게 이해하는 JavaScript 객체지향 & ES6 신문법