[Statement] JS - for...of 반복문 - 반복 가능 객체의 각 요소애 대해 반복 실행 (= 포어브반복문)

목차

1. for...of 예제 - 배열의 각 요소를 콘솔에 출력
2. for...of 정의
3. for...of 구문
4. for...of 예제 - 배열 반복
5. for...of 예제 - 문자열 반복
6. for...of vs for...in 차이점

for...of 예제 - 배열의 각 요소를 콘솔에 출력

 

const arr = ['HTML', 'CSS', 'JS'];

for (const lang of arr) {

  console.log(lang);

}

 

결과보기

PS. codepen 사이트 좌측 맨 하단 console 버튼 클릭하면 결과값 확인가능

for...of 정의

 

반복 가능 객체 (예: Array, Map, Set, String, TypedArray, arguments 객체 등)의 각 요소에 대해 지정한 코드를 반복 실행.

 

---

 

1.

ES6 (2015년에 JavaScript에 추가)

 

2.

주요 최신 브라우저 모두 지원.

단, IE는 지원 X

 

3. MDN for...of 예제 더 보기
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

 

for...of 구문

 

for (variable of iterable) {

  // 반복 실행할 코드

}

 

---

[매개변수]

 

variable

반복 가능 객체의 각 요소를 할당할 변수

※ var, let, const 등 키워드 사용해 변수 선언 가능

 

iterable

반복 가능한 객체

 

for...of 예제 - 배열 반복

 

<p id="demo"></p>

<script>

const hz = ["홈짱닷컴", "Homzzang.com", "코딩강의"];

let text = "";

for (let x of hz) {

  text += x + " ";

}

document.getElementById("demo").innerHTML = text;

</script>

 

결과보기 (결과값: 홈짱닷컴 Homzzang.com 코딩강의)

for...of 예제 - 문자열 반복

 

<p id="demo"></p>

<script>

let hz = "홈짱닷컴";

let text = "";

for (let x of hz) {

  text += x + " ";

}

document.getElementById("demo").innerHTML = text;

</script>

 

결과보기 (결과값: 홈 짱 닷 컴)

for...of vs for...in 차이점

for...in 반복문

객체의 모든 열거 가능한 속성에 대해 반복. 자세히보기

 

for...of 반복문

컬렉션 전용. 즉, 반복 가능 객체가 지정한 대상만 반복.

 

---

[예제]

 

Object.prototype.objMy = function () {};

Array.prototype.arrMy = function () {};

let nums = [4, 6, 8];

nums.hz = "홈짱닷컴";

for (let i in nums) {

  console.log(i); // 결과값: 0, 1, 2, "hz", "arrMy", "objMy"

}

for (let i of nums) {

  console.log(i); // 결과값: 4, 6, 8

}