Terima kasih telah menonton Google I/O. Tonton konten secara on-demand.

Halaman ini diterjemahkan oleh Cloud Translation API.

Alur kontrol

Alur kontrol adalah urutan eksekusi penafsir JavaScript pernyataan pribadi Anda. Jika skrip tidak menyertakan pernyataan yang mengubah alurnya, itu adalah dieksekusi dari awal hingga akhir, satu baris pada satu waktu. Struktur kontrol yang digunakan untuk menentukan apakah satu set pernyataan dieksekusi atau tidak berdasarkan serangkaian kriteria yang ditentukan, mengeksekusi serangkaian pernyataan berulang kali, atau urutan pernyataan.

Pernyataan bersyarat

Pernyataan bersyarat menentukan apakah kode harus dieksekusi berdasarkan satu atau beberapa kondisi lainnya. Pernyataan kondisional mengeksekusi kode yang dikandungnya jika kondisi terkait (atau kumpulan kondisi) bernilai true. Jika tidak, kode dilewati.

`if`…`else`

Pernyataan if mengevaluasi kondisi di dalam tanda kurung yang cocok yang mengikuti. Jika kondisi di dalam tanda kurung bernilai true, atribut atau pernyataan blokir yang mengikuti tanda kurung yang cocok dieksekusi:

if ( true ) console.log( "True." );
> "True."

if ( true ) {
    const myString = "True.";
    console.log( myString );
}
> "True."

Jika kondisi di dalam tanda kurung bernilai false, pernyataan yang mengikutinya, akan diabaikan:

if ( false ) console.log( "True." );

Kata kunci else yang tepat setelah pernyataan if dan kata kunci yang dieksekusi bersyarat menentukan pernyataan yang akan dieksekusi jika Kondisi if bernilai false:

if ( false ) console.log( "True." )''
else console.log( "False" );
> "False."

Untuk merangkai beberapa pernyataan if, Anda dapat membuat pernyataan yang dijalankan bersyarat setelah else pernyataan if lainnya:

const myCondition = 2;
if ( myCondition === 5 ) console.log( "Five." );
else if ( myCondition === 2 ) console.log( "Two." );

Kami sangat menyarankan penggunaan sintaks{i> block statement<i} dengan mengikuti kondisional untuk meningkatkan keterbacaan, tetapi klausa else if sering kali merupakan pengecualian untuk hal ini:

if ( myCondition === 5 ) {
    console.log( "Five." );
} else if ( myCondition === 3 ) {
    console.log( "Three" );
} else {
    console.log( "Neither five nor three." );
}
> "Neither five nor three."

Operator ternary

if mengeksekusi pernyataan secara bersyarat. Operator ternary (lebih akurat tetapi kurang umum disebut operator bersyarat terner) adalah singkatan yang digunakan untuk mengeksekusi ekspresi secara bersyarat. Sesuai dengan namanya, ternary operator adalah satu-satunya operator JavaScript yang menggunakan tiga operand:

Kondisi yang akan dievaluasi, diikuti dengan tanda tanya (?).
Ekspresi yang akan dieksekusi jika kondisi bernilai true, diikuti dengan titik dua (:).
Ekspresi yang akan dieksekusi jika kondisi bernilai false.

Hal ini sering digunakan untuk menetapkan atau meneruskan nilai secara bersyarat:

const myFirstResult  = true  ? "First value." : "Second value.";
const mySecondResult = false ? "First value." : "Second value.";

myFirstResult;
> "First value."

mySecondResult;
> "Second value."

`switch`…`case`

Gunakan pernyataan switch untuk membandingkan nilai ekspresi dengan daftar nilai potensial yang ditentukan menggunakan satu atau beberapa kata kunci case. Sintaks ini adalah tidak biasa karena berasal dari beberapa keputusan desain JavaScript yang paling awal. Sintaksis switch...case menggunakan kata kunci switch, diikuti dengan ekspresi untuk dievaluasi dan digabungkan dalam tanda kurung, diikuti oleh sepasang tanda kurung kurawal yang cocok. Isi switch dapat berisi case kata kunci, biasanya satu atau beberapa, diikuti dengan ekspresi atau nilai, diikuti dengan titik dua (:).

Saat penafsir mencapai case dengan nilai yang cocok dengan ekspresi yang dievaluasi dalam tanda kurung setelah kata kunci switch, model ini akan mengeksekusi pernyataan yang mengikuti klausa case tersebut:

switch ( 2 + 2 === 4 ) {
  case false:
    console.log( "False." );
  case true:
    console.log( "True." );
}
> "True."

Semua pernyataan setelah case yang cocok akan dijalankan, meskipun jika yang disertakan dalam pernyataan blok.

switch ( 2 + 2 === 4 ) {
    case false:
    console.log( "False." );
  case true:
    let myVariable = "True.";
    console.log( myVariable );

}
> "True."

