<div id="readability-page-1" class="page"><div><h4 data-ke-size="size20">자바스크립트 for문의 종류</h4>
<ul data-ke-list-type="disc">
<li>for문 : 일반적인 for문으로 블록 안의 코드를 조건에 따라 반복합니다.</li>
<li>forEach문 : 배열에 대해 사용되는 for문으로, 각 배열 요소에 대해 주어진 함수를 실행합니다.</li>
<li>for...in문 :객체에 대해 사용되는 for문으로, 객체의 열거 가능한 속성을 반복할 때 사용됩니다.&nbsp;</li>
<li>for...of문 :배열, 문자열, 맵(Map), 셋(Set) 등의 iterable 객체를 순회할 때 사용되는 for문입니다.</li>
</ul>

<p data-ke-size="size16">자바스크립트는 경우에따라 forEach, for in, for of와 같은 다양한 종류의 for문이 사용될 수 있는데요. 이번 포스팅에서는 for...of문에 대해 알아보도록 하겠습니다. for...of 문은 ECMAScript 2015(ES6)에서 도입된 반복문으로, iterable 객체를 순회하는 데 사용됩니다. 주로 배열, 문자열, 맵(Map), 셋(Set)처럼 순회 가능한 객체에 대해 사용할 수 있습니다.</p>

<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style8">

<h2 data-ke-size="size26"><span>&nbsp;자바스크립트 for of문 사용법&nbsp;</span></h2>
<pre><code>for (변수 of iterable) {
    // 각 요소에 대한 코드
}
</code></pre>
<ul data-ke-list-type="disc">
<li>변수: 각 반복에서 현재 요소의 값을 할당하는 변수입니다.</li>
<li>iterable: 순회 가능한 객체입니다.</li>
</ul>

<h2 data-ke-size="size26"><span>&nbsp;자바스크립트 for문을 for of문으로 바꿔보기 - Map 객체 순회&nbsp;</span></h2>
<h3 data-ke-size="size23">for문 사용 시</h3>
<p data-height="300" data-default-tab="js,result" data-slug-hash="rNRgwjQ" data-user="sxqouumz-the-reactor" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/sxqouumz-the-reactor/pen/rNRgwjQ"> Untitled</a> by 우정태 (<a href="https://codepen.io/sxqouumz-the-reactor">@sxqouumz-the-reactor</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>

<p data-ke-size="size16">for문을 사용하여 MAP객체의 키,값을 출력하려면 entries() 메서드를 사용해야 합니다. 위와 같이 entries() 메서드로 map의 iterator를 먼저 만들어주고 next() 메서드를 사용하여 맵의 각 키-값을 출력합니다.</p>

<h3 data-ke-size="size23">for of문 사용 시</h3>
<p data-height="300" data-default-tab="js,result" data-slug-hash="jOJowVY" data-user="sxqouumz-the-reactor" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/sxqouumz-the-reactor/pen/jOJowVY"> Untitled</a> by 우정태 (<a href="https://codepen.io/sxqouumz-the-reactor">@sxqouumz-the-reactor</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>


<p data-ke-size="size16">for of문을 사용하면 내부적으로 iterator가 내장되어 있기 때문에 이 부분을 생략하고 진행이 가능합니다. const[key,value] 부분에서 map의 키, 값을 할당하고 화면에 출력하게 됩니다.</p>

<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style8">

<h2 data-ke-size="size26"><span>&nbsp;for of문 다양한 예제&nbsp;</span></h2>
<h3 data-ke-size="size23">문자열을 순회하면서 값 출력하기</h3>
<p data-height="300" data-default-tab="js,result" data-slug-hash="VwROWMv" data-user="sxqouumz-the-reactor" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/sxqouumz-the-reactor/pen/VwROWMv"> for of1</a> by 우정태 (<a href="https://codepen.io/sxqouumz-the-reactor">@sxqouumz-the-reactor</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>

<p data-ke-size="size16">문자열을 순회하면서 값을 출력합니다.</p>


<h3 data-ke-size="size23">배열을 순회하면서 값 출력하기</h3>
<p data-height="300" data-default-tab="js,result" data-slug-hash="ZEPNyXq" data-user="sxqouumz-the-reactor" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/sxqouumz-the-reactor/pen/ZEPNyXq"> for of2</a> by 우정태 (<a href="https://codepen.io/sxqouumz-the-reactor">@sxqouumz-the-reactor</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>

<p data-ke-size="size16">배열을 순회하면서 값을 출력합니다.</p>


<h3 data-ke-size="size23">SET을 순회하면서 값 출력하기</h3>
<p data-height="300" data-default-tab="js,result" data-slug-hash="eYXaReb" data-user="sxqouumz-the-reactor" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/sxqouumz-the-reactor/pen/eYXaReb"> for of3</a> by 우정태 (<a href="https://codepen.io/sxqouumz-the-reactor">@sxqouumz-the-reactor</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>


<p data-ke-size="size16">SET을 순회하면서 값을 출력합니다.</p>

<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style8">

