---
title: yield
slug: Web/JavaScript/Reference/Operators/yield
translation_of: Web/JavaScript/Reference/Operators/yield
---
<div>{{jsSidebar("Operators")}}</div>

<p>Keyword <code>yield</code> digunakan untuk menghentikan sementara dan melanjutkan sebuah fungsi generator ({{jsxref("Statements/function*", "function*")}} atau <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">legacy generator function</a>).</p>

<h2 id="Sintak">Sintak</h2>

<pre class="syntaxbox notranslate">[<em>rv</em>] = <strong>yield</strong> [<em>expression</em>];</pre>

<dl>
 <dt><code>expression</code></dt>
 <dd>Mendefeniskan nilai yang akan dikembalikan melalui <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol">iterator protocol</a>. Apabila diabaikan, maka <code>undefined</code> akan dikembalikan.</dd>
 <dt><code>rv</code></dt>
 <dd>
 <p>Mengembalikan nilai opsional yang diberikan pada generator method <code>next()</code> untuk melanjutkan eksekusinya.</p>
 </dd>
</dl>

<h2 id="Deskripsi">Deskripsi</h2>

<p>Keyword <code>yield </code>menghentikan secara sementara eksekusi dari fungsi generator dan nilai setelah keyword <code>yield</code> dikembalikan pada pemanggil generator tersebut. <code>yield</code> bisa juga disebut sebagai versi generator dari keyword<code>return</code>.</p>

<p>Keyword <code>yield</code> sebenarnya mengembalikan sebuah obyek <code>IteratorResult</code> dengan dua properti, <code>value</code> dan <code>done</code>. Properti<code>value</code> adalah hasi dari evaluasi ekspresi <code>yield</code>, dan <code>done</code> yang <code>false</code>, mengindikasikan bahwa fungsi generator tersebut belum selesai sepenuhnya.</p>

<p>Sekali berhenti pada ekspresi <code>yield</code> , eksekusi dari code generator tersebut akan terus dihentikan sampai generator method <code>next()</code> dipanggil. Setiap kali method generator <code>next()</code> dipanggil, generator melanjutkan eksekusi dan berjalan hingga mencapai salah satu dari kondisi berikut ini :</p>

<ul>
 <li>Sebuah<code>yield</code>, yang menyebabkan generator sekali lagi berhenti sementara dan mengembalikan nilai baru dari generator tersebut. Ketika kemudian<code>next()</code> dipanggil lagi, eksekusi berlanjut dengan statement segera setelah<code>yield</code>.</li>
 <li>{{jsxref("Statements/throw", "throw")}} digunakan untuk melontarkan exception dari generator. Ini menghentikan generator sepenuhnya, dan eksekusi berlanjut pada pemanggil seperti normalnya ketika sebuah exception dilontarkan.</li>
 <li>Akhir dari fungsi generator tersebut tercapai; pada kasus ini, eksekusi dari generator tersebut berakhir dan sebuah <code>IteratorResult</code> dikembalikan pada pemanggilnya dimana <code>value</code> adalah {{jsxref("undefined")}} dan <code>done</code> adalah <code>true</code>.</li>
 <li>Mencapai sebuah statement {{jsxref("Statements/return", "return")}}. Pada kasus ini, eksekusi dari generator tersebut berakhir dan sebuah <code>IteratorResult</code> dikembalikan pada pemanggil dimana <code>value</code> ditentukan oleh statement <code>return</code> dan <code>done</code> adalah <code>true</code>.</li>
</ul>

<p>JIka sebuah nilai opsional diberikan pada generator method <code>next()</code>, nilai tersebut menjadi nilai yang dikembalikan oleh operasi <code>yield</code> dari generator pada saat itu.</p>

<p>Di antara kode generator, operator<code>yield</code> -nya, dan kemampuan untuk menentukan sebua nilai awal baru dengan memberikannya pada {{jsxref("Generator.prototype.next()")}}, generator menawarkan power dan kontrol yang luar biasa.</p>

<h2 id="Contoh">Contoh</h2>

<p>Kode berikut merupakan deklarasi dari sebuah contoh fungsi generator.</p>

<pre class="brush: js notranslate">function* countAppleSales () {
  var saleList = [3, 7, 5];
  for (var i = 0; i &lt; saleList.length; i++) {
    yield saleList[i];
  }
}</pre>

<p>Setelah sebuah fungsi generator didefenisikan, maka fungsi tersebut dapat digunakan untuk menghasilkan sebuah iterator seperti berikut.</p>

<pre class="brush: js notranslate">var appleStore = countAppleSales(); // Generator { }
console.log(appleStore.next()); // { value: 3, done: false }
console.log(appleStore.next()); // { value: 7, done: false }
console.log(appleStore.next()); // { value: 5, done: false }
console.log(appleStore.next()); // { value: undefined, done: true }</pre>

<h2 id="Spesifikasi">Spesifikasi</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spesifikasi</th>
   <th scope="col">Status</th>
   <th scope="col">Komentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('ES2015', '#', 'Yield')}}</td>
   <td>{{Spec2('ES2015')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#', 'Yield')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Kompatabilitas_Browser">Kompatabilitas Browser</h2>

<div class="hidden">Tabel kompatabilitas ini dihasilkan dari struktur data. Jika anda ingin berkontribusi pada data, silahkan lihat <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimkan kami sebuah pull request.</div>

<p>{{Compat("javascript.operators.yield")}}</p>

<h2 id="Catatan_Firefox-specific">Catatan Firefox-specific</h2>

<ul>
 <li>Semenjak Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li>
 <li>Starting with Gecko 33 {{geckoRelease(33)}}, the parsing of the <code>yield</code> expression has been updated to conform with the ES2015 specification ({{bug(981599)}}):
  <ul>
   <li>The expression after the <code>yield</code> keyword is optional and omitting it no longer throws a {{jsxref("SyntaxError")}}: <code>function* countAppleSales() { yield; }</code></li>
  </ul>
 </li>
</ul>

<h2 id="Lihat_juga">Lihat juga</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
 <li>{{jsxref("Statements/function*", "function*")}}</li>
 <li>{{jsxref("Operators/function*", "function* expression")}}</li>
 <li>{{jsxref("Operators/yield*", "yield*")}}</li>
</ul>