path: root/files/ko/web/javascript/reference/global_objects/array/foreach/index.html

---
title: Array.prototype.forEach()
slug: Web/JavaScript/Reference/Global_Objects/Array/forEach
tags:
  - Array
  - ECMAScript 5
  - JavaScript
  - Method
  - Prototype
  - Referennce
translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach
---
<div>{{JSRef}}</div>

<p><code><strong>forEach()</strong></code> 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.</p>

<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div>



<h2 id="구문">구문</h2>

<pre class="syntaxbox"><var>arr</var>.forEach(<var>callback(currentvalue[, index[, array]])</var>[, <var>thisArg</var>])</pre>

<h3 id="매개변수">매개변수</h3>

<dl>
 <dt><code>callback</code></dt>
 <dd>각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받습니다.</dd>
 <dd>
 <dl>
  <dt><code>currentValue</code></dt>
  <dd>처리할 현재 요소.</dd>
  <dt><code>index</code> {{optional_inline}}</dt>
  <dd>처리할 현재 요소의 인덱스.</dd>
  <dt><code>array</code> {{optional_inline}}</dt>
  <dd><code>forEach()</code>를 호출한 배열.</dd>
 </dl>
 </dd>
 <dt><code>thisArg</code> {{optional_inline}}</dt>
 <dd><code>callback</code>을 실행할 때 <code>this</code>로 사용할 값.</dd>
</dl>

<h3 id="반환_값">반환 값</h3>

<p>{{jsxref("undefined")}}.</p>

<h2 id="설명">설명</h2>

<p><code>forEach()</code>는 주어진 <code>callback</code>을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않습니다. (예: 희소 배열)</p>

<p><code>callback</code>은 다음 세 인수와 함께 호출됩니다.</p>

<ul>
 <li><strong>요소 값</strong></li>
 <li><strong>요소 인덱스</strong></li>
 <li><strong>순회 중인 배열</strong></li>
</ul>

<p><code>thisArg</code> 매개변수를 <code>forEach()</code>에 제공한 경우 <code>callback</code>을 호출할 때 전달해 <code>this</code>의 값으로 쓰입니다. 전달하지 않으면 <code>undefined</code>를 사용하며, 최종 <code>this</code> 값은 {{jsxref("Operators/this", "함수의 <code>this</code>를 결정하는 평소 규칙", "", 0)}}을 따릅니다.</p>

<p><code>forEach()</code>로 처리할 요소의 범위는 최초 <code>callback</code> 호출 전에 설정됩니다. <code>forEach()</code> 호출을 시작한 뒤 배열에 추가한 요소는 <code>callback</code>이 방문하지 않습니다. 배열의 기존 요소값이 바뀐 경우, <code>callback</code>에 전달하는 값은 <code>forEach()</code>가 요소를 방문한 시점의 값을 사용합니다. 방문하기 전에 삭제한 요소는 방문하지 않습니다.</p>

<p><code>forEach()</code>는 각 배열 요소에 대해 한 번씩 <code>callback</code> 함수를 실행합니다. {{jsxref("Array.prototype.map()", "map()")}}과 {{jsxref("Array.prototype.reduce()", "reduce()")}}와는 달리 {{jsxref("undefined")}}를 반환하기 때문에 메서드 체인의 중간에 사용할 수 없습니다. 대표적인 사용처는 메서드 체인 끝에서 부작용(side effect)을 실행하는 겁니다.</p>

<p><code>forEach()</code>는 배열을 변형하지 않습니다. 그러나 <code>callback</code>이 변형할 수는 있습니다.</p>

<div class="note">
<p>예외를 던지지 않고는 <code>forEach()</code>를 중간에 멈출 수 없습니다. 중간에 멈춰야 한다면 <code>forEach()</code>가 적절한 방법이 아닐지도 모릅니다.</p>

<p>다음 방법으로는 조기에 반복을 종료할 수 있습니다.</p>

<ul>
 <li>간단한 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for">for</a> 반복문</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a>, <a href="/ko/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 반복문</li>
 <li>{{jsxref("Array.prototype.every()")}}</li>
 <li>{{jsxref("Array.prototype.some()")}}</li>
 <li>{{jsxref("Array.prototype.find()")}}</li>
 <li>{{jsxref("Array.prototype.findIndex()")}}</li>
</ul>

<p>다른 배열 메서드 {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}}, {{jsxref("Array.prototype.findIndex()", "findIndex()")}}는 배열 요소를 판별 함수에 전달하고, 그 결과의 참/거짓 여부에 따라 반복의 종료 여부를 결정합니다.</p>
</div>

<h2 id="예제">예제</h2>

<h3 id="초기화하지_않은_값의_반복_생략">초기화하지 않은 값의 반복 생략</h3>

<pre class="brush: js">const arraySparse = [1,3,,7]
let numCallbackRuns = 0

arraySparse.forEach(function(element){
  console.log(element)
  numCallbackRuns++
})

console.log("numCallbackRuns: ", numCallbackRuns)

// 1
// 3
// 7
// numCallbackRuns: 3
// comment: as you can see the missing value between 3 and 7 didn't invoke callback function.</pre>

<h3 id="for_반복문을_forEach로_바꾸기"><code>for</code> 반복문을 <code>forEach()</code>로 바꾸기</h3>