<h3 data-ke-size="size23"><span>&nbsp;for of문 사용시 고려해야 할 점&nbsp;</span></h3>
<h4 data-ke-size="size20">순회 가능한 객체에만 사용이 가능</h4>
<p data-ke-size="size16">for...of는 배열, 문자열 Map, Set처럼 순회 가능한(iterable) 객체에서만 사용이 가능합니다. 순회가 불가능한 객체라고 하면 대표적으로 Object가 있습니다. 본래 객체는 iterator를 사용할 수 없기 때문에 for of를 사용할 수 없고 객체를 순회할 때는 for of문이 아니라 for in문을 사용하는 것이 좋습니다.</p>

<h4 data-ke-size="size20">인덱스 접근 불가</h4>
<p data-ke-size="size16">for of문은 인덱스에 직접 접근할 수 없습니다. 인덱스가 필요한 경우에는 for in문을 사용하거나 그냥 for문을 사용해야 합니다.</p>

<h4 data-ke-size="size20">break와 continue 사용 가능</h4>
<p data-ke-size="size16">forEach문에서는 break와 continue를 사용할 수 없지만 이 for of문에서는 break와 continue를 사용할 수 있습니다. 이 break와 continue를 사용하여 특정 조건에서 반복을 중단하거나 건너뛰는데 사용할 수 있습니다.</p>

</div></div>

코딩팩토리

자바스크립트 for문의 종류
for문 : 일반적인 for문으로 블록 안의 코드를 조건에 따라 반복합니다.
forEach문 : 배열에 대해 사용되는 for문으로, 각 배열 요소에 대해 주어진 함수를 실행합니다.
for...in문 :객체에 대해 사용되는 for문으로, 객체의 열거 가능한 속성을 반복할 때 사용됩니다. 
for...of문 :배열, 문자열, 맵(Map), 셋(Set) 등의 iterable 객체를 순회할 때 사용되는 for문입니다.
 
자바스크립트는 경우에따라 forEach, for in, for of와 같은 다양한 종류의 for문이 사용될 수 있는데요. 이번 포스팅에서는 for...of문에 대해 알아보도록 하겠습니다. for...of 문은 ECMAScript 2015(ES6)에서 도입된 반복문으로, iterable 객체를 순회하는 데 사용됩니다. 주로 배열, 문자열, 맵(Map), 셋(Set)처럼 순회 가능한 객체에 대해 사용할 수 있습니다.
 
 
 자바스크립트 for of문 사용법 
for (변수 of iterable) {
    // 각 요소에 대한 코드
}
변수: 각 반복에서 현재 요소의 값을 할당하는 변수입니다.
iterable: 순회 가능한 객체입니다.
 
 자바스크립트 for문을 for of문으로 바꿔보기 - Map 객체 순회 
for문 사용 시
See the Pen  Untitled by 우정태 (@sxqouumz-the-reactor) on CodePen.
for문을 사용하여 MAP객체의 키,값을 출력하려면 entries() 메서드를 사용해야 합니다. 위와 같이 entries() 메서드로 map의 iterator를 먼저 만들어주고 next() 메서드를 사용하여 맵의 각 키-값을 출력합니다.
 
for of문 사용 시
See the Pen  Untitled by 우정태 (@sxqouumz-the-reactor) on CodePen.
 
for of문을 사용하면 내부적으로 iterator가 내장되어 있기 때문에 이 부분을 생략하고 진행이 가능합니다. const[key,value] 부분에서 map의 키, 값을 할당하고 화면에 출력하게 됩니다.
 
 
 for of문 다양한 예제 
문자열을 순회하면서 값 출력하기
See the Pen  for of1 by 우정태 (@sxqouumz-the-reactor) on CodePen.
문자열을 순회하면서 값을 출력합니다.
 
 
배열을 순회하면서 값 출력하기
See the Pen  for of2 by 우정태 (@sxqouumz-the-reactor) on CodePen.
배열을 순회하면서 값을 출력합니다.
 
 
SET을 순회하면서 값 출력하기
See the Pen  for of3 by 우정태 (@sxqouumz-the-reactor) on CodePen.
 
SET을 순회하면서 값을 출력합니다.
 
 
 for of문 사용시 고려해야 할 점 
순회 가능한 객체에만 사용이 가능
for...of는 배열, 문자열 Map, Set처럼 순회 가능한(iterable) 객체에서만 사용이 가능합니다. 순회가 불가능한 객체라고 하면 대표적으로 Object가 있습니다. 본래 객체는 iterator를 사용할 수 없기 때문에 for of를 사용할 수 없고 객체를 순회할 때는 for of문이 아니라 for in문을 사용하는 것이 좋습니다.
 
인덱스 접근 불가
for of문은 인덱스에 직접 접근할 수 없습니다. 인덱스가 필요한 경우에는 for in문을 사용하거나 그냥 for문을 사용해야 합니다.
 
break와 continue 사용 가능
forEach문에서는 break와 continue를 사용할 수 없지만 이 for of문에서는 break와 continue를 사용할 수 있습니다. 이 break와 continue를 사용하여 특정 조건에서 반복을 중단하거나 건너뛰는데 사용할 수 있습니다.

[JavaScript] 자바스크립트 for of문 사용법 & 예제 정리

댓글