Merge pull request #1445 from Namchee/id-js-modern

docs(i18n-id): Provide Indonesian translation for section `Modern JavaScript`

Author: github-actions[bot]

packages/playground-examples/copy/id/JavaScript/Modern JavaScript/Async Await.ts

@@ -0,0 +1,114 @@
+//// { order: 1, target: "es5" }
+
+// JavaScript modern menambahkan sebuah cara untuk menangani _callback_
+// dengan cara yang elegan melalui API berbasis Promise yang memiliki
+// sintaks khusus yang mengizinkan Anda untuk menganggap kode
+// program yang bersifat asinkron seperti kode program biasa
+
+// Seperti fitur lainnya, Promise memiliki kekurangan dalam
+// hal kompleksitas kode program: membuat sebuah fungsi
+// sebagai fungsi asinkron akan membuat nilai kembalian
+// dibungkus dalam Promise. Apa yang sebelumnya mengembalikan
+// sebuah string, sekarang akan mengembalikan Promise<string>. 
+
+const fungsi = () => ":wave:";
+const fungsiAsinkron = async () => ":wave:";
+
+const string = fungsi();
+const stringDalamPromise = fungsiAsinkron();
+
+string.length;
+
+// stringDalamPromise merupakan sebuah Promise, bukan string:
+
+stringDalamPromise.length;
+
+// Anda dapat menggunakan kata kunci `await` untuk mengubah
+// sebuah Promise menjadi nilai yang ditampung oleh Promise
+// tersebut. Untuk saat ini, kata kunci tersebut hanya dapat
+// digunakan pada fungsi asinkron.
+
+const fungsiPembungkus = async () => {
+  const string = fungsi();
+  const stringDalamPromise = await fungsiAsinkron();
+
+  // Melalui kata kunci `await`, sekarang `stringDalamPromise`
+  // merupakan sebuah string.
+  string.length;
+  stringDalamPromise.length;
+};
+
+// Kode program yang berjalan menggunakan kata kunci `await`
+// dapat melempar galat, dan hal tersebut menjadi penting
+// karena galat tersebut harus ditangani pada bagian manapun.
+
+const fungsiYangMelemparGalat = async () => {
+  throw new Error("Jangan panggil fungsi ini");
+};
+
+// Anda dapat membungkus pemanggilan fungsi asinkron pada sebuah
+// blok try-catch untuk menangani kasus di mana fungsi yang
+// dipanggil melakukan sesuatu yang tidak diharapkan.
+
+const menangkapFungsiAsinkron = async () => {
+  const nilaiKembalian = "Halo dunia!";
+  try {
+    await fungsiYangMelemparGalat();
+  } catch (error) {
+    console.error("fungsiYangMelemparGalat gagal dijalankan", error);
+  }
+  return nilaiKembalian;
+};
+
+// Karena ergonomi dari API ini yang mengharuskan Anda untuk
+// mengembalikan satu nilai kembalian, atau melempar galat, Anda
+// sebaiknya memberikan informasi mengenai nilai-nilai yang
+// terdapat pada nilai yang dikembalikan dan melempat galat
+// apabila sesuatu yang benar-benar spesial terjadi.
+
+const contohFungsiAkarKuadrat = async (masukan: any) => {
+  if (isNaN(masukan)) {
+    throw new Error("Masukan hanya dapat berupa angka");
+  }
+
+  if (masukan < 0) {
+    return { sukses: false, pesan: "Tidak bisa mencari akar bilangan negatif" };
+  } else {
+    return { sukses: true, nilai: Math.sqrt(masukan) };
+  }
+};
+
+// Lalu pengguna fungsi tersebut dapat memeriksa respon
+// dan mengetahui apa yang harus dilakukan dengan nilai kembalian
+// tersebut. Walaupun contoh berikut merupakan contoh yang
+// sederhana, ketika Anda mulai bekerja dengan kode
+// yang berhubungan dengan jaringan, API sebaiknya didokumentasikan.
+
+const periksaAkarKuadrat = async (nilai: number) => {
+  const respon = await contohFungsiAkarKuadrat(nilai);
+  if (respon.sukses) {
+    respon.nilai;
+  }
+};
+
+// Sintaks Async / Await mengubah kode yang seperti berikut:
+
+// getResponse(url, (response) => {
+//   getResponse(response.url, (secondResponse) => {
+//     const responseData = secondResponse.data
+//     getResponse(responseData.url, (thirdResponse) => {
+//       ...
+//     })
+//   })
+// })
+
+// Menjadi linear seperti berikut:
+
+// const response = await getResponse(url)
+// const secondResponse = await getResponse(response.url)
+// const responseData = secondResponse.data
+// const thirdResponse = await getResponse(responseData.url)
+// ...
+
+// Sintaks Async / Await dapat membuat kode program lebih condong
+// ke sisi kiri, dan dibaca pada ritme yang konsisten.

packages/playground-examples/copy/id/JavaScript/Modern JavaScript/Immutability.ts

@@ -0,0 +1,68 @@
+// JavaScript adalah bahasa pemrograman yang memiliki
+// beberapa cara untuk mendeklarasikan objek-objek yang tidak
+// berubah. Cara yang paling menonjol adalah dengan menggunakan
+// kata kunci `const` - yang menandakan bahwa nilai tidak akan
+// berubah.
+
+const haloDunia = "Halo Dunia";
+
+// Sekarang, Anda tidak dapat mengubah nilai haloDunia, TypeScript
+// akan melempar sebuah galat mengenai hal tersebut, untuk
+// mencegah Anda mendapatkan galat saat program dieksekusi.
+
+// You cannot change helloWorld now, TypeScript will give
+// you an error about this, because you would get one at
+// runtime instead.
+
+haloDunia = "Hai Dunia";
+
+// Mengapa Anda harus peduli pada nilai yang tidak dapat berubah?
+// Alasan utamanya adalah untuk mengurangi kompleksitas pada kode
+// program Anda. Apabila Anda dapat mengurangi hal-hal yang nilainya
+// dapat berubah, Anda akan mengurangi hal yang harus Anda pantau.
+
+// Menggunakan kata kunci `const` merupakan langkah awal yang baik,
+// namun cara tersebut tidak akan sepenuhnya berhasil apabila
+// digunakan untuk objek.
+
+const objekKonstanta = {
+  pesan: "Halo Dunia",
+};
+
+// objekKonstanta tidak sepenuhnya konstan, karena Anda masih
+// dapat mengubah beberapa bagian dari objek tersebut, sebagai
+// contoh Anda dapat mengubah nilai dari `pesan`:
+
+objekKonstanta.pesan = "Hai Dunia";
+
+// Kata kunci `const` menandakan objek yang ditunjuk memiliki
+// nilai yang tidak akan berubah, namun bagian internal
+// dari objek tersebut tetap dapat diubah. Perilaku tersebut
+// dapat diubah menggunakan `Object.freeze`.
+
+const objekKonstantaPasti = Object.freeze({
+  pesan: "Halo Dunia",
+});
+
+// Ketika sebuah objek dibekukan, maka Anda tidak dapat
+// mengubah bagian internal dari objek tersebut. TypeScript
+// akan meleparkan sebuah galat pada kasus ini:
+
+objekKonstantaPasti.pesan = "Hai Dunia";
+
+// Cara tersebut juga dapat digunakan pada _array_:
+
+const arrayYangDibekukan = Object.freeze(["Hai"]);
+arrayYangDibekukan.push("Dunia");
+
+// Menggunakan kata kunci `Object.freeze` menjamin
+// bahwa nilai objek tidak akan berubah, termasuk
+// internal dari objek tersebut.
+
+// TypeScript memiliki beberapa _hook_ sintaks tambahan untuk
+// meningkatkan kemampuan Anda ketika bekerja dengan data
+// yang tidak berubah yang dapat Anda temukan pada bagian
+// contoh TypeScript berikut:
+//
+// example:literals
+// example:type-widening-and-narrowing

packages/playground-examples/copy/id/JavaScript/Modern JavaScript/Import Export.ts

@@ -0,0 +1,119 @@
+//// { order: 1, target: "ES5" }
+
+// JavaScript menambahkan sintaks impor dan ekspor pada tahun 2016
+// dan TypeScript memiliki dukungan penuh untuk sintaks ini yang
+// berfungsi untuk menghubungkan berkas dengan berkas lain dan
+// pada modul eksternal lain. TypeScript memperluas sintaks
+// impor dan ekspor dengan memperbolehkan tipe data untuk
+// diimpor dan diekspor pada kode program.
+
+// Berikut merupakan kode program untuk mengimpor sebuah modul.
+
+import { danger, message, warn, DangerDSLType } from "danger";
+
+// Kode di atas berusaha mengimpor beberapa impor bernama
+// dari sebuah modul NodeJS bernama `danger`. Walaupun ada 
+// lebih dari empat objek yang dapat diimpor, namun hanya
+// empat objek tersebut yang akan diimpor.
+
+// Dengan mengimpor objek secara spesifik, perkakas yang
+// tersedia dapat menghapus kode-kode yang tidak dibutuhkan
+// pada aplikasi Anda, dan membantu Anda untuk mengetahui
+// impor apa yang digunakan pada sebuah berkas.
+
+// Pada contoh di atas: `danger`, `message`. dan `warn`
+// merupakan impor JavaScript - sedangkan `DangerDSLType`
+// merupakan sebuah antarmuka.
+
+// TypeScript mengizinkan pengembang untuk mendokumentasikan
+// kode program yang mereka buat menggunakan JSDoc, sehingga
+// dokumentasi juga dapat diimpor. Sebagai contoh, apabila
+// Anda menyorot pada bagian-bagian kode di bawah, Anda
+// dapat melihat penjelasan mengenai bagian tersebut.
+
+danger.git.modified_files;
+
+// Apabila Anda ingin mengetahui cara untuk menyediakan
+// anotasi pada dokumentasi, silahkan baca pada 
+// example:jsdoc-support
+
+// Cara lain untuk mengimpor kode adalah dengan menggunakan
+// ekspor bawaan milik modul. Berikut merupakan contoh
+// dari penggunaan ekspor bawaan pada modul `debug`, yang
+// mengekspos sebuah fungsi yang membuat sebuah fungsi pencatatan.
+
+import debug from "debug";
+const log = debug("playground");
+log("Started running code");
+
+// Karena sifat dari ekspor bawaan yang tidak memiliki
+// nama yang tetap, ekspor-ekspor bawaan dapat membingungkan
+// perkakas analisis seperti dukungan _refactoring_ pada
+// TypeScript, namun ekspor bawaan tetap memiliki kegunaan.
+
+// Karena ada sejarah panjang dari impor dan ekspor kode
+// dalam JavaScript, terdapat sebuah bagian yang membingungkan
+// dari ekspor bawaan: Beberapa ekspor memiliki dokumentasi
+// yang menyatakan bahwa Anda dapat menulis sebuah impor sebagai
+// berikut:
+
+import req from "request";
+
+// Namun, impor tersebut akan gagal, kemudian Anda menemukan
+// sebuah pertanyaan pada StackOverflow yang menyarankan
+// Anda untuk mengimpor seperti berikut:
+
+import * as req from "request";
+
+// Dan cara tersebut akan berhasil. Alasan mengenai keberhasilan
+// tersebut akan dibahas pada bagian akhir dari dokumentasi ini.
+
+// Supaya dapat diimpor, kode harus dapat diekspor. Cara modern
+// untuk menyatakan ekspor adalah menggunakan kata kunci `export`.
+
+/** Jumlah stiker yang tersedia */
+export const jumlahStiker = 11;
+
+// Ekspor tersebut dapat diimpor pada berkas lain dengan cara:
+//
+// import { jumlahStiker } from "./path/to/file"
+
+// Anda dapat menulis `export` sebanyak mungkin pada sebuah 
+// berkas sesuai keinginan Anda. Ekspor bawaan juga dapat
+// dinyatakan dengan cara yang sama.
+
+/** Menghasilkan stiker untuk Anda */
+const pembuatStiker = () => { };
+export default pembuatStiker;
+
+// Ekspor tersebut dapat diimpor pada berkas lain dengan cara:
+//
+// import perolehStiker from "./path/to/file"
+//
+// Impor bawaan dapat dinamai sesuai keinginan pada berkas
+// tempat bagian tersebut diimpor.
+
+// Ada cara-cara lain untuk melakukan impor, namun contoh-contoh
+// di atas merupakan cara-cara yang umum digunakan pada kode
+// program modern. Membahas seluruh cara untuk mengimpor
+// kode merupakan sebuah topik yang panjang pada buku pegangan berikut:
+//
+// https://www.typescriptlang.org/docs/handbook/modules.html
+
+// Namun, untuk menjawab pertanyaan terakhir, apabila Anda
+// melihat kode JavaScript pada contoh ini - Anda akan melihat:
+
+// var pembuatStiker = function () { };
+// exports.default = pembuatStiker;
+
+// Kode di atas akan menetapkan properti bawaan dari objek `exports`
+// menjadi `pembuatStiker`. Ada kode-kode lain yang menetapkan
+// `exports` bawaan menjadi sebuah fungsi.
+//
+// TypeScript memilih untuk berpegang pada spesifikasi ECMAScript
+// untuk menangani kasus-kasus tersebut, yaitu dengan melemparkan
+// sebuah galat. Namun, terdapat opsi `esModuleInterop` pada kompilator
+// untuk menangani kasus-kasus tersebut secara otomatis.
+//
+// Apabila Anda mengaktifkan opsi tersebut pada contoh ini, Anda
+// akan melihat bahwa galat akan hilang.