Salah satu kesalahan penggunaan switch…case adalah, setelah kecocokan ditemukan, Penerjemah JavaScript mengeksekusi apa pun pernyataan yang mengikuti case yang cocok, bahkan yang ada dalam klausa case lainnya. Hal ini disebut "tumpang-tindih" ke case berikutnya:

switch ( 2 + 2 === 7 ) {
    case false:
    console.log( "False." );
  case true:
    console.log( "True." );
}
> "False."
> "True."

Untuk mencegah kegagalan, akhiri setiap kasus dengan kata kunci break, yang langsung menghentikan evaluasi isi switch:

switch ( 2 + 2 === 7 ) {
    case false:
    console.log( "False." );
    break;
  case true:
    console.log( "True." );
    break;
}
> "False."

Jika tidak ada case yang cocok dengan nilai kondisional, switch akan memilih default jika ada:

switch ( 20 ) {
    case 5:
    console.log( "The value was five." );
    break;
  case 10:
    console.log( "The value was ten." );
    break;
  default:
    console.log( "The value was something unexpected." );
}
> "The value was something unexpected."

Namun, fallback juga berlaku untuk default, yang berpotensi menyebabkan hasil yang tidak diharapkan. Untuk memperbaikinya, akhiri pernyataan default Anda dengan break, atau menempatkannya di urutan terakhir dalam daftar kasus.

switch ( 20 ) {
  default:
    console.log( "The value was something unexpected." );
  case 10:
    console.log( "The value was ten." );
    break;
  case 5:
    console.log( "The value was five." );
    break;
}
> The value was something unexpected.
> The value was ten.

Karena klausa case tidak memerlukan pernyataan blokir untuk pengelompokan beberapa pernyataan, klausa case dan default tidak dibuat cakupan leksikal mandiri:

let myVariable;
switch ( true ) {
  case true:
    let myVariable = "True.";
    break;
  default:
    let myVariable = "False.";
    break;
}
> Uncaught SyntaxError: redeclaration of let myVariable

Untuk mengelola cakupan, gunakan pernyataan blok:

let myVariable;
switch ( true ) {
  case true: {
    let myVariable = "True.";
    break;
  }
  default: {
    let myVariable = "False.";
    break;
  }
}

Loop dan iterasi

{i>Loop <i}memungkinkan Anda mengulangi serangkaian pernyataan selama suatu kondisi terpenuhi, atau hingga suatu kondisi terpenuhi. Menggunakan loop untuk menjalankan serangkaian petunjuk yang telah diperbaiki berkali-kali, hingga hasil tertentu tercapai, atau hingga penafsir mencapai akhir dari struktur data iterable (misalnya, elemen akhir dalam array, peta, atau set, properti akhir objek, atau karakter terakhir dalam suatu {i>string<i}).

Pengulangan menginterupsi bagian "atas ke bawah" alur eksekusi skrip dengan melakukan iterasi atas satu set pernyataan hingga satu atau lebih kondisi terpenuhi, atau tidak lagi dipenuhi, tergantung pada sintaks yang digunakan untuk membuat loop. Setelah loop berakhir, eksekusi dilanjutkan ke pernyataan yang mengikutinya. Dalam contoh berikut, pernyataan dalam isi loop dieksekusi tiga kali sebelum penerjemah akan melanjutkan:

let iterationCount = 0;
console.log( "Pre-loop." );
while( iterationCount < 3 ) {
  iterationCount++;
  console.log( "Loop iteration." );
}
console.log( "Continuing on." );
> "Pre-loop."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
> "Continuing on."

Jika kondisi tidak dapat dipenuhi selama eksekusi loop, loop akan berlanjut. tanpa batas waktu. Loop tak terbatas ini adalah kesalahan pemrograman umum yang dapat menyebabkan thread eksekusi utama untuk menjeda tanpa batas waktu, atau bahkan membuat tab browser error.

Contoh berikut dijalankan selama nilai boolean true tetap ada true. Karena nilai boolean tidak dapat diubah, hal ini menciptakan loop terus-menerus.

console.log( "Pre-loop." );
while( true ) {
console.log( "Loop iteration." );
}
> "Pre-loop."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
…

Hindari loop tanpa henti dalam kode produksi Anda. Jika Anda secara tidak sengaja membuat satu selama pengembangan, Anda dapat memperbaikinya dengan menutup tab {i>browser<i} yang sedang dijalankan , memperbarui kode Anda sehingga loop tidak lagi tak terbatas, dan membuka kembali kami.

`while`

Loop while dibuat menggunakan kata kunci while, diikuti dengan sepasang cocok dengan tanda kurung yang berisi kondisi yang akan dievaluasi. Jika yang ditentukan kondisi awalnya bernilai true, pernyataan (atau pernyataan blokir) yang mengikuti tanda kurung itu dieksekusi. Jika tidak, loop tidak pernah berjalan. Setelah setiap iterasi, kondisi akan dievaluasi ulang. Jika masih true, loop berulang.

let iterationCount = 0;
while( iterationCount < 3 ) {
  iterationCount++;
  console.log( `Loop ${ iterationCount }.` );
}
> "Loop 1."
> "Loop 2."

Jika penafsir menemukan pernyataan continue dalam loop while, penafsir akan menghentikannya. iterasi, mengevaluasi ulang kondisinya, dan melanjutkan loop jika memungkinkan:

let iterationCount = 0;
while( iterationCount <= 5 ) {
  iterationCount++;
  if( iterationCount === 3 ) {
    continue;
  }
  console.log( `Loop ${ iterationCount }.` );
}
console.log( "Loop ended." );
> "Loop 1."
> "Loop 2."
> "Loop 4."
> "Loop 5."
> "Loop ended."

Jika penafsir menemukan pernyataan break dalam loop while, iterasi tersebut berhenti dan kondisi tidak dievaluasi ulang, sehingga penerjemah dapat melanjutkan:

let iterationCount = 1;
while( iterationCount <= 5 ) {
  if( iterationCount === 3 ) {
    console.log(`Iteration skipped.``);`
    break;
  }
  console.log( `Loop ${ iterationCount }.` );
  iterationCount++;
}
console.log( "Loop ended." );
> "Loop 1."
> "Loop 2."
> "Iteration skipped.
> "Loop ended."

Anda dapat menggunakan while untuk melakukan iterasi beberapa kali, seperti yang terlihat dalam contoh sebelumnya, tetapi kasus penggunaan yang paling umum untuk while adalah loop panjang tidak tentu:

let randomize = () => Math.floor( Math.random() * 10 );
let randomNum = randomize();
while( randomNum !== 3 ){
  console.log( `The number is not ${ randomNum }.` );
  randomNum = randomize();
}
console.log( `The correct number, ${ randomNum }, was found.` );
> "The number is not 0."
> "The number is not 6."
> "The number is not 1."
> "The number is not 8."
> "The correct number, 3, was found."

`do`…`while`

do...while adalah varian dari loop while yang menggunakan kondisional evaluasi terjadi di akhir setiap iterasi loop. Ini berarti body loop selalu dieksekusi minimal sekali.

Untuk membuat loop do...while, gunakan kata kunci do yang diikuti dengan pernyataan (atau pernyataan blok) yang akan dijalankan pada setiap iterasi loop. Segera setelah pernyataan itu, tambahkan while dan cocok dengan tanda kurung yang berisi kondisi yang akan dievaluasi. Kapan kondisi ini tidak lagi bernilai true, loop akan berakhir.

let iterationCount = 1;
do {
  console.log( `Loop ${ iterationCount }.` );
  iterationCount++;
} while ( iterationCount < 3 );
> "Loop 1."
> "Loop 2."
> "Loop 3."

Seperti halnya loop while, kasus penggunaan yang paling umum untuk do...while adalah loop dari panjang tidak tentu:

let randomNum;
do {
  randomNum = ( () => Math.floor( Math.random() * 10 ) )();
  console.log( `Is the number ${ randomNum }?` );
} while ( randomNum !== 3 );
console.log( `Yes, ${ randomNum } was the correct number.` );
> "Is the number 9?"
> "Is the number 2?"
> "Is the number 8?"
> "Is the number 2?"
> "Is the number 3?"
> "Yes, 3 was the correct number."

`for`

Gunakan loop for untuk melakukan iterasi pada kuantitas yang diketahui. Dalam codebase lama, ini adalah yang sering digunakan untuk mengulangi elemen dalam sebuah array.

Untuk membuat loop for, gunakan kata kunci for, yang diikuti dengan sepasang tanda kurung yang menerima tiga ekspresi berikut secara berurutan dan dipisahkan oleh titik koma:

Ekspresi yang akan dievaluasi saat loop dimulai
Kondisi yang menentukan apakah loop harus dilanjutkan atau tidak
Ekspresi yang akan dieksekusi pada akhir setiap loop

Setelah tanda kurung ini, tambahkan pernyataan (biasanya pernyataan blokir) menjadi yang dijalankan selama loop.

for( let i = 0; i < 3; i++ ) {
  console.log( "This loop will run three times.")
}

Ekspresi pertama melakukan inisialisasi variabel yang bertindak sebagai penghitung. Ini ekspresi dievaluasi sekali, sebelum iterasi pertama loop. Anda dapat lakukan inisialisasi variabel ini menggunakan let (atau var, secara historis) seperti yang lainnya variabel, dan cakupannya adalah isi dari loop. Variabel-variabel ini dapat memiliki ID yang valid, tetapi sering disebut i untuk "iterasi" atau "indeks". Hal ini tampaknya bertentangan dengan praktik terbaik untuk nama ID yang dapat diprediksi, tetapi konvensi ini cukup mapan untuk jelas bagi pengembang lain di secara sekilas. Karena koleksi yang diindeks tidak diindeks, variabel ini hampir selalu memiliki nilai awal 0.

Seperti halnya bentuk loop lainnya, kondisinya adalah ekspresi yang menentukan apakah loop harus dijalankan. Ini paling sering digunakan untuk menetapkan nilai ke penghitung iterasi. Penafsir mengevaluasi kondisi sebelum mengeksekusi loop for untuk pertama kalinya.Jika kondisi awal tidak dievaluasi ke true, isi loop tidak dijalankan.

Ekspresi akhir dieksekusi pada akhir setiap iterasi melalui loop. Ini biasanya digunakan untuk menambah {i>ID <i}satu per satu.

Anda akan sering melihat loop for melakukan iterasi melalui array di codebase. Dalam kasus ini, kondisi yang ditentukan untuk melanjutkan loop adalah jumlah iterasi kurang dari atau sama dengan panjang array yang diiterasi dilewatkan. Variabel yang digunakan untuk melacak jumlah iterasi ini digunakan untuk melihat nilai yang terkait dengan indeks itu dalam {i>array<i}, memungkinkan setiap elemen dalam himpunan (array) yang akan ditindaklanjuti secara berurutan:

var myArray = [ true, false, true ];
for( let i = 0; i <= myArray.length; i++ ) {
  console.log( myArray[ i ] );
}
> true
> false
> true

Pendekatan ini tidak lagi digunakan dan mendukung pendekatan yang lebih modern untuk melakukan loop melalui struktur data yang dapat dikonversi.

`for` [...] `of` [...]

Gunakan loop for...of... untuk melakukan iterasi pada nilai yang disimpan di struktur data iterable, seperti array, set, atau peta.

Loop for...of... menggunakan kata kunci for diikuti dengan sepasang tanda kurung berisi variabel, diikuti dengan of, lalu struktur datanya akan diiterasi berakhir. Variabel dapat berupa deklarasi yang dijalankan di sini menggunakan let, const, atau var, variabel yang dideklarasikan sebelumnya dalam cakupan saat ini, yaitu objek properti, atau instance dari penugasan destrukturisasi. Ini berisi nilai elemen yang sesuai dengan iterasi saat ini dari loop.

const myIterable = [ true, false, true ];
for( const myElement of myIterable ) {
  console.log( myElement );
}
> true
> false
> true

Dalam contoh ini, penggunaan const untuk myElement berfungsi meskipun myElement diberi nilai baru dalam setiap iterasi loop. Hal ini karena variabel yang dideklarasikan dengan let atau const dicakup dalam pernyataan blok dalam . Variabel diinisialisasi pada awal setiap iterasi, dan dihapus pada akhir dari iterasi itu.

`for`...`in`...

Gunakan loop for...in... untuk melakukan iterasi pada properti yang dapat dienumerasi dari suatu objek, termasuk properti turunan yang dapat dienumerasi. Seperti halnya loop for...of..., Loop for...in... menggunakan kata kunci for diikuti dengan sepasang tanda kurung berisi variabel yang berisi nilai kunci properti yang sesuai dengan iterasi loop saat ini. Variabel ini diikuti oleh Kata kunci in, lalu objek yang diiterasi:

const myObject = { "myProperty" : true, "mySecondProperty" : false };
for( const myKey in myObject ) {
  console.log( myKey );
}
> "myProperty"
> "mySecondProperty"

Sekali lagi, meskipun nilai myKey berubah dengan setiap iterasi loop, Anda dapat menggunakan const tanpa error karena variabel dihapus secara efektif di akhir setiap iterasi, lalu dibuat ulang di awal.

Nilai yang terkait dengan setiap kunci properti tidak tersedia langsung untuk for...in.... Namun, karena {i>loop <i}memiliki akses kunci properti pada setiap iterasi, Anda dapat menggunakan kunci itu untuk "mencari" nilainya:

const myObject = { "myProperty" : true, "mySecondProperty" : false };
for( const myKey in myObject ) {
  const myValue = myObject[ myKey ];
  console.log( `${ myKey } : ${ myValue }` );
}
> "myProperty : true"
> "mySecondProperty : false"

Properti yang diwarisi dari konstruktor bawaan tidak dapat dihitung, artinya for...in... tidak melakukan iterasi melalui properti yang diwarisi dari Object . Namun, setiap properti yang bisa dienumerasi dalam atribut rantai prototipe disertakan:

const myPrototype = { "protoProperty" : true };
const myObject = Object.create( myPrototype, {
    myProperty: {
    value: true,
    enumerable: true
    }
});
for ( const myKey in myObject ) {
  const myValue = myObject[ myKey ];
  console.log( `${ myKey } : ${ myValue }` );
}
> "myProperty : true"
> "protoProperty : true"

JavaScript menyediakan metode bawaan untuk menentukan apakah suatu properti merupakan properti langsung objek daripada properti pada prototipe objek jaringan: mesin modern Metode Object.hasOwn() dan Object.prototype.hasOwnProperty() lama. Ini mengevaluasi apakah properti yang ditentukan diwarisi (atau tidak dideklarasikan), menampilkan true hanya untuk properti langsung dari objek yang ditentukan:

const myPrototype = { "protoProperty" : true };
const myObject = Object.create( myPrototype, {
    myProperty: {
    value: true,
    enumerable: true
    }
});
for ( const myKey in myObject ) {
  const myValue = myObject[ myKey ];
  if ( Object.hasOwn( myObject, myKey ) ) {
    console.log( `${ myKey } : ${ myValue }` );
  }
}
> "myProperty : true"

Ada juga tiga metode statis yang masing-masing mengembalikan Array yang terdiri dari Kunci yang dapat dihitung objek (Object.keys()), nilai (Object.values()), atau pasangan nilai kunci (Object.entries()):

const myObject = { "myProperty" : true, "mySecondProperty" : false };
Object.keys( myObject );
> Array [ "myProperty", "mySecondProperty" ]

Hal ini memungkinkan Anda melakukan iterasi kunci Objek, nilai, atau pasangan nilai kunci (menggunakan penugasan destrukturisasi) tanpa menyertakan properti yang dimiliki oleh prototipe Object tersebut:

const myPrototype = { "protoProperty" : "Non-enumerable property value." };
const myObject = Object.create( myPrototype, {
    myProperty: {
    value: "Enumerable property value.",
    enumerable: true
    }
});

for ( const propKey of Object.keys( myObject ) ) {
  console.log( propKey );
}
> "myProperty"

for ( const propValue of Object.values( myObject ) ) {
  console.log( propValue );
}
> "Enumerable property value."

for ( const [ propKey, propValue ] of Object.entries( myObject ) ) {
  console.log( `${ propKey } : ${ propValue }` );
}
> "myProperty : Enumerable property value."

`forEach()`

Metode forEach() yang disediakan oleh Array, Peta, Tetapkan, dan konstruktor NodeList menyediakan cara pintas yang berguna untuk melakukan iterasi pada data dalam konteks fungsi callback. Tidak seperti bentuk loop lainnya, loop yang dibuat dengan metode forEach() apa pun tidak dapat diputus menggunakan break atau continue.

forEach adalah metode yang dimiliki oleh prototipe setiap struktur data. Setiap forEach mengharapkan fungsi callback sebagai argumen, walaupun keduanya sedikit berbeda suku argumen yang disertakan ketika fungsi itu dipanggil. Kedua, opsional menentukan nilai this yang akan digunakan sebagai konteks pemanggil untuk fungsi callback.

Fungsi callback yang digunakan dengan Array.forEach menyediakan parameter yang berisi nilai elemen saat ini, indeks elemen saat ini, dan array metode forEach dipanggil:

const myArray = [ true, false ];
myArray.forEach( ( myElement, i, originalArray ) => {
  console.log( i, myElement, originalArray  );
});
> 0 true Array(3) [ true, false ]
> 1 false Array(3) [ true, false ]

Fungsi callback yang digunakan dengan Map.forEach menyediakan parameter yang berisi nilai yang terkait dengan elemen saat ini, kunci yang terkait dengan elemen saat ini , dan Map tempat metode forEach dipanggil:

const myMap = new Map([
  ['myKey', true],
  ['mySecondKey', false ],
]);
myMap.forEach( ( myValue, myKey, originalMap ) => {
    console.log( myValue, myKey, originalMap  );
});
> true "myKey" Map { myKey → true, mySecondKey → false }
> false "mySecondKey" Map { myKey → true, mySecondKey → false }

Callback Set.forEach menyertakan parameter yang serupa. Karena Set tidak memiliki indeks atau kunci yang berbeda dari nilai, argumen kedua justru menyediakan nilai yang redundan dan dapat diabaikan, secara ketat agar {i>syntax<i} tetap konsisten dengan metode forEach lainnya.

const mySet = new Set([ true, false ]);
mySet.forEach( ( myValue, myKey, originalSet ) => {
  console.log( myValue, myKey, originalSet  );
});
> true true Set [ true, false ]
> false false Set [ true, false ]

Iterator

Iterable adalah struktur data apa pun yang terdiri dari elemen individual yang dapat melakukan iterasi menggunakan pendekatan yang telah dijelaskan sebelumnya. iterator adalah objek iterable yang mengikuti protokol iterator, yang berarti ia harus mengimplementasikan metode next() yang maju melalui elemen-elemen yang dikandungnya satu per satu, setiap kali metode tersebut dipanggil, menampilkan objek untuk setiap metode ke dalam format tertentu.

Struktur data iterable bawaan JavaScript (seperti Array, Peta, dan Set) bukan iterator di dan dari sendiri, tetapi mereka semua mewarisi metode iterator, yang dapat diakses menggunakan @@iterator Simbol terkenal, yang mengembalikan objek iterator yang dibuat dari struktur data iterable:

const myIterable = [ 1, 2, 3 ];
const myIterator = myIterable[ Symbol.iterator ]();

myIterable;
> (3) [1, 2, 3]

myIterator;
> Array Iterator {}

Memanggil metode next() pada iterator akan melalui elemen-elemen yang berisi satu per satu, di mana setiap panggilan menampilkan objek yang berisi dua properti: value, yang berisi nilai elemen saat ini, dan done, boolean yang memberi tahu kita apakah iterator telah meneruskan elemen terakhir dalam struktur data. Nilai done adalah true hanya saat panggilan ke next() mengakibatkan upaya untuk mengakses elemen di luar elemen terakhir dalam iterator.

const myIterable = [ 1, 2, 3 ];
const myIterator = myIterable[ Symbol.iterator ]();

myIterator.next();
> Object { value: 1, done: false }

myIterator.next();
> Object { value: 2, done: false }

myIterator.next();
> Object { value: 3, done: false }

myIterator.next();
> Object { value: undefined, done: true }

Fungsi Generator

Gunakan kata kunci function* (perhatikan tanda bintang) untuk mendeklarasikan generator atau menentukan ekspresi fungsi generator:

function* myGeneratorFunction() { };

Seperti iterator, fungsi generator mempertahankan status. Memanggil fungsi generator menampilkan objek Generator baru tetapi tidak langsung jalankan kode dalam isi fungsi:

function* myGeneratorFunction() {
  console.log( "Generator function body ")
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject;
> Generator {  }

typeof myGeneratorObject;
> "object"

Objek generator mengikuti protokol iterator. Nilai setiap panggilan ke next() pada fungsi generator yang ditampilkan ditentukan oleh ekspresi yield, yang menjeda eksekusi fungsi generator dan mengembalikan nilai yang berisi kata kunci yield. Panggilan nanti ke next() melanjutkan eksekusi fungsi, berhenti sejenak pada ekspresi yield berikutnya dan yang menampilkan nilai yang terkait.

function* myGeneratorFunction() {
  yield "My first yielded value.";
  yield "My second yielded value.";
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next();
> Object { value: "My first yielded value.", done: false }

myGeneratorObject.next();
> Object { value: "My second yielded value.", done: false }

Saat next() dipanggil setelah tidak ada nilai lebih lanjut yang ditentukan menggunakan yield, return, atau throw (jika terjadi error), fungsi lainnya body dieksekusi, dan Objek yang ditampilkan memiliki value undefined dan done properti true:


function* myGeneratorFunction() {
    console.log( "Start of the generator function." );
    yield "First";
    console.log( "Second part of the generator function."  );
    yield "Second";
    console.log( "Third part of the generator function." );
    yield "Third";
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next();
> "Start of the generator function."
> Object { value: "First", done: false }

myGeneratorObject.next();
> "Second part of the generator function."
> Object { value: "Second", done: false }

myGeneratorObject.next();
> "Third part of the generator function."
> Object { value: "Third", done: false }

myGeneratorObject.next();
> Object { value: undefined, done: true }

Gunakan next() hanya pada Objek yang ditampilkan oleh fungsi generator, bukan fungsi generator itu sendiri. Jika tidak, setiap panggilan ke fungsi generator membuat Object generator baru:

function* myGeneratorFunction() {
  yield "First";
  yield "Second";
};

myGeneratorFunction().next();
> Object { value: "First", done: false }

myGeneratorFunction().next();
> Object { value: "First", done: false }

Seperti fungsi lainnya, fungsi generator akan berhenti saat menemukan return kata kunci. Metode ini kemudian menampilkan Objek ke konteks pemanggil yang berisi nilai yang ditampilkan dan properti done dengan nilai true.

function* myGeneratorFunction() {
  yield 1;
  yield 2;
  return 3;
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next().done;
> Object { value: 1, done: false }

myGeneratorObject.next().done;
> Object { value: 2, done: false }

myGeneratorObject.next();
> Object { value: 3, done: true }

Ekspresi yield dapat mengambil beberapa semantik ID, memungkinkan "komunikasi" dua arah dari dan kembali ke bagian yang ditangguhkan fungsi generator. Saat nilai diteruskan ke metode next() generator sebagai argumen, argumen ini menggantikan nilai yang terkait dengan argumen sebelumnya, Ekspresi yield:

function* myGeneratorFunction() {
    const firstYield = yield;
    yield firstYield + 10;
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next();
> Object { value: undefined, done: false }

myGeneratorObject.next( 5 );
> Object { value: 15, done: false }

Perlu diingat bahwa ini menggantikan seluruh ekspresi yang terkait dengan sebelumnya yield, dan tidak hanya menetapkan ulang nilai yield sebelumnya ke nilai yang ditentukan dalam next():

function* myGeneratorFunction() {
    const firstYield = yield;
    const secondYield = yield firstYield + 100;
    yield secondYield + 10;
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next();
> Object { value: undefined, done: false }

myGeneratorObject.next( 10 ); // Can be thought of as changing the value of the `firstYield` variable to `10
> Object { value: 110, done: false }

myGeneratorObject.next( 20 ); // Can be thought of as changing the value of the `secondYield` variable to `20`, _not_ `20 + 100;`
> Object { value: 30, done: false }

Argumen apa pun yang diteruskan ke panggilan pertama ke next() akan diabaikan, karena tidak ada ekspresi yield sebelumnya untuk menerima nilai tersebut. Seperti fungsi lainnya, argumen yang diteruskan ke panggilan fungsi generator awal tersedia di seluruh cakupan isi fungsi generator:

function* myGeneratorFunction( startingValue ) {
    let newValue = yield startingValue + 1;
    newValue = yield newValue + 10;
    yield startingValue + 20;
};
const myGeneratorObject = myGeneratorFunction( 2 );

myGeneratorObject.next( 1 );
> Object { value: 3, done: false }

myGeneratorObject.next( 5 );
> Object { value: 15, done: false }

myGeneratorObject.next( 10 );
Object { value: 22, done: false }

Operator yield* (perhatikan tanda bintang) digunakan dengan iterable, seperti fungsi generator lain, untuk melakukan iterasi dan menghasilkan setiap nilai operand-nya akan menampilkan:

function* mySecondaryGenerator() {
  yield 2;
  yield 3;
}

function* myGenerator() {
  yield 1;
  yield* mySecondaryGenerator();
  yield 4;
  return 5;
}

const myIterator = myGenerator();

myIterator.next();
> Object { value: 1, done: false }

myIterator.next();
> Object { value: 2, done: false }

myIterator.next();
> Object { value: 3, done: false }

myIterator.next();
> Object { value: 4, done: false }

myIterator.next();
> Object { value: 5, done: true }

JavaScript Asinkron

Meskipun pada dasarnya JavaScript bersifat sinkron. dalam eksekusinya, ada mekanisme yang memungkinkan pengembang untuk memanfaatkan loop peristiwa untuk menjalankan dan asinkron.

Promise

Promise adalah placeholder untuk nilai yang tidak diketahui kapan promise tersebut dibuat. Ini adalah kontainer yang menentukan operasi asinkron, persyaratan oleh operasi dianggap berhasil atau gagal, tindakan yang harus diambil dalam kedua kasus tersebut, dan nilai yang dihasilkan.

Membuat instance Promise menggunakan operator new dengan Promise bawaan fungsi konstruktor. Konstruktor ini menerima fungsi yang disebut executor sebagai argumen. Fungsi eksekutor itu biasanya digunakan untuk melakukan satu atau lebih tindakan asinkron, kemudian menentukan persyaratan yang akan digunakan untuk Promise dianggap berhasil dipenuhi atau ditolak. Promise didefinisikan sebagai pending saat fungsi eksekutor berjalan. Setelah eksekutor selesai, sebuah Promise dianggap terpenuhi (atau diselesaikan, dalam beberapa sumber dokumentasi) jika fungsi eksekutor dan tindakan asinkron yang dilakukannya selesai berhasil, dan ditolak jika fungsi eksekutor mengalami error, atau tindakan asinkron yang dilakukan akan gagal. Setelah Promise terpenuhi atau ditolak, hal tersebut dianggap selesai.

const myPromise = new Promise( () => { });

Konstruktor memanggil fungsi eksekutor dengan dua argumen. Argumen tersebut adalah fungsi yang memungkinkan Anda memenuhi atau menolak Promise secara manual:

const  myPromise = new Promise( ( fulfill, reject ) => { });

Fungsi yang digunakan untuk memenuhi atau menolak Promise dipanggil dengan hasil Promise sebagai argumen (biasanya kesalahan karena penolakan):

const myPromise = new Promise( ( fulfill, reject ) => {
  const myResult = true;
  setTimeout(() => {
    if( myResult === true ) {
        fulfill( "This Promise was successful." );    
    } else {
        reject( new Error( "This Promise has been rejected." ) );
    }
  }, 10000);
});

myPromise;
> Promise { <state>: "pending" }

myPromise;
> Promise { <state>: "fulfilled", <value>: "This Promise was successful." }

Perantaian Promise

Objek Promise yang dihasilkan dapat ditindaklanjuti menggunakan then(), catch(), dan Metode finally() diwarisi dari konstruktor Promise. Tiap-tiap metode akan menampilkan Promise, yang dapat segera ditindaklanjuti dengan then(), catch(), atau finally() lagi, memungkinkan Anda merantai Promise yang dihasilkan.

then() menyediakan dua fungsi callback sebagai argumen. Gunakan yang pertama untuk memenuhi Promise yang dihasilkan, dan yang kedua untuk menolaknya. Kedua metode menerima satu yang memberikan nilai pada Promise.

const myPromise = new Promise( ( fulfill, reject ) => {
  const myResult = true;
  setTimeout(() => {
    if( myResult === true ) {
        fulfill( "This Promise was fulfilled." );    
    } else {
        reject( new Error( "This Promise has been rejected." ) );
    }
  }, 100);
});

myPromise.then( successfulResult => console.log( successfulResult ), failedResult => console.error( failedResult ) );
> "This Promise was successful."

Anda juga dapat menggunakan then() untuk menangani status yang terpenuhi saja, dan catch untuk menangani status ditolak. Panggil catch dengan satu argumen yang berisi yang diberikan dalam metode penolakan Promise:

const myPromise = new Promise( ( fulfill, reject ) => {
  const myResult = false;
  setTimeout(() => {
    if( myResult === true ) {
        fulfill( "This Promise was fulfilled." );    
    } else {
        reject( new Error( "This Promise has been rejected." ) );
    }
  }, 100);
});

myPromise
  .then( fulfilledResult => console.log(fulfilledResult ) )
  .catch( rejectedResult => console.log( rejectedResult ) )
  .finally( () => console.log( "The Promise has settled." ) );
> "Error: This Promise has been rejected."
> "The Promise has settled."

Tidak seperti then dan catch, yang memungkinkan fungsi pengendali berjalan saat Promise terpenuhi atau ditolak, fungsi yang diteruskan sebagai argumen ke finally akan dipanggil terlepas dari apakah Promise terpenuhi atau ditolak. Fungsi pengendali dipanggil tanpa argumen karena tidak dimaksudkan untuk dengan nilai yang diteruskan dari Promise, hanya untuk mengeksekusi kode setelah Promise selesai.

Serentak

Konstruktor Promise menyediakan empat metode untuk bekerja dengan beberapa metode terkait Promise, menggunakan iterable yang berisi objek Promise. Ini masing-masing menampilkan Promise, yang terpenuhi atau ditolak berdasarkan status dari Promise yang diteruskan kepadanya. Misalnya, Promise.all() membuat Promise yang hanya terpenuhi jika setiap Promise yang diteruskan ke metode tersebut terpenuhi:

const firstPromise  = new Promise( ( fulfill, reject ) => fulfill( "Successful. ") );
const secondPromise = new Promise( ( fulfill, reject ) => fulfill( "Successful. ") );
const thirdPromise  = new Promise( ( fulfill, reject ) => fulfill( "Successful. ") );
const failedPromise = new Promise( ( fulfill, reject ) => reject( "Failed.") );
const successfulPromises = [ firstPromise, secondPromise, thirdPromise ];
const oneFailedPromise = [ failedPromise, ...successfulPromises ];

Promise.all( successfulPromises )
  .then( ( allValues ) => {
    console.log( allValues );
  })
  .catch( ( failValue ) => {
    console.error( failValue );
  });
> Array(3) [ "Successful. ", "Successful. ", "Successful. " ]

Promise.all( oneFailedPromise  )
    .then( ( allValues ) => {
      console.log( allValues );
    })
    .catch( ( failValue ) => {
     console.error( failValue );
    });
> "Failed."

Metode konkurensi Promise adalah sebagai berikut:

Promise.all(): Terpenuhi hanya jika semua Promise yang disediakan terpenuhi.
Promise.any(): Terpenuhi jika salah satu Promise yang disediakan terpenuhi, dan hanya ditolak jika semua Promise ditolak.
Promise.allSettled(): Terpenuhi saat Promise telah selesai, terlepas dari hasilnya.
Promise.race(): Ditolak atau dipenuhi berdasarkan hasil dari Janji pertama yang harus diselesaikan, mengabaikan semua Promise yang ditetapkan nanti.

`async`/`await`

Saat Anda menggunakan kata kunci async sebelum deklarasi fungsi atau ekspresi fungsi, nilai apa pun nilai yang ditampilkan fungsi ditampilkan sebagai Promise yang terpenuhi yang berisi nilai tersebut dengan sejumlah nilai. Dengan demikian, Anda dapat menjalankan dan mengelola operasi asinkron menggunakan sebagai pengembangan sinkron.

async function myFunction() {
  return "This is my returned value.";
}

myFunction().then( myReturnedValue => console.log( myReturnedValue ) );
> "This is my returned value."

Ekspresi await menjeda eksekusi fungsi asinkron saat Promise terkait diselesaikan. Setelah Promise diselesaikan, nilai ekspresi await adalah nilai Promise yang terpenuhi atau ditolak.

async function myFunction() {
  const myPromise  = new Promise( ( fulfill, reject ) => { setTimeout( () => fulfill( "Successful. "), 5000 ); });
  const myPromisedResult = await myPromise;
  return myPromisedResult;
}

myFunction()
  .then( myResult => console.log( myResult ) )
  .catch( myFailedResult => console.error( myFailedResult ) );
> "Successful."

Setiap nilai non-Promise yang disertakan dalam ekspresi await ditampilkan sebagai Promise terpenuhi:

async function myFunction() {
  const myPromisedResult = await "String value.";
  return myPromisedResult;
}

myFunction()
  .then( myResult => console.log( myResult ) )
  .catch( myFailedResult => console.error( myFailedResult ) );
> "String value."

Menguji pemahaman Anda

Jenis loop apa yang Anda gunakan untuk melakukan iterasi pada kuantitas yang diketahui?

for

while

do...while