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

<p data-ke-size="size16">자바스크립트에서는 forEach, for in, for of와 같은 다양한 종류의 for문이 사용될 수 있습니다. 이번 포스팅에서는 forEach에 대해 알아보도록 하겠습니다. forEach는 배열의 각 요소에 대해 주어진 함수를 실행하는 배열 메서드로 이 메서드를 사용하면 간단하게 배열을 순회하고 각 요소에 대해 지정된 작업을 수행하는 데 사용됩니다. 그냥 for문을 것보다 코드도 더 간결하게 사용할 수 있기 때문에 배열을 순회하는 목적이라면 forEach문의 사용을 추천드립니다.</p>

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

<h2 data-ke-size="size26"><span>&nbsp;자바스크립트 forEach문 사용법&nbsp;</span></h2>
<pre><code>배열.forEach(function(요소, 인덱스, 배열) {
    // 각 요소에 대한 코드
});
</code></pre>
<ul data-ke-list-type="disc">
<li>요소: 배열의 각 요소에 대한 참조.</li>
<li>인덱스: 현재 요소의 인덱스.</li>
<li>배열: forEach를 호출한 배열 자체</li>
</ul>

<h2 data-ke-size="size26"><span>&nbsp;for를 forEach로 바꿔보기 - 배열 요소 출력&nbsp;</span></h2>
<h3 data-ke-size="size23">for문 사용 시</h3>
<p data-height="300" data-default-tab="js,result" data-slug-hash="yLwrXax" data-user="wjdxo513" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/wjdxo513/pen/yLwrXax"> Untitled</a> by wjdxo513 (<a href="https://codepen.io/wjdxo513">@wjdxo513</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>


<p data-ke-size="size16">배열 [1, 2, 3, 4, 5]의 각 요소를 출력하는 예제를 for문에서 forEach문으로 어떻게 바꿀 수 있는지 확인해 보겠습니다. for문을 사용하면 인덱스값으로 사용할 i 변수를 만들고 이 인덱스 i 변수를 기반으로 배열의 각 요소에 접근합니다. array[i] 이렇게 말이죠.</p>

<h3 data-ke-size="size23">forEach문 사용 시</h3>
<p data-height="300" data-default-tab="js,result" data-slug-hash="yLwrXJx" data-user="wjdxo513" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/wjdxo513/pen/yLwrXJx"> forEach</a> by wjdxo513 (<a href="https://codepen.io/wjdxo513">@wjdxo513</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>


<p data-ke-size="size16">forEach문을 사용하면 이렇게 바꿀 수 있습니다. forEach문은 인덱스 변수를 따로 생성할 필요없이 콜백함수를 인자로 받아 배열의 각 요소에 접근합니다. 접근된 배열의 요소는 e로 표현할 수 있습니다. 이렇게 forEach문을 사용하면 반복문을 좀 더 간결하게 만들 수 있습니다.</p>

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

<h2 data-ke-size="size26"><span>&nbsp;forEach문 다양한 예제&nbsp;</span></h2>
<h3 data-ke-size="size23">배열 요소 합산 출력</h3>
<p data-height="300" data-default-tab="js,result" data-slug-hash="QWoPgrV" data-user="wjdxo513" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/wjdxo513/pen/QWoPgrV"> forEach1</a> by wjdxo513 (<a href="https://codepen.io/wjdxo513">@wjdxo513</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="KKEYqeb" data-user="wjdxo513" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/wjdxo513/pen/KKEYqeb"> forEach2</a> by wjdxo513 (<a href="https://codepen.io/wjdxo513">@wjdxo513</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="OJqGgBv" data-user="wjdxo513" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/wjdxo513/pen/OJqGgBv"> forEach3</a> by wjdxo513 (<a href="https://codepen.io/wjdxo513">@wjdxo513</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>


<p data-ke-size="size16">배열의 각 요소들의 길이를 출력합니다.</p>

<h3 data-ke-size="size23">배열의 요소를 2배로 곱해서 새로운 배열 만들기</h3>
<p data-height="300" data-default-tab="js,result" data-slug-hash="ExMJXGj" data-user="wjdxo513" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/wjdxo513/pen/ExMJXGj"> forEach4</a> by wjdxo513 (<a href="https://codepen.io/wjdxo513">@wjdxo513</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>


<p data-ke-size="size16">배열의 각 요소에 2를 곱한 뒤 새로운 배열을 만듭니다.</p>

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

<h3 data-ke-size="size23"><span>&nbsp;forEach문 사용 시 주의사항&nbsp;</span></h3>
<h4 data-ke-size="size20">break와 continue 사용 불가</h4>
<p data-ke-size="size16">forEach 메서드는 중간에 루프를 중단하거나 다음 반복으로 건너뛸 수 있는 break나 continue와 같은 제어 흐름을 지원하지 않습니다. 따라서 이를 구현하려면 일반적으로 for 루프를 사용해야 합니다.</p>

<h4 data-ke-size="size20">비동기 처리 어려움</h4>
<p data-ke-size="size16">forEach는 동기적으로 동작하므로 비동기 작업을 처리하기에는 적합하지 않습니다. 비동기 처리가 필요한 경우에는 for 루프나 for...of 루프 등을 사용하는 것이 더 적절합니다.</p>

<h4 data-ke-size="size20">더 효율적인 방안 - map 메서드 활용</h4>
<p data-ke-size="size16">반복 중에 각 요소를 변경하려는 경우 map 메서드를 고려해볼 수 있습니다. map은 각 배열 요소에 대해 특정 함수를 적용하고 그 결과로 새로운 배열을 생성합니다.</p></div></div>

코딩팩토리

자바스크립트 for문의 종류
for문 : 일반적인 for문으로 블록 안의 코드를 조건에 따라 반복합니다.
forEach문 : 배열에 대해 사용되는 for문으로, 각 배열 요소에 대해 주어진 함수를 실행합니다.
for...in문 : 객체에 대해 사용되는 for문으로, 객체의 열거 가능한 속성을 반복할 때 사용됩니다. 
for...of문 : 배열, 문자열, 맵(Map), 셋(Set) 등의 iterable 객체를 순회할 때 사용되는 for문입니다.
 
자바스크립트에서는 forEach, for in, for of와 같은 다양한 종류의 for문이 사용될 수 있습니다. 이번 포스팅에서는 forEach에 대해 알아보도록 하겠습니다. forEach는 배열의 각 요소에 대해 주어진 함수를 실행하는 배열 메서드로 이 메서드를 사용하면 간단하게 배열을 순회하고 각 요소에 대해 지정된 작업을 수행하는 데 사용됩니다. 그냥 for문을 것보다 코드도 더 간결하게 사용할 수 있기 때문에 배열을 순회하는 목적이라면 forEach문의 사용을 추천드립니다.
 
 
 자바스크립트 forEach문 사용법 
배열.forEach(function(요소, 인덱스, 배열) {
    // 각 요소에 대한 코드
});
요소: 배열의 각 요소에 대한 참조.
인덱스: 현재 요소의 인덱스.
배열: forEach를 호출한 배열 자체
 
 for를 forEach로 바꿔보기 - 배열 요소 출력 
for문 사용 시
See the Pen  Untitled by wjdxo513 (@wjdxo513) on CodePen.
 
배열 [1, 2, 3, 4, 5]의 각 요소를 출력하는 예제를 for문에서 forEach문으로 어떻게 바꿀 수 있는지 확인해 보겠습니다. for문을 사용하면 인덱스값으로 사용할 i 변수를 만들고 이 인덱스 i 변수를 기반으로 배열의 각 요소에 접근합니다. array[i] 이렇게 말이죠.
 
forEach문 사용 시
See the Pen  forEach by wjdxo513 (@wjdxo513) on CodePen.
 
forEach문을 사용하면 이렇게 바꿀 수 있습니다. forEach문은 인덱스 변수를 따로 생성할 필요없이 콜백함수를 인자로 받아 배열의 각 요소에 접근합니다. 접근된 배열의 요소는 e로 표현할 수 있습니다. 이렇게 forEach문을 사용하면 반복문을 좀 더 간결하게 만들 수 있습니다.
 
 
 forEach문 다양한 예제 
배열 요소 합산 출력
See the Pen  forEach1 by wjdxo513 (@wjdxo513) on CodePen.
 
배열의 모든 요소를 합산하여 결과를 출력합니다.
 
배열의 홀수 인덱스 값만 출력
See the Pen  forEach2 by wjdxo513 (@wjdxo513) on CodePen.
 
배열의 홀수 인덱스 값만 출력합니다.
 
배열의 각 요소 길이 출력
See the Pen  forEach3 by wjdxo513 (@wjdxo513) on CodePen.
 
배열의 각 요소들의 길이를 출력합니다.
 
배열의 요소를 2배로 곱해서 새로운 배열 만들기
See the Pen  forEach4 by wjdxo513 (@wjdxo513) on CodePen.
 
배열의 각 요소에 2를 곱한 뒤 새로운 배열을 만듭니다.
 
 
 forEach문 사용 시 주의사항 
break와 continue 사용 불가
forEach 메서드는 중간에 루프를 중단하거나 다음 반복으로 건너뛸 수 있는 break나 continue와 같은 제어 흐름을 지원하지 않습니다. 따라서 이를 구현하려면 일반적으로 for 루프를 사용해야 합니다.
 
비동기 처리 어려움
forEach는 동기적으로 동작하므로 비동기 작업을 처리하기에는 적합하지 않습니다. 비동기 처리가 필요한 경우에는 for 루프나 for...of 루프 등을 사용하는 것이 더 적절합니다.
 
더 효율적인 방안 - map 메서드 활용
반복 중에 각 요소를 변경하려는 경우 map 메서드를 고려해볼 수 있습니다. map은 각 배열 요소에 대해 특정 함수를 적용하고 그 결과로 새로운 배열을 생성합니다.

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

댓글