일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- frontend
- HTML
- clonecoding
- form
- Mongoose
- nodejs
- TypeScript
- node.js
- javscript
- CSS
- JavaScript
- ES6
- 자바스크립트
- GRID
- express
- Session
- DART
- pug
- react
- API
- backend
- Flutter
- NextJs
- 리액트
- Component
- CLONE
- ECMAScript
- MongoDB
- graphQL
- heroku
- Today
- Total
Enjoy Programming
[ES6] For ...of 본문
이번에는 새로 추가된 반복문인 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 |