<pre class="brush: js">const items = ['item1', 'item2', 'item3'];
const copy = [];

// 이전
for (let i=0; i&lt;items.length; i++) {
  copy.push(items[i]);
}

// 이후
items.forEach(function(item){
  copy.push(item);
});</pre>

<h3 id="배열_콘텐츠_출력">배열 콘텐츠 출력</h3>

<div class="blockIndicator note">
<p><strong>참고:</strong> {{domxref("console.table()")}}을 사용하면 배열 내용물을 서식에 맞춰 출력할 수 있습니다.</p>

<p>다음 예제는 <code>forEach()</code>를 사용한 다른 방법을 소개합니다.</p>
</div>

<p>다음 코드는 배열의 각 요소에 대해 한 줄을 기록합니다:</p>

<pre class="brush:js">function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

// 인덱스 2는 배열의 그 위치에 항목이 없기에
// 건너뜀을 주의하세요.
[2, 5, , 9].forEach(logArrayElements);
// 기록:
// a[0] = 2
// a[1] = 5
// a[3] = 9
</pre>

<h3 id="thisArg_사용"><code>thisArg</code> 사용</h3>

<p>다음 예제는 배열의 각 항목에서 객체의 속성을 갱신합니다:</p>

<pre class="brush:js">function Counter() {
  this.sum = 0
  this.count = 0
}
Counter.prototype.add = function(array) {
  array.forEach(function(entry) {
    this.sum += entry
    ++this.count
  }, this)
  // ^---- 주의
}

const obj = new Counter()
obj.add([2, 5, 9])
obj.count
// 3
obj.sum
// 16</pre>

<p><code>thisArg</code> 매개변수(<code>this</code>)를 <code>forEach()</code>에 제공했기에, <code>callback</code>은 전달받은 <code>this</code>의 값을 자신의 <code>this</code> 값으로 사용할 수 있습니다. </p>

<div class="note">
<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수 표현식</a>을 사용하여 함수 인수를 전달하는 경우 <code>thisArg</code> 매개변수는 화살표 함수가 {{jsxref("Operators/this", "this")}} 값을 렉시컬(lexical, 정적) 바인딩하기에 생략될 수 있습니다.</p>
</div>

<h3 id="객체_복사_함수">객체 복사 함수</h3>

<p>다음 코드는 주어진 객체의 사본을 만듭니다.</p>

<p>객체 사본을 만드는 방법에는 여러가지가 있습니다, 다음은 그 중 한 방법으로, ECMAScript 5 <code>Object.*</code> 메타 속성 함수를 사용하여 <code>Array.prototype.forEach()</code>가 작동하는 법을 설명하기 위한 코드입니다.</p>

<pre class="brush: js">function copy(obj) {
  const copy = Object.create(Object.getPrototypeOf(obj))
  const propNames = Object.getOwnPropertyNames(obj)

  propNames.forEach(function(name) {
    const desc = Object.getOwnPropertyDescriptor(obj, name)
    Object.defineProperty(copy, name, desc)
  })

  return copy
}

const obj1 = { a: 1, b: 2 }
const obj2 = copy(obj1)      // obj2 looks like obj1 now</pre>

<h3 id="반복_중_배열이_변경으로_인한_반복_생략">반복 중 배열이 변경으로 인한 반복 생략</h3>

<p>다음 예제에서는 <code>"one"</code>, <code>"two"</code>, <code>"four"</code>를 기록합니다.</p>

<p><code>forEach()</code>가 값 <code>"two"</code>를 포함하는 항목에 도달하면 전체 배열의 첫 번째 항목을 제거하여, 나머지 모든 항목이 한 위치 앞으로 이동합니다. 요소 <code>"four"</code>는 이제 배열에서 보다 앞에 위치하므로 <code>"three"</code>는 건너 뜁니다.</p>

<p><code>forEach()</code>는 반복 전에 배열의 복사본을 만들지 않습니다.</p>

<pre class="brush:js">let words = ['one', 'two', 'three', 'four']
words.forEach(function(word) {
  console.log(word)
  if (word === 'two') {
    words.shift()
  }
})
// one
// two
// four</pre>

<h3 id="배열_평탄화">배열 평탄화</h3>

<p>다음 예제는 오직 시연 용으로만 추가한 것으로, 평탄화를 하려면 {{jsxref("Array.prototype.flat()")}}을 사용하세요.</p>

<pre class="brush: js">function flatten(arr) {
  const result = []

  arr.forEach((i) =&gt; {
    if (Array.isArray(i)) {
      result.push(...flatten(i))
    } else {
      result.push(i)
    }
  })

  return result
}

// Usage
const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]]

flatten(nested) // [1, 2, 3, 4, 5, 6, 7, 8, 9]</pre>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">명세</th>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("javascript.builtins.Array.forEach")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>{{jsxref("Array.prototype.find()")}}</li>
 <li>{{jsxref("Array.prototype.findIndex()")}}</li>
 <li>{{jsxref("Array.prototype.map()")}}</li>
 <li>{{jsxref("Array.prototype.every()")}}</li>
 <li>{{jsxref("Array.prototype.some()")}}</li>
 <li>{{jsxref("Map.prototype.forEach()")}}</li>
 <li>{{jsxref("Set.prototype.forEach()")}}</li>
</ul>