Enjoy Programming

[ES6] For ...of 본문

JavaScript/Vanilla Js

[ES6] For ...of

LEETAEEON 2021. 6. 11. 13:53

이번에는 새로 추가된 반복문인 For ...of를 살펴보자

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of

 

for...of - JavaScript | MDN

for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를

developer.mozilla.org

mdn - for ...of명령문은 반복가능한(iterable) 객체(array, map, set, string. typedarray, arguments 등등)에 대해서

반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성한다.

기본적인 반복문인 for 루프, forEach루프와 비교한 코드이다.

forEach도 간단하고 좋지만 for...of구문도 짧고 좋다.

 

but @!  forEach는 배열의 형태만 가능한 반면 for..of루프는 string~ nodelist, map, typedarray등등 여러곳에서 사용이 가능하다.

또한 while문처럼 break도 가능하다~!

 

- for ...of 와 for...in의 차이

for ..in루프는 객체의 모든 열거가능한 속성에 대해 반복한다.

for...of는 컬렉션 전용이다. 모든 객체보다는 [symbol.iteror]속성이 있는 모든 컬렉션 요소에 대해 이방식으로 반복한다.

mdn의 예제를 가져왔는데.

for ...in의 경우 추가된 object와 열거가능한 모든 속성에대해서 반복을 했지만

of는 기존 3 , 5 , 7만 반복했다. 어느정도 차이는 알겠는데

 

상단 두 코드는 어떻게 열거가 된건지....

'JavaScript > Vanilla Js' 카테고리의 다른 글

class static method & freeze() & values() & keys()  (0) 2021.06.14
[ES6] Promises  (0) 2021.06.12
[ES6] rest + spread + destructure  (0) 2021.06.06
[ES6] Rest  (0) 2021.06.06
[ES6] Spread  (0) 2021.06.06