[ { "path": ".gitattributes", "content": "* text=auto eol=lf\n*.svg binary\n" }, { "path": ".gitignore", "content": "*.diff\n*.err\n*.orig\n*.log\n*.rej\n*.swo\n*.swp\n*.vi\n*~\n*.sass-cache\n\n# OS or Editor folders\n.DS_Store\n.idea\n.cache\n.project\n.settings\n.tmproj\n.nvmrc\nsftp-config.json\nThumbs.db\n\n\n" }, { "path": "1-js/01-getting-started/1-intro/article.md", "content": "# Pengenalan JavaScript\n\nMari kita lihat apa yang spesial dari JavaScript, apa saja yang bisa kita buat menggunakan JavaScript, dan teknologi apa yang cocok dengan JavaScript.\n\n## Apa itu JavaScript?\n\n*Javascript\" pada awalnya diciptakan untuk \"membuat halaman web menjadi hidup\".\n\nProgram yang ada dalam bahasa ini disebut *script*. Script ini bisa ditulis langsung ke dalam kode HTML dari sebuah web dan berjalan otomatis saat halaman dimuat.\n\nScript tersedia dan dieksekusi sebagai sebuah teks biasa. Script tidak membutuhkan persiapan khusus atau kompilasi untuk dijalankan.\n\nDalam hal ini, JavaScript sangat berbeda dari bahasa lain yang disebut [Java](https://en.wikipedia.org/wiki/Java_(programming_language)).\n\n```smart header=\"Kenapa disebut JavaScript?\"\nSaat JavaScript diciptakan, nama awalnya adalah \"LiveScript\". Namun saat itu Java sudah sangat terkenal, sehingga akhirnya diputuskanlah bahwa memposisikan bahasa baru menjadi \"adik\" Java dapat membantu.\n\nSeiring waktu, JavaScript tumbuh menjadi bahasa yang sepenuhnya bebas dengan memiliki spesifikasi [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), dan sekarang JavaScript tak punya hubungan apa-apa dengan Java.\n```\n\nSekarang, JavaScript bisa berjalan tak hanya pada browser, tapi juga di server, atau di perangkat manapun yang memiliki program khusus [JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine).\n\nBrowser punya engine yang tertanam didalamnya yang disebut \"JavaScript virtual machine\".\n\nTiap engine punya *codename*-nya sendiri. Misalnya:\n\n- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- di Chrome dan Opera.\n- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- di Firefox.\n- ...Ada juga codename lain seperti \"Trident\" dan \"Chakra\" untuk versi berbeda dari IE, \"ChakraCore\" untuk Microsoft Edge, \"Nitro\" dan \"SquirrelFish\" untuk Safari, dll.\n\nIstilah di atas sebaiknya diingat karena akan sering digunakan dalam artikel para developer di internet. Kita akan menggunakannya juga. Misalnya, jika \"fitur X didukung V8\", kemungkinan ia bisa jalan di Chrome dan Opera.\n\n```smart header=\"Bagaimana engine bekerja?\"\n\nEngine sangat rumit. Tapi basicnya mudah.\n\n1. Engine (tertanam jika ia sebuah browser)bisa membaca (\"memparsing\") script.\n2. Lalu ia mengkonversi (\"mengkompilasi\") script tersebut menjadi bahasa mesin.\n3. Dan kemudian kode mesin berjalan, lumayan cepat.\n\nEngine melakukan optimisasi di setiap langkah proses. Dia bahkan memperhatikan script yang telah dikompilasi saat sedang berjalan, menganalisa data yang mengalir di dalam, dan melakukan optimisasi ke kode mesin berdasarkan pengetahuan itu.\n```\n\n## Apa yang bisa dilakukan *in-browser JavaScript*?\n\nJavaScript modern merupakan bahasa pemrograman yang \"aman\". Ia tidak menyebabkan akses tingkat-rendah ke memory atau CPU, karena memang awalnya dibuat untuk browser, yang tentunya tidak membutuhkan hal tersebut.\n\nKemampuan JavaScript sangat tergantung pada lingkungan tempat ia berjalan. Misalnya, [Node.js](https://wikipedia.org/wiki/Node.js) mendukung function yang memungkingkan JavaScript melakukan baca/tulis file apapun, melakukan permintaan jaringan, dsb.\n\n*In-browser JavaScript* bisa melakukan apapun terkait manipulasi halaman web, interaksi dengan pengguna, dan webserver.\n\nMisalnya, *in-browser JavaScript* mampu:\n\n- Menambah HTML baru ke sebuah halaman, mengganti isinya, memodifikasi gayanya.\n- Bereaksi terhadap aktifitas pengguna, berjalan saat mouse diklik, pointer digerakkan, tombol ditekan.\n- Mengirim permintaan jaringan ke remote server, mengunduh dan mengunggah file (disebut teknologi [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming)) dan [COMET](https://en.wikipedia.org/wiki/Comet_(programming))).\n- Memperoleh and menset cookie, bertanya ke pengunjung, menampilkan pesan.\n- Menyimpan data pada client-side (\"local storage\").\n\n## Apa yang TIDAK BISA dilakukan *in-browser JavaScript*?\n\nKemampuan JavaScript yang ada di dalam browser terbatas demi keamanan pengguna. Tujuannya supaya mencegah halaman web berbahya mengakses informasi pribadi atau merusak data pengguna.\n\nContoh keterbatasan tersebut meliputi:\n\n- Javascript didalam sebuah halaman web seharusnya tidak dapat membaca/mengubah file didalam hardisk semaunya.\n\n Browser-browser modern memperbolehkan JavaScript mengakses file, tapi aksesnya dibatasi dan tersedia hanya jika pengguna melakukan hal tertentu, misalnya seperti \"menjatuhkan\" file ke dalam jendela browser atau memilih file via tag ``.\n\n Ada beberapa cara untuk berinteraksi dengan kamera/mikrofon dan perangkat-perangkat lainnya, namun mereka butuh ijin khusus pengguna. Jadi sebuah halaman yang memiliki JavaScript tidak bisa mengaktifkan web-camera, memantau sekeliling dan mengirim informasinya ke [NSA] secara diam-diam(https://en.wikipedia.org/wiki/National_Security_Agency).\n- Tab/jendela yang berbeda umumnya tidak ada hubungan sama sekali. Terkadang jendela yang berbeda bisa saling berhubungan juga, misalnya ketika satu jendela menggunakan JavaScript untuk membuka jendela lainnya. Tapi meski demikian, JavaScript dari suatu halaman tak boleh mengakses halaman lainnya jika mereka berasal dari situs yang berbeda (dari domain, protokol, atau port berbeda).\n\n Ini disebut \"Same Origin Policy\". Untuk melakukan hal tersebut, *kedua halaman* harus sepakat terhadap adanya pertukaran data dan memiliki kode JavaScript khusus yang melakukan hal tersebut. Kita akan membahasnya nanti dalam tutorial ini.\n\n Pembatasan ini pun demi keselamatan pengguna. Sebuah halaman dari `http://anysite.com` yang dibuka pengguna tidak akan bisa mengakses tab browser lainnya dengan URL `http://gmail.com` dan mencuri informasinya.\n- JavaScript bisa dengan mudah berinteraksi secara online ke server di mana halaman berasal. Tapi kemampuannya menerima data dari situs/domain lain dilumpuhkan. Meskipun mampu, ia butuh persetujuan explisit (yang diexpresikan dalam HTTP header) dari sisi remote. Sekali lagi, itu merupakan pembatasan keamanan.\n\n![](limitations.svg)\n\nPembatasan macam ini tidak ada jika JavaScript digunakan di luar browser, misalnya di server. Browser-browser modern juga memperbolehkan plugin/ekstensi yang membutuhkan ijin tambahan.\n\n## Apa yang membuat JavaScript unik?\n\nPaling tidak ada *tiga* hal unik dari JavaScript:\n\n```compare\n+ Integrasi penuh dengan HTML/CSS.\n+ Hal sederhana diselesaikan dengan sederhana.\n+ Dukungan dari mayoritas web browser dan aktif secara default.\n```\nJavaScript merupakan satu-satunya teknologi browser yang mengkombinasikan ketiga poin di atas.\n\nItulah yang membuat JavaScript unik. Itulah kenapa JavaScript menjadi alat yang paling sering untuk membuat antarmuka browser.\n\nKatanya, JavaScript juga bisa dipakai untuk membuat aplikasi server, mobile, dsb.\n\n## Bahasa \"di atas\" JavaScript\n\nSintaks JavaScript tidak memenuhi kebutuhan setiap orang. Masing-masing orang ingin fitur yang berbeda-beda.\n\nItu wajar, karena proyek dan persyaratan tiap orang berbeda-beda.\n\nAkhir-akhir ini muncul banyak bahasa baru, yang *ditranspile* (dikonversi) ke JavaScript sebelum dijalankan di browser.\n\nTools modern membuat transpilasi sangat cepat dan transparan, yang memungkinkan para developer menulis kodenya dalam bahasa lain dan mengautokonversi itu \"di balik layar\".\n\nContoh bahasa yang dimaksud:\n\n- [CoffeeScript](http://coffeescript.org/) merupakan \"syntactic sugar\" dari JavaScript. Dia memperkenalkan syntax yang lebih pendek, memungkingkan kita menulis kode lebih bersih dan lebih presisi. Biasanya, Ruby devs menyukainya.\n- [TypeScript](http://www.typescriptlang.org/) berfokus pada penambahan \"strict data typing\" yang menyederhanakan pengembangan dan dukungan sistem yang komplex. Ia dikembangkan oleh Microsoft.\n- [Flow](http://flow.org/) juga menambahkan data typing, tapi dalam cara berbeda. Dikembangkan oleh Facebook.\n- [Dart](https://www.dartlang.org/) ialah bahasa mandiri yang punya engine sendiri yang berjalan di lingkungan non-peramban (seperti mobile apps), tapi bisa juga ditranspile ke JavaScript. Dikembangkan oleh Google.\n- [Brython](https://brython.info/) adalah transpiler python untuk Javascript yang memperbolehkan untuk menulis kode aplikasi didalam Python murni tanpa Javascript.\n- [Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) adalah sebuah bahasa pemograman modern, ringkas dan aman yang dapat ditargetkan untuk browser atau Node.\n\nMasih banyak lagi. Tentunya, jika kita menggunakan salah satu bahasa yang ditranspile tersebut, kita sebaiknya juga paham JavaScript untuk mengerti apa yang mereka lakukan.\n\n## Kesimpulan\n\n- JavaScript awalnya diciptakan sebagai bahasa khusus browser, namun sekarang banyak digunakan di lingkungan lain.\n- Sekarang, JavaScript mempunyai posisi unik sebagai bahasa browser paling banyak diadopsi dengan integrasi penuh dengan HTML/CSS.\n- Ada banyak bahasa yang \"ditranspile\" ke JavaScript dan menyediakan fitur tertentu. Disarankan untuk mempelajari mereka juga, minimal sebentar, setelah menguasai JavaScript.\n" }, { "path": "1-js/01-getting-started/2-manuals-specifications/article.md", "content": "# Manual dan spesifikasi\n\nBuku ini adalah _tutorial_. Tujuannya membantu kamu memahami bahasa ini (Javascript) pelan-pelan. Tapi sekali kamu akrab atau familiar dengan dasarnya, kamu juga membutuhkan dari sumber-sumber lain.\n\n## Spesifikasi\n\n[Spesifikasi ECMA-262](https://www.ecma-international.org/publications/standards/Ecma-262.htm) berisi informasi formal, detil, and mendalam tentang JavaScript. Ia mendefisikan bahasa ini.\n\nTapi karena menjadi formal, ia sulit dipahami di awal. Jadi jika kamu butuh sumber informasi terpercaya tentang detil bahasa, spesifikasi ini tempat yang tepat. Tapi ini bukan untuk penggunaan harian.\n\nVersi spesifikasi baru dirilis tiap tahun. Di antara rilis ini, draft spesifikasi terakhir ada di .\n\nUntuk membaca tentang fitur terkini, termasuk yang \"hampir menjadi standar\" (disebut \"stage 3\"), lihat proposalnya di .\n\nJuga, jika kamu dalam pengembangan untuk peramban, maka ada spek lain yang dibahas di [bagian kedua](info:browser-environment) di tutorial ini.\n\n## Manual\n\n- **Referensi JavaScript MDN (Mozilla)** ialah manual dengan informasi dan contoh lain. Di sana bagus untuk mendapat informasi mendalam tentang metode, fungsi bahasa, dll.\n\n Kamu bisa cari di .\n\n Meski, sering lebih bagus menggunakan pencarian internet. Pakai \"MDN [term]\" di query, misal untuk mencari fungsi `parseInt`.\n\n- **MSDN** – Manual Microsoft dengan banyak informasi, termasuk JavaScript (sering dirujuk sebagai JScript). Jika kamu butuh sesuatu yang spesifik ke Internet Explorer, lebih baik pergi ke: .\n\n Juga, kamu bisa menggunakan pencarian internet dengan frasa seperti \"RegExp MSDN\" atau \"RegExp MSDN jscript\".\n\n## Tabel kompatibilitas\n\nJavaScript merupakan bahasa berkembang, fitur baru ditambah secara reguler.\n\nUntuk melihat dukungan mereka pada engine berbasis peramban dan lainnya, lihat:\n\n- - tabel dukungan per-fitur, misal untuk melihat engine mana yang mendukung fungsi kryptografi modern: .\n- - tabel dengan fitur dan engine bahasa yang mendukung atau yang tidak mendukung.\n\nSemua sumber ini berguna di pengembangan nyata, karena mereka berisi informasi berharga tentang detil bahasa, dukungan mereka dll.\n\nSilakan ingat mereka (atau laman ini) saat kamu butuh informasi mendalam tentang fitur tertentu.\n" }, { "path": "1-js/01-getting-started/3-code-editors/article.md", "content": "# Editor kode\n\nEditor kode adalah tempat programmer menghabiskan usianya.\n\nAda dua tipe utama editor kode: IDE dan editor ringan. Kebanyakan orang menggunakan satu tool saja dari setiap tipe.\n\n## IDE\n\nIstilah [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) mengacu kepada editor mumpuni dengan banyak fitur yang biasanya beroperasi di atas \"seluruh proyek.\" Dilihat dari namanya, ia bukan hanya sekedar editor biasa, tapi sebuah \"lingkungan pengembangan\" berskala besar.\n\nSatu IDE meload proyek (yang bisa berupa banyak file), memungkingkan navigasi antar file, menyediakan autocompletion berdasarkan seluruh proyek (tak hanya file terbuka), dan berintegrasi dengan sistem manajemen versi (seperti [git](https://git-scm.com/)), lingkungan pengujian, dan hal-hal \"level proyek\" lainnya.\n\nJika kamu belum memilih satu IDE, pertimbangkan opsi-opsi berikut:\n\n- [Visual Studio Code](https://code.visualstudio.com/) (lintas-platform, gratis).\n- [WebStorm](http://www.jetbrains.com/webstorm/) (lintas-platform, berbayar).\n\nUntuk Windows, ada juga \"Visual Studio\", jangan dipusingkan dengan \"Visual Studio Code.\" \"Visual Studio\" merupakan editor khusus Windows yang keren dan berbayar, sangat cocok untuk platform .NET. Ia bagus juga untuk JavaScript. Lalu ada juga versi gratisnya [Visual Studio Community](https://www.visualstudio.com/vs/community/).\n\nBanyak IDE berbayar, tapi punya masa percobaan. Biasanya harganya tak seberapa dibanding gaji pengembang berkualitas, jadi pilihlah yang terbaik untukmu.\n\n## Editor ringan\n\n\"Editor ringan\" tak semumpuni IDE, tapi mereka cepat, elegan, dan simpel.\n\nMereka digunakan terutama untuk membuka dan mengedit file secara instan.\n\nPerbedaan utama antara \"editor ringan\" dan \"IDE\" adalah IDE bekerja pada level proyek, jadi IDE meload banyak data di awal, menganalisa struktur proyek jika dibutuhkan dan lain sebagainya. Editor ringan jauh lebih cepat jika kita cuma membutuhkan hanya satu file.\n\nPada praktiknya, editor ringan bisa punya banyak plugin termasuk syntax analyzers dan autocompleters level direktori, jadi tak ada batasan ketat antara editor ringan dan IDE.\n\nOpsi-opsi berikut patut anda perhatikan:\n\n- [Atom](https://atom.io/) (lintas-platform, gratis).\n- [Visual Studio Code](https://code.visualstudio.com/) (lintas-platform, gratis).\n- [Sublime Text](http://www.sublimetext.com) (lintas-platform, shareware).\n- [Notepad++](https://notepad-plus-plus.org/) (Windows, gratis).\n- [Vim](http://www.vim.org/) dan [Emacs](https://www.gnu.org/software/emacs/) sangat keren juga jika kamu tahu cara pakainya.\n\n## Jangan berdebat\n\nDaftar editor di atas merupakan barang yang sudah biasa saya atau teman-teman saya para pengembang profesional gunakan selama ini dengan gembira.\n\nAda banyak editor bagus lainnya di dunia kita yang besar ini. Silakan pilih satu yang paling kamu suka.\n\nPilihan editor, sama seperti tool lainnya, bersifat individual dan tergantung pada proyek, kebiasaan, dan preferensi personal.\n" }, { "path": "1-js/01-getting-started/4-devtools/article.md", "content": "# Konsol pengembang\n\nYang namanya kode selalu rentan error. Mudah sekali bagimu bikin error... Benar kan? Kamu *tidak akan pernah* luput dari error, itu karena kamu manusia, bukan [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)).\n\nTapi di dalam peramban, error tidak terlihat ke pengguna secara default. Jadi, kalau ada yang salah di script, itu tidak kelihatan mata kita dan kita sudah memperbaiki itu.\n\nSupaya bisa melihat error dan memperoleh informasi berfaedah lainnya dari script, \"tools pengembang\" ditanamkan di dalam peramban.\n\nKebanyakan pengembang memakai Chrome atau Firefox untuk pengembangan karena tools pengembangan yang mereka punya paling mantap. Peramban lain punya juga koq, ada with special features, but are usually playing \"catch-up\" to Chrome or Firefox. So most developers have a \"favorite\" browser and switch to others if a problem is browser-specific.\n\nTools pengembang mengandung banyak manfaat; mereka punya banyak fitur. Untuk memulainya, kita akan belajar cara membuka mereka, mencari error, dan menjalankan perintah JavaScript.\n\n## Google Chrome\n\nBuka laman [bug.html](bug.html).\n\nAda satu error di dalam kode JavaScript di situ. Ia tersembunyi dari mata pengunjung biasa, mari kita buka tools pengembang untuk melihatnya.\n\nTekan `key:F12` atau, kalau kamu pakai Mac, tekan `key:Cmd+Opt+J`.\n\nTools pengembang akan terbuka pada Console tab secara default.\n\nNanti tampilannya seperti ini:\n\n![chrome](chrome.png)\n\nTampilan persisnya tools pengembang tergantung versi Chrome kamu. Ia berubah dari masa ke masa tapi tetap serupa.\n\n- Di sini kita bisa melihat pesan error berwarna merah. Di sini, scriptnya mengandung perintah asing \"lalala\".\n- Di kanan, ada link yang bisa diklik ke sumber `bug.html:12` dengan nomor baris di mana error itu muncul.\n\nDi bawah pesan error, ada simbol `>` berwarna biru. Ia menandakan \"command line\" di mana kita bisa mengetik perintah JavaScript. Tekan `key:Enter` untuk menjalankannya.\n\nSekarang kita bisa melihat error, dan itu sudah cukup untuk permulaan. Kita nanti akan kembali ke tools pengembang dan mengcover debugging lebih dalam di bab .\n\n```smart header=\"Multi-line input\"\nUsually, when we put a line of code into the console, and then press `key:Enter`, it executes.\n\nTo insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.\n```\n\n## Firefox, Edge, dan lainnya\n\nBanyak peramban lain memakai `key:F12` untuk membuka tools pengembang.\n\nLook & feel mereka hampir mirip. Sekali kamu tahu cara memakainya (kamu bisa mulai dengan Chrome), kamu bisa dengan mudah ganti dari satu ke yang lain.\n\n## Safari\n\nSafari (peramban Mac, tidak didukung Windows/Linux) agak sedikit spesial di sini. Kita harus mengaktifkan \"Develop menu\" terlebih dulu.\n\nBuka Preferences dan pergi ke \"Advanced\" pane. Di sana ada checkbox di sebelah bawah:\n\n![safari](safari.png)\n\nSekarang `key:Cmd+Opt+C` bisa mentoggle konsol. Lalu, menu \"Develop\" muncul pada menu item di atas. Ia punya banyak perintah dan opsi.\n\n## Kesimpulan\n\n- Tools pengembang memungkinkan kita melihat error, menjalankan perintah, memeriksa variabel, dan sebagainya.\n- Mereka bisa dibuka dengan `key:F12` untuk kebanyakan peramban di Windows. Chrome di Mac dengan `key:Cmd+Opt+J`, Safari `key:Cmd+Opt+C` (harus diaktifkan terlebih dulu).\n\nKini kita sudah menyiapkan lingkungannya. Di seksi berikutnya, kita akan terjun ke JavaScript.\n" }, { "path": "1-js/01-getting-started/4-devtools/bug.html", "content": "\n\n\n\n \n\n\n\n\n There is an error in the script on this page.\n \n\n\n\n" }, { "path": "1-js/01-getting-started/index.md", "content": "# Pengenalan\n\nTentang bahasa JavaScript dan lingkungan pengembangannya." }, { "path": "1-js/02-first-steps/01-hello-world/1-hello-alert/index.html", "content": "\n\n\n\n\n \n\n\n\n\n" }, { "path": "1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md", "content": "\r\n[html src=\"index.html\"]\r\n" }, { "path": "1-js/02-first-steps/01-hello-world/1-hello-alert/solution.view/index.html", "content": "\n\n\n\n\n \n\n\n\n" }, { "path": "1-js/02-first-steps/01-hello-world/1-hello-alert/task.md", "content": "nilai penting: 5\n\n---\n\n# Tampilkan alert\n\nBuat laman yang menampilkan pesan \"I'm JavaScript!\".\n\nLakukan dalam sandbox, atau di hard drive kamu, tak masalah, pastikan bisa berjalan.\n\n[demo src=\"solution\"]\n\n" }, { "path": "1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js", "content": "alert(\"I'm JavaScript!\");" }, { "path": "1-js/02-first-steps/01-hello-world/2-hello-alert-ext/index.html", "content": "\n\n\n\n\n \n\n\n\n" }, { "path": "1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md", "content": "Kode HTML:\n\n[html src=\"index.html\"]\n\nUntuk file `alert.js` di dalam folder yang sama:\n\n[js src=\"alert.js\"]\n\n" }, { "path": "1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md", "content": "nilai penting: 5\n\n---\n\n# Tampilkan alert dengan script external\n\nAmbil solusi dari tugas sebelumnya . Modifikasi itu dengan mengextrak konten script ke file external `alert.js`, yang berada di dalam folder yang sama.\n\nBuka lamannya, pastikan alertnya bekerja.\n" }, { "path": "1-js/02-first-steps/01-hello-world/article.md", "content": "# Hello, world!\n\nBagian dari tutorial ini ialah tentang inti JavaScript itu sendiri.\n\nTapi kita butuh lingkungan kerja untuk menjalankan scripts kita dan, karena buku ini online, peramban adalah pilihan yang baik. Kita akan menjaga supaya jumlah perintah yang spesifik peramban (seperti `alert`) seminimum mungkin sehingga kamu tak boros waktu di situ jika kamu berencana untuk fokus ke lingkungan lain (seperti Node.js). Kita akan fokus ke JavaScript di peramban dalam [bagian selanjutnya](/ui) dari tutorial ini.\n\nJadi pertama, kita lihat bagaimana kita menyisipkan script ke laman web. Untuk lingkungan (seperti Node.js), kamu bisa mengeksekusi script itu dengan perintah seperti `\"node my.js\"`.\n\n\n## Tag \"script\"\n\nProgram JavaScript bisa disisipkan ke dalam bagian mana saja dari dokumen HTML dengan bantuan tag `\n*/!*\n\n

...Kode ini ditulis setelah skrip.

\n\n\n\n\n```\n\n```online\nKamu bisa menjalankan contohnya dengan mengklik tombol \"Play\" di sebelah ujung kanan-atas dari box di atas.\n```\n\nTag `\n ```\n\n Trik ini tak lagi dipakai di JavaScript modern. Komen ini menyembunyikan kode JavaScript dari peramban tua yang tak tahu cara memproses tag `\n```\n\nDi sini, `/path/to/script.js` adalah jalur absolut ke file script dari root sitius. Kamu juga bisa menyediakan jalur relatif dari laman ini. Misalnya, `src=\"script.js\"` berarti file `\"script.js\"` dalam folder saat ini.\n\nKamu bisa memasang URL penuh juga. Misalnya:\n\n```html\n\n```\n\nUntuk menempelkan beberapa script, gunakan tag berlapis:\n\n```html\n\n\n…\n```\n\n```smart\nAturannya, cuma script paling simpel yang ditaruh di dalam HTML. Script lebih rumit ditaruh di file terpisah.\n\nKeuntungan file terpisah ialah peramban akan mengunduhnya dan menyimpannya di [cache](https://en.wikipedia.org/wiki/Web_cache)-nya.\n\nLaman lain yang merujuk ke script yang sama akan mengambilnya dari cache ketimbang mengunduhnya, jadi sebenarnya file hanya diunduh sekali saja.\n\nItu mengurangi trafik dan membuat laman jadi lebih cepat.\n```\n\n````warn header=\"Jika `src` diset, konten script diabaikan.\"\nTag `\n```\n\nKita harus memilih antara `\n\n```\n````\n\n## Kesimpulan\n\n- Kita bisa menggunakan tag ``.\n\n\nMasih banyak lagi yang harus dipelajari tentang script peramban dan interaksi mereka dengan laman web. Tapi harap diingat bahwa bagian ini dari tutorial ini dikhususkan hanya ke bahasa JavaScript, jadi kita tak akan membahas implementasi Javascript yang spesifik peramban. Kita akan menggunakan peramban hanya sebagai alat untuk menjalankan JavaScript, yang nyaman untuk bacaan online.\n" }, { "path": "1-js/02-first-steps/02-structure/article.md", "content": "# Struktur kode\n\nHal pertama yang kita akan pelajari ialah membangun blok kode.\n\n## Pernyataan\n\nPernyataan ialah konsep dan perintah syntax yang mejalankan aksi.\n\nKita sudah melihat satu pernyataan, `alert('Hello, world!')`, yang menampilkan pesan \"Hello, world!\".\n\nKita bisa memiliki sebanyak apapun pernyataan dalam kode kita. Pernyataan bisa dipisah menggunakan titik koma.\n\nMisalnya, di sini kita memecah \"Hello World\" menjadi dua alert:\n\n```js run no-beautify\nalert('Hello'); alert('World');\n```\n\nBiasanya, pernyataan ditulis dalam baris terpisah supaya kode lebih mudah dibaca:\n\n```js run no-beautify\nalert('Hello');\nalert('World');\n```\n\n## Titik koma [#semicolon]\n\nTitik koma bisa dibuang dalam banyak kasus jika ada jeda baris.\n\nIni juga akan berjalan:\n\n```js run no-beautify\nalert('Hello')\nalert('World')\n```\n\nDi sini, JavaScript menginterpretasi jeda baris sebagai titik koma \"implisit\". Ini disebut [penyisipan titik koma otomatis](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion).\n\n**Dalam banyak kasus, sebuah garis baru mengimplikasikan titik koma. Tapi \"dalam banyak kasus\" tak \"selalu\" begitu!**\n\nAda kasus ketika garis baru tidak berarti titik koma. Misalnya:\n\n```js run no-beautify\nalert(3 +\n1\n+ 2);\n```\n\nOutput dari kode itu adalah `6` karena JavaScript tak menyisipkan titik koma di sini. Sudah jelas sekali bahwa barisnya selesai dengan tanda plus `\"+\"`, sehingga itu menjadi \"expresi tak lengkap\", jadi tak butuh titik koma. Dan dalam hal ini memang seperti itu.\n\n**Tapi ada situasi di mana JavaScript \"gagal\" mengasumsi titik koma di mana itu benar-benar dibutuhkan.**\n\nGalat yang muncul pada kasus ini agak sulit dicari dan dibetulkan.\n\n````smart header=\"Contoh galat\"\nJika kamu penasaran untuk melihat contoh konkrit dari galat ini, cek kode ini:\n\n```js run\nalert(\"Hello\");\n\n[1, 2].forEach(alert);\n```\n\nUntuk sekarang tak usah memikirkan makna kurung siku `[]` dan `forEach`. Kita akan mempelajari mereka nanti. Untuk sekarang, ingat hasil kode tersebut: yaitu `1` lalu `2`.\n\nSekarang, ayo kita tambahkan `alert` sebelum kodenya *tanpa* diikuti titik koma:\n\n```js run no-beautify\nalert(\"Hello\")\n\n[1, 2].forEach(alert);\n```\n\nSekarang jika kita menjalankan kodenya, hanya `alert` pertama yang tampil dan kemudian galat!\n\nTapi semua akan baik-baik saja jika kita menambahkan titik koma setelah `alert`:\n```js run\nalert(\"All fine now\");\n\nIf we run this code, only the first `Hello` shows (and there's an error, you may need to open the console to see it). There are no numbers any more.\n\nSekarang kita punya pesan \"All fine now\" diikuti dengan `1` dan `2`.\n\n\nGalat muncul pada varian tanpa titik koma karena JavaScript tak mengasumsikan titik koma sebelum kurung siku `[...]`.\n\nJadi, karena titik koma tidak otomatis disisipkan, kode di contoh pertama diperlakukan sebagai pernyataan tunggal. Inilah cara engine melihatnya:\n\n```js run no-beautify\nalert(\"Hello\")[1, 2].forEach(alert);\n```\n\nTapi itu harus jadi dua pernyataan terpisah, bukan satu. Penyatuan macam ini salah pada kasus ini, makanya galat. Ini bisa terjadi dalam situasi lain.\n````\n\nKami sarankan menaruh titik koma di antara pernyataan meski mereka dipisahkan garis baru. Ini aturan yang diterima secara luas oleh komunitas. Harap diingat sekali lagi bahwa -- *bisa saja* menanggalkan titik koma di banyak kesempatan. Tapi akan lebih aman -- terutama untuk pemula -- untuk menggunakan mereka.\n\n## Komentar [#komentar pada sebuah kode]\n\nSeiring waktu berjalan, program menjadi lebih rumit. Dan dibutuhkan *komen* yang menjelaskan kode apa itu dan kenapa.\n\nKomen bisa ditaruh di mana saja dari script. Dan tidak berpengaruh ke eksekusi karena engine mengabaikan mereka.\n\n**Satu-baris komen bermula dengan dua karakter slash `//`.**\n\nSisa barisnya adalah komen. Ia bisa memenuhi satu baris sendiri atau mengikuti pernyataan.\n\nSeperti di sini:\n```js run\n// Komen ini menghuni satu baris sendiri\nalert('Hello');\n\nalert('World'); // Komen ini mengikuti pernyataan\n```\n\n**Komen multiline bermula dengan garis miring dan bintang /* dan berakhir dengan bintang dan garis miring */.**\n\nSeperti ini:\n\n```js run\n/* Contoh dengan dua pesan.\nIni komen multiline.\n*/\nalert('Hello');\nalert('World');\n```\n\nKonten komen diabaikan, jadi jika menaruh kode di dalam /* ... */, ia tidak akan dieksekusi.\n\nKadang sangat berguna jika kita bisa menonaktifkan sementara sebagian kode:\n\n```js run\n/* Mengkomen kode\nalert('Hello');\n*/\nalert('World');\n```\n\n```smart header=\"Gunakan hotkey!\"\nDi banyak editor, sebaris kode bisa dikomen dengan menekan hotkey `key:Ctrl+/` untuk komen baris-tunggal dan sesuatu macam `key:Ctrl+Shift+/` -- untuk komen multibaris (pilih sepotong kode dan tekan hotkeynya). Untuk Mac, coba `key:Cmd` ketimbang `key:Ctrl`.\n```\n\n````warn header=\"Komen bersarang tidak didukung!\"\nTidak boleh ada `/*...*/` di dalam `/*...*/` yang lain.\n\nKode begini akan berakhir galat:\n\n```js run no-beautify\n/*\n /* komen bersarang ?!? */\n*/\nalert( 'World' );\n```\n````\n\nSilakan, jangan ragu mengkomen.\n\nKomen meningkatkan kode footprint garis besar, tapi itu bukan masalah sama sekali. Ada banyak tools yang meminifikasi kode sebelum dipublikasi ke production server. Mereka menghapus komen, jadi mereka tidak tampil di script yang berjalan. Selain itu, komen tidak punya efek negatif pada production sama sekali.\n\nDi akhir tutorial ini akan ada bab yang juga menerangkan cara menulis komen yang lebih baik.\n" }, { "path": "1-js/02-first-steps/03-strict-mode/article.md", "content": "# The modern mode, \"use strict\"\n\nSelama ini, JavaScript tumbuh tanpa isu kompatibilitas. Fitur baru ditambahkan tanpa mengubah fungsionalitas yang sudah ada.\n\nKeuntungannya adalah kode yang sudah ada tidak rusak. Tapi jeleknya adalah satu keputusan salah atau cacat yang dibuat oleh pembuat JavaScript akan menetap selamanya.\n\nInilah yang terjadi hingga tahun 2009 ketika ECMAScript 5 (ES5) muncul. Fitur baru ditambah dan beberapa kode yang ada diubah. Supaya kode lama tetap berjalan, kebanyakan modifikasi seperti ini secara default mati. Kamu harus mengaktifkan mereka secara explisit menggunakan directive special: `\"use strict\"`.\n\n## \"use strict\"\n\nDirective tersebut mirip string: `\"use strict\"` atau `'use strict'`. Jika itu diletakkan paling atas dari script, seluruh script akan bekerja secara \"modern\".\n\nMisalnya:\n\n```js\n\"use strict\";\n\n// this code works the modern way\n...\n```\n\nKita akan mempelajari fungsi (cara mengelompokkan perintah) segera. Melihat ke depan, ingatlah bahwa `\"use strict\"` bisa ditaruh di bagian awal fungsi. Itu membuat strict mode aktif hanya di dalam fungsi itu. Tapi biasanya, orang memakai itu untuk seluruh script.\n\n\n````warn header=\"Yakinkan bahwa \\\"use strict\\\" berada paling atas\"\nPastikan `\"use strict\"` berada paling atas dari script kamu, kalau tidak strict mode tidak akan aktif.\n\nStrict mode tidak aktif di sini:\n\n```js no-strict\nalert(\"some code\");\n// \"use strict\" di sini diabaikan--dia harus berada paling atas\n\n\"use strict\";\n\n// strict mode tidak aktif\n```\n\nHanya komen yang muncul di atas `\"use strict\"`.\n````\n\n```warn header=\"Tidak ada cara untuk membatalkan `use strict`\"\nTak ada directive seperti `\"no use strict\"` yang merevert engine ke kelakuan lama.\n\nSekali kita masuk strict mode, tak ada jalan kembali.\n```\n\n## Konsol pengembang\n\nKetika kamu menggunakan konsol pengembang [developer console](info:devtools) untuk menjalankan kode, perlu diingat pada dasarnya konsol pengembang tidak menggunakan `use strict`.\n\nKadang, ketika menggunakan `use strict`, kamu akan mendapat hasil yang salah.\n\nJadi, bagaimana seharusnya mengunakan `use strict` didalam konsol?\n\nPertama, kamu bisa menekan tombol `key:Shift+Enter` untuk memasukan beberapa baris kode dan masukan `use strict` di paling atas, seperti ini:\n\n```js\n'use strict'; \n// ...Kodemu\n\n```\n\nIni bekerja pada kebanyakan peramban, seperti Firefox dan Chrome.\n\nJika tidak berjalan, seperti di browser lama, ada sebuah cara untuk memastikan penggunaan `use strict`. Masukan kodenya kedalam sebuah pembungkus:\n\n```js\n(function() {\n 'use strict';\n\n // ...Kode lainnya disini...\n})()\n```\n\n## Haruskah kita menggunakan \"use strict\"?\n\nPertanyaannya sudah cukup jelas, tapi ternyata tidak.\n\nSeseorang bisa saja merekomendasikan memulai skrip dengan menggunakan `\"use strict\"`...Tapi apakah kamu tahu apa keren?\n\nJavascript modern mendukung kelas atau *classes* dan modul atau *modules* - struktur bahasa tingkat tinggi (kita akan belajar nanti), yang dapat mengaktifkan `use strict` secara otomatis. Jadi kita tidak perlu untuk menambahkan instruksi `\"use strict\"`, jika kita menggunakannya.\n\n**Jadi, untuk sekarang `\"use strict\";` adalah hal yang perlu ada di awal dari skrip kamu. Nanti, ketika seluruh kodemu telah menggunakan kelas dan modul, kamu bisa menghilangkannya**\n\nUntuk sekarang, kita harus mengetahui tentang `use strict` secara dasar.\n\nDi bagian selanjutnya, selagi kita belajar tentang fitur jadi Javascript, kita akan melihat beberapa perbedaan diantara *strict mode* dan mode lama. Beruntungnya, tidak dapat terdapat banyak perbedaan dan sebenarnya keduanya sangat bermanfaat.\n\nSeluruh contoh di tutorial ini menggunakan *strict mode* kecuali (sangat jarang) dituliskan sebaliknya." }, { "path": "1-js/02-first-steps/04-variables/1-hello-variables/solution.md", "content": "Dalam kode di bawah, tiap baris berkorespondensi ke item di dalam daftar tugas.\n\n```js run\nlet admin, name; // bisa mendeklarasikan dua variabel sekaligus\n\nname = \"John\";\n\nadmin = name;\n\nalert( admin ); // \"John\"\n```\n\n" }, { "path": "1-js/02-first-steps/04-variables/1-hello-variables/task.md", "content": "nilai penting: 2\n\n---\n\n# Bekerja dengan variabel\n\n1. Deklarasikan dua variabel: `admin` and `name`.\n2. Assign nilai `\"John\"` ke `name`.\n3. Kopi nilai dari `name` ke `admin`.\n4. Tampilkan nilai `admin` menggunakan `alert` (harus beroutput \"John\").\n" }, { "path": "1-js/02-first-steps/04-variables/2-declare-variables/solution.md", "content": "## Variabel untuk planet kita\n\nItu simpel:\n\n```js\nlet ourPlanetName = \"Earth\";\n```\n\nIngat, kita bisa menggunakan nama lebih pendek `planet`, tapi itu tak akan jelas planet apa. Bagus jika lebih panjang dan deskriptif. Minimal hingga variabel isNotTooLong.\n\n## Nama pengunjung saat ini\n\n```js\nlet currentUserName = \"John\";\n```\n\nLagi, kita bisa memperpendek jadi `userName` jika kita tahu pasti user saat ini.\n\nEditor modern dan autocomplete membuat nama variabel panjang mudah ditulis. Jangan pelit terhadap mereka. Nama yang mengandung 3 kata di dalamnya itu bagus.\n\nDan jika editormu tidak punya autocompletion yang layak, carilah [editor yang baru](/code-editors).\n" }, { "path": "1-js/02-first-steps/04-variables/2-declare-variables/task.md", "content": "nilai penting: 3\n\n---\n\n# Memberikan nama yang tepat\n\n1. Buat variabel dengan nama planet kita. Bagaimana kamu akan menamainya?\n2. Buat variabel untuk menyimpan nama pengunjung saat ini ke website. Bagaimana kamu menamainya?\n" }, { "path": "1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md", "content": "Kita umumnya menggunakan case yang layak untuk konstan yang \"dihard-code\". Atau, dengan kata lain, ketika nilainya diketahui sebelum eksekusi dan langsung ditulis ke dalam kode.\n\nDi dalam kode, `birthday` memang seperti itu. Jadi kita bisa menggunakan kapital besar untuknya.\n\nSebaliknya, `age` dievaluasi saat run-time. Hari ini kita punya satu umur, setahun kemudian kita akan punya umur yang berbeda. Ia termasuk konstan yang takkan berubah melalui eksekusi kode. Tapi ia agak \"sedikit bukan konstan\" ketimbang `birthday`: ia dihitung, jadi sebaiknya kita menggunakan huruf kecil untuk itu.\n" }, { "path": "1-js/02-first-steps/04-variables/3-uppercast-constant/task.md", "content": "nilai penting: 4\n\n---\n\n# Const huruf kapital?\n\nCek kode berikut:\n\n```js\nconst birthday = '18.04.1982';\n\nconst age = someCode(birthday);\n```\n\nDi sini kita punya konstan tanggal `birthday` dan `age` dikalkulasi dari `birthday` dengan batuan beberapa kode (tidak tersedia yang pendek-pendek, dan karena detail tidak masalah di sini).\n\nApakah tepat menggunakan huruf kapital untuk `birthday`? Untuk `age`? Atau bahkan untuk keduanya?\n\n```js\nconst BIRTHDAY = '18.04.1982'; // buat huruf kapital?\n\nconst AGE = someCode(BIRTHDAY); // buat huruf kapital?\n```\n\n" }, { "path": "1-js/02-first-steps/04-variables/article.md", "content": "# Variabel\n\nSeringnya, aplikasi JavaScript butuh kerja dengan informasi. Di sini ada dua contoh:\n1. Toko online -- informasinya mungkin berisi barang-barang yang dijual dan kereta belanja.\n2. Aplikasi chat -- informasinya mungkin berisi user, pesan, dan banyak lagi.\n\nVariabel digunakan untuk menyimpan informasi ini.\n\n## Variabel\n\n[Variabel](https://en.wikipedia.org/wiki/Variable_(computer_science)) ialah \"simpanan bernama\" untuk data. Kita bisa memakainya untuk menyimpan barang, pengunjung, dan data lain.\n\nUntuk membuat variabel di JavaScript, gunakan katakunci `let`.\n\nPernyataan di bawah membuat (dengan kata lain: *declares* or *defines*) variabel dengan nama \"message\":\n\n```js\nlet message;\n```\n\nKini, kita bisa menaruh beberapa data ke dalamnya dengan menggunakan operator penetapan `=`:\n\n```js\nlet message;\n\n*!*\nmessage = 'Hello'; // simpan string\n*/!*\n```\n\nString ini kini disimpan ke area memori yang terasosiasi dengan variabel. Kita bisa mengakses itu menggunakan nama variabel:\n\n```js run\nlet message;\nmessage = 'Hello!';\n\n*!*\nalert(message); // tampilkan isi variabel\n*/!*\n```\n\nSupaya ringkas, kita bisa mengkombinasi deklarasi variabel dan penetapan ke baris tunggal:\n\n```js run\nlet message = 'Hello!'; // definisikan variabel dan tetapkan nilai\n\nalert(message); // Hello!\n```\n\nKita juga bisa mendeklarasi variabel ganda dalam satu baris:\n\n```js no-beautify\nlet user = 'John', age = 25, message = 'Hello';\n```\n\nKelihatannya pendek, tapi itu tidak disarankan. Demi kemudahan dibaca, tolong gunakan bari tunggal per variabel.\n\nVarian multibaris agak panjang, tapi lebih mudah dibaca:\n\n```js\nlet user = 'John';\nlet age = 25;\nlet message = 'Hello';\n```\n\nBeberapa orang juga mendefinisi variabel ganda dalam gaya multibaris ini:\n```js no-beautify\nlet user = 'John',\n age = 25,\n message = 'Hello';\n```\n\n...Atau bahkan dalam gaya \"comma-first\":\n\n```js no-beautify\nlet user = 'John'\n , age = 25\n , message = 'Hello';\n```\n\nSecara teknis, semua varian ini melakukan hal yang sama. Jadi, cuma masaleh selera personal dan estetika saja.\n\n\n````smart header=\"`var` ketimbang `let`\"\nDi script jadul, kamu mungkin juga menemukan katakunci lain: `var` ketimbang `let`:\n\n```js\n*!*var*/!* message = 'Hello';\n```\n\nKatakunci `var` *hampir* sama dengan `let`. Gunanya untuk mendeklarasi variabel, tapi caranya agak sedikit beda, \"jadul\".\n\nAda perbedaan halus antara `let` dan `var`, tapi itu tak masalah buat kita sekarang ini. Kita akan mengcover mereka lebih detil di bab .\n````\n\n## Analogy kehidupan nyata\n\nKita bisa dengan mudah memahami konsep \"variabel\" jika kita membayangkannya sebagai \"box\" untuk data, dengan stiker nama yang unik.\n\nMisalnya, variabel `message` bisa dibayangkan sebagai box berlabel `\"message\"` dengan nilai `\"Hello!\"` di dalamnya:\n\n![](variable.svg)\n\nKita bisa menaruh nilai apapun di dalam box.\n\nKita juga bisa mengubahnya sebanyak yang kita mau:\n```js run\nlet message;\n\nmessage = 'Hello!';\n\nmessage = 'World!'; // value changed\n\nalert(message);\n```\n\nKetika nilainya berubah, data lama dihapus dari variabel:\n\n![](variable-change.svg)\n\nKita juga bisa mendeklarasi dua variabel dan mengkopi data dari satu ke yang lainnya.\n\n```js run\nlet hello = 'Hello world!';\n\nlet message;\n\n*!*\n// mengkopi 'Hello world' dari hello ke message\nmessage = hello;\n*/!*\n\n// sekarang dua variabel punya data yang sama\nalert(hello); // Hello world!\nalert(message); // Hello world!\n```\n\n````warn header=\"Mendeklarasikan variabel dua kali akan menciptakan error\"\nSebuah variabel seharusnya di deklarasikan hanya sekali.\n\nMendeklarasikan variabel berkali kali akan menciptakan error:\n\n```js run\nlet message = \"This\";\n\n// repeated 'let' leads to an error\n// deklarasi 'let' berulang akan mengembalikan sebuah error\nlet message = \"That\"; // SyntaxError: 'message' has already been declared\n```\nJadi, kita harus mendeklarasikan variabel sekali dan menggunakan variabel tersebut tanpa menggunakan 'let'.\n````\n\n```smart header=\"Bahasa fungsional\"\nIni sangat menarik untuk diperhatikan bahwa ada bahasa pemrograman [fungsional](https://en.wikipedia.org/wiki/Functional_programming), seperti [Scala](http://www.scala-lang.org/) atau [Erlang](http://www.erlang.org/) yang melarang merubah nilai dari variabel.\n\nDi dalam bahasa macam ini, sekali nilai disimpan \"dalam box\", ia akan di sana selamanya. Jika kita harus menyimpan sesuatu yang lain, bahasa tersebut memaksa kita membuat box baru (mendeklarasi variabel baru). Kita tak bisa menggunakan ulang yang lama.\n\nMeski kelihatan sedikit aneh saat pandangan pertama, bahasa-bahasa ini ternyata mumpuni untuk pengembangan yang serius. Lebih dari itu, ada area seperti komputasi paralel di mana keterbatasan ini memberikan keuntungan tertentu. Disarankan mempelajari bahasa macam ini (meski jika kamu tak berencana menggunakannya segera) untuk meningkatkan wawasan.\n```\n\n## Penamaan variabel [#variable-naming]\n\nAda dua keterbatasan pada nama variabel di JavaScript:\n\n1. Nama hanya boleh mengandung huruf, digit, atau simbol seperti `$` and `_`.\n2. Karakter pertama tidak boleh digit.\n\nContoh nama valid:\n\n```js\nlet userName;\nlet test123;\n```\n\nKetika namanya mengandung kata ganda, [camelCase](https://en.wikipedia.org/wiki/CamelCase) umum digunakan: kata demi kata digabung, setiap kata kecuali yang pertama dimulai dengan huruf kapital: `myVeryLongName`.\n\nYang menarik ialah -- tanda dollar `'$'` dan underscore `'_'` juga bisa digunakan dalam nama. Mereka simbol reguler, hanya seperti huruf, tanpa makna yang spesial.\n\nNama-nama ini valid:\n\n```js run untrusted\nlet $ = 1; // declared a variable with the name \"$\"\nlet _ = 2; // and now a variable with the name \"_\"\n\nalert($ + _); // 3\n```\n\nContoh nama variabel yang tidak valid:\n\n```js no-beautify\nlet 1a; // cannot start with a digit\n\nlet my-name; // hyphens '-' aren't allowed in the name\n```\n\n```smart header=\"Case berpengaruh\"\nVariabel dengan nama `apple` dan `AppLE` adalah dua variabel yang berbeda.\n```\n\n````smart header=\"Huruf non-Latin diperbolehkan, namun tak direkomendasikan\"\nBoleh menggunakan bahasa apapun, termasuk huruf cyrillic atau bahkan hieroglyphs, seperti ini:\n\n```js\nlet имя = '...';\nlet 我 = '...';\n```\n\nSecara teknis, tak ada error di sini, nama-nama begitu boleh digunakan, tapi ada tradisi internasional untuk menggunakan bahasa Inggris dalam nama variabel. Meski jika kita menulis script kecil, kemungkinan variabelnya akan digunakan terus-menerus. Dan juga orang-orang dari negara lain mungkin harus membaca beberapa kali.\n````\n\n````warn header=\"Nama-nama yang dikecualikan\"\nAda [daftar kata yang dikecualikan](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords), yang tidak bisa digunakan sebagai nama variabel karena mereka digunakan oleh bahasa Javascript sendiri.\n\nMisalnya: `let`, `class`, `return`, dan `function` dikecualikan.\n\nKode di bawah menghasilkan galat syntax:\n\n```js run no-beautify\nlet let = 5; // tak bisa menamai variable \"let\", galat!\nlet return = 5; // juga tak bisa menamainya \"return\", galat!\n```\n````\n\n````warn header=\"Assignment tanpa `use strict`\"\n\nNormalnya, kita harus mendefinisi variabel sebelum memakainya. Tapi dulu, secara teknis boleh membuat variabel hanya dengan penetapan nilai tanpa menggunakan `let`. Ini masih berjalan jika kita tak menaruh `use strict` di script kita untuk mengelola kompatibilitas dengan script jadul.\n\n```js run no-strict\n// note: tak ada \"use strict\" di contoh ini\n\nnum = 5; // variabel \"num\" dibuat jika ia tak ada\n\nalert(num); // 5\n```\n\nIni kebiasaan buruk dan akan mengakibatkan galat dalam mode ketat:\n\n```js\n\"use strict\";\n\n*!*\nnum = 5; // galat: num tak terdefinisi\n*/!*\n```\n````\n\n## Konstan\n\nUntuk mendeklarasi variabel konstan (tak berubah), gunakan `const` ketimbang `let`:\n\n```js\nconst myBirthday = '18.04.1982';\n```\n\nVariabel yang dideklarasi menggunakan `const` disebut \"konstan\". Mereka tak bisa diubah. Jika kamu mencoba mengubahnya maka ia menghasilkan galat:\n\n```js run\nconst myBirthday = '18.04.1982';\n\nmyBirthday = '01.01.2001'; // error, tak bisa menetapkan-ulang konstan!\n```\n\nKetika programmer yakin bahwa variabel tak akan berubah, mereka bisa mendeklarasikan `const` untuk menjamin hal itu dan memberitahu semua orang.\n\n\n### Konstan huruf-besar\n\nAda kebiasaan umum untuk menggunakan konstan sebagai alias untuk nilai yang sulit dihafal yang akan diketahui sebelum dieksekusi.\n\nKonstan macam ini dinamai dengan huruf kapital dan underscore.\n\nMisalnya, mari kita buat konstan untuk warna dalam sesuatu yang disebut format \"web\" (hexadecimal):\n\n```js run\nconst COLOR_RED = \"#F00\";\nconst COLOR_GREEN = \"#0F0\";\nconst COLOR_BLUE = \"#00F\";\nconst COLOR_ORANGE = \"#FF7F00\";\n\n// ...ketika kita harus memilih warna\nlet color = COLOR_ORANGE;\nalert(color); // #FF7F00\n```\n\nKeuntungan:\n\n- `COLOR_ORANGE` lebih mudah diingat ketimbang `\"#FF7F00\"`.\n- Lebih rentan salah penulisan `\"#FF7F00\"` ketimbang `COLOR_ORANGE`.\n- Ketika membaca code, `COLOR_ORANGE` lebih berarti daripada `#FF7F00`.\n\nKapan kita sebaiknya menggunakan kapital untuk konstan dan kapan itu dinamai dengan normal? Ayo kita perjelas.\n\nMenjadi \"konstan\" hanya berarti jika nilai variable tak pernah berubah. Tapi ada konstan yang diketahui sebelum eksekusi (seperti nilai hexadecimal untuk merah) dan ada konstan yang *dikalkulasi* dalam run-time, selama eksekusi, tapi tak berubah setelah penetapan inisial mereka.\n\nMisalnya:\n```js\nconst pageLoadTime = /* waktu yang dibutuhkan laman web untuk meload */;\n```\n\nNilai `pageLoadTime` tidak diketahui sebelum laman diload, jadi itu dinamai dengan normal. Tapi ia masih konstan karena ia tak berubah setelah penetapan.\n\nDengan kata lain, konstan berhuruf kapital hanya digunakan sebagai alias untuk nilai yang \"dihard-code\". \n\n## Namai dengan benar\n\nBerbicara tentang variabel, ada satu hal yang sangat penting.\n\nNama variabel sebaiknya punya arti yang bersih dan jelas, yang menjelaskan data yang ia simpan.\n\nPenamaan variabel adalah salah satu keahlian yang penting dan rumit dalam pemrograman. Pandangan sekilas pada nama variabel bisa menyingkap kode yang ditulis oleh pengembang pemula versus pengembang berpengalaman.\n\nDi proyek nyata, kebanyakan waktu dihabiskan untuk modifikasi dan mengextend code base ketimbang menulis sesuatu yang benar-benar baru dari awal. Ketika kita kembali ke beberapa kode setelah melakukan sesuatu yang lain untuk sementara, akan lebih mudah menemukan informasi yang labelnya tepat. Atau, dengan kata lain, ketika variabel punya nama yang baik.\n\nTolong renungkan tentang nama yang baik untuk variabel sebelum mendeklarasinya. Itu baik untukmu.\n\nBeberapa aturan yang baik untuk ditiru:\n\n- Gunakan nama yang manusiawi seperti `userName` atau `shoppingCart`.\n- Jauhi singkatan atau nama pendek seperti `a`, `b`, `c`, kecuali jika kamu benar-benar tau apa yang kamu lakukan.\n- Buat nama sedeskriptif dan sejelas mungkin. Contoh nama yang jelek ialah `data` dan `value`. Nama semacam ini tidak punya makna dan hanya OK untuk menggunakannya jika data atau nilai variabel yang mengacu kontex kodenya luar biasa jelas.\n- Sepakat dalam hal-hal yang ada di dalam timmu dan pikiranmu. Jika pengunjung situs disebut \"user\" maka kita sebaiknya menamai variabel terkait `currentUser` atau `newUser` ketimbang `currentVisitor` atau `newManInTown`.\n\nKedengaran simpel kan? Jelas saja, tapi membuat nama variabel descriptif dan jelas pada praktiknya tidak mudah. Coba lakukan.\n\n```smart header=\"Daur ulang atau buat baru?\"\nDan catatan terakhirnya. Ada juga programmer malas yang, ketimbang mendeklarasi variabel baru, cenderung menggunakan variabel yang sudah ada.\n\nHasilnya, variabel mereka seperti box yang orang-orang lempar tanpa menganti stikernya. Apa yang ada di dalam boxnya? Siapa yang tahu? Kita harus mengeceknya dengan seksama.\n\nProgrammer macam ini pelit terhadap satu deklarasi variabel namun boros sepuluh kali saat debugging.\n\nVariabel extra itu baik, tidak jahat.\n\nJavaScript minifier dan peramban modern mengoptimisasi kode dengan cukup baik, sehingga ia tak akan mengakibatkan isu performa. Menggunakan variabel yang berbeda untuk nilai yang berbeda bahkan bisa membantu engine mengoptimisasi kodemu.\n```\n\n## Kesimpulan\n\nKita bisa mendeklarasi variabel untuk menyimpan data menggunakan katakunci `var`, `let`, atau `const`.\n\n- `let` -- adalah deklarasi variabel modern.\n- `var` -- adalah deklarasi variabel jadul. Normalnya kita tak menggunakannya sama sekali, tapi kita akan mengcover perbedaan halus dari `let` di bab , hanya jika kamu membutuhkannya.\n- `const` -- seperti `let`, tapi nilai variabelnya tak bisa diubah.\n\nVariabel sebaiknya diberi nama yang memudahkan kita untuk memahami apa isinya.\n" }, { "path": "1-js/02-first-steps/05-types/1-string-quotes/solution.md", "content": "\nBacktick mengembed expresi di dalam `${...}` ke dalam string.\n\n```js run\nlet name = \"Ilya\";\n\n// expresinya ialah angka 1\nalert( `hello ${1}` ); // hello 1\n\n// expresinya ialah nama string\nalert( `hello ${\"name\"}` ); // hello name\n\n// expresinya ialah variabel, embed dia\nalert( `hello ${name}` ); // hello Ilya\n```\n" }, { "path": "1-js/02-first-steps/05-types/1-string-quotes/task.md", "content": "nilai penting: 5\n\n---\n\n# Petik string\n\nApa output dari script ini?\n\n```js\nlet name = \"Ilya\";\n\nalert( `hello ${1}` ); // ?\n\nalert( `hello ${\"name\"}` ); // ?\n\nalert( `hello ${name}` ); // ?\n```" }, { "path": "1-js/02-first-steps/05-types/article.md", "content": "# Tipe data\n\nDalam Javascript terdapat beberapa tipe data yang dapat digunakan, sebuah *string* atau sebuah *number*\n\nTerdapat delapan tipe data dasar dalam Javascript. Disini, kita akan mempelajarinya dan di bagian selanjutnya kita akan mempelajarinya secara detail.\n\nKita bisa menggunakan tipe apa saja didalam sebuah variabel. Contoh, Untuk sesaat sebuah variabel bisa saja memiliki tipe data *string* dan selanjutnya variabel tersebut menyimpan *number*:\n\n```js\n// Tidak ada error\nlet message = \"hello\";\nmessage = 123456;\n```\n\nBahasa pemrograman yang mendukung hal semacam ini, seperti Javascript, disebut dengan \"dynamically typed\", berarti terdapat tipe data, akan tetapi variabel tidak terikat pada tipe data apapun.\n\n## Number\n\n```js\nlet n = 123;\nn = 12.345;\n```\n\nTipe *number* merepresentasikan angka baik integer maupun floating point.\n\nAda banyak operasi untuk angka, misal perkalian `*`, pembagian `/`, penambahan `+`, pengurangan `-`, dan lainnya.\n\nSelain angka reguler, ada yang disebut \"nilai numerik spesial\" yang juga bagian dari tipe data ini: `Infinity`, `-Infinity` dan `NaN`.\n\n- `Infinity` mewakili [Infinity](https://en.wikipedia.org/wiki/Infinity) matematis ∞. Ia merupakan nilai spesial yang lebih besar dari angka apapun.\n\n Kita bisa mendapatkannya sebagai hasil dari pembagian oleh nol:\n\n ```js run\n alert( 1 / 0 ); // Infinity\n ```\n\n Atau langsung referensikan saja dia:\n\n ```js run\n alert( Infinity ); // Infinity\n ```\n- `NaN` mewakili error komputasional. Ia merupakan hasil operasi matematis yang salah atau tak-terdefinisi, misalnya:\n\n ```js run\n alert( \"not a number\" / 2 ); // NaN, pembagian macam ini keliru\n ```\n\n `NaN` itu lengket. Operasi lanjutan apapun pada `NaN` menghasilkan `NaN`:\n\n ```js run\n alert( \"not a number\" / 2 + 5 ); // NaN\n ```\n\n Jadi, jika ada `NaN` di manapun di expresi matematika, ia mempropagasi hasil keseluruhan.\n\n```smart header=\"Operasi matematika itu aman\"\nMelakukan matematika itu \"aman\" dalam JavaScript. Kita bisa melakukan apapun: pembagian dengan nol, memperlakukan string non-numerik sebagai angka, dll.\n\nScript ini takkan pernah stop dengan fatal error (\"die\"). Paling buruk, kita akan mendapat `NaN` sebagai hasilnya.\n```\n\nNilai numerik spesial formalnya merupakan bagian dari tipe \"number\". Tentu saja mereka bukan angka dalam pandangan umum dari kata ini.\n\nKita akan melihat lebih tentang cara bekerja dengan angka di bab .\n\n## BigInt [#bigint-type]\n\nDidalam Javascript, tipe data \"number\" tidak bisa mengandung nilai lebih dari (253-1) (sama dengan `9007199254740991`) atau kurang dari -(253-1). Itu adalah batasan teknik yang dibuat.\n\nUntuk kebanyakan kebutuhan sebenarnya sudah cukup, dan terkadang kita membutuhkan nilai yang lebih besar, contohnya untuk kriptografy atau perhitungan waktu microsecond.\n\nTipe data `BigInt` lalu ditambahkan kedalam Javascript untuk menampilkan nilai *integer* yang sangat panjang.\n\nTipe data `BigInt` dibuat dengan menambahkan `n` diakhir dari nilai sebuah *integer*.\n\n```js\n// arti dari \"n\" pada akhir menandakan bahwa contoh dibawah adalah sebuah `BigInt`\nconst bigInt = 1234567890123456789012345678901234567890n;\n```\n\nSebenarnya `BigInt` jarang dibutuhkan, kita tidak akan mempelajarinya disini, tetapi akan dipisahkan didalam bagian . Baca saja saat kamu membutuhkan nilai *integer* yang sangat panjang.\n\n\n```smart header=\"Masalah Kompabilitas\"\nSekarang `BigInt` sudah didukung oleh Firefox/Chrome/Edge, tapi tidak didalam Safari/Internet Explorer.\n\n\nYou can check [*MDN* BigInt compatibility table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#Browser_compatibility) to know which versions of a browser are supported.\n\n## String\n\nString di JavaScript harus dikelilingi petik.\n\n```js\nlet str = \"Hello\";\nlet str2 = 'Single quotes are ok too';\nlet phrase = `can embed another ${str}`;\n```\n\nDi JavaScript, ada 3 tipe petik.\n\n1. Petik ganda: `\"Hello\"`.\n2. Petik tunggal: `'Hello'`.\n3. Backtick: `Hello`.\n\nPetik tunggal dan ganda merupakan petik \"simpel\". Tak ada perbedaan antara mereka di JavaScript.\n\nBacktick merupakan petik \"fungsional lanjutan\". Mereka memungkinkan kita mengembed variabel dan expresi ke dalam string dengan membungkus mereka dalam `${…}`, misalnya:\n\n```js run\nlet name = \"John\";\n\n// mengembed satu variabel\nalert( `Hello, *!*${name}*/!*!` ); // Hello, John!\n\n// mengembed expresi\nalert( `the result is *!*${1 + 2}*/!*` ); // hasilnya 3\n```\n\nExpresi di dalam `${…}` dievaluasi dan hasilnya menjadi bagian dari string. Kita bisa menaruh apapun di sana: variabel seperti `name` atau expresi aritmatika seperti `1 + 2` atau sesuatu yang lebih rumit.\n\nTolong diingat bahwa ini hanya bisa dilakukan dalam backtick. Petik lain tidak punya fungsionalitas pengembedan!\n```js run\nalert( \"the result is ${1 + 2}\" ); // hasilnya ${1 + 2} (petik ganda tak akan berpengaruh)\n```\n\nKita akan mengcover string lebih dalam di bab .\n\n```smart header=\"Tidak ada tipe *character*.\"\nDalam beberapa bahasa, ada tipe \"character\" spesial untuk karakter tunggal. Misalnya, di bahasa C dan di Java adalah `char`.\n\nDi JavaScript, tak ada tipe semacam itu. Cuma ada satu tipe: `string`. String bisa berisi satu karakter atau lebih.\n```\n\n## Boolean (tipe logika)\n\nTipe boolean cuma punya dua nilai: `true` dan `false`.\n\nTipe ini umumnya digunakan untuk menyimpan niai ya/tidak: `true` artinya \"ya, betul\", dan `false` artinya \"tidak, salah\".\n\nMisalnya:\n\n```js\nlet nameFieldChecked = true; // ya, field nama dicek\nlet ageFieldChecked = false; // tidak, field usia tak dicek\n```\n\nNilai boolean juga datang dari perbandingan:\n\n```js run\nlet isGreater = 4 > 1;\n\nalert( isGreater ); // benar (hasil perbandingan yaitu \"ya\")\n```\n\nKita akan mengcover boolean lebih dalam di bab .\n\n## Nilai \"null\"\n\nNilai `null` spesial bukan bagian dari tipe apapun yang dijelaskan di atas.\n\nIa membentuk tipe terpisah miliknya sendiri yang cuma berisi nilai `null`:\n\n```js\nlet age = null;\n```\n\nDi JavaScript, `null` tidak \"mereferensi ke objek yang tak ada\" atau \"null pointer\" seperti beberapa bahasa lain.\n\nIa cuma nilai spesial yang mewakili \"hampa\", \"kosong\" atau \"nilai tak-diketahui\".\n\nKode diatas mengatakan bahwa `age` tidak diketahui.\n\n## Nilai \"undefined\"\n\nNilai spesial `undefined` juga berbeda lagi. Ia punya tipe miliknya sendiri, sama seperti `null`.\n\nArti `undefined` ialah \"nilai yang tak ditetapkan\".\n\nJika variabel dideklarasi, namun tak ditetapkan, maka nilainya `undefined`:\n\n```js run\nlet age;\n\nalert(age); // menampilkan \"undefined\"\n```\n\nSecara teknis, kita bisa secara jelas menetapkan `undefined` kedalam sebuah variabel:\n\n```js run\nlet age = 100;\n\n// mengubah nilai menjadi undefined\nage = undefined;\n\nalert(age); // \"undefined\"\n```\n\n...Tapi kita tidak menyarankan itu. Normalnya, kita gunakan `null` untuk menetapkan nilai \"kosong\" atau \"tak-diketahui\" ke variabel, dan kita gunakan `undefined` untuk pengecekan seperti melihat apakah nilai dari variabel telah ditetapkan.\n\n## Objek dan Simbol\n\nTipe `object` itu special.\n\nSeluruh tipe data lainnya disebut \"primitive\" karena hanya bisa mengandung satu buah nilai (entah itu sebuah string ataupun number atau lainnya). Sebaliknnya, object digunakan untuk menyimpan koleksi dari data dan entitas lainnya.\n\nObjek itu penting, objek membutuhkan perlakuan yang spesial. Kita akan pelajari objek lebih lanjut di bagian , setelah kita pelajari lebih lanjut tentang tipe data primitif.\n\nTipe `symbol` digunakan untuk menciptakan identifier unik untuk sebuah objek. Untuk kelengkapan kita akan menyebutkannya disini, tetapi akan ditunda hingga kita tahu tentang objek\n\n## Operator typeof [#type-typeof]\n\nOperator `typeof` mengembalikan tipe argumen. Berguna ketika kita ingin memproses nilai dari tipe berbeda secara berbeda atau cuma ingin mengecek sekilas.\n\nIa mendukung dua bentuk syntax:\n\n1. Sebagai operator: `typeof x`.\n2. Sebagai fungsi: `typeof(x)`.\n\nDengan kata lain, ia berjalan dengan atau tanpa kurung. Hasilnya sama saja.\n\nPanggilan ke `typeof x` mengembalikan string dengan nama tipenya:\n\n```js\ntypeof undefined // \"undefined\"\n\ntypeof 0 // \"number\"\n\ntypeof 10n // \"bigint\"\n\ntypeof true // \"boolean\"\n\ntypeof \"foo\" // \"string\"\n\ntypeof Symbol(\"id\") // \"symbol\"\n\n*!*\ntypeof Math // \"object\" (1)\n*/!*\n\n*!*\ntypeof null // \"object\" (2)\n*/!*\n\n*!*\ntypeof alert // \"function\" (3)\n*/!*\n```\n\nTiga baris terakhir mungkin butuh penjelasan tambahan:\n\n1. `Math` ialah objek built-in yang menyediakan operasi matematik. Kita akan belajar itu di bab . Di sini, ia cuma sekedar contoh dari objek.\n2. Hasil `typeof null` yaitu `\"object\"`. Itu salah. Ia merupakan error yang terkenal resmi dalam `typeof`, yang dijaga untuk kompatibilitas. Tentu saja, `null` bukanlah objek. Ia merupakan nilai spesial dengan tipe terpisah miliknya sendiri. Jadi, lagi, ini merupakan error dalam bahasa.\n3. Hasil dari `typeof alert` yaitu `\"function\"`, karena `alert` merupakan fungsi. Kita akan belajar fungsi di bab berikutnya di mana kita juga akan melihat bahwa tak ada tipe \"fungsi\" spesial di JavaScript. Fungsi merupakan bagian dari tipe objek. Tapi `typeof` memperlakukan mereka secara berbeda, yang mengembalikan `\"fungsi\"`. Itu tak sepenuhnya benar, tapi sangat nyaman pada praktiknya.\n\n## Kesimpulan\n\nAda 7 tipe data dasar dalam JavaScript.\n\n- `number` untuk nomor dengan bentuk apapun: integer ataupun nilai yang memiliki nilai desimal, batas dari integer adalah ±253.\n- `bigint` untuk nomor integer yang sangat panjang.\n- `string` untuk string. Sebuah string mungkin memiliki 0 atau lebih karakter, tidak ada tipe data untuk string yang memiliki panjang 1 karakter.\n- `boolean` untuk `true`/`false`.\n- `null` untuk nilai yang tidak diketahui -- sebuah tipe data mandiri yang memiliki satu nilai yaitu `null`.\n- `undefined` untuk nilai yang tidak ada atau tidak diberikan nilai -- sebuah tipe data mandiri yang memiliki satu nilai yaitu `null`.\n- `object` untuk struktur data yang lebih rumit.\n- `symbol` untuk identifier atau pengenal yang unik.\n\nOperator `typeof` memungkinkan kita melihat tipe mana yang disimpan dalam variable.\n\n- Dua form: `typeof x` atau `typeof(x)`.\n- Mengembalikan string dengan nama tipe, seperti `\"string\"`.\n- Untuk `null` mengembalikan `\"object\"` -- ada error dalam bahasa, yang sebenarnya bukan objek.\n\nDi bab berikutnya, kita akan fokus pada nilai primitive dan sekali kita familiar dengan mereka, kita akan lanjut ke objek.\n" }, { "path": "1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md", "content": "Kode JavaScript:\n\n```js demo run\nlet name = prompt(\"Siapakah nama Anda?\", \"\");\nalert(name);\n```\n\nLaman penuh:\n\n```html\n\n\n\n\n \n\n\n\n```\n" }, { "path": "1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md", "content": "nilai penting: 4\n\n---\n\n# Laman simpel\n\nBuat laman web yang meminta nama dan menampilkannya.\n\n[demo]\n" }, { "path": "1-js/02-first-steps/06-alert-prompt-confirm/article.md", "content": "# Interaksi: alert, prompt, confirm\n\nsebagaimana kita akan menggunakan peramban sebagai lingkungan percobaan kode, ayo kita lihat beberapa fungsi untuk berinteraksi dengan pengguna: `alert`, `prompt` dan `confirm`.\n\n## alert\n\nUntuk yang satu ini kita sudah pernah melihatnya. Ini akan menampilkan pesan dan menunggu pengguna untuk menekan tombol \"OK\".\n\nContoh:\n\n```js run\nalert(\"Hello\");\n```\n\nMini-window dengan pesan ini disebut *modal window*. Kata \"modal\" artinya pengunjung tak bisa berinteraksi dengan apapun di laman, menekan tombol lain, dll. hingga mereka selesai berurusan dengan window ini. Dalam hal ini -- hingga mereka menekan \"OK\".\n\n## prompt\n\nFungsi `prompt` menerima dua argumen:\n\n```js no-beautify\nresult = prompt(title, [default]);\n```\n\nIa menampilkan modal window dengan pesan teks, input field untuk pengunjung, dan tombol OK/CANCEL.\n\n`title`\n: Teks untuk ditampilkan ke pengunjung.\n\n`default`\n: Parameter kedua opsional, nilai inisial untuk input field.\n\n```smart header=\"Kurung siku didalam sintaks `[...]`\"\nKurung siku di sintaks `default` di kode sintaks di atas menandakan bahwa parameter itu bersifat opsional, tidak benar-benar dibutuhkan.\n```\n\nPengunjung halaman bisa mengetik sesuatu didalam kotak prompt dan menekan tombol OK. Lalu kita akan mendapatkan teksnya didalam `result`. Atau pengunjung halaman bisa membatalkan kotak promp dengan menekan *Cancel* atau menekan `key:Esc` pada *keyboard*, lalu kita akan mendapatkan `null` sebagai `result`.\n\nPanggilan ke `prompt` mengembalikan teks dari input field atau `null` jika input dibatalkan.\n\nMisalnya:\n\n```js run\nlet age = prompt('Berapakah umut anda?', 100);\n\nalert(`Umur Anda ${age} tahun`); // Umur Anda 100 tahun!\n```\n\n```warn header=\"In IE: selalu isikan nilai `default`\"\nParameter kedua ini opsional, tapi jika kita tidak menyuplai, Internet Explorer akan menyisipkan teks `\"undefined\"` ke dalam prompt.\n\nJalan kode ini di Internet Explorer untuk melihat:\n\n```js run\nlet test = prompt(\"Test\");\n```\n\nJadi, supaya prompt terlihat bagus di IE, sebaiknya sediakan argumen kedua:\n\n```js run\nlet test = prompt(\"Test\", ''); // <-- for IE\n```\n\n## confirm\n\nSyntaxnya:\n\n```js\nresult = confirm(question);\n```\n\nFungsi `confirm` menampilkan modal window dengan `pertanyaan` dan dua tombol: OK dan Cancel.\n\nHasilnya `true` jika OK ditekan dan `false` jika tidak.\n\nMisalnya:\n\n```js run\nlet isBoss = confirm(\"Are you the boss?\");\n\nalert( isBoss ); // true jika OK ditekan\n```\n\n## Kesimpulan\n\nKita membahas 3 fungsi spesifik peramban untuk berinteraksi dengan pengunjung:\n\n`alert`\n: menampilkan pesan.\n\n`prompt`\n: menampilkan pesan yang minta input teks pengguna. Ia mengembalikan teks atau, jika Cancel atau `key:Esc` diklik, `null`.\n\n`confirm`\n: menampilkan pesan dan menunggu pengguna menekan \"OK\" atau \"Cancel\". Ia mengembalikan `true` untuk OK dan `false` untuk Cancel/`key:Esc`.\n\nSemua metode ini ialah modal: mereka menyela exekusi script dan tak membolehkan pengunjung berinteraksi dengan apapun di laman hingga window ditutup.\n\nAda dua batasan yang dibagikan semua metode di atas:\n\n1. Lokasi tepat modal window ditentukan oleh peramban. Biasanya, di tengah.\n2. Tampilan tepat window juga tergantung peramban. Kita tak bisa modifikasi ini.\n\nItulah harga untuk kesederhanaan. Ada banyak cara menampilkan window lebih manis dan kaya akan interaksi dengan pengguna, tapi jika \"bells and whistles\" tak jadi masalah, metode ini baik-baik saja.\n" }, { "path": "1-js/02-first-steps/07-type-conversions/article.md", "content": "# Konversi Tipe\n\nSeringkali, operator dan fungsi otomatis mengkonversi nilai yang diberikan ke mereka ke tipe yang sesuai. \n\nMisalnya, `alert` otomatis mengkonversi nilai apapun ke string untuk menampilkannya. Operasi mathematika mengkonversi nilai ke angka.\n\nAda juga kasus di mana kita harus explisit mengkonversi nilai ke tipe yang diharapkan.\n\n```smart header=\"Belum bicara objek dulu\"\nDi bab ini, kita takkan mengcover objek. Daripada itu, kita akan belajar primitives dulu.\n\nLalu, setelah kita belajar tentang objek, kita akan lihat cara konversi objek bekerja di bab .\n```\n\n## Konversi String\n\nKonversi string terjadi ketika kita butuh bentuk string dari nilai.\n\nMisalnya, `alert(value)` menampilkan nilai.\n\nKita juga bisa memanggil fungsi `String(value)` untuk mengkonversi nilai string:\n\n```js run\nlet value = true;\nalert(typeof value); // boolean\n\n*!*\nvalue = String(value); // sekarang nilainya string \"true\"\nalert(typeof value); // string\n*/!*\n```\n\nKonversi string kebanyakan jelas. `false` menjadi `\"false\"`, `null` menjadi `\"null\"`, dll.\n\n## Konversi Numerik\n\nKonversi numerik terjadi otomatis dalam fungsi dan expresi matematis.\n\nMisalnya, ketika pembagian `/` dilakukan ke non-angka:\n\n```js run\nalert( \"6\" / \"2\" ); // 3, string dikonversi ke angka\n```\n\nKita bisa gunakan fungsi `Number(value)` untuk explisit mengkonversi `value` ke angka:\n\n```js run\nlet str = \"123\";\nalert(typeof str); // string\n\nlet num = Number(str); // menjadi angka 123\n\nalert(typeof num); // angka\n```\n\nKonversi explisit biasanya dibutuhkan ketika kita membaca nilai dari sumber berbasis string seperti form teks namun mengharapkan angka untuk dienter.\n\nJika stringnya angka tak valid, hasilnya konversi macam ini ialah `NaN`. Misalnya:\n\n```js run\nlet age = Number(\"an arbitrary string instead of a number\");\n\nalert(age); // NaN, konversi gagal\n```\n\nAturan konversi numerik:\n\n| Value | Becomes... |\n|-------|-------------|\n|`undefined`|`NaN`|\n|`null`|`0`|\n|true dan false | `1` and `0` |\n| `string` | Whitespaces dari awal dan akhir dibuang. Jika string sisanya kosong, hasilnya `0`. Sebaliknya, angkanya \"dibaca\" dari stringnya. Error memberikan `NaN`. |\n\nMisalnya:\n\n```js run\nalert( Number(\" 123 \") ); // 123\nalert( Number(\"123z\") ); // NaN (error membaca angka pada \"z\")\nalert( Number(true) ); // 1\nalert( Number(false) ); // 0\n```\n\nTolong diingat bahwa kelakuan `null` dan `undefined` berbeda di sini: `null` menjadi nol namun `undefined` menjadi `NaN`.\n\nHampir semua operasi matematik melakukan konversi semacam ini, yang akan kita lihat di bab berikutnya.\n\n## Konversi Boolean\n\nKonversi boolean ialah yang paling simpel.\n\nIni terjadi dalam operasi logika (nanti kita akan menemui tes kondisi dan hal mirp lainnya) tapi bisa juga berjalan explisit dengan panggilan ke `Boolean(value)`.\n\nAturan konversi:\n\n- Nilai yang secara intuitif \"kosong\", seperti `0`, string kosong, `null`, `undefined`, dan `NaN`, menjadi `false`.\n- Nilai lainnya menjadi `true`.\n\nMisalnya:\n\n```js run\nalert( Boolean(1) ); // true\nalert( Boolean(0) ); // false\n\nalert( Boolean(\"hello\") ); // true\nalert( Boolean(\"\") ); // false\n```\n\n````warn header=\"Please note: the string with zero `\\\"0\\\"` is `true`\"\nSome languages (namely PHP) treat `\"0\"` as `false`. But in JavaScript, a non-empty string is always `true`.\n\n```js run\nalert( Boolean(\"0\") ); // true\nalert( Boolean(\" \") ); // spaces, also true (any non-empty string is true)\n```\n````\n\n## Kesimpulan\n\nTiga tipe konversi yang paling digunakan ialah ke string, ke angka, dan ke boolean.\n\n**`Konversi String`** -- Terjadi ketika kita mengoutput sesuatu. Bisa berjalan dengan `String(value)`. Konversi ke string biasanya untuk nilai primitif.\n\n**`Konversi Numerik`** -- Terjadi di operasi matematika. Bisa berjalan dengan `Number(value)`.\n\nKonversinya mengikuti aturan ini:\n\n| Value | Becomes... |\n|-------|-------------|\n|`undefined`|`NaN`|\n|`null`|`0`|\n|true / false | `1 / 0` |\n| `string` | Stringnya dibaca \"apa adanya\", whitespace dari kedua sisi diabaikan. String kosong menjadi `0`. Error memberikan `NaN`. |\n\n**`Konversi Boolean`** -- Terjadi di operasi logika. Bisa berjalan dengan `Boolean(value)`.\n\nIkuti aturan ini:\n\n| Value | Becomes... |\n|-------|-------------|\n|`0`, `null`, `undefined`, `NaN`, `\"\"` |`false`|\n|nilai lain apapun| `true` |\n\n\nKebanyakan aturan ini mudah dipahami dan diingat. Pengecualian penting di mana orang biasanya membuat kesalahan yaitu:\n\n- `undefined` ialah `NaN` sebagai angka, buka `0`.\n- `\"0\"` dan string yang cuma-spasi seperti `\" \"` ialah true sebagai boolean.\n\nObjek tidak dicover di sini. Kita akan kembali ke mereka nanti di bab yang khusus exclusif untuk objeck setelah kita belajar hal-hal lebih dasar tentang JavaScript.\n" }, { "path": "1-js/02-first-steps/08-operators/1-increment-order/solution.md", "content": "\nJawabannya adalah:\n\n- `a = 2`\n- `b = 2`\n- `c = 2`\n- `d = 1`\n\n```js run no-beautify\nlet a = 1, b = 1;\n\nalert( ++a ); // 2, bentuk prefix mengembalikan nilainya\nalert( b++ ); // 1, bentuk postfix mengembalikan nilai lamanya\n\nalert( a ); // 2, diinkremen sekali\nalert( b ); // 2, diinkremen sekali\n```\n\n" }, { "path": "1-js/02-first-steps/08-operators/1-increment-order/task.md", "content": "nilai penting: 5\n\n---\n\n# Bentuk postfix dan prefix\n\nBerapa nilai final dari semua variabel `a`, `b`, `c` dan `d` setelah kode berikut?\n\n```js\nlet a = 1, b = 1;\n\nlet c = ++a; // ?\nlet d = b++; // ?\n```\n" }, { "path": "1-js/02-first-steps/08-operators/2-assignment-result/solution.md", "content": "Jawabannya adalah:\n\n- `a = 4` (dikali 2)\n- `x = 5` (dikalkulasi sebagai 1 + 4)\n\n" }, { "path": "1-js/02-first-steps/08-operators/2-assignment-result/task.md", "content": "nilai penting: 3\n\n---\n\n# Hasil penetapan\n\nBerapa nilai dari `a` dan `x` setelah kode berikut?\n\n```js\nlet a = 2;\n\nlet x = 1 + (a *= 2);\n```\n" }, { "path": "1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md", "content": "\n```js no-beautify\n\"\" + 1 + 0 = \"10\" // (1)\n\"\" - 1 + 0 = -1 // (2)\ntrue + false = 1\n6 / \"3\" = 2\n\"2\" * \"3\" = 6\n4 + 5 + \"px\" = \"9px\"\n\"$\" + 4 + 5 = \"$45\"\n\"4\" - 2 = 2\n\"4px\" - 2 = NaN\n\" -9 \" + 5 = \" -9 5\" // (3)\n\" -9 \" - 5 = -14 // (4)\nnull + 1 = 1 // (5)\nundefined + 1 = NaN // (6)\n\" \\t \\n\" - 2 = -2 // (7)\n```\n\n1. Penambahan dengan string `\"\" + 1` mengkonversi `1` ke string: `\"\" + 1 = \"1\"`, dan kita punya `\"1\" + 0`, aturan yang sama berlaku.\n2. Pengurangan `-` (seperti kebanyakan operasi matematika) cuma berjalan dengan angka, ia mengkonversi string kosong `\"\"` ke `0`.\n3. Penambahan dengan string mengappend angka `5` ke string.\n4. Pengurangan selalu mengkonversi ke angka, jadi ia membuat `\" -9 \"` menjadi angka `-9` (mengabaikan spasi sekitarnya).\n5. `null` menjadi `0` setelah konversi numerik.\n6. `undefined` menjadi `NaN` setelah konversi numerik.\n7. Karakter spasi, ialah string yang depan dan belakangnya ditrim ketika string dikonversi ke angka. Berikut seluruh string berisi karakter spasi, seperti `\\t`, `\\n` dan spasi \"reguler\" di antaranya. Jadi, serupa dengan string kosong, ia menjadi `0`.\n" }, { "path": "1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md", "content": "nilai penting: 5\n\n---\n\n# Konversi tipe\n\nApa hasil dari expresi ini?\n\n```js no-beautify\n\"\" + 1 + 0\n\"\" - 1 + 0\ntrue + false\n6 / \"3\"\n\"2\" * \"3\"\n4 + 5 + \"px\"\n\"$\" + 4 + 5\n\"4\" - 2\n\"4px\" - 2\n\" -9 \" + 5\n\" -9 \" - 5\nnull + 1\nundefined + 1\n\" \\t \\n\" - 2\n```\n\nPikirkan dengan baik, tulis dan bandingkan dengan jawaban.\n" }, { "path": "1-js/02-first-steps/08-operators/4-fix-prompt/solution.md", "content": "Alasannya adalah karena kotak *prompt* mengembalikan inputan dari user sebagai string.\n\nJadi nilai dari masing-masing variabel adalah `\"1\"` dan `\"2\"`.\n\n```js run\nlet a = \"1\"; // prompt(\"Angka pertama?\", 1);\nlet b = \"2\"; // prompt(\"Angka kedua?\", 2);\n\nalert(a + b); // 12\n```\n\nApa yang kita harus lakukan untuk mengubah string menjadi angka sebelum `+`, gunakan `Number()` atau menambahkannya dengan `+`.\n\nContoh, tepat sebelum `prompt`:\n\n```js run\nlet a = +prompt(\"Angka pertama?\", 1);\nlet b = +prompt(\"Angka kedua?\", 2);\n\nalert(a + b); // 3\n```\n\nAtau didalam `alert`:\n\n```js run\nlet a = prompt(\"Angka pertama?\", 1);\nlet b = prompt(\"Angka kedua?\", 2);\n\nalert(+a + +b); // 3\n```\n\nMenggunakan *unary* dan *binary* `+` dicontoh kode terakhir terlihat lucu, kan?\n" }, { "path": "1-js/02-first-steps/08-operators/4-fix-prompt/task.md", "content": "nilai penting: 5\n\n---\n\n# Benarkan penambahan\n\nIni adalah kode yang menanyakan pengguna untuk memasukan dua angka dan menampilkan jumlahnya.\n\nKodenya tidak berjalan dengan semestinya. Keluaran dari contoh kode dibawah adalah `12` (nilai dimasukan secara default didalam kotak prompt).\n\nKenapa? Benarkan. Hasilnya haruslah `3`.\n\n```js run\nlet a = prompt(\"Angka pertama?\", 1);\nlet b = prompt(\"Angka kedua?\", 2);\n\nalert(a + b); // 12\n```\n" }, { "path": "1-js/02-first-steps/08-operators/article.md", "content": "# Operator dasar, maths\n\nKita tahu banyak operator dari sekolah. Mereka adalah penambahan `+`, perkalian `*`, pengurangan `-`, dll.\n\nDidalam bagian ini, kita akan memulai dengan menggunakan operator sederhana, lalu kita akan fokus pada aspek khusus Javascript, yang tidak dipelajari pada aritmatika di sekolah.\n\n## Istilah: \"unary\", \"binary\", \"operand\"\n\nSebelum kita lanjut, mari pahami dulu terminologi umum.\n\n- *Operand* -- untuk apa operator diaplikasikan. Misalnya, dalam perkalian `5 * 2` ada dua operand: operand kiri `5` dan operand kanan `2`. Kadang, orang memanggil ini \"argumen\" ketimbang \"operand\".\n- Operator disebut *unary* jika ia punya operand tunggal. Misalnya, negasi unary `-` membalikkan tanda dari angka:\n\n ```js run\n let x = 1;\n\n *!*\n x = -x;\n */!*\n alert( x ); // -1, negasi unary diaplikasikan\n ```\n- Operator disebut *binary* jika ia punya dua operand. Minus yang sama juga berada dalam bentuk binary:\n\n ```js run no-beautify\n let x = 1, y = 3;\n alert( y - x ); // 2, minus binary mengurangi nilai\n ```\n\n Formalnya, di contoh di atas kita punya dua operator berbeda yang berbagi simbol yang sama: operator negasi, operator unary yang membalik tanda, dan operator pengurangan, operator biner yang mengurangi angka satu dengan lainnya.\n\n## Maths\n\nOperasi matematika dibawah telah didukung didalam Javascript:\n\n- Penambahan `+`,\n- Pengurangan `-`,\n- Perkalian `*`,\n- Pembagian `/`,\n- Sisa Bagi `%`,\n- Eksponensial `**`.\n\nKeempat operasi pertama sudah cukup jelas, sementara `%` dan `**` membutuhkan lebih banyak kata-kata untuk dijelaskan.\n\n### Sisa bagi %\n\nOperator sisa bagi `%` sebagaimana kelihatannya, tidak berhubungan dengan persen.\n\nHasil dari `a % b` adalah [nilai sisa](https://en.wikipedia.org/wiki/Remainder) dai pembagian antara `a` oleh `b`.\n\nContoh\n\n```js run\nalert( 5 % 2 ); // 1, sisa dari pembagian antara 5 dibagi 2\nalert( 8 % 3 ); // 2, sisa dari pembagian antara 8 dibagi 3\n```\n\n### Eksponensial **\n\nOperator eksponensial `a ** b` mengkalikan `a` dengan nilai itu sendiri sebanyak `b` kali.\n\nDalam matematika sekolah, kita menuliskannya sebagaib.\n\nalert( 2 ** 2 ); // 2² = 4\nalert( 2 ** 3 ); // 2³ = 8\nalert( 2 ** 4 ); // 2⁴ = 16\n```\n\nSama seperti dalam matematika, operator eksponensial juga didefinisikan untuk bilangan non-bilangan bulat.\n\nMisalnya, akar kuadrat adalah eksponensial dengan :\n\n```js run\nalert( 4 ** (1/2) ); // 2 (pangkat 1/2 sama dengan akar kuadrat)\nalert( 8 ** (1/3) ); // 2 (pangkat 1/3 sama dengan akar kubik)\n```\n\n\n## Penambahan string dengan +\n\nAyo kita bertemu dengan fitur dari operator Javascript yang berada diatas aritmatika di sekolah.\n\nBiasanya, operator plus `+` menambah angka.\n\nTapi, jika binary `+` diaplikasikan ke string, ia menggabungkan (konkatenasi) mereka:\n\n```js\nlet s = \"my\" + \"string\";\nalert(s); // mystring\n```\n\nIngat bahwa jika salah satu operand berupa string, maka yang satunya dikonversi ke string juga.\n\nMisalnya:\n\n```js run\nalert( '1' + 2 ); // \"12\"\nalert( 2 + '1' ); // \"21\"\n```\n\nLihat, tak masalah operand manapun yang berupa string. Aturannya simpel: jika salah satu operand adalah string, maka yang satunya dikonversi ke string juga.\n\nNamun, ingat bahwa operasi berjalan dari kiri ke kanan. Jika ada dua angka diikuti string, angka akan ditambah sebelum dikonversi ke string:\n\nIni adalah contoh yang lebih rumit:\n\n```js run\nalert(2 + 2 + '1' ); // \"41\" dan bukan \"221\"\n```\n\nDisini, operator bekerja secara bergantian. Pertama `+` menambahkan dua angka, jadi akan menghasilkan `4`, lalu selanjutnya `+` menambahkan string `1` kedalamnya, jadi akan menjadi seperti `4 + '1' = 41`.\n\n```js run\nalert('1' + 2 + 2); // \"122\" dan bukan \"14\"\n```\ndisini, bilangan pertama adalah string, kompiler memperlakukan dua bilangan lainnya sebagai string juga. Bilangan `2` ditambahkan dengan `1`, jadi `'1' + 2 = \"12\"` dan `\"12\" + 2 = \"122\"`.\n\nOperator `+` hanyalah satu-satunya operator yang mendukung penggunaan string dengan cara semacan itu. Operator aritmatika lainnya hanya bekerja dengan angka dan selalu mengubah operannya menjadi angka.\n\nIni adalah contoh untuk pengurangan dan pembagian:\n\n```js run\nalert( 6 - '2' ); // 4, mengubah '2' menjadi angka\nalert( '6' / '2' ); // 3, mengubah keduanya menjadi angka\n```\n\n## Konversi angka, unary +\n\nPlus `+` ada dalam dua bentuk: bentuk binary yang kita gunakan di atas dan bentuk unary.\n\nPlus unary atau, dalam kata lain, operator plus `+` diaplikasikan ke nilai tunggal, tak berefek apapun ke angka. Tapi jika operand bukan angka, plus unary dikonversi ke dalam angka.\n\nMisalnya:\n\n```js run\n// Tak ada efek ke angka\nlet x = 1;\nalert( +x ); // 1\n\nlet y = -2;\nalert( +y ); // -2\n\n*!*\n// Mengkonversi non-angka\nalert( +true ); // 1\nalert( +\"\" ); // 0\n*/!*\n```\n\nSebenarnya ia melakukan hal yang sama seperti `Number(...)`, tapi lebih pendek.\n\nKebutuhan mengkonversi string ke angka sangat sering meningkat. Misalnya, jika kita memperoleh nilai dari kolom di form HTML, mereka biasanya string. Bagaimana jika kita ingin menjumlahkan mereka?\n\nPlus binary akan menambah mereka sebagai string:\n\n```js run\nlet apples = \"2\";\nlet oranges = \"3\";\n\nalert( apples + oranges ); // \"23\", plus binary mengkonkatenasi string\n```\n\nJika kita ingin memperlakukan mereka sebagai angka, kita harus mengkonversi, lalu menjumlahkan mereka:\n\n```js run\nlet apples = \"2\";\nlet oranges = \"3\";\n\n*!*\n// kedua nilai dikonversi ke angka sebelum plus binary\nalert( +apples + +oranges ); // 5\n*/!*\n\n// varian lebih panjang\n// alert( Number(apples) + Number(oranges) ); // 5\n```\n\nDari sisi pandang matematikawan, melimpahnya plus terlihat aneh. Tapi dari sisi pandang programmer, tak ada yang spesial: plus unary diaplikasikan dahulu, lalu mengkonversi string ke angka, dan lalu binary plus menjumlahkan mereka.\n\nKenapa plus unary diaplikasi ke nilai sebelum binarynya? Seperti yang kita lihat, itu karena *peresedensi lebih tinggi* mereka.\n\n## Presedensi operator\n\nJika expresi punya lebih dari satu operator, urutan eksekusi ditentukan oleh *presedensi* mereka, atau dengan kata lain, urutan prioritas default operator.\n\nDari sekolah, kita semua tahu bahwa perkalian dalam expresi `1 + 2 * 2` harus dihitung sebelum penambahan. Itulah arti dari presedensi. Perkalian disebut memiliki *presedensi lebih tinggi* dari penambahan.\n\nTanda kurung mengesampingkan presedensi apapun, jadi jika kita tak puas dengan urutan default, kita bisa gunakan mereka untuk mengubahnya. Misalnya: tulis `(1 + 2) * 2`.\n\nAda banyak operator di JavaScript. Tiap operator punya nomor presedensi masing-masing. Nomor yang lebih besar dieksekusi terlebih dahulu. Jika presedensinya sama, urutan eksekusinya dari kiri ke kanan.\n\nDi sini adalah extrak dari [tabel presedensi](https://developer.mozilla.org/en/JavaScript/Reference/operators/operator_precedence) (kamu tak usah mengingat ini, tapi catat bahwa operator unary lebih tinggi dari binary terkait):\n\n| Presedensi | Nama | Tanda |\n|------------|------|------|\n| ... | ... | ... |\n| 17 | plus unary | `+` |\n| 17 | negasi unary | `-` |\n| 16 | akar pangkat | `**` |\n| 15 | perkalian | `*` |\n| 15 | pembagian | `/` |\n| 13 | penambahan | `+` |\n| 13 | pengurangan | `-` |\n| ... | ... | ... |\n| 3 | penetapan | `=` |\n| ... | ... | ... |\n\nSeperti yang kita lihat, \"plus unary\" punya prioritas `17` yang lebih tinggi dari `13` \"penambahan\" (plus binary). Itulah kenapa, dalam expresi `\"+apples + +oranges\"`, plus unary bekerja sebelum penambahan.\n\n## Penetapan\n\nMari ingat bahwa penetapan `=` juga merupakan operator. Ia terdaftar di tabel presedensi dengan prioritas sangat rendah `3`.\n\nItulah kenapa, ketika kita tetapkan variabel, seperti `x = 2 * 2 + 1`, kalkulasinya dilakukan pertama dan kemudian `=` dievaluasi, menyimpan hasilnya dalam in `x`.\n\n```js\nlet x = 2 * 2 + 1;\n\nalert( x ); // 5\n```\n\n### Assignment = mengembalikan nilai\n\nFakta dari `=` menjadi sebuah operator, bukanlah sebuah hal yang \"fantastis\" konstruksi dari bahasa memiliki implikasi yang menarik.\n\nKebanyakan operator di Javascript mengembalikan sebuah nilai. Sudah jelas untuk `+` dan `-`, tetapi berlaku juga untuk `=`.\n\nPanggilan `x = value` menulis `value` ke dalam `x` *dan mengembalikannya*.\n\nIni adalah demo yang menggunakan penetapan sebagai bagian dari expresi yang rumit:\n\n```js run\nlet a = 1;\nlet b = 2;\n\n*!*\nlet c = 3 - (a = b + 1);\n*/!*\n\nalert( a ); // 3\nalert( c ); // 0\n```\n\nDi contoh di atas, hasil dari expresi `(a = b + 1)` ialah nilai yang ditetapkan ke `a` (yaitu `3`). Ia kemudian digunakan untuk evaluasi berikutnya.\n\nKodenya lucu, kan? kita harus mengerti bagaimana itu bekerja, karena terkadang kita melihat hal itu didalam library Javascript.\n\nDan juga, tolong jangan tulis kode seperti itu. Trik semacam itu tidak akan membuat kode menjadi jelas dan mudah dibaca.\n\n### Chaining assignments / Assignments berantai\n\nFitur menarik lainnya adalah kemampuan untuk melakukan assignments berantai:\n\n```js run\nlet a, b, c;\n\n*!*\na = b = c = 2 + 2;\n*/!*\n\nalert( a ); // 4\nalert( b ); // 4\nalert( c ); // 4\n```\n\nAssignments berantai mengevaluasi dari kanan ke kiri. Pertama, dari ekspresi paling kanan `2 + 2` di evaluasi terlebih dahulu dan dimasukan kedalam variabel disebelah kiri: `c`, `b` dan `a`. Dan diakhir, seluruh variabel saling membagi satu nilai.\n\nSekali lagi, untuk tujuan kode yang mudak dibaca akan lebih baik untuk membagi kode kedalam beberapa baris:\n\n```js\nc = 2 + 2;\nb = c;\na = c;\n```\nIni akan mudah untuk dibaca, terutama jika melihatnya secara sekilas.\n\n## Mengubah variabel secara langsung\n\nKita terkadang membutuhkan sebuah operator untuk sebuah variabel dan menyimpan hasil baru didalam variabel yang sama\n\nContoh:\n\n```js\nlet n = 2;\nn = n + 5;\nn = n * 2;\n```\n\nNotasi ini bisa diperpendek dengan menggunakan operator `+=` dan `*=`:\n\n```js run\nlet n = 2;\nn += 5; // sekarang n = 7 (sama dengan n = n + 5)\nn *= 2; // sekarang n = 14 (sama dengan n = n * 2)\n\nalert( n ); // 14\n```\n\nOperator dari \"ubah-dan-simpan\" atau bisa disebut mengubah variabel secara langsung hadir pada setiap aritmatik dan operator bitwise: `/=`, `-=`, etc.\n\nOperator semacam itu memiliki hak dengan tingkat yang sama dengan assignment yang biasa, jadi mereka akan berjalan setelah kalkulasi lainnya selesai:\n\n```js run\nlet n = 2;\n\nn *= 3 + 5;\n\nalert( n ); // 16 (bagian paling kanan dievaluasi terlebih dahulu, sama seperti n *= 8)\n```\n\n## Inkremen/dekremen\n\n\n\nMenaikkan atau menurunkan satu angka ialah salah satu operasi numerik paling umum.\n\nJadi, ada operator spesial untuk itu:\n\n- **Inkremen** `++` menaikkan variabel sebanyak 1:\n\n ```js run no-beautify\n let counter = 2;\n counter++; // cara kerjanya sama dengan counter = counter + 1, tapi lebih pendek\n alert( counter ); // 3\n```\n- **Decrement** `--` menurunkan variabel sebanyak 1:\n\n ```js run no-beautify\n let counter = 2;\n counter--; // cara kerjanya sama dengan counter = counter - 1,tapi lebih pendek\n alert( counter ); // 1\n ```\n\n```warn\nInkremen/dekremen cuma bisa diaplikasikan ke variabel. Mencoba menggunakan itu pada nilai seperti `5++` akan menghasilkan galat.\n​```\n\nOperator `++` dan `--` bisa ditaruh sebelum atau setelah variabel.\n\n- Ketika operatornya ditaruh setelah variabel, ia ada dalam \"bentuk postfix\": `counter++`.\n- \"Bentuk prefix\" ialah ketika operatornya ditaruh sebelum variabel: `++counter`.\n\nKedua pernyataan ini melakukan hal yang sama: menambah `counter` sebanyak `1`.\n\nApakah ada perbedaan? Ya, tapi kita cuma bisa melihatnya jika kita menggunakan nilai kembalian `++/--`.\n\nMari kita klarifikasi. Seperti yang kita tahu, semua operator mengembalikan nilai. Inkremen/dekremen bukan pengecualian. Bentuk prefix mengembalikan nilai baru sedangkan bentuk postfix mengembalikan nilai lama (sebelum inkremen/dekremen).\n\nUntuk melihat perbedaannya, berikut misalnya:\n\n```js run\nlet counter = 1;\nlet a = ++counter; // (*)\n\nalert(a); // *!*2*/!*\n​```\n\nDalam baris `(*)`, bentuk *prefix*`++counter` menginkremen `counter` dan mengembalikan nilai baru, `2`. Jadi, `alert` menampilkan `2`.\n\nSekarang, mari kita gunakan bentuk postfix:\n\n```js run\nlet counter = 1;\nlet a = counter++; // (*) ganti ++counter ke counter++\n\nalert(a); // *!*1*/!*\n​```\n\nDalam baris `(*)`, bentuk *postfix* `counter++` juga menginkremen `counter` tapi mengembalikan nilai *lama* (sebelum inkremen). Jadi, `alert` menampilkan `1`.\n\nRingkasnya:\n\n- Jika hasil dari inkremen/dekremen tak digunakan, tak ada bedanya bentuk mana yang dipakai:\n\n ```js run\n let counter = 0;\n counter++;\n ++counter;\n alert( counter ); // 2, kedua counter diatas melakukan hal yang serupa.\n ```\n- Jika kita ingin menaikkan nilai *dan* langsung memakai hasil dari operator, kita butuh bentuk prefix:\n\n ```js run\n let counter = 0;\n alert( ++counter ); // 1\n ```\n- Jika kita ingin menginkremen suatu nilai tanpa memakai nilai sebelumnya, kita butuh bentuk postfix:\n\n ```js run\n let counter = 0;\n alert( counter++ ); // 0\n ```\n\n````smart header=\"Inkremen/dekremen di antara operator lainnya\"\nOperator `++/--` bisa juga digunakan di dalam expresi. Presedensi mereka lebih tinggi dari kebanyakan operasi aritmatika lainnya.\n\nMisalnya:\n\n```js run\nlet counter = 1;\nalert( 2 * ++counter ); // 4\n​```\n\nBandingkan dengan:\n\n```js run\nlet counter = 1;\nalert( 2 * counter++ ); // 2, karena counter++ mengembalikan nilai \"lama\"\n​```\n\nMeski secara teknis OK, notasi macam ini biasanya membuat kode kurang dapat dibaca. Satu baris melakukan banyak hal -- tak baik.\n\nSambil membaca kode, dan melihatnya secara sekilas kita bisa saja melewatkan kode seperti `counter++` dan tidak akan jelas bahwa nilai variabel telah bertambah.\n\nJadi direkomendasikan menuliskan kode dengan gaya \"satu baris -- satu aksi\":\n\n```js run\nlet counter = 1;\nalert( 2 * counter );\ncounter++;\n​```\n````\n\n## Operator bitwise\n\nOperator bitwise memperlakukan argumen sebagai angka integer 32-bit dan bekerja pada level representasi biner mereka.\n\nOperator ini bukan spesifik JavaScript. Mereka didukung di banyak bahasa pemrograman.\n\nDaftar operator:\n\n- AND ( `&` )\n- OR ( `|` )\n- XOR ( `^` )\n- NOT ( `~` )\n- LEFT SHIFT ( `<<` )\n- RIGHT SHIFT ( `>>` )\n- ZERO-FILL RIGHT SHIFT ( `>>>` )\n\nOperator seperti diatas sangat jarang digunakan, ketika kita membutuhkan untuk memainkan angka di level paling rendah (bitwise). Kita tidak akan membutuhkan operator seperti ini dalam waktu dekat, sebagaimana dalam pengembangan web penggunaan operator seperti itu lebih sedikit, tetapi di area yang spesial, seperti kriptographi, operator seperti itu sangan dibutuhkan. Kamu bisa membaca artikel [Bitwise Operators](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators) di MDN ketika kamu membutuhkannya.\n\n## Koma\n\nOperator koma `,` ialah satu dari banyak operator paling langka dan tak biasa. Kadang, ia digunakan untuk menulis kode lebih pendek, jadi kita harus tahu itu untuk memahami apa yang terjadi.\n\nOperator koma memperbolehkan untuk mengevaluasi beberapa expresi, membagi mereka dengan koma `,`. Each of them is evaluated but only the result of the last one is returned.\n\nMisalnya:\n\n```js run\n*!*\nlet a = (1 + 2, 3 + 4);\n*/!*\n\nalert( a ); // 7 (hasil dari 3 + 4)\n```\n\nDi sini, expresi pertama `1 + 2` dievaluasi dan hasilnya dibuang. Lalu, `3 + 4` dievaluasi dan dikembalikan sebagai hasilnya.\n\n```smart header=\"Koma punya presedensi sangat kecil\"\nHarap ingat bahwa operator koma punya presedensi sangat kecil, lebih kecil dari `=`, jadi tanda kurung penting dalam contoh di atas.\n\nTanpa mereka: `a = 1 + 2, 3 + 4` mengevaluasi `+` terlebih dahulu, menjumlahkan mereka menjadi `a = 3, 7`, lalu operator penetapan `=` menetapkan `a = 3`, dan sisanya diabaikan. Ini seperti `(a = 1 + 2), 3 + 4`.\n```\n\nKenapa kita butuh operator yang membuang semuanya kecuali expresi terakhir?\n\nKadang, orang memakai itu dalam konstruksi rumit untuk menaruh beberapa aksi dalam satu baris.\n\nMisalnya:\n\n```js\n// tiga operasi dalam satu baris\nfor (*!*a = 1, b = 3, c = a * b*/!*; a < 10; a++) {\n ...\n}\n```\n\nTrik macam ini dipakai di banyak framework JavaScript. Itulah kenapa kita membahas mereka. Tapi, biasanya, mereka tak membuat kode mudah dibaca sehingga kita sebaiknya pikir-pikir dulu sebelum menggunakan mereka.\n" }, { "path": "1-js/02-first-steps/09-comparison/1-comparison-questions/solution.md", "content": "\n\n```js no-beautify\n5 > 4 → true\n\"apple\" > \"pineapple\" → false\n\"2\" > \"12\" → true\nundefined == null → true\nundefined === null → false\nnull == \"\\n0\\n\" → false\nnull === +\"\\n0\\n\" → false\n```\n\nBeberapa alasan:\n\n1. Sudah jelas, true.\n2. Pembandingan kamus, jadi false. `\"a\"` lebih kecil dari `\"p\"`.\n3. Lagi, pembandingan kamus, karakter pertama `\"2\"` lebih besar dari karakter pertama `\"1\"`.\n4. Nilai `null` dan `undefined` selalu bernilai sama.\n5. Equalitas ketat memang ketat. Tipe berbeda dari kedua sisi menghasilkan false.\n6. Serupa dengan `(4)`, `null` hanya sama dengan `undefined`.\n7. Equalitas ketat dari tipe berbeda.\n" }, { "path": "1-js/02-first-steps/09-comparison/1-comparison-questions/task.md", "content": "nilai penting: 5\n\n---\n\n# Pembandingan\n\nApa hasil dari expresi ini?\n\n```js no-beautify\n5 > 4\n\"apple\" > \"pineapple\"\n\"2\" > \"12\"\nundefined == null\nundefined === null\nnull == \"\\n0\\n\"\nnull === +\"\\n0\\n\"\n```\n\n" }, { "path": "1-js/02-first-steps/09-comparison/article.md", "content": "# Perbandingan\n\nKita tahu beberapa operator pembanding dari matematika.\n\nDidalam Javascript operator-operator itu ditulis seperi ini:\n\n- Lebih besar/kurang dari: a > b, a < b.\n- Lebih besar/kurang dari atau sama: a >= b, a <= b.\n- Sama dengan: `a == b`, perhatikan tanda dua `=` digunakan untuk test persamaan, jika menggunakan satu `=` seperti `a = b` itu adalah sebuah asignment atau memasukan nilai kedalam variabel.\n- Tidak sama dengan: Didalam matematika notasinya seperti ≠, tetapi didalam Javascript ditulis seperti a != b.\n\nDidalam artikel ini kita akan belajar lebih lanjut tentang perbedaan tipe dari perbandingan, bagaimana cara Javascript membuatnya, termasuk sifat-sifat penting.\n\nDiakhir nanti kamu akan menemukan hal yang bagus untuk menghindari masalah yang berhubungan dengan \"kebiasaan Javascript\".\n\n## Boolean ialah hasilnya\n\nSemua operator pembanding mengembalikan nilai boolean:\n\n- `true` -- berarti \"ya\", \"betul\" atau \"fakta\".\n- `false` -- berarti \"tidak\", \"salah\" atau \"bukan fakta\".\n\nMisalnya:\n\n```js run\nalert( 2 > 1 ); // true (benar)\nalert( 2 == 1 ); // false (salah)\nalert( 2 != 1 ); // true (benar)\n```\n\nHasil perbandingan bisa ditetapkan ke variabel, sama seperti nilainya:\n\n```js run\nlet result = 5 > 4; // tetapkan hasil perbandingan\nalert( result ); // true\n```\n\n## Perbandingan string\n\nUntuk melihat apakah satu string lebih besar dari yang lain, JavaScript menggunakan yang disebut \"kamus\" atau urutan \"lexicografik\".\n\nDengan keta lain, string diperbandingkan huruf-demi-huruf.\n\nMisalnya:\n\n```js run\nalert( 'Z' > 'A' ); // true\nalert( 'Glow' > 'Glee' ); // true\nalert( 'Bee' > 'Be' ); // true\n```\n\nalgoritma untuk membandingkan dua string sederhana:\n\n1. Bandingkan karakter pertama dari kedua string.\n2. Jika karakter pertama dari string pertama lebih besar (atau lebih kecil) dari string kedua, maka string pertama lebih besar (atau lebih kecil) dari string kedua. Kita selesai.\n3. Sebaliknya, jika karakter pertama kedua string sama, bandingkan karakter kedua dengan cara sama.\n4. Ulangi sampai string berakhir.\n5. Jika kedua string berakhir pada panjang yang sama, maka mereka sama. Sebaliknya, string lebih panjang yang lebih besar.\n\nPada contoh di atas, pembandingan `'Z' > 'A'` menghasilkan pada langkah pertama sedangkan string `\"Glow\"` dan `\"Glee\"` dibandingkan karakter-demi-karakter:\n\n1. `G` sama dengan `G`.\n2. `l` sama dengan `l`.\n3. `o` lebih besar dari `e`. Berhenti di sini. String pertama lebih besar.\n\n```smart header=\"Bukan dictionary riil, tapi urutan Unicode\"\nAlgoritma pembangingan yang diberikan di atas secara kasar equivalen dengan yang digunakan dalam kamus atau buku telpon, tapi tak sepenuhnya sama.\n\nMisalnya, case diperhitungkan. Huruf besar `\"A\"` tak sama dengan huruf kecil `\"a\"`. Yang mana yang lebih besar? Huruf kecil `\"a\"`. Kenapa? Karena karakter huruf kecil punya index lebih besar dalam tabel encoding internal yang dipakai JavaScript (Unicode). Kita akan kembali ke detil spesifik dan konsekuensinya dalam bab .\n```\n\n## Pembandingan dari tipe yang berbeda\n\nKetika membandingkan nilai dari tipe yang berbeda, JavaScript mengkonversi nilai tersebut ke angka.\n\nMisalnya:\n\n```js run\nalert( '2' > 1 ); // true, string '2' menjadi angka 2\nalert( '01' == 1 ); // true, string '01' menjadi angka 1\n```\n\nUntuk nilai boolean, `true` menjadi `1` dan `false` menjadi `0`. \n\nMisalnya:\n\n```js run\nalert( true == 1 ); // true\nalert( false == 0 ); // true\n```\n\n````smart header=\"Konsekuensi lucu\"\nMemungkinkan juga bahwa pada saat yang sama:\n\n- Dua nilai equal.\n- Satu dari mereka `true` sebagai boolean dan satunya lagi `false` sebagai boolean.\n\nMisalnya:\n\n```js run\nlet a = 0;\nalert( Boolean(a) ); // false\n\nlet b = \"0\";\nalert( Boolean(b) ); // true\n\nalert(a == b); // true!\n```\n\nDari cara pandang JavaScript', hasil ini terbilang normal. Pengecekan equalitas mengkonversi nilai menggunakan konversi numerik (jadi `\"0\"` menjadi `0`), sedangkan konversi explisit `Boolean` menggunakan set aturan yang lain.\n````\n\n## Equalitas ketat\n\nPengecekan equalitas reguler `==` punya satu problem. Ia tak bisa membedakan `0` dari `false`:\n\n```js run\nalert( 0 == false ); // true\n```\n\nHal yang sama terjadi pada string kosong:\n\n```js run\nalert( '' == false ); // true\n```\n\nIni terjadi karena operand dari tipe yang berbeda dikonversi ke angka oleh operator equalitas `==`. String kosong, sama seperti `false`, menjadi nol.\n\nApa yang dilakukan jika kita ingin membedakan `0` dari `false`?\n\n**Operator equalitas ketat `===` mengecek equalitas tanpa konversi tipe.**\n\nDengan kata lain, jika `a` dan `b` tipenya berbeda, maka `a === b` segera menghasilkan `false` tanpa konversi apapun terhadap mereka.\n\nMari kita coba:\n\n```js run\nalert( 0 === false ); // false, karena tipenya berbeda\n```\n\nAda juga operator \"non-equalitas ketat\" `!==` yang analog dengan `!=`.\n\nOperator equalitas ketat sedikit lebih panjang untuk ditulis, tapi lebih memperlihatkan apa yang terjadi dan meninggalkan ruang lebih kecil untuk galat.\n\n## Pembandingan dengan null dan undefined\n\nAda sikap non-intuitif ketika `null` atau `undefined` diperbandingkan dengan nilai lain.\n\nUntuk pengecekan equalitas ketat `===`\n: Nilai ini berbeda, karena setiap dari mereka tipenya berbeda.\n\n ```js run\n alert( null === undefined ); // false\n ```\n\nUntuk pengecekan non-ketat `==`\n: Ada aturan spesial. Kedyanya merupakan \"pasangan manis\": mereka sama (karena `==`), tapi tidak dengan nilai lain manapun.\n\n ```js run\n alert( null == undefined ); // true\n ```\n\nUntuk pembandingan matematika dan lainnya `< > <= >=`\n: `null/undefined` dikonversi ke angka: `null` menjadi `0`, sedangkan `undefined` menjadi `NaN`.\n\nSekarang mari kita lihat beberapa hal lucu yang terjadi ketika kita menerapkan aturan ini. Dan, yang lebih penting, bagaimana supaya tidak jatuh ke dalam perangkap ini.\n\n### Hasil aneh: null vs 0\n\nMari kita bandingkan `null` dengan nol:\n\n```js run\nalert( null > 0 ); // (1) false\nalert( null == 0 ); // (2) false\nalert( null >= 0 ); // (3) *!*true*/!*\n```\n\nSecara matematik, ini aneh. Hasil terakhir menyatakan bahwa \"`null` lebih besar atau sama dengan nol\", seharusnya salah satu dari pembandingan di atasnya `true`, tapi nyatanya malah tidak.\n\nAlasannya ialah pengecekan equalitas `==` dan pembandingan `> < >= <=` bekerja secara berbeda. Pembandingan mengkonversi `null` ke angka `0`. Itulah kenapa (3) `null >= 0` true dan (1) `null > 0` false.\n\nDi sisi lain, pengecekan equalitas `==` untuk `undefined` and `null` dijelaskan bahwa, tanpa konversi apapun, mereka sama dengan satu sama lain dan tidak sama dengan nilai lain manapun. Itulah kenapa (2) `null == 0` is false.\n\n### Uundefined yang tak bisa diperbandingkan\n\nNilai `undefined` sebainya tak diperbandingkan dengan nilai lain:\n\n```js run\nalert( undefined > 0 ); // false (1)\nalert( undefined < 0 ); // false (2)\nalert( undefined == 0 ); // false (3)\n```\n\nKenapa ia tak suka sekali dengan nol? Selalu false!\n\nKita dapatkan hasil ini karena:\n\n- Pembandingan `(1)` dan `(2)` menghasilkan `false` karena `undefined` dikonversi ke `NaN` dan `NaN` merupakan numerik spesial yang mengembalikan `false` untuk semua pembandingan.\n- Pengecekan equalitas `(3)` mengembalikan `false` karena `undefined` hanya sama dengan `null` dan tidak dengan nilai lain manapun.\n\n### Hindari problem\n\nKenapa kita menggunakan contoh ini? Haruskah kita ingat semua keanehan ini? Tidak juga. Sebenarnya, hal tricky macam ini akan menjadi akrab seiring waktu, tapi ada cara solid untuk menghindari masalah dengan mereka:\n\nPerlakukan pembandingan manapun dengan `undefined/null` kecuali equalitas ketat `===` dengan hati-hati.\n\nJangan gunakan pembandingan `>= > < <=` dengan variabel yang bisa jadi `null/undefined`, kecuali kamu paham apa yang kamu lakukan. Jika variabel bisa punya nilai ini, cek mereka secara terpisah.\n\n## Kesimpulan\n\n- Operator pembandingan menghasilkan nilai boolean.\n- String dibandingkan huruf-demi-huruf dalam urutan \"kamus\".\n- Ketika nilai dari tipe berbeda diperbandingkan, mereka dikonversi ke angka (kecuali pengecekan equalitas ketat).\n- Nilai `null` dan `undefined` sama dengan `==` satu sama lain dan tidak sama dengan nilai lain manapun.\n- Waspada ketika menggunakan pembandingan seperti `>` atau `<` dengan variabel yang kadang bisa jadi `null/undefined`. Pengecekan secara terpisah `null/undefined` merupakan ide yang bagus.\n" }, { "path": "1-js/02-first-steps/10-ifelse/1-if-zero-string/solution.md", "content": "**Ya, tentu saja.**\n\nSetiap string kecuali yang kosong (ingat bahwa `\" 0 \"` tidak kosong) menjadi `true` dalam konteks logika boolean.\n\nKita dapat mengeksekusi dan mengecek kode di bawah ini :\n\n```js run\nif (\"0\") {\n alert( 'Hello' );\n}\n```\n" }, { "path": "1-js/02-first-steps/10-ifelse/1-if-zero-string/task.md", "content": "Nilai penting: 5\n\n---\n\n# if (string berisi angka nol)\n\nApakah `alert` akan dieksekusi?\n\n```js\nif (\"0\") {\n alert( 'Hello' );\n}\n```\n" }, { "path": "1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2/index.html", "content": "\n\n\n\n \n\n\n\n\n\n" }, { "path": "1-js/02-first-steps/10-ifelse/2-check-standard/solution.md", "content": "\n\n[html run src=\"ifelse_task2/index.html\"]\n" }, { "path": "1-js/02-first-steps/10-ifelse/2-check-standard/task.md", "content": "Nilai penting: 2\n\n---\n\n# Nama JavaScript\n\nDengan menggunakan konstruksi `if..else`, tulis kode yang menanyakan: 'Apa nama \"official\" JavaScript?'\n\nJika pengunjung memasukkan \"ECMAScript\", maka tunjukkan output \"Benar!\", Jika tidak - tunjukkan output: \"Tidak tahu? ECMAScript!\"\n\n![](ifelse_task2.svg)\n\n[demo src=\"ifelse_task2\"]\n" }, { "path": "1-js/02-first-steps/10-ifelse/3-sign/if_sign/index.html", "content": "\n\n\n\n\n \n\n\n\n\n" }, { "path": "1-js/02-first-steps/10-ifelse/3-sign/solution.md", "content": "\n\n```js run\nlet value = prompt('Masukan sebuah angka', 0);\n\nif (value > 0) {\n alert( 1 );\n} else if (value < 0) {\n alert( -1 );\n} else {\n alert( 0 );\n}\n```\n" }, { "path": "1-js/02-first-steps/10-ifelse/3-sign/task.md", "content": "Nilai penting: 2\n\n---\n\n# Tunjukkan tandanya\n\nDengan menggunakan `if..else`, tulis kode yang mendapatkan nomor melalui` prompt` dan kemudian tampilkan nomornya dengen menggunakan `alert`:\n\n- `1`, jika nilainya lebih besar dari nol,\n- `-1`, jika kurang dari nol,\n- `0`, jika sama dengan nol.\n\nDalam tugas ini kita mengasumsikan bahwa input selalu berupa angka.\n\n[demo src=\"if_sign\"]\n" }, { "path": "1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md", "content": "\n\n```js\nlet result = (a + b < 4) ? 'Kurang' : 'Lebih';\n```\n" }, { "path": "1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md", "content": "Nilai penting: 5\n\n---\n\n# Tulis ulang 'if' menggunakan '?'\n\nTulis ulang `if` menggunakan operator kondisional `'?'`:\n\n```js\nlet result;\n\nif (a + b < 4) {\n result = 'Kurang';\n} else {\n result = 'Lebih';\n}\n```\n" }, { "path": "1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/solution.md", "content": "\n\n```js\nlet message = (login == 'Karyawan') ? 'Hallo' :\n (login == 'Direksi') ? 'Salam Hangat!' :\n (login == '') ? 'Belum Login' :\n '';\n```\n" }, { "path": "1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md", "content": "Nilai penting: 5\n\n---\n\n# Tulis ulang 'if..else' menjadi '?'\n\nTulis ulang `if..else` menggunakan beberapa operator ternary` '?' `.\n\nAgar mudah dibaca, disarankan untuk membagi kode menjadi beberapa baris.\n\n```js\nlet message;\n\nif (login == 'Karyawan') {\n message = 'Hallo';\n} else if (login == 'Direksi') {\n message = 'Salam Hangat!';\n} else if (login == '') {\n message = 'Belum Login';\n} else {\n message = '';\n}\n```\n" }, { "path": "1-js/02-first-steps/10-ifelse/article.md", "content": "# Kondisi bercabang: if, '?'\n\nTerkadang, kita perlu melakukan tindakan berbeda berdasarkan kondisi yang berbeda.\n\nUntuk melakukan itu, kita dapat menggunakan pernyataan `if` dan operator kondisional `?`, yang juga merupakan \"question mark\" operator (operator tanda tanya).\n\n## Pernyataan \"if\"\n\nPernyataan `if` mengevaluasi suatu kondisi dan, jika hasil kondisi itu `true`, maka blok kode di dalam `if` akan diexekusi.\n\nSebagai contoh:\n\n```js run\nlet tahun = prompt('Ditahun berapa spesifikasi ECMAScript-2015 dipublikasikan?', '');\n\n\n*!*\nif (tahun == 2015) alert( 'Kamu Benar!' );\n*/!*\n```\n\nPada contoh di atas, persyaratannya adalah pemeriksaan kesetaraan sederhana (`tahun == 2015`), tetapi pada kode lain, bisa menjadi jauh lebih kompleks.\n\nJika kita ingin menjalankan lebih dari satu pernyataan di dalam suatu kondisional blok kode, kita harus membungkus blok kode kita di dalam kurung kurawal {} :\n\n```js\nif (tahun == 2015) {\n alert( \"Kamu Benar!\" );\n alert( \"Kamu Memang Pintar!\" );\n}\n```\n\nDisarankan untuk membungkus blok kode Anda dengan kurung kurawal `{}` setiap kali Anda menggunakan pernyataan `if`, bahkan jika hanya ada satu pernyataan di dalam suatu blok kode. Hal ini agar kode anda mudah dibaca oleh anda di masa depan,dan tentu saja oleh orang lain.\n\n## Konversi Boolean\n\nPernyataan `if (…)` mengevaluasi ekspresi dalam tanda kurung dan mengubah hasilnya menjadi boolean.\n\nMari kita mengingat kembali aturan konversi dari bab :\n\n- Angka `0`, string kosong `\"\"`, `null`, `undefined`, dan `NaN` semuanya menjadi salah (`false`). Oleh sebab itu,mereka disebut nilai-nilai \"falsy\" (palsu/salah)\n- Nilai-nilai yang lain menjadi benar (`true`), sehingga kadang mereka disebut \"truthy\" (benar)\n\nJadi, kode dalam kondisi ini tidak akan pernah berjalan:\n\n```js\nif (0) { // 0 adalah falsy\n ...\n}\n```\n\n... dan di dalam kondisi ini - selalu akan berjalan:\n\n```js\nif (1) { // 1 adalah truthy\n ...\n}\n```\n\nKamu juga dapat memberikan nilai boolean yang telah dievaluasi ke `if`, seperti ini::\n\n```js\nlet kondisi = (tahun == 2015); // mengevaluasi nilai apakah *true* atau *false*\n\nif (kondisi) {\n ...\n}\n```\n\n## Klausa \"else\"\n\nPernyataan `if` dapat berisi blok opsional \"else\" opsional. Block \"else\" dijalankan ketika semua kondisi di atas blok \"else\" salah (false) semua.\n\nContohnya:\n```js run\nlet tahun = prompt('Ditahun berapa spesifikasi ECMAScript-2015 dipublikasikan?'', '');\n\nif (tahun == 2015) {\n alert( 'Jawaban kamu benar!' );\n} else {\n alert( 'Hah, kok jawaban kamu salah?' ); // nilai lainnya selain 2015\n}\n```\n\n## Pernyataan kondisional lebih dari satu: \"else if\"\n\nTerkadang, kita ingin menguji beberapa kondisi yang berbeda-beda Klausa `else if` memungkinkan kita melakukan itu.\n\nSebagai contoh:\n\n```js run\nlet tahun = prompt('Ditahun berapa spesifikasi ECMAScript-2015 dipublikasikan?', '');\n\nif (tahun < 2015) {\n alert( 'Terlalu dini...' );\n} else if (tahun > 2015) {\n alert( 'Terlalu akhir' );\n} else {\n alert( 'Tepat sekali!' );\n}\n```\n\nPada kode di atas, pertama JavaScript mengecek ekspresi `tahun < 2015`. Jika itu salah, maka masuk ke kondisi selanjutnya `tahun > 2015`. Jika itu juga salah, pernyataan di dalam blok \"else\" akan dijalankan,yang merupakan sebuah alert\n\nBlok `else if`bisa digunakan berkali-kali. Pernyataan final `else` hanya opsional.\n\n## Operator Kondisional '?'\n\nTerkadang, kita perlu memberi nilai ke suatu variabel tergantung pada suatu kondisi.\n\nContohnya:\n\n```js run no-beautify\nlet accessAllowed;\nlet umur = prompt('Berapakah umur kamu?', '');\n\n*!*\nif (umur > 18) {\n accessAllowed = true;\n} else {\n accessAllowed = false;\n}\n*/!*\n\nalert(accessAllowed);\n```\n\nOperator \"question mark\" (tanda tanya) memungkinkan kita melakukan kode di atas dengan cara yang lebih singkat dan sederhana.\n\nOperator tersebut direpresentasikan oleh tanda tanya `?`. Nama lain dari operator ini adalah \"ternary\", karena operator ini memiliki tiga operan (ternary bahasa Indonesia adalah \"terdiri dari 3 bagian\"). Ini sebenarnya satu-satunya operator dalam JavaScript yang memiliki 3 operan.\n\nSintaksnya adalah:\n```js\nlet result = condition ? value1 : value2;\n```\n\nDi kode di atas, `condition` dievaluasi: jika itu benar maka value1 akan dikembalikan, jika tidak - value2 yang akan dikembalikan.\n\nContohnya:\n\n```js\nlet accessAllowed = (age > 18) ? true : false;\n```\n\nSecara teknis, kita dapat menghilangkan tanda kurung di sekitar `age > 18` . Operator tanda tanya memiliki prioritas rendah, sehingga hanya akan dijalankan setelah perbandingan `>` .\n\nContoh di bawah ini akan melakukan hal yang sama seperti kode sebelumnya:\n\n```js\n// perbandingan operator \"age > 18\" dieksekusi pertama kali\n// (tidak perlu dibungkus dengan kurung)\nlet accessAllowed = age > 18 ? true : false;\n```\n\nTetapi tanda kurung membuat kode lebih mudah dibaca, jadi kami sarankan untuk tetap menggunakannya di kode-kode anda.\n\n````smart\nPada contoh di atas, Anda dapat menghindari pengunaan operator tanda tanya karena perbandingan itu sendiri menghasilkan `true/false`:\n\n```js\n// the same\nlet accessAllowed = age > 18;\n```\n````\n\n## Multiple '?'\n\nRangkaian operator tanda tanya `?` dapat mengembalikan nilai yang tergantung pada lebih dari satu kondisi.\n\nContohnya:\n```js run\nlet age = prompt('age?', 18);\n\nlet message = (age < 3) ? 'Hi, baby!' :\n (age < 18) ? 'Hello!' :\n (age < 100) ? 'Greetings!' :\n 'What an unusual age!';\n\nalert( message );\n```\n\nMungkin sulit pada awalnya untuk memahami apa yang terjadi. Tetapi setelah melihat lebih dekat, kita dapat melihat bahwa itu hanya serangkaian tes biasa:\n\n1. Tanda tanya pertama memeriksa apakah `age < 3`.\n2. Jika benar -- `'Hi, baby!'` akan dikembalikan. Jika tidak, kode akan melanjutkan ke ekspresi setelah titik dua '\":\"', memeriksa apakah `age < 18`.\n3. Jika itu benar -- `'Hello!'` akan dikembalikan. . Jika tidak, kode akan melanjutkan ke ekspresi setelah titik dua berikutnya '\":\"', memeriksa `age < 100`.\n4. Jika itu benar -- `'Greetings!'` akan dikembalikan. Jika tidak, kode akan melanjutkan ke ekspresi setelah titik dua terakhir '\":\"', dan akhirnya akan mengembalikan `'What an unusual age!'`.\n\nKode bawah ini memperlihatkan apabila menggunakan `if..else` untuk kode di atas:\n\n```js\nif (age < 3) {\n message = 'Hi, baby!';\n} else if (age < 18) {\n message = 'Hello!';\n} else if (age < 100) {\n message = 'Greetings!';\n} else {\n message = 'What an unusual age!';\n}\n```\n\n## Penggunaan '?' yang non-tradisional\n\nTerkadang tanda tanya `?` digunakan sebagai pengganti `if`:\n\n```js run no-beautify\nlet company = prompt('Which company created JavaScript?', '');\n\n*!*\n(company == 'Netscape') ?\n alert('Right!') : alert('Wrong.');\n*/!*\n```\n\nBergantung pada kondisional `company == 'Netscape' , ekspresi pertama atau kedua setelah `?` akan dieksekusi dan menunjukkan sebuah \"alert\".\n\nKita tidak memberikan nilai hasil ke suatu variable di sini. Sebagai gantinya, kita mengeksekusi kode yang berbeda tergantung pada kondisinya.\n\n**Tidak disarankan memakai operator tanda tanya dengan cara ini.**\n\nNotasinya memang lebih pendek daripada apabila menggunakan pernyataan `if` , yang mungkin menarik bagi beberapa programmer, tetapi hal ini membuat kode anda lebih susah dibaca.\n\nBerikut adalah kode yang sama menggunakan `if` untuk perbandingan:\n\n```js run no-beautify\nlet company = prompt('Which company created JavaScript?', '');\n\n*!*\nif (company == 'Netscape') {\n alert('Right!');\n} else {\n alert('Wrong.');\n}\n*/!*\n```\n\nMata kita memindai kode secara vertikal. Blok kode yang terdiri dari beberapa baris akan lebih mudah dipahami daripada suatu set instruksi horizontal yang panjang.\n\nTujuan operator tanda tanya `?` adalah mengembalikan satu nilai atau nilai yang lainnya tergantung pada kondisinya. Mohon untuk gunakan operator tanda tanya hanya untuk fungsi tersebut. Gunakan `if ketika Anda perlu menjalankan berbagai cabang kode yang berbeda-beda\n" }, { "path": "1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/solution.md", "content": "Jawabannya `2`, itu nilai truthy pertama.\n\n```js run\nalert( null || 2 || undefined );\n```\n\n" }, { "path": "1-js/02-first-steps/11-logical-operators/1-alert-null-2-undefined/task.md", "content": "nilai penting: 5\n\n---\n\n# Apa hasil dari OR?\n\nApakah keluaran dari kode dibawah?\n\n```js\nalert( null || 2 || undefined );\n```\n\n" }, { "path": "1-js/02-first-steps/11-logical-operators/2-alert-or/solution.md", "content": "Jawabannya: pertama `1`, lalu `2`.\n\n```js run\nalert( alert(1) || 2 || alert(3) );\n```\n\nPanggilan `alert` tak mengembalikan nilai. Atau, dengan kata lain, ia mengembalikan `undefined`.\n\n1. Pertama OR `||` mengevaluasi operand kiri `alert(1)`. Ia menampilkan pesan pertama dengan `1`.\n2. `alert` mengembalikan `undefined`, jadi OR jalan ke operand kedua mencari nilai truthy.\n3. Operand kedua `2` truthy, jadi eksekusinya disela, `2` dikembalikan dan ditampilkan oleh alert terluar.\n\nTak akan ada `3`, karena evaluasinya tidak mencapai `alert(3)`.\n" }, { "path": "1-js/02-first-steps/11-logical-operators/2-alert-or/task.md", "content": "niai penting: 3\n\n---\n\n# Apa hasil dari alert yang di-OR-kan?\n\nApa output kode di bawah?\n\n```js\nalert( alert(1) || 2 || alert(3) );\n```\n\n" }, { "path": "1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/solution.md", "content": "Jawabannya: `null`, karena `null` adalah nilai falsy pertama yang ada di daftar.\n\n```js run\nalert( 1 && null && 2 );\n```\n\n" }, { "path": "1-js/02-first-steps/11-logical-operators/3-alert-1-null-2/task.md", "content": "nilai penting: 5\n\n---\n\n# Apa hasil AND?\n\nKode ini akan menampilkan apa?\n\n```js\nalert( 1 && null && 2 );\n```\n\n" }, { "path": "1-js/02-first-steps/11-logical-operators/4-alert-and/solution.md", "content": "Jawabannya: `1`, dan kemudian `undefined`.\n\n```js run\nalert( alert(1) && alert(2) );\n```\n\nPanggilan `alert` mengembalikan `undefined` (ia cuma menampilkan pesan, jadi tak ada kembalian berarti).\n\nKarena itu, `&&` mengevaluasi operand kiri (output `1`), dan langsung berhenti, karena `undefined` adalah nilai falsy. \nDan `&&` mencari nilai falsy dan mengembalikannya, jadi begitulah.\n\n" }, { "path": "1-js/02-first-steps/11-logical-operators/4-alert-and/task.md", "content": "nilai penting: 3\n\n---\n\n# Apa hasil dari alert yang di-AND-kan?\n\nKode ini akan menampilkan apa?\n\n```js\nalert( alert(1) && alert(2) );\n```\n\n" }, { "path": "1-js/02-first-steps/11-logical-operators/5-alert-and-or/solution.md", "content": "Jawabannya: `3`.\n\n```js run\nalert( null || 2 && 3 || 4 );\n```\n\nPresedensi AND `&&` lebih tinggi dari `||`, jadi ia jalan pertama.\n\nHasil dari `2 && 3 = 3`, jadi expresinya menjadi:\n\n```\nnull || 3 || 4\n```\n\nSekarang hasilnya jadi nilai truthy pertama: `3`.\n\n" }, { "path": "1-js/02-first-steps/11-logical-operators/5-alert-and-or/task.md", "content": "nilai penting: 5\n\n---\n\n# Hasil dari OR AND OR\n\nHasilnya akan jadi apa?\n\n```js\nalert( null || 2 && 3 || 4 );\n```\n\n" }, { "path": "1-js/02-first-steps/11-logical-operators/6-check-if-in-range/solution.md", "content": "\n\n```js\nif (age >= 14 && age <= 90)\n```\n\n" }, { "path": "1-js/02-first-steps/11-logical-operators/6-check-if-in-range/task.md", "content": "nilai penting: 3\n\n---\n\n# Cek kisaran antara\n\nTulis satu kondisi \"if\" untuk mengecek bahwa `age` ada di antara `14` dan `90` secara inklusif.\n\n\"Secara inklusif\" artinya bahwa `age` bisa mencapai `14` atau `90`.\n" }, { "path": "1-js/02-first-steps/11-logical-operators/7-check-if-out-range/solution.md", "content": "Varian pertama:\n\n```js\nif (!(age >= 14 && age <= 90))\n```\n\nVarian kedua:\n\n```js\nif (age < 14 || age > 90)\n```\n\n" }, { "path": "1-js/02-first-steps/11-logical-operators/7-check-if-out-range/task.md", "content": "nilai penting: 3\n\n---\n\n# Cek kisaran luar\n\nTulis satu kondisi `if` untuk mengecek bahwa `age` BUKAN di antara 14 dan 90 secara inklusif.\n\nBuat dua varian: pertama menggunakan NOT `!`, kedua -- tanpaanya.\n" }, { "path": "1-js/02-first-steps/11-logical-operators/8-if-question/solution.md", "content": "Jawabannya: pertama dan ketiga akan diexekusi.\n\nDetil:\n\n```js run\n// Berjalan.\n// Hasil dari -1 || 0 = -1, truthy\nif (-1 || 0) alert( 'first' );\n\n// Tidak berjalan\n// -1 && 0 = 0, falsy\nif (-1 && 0) alert( 'second' );\n\n// Eksekusi\n// Operator && mempunyai hak yang lebih tinggi daripada ||\n// jadi -1 && 1 dieksekusi pertama, dan memberikan rentetan:\n// null || -1 && 1 -> null || 1 -> 1\nif (null || -1 && 1) alert( 'third' );\n```\n\n" }, { "path": "1-js/02-first-steps/11-logical-operators/8-if-question/task.md", "content": "nilai penting: 5\n\n---\n\n# Pertanyaan tentang \"if\"\n\nMana dari `alert` berikut yang akan diexekusi?\n\nHasil expresinya akan jadi seperti apa di dalam `if(...)`?\n\n```js\nif (-1 || 0) alert( 'first' );\nif (-1 && 0) alert( 'second' );\nif (null || -1 && 1) alert( 'third' );\n```\n\n" }, { "path": "1-js/02-first-steps/11-logical-operators/9-check-login/solution.md", "content": "\n\n```js run demo\nlet userName = prompt(\"Who's there?\", '');\n\nif (userName === 'Admin') {\n\n let pass = prompt('Password?', '');\n\n if (pass === 'TheMaster') {\n alert( 'Welcome!' );\n } else if (pass === '' || pass === null) {\n alert( 'Canceled' );\n } else {\n alert( 'Wrong password' );\n }\n\n} else if (userName === '' || userName === null) {\n alert( 'Canceled' );\n} else {\n alert( \"I don't know you\" );\n}\n```\n\nPerhatikan indent vertkal di dalam blok `if`. Mereka secara teknis tak dibutuhkan, tapi membuat kode lebih mudah dibaca.\n" }, { "path": "1-js/02-first-steps/11-logical-operators/9-check-login/task.md", "content": "nilai penting: 3\n\n---\n\n# Cek login\n\nTulis kode yang meminta login dengan `prompt`.\n\nJika pengunjung menekan `\"Admin\"`, maka `prompt` untuk katasandi, jika inputannya beruba baris kosong atau `key:Esc` -- tampilkan \"Canceled.\", jika string lain -- maka tampilkan \"I don't know you\".\n\nKatasandinya dicek sebagai berikut:\n\n- Jika ia sama dengan \"TheMaster\", maka tampilkan \"Welcome!\",\n- String lain -- tampilkan \"Wrong password\",\n- Untuk string kosong atau batal input, tampilkan \"Canceled.\"\n\nSkemanya:\n\n![](ifelse_task.svg)\n\nSilakan gunakan blok `if` bersarang. Abaikan kemudahan-baca seluruh kode.\n\nPetunjuk: mengoper inputan kosong ke prompt mengembalikan string kosong `''`. Menekan `key:ESC` saat prompt mengembalikan `null`.\n\n[demo]\n" }, { "path": "1-js/02-first-steps/11-logical-operators/article.md", "content": "# Operator logika\n\nAda tiga operator logika di JavaScript: `||` (OR), `&&` (AND), `!` (NOT).\n\nMeski mereka dipanggil \"logika\", mereka bisa diaplikasikan ke nilai tipe apapun, bukan cuma boolean. Hasil mereka bisa juga tipe apapun.\n\nMari kita lihat detilnya.\n\n## || (OR)\n\nOperator \"OR\" diwakili dengan dua simbol garis vertical:\n\n```js\nresult = a || b;\n```\n\nDi pemrograman klasik, logika OR gunanya cuma untuk memanipulasi nilai boolean. Jika argumennya ada yang `true`, ia mengembalikan `true`, tapi jika tidak, maka ia mengembalikan `false`.\n\nDi JavaScript, operator ini agak tricky dan lebih kuat. Tapi pertama-tama, ayo kita lihat apa yang terjadi pada nilai boolean.\n\nAda empat kemungkinan kombinasi logika:\n\n```js run\nalert( true || true ); // true\nalert( false || true ); // true\nalert( true || false ); // true\nalert( false || false ); // false\n```\n\nSeperti yang kita lihat, hasilnya selalu `true` kecuali jika kedua operand sama-sama `false`.\n\nJika operand bukan boolean, ia dikonversi ke boolean untuk evaluasi.\n\nMisalnya, angka `1` diperlakukan sebagai `true`, angka `0` sebagai `false`:\n\n```js run\nif (1 || 0) { // bekerja seperti if( true || false )\n alert( 'truthy!' );\n}\n```\n\nSeringkali, OR `||` digunakan di pernyataan `if` untuk menguji apakah ada satu kondisi *manapun* yang `true`.\n\nMisalnya:\n\n```js run\nlet hour = 9;\n\n*!*\nif (hour < 10 || hour > 18) {\n*/!*\n alert( 'The office is closed.' );\n}\n```\n\nKita bisa menyampaikan kondisi lebih:\n\n```js run\nlet hour = 12;\nlet isWeekend = true;\n\nif (hour < 10 || hour > 18 || isWeekend) {\n alert( 'The office is closed.' ); // akhir minggu\n}\n```\n\n## OR \"||\" mencari nilai benar pertama [#or-finds-the-first-truthy-value]\n\nLogika di atas memang klasik. Sekarang, mari bawa fitur \"extra\" JavaScript.\n\nAlgoritma luas bekerja seperti berikut.\n\nUntuk nilai yang diORkan:\n\n```js\nresult = value1 || value2 || value3;\n```\n\nOperator OR `||` melakukan hal berikut:\n\n- Mengevaluasi operand dari kiri ke kanan.\n- Untuk tiap operand, konversikan ia ke boolean. Jika hasilnya `true`, stop dan mengembalikan nilai original dari operand.\n- Jika semua operand telah dievaluasi (misal semuanya `false`), mengembalikan operand terakhir.\n\nNilai dikembalikan di bentuk originalnya, tanpa konversi.\n\nDengan kata lain, rantai OR `\"||\"` mengembalikan nilai truthy pertama atau yang terakhir jika tak ada nilai benar.\n\nMisalnya:\n\n```js run\nalert( 1 || 0 ); // 1 (1 truthy)\nalert( true || 'no matter what' ); // (true ialah truthy)\n\nalert( null || 1 ); // 1 (1 ialah nilai truthy pertama)\nalert( null || 0 || 1 ); // 1 (nilai truthy pertama)\nalert( undefined || null || 0 ); // 0 (semua falsy, mengembalikan nilai terakhir)\n```\n\nHal ini menjadikan penggunaan yang menarik dibanding \"OR booleanpure, classical, boolean-only OR\".\n\n1. **Dapatkan nilai truthy dari daftar variabel atau expresi.**\n\n Untuk contoh, kita punya variabel `firstName`, `lastName` dan `nickName`, semuanya bersifat opsional.\n\n Kita gunakan OR `||` untuk memilih satu-satunya yang memiliki data dan menampilkannya (atau `anonymous` jika belum ada yang ditentukan atau di set):\n\n ```js run\n let firstName = \"\";\n let lastName = \"\";\n let nickName = \"SuperCoder\";\n\n *!*\n alert( firstName || lastName || nickName || \"Anonymous\"); // SuperCoder\n */!*\n ```\n\n Jika semua variabel bernilai falsy, `Anonymous` akan muncul.\n\n2. **Evaluasi Short-circuit.**\n\n Fitur lainnya dari operator OR `||` adalah evaluasi \"short-circuit\".\n\n Itu berarti bahwa `||` memproses argumennya sampai nilai pertama bersifat truthy tercapai, lalu nilainya dikembalikan langsung, bahkan tanpa menyentuh argumen lainnya.\n\n Pentingnya dari fitur ini menjadi jelas jika sebuah operan bukan hanya sebuah nilai, tapi sebuah ekspresi yang melakukan aksi, seperti assignment sebuah variabel atau sebuah pemanggilan fungsi.\n\n Didalam contoh dibawah, hanya pesan kedua yang di jalankan:\n\n ```js run no-beautify\n *!*true*/!* || alert(\"not printed\");\n *!*false*/!* || alert(\"printed\");\n ```\n\n Di baris pertama, operator OR `||` langsung berhenti mengevaluasi karena nilai pertama bersifat `true`, jadi `alert`nya tidak berjalan.\n\n Terkadang, orang-orang menggunakan fitur ini untuk mengeksekusi perintah hanya jika kondisi di paling kiri bersifat falsy.\n\n## && (AND)\n\nOperator AND diwakili dua ampersand `&&`:\n\n```js\nresult = a && b;\n```\n\nDalam pemrograman klasik, AND mengembalikan `true` jika kedua operand sama-sama truthy dan `false` jika sebaliknya:\n\n```js run\nalert( true && true ); // true\nalert( false && true ); // false\nalert( true && false ); // false\nalert( false && false ); // false\n```\n\nContoh dengan `if`:\n\n```js run\nlet hour = 12;\nlet minute = 30;\n\nif (hour == 12 && minute == 30) {\n alert( 'The time is 12:30' );\n}\n```\n\nSama seperti OR, nilai apapun boleh menjadi operand dari AND:\n\n```js run\nif (1 && 0) { // dievaluasi sebagai true && false\n alert( \"won't work, because the result is falsy\" );\n}\n```\n\n\n## AND \"&&\" mencari nilai falsy pertama\n\nMisal ada beberapa nilai di-AND-kan:\n\n```js\nresult = value1 && value2 && value3;\n```\n\nYang dilakukan operator AND `&&` adalah sebagai berikut:\n\n- Mengevaluasi operand dari kiri ke kanan.\n- Untuk tiap operand, konversi ia ke boolean. Jika hasilnya `false`, stop dan kembalikan nilai original operand tersebut.\n- Jika semua operand dievaluasi (i.e. semua truthy), mengembalikan operand terakhir.\n\nDengan kata lain, AND mengembalikan nilai falsy pertama atau nilai terakhir jika tak ketemu satupun nilai falsy.\n\nAturan di atas mirip dengan OR. Bedanya ialah AND mengembalikan niai *falsy* pertama sedangkan OR mengembalikan nilai *truthy* pertama.\n\nMisalnya:\n\n```js run\n// jika operand pertama truthy,\n// AND mengembalikan operand kedua:\nalert( 1 && 0 ); // 0\nalert( 1 && 5 ); // 5\n\n// jika operand pertama falsy,\n// AND mengembalikan itu. Operand kedua diabaikan\nalert( null && 5 ); // null\nalert( 0 && \"no matter what\" ); // 0\n```\n\nKita juga bisa mengoper beberapa nilai dalam satu barus. Lihat bagaimana nilai falsy pertama dikembalikan:\n\n```js run\nalert( 1 && 2 && null && 3 ); // null\n```\n\nKetika semua nilai truthy, nilai terakhir dikembalikan:\n\n```js run\nalert( 1 && 2 && 3 ); // 3, the last one\n```\n\n````smart header=\"Precedence of AND `&&` is higher than OR `||`\"\nPresedensi operator AND `&&` lebih tinggi dari OR `||`.\n\nJadi kode `a && b || c && d` esensinya sama dengan jika expresi `&&` dibungkus tanda kurung: `(a && b) || (c && d)`.\n````\n\n\n````warn header=\"Jangan ganti `if` dengan || atau &&\"\nTerkadang, orang-orang menggunakan operator AND `&&` untuk \"memperpendek instruksi `if`\".\n\n\nMisalnya:\n\n```js run\nlet x = 1;\n\n(x > 0) && alert( 'Greater than zero!' );\n```\n\nAksi di bagian kanan `&&` akan diexekusi hanya jika evaluasinya mencapai itu. Yaitu, hanya jika `(x > 0)` true.\n\nJadi pada dasarnya kita punya analogi untuk:\n\n```js run\nlet x = 1;\n\nif (x > 0) alert( 'Greater than zero!' );\n```\n\nWalaupun, versi dengan `&&` muncul lebih pendek, `if` menjadi jelas dan sedikit lebih mudah dibaca. Jadi kita merekomendasikan menggunakannya untuk setiap kebutuhan: gunakan `if` jika kita ingin if dan gunakan `&&` jika kita ingin AND.\n````\n\n\n## ! (NOT)\n\nOperator boolean NOT diwakili dengan tanda exklamasi `!`.\n\nSyntaxnya cukup simpel:\n\n```js\nresult = !value;\n```\n\nOperator ini menerima argumen tunggal dan menjalankan hal berikut:\n\n1. Mengkonversi operand ke tipe boolean: `true/false`.\n2. Mengembalikan nilai kebalikan.\n\nMisalnya:\n\n```js run\nalert( !true ); // false\nalert( !0 ); // true\n```\n\nNOT ganda `!!` kadang dipakai untuk mengkonversi nilai ke tipe boolean:\n\n```js run\nalert( !!\"non-empty string\" ); // true\nalert( !!null ); // false\n```\n\nYaitu, NOT pertama mengkonversi nilai ke boolean dan mengembalikan kebalikannya, dan NOT kedua membaliknya lagi. Ujungnya, kita punya konversi nilai-ke-boolean biasa.\n\nAda sedikit cara rewel untuk melakukan hal serupa -- fungsi `Boolean` built-in:\n\n```js run\nalert( Boolean(\"non-empty string\") ); // true\nalert( Boolean(null) ); // false\n```\n\nPresedensi NOT `!` paling tinggi dari semua operator logika, jadi ia selalu jalan pertama, sebelum `&&` or `||`.\n" }, { "path": "1-js/02-first-steps/12-nullish-coalescing-operator/article.md", "content": "# Operator penggabungan nullish '??'\n\n[browser terbaru=\"baru\"]\n\nOperator penggabungan nullish ditulis sebagai dua tanda tanya `??`.\n\nKarena memperlakukan `null` dan `undefined` sama, kita akan menggunakan istilah khusus di sini, di artikel ini. Kami akan mengatakan bahwa ekspresi adalah \"didefinisikan\" ketika itu bukan `null` atau `undefined`.\n\nHasil dari `a?? b` adalah:\n- jika `a` didefinisikan, maka `a`,\n- jika `a` tidak didefinisikan, maka `b`.\n\nDengan kata lain, `??` mengembalikan argumen pertama jika bukan `null/undefined`. Kalau tidak, yang kedua.\n\nOperator penggabungan nullish bukanlah sesuatu yang benar-benar baru. Ini hanya sintaks yang bagus untuk mendapatkan nilai \"didefinisikan\" pertama dari keduanya.\n\nKita dapat menulis ulang `result = a ?? b` menggunakan operator yang sudah kita kenal, seperti ini:\n\n```js\nresult = (a !== null && a !== undefined) ? a : b;\n```\n\nSekarang harus benar-benar jelas apa yang dilakukan `??`. Mari kita lihat di mana itu membantu.\n\nKasus penggunaan umum untuk `??` adalah memberikan nilai default untuk variabel yang berpotensi tidak terdefinisi.\n\nMisalnya, di sini kami menampilkan `pengguna` jika didefinisikan, jika tidak `Anonim`:\n\n```js dijalankan\nbiarkan pengguna;\n\nalert(pengguna ?? \"Anonim\"); // Anonim (pengguna tidak ditentukan)\n```\n\nBerikut ini contoh dengan `pengguna` ditetapkan ke sebuah nama:\n\n```js dijalankan\nbiarkan pengguna = \"John\";\n\nalert(pengguna ?? \"Anonim\"); // John (ditentukan pengguna)\n```\n\nKita juga dapat menggunakan urutan `??` untuk memilih nilai pertama dari daftar yang bukan `null/undefined`.\n\nKatakanlah kita memiliki data pengguna dalam variabel `FirstName`, `lastName` atau `nickName`. Semuanya mungkin tidak ditentukan, jika pengguna memutuskan untuk tidak memasukkan nilai.\n\nKami ingin menampilkan nama pengguna menggunakan salah satu variabel ini, atau menampilkan \"Anonim\" jika semuanya tidak ditentukan.\n\nMari kita gunakan operator `??` untuk itu:\n\n```js dijalankan\nbiarkan namadepan = null;\nbiarkan namabelakang = null;\nbiarkan nickName = \"Supercoder\";\n\n// menunjukkan nilai yang ditentukan pertama:\n*!*\nalert(FirstName ?? LastName ?? nickName ?? \"Anonim\"); // kode super\n*/!*\n```\n\n## Perbandingan dengan ||\n\nOperator OR `||` dapat digunakan dengan cara yang sama seperti `??`, seperti yang dijelaskan di [bab sebelumnya](info:logical-operators#or-finds-the-first-truthy-value).\n\nMisalnya, pada kode di atas kita dapat mengganti `??` dengan `||` dan tetap mendapatkan hasil yang sama:\n\n```js dijalankan\nbiarkan namadepan = null;\nbiarkan namabelakang = null;\nbiarkan nickName = \"Supercoder\";\n\n// menunjukkan nilai kebenaran pertama:\n*!*\nalert(Namadepan || Nama Belakang || Nama Panggilan || \"Anonim\"); // kode super\n*/!*\n```\n\nSecara historis, operator OR `||` ada terlebih dahulu. Itu ada sejak awal JavaScript, jadi pengembang menggunakannya untuk tujuan seperti itu untuk waktu yang lama.\n\nDi sisi lain, operator penggabungan nullish `??` baru saja ditambahkan ke JavaScript, dan alasannya adalah karena orang-orang tidak terlalu senang dengan `||`.\n\nPerbedaan penting di antara mereka adalah bahwa:\n- `||` mengembalikan nilai *truth* pertama.\n- `??` mengembalikan nilai *yang ditentukan* pertama.\n\nDengan kata lain, `||` tidak membedakan antara `false`, `0`, string kosong `\"\"` dan `null/undefined`. Semuanya sama -- nilai yang salah. Jika salah satu dari ini adalah argumen pertama dari `||`, maka kita akan mendapatkan argumen kedua sebagai hasilnya.\n\nNamun dalam praktiknya, kita mungkin ingin menggunakan nilai default hanya jika variabelnya `null/undefined`. Artinya, ketika nilainya benar-benar tidak diketahui/tidak disetel.\n\nMisalnya, pertimbangkan ini:\n\n```js dijalankan\nmisalkan tinggi = 0;\n\nwaspada(tinggi || 100); // 100\nwaspada (tinggi ?? 100); // 0\n```\n\n- `tinggi || 100` memeriksa `height` sebagai nilai yang salah, dan itu adalah `0`, memang salah.\n - jadi hasil dari `||` adalah argumen kedua, `100`.\n- `tinggi ?? 100` memeriksa `height` sebagai `null/undefined`, dan bukan,\n - jadi hasilnya adalah `height` \"sebagaimana adanya\", yaitu `0`.\n\nDalam praktiknya, ketinggian nol seringkali merupakan nilai yang valid, yang tidak boleh diganti dengan default. Jadi `??` melakukan hal yang benar.\n\n## Prioritas\n\nPrioritas operator `??` hampir sama dengan `||`, hanya sedikit lebih rendah. Ini sama dengan `5` di [tabel MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table), sedangkan `||` adalah `6` .\n\nArtinya, seperti halnya `||`, operator penggabungan nullish `??` dievaluasi sebelum `=` dan `?`, tetapi setelah sebagian besar operasi lain, seperti `+`, `*`.\n\nJadi, jika kita ingin memilih nilai dengan `??` dalam ekspresi dengan operator lain, pertimbangkan untuk menambahkan tanda kurung:\n\n```js dijalankan\nbiarkan tinggi = nol;\nbiarkan lebar = nol;\n\n// penting: gunakan tanda kurung\nbiarkan luas = (tinggi ?? 100) * (lebar ?? 50);\n\nwaspada (daerah); // 5000\n```\n\nJika tidak, jika kita menghilangkan tanda kurung, maka karena `*` memiliki prioritas yang lebih tinggi daripada `??`, tanda kurung akan dieksekusi terlebih dahulu, sehingga menghasilkan hasil yang salah.\n\n```js\n// tanpa tanda kurung\nmisal luas = tinggi?? 100 * lebar ?? 50;\n\n// ...berfungsi sama seperti ini (mungkin bukan yang kita inginkan):\nmisal luas = tinggi?? (100 * lebar) ?? 50;\n```\n\n### Menggunakan ?? dengan && atau ||\n\nKarena alasan keamanan, JavaScript melarang penggunaan `??` bersama dengan operator `&&` dan `||`, kecuali jika prioritas secara eksplisit ditentukan dengan tanda kurung.\n\nKode di bawah ini memicu kesalahan sintaks:\n\n```js dijalankan\nmisalkan x = 1 && 2 ?? 3; // Kesalahan sintaks\n```\n\nBatasan ini tentu masih bisa diperdebatkan, hal itu ditambahkan ke spesifikasi bahasa dengan tujuan untuk menghindari kesalahan pemrograman, ketika orang mulai beralih dari `||` ke `??`.\n\nGunakan tanda kurung eksplisit untuk mengatasinya:\n\n```js dijalankan\n*!*\nmisalkan x = (1 && 2) ?? 3; // Bekerja\n*/!*\n\nwaspada(x); // 2\n```\n\n## Ringkasan\n\n- Operator penggabungan nullish `??` menyediakan cara singkat untuk memilih nilai \"ditentukan\" pertama dari daftar.\n\n Ini digunakan untuk menetapkan nilai default ke variabel:\n\n ```js\n // atur tinggi=100, jika tinggi nol atau tidak terdefinisi\n tinggi = tinggi?? 100;\n ```\n\n- Operator `??` memiliki prioritas yang sangat rendah, hanya sedikit lebih tinggi dari `?` dan `=`, jadi pertimbangkan untuk menambahkan tanda kurung saat menggunakannya dalam ekspresi.\n- Dilarang menggunakannya dengan `||` atau `&&` tanpa tanda kurung eksplisit." }, { "path": "1-js/02-first-steps/13-while-for/1-loop-last-value/solution.md", "content": "Jawabannya: `1`.\n\n```js run\nlet i = 3;\n\nwhile (i) {\n alert( i-- );\n}\n```\n\nSetiap pengulangan mengurangi `i` dengan `1`. pengecekan `while(i)` menghentikan perulangan ketika `i = 0`.\n\nOleh karena itu, langkah-langkah perulangan membentuk urutan sebagai berikut (\"loop unrolled\"):\n\n```js\nlet i = 3;\n\nalert(i--); // menampilkan 3, mengurangi i menjadi 2\n\nalert(i--) // menampilkan 2, mengurangi i menjadi 1\n\nalert(i--) // menampilkan 1, mengurangi i menjadi 0\n\n// selesai, pengecekan while(i) menghentikan pengulangan\n```\n" }, { "path": "1-js/02-first-steps/13-while-for/1-loop-last-value/task.md", "content": "importance: 3\n\n---\n\n# Nilai terakhir perulangan\n\nApa nilai terakhir yang diperingatkan oleh kode ini? Mengapa?\n\n```js\nlet i = 3;\n\nwhile (i) {\n alert( i-- );\n}\n```\n" }, { "path": "1-js/02-first-steps/13-while-for/2-which-value-while/solution.md", "content": "Tugas mendemonstrasikan bagaimana bentuk postfix/prefix dapat menyebabkan hasil yang berbeda ketika digunakan dalam perbandingan\n\n1. **Dari 1 ke 4**\n\n ```js run\n let i = 0;\n while (++i < 5) alert( i );\n ```\n\n nilai pertama adalah `i = 1`, karena `++i` menambah terlebih dahulu `i` dan mengembalikan nilai baru. Jadi perbandingan pertama adalah `1 < 5` dan `alert` menampilkan `1`.\n\n lalu diikuti `2, 3, 4…` -- nilainya muncul satu per satu. Perbandingan selalu menggunakan nilai yang ditambah, karna ada `++` sebelum variabel.\n\n Akhirnya, `i = 4` bertambah menjadi `5`, perbandingan `while(5 < 5)` gagal, dan pengulangan berhenti. Jadi `5` tidak ditampilkan.\n2. **Dari 1 ke 5**\n\n ```js run\n let i = 0;\n while (i++ < 5) alert( i );\n ```\n\n Lagi, nilai pertama adalah `i = 1`. bentuk postfix dari `i++` menambah `i` dan kemudian mengembalikan nilai yang *lama*, jadi perbandingan `i++ < 5` akan menggunakan `i = 0` (berbeda dengan `++i < 5`).\n\n Namun panggilan `alert` terpisah. ini adalah pernyataan lain yang berjalan setelah pertambahan dan perbandingan. Jadi ini mendapatkan nilai yang saat ini `i = 1`.\n\n Lalu diikuti `2, 3, 4…`\n\n Mari berhenti di `i = 4`. bentuk prefix `++i` akan menaikannya dan menggunakan `5` di perbandingan. Tapi disini kita mempunyai bentuk postfix `i++`. jadi ini menambah `i` menjadi `5`, namun mengembalikan nilai yang lama. Karna perbandingan yang sebenarnya adalah `while(4 < 5)` -- benar, dan kontrol berlanjut ke `alert`.\n\n Nilai `i = 5` adalah yang terkahir, karena pada langkah berikutnya `while(5 < 5)` adalah salah.\n" }, { "path": "1-js/02-first-steps/13-while-for/2-which-value-while/task.md", "content": "importance: 4\n\n---\n\n# Nilai mana yang ditampilkan perulangan while?\n\nUntuk setiap iterasi, tulis nilai mana yang dikeluarkan dan bandingkan dengan solusinya.\n\nKedua perulangan `alert` nilai yang sama, atau tidak?\n\n1. Bentuk prefix `++i`:\n\n ```js\n let i = 0;\n while (++i < 5) alert( i );\n ```\n2. Bentuk postfix `i++`\n\n ```js\n let i = 0;\n while (i++ < 5) alert( i );\n ```\n" }, { "path": "1-js/02-first-steps/13-while-for/3-which-value-for/solution.md", "content": "**Jawabanya: dari `0` ke `4` pada kedua kasus.**\n\n```js run\nfor (let i = 0; i < 5; ++i) alert( i );\n\nfor (let i = 0; i < 5; i++) alert( i );\n```\n\nItu dapat dengan mudah dikurangkan dari algoritma `for`:\n\n1. Jalankan sekali `i = 0` sebelum apapun (begin).\n2. Cek kondisinya `i < 5`\n3. Jika `true` -- jalankan loop body `alert(i)`, dan kemudian `i++`\n\npertambahan `i++` terpisah dari pengecekan kondisi (2). itu hanya pernyataan lain.\n\nNilai yang dikembalikan oleh pertambahan tidak digunakan disini, jadi tidak ada bedanya antara `i++` dan `++i`.\n" }, { "path": "1-js/02-first-steps/13-while-for/3-which-value-for/task.md", "content": "importance: 4\n\n---\n\n# Nilai mana yang ditampilkan oleh perulangan \"for\" ?\n\nUntuk setiap perulangan tulis nilai mana yang akan ditampilkan. lalu bandingkan dengan jawabanya\n\nKedua perulangan `alert` nilai yang sama atau tidak?\n\n1. Bentuk postfix:\n\n ```js\n for (let i = 0; i < 5; i++) alert( i );\n ```\n2. Bentuk prefix:\n\n ```js\n for (let i = 0; i < 5; ++i) alert( i );\n ```\n" }, { "path": "1-js/02-first-steps/13-while-for/4-for-even/solution.md", "content": "\n\n```js run demo\nfor (let i = 2; i <= 10; i++) {\n if (i % 2 == 0) {\n alert( i );\n }\n}\n```\n\nKita menggunakan operator \"modulo\" `%` untuk mendapatkan nilai sisa dan untuk mengecek kegenapan disini.\n" }, { "path": "1-js/02-first-steps/13-while-for/4-for-even/task.md", "content": "importance: 5\n\n---\n\n# Menghasilkan angka genap di perulangan\n\nGunakan perulangan `for` untuk menghasilkan angka genap dari `2`sampai `10`.\n\n[demo]\n" }, { "path": "1-js/02-first-steps/13-while-for/5-replace-for-while/solution.md", "content": "\n\n```js run\nlet i = 0;\nwhile (i < 3) {\n alert( `number ${i}!` );\n i++;\n}\n```\n\n" }, { "path": "1-js/02-first-steps/13-while-for/5-replace-for-while/task.md", "content": "importance: 5\n\n---\n\n# Ganti \"for\" dengan \"while\"\n\nTulis ulang kode ubah perulangan `for` ke `while` tanpa mengubah perilakunya (hasilnya harus tetap sama).\n\n```js run\nfor (let i = 0; i < 3; i++) {\n alert( `number ${i}!` );\n}\n```\n\n" }, { "path": "1-js/02-first-steps/13-while-for/6-repeat-until-correct/solution.md", "content": "\n```js run demo\nlet num;\n\ndo {\n num = prompt(\"Masukan angka lebih dari 100?\", 0);\n} while (num <= 100 && num);\n```\n\nPerulangan `do..while` diulangi selagi kedua cek itu bernilai benar:\n\n1. Pengecekan untuk `num <= 100` -- itu adalah, nilai yang dimasukan masih tidak lebih besar dari `100`.\n2. Pengecekan `&& num` adalah salah ketika `num` adalah `null` atau sebuah string kosong. kemudian perulangan `while` berhenti juga.\n\nP.S. Jika `num` adalah `null` lalu `num <= 100` adalah `true`, jadi tanpa pengecekan kedua, perulangan tidak akan berhenti jika pengguna mengeclick CANCEL. Kedua pengecekan dibutuhkan.\n" }, { "path": "1-js/02-first-steps/13-while-for/6-repeat-until-correct/task.md", "content": "importance: 5\n\n---\n\n# Ulangi sampai inputnya benar\n\nTulis sebuah perulangan yang meminta angka lebih dari `100`. Jika pendatang memasukan angka lainnya -- tanya mereka untuk menginput kembali.\n\nPerulangan harus menanyakan untuk sebuah angka sampai pengunjung memasukan angka lebih dari `100` atau membatalkan input/memasukan sebuah baris kosong.\n\nDisini kita dapat menganggap bahwa pengunjung hanya menginput angka. Tidak perlu menerapkan penanganan spesial untuk input non-numerik di tugas ini.\n\n[demo]\n" }, { "path": "1-js/02-first-steps/13-while-for/7-list-primes/solution.md", "content": "Ada banyak algoritma untuk tugas ini.\n\nMari gunakan perulangan bersarang:\n\n```js\nFor each i in the interval {\n cek if i has a divisor from 1..i\n if yes => the value is not a prime\n if no => the value is a prime, show it\n}\n```\n\nKode menggunakan label:\n\n```js run\nlet n = 10;\n\nnextPrime:\nfor (let i = 2; i <= n; i++) { // untuk setiap i...\n\n for (let j = 2; j < i; j++) { // mencari pembagi..\n if (i % j == 0) continue nextPrime; // bukan prima, pergi ke i berikutnya\n }\n\n alert( i ); // prima\n}\n```\n\nAda banyak ruang untuk mengoptimalkannya. Misalnya, kita dapat mencari pembagi dari `2` ke akar kuadrat dari `i`. Tapi bagaimanapun, jika kita ingin sangat efisien untuk interval besar, kita perlu mengubah pendekatan dan mengandalkan matematika lanjutan dan algotima rumit seperti [Quadratic sieve](https://en.wikipedia.org/wiki/Quadratic_sieve), [General number field sieve](https://en.wikipedia.org/wiki/General_number_field_sieve) dsb.\n" }, { "path": "1-js/02-first-steps/13-while-for/7-list-primes/task.md", "content": "importance: 3\n\n---\n\n# Menghasilkan bilangan prima\n\nAngka integer lebih dari `1` disebut [bilangan prima](https://en.wikipedia.org/wiki/Prime_number) jika itu tidak bisa dibagi tanpa sisa oleh siapapun kecuali `1` dan bilangan itu sendiri.\n\nDengan kata lain, `n > 1` adalah prima jika tidak dapat dibagi secara merata oleh apapun kecuali `1` dan `n`.\n\nContohnya, `5` adalah prima, karna tidak bisa dibagi tanpa sisa oleh `2`, `3` dan `4`.\n\n**Tulis kode yang menghasilkan bilangan prima dalam interval dari `2` sampai `n`.**\n\nUntuk `n = 10` hasilnya akan `2,3,5,7`.\n\nP.S. Kode harus bekerja untuk segala `n`, tidak disetel untuk nilai tetap apapun.\n" }, { "path": "1-js/02-first-steps/13-while-for/article.md", "content": "# Perulangan: while dan for\n\nKita sering perlu untuk mengulangi tindakan.\n\nContohnya, Mengeluarkan barang dari sebuah daftar satu per satu atau hanya menjalankan kode yang sama untuk setiap nomor dari 1 hingga 10.\n\n*Perulangan* adalah sebuah cara untuk mengulangi kode yang sama beberapa kali.\n\n## Perulangan \"while\"\n\nPerulangan `while` memiliki sintaks sebagai berikut:\n\n```js\nwhile (kondisi) {\n // kode\n // disebut \"badan perulangan\"\n}\n```\n\nKetika `kondisi` bernilai truthy, `kode` dari badan perulangan dijalankan.\n\nContohnya, perulangan di bawah mengeluarkan `i` selagi `i < 3`:\n\n```js run\nlet i = 0;\nwhile (i < 3) { // menampilkan 0, lalu 1, lalu 2\n alert( i );\n i++;\n}\n```\n\nEksekusi tunggal dari badan perulangan disebut *sebuah pengulangan*. Perulangan pada contoh diatas membuat tiga kali pengulangan.\n\nJika `i++` hilang dari contoh di atas, perulangan akan mengulangi (dalam teori) secara terus-menerus. Pada praktiknya, browser menyediakan cara untuk menghentikan perulangan, dan pada sisi server JavaScript, kita dapat mematikan prosesnya.\n\nEkspresi atau variable apapun bisa menjadi sebuah kondisi perulangan, tidak hanya perbandingan: kondisi terevalusasi dan terkonversi menjadi boolean oleh `while`.\n\nContohnya, cara cepat untuk menulis `while (i != 0)` adalah `while (i)`:\n\n```js run\nlet i = 3;\n*!*\nwhile (i) { // ketika i menjadi 0, kondisi bernilai salah, dan perulangan berhenti\n*/!*\n alert( i );\n i--;\n}\n```\n\n````smart header=\"Kurung kurawal tidak dibutuhkan untuk badan baris tunggal\"\nJika badan perulangan mempunyai sebuah pernyataan tunggal, kita dapat menghilangkan kurung kurawal `{…}`:\n\n```js run\nlet i = 3;\n*!*\nwhile (i) alert(i--);\n*/!*\n```\n````\n\n## Perulangan \"do..while\"\n\nPengecekan kondisi dapat dipindahkan *di bawah* badan perulangan menggunakan `do..while` sintaks:\n\n```js\ndo {\n // badan perulangan\n} while (condition);\n```\n\nPerulangan akan mengeksekusi badan terlebih dahulu, lalu memeriksa kondisi, dan, selagi itu bernilai truthy, jalankan itu lagi dan lagi.\n\nContohnya:\n\n```js run\nlet i = 0;\ndo {\n alert( i );\n i++;\n} while (i < 3);\n```\n\nFormat penulisan ini hanya digunakan ketika kamu ingin badan dari perulangan tereksekusi **setidaknya sekali** Terlepas dari kondisi menjadi bernilai benar. Biasanya, format lain yang dipilih: `while(…) {…}`.\n\n## Perulangan \"for\"\n\nPerulangan `for` lebih complex, tapi merupakan perulangan yang paling umum digunakan.\n\nItu terlihat seperti ini:\n\n```js\nfor (awal; kondisi; langkah) {\n // ... badan perulangan ...\n}\n```\n\nMari belajar makna dari bagian ini dari contoh. Perulangan dibawah menjalankan `alert(i)` untuk `i` dari `0` sampai dengan (tapi tidak termasuk) `3`:\n\n```js run\nfor (let i = 0; i < 3; i++) { // menampilkan 0, lalu 1, lalu 2\n alert(i);\n}\n```\n\nMari bahas pernyataan `for` bagian demi bagian:\n\n| bagian | | |\n|-------|----------|----------------------------------------------------------------------------|\n| begin | `i = 0` | Jalankan sekali masuk ke loop. |\n| condition | `i < 3`| Cek sebelum tiap iterasi loop. Jika salah, loop berhenti. |\n| body | `alert(i)`| Jalankan lagi dan lagi selama kondisi bernilai truthy. |\n| step | `i++` | Exekusi setelah badan di tiap iterasi. |\n\nCara kerja algoritma perulangan umum seperti ini:\n\n```\nJalankan begin\n→ (jika condition → jalankan body dan jalankan step)\n→ (jika condition → jalankan body dan jalankan step)\n→ (jika condition → jalankan body dan jalankan step)\n→ ...\n```\n\nDikatakan, `begin` diexekusi sekali, kemudian ia beriterasi: setelah tiap `condition` dites, `body` dan `step` diexekusi.\n\nJika kamu baru pada perulangan, ini bisa membantumu kembali ke contoh dan mereproduksi bagamana ini berjalan selangkah demi selangkah pada sebuah selembar kertas.\n\nInilah yang sebenarnya terjadi pada kasus kita:\n\n```js\n// for (let i = 0; i < 3; i++) alert(i)\n\n// jalankan awal\nlet i = 0\n// jika kondisi → jalankan badan dan jalankan langkah\nif (i < 3) { alert(i); i++ }\n// jika kondisi → jalankan badan dan jalankan langkah\nif (i < 3) { alert(i); i++ }\n// jika kondisi → jalankan badan dan jalankan langkah\nif (i < 3) { alert(i); i++ }\n// ...selesai, karena sekarang i == 3\n```\n\n````smart header=\"Deklarasi varibel sebaris\"\nDisini, \"penghitung\" variabel `i` dideklarasikan di dalam perulangan. Ini disebut deklarasi variabel \"sebaris\". variabel ini hanya akan terlihat di dalam perulangan.\n\n```js run\nfor (*!*let*/!* i = 0; i < 3; i++) {\n alert(i); // 0, 1, 2\n}\nalert(i); // error, tidak ada variabel\n```\n\nDaripada mendefinisikan sebuah variabel, kita dapat menggunakan yang sudah ada:\n\n```js run\nlet i = 0;\n\nfor (i = 0; i < 3; i++) { // gunakan variabel yang sudah ada\n alert(i); // 0, 1, 2\n}\n\nalert(i); // 3, terlihat, karena dideklarasikan diluar dari perulangan\n```\n\n````\n\n\n### Melewatkan bagian\n\nBagian apapun dari `for` dapat dilewati.\n\nContoh, kita dapat menghilangkan `awal` jika kita tidak butuh untuk melakukan apapun pada awal perulangan.\n\nSeperti ini:\n\n```js run\nlet i = 0; // kita punya i yang sudah dideklarasikan dan telah ditetapkan\n\nfor (; i < 3; i++) { // tidak butuh \"awal\"\n alert( i ); // 0, 1, 2\n}\n```\n\nKita juga bisa menghilangkan bagian `langkah`:\n\n```js run\nlet i = 0;\n\nfor (; i < 3;) {\n alert( i++ );\n}\n```\n\nIni membuat perulangan sama dengan `while (i < 3)`.\n\nKita sebenarnya dapat menghilangkan semuanya, membuat sebuah perulangan tak terhingga:\n\n```js\nfor (;;) {\n // ulangi tanpa batas\n}\n```\n\nTolong dicatat bahwa dua `for` titik koma `;` harus ada, jika tidak, akan ada sintaks error.\n\n## Menghentikan perulangan\n\nBiasanya, sebuah perulangan keluar ketika kondisinya menjadi bernilai salah.\n\nTapi kita dapat memaksanya keluar pada waktu apapun menggunakan perintah spesial `break`.\n\nContohnya, perulangan dibawah menanyakan pengguna untuk serangkaian angka, \"hentikan\" ketika tidak ada angka yang dimasukan:\n\n```js run\nlet sum = 0;\n\nwhile (true) {\n\n let value = +prompt(\"Masukan sebuah angka\", '');\n\n*!*\n if (!value) break; // (*)\n*/!*\n\n sum += value;\n\n}\nalert( 'Sum: ' + sum );\n```\n\nPerintah `break` teraktivasi pada baris `(*)` jika pengguna memasukan baris kosong atau membatalkan input. itu akan langsung berhenti, melewati kontrol ke baris pertama setelah perulangan. yang bernama, `alert`.\n\nKombinasi \"perulangan tak terhingga + `break` sesuai kebutuhan\" bagus untuk situasi dimana sebuah kondisi perulangan harus diperiksa tidak di awal atau akhir dari perulangan, tapi di pertengahan atau bahkan di beberapa tempat tubuhnya.\n\n## Lanjutkan ke perulangan berikutnya [#lanjutkan]\n\nPerintah `continue` adalah \"versi ringan\" dari `break`. Ini tidak mengentikan keseluruhan perulangan. sebagai gantinya, ini menghentikan perulangan saat ini dan memaksa perulangan untuk memulai yang baru (jika kondisi diperbolehkan).\n\nKita dapat menggunakan ini jika kita selesai dengan perulangan saat ini dan ingin pindah ke yang berikutnya.\n\nPerulangan dibawah menggunakan `continue` untuk hanya menampilkan nilai ganjil:\n\n```js run no-beautify\nfor (let i = 0; i < 10; i++) {\n\n // jika benar, lewati bagian badan perulangan yang tersisa\n *!*if (i % 2 == 0) continue;*/!*\n\n alert(i); // 1, then 3, 5, 7, 9\n}\n```\n\nUntuk nilai genap dari `i`, perintah `continue` mengentikan menjalankan badan dan melewati kontrol ke perulangan `for` berikutnya (dengan nomor berikutnya). jadi `alert` hanya terpanggil untuk nilai ganjil.\n\n````smart header=\"Perintah `continue` membantu mengurangi penyarangan\"\nSebuah perulangan yang menampilkan nilai ganjil dapat terlihat seperti ini:\n\n```js run\nfor (let i = 0; i < 10; i++) {\n\n if (i % 2) {\n alert( i );\n }\n\n}\n```\n\nDari sudut pandang teknis, ini identik dengan contoh diatas. Tentunya, kita dapat membungkus kode dalam sebuah blok `if` daripada menggunakan `continue`.\n\nTapi sebagai efeknya, hal ini akan menciptakan kode lebih dalam satu tingkat (pemanggilan `alert` didalam kurung kurawal). Jika kode didalam `if` lebih panjang beberapa baris, hal itu akan membuat tingkat keterbacaan kode menjadi berkurang.\n````\n\n````warn header=\"Tidak ada `break/continue` ke sisi kanan '?'\"\nHarap perhatikan bahwa sintaks yang membangun yang bukan ekspresi tidak dapat digunakan dengan operator ternary `?`. Khususnya, perintah seperti `break/continue` tidak diperbolehkan.\n\nMisalnya, jika kita mengambil kode ini:\n\n```js\nif (i > 5) {\n alert(i);\n} else {\n continue;\n}\n```\n\n...dan tulis ulang menggunakan sebuah tanda tanya:\n\n\n```js no-beautify\n(i > 5) ? alert(i) : *!*continue*/!*; // continue tidak diperbolehkan disini\n```\n\n...ia berhenti jalan: ada galat syntax:\n\nIni hanya alasan lain untuk tidak menggunakan operator tanda tanya `?` daripada `if`.\n````\n\n## Label untuk break/continue\n\nTerkadang kita perlu keluar dari beberapa perulangan bersarang sekaligus.\n\nMisalnya, dalam kode di bawah kita lakukan perulangan terhadap `i` dan `j`, meminta koordinat `(i, j)` dari `(0,0)` ke`(3,3)`:\n\n```js run no-beautify\nfor (let i = 0; i < 3; i++) {\n\n for (let j = 0; j < 3; j++) {\n\n let input = prompt(`Nilai pada koordinasi (${i},${j})`, '');\n\n // bagaimana jika saya ingin keluar dari sini ke Done (dibawah)?\n }\n}\n\nalert('Done!');\n```\n\nKita butuh cara untuk menghentikan proses jika pengguna membatalkan input.\n\n`break` biasa setelah `input` hanya akan menghentikan perulangan dalam. Itu tidak cukup--label, datang untuk menyelamatkan!\n\nLabel adalah sebuah pengidentifikasi dengan sebuah titik dua sebelum perulangan:\n```js\nlabelName: for (...) {\n ...\n}\n```\n\nPernyataan `break ` di dalam loop di bawah menghentikan pada label:\n\n```js run no-beautify\n*!*outer:*/!* for (let i = 0; i < 3; i++) {\n\n for (let j = 0; j < 3; j++) {\n\n let input = prompt(`Value at coords (${i},${j})`, '');\n\n // jika sebuah string kosong atau terbatalkan, lalu hentikan kedua perulangan\n if (!input) *!*break outer*/!*; // (*)\n\n // lakukan sesuatu dengan nilai...\n }\n}\nalert('Done!');\n```\n\nPada kode diatas, `break outer` melihat keatas untuk label bernama `outer` dan menghentikan perulangan itu.\n\nJadi kontrol pergi langsung dari `(*)` ke `alert('Done!')`.\n\nKita juga dapat memindah label ke sebuah baris terpisah:\n\n```js no-beautify\nouter:\nfor (let i = 0; i < 3; i++) { ... }\n```\n\nPerintah `continue` dapat juga digunakan dengan sebuah label. pada kasus ini, eksekusi kode berpindah ke perulangan label berikutnya.\n\n````warn header=\"Label tidak mengizinkan \\\"lompat\\\" ke manapun\"\nLabel tidak mengizinkan kita untuk lompat ke sembarang tempat dalam kode.\n\nMisalnya, mustahil melakukan ini:\n```js\nbreak label; // tidak lompak ke label di bawah\n\nlabel: for (...)\n```\n\nDirektif `break` harus berada di dalam blok kode. Secara teknis, setiap blok kode berlabel akan dilakukan, contoh.:\n```js\nlabel: {\n // ...\n break label; // berjalan\n // ...\n}\n```\n\n...Meskipun, 99,9% dari waktu `break` yang digunakan adalah loop dalam, seperti yang telah kita lihat pada contoh di atas.\n\n`continue` hanya dimungkinkan dari dalam loop.\n````\n\n## Ringkasan\n\nKita membahas 3 jenis perulangan:\n\n- `while` -- Kondisi diperiksa sebelum setiap perulangan.\n- `do..while` -- Kondisi diperiksa setelah setiap perulangan.\n- `for (;;)` -- Kondisi diperiksa sebelum setiap perulangan, pengaturan tambahan tersedia.\n\nUntuk membuat sebuah perulangan \"tak terhinggaa\", biasanya konstruksi `while(true)` digunakan. Demikian sebuah perulangan, seperti yang lainnya, dapat berhenti dengan perintah `break`.\n\nJika kita tidak ingin melakukan apapun di perulangan saat ini dan ingin meneruskan ke yang berikutnya, kita dapat menggunakan perintah `continue`.\n\n`break/continue` mendukung label sebelum perulangan. Label adalah satu-satunya cara untuk `break/continue` menghindari loop bersarang untuk pergi ke luar\n" }, { "path": "1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md", "content": "Supaya fungsionalitas `switch` persis sama, `if` harus memakai pembandingan ketat `'==='`.\n\nTapi untuk string yang diberikan, `'=='` sederhana cukup bekerja juga.\n\n```js no-beautify\nif(browser == 'Edge') {\n alert(\"You've got the Edge!\");\n} else if (browser == 'Chrome'\n || browser == 'Firefox'\n || browser == 'Safari'\n || browser == 'Opera') {\n alert( 'Okay we support these browsers too' );\n} else {\n alert( 'We hope that this page looks ok!' );\n}\n```\n\nTolong ingat: konstruksi `browser == 'Chrome' || browser == 'Firefox' …` dipecah menjadi beberapa baris untuk kemudahan keterbacaan.\n\nTapi konstruksi `switch` masih lebih bersih dan lebih deskriptif.\n" }, { "path": "1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md", "content": "nilai penting: 5\n\n---\n\n# Tulis kembali \"switch\" menjadi \"if\"\n\nTulis kode menggunakan `if..else` yang akan berkorespon dengan `switch` berikut:\n\n```js\nswitch (browser) {\n case 'Edge':\n alert( \"You've got the Edge!\" );\n break;\n\n case 'Chrome':\n case 'Firefox':\n case 'Safari':\n case 'Opera':\n alert( 'Okay we support these browsers too' );\n break;\n\n default:\n alert( 'We hope that this page looks ok!' );\n}\n```\n\n" }, { "path": "1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md", "content": "Dua cek pertama berubah ke `case`. Cek ketiga dipecah menjadi dua case:\n\n```js run\nlet a = +prompt('a?', '');\n\nswitch (a) {\n case 0:\n alert( 0 );\n break;\n\n case 1:\n alert( 1 );\n break;\n\n case 2:\n case 3:\n alert( '2,3' );\n*!*\n break;\n*/!*\n}\n```\n\nTolong ingat: `break` di paling bawah tidak wajib. Tapi kita taruh itu supaya kodenya future-proof.\n\nDi masa depan, ada kans bahwa kita ingin menambah `case` lebih, misalnya `case 4`. Dan jika kita lupa menambah break sebelum itu, di akhir `case 3`, akan ada error. Jadi itu lebih ke semacam asuransi diri.\n" }, { "path": "1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md", "content": "nilai penting: 4\n\n---\n\n# Tulis kembali \"if\" ke dalam \"switch\"\n\nTulis ulang kode berikut menggunakan pernyataan `switch` tunggal:\n\n```js run\nlet a = +prompt('a?', '');\n\nif (a == 0) {\n alert( 0 );\n}\nif (a == 1) {\n alert( 1 );\n}\n\nif (a == 2 || a == 3) {\n alert( '2,3' );\n}\n```\n\n" }, { "path": "1-js/02-first-steps/14-switch/article.md", "content": "# Pernyataan \"switch\"\n\nPernyataan `switch` bisa mengganti pengecekan ganda `if`.\n\nIa memberi cara lebih deskriptif untuk membandingkan nilai dengan varian ganda.\n\n## Syntax\n\n`switch` punya satu atau lebih blok `case` dan satu default opsional.\n\nRupanya seperti ini:\n\n```js no-beautify\nswitch(x) {\n case 'value1': // if (x === 'value1')\n ...\n [break]\n\n case 'value2': // if (x === 'value2')\n ...\n [break]\n\n default:\n ...\n [break]\n}\n```\n\n- Nilai `x` dicek ekaulitasnya secara ketat dengan nilaid dari `case` pertama (yaitu, `value1`) lalu ke kedua (`value2`) dan seterusnya.\n- Jika ekualitas ditemukan, `switch` mulai mengexekusi kode mulai dari `case` yang berkorespondensi, hingga `break` terdekat (atau hingga akhir `switch`).\n- Jika tak ada case yang cocok maka kode `default` diexekusi (jika ada).\n\n## Contoh\n\nContoh `switch` (kode yang dieksekusi dihighlight):\n\n```js run\nlet a = 2 + 2;\n\nswitch (a) {\n case 3:\n alert( 'Too small' );\n break;\n*!*\n case 4:\n alert( 'Exactly!' );\n break;\n*/!*\n case 5:\n alert( 'Too big' );\n break;\n default:\n alert( \"I don't know such values\" );\n}\n```\n\nDi sini `switch` mulai membandingkan `a` dari varian `case` pertama yang bernilai `3`. Kecocokan gagal.\n\nLalu `4`. Ada kecocokan, jadi exekusi mulai dari `case 4` hingga `break` terdekat.\n\n**Jika tak ada `break` maka exekusi lanjut dengan `case` berikutnya tanpa pengecekan.**\n\nContoh tanpa `break`:\n\n```js run\nlet a = 2 + 2;\n\nswitch (a) {\n case 3:\n alert( 'Too small' );\n*!*\n case 4:\n alert( 'Exactly!' );\n case 5:\n alert( 'Too big' );\n default:\n alert( \"I don't know such values\" );\n*/!*\n}\n```\n\nDi contoh di atas kita akan lihat exekusi sekuensial dari tiga `alert`:\n\n```js\nalert( 'Exactly!' );\nalert( 'Too big' );\nalert( \"I don't know such values\" );\n```\n\n````smart header=\"Expresi apapun bisa berupa argumen `switch/case`\"\nBaik `switch` maupun `case` membolehkan sembarang expresi.\n\nMisalnya:\n\n```js run\nlet a = \"1\";\nlet b = 0;\n\nswitch (+a) {\n*!*\n case b + 1:\n alert(\"this runs, because +a is 1, exactly equals b+1\");\n break;\n*/!*\n\n default:\n alert(\"this doesn't run\");\n}\n```\nDi sini `+a` memberikan `1`, yang dibandingkan dengan `b + 1` ndalam `case`, and the corresponding code is executed.\n````\n\n## Pengelompokan \"case\"\n\nBeberapa varian `case` yang berbagi kode yang sama bisa dikelompokkan.\n\nMisalnya, jika kita ingin kode yang sama berjalan untuk `case 3` dan `case 5`:\n\n```js run no-beautify\nlet a = 3;\n\nswitch (a) {\n case 4:\n alert('Right!');\n break;\n\n*!*\n case 3: // (*) grouped two cases\n case 5:\n alert('Wrong!');\n alert(\"Why don't you take a math class?\");\n break;\n*/!*\n\n default:\n alert('The result is strange. Really.');\n}\n```\n\nSekarang baik `3` maupun `5` menampilkan pesan yang sama.\n\nKemampuan \"mengelompokkan\" case adalah efek samping dari bagaimana `switch/case` bekerja tanpa `break`. Di sini exekusi dari `case 3` mulai dari baris `(*)` dan tembus ke `case 5`, karena tidak ada `break`.\n\n## Tipe berpengaruh\n\nMari kita tekankan bahwa pengecekan ekualitas selalu ketat. Nilainya harus bertipe sama supaya cocok.\n\nMisalnya, mari kita pertimbangkan kode ini:\n\n```js run\nlet arg = prompt(\"Enter a value?\");\nswitch (arg) {\n case '0':\n case '1':\n alert( 'One or zero' );\n break;\n\n case '2':\n alert( 'Two' );\n break;\n\n case 3:\n alert( 'Never executes!' );\n break;\n default:\n alert( 'An unknown value' );\n}\n```\n\n1. Untuk `0`, `1`, `alert` pertama berjalan.\n2. Untuk `2` `alert` kedua berjalan.\n3. Tapi untuk `3`, hasil dari `prompt` ialah string `\"3\"`, yang berbeda secara ketat `===` dengan angka `3`. Jadi kita punya kode mati di `case 3`! Varian `default` akan diexekusi.\n" }, { "path": "1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md", "content": "Tidak ada perbedaan." }, { "path": "1-js/02-first-steps/15-function-basics/1-if-else-required/task.md", "content": "nilai penting: 4\n\n---\n\n# Apakah \"else\" dibutuhkan ?\n\nFungsi berikut mengembalikan nilai `true` jika parameter `age` lebih besar daripada `18`.\n\nJika tidak, fungsi tersebut akan meminta konfirmasi dan mengembalikan nilainya:\n\n```js\nfunction checkAge(age) {\n if (age > 18) {\n return true;\n*!*\n } else {\n // ...\n return confirm('Did parents allow you?');\n }\n*/!*\n}\n```\n\nakankah fungsi bekerja berbeda jika `else` dibuang ?\n\n```js\nfunction checkAge(age) {\n if (age > 18) {\n return true;\n }\n*!*\n // ...\n return confirm('Did parents allow you?');\n*/!*\n}\n```\napakah ada perbedaan pada tingkah laku dari kedua variasi ?\n" }, { "path": "1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md", "content": "Menggunakan tanda tanya operator `'?'`:\n\n```js\nfunction checkAge(age) {\n return (age > 18) ? true : confirm('Did parents allow you?');\n}\n```\n\nUsing OR `||` (the shortest variant):\nMenggunakan OR `||` (variasi yang terpendek):\n\n```js\nfunction checkAge(age) {\n return (age > 18) || confirm('Did parents allow you?');\n}\n```\n\nCatatan bahwa tanda kurung sekitar `age > 18` tidak dibutuhkan disini. Mereka ada hanya untuk lebih enak dibaca.\n" }, { "path": "1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md", "content": "nilai penting: 4\n\n---\n\n# Tulis ulang fungsi menggunakan '?' atau '||'\n\nFungsi berikut mengembalikan nilai `true` jika parameter `age` lebih besar daripada `18`.\n\nJika tidak, fungsi akan meminta sebuah konfirmasi dan mengembalikan nilainya.\n\n\n```js\nfunction checkAge(age) {\n if (age > 18) {\n return true;\n } else {\n return confirm('Did parents allow you?');\n }\n}\n```\n\nTulis ulang fungsi, untuk melakukan dengan sama, tetapi tanpa `if`, dalam satu baris.\n\nBuatlah dua variasi dari `checkAge`:\n\n1. Menggunakan sebuah tanda tanya operator `?`\n2. Mengguunakan OR `||`\n" }, { "path": "1-js/02-first-steps/15-function-basics/3-min/solution.md", "content": "Solusi menggunakan `if`:\n\n```js\nfunction min(a, b) {\n if (a < b) {\n return a;\n } else {\n return b;\n }\n}\n```\n\nSolusi menggunakan tanda tanya operator `'?'`:\n\n```js\nfunction min(a, b) {\n return a < b ? a : b;\n}\n```\n\nP.S. Pada kasus persamaan `a == b` tidak menjadi penting apa yang dikembalikan" }, { "path": "1-js/02-first-steps/15-function-basics/3-min/task.md", "content": "nilai penting: 1\n\n---\n\n# Fungsi min(a,b)\n\nTulis sebuah fungsi `min(a,b)` yang mengembalikan nilai paling terkecil dari dua angka `a` dan `b`.\n\nSebagai gambaran:\n\n```js\nmin(2, 5) == 2\nmin(3, -1) == -1\nmin(1, 1) == 1\n```\n\n" }, { "path": "1-js/02-first-steps/15-function-basics/4-pow/solution.md", "content": "\n```js menjalankan demo\nfunction pow(x, n) {\n let result = x;\n\n for (let i = 1; i < n; i++) {\n result *= x;\n }\n\n return result;\n}\n\nlet x = prompt(\"x?\", '');\nlet n = prompt(\"n?\", '');\n\nif (n < 1) {\n alert(`Power ${n} is not supported, use a positive integer`);\n} else {\n alert( pow(x, n) );\n}\n```\n" }, { "path": "1-js/02-first-steps/15-function-basics/4-pow/task.md", "content": "nilai penting: 4\n\n---\n\n# Fungsi pow(X,n)\n\nTulis sebuah fungsi `pow(x,n)` yang mengembalikkan nilai `x` pada pangkat `n`. Atau, dengan kata lain, kalikan `x` dengan dirinya sendiri sebanyak `n` kali dan mengembalikan hasilnya.\n\n```js\npow(3, 2) = 3 * 3 = 9\npow(3, 3) = 3 * 3 * 3 = 27\npow(1, 100) = 1 * 1 * ...* 1 = 1\n```\n\nBuatlah sebuah halaman website yang meminta untuk nilai `x` dan `n`, dan tampilkan hasilnya pada `pow(x,n)`.\n\n[demo]\n\nP.S. pada tugas ini, fungsi seharusnya mendukung hanya nilai bilangan natural dari `n`: bilangan integer mulai dari `1`.\n" }, { "path": "1-js/02-first-steps/15-function-basics/article.md", "content": "# Fungsi\n\nSering kali, kita harus melakukan tindakan yang sama pada skrip di banyak tempat\n\nSebagai contoh, kita mengharuskan untuk menampilkan pesan yang terlihat indah ketika pengunjung melakukan log in, log out dan mungkin di tempat lain.\n\nFungsi adalah program utama yang membentuk \"struktur bangunan\". Mereka memungkinkan kode untuk dipanggil sebanyak mungkin tanpa harus mengetik berulang-ulang.\n\nKita telah melihat contoh dari fungsi built-in, seperti `alert(message)`, `prompt(message, default)` dan `confirm(question)`.\n\n## Deklarasi Fungsi\n\nUntuk membuat fungsi, kita dapat menggunakan *deklarasi fungsi*.\n\nItu terlihat seperti ini:\n\n```js\nfunction showMessage() {\n alert( 'Hello everyone!' );\n}\n```\n\nKatakunci `fungsi` ditulis duluan, lalu *nama fungsinya*, kemudian daftar semua *parameter* antara tanda kurung () (pada contoh di atas, tanda kurung kosong) dan bagian terakhir adalah fungsi kode, yang juga disebut sebagai \"badan fungsi\", antara kurung kurawal {}.\n\n```js\nfunction name(parameter1, parameter2, ... parameterN) {\n ...body...\n}\n```\n\nFungsi baru kita dapat disebut dengan nama: `showMessage()`.\n\nSebagai contoh:\n\n```js run\nfunction showMessage() {\n alert( 'Hello everyone!' );\n}\n\n*!*\nshowMessage();\nshowMessage();\n*/!*\n```\n\nPemanggilan fungsi `showMessage()` mengeksekusi fungsi kode. Disini kita akan melihat pesan keluaran sebanyak dua kali.\n\nContoh ini secara jelas memaparkan satu fungsi utama dari penggunaan fungsi: untuk menghindari duplikasi kode.\n\nJika kita ingin mengubah pesan atau bagaimana pesan itu ingin ditampilkan, itu cukup untuk mengubah kode di satu tempat: yaitu fungsi yang menampilkannya.\n\n## Variabel lokal\n\nVariabel yang diumumkan dalam fungsi hanya akan terlihat di dalam fungsi tersebut.\n\nMisalnya:\n\n```js run\nfunction showMessage() {\n*!*\n let message = \"Hello, I'm JavaScript!\"; // variabel lokal\n*/!*\n\n alert( message );\n}\n\nshowMessage(); // Halo, saya adalah JavaScript!\n\nalert( message ); // <-- Error! Variabel terlihat secara lokal menurut fungsi\n```\n\n## Variabel luar\n\nSuatu fungsi juga dapat mengakses variabel luar, sebagai contoh: \n\n```js run no-beautify\nlet *!*userName*/!* = 'John';\n\nfunction showMessage() {\n let message = 'Hello, ' + *!*userName*/!*;\n alert(message);\n}\n\nshowMessage(); // Halo, John\n```\n\nFungsi memiliki hak akses penuh kepada variabel luar fungsi. Juga variabel tersebut dapat diubah.\n\nSebagai contoh:\n\n```js run\nlet *!*userName*/!* = 'John';\n\nfunction showMessage() {\n *!*userName*/!* = \"Bob\"; // (1) changed the outer variable\n\n let message = 'Hello, ' + *!*userName*/!*;\n alert(message);\n}\n\nalert( userName ); // *!*John*/!* sebelum pemanggilan fungsi\n\nshowMessage();\n\nalert( userName ); // *!*Bob*/!*, nilai dimodifikasi oleh fungsi\n```\n\nVariabel luar hanya dapat digunakan jika tidak ada variabel lokal yang menggunakan.\n\nJika terdapat variabel yang memiliki nama identik yang dideklarasikan di dalam fungsi, lalu variabel luar akan *tertumpukkan*. Sebagai gambaran, pada kode di bawah, fungsi menggunakan variabel lokal bernama `userName`. Variabel luar akan terabaikan:\n\n```js run\nlet userName = 'John';\n\nfunction showMessage() {\n*!*\n let userName = \"Bob\"; // deklarasikan lokal variabel\n*/!*\n\n let message = 'Hello, ' + userName; // *!*Bob*/!*\n alert(message);\n}\n\n// fungsi akan membuat dan menggunakan userName dirinya sendiri\nshowMessage();\n\nalert( userName ); // *!*John*/!*, tidak berubah, fungsi tidak dapat mengakses variabel luar\n```\n\n```smart header=\"Global variables\"\nVariabel yang dideklarasikan di luar dari fungsi, seperti variabel luar `userName` pada kode di atas, disebut sebagai *global*.\n\nVariabel global terlihat dari semua fungsi (terkecuali jika ditumpukkan oleh variabel lokal).\n\nIni menjadi suatu cara yang baik untuk mengurangi penggunaan variabel global. Kode yang modern hanya memiliki sedikit bahkan tidak ada variabel global. Kebanyakan variabel dideklarasikan dan digunakan di dalam fungsi masing-masing. Kadang-kadang, mereka dapat digunakan untuk menyimpan data setingkat projek.\n```\n\n## Parameters\n\nKita dapat meloloskan data yang begitu acak kepada fungsi sebagai parameter (disebut juga sebagai *fungsi argumen*).\n\nPada contoh di bawah, fungsi memiliki dua paramter: `from` dan `text`.\n\n```js run\nfunction showMessage(*!*from, text*/!*) { // parameters: from, text\n alert(from + ': ' + text);\n}\n\n*!*\nshowMessage('Ann', 'Hello!'); // Ann: Hallo! (*)\nshowMessage('Ann', \"What's up?\"); // Ann: Ada apa? (**)\n*/!*\n```\n\nKetika fungsi dipanggil pada penanda `(*)` dan `(**)`, nilai yang diberikan dipindahkan ke variabel lokal `from` dan `text`. Lalu fungsi menggunakan nilai-nilai tersebut.\n\nIni terdapat satu lagi contoh: kita memiliki variabel `from` dan memindahkannya ke fungsi. Dengan catatan: fungsi akan mengubah `from`, tapi perubahan ini tidak akan terlihat di luar fungsi, karena sebuah fungsi akan selalu mendapatkan salinan nilai:\n\n```js run\nfunction showMessage(from, text) {\n\n*!*\n from = '*' + from + '*'; // membuat \"from\" terlihat lebih indah\n*/!*\n\n alert( from + ': ' + text );\n}\n\nlet from = \"Ann\";\n\nshowMessage(from, \"Hello\"); // *Ann*: Hallo\n\n// Nilai dari \"from\" adalah sama, fungsi melakukan perubahan pada variabel lokal\nalert( from ); // Ann\n```\n\nKetika sebuah nilai dilewatkan sebagai parameter fungsi, itu juga disebut *argumen*.\n\nDengan kata lain, untuk meluruskan istilah-istilah ini:\n\n- Parameter adalah variabel yang tercantum di dalam tanda kurung dalam deklarasi fungsi (ini adalah istilah waktu deklarasi)\n- Argumen adalah nilai yang diteruskan ke fungsi saat dipanggil (ini adalah istilah waktu panggilan).\n\nKami mendeklarasikan fungsi yang mencantumkan parameternya, lalu memanggilnya lewat argumen.\n\nDalam contoh di atas, seseorang mungkin mengatakan: \"fungsi `sayMessage` dideklarasikan dengan dua parameter, kemudian dipanggil dengan dua argumen: `from` dan `\"Hello\"`\".\n\n\n## Nilai default\n\nJika suatu fungsi dipanggil, tetapi argumen tidak diberikan, maka nilai yang sesuai menjadi `tidak terdefinisi`.\nSebagai gambaran, fungsi yang telah tersebut di atas `showMessage(from, text)` dapat dipanggil dengan argumen tunggal:\n\n```js\nshowMessage(\"Ann\");\n```\n\n\nItu tidak terjadi kesalahan. Malah pemanggilan tersebut akan menghasilkan `\"Ann: undefined\"`. Tidak ada argumen untuk parameter `text`, jadi ini diasumsikan bahwa `text === undefined`.\n\nJika kita ingin menggunakan suatu `text` \"default\" pada kasus ini, lalu kita dapat menentukannya setelah `=`:\n\n```js run\nfunction showMessage(from, *!*text = \"no text given\"*/!*) {\n alert( from + \": \" + text );\n}\n\nshowMessage(\"Ann\"); // Ann: tidak diberikan teks\n```\n\nSekarang, jika parameter `text` tidak ditentukan, parameter tersebut akan mengambil nilai `\"no text give\"`\n\nDisini `\"no text give\"` adalah string, tapi ia bisa menjadi suatu expresi nilai lebih kompleks, yang hanya dievaluasi dan ditetapkan jika tak ada nilai pada parameter. Jadi, ini juga mungkin ditetapkan:\n\n```js run\nfunction showMessage(from, text = anotherFunction()) {\n // anotherFunction() hanya akan mengeksekusi jika tidak adanya teks\n // hasilnya menjjadi nilai pada teks\n}\n```\n\n```smart header=\"Evaluasi parameter default\"\nDi Javascript, parameter default dievaluasi tiap kali fungsi dipanggil tanpa parameter.\n\nPada contoh di atas, `anotherFunction()` dipanggil tiap kali `showMessage()` dipanggil tanpa parameter `text`.\n\nDi sisi lain, itu dipanggil secara independen setiap kali `teks` hilang.\n\n```\n\n### Alternatif nilai default parameter\n\nTerkadang akan dapat dimengerti untuk memberikan nilai default untuk variabel bukan didalam deklarasi fungsi, tapi di tahap selanjutnya, didalam proses eksekusinya.\n\nUntuk memeriksa parameter yang tidak ada, kita bisa membandingkannya dengan `undefined`:\n\n```js run\nfunction showMessage(text) {\n // ...\n\n*!*\n if (text === undefined) { // if the parameter is missing\n text = 'empty message';\n }\n*/!*\n\n alert(text);\n}\n\nshowMessage(); // empty message\n```\n\n...Atau kita bisa menggunakan operator `||`:\n\n```js\n// jika teks parameter tidak ada atau \"\", set variabel ke 'empty'\nfunction showMessage(text) {\n // if text is undefined or otherwise falsy, set it to 'empty'\n text = text || 'empty';\n ...\n}\n```\n\nJavascript yang modern mendukung [nullish coalescing operator/operator penggabung nullish](info:nullish-coalescing-operator) `??`, akan lebih baik jika nilai falsy, seperti `0`, dianggap biasa:\n\n```js run\n// jika tidak ada parameter \"count\", tampilkan \"unknown\"\nfunction showCount(count) {\n // if count is undefined or null, show \"unknown\"\n alert(count ?? \"unknown\");\n}\n\nshowCount(0); // 0\nshowCount(null); // unknown\nshowCount(); // unknown\n```\n\n## Mengembalikan nilai\n\nFungsi dapat mengembalikan nilai kepada kode pemanggil sebagai hasil akhir.\n\nContoh yang paling sederhana adalah fungsi yang menjumlahkan dua nilai:\n\n```js run no-beautify\nfunction sum(a, b) {\n *!*return*/!* a + b;\n}\n\nlet result = sum(1, 2);\nalert( result ); // 3\n```\n\nPenulisan kata `return` dapat ditulis dimana saja pada fungsi. Ketika proses eksekusi kode mencapai kata tersebut, proses eksekusi akan berhenti, dan nilai akan dikembalikan kepada kode pemanggil (yang ditentukan pada variabel `result` di atas).\n\nDapat dimungkinkan kehadiran banyak kata `return` pada suatu fungsi tunggal. Misalnya:\n\n```js run\nfunction checkAge(age) {\n if (age >= 18) {\n*!*\n return true;\n*/!*\n } else {\n*!*\n return confirm('Do you have permission from your parents?');\n*/!*\n }\n}\n\nlet age = prompt('How old are you?', 18);\n\nif ( checkAge(age) ) {\n alert( 'Access granted' );\n} else {\n alert( 'Access denied' );\n}\n```\n\nSangat dimungkinkan menggunakan kata `return` tanpa nilai. Hal ini akan menyebabkan fungsi untuk langsung keluar.\n\nMisalnya:\n\n```js\nfunction showMovie(age) {\n if ( !checkAge(age) ) {\n*!*\n return;\n*/!*\n }\n\n alert( \"Showing you the movie\" ); // (*)\n // ...\n}\n```\n\nPada contoh kode di atas, jika `checkAge(age)` mengembalikan nilai `false`, maka `showMovie` tidak akan memproses `alert`.\n\n````smart header=\"Jika fungsi tidak mengembalikan nilai, hal ini sama saja dengan mengembalikan nilai `undefined`\"\n\n```js run\nfunction doNothing() { /* kosong */ }\n\nalert( doNothing() === undefined ); // true\n```\n\n`return` kosong tanpa nilai memiliki nilai yang sama dengan `return undefined`:\n\n```js run\nfunction doNothing() {\n return;\n}\n\nalert( doNothing() === undefined ); // true\n```\n````\n\n````warn header=\"Jangan tambahkan baris baru diantara `return` dan nilainya\"\n\nUntuk ekspresi yang lebih panjang pada penggunaan `return`, ini mungkin akan menciptakan suatu penulisan yang singkat untuk menuliskannya pada baris yang berbeda, seperti contoh berikut:\n\n```js\nreturn\n (some + long + expression + or + whatever * f(a) + f(b))\n```\nHal ini tidak akan berhasil karena Javascript akan menganggap tanda titik koma setelah kata `return`. Hal ini juga akan berlangsung sama dengan contoh berikut:\n\n```js\nreturn*!*;*/!*\n (some + long + expression + or + whatever * f(a) + f(b))\n```\n\nJadi, ia efektif menjadi kembalian kosong.\n\nJika kita ingin expresi kembalian membungkus beberapa baris, kita mesti mulai di baris yang sama dengan `return`. Atau minimal taruh tanda kurung pembuka di sana seperti ini:\n\n```js\nreturn (\n some + long + expression\n + or +\n whatever * f(a) + f(b)\n )\n```\nDan ia akan berjalan seperti harapan kita.\n````\n\n## Menamakan fungsi [#penamaan fungsi]\n\nFungsi adalah tindakan. Sehingga nama fungsi mencerminkan kata kerja. Ia harus ringkas, sebisa mungkin harus akurat dan menjelaskan fungsi apa yang dikerjakan, sehingga ketika seseorang yang membaca kode tersebut mendapatkan penjelasan atau indikasi fungsi apa tersebut.\n\nSudah menjadi khalayak umum bahwa untuk membuat fungsi harus dibarengi dengan awalan verbal yang secara tidak langsung menjelaskan tindakannya.\n\nSebagai gambaran, fungsi yang dimulai dengan kata `\"show\"` biasanya melakukan tindakan menunjukkan sesuatu.\n\nFungsi yang dimulai dengan...\n\n- `\"get\"` -- mengembalikan suatu nilai,\n- `\"calc\"` -- menghitungkan sesuatu,\n- `\"create\"` -- membuat sesuatu,\n- `\"check\"` -- melakukan pengecekkan dan mengembalikan nilai boolean, dst.\n\nContoh dari nama yang diberikan di atas:\n\n```js no-beautify\nshowMessage(..) // menampilkan pesan\ngetAge(..) // mengembalikan nilai umur (bagaimanapun mengembalikkan umur)\ncalcSum(..) // menghitung penjumlahan dan mengembalikan hasilnya\ncreateForm(..) // membuat formulir (dan biasanya mengembalikan nilai)\ncheckPermission(..) // pengecekkan terhadap ijin, mengembalikan true/false\n```\n\nDengan awalan yang tertera, secara sekilas pada nama fungsi memberikan pemahaman tindakan apa yang dilakukan dan nilai apa yang dikembalikan.\n\n```smart header=\"Satu fungsi -- Satu aksi\"\nFungsi sebaiknya mengerjakan apa yang telah ditulis pada namanya, tidak lebih.\n\nDua tindakan independen biasanya berasal dari dua fungsi, walaupun mereka dipanggil secara bersamaan (pada kasus ini, kita mampu membuat fuungsi ketiga yang memanggil keduanya).\n\nSedikit contoh yang mematahkan aturan ini:\n\n- `getAge` -- akan menjadi buruk jika menunjukkan `alert` yang menunjukkan umur (seharusnya hanya get).\n- `createForm` -- akan menjadi buruk jika fungsi tersebut mengubah dokumen, menambahkan formulir pada dokumen tersebut (seharusnya hanya membentuk dokumen dan mengembalikannya).\n- `checkPermission` -- akan menjadi buruk jika fungsi tersebut menampilkan pesan `akses diberikan/ditolak` (seharusnya hanya melakukan pengecekkan dan mengembalikkan nilainya).\n\nPada contoh-contoh ini diasumsikan arti-arti umum pada kata awalan. Kamu dan tim kamu memiliki kehendak bebas untuk menentukan arti lainnya, tapi biasanya penentuan arti tersebut tidaklah jauh berbeda. Pada contoh lain, kamu seharusnya memiliki pemahaman yang kuat dari arti kata awalan yang digunakan, kata awalan apa yang dapat digunakan pada fungsi dan tidak dapat diguunakan. Semua kata awalan fungsi harus mengikuti aturan tertentu. Dan tim seharusnya dapat saling memberikan pemahaman satu sama lain.\n```\n\n```smart header=\"Ultrashort function names\"\nFungsi yang *digunakan secara sering* kadang-kadang memiliki nama yang sangat pendek.\n\nSebagai contoh, framework [jQuary](http://jquary.com) mendefinisikan fungsi dengan simbol `$`. Library [Lodash](https://lodash.com) memiliki fungsi inti yang dinamakan dengan `_`.\n\nHal-hal tersebut adalah pengecualian. Secara umum, nama fungsi sebaiknya ringkas dan menjelaskan maksudnya.\n```\n\n## Fungsi == komen\n\nFungsi seharusnya memiliki nama yang pendek dan hanya melakukan satu tindakan. Jika tindakan tersebut mengerjakan hal yang cukup kompleks, mungkin sebaiknya fungsi tersebut dibagi menjadi fungsi yang lebih sederhana. Kadang-kadang, mengikuti aturan ini tidaklah mudah, tetapi tentu adalah hal yang baik.\n\nFungsi yang terpisah bukan hanya mudah untuk diuji coba dan debug -- kehadirannya sangat baik untuk diberikan komentar!\n\nSebagai gambaran, bandingkan dua fungsi `showPrimes(n)` di bawah. Setiap satu dari keluarannya [bilangan prima](https://en.wikipedia.org/wiki/Prime_number) mencapai hingga `n`.\n\nVariasi pertama menggunakan label:\n\n```js\nfunction showPrimes(n) {\n nextPrime: for (let i = 2; i < n; i++) {\n\n for (let j = 2; j < i; j++) {\n if (i % j == 0) continue nextPrime;\n }\n\n alert( i ); // bilangan prima\n }\n}\n```\n\nPada variasi yang kedua mengguunakan fungsi tambahan `isPrime(n)` untuk dilakukan uji coba keutamaannya:\n\n```js\nfunction showPrimes(n) {\n\n for (let i = 2; i < n; i++) {\n *!*if (!isPrime(i)) continue;*/!*\n\n alert(i); // bilangan prima\n }\n}\n\nfunction isPrime(n) {\n for (let i = 2; i < n; i++) {\n if ( n % i == 0) return false;\n }\n return true;\n}\n```\n\nPada variasi yang kedua lebih mudah untuk dipahami, benarkan ? Malah daripada potongan kode yang kita lihat pada tindakan (`isPrime`). Kadang-kadang, orang-orang merujuk kepada penulisan kode yang *menjelaskan dirinya*.\n\nJadi, fungsi dapat dibuat walaupun kita tidak terlalu sering menggunakannya. Mereka membuat kode lebih terstruktur dan lebih mudah untuk dibaca.\n\n## Kesimpulan\n\nDeklarasi fungsi terlihat seperti ini:\n\n```js\nfunction name(parameters, delimited, by, comma) {\n /* code */\n}\n```\n\n- Nilai yang diberikan kepada fungi sebagai parameter dipindahkan ke variabel lokal.\n- Fungsi mungkin dapat diakses dengan variabel luar. Tetapi fungsi tersebut hanya dapat bekerja melalui internal fungsi keluar. Kode di luar daripada fungsi bersangkutan tidak dapat melihat variabel lokal.\n- Fungsi dapat mengembalikan suatu nilai. Jika tidak demikian, maka akan mengembalikan nilai `undefined`.\n\nUntuk membuat kode yang bersih dan mudah untuk dipahami, sangat dianjurkan untuk menggunakan variabel lokal dan parameter pada fungsi, tidak mengguunakan variabel luar / variabel global.\n\nAkan menjadi hal yang mudah untuk dipahami pada fungsi yang mendapatkan parameter, yang bekerja dengan parameter tersebut dan mengembalikan nilainya daripada fuungsi yang tidak memilki parameter, tetapi melakukan modifikasi terhadap variabel luar akan memiliki efek samping.\n\nPenamaan fungsi:\n\n- Nama seharusnya ditulis dengan jelas dan mendeskripsikan apa yang dikerjakan. Ketika kita melihat fungsi dipanggil pada kode, penamaan yang baik secara langsuung akan memberikan kita pemahaman apa yang dikerjakan dan nilai apa yang dikembalikan.\n- Fungsi adalah tindakan, sehingga nama fungsi biasanya kata kerja (verbal).\n- Banyak nama-nama awalan fungsi seperti `create`, `show`, `get`, `check` dan lainnya. Gunakan awalan tersebut untuk memberikan kata kunci apa yang dikerjakan oleh fungsi.\n\nFungsi adalah bagaikan fondasi bangunan dari skrip. Sekarang, kita telah mempelajari dasarnya, sehingga sekarang kita dapat memumlai untuk membuat dan menggunakannya. Tapi hal itu baru permulaan dari awal perjalanan. Kita akan kembali menggunakan mereka berulang kali, secara terus-menerus menggunakan secara mendalam hingga fitur yang lebih kompleks.\n" }, { "path": "1-js/02-first-steps/16-function-expressions/article.md", "content": "# Expresi fungsi\n\nDi JavaScript, fungsi bukan \"struktur bahasa magis\", melaikan satu bentuk nilai spesial.\n\nSyntax yang kita gunakan sebelumnya disebut *Deklarasi Fungsi*:\n\n```js\nfunction sayHi() {\n alert( \"Hello\" );\n}\n```\n\nAda syntax lain untuk membuat fungsi yang disebut *Expresi Fungsi*.\n\nRupanya seperti ini:\n\n```js\nlet sayHi = function() {\n alert( \"Hello\" );\n};\n```\n\nDi sini, fungsi dibuat dan diisi variabel secara explisit, seperti nilai lain manapun. Tak peduli bagaimana fungsi didefinisi, ia hanya suatu nilai yang disimpan dalam variabel `sayHi`.\n\nArti dari sampel kode ini sama: \"buatlah fungs dan taruhlah di dalam variabel `sayHi`\".\n\nKita bahkan bisa mencetak nilai itu menggunakan `alert`:\n\n```js run\nfunction sayHi() {\n alert( \"Hello\" );\n}\n\n*!*\nalert( sayHi ); // menampilkan kode fungsi\n*/!*\n```\n\nTolong ingat bahwa baris terakhir tidak menjalankan fungsi, karena tak ada tanda kurung setelah `sayHi`. Ada bahasa pemrograman di mana satu penyebutan nama fungsi menyebabkan exekusi fungsi, tapi JavaScript tak seperti itu.\n\nDi JavaScript, fungsi adalah nilai, jadi kita bisa menghadapinya sebagai nilai. Kode di atas menunjukkan representasi stringnya, yang mana kode sumbernya.\n\nPastinya, fungsi adalah nilai spesial, dengan anggapan bahwa kita bisa memanggilnya seperti `sayHi()`.\n\nTapi ia tetaplah nilai. Jadi kita bisa memakainya seperti macam nilai lainnya.\n\nKita bisa mengkopi fungsi ke variabel lain:\n\n```js run no-beautify\nfunction sayHi() { // (1) buat\n alert( \"Hello\" );\n}\n\nlet func = sayHi; // (2) kopi\n\nfunc(); // Hello // (3) jalankan kopinya (ia bekerja)!\nsayHi(); // Hello // ini juga masih bekerja (kenapa tidak)\n```\n\nInilah yang terjadi di atas secara detil:\n\n1. Deklarasi Fungsi `(1)` membuat fungsi dan menaruhnya ke variabel bernama `sayHi`.\n2. Baris `(2)` mengkopinya ke variabel `func`. Tolong ingat lagi: tak ada tanda kurung setelah `sayHi`. Jika ada, maka `func = sayHi()` akan menulis *hasil panggilan* `sayHi()` ke `func`, bukan *fungsi* `sayHi` itu sendiri.\n3. Sekarang fungsi bisa dipanggil baik sebagai `sayHi()` maupun `func()`.\n\nCatat bahwa kita jusa bisa menggunakan Expresi Fungsi untuk mendeklarasi `sayHi`, di baris pertama:\n\n```js\nlet sayHi = function() {\n alert( \"Hello\" );\n};\n\nlet func = sayHi;\n// ...\n```\n\nSemua akan berjalan sama.\n\n\n````smart header=\"Kenapa ada semicolon di akhir?\"\nKamu mungkin penasaran, kenapa Expresi Fungsi punya semicolon `;` di akhir, tapi Deklarasi Fungsi tidak:\n\n```js\nfunction sayHi() {\n // ...\n}\n\nlet sayHi = function() {\n // ...\n}*!*;*/!*\n```\n\nJawabannya simpel:\n- `;` tidak dibutuhkan di akhir blok kode dan struktur syntax yang memakai mereka seperti `if { ... }`, `for { }`, `function f { }` dll.\n- Expresi Fungsi digunakan di dalam pernyataan: `let sayHi = ...;`, sebagai nilai. Ia bukan blok kode, tapi lebih ke penetapan. Semicolon `;` disarankan di akhir pernyataan, tak peduli nilainya apa. Jadi semicolon di sini tak ada hubungannya dengan Expresi Fungsi itu sendiri, ia hanya menstop pernyataan.\n````\n\n## Fungsi callback\n\nAyo kita lihat pada contoh lain mengoper fungsi sebagai nilai dan menggunakan expresi fungsi.\n\nKita akan menulis fungsi `ask(question, yes, no)` dengan tiga parameter:\n\n`question`\n: Teks pertanyaan\n\n`yes`\n: Fungsi yang berjalan jika jawabannya \"Yes\"\n\n`no`\n: Fungsi yang berjalan jika jawabannya \"No\"\n\nFungsinya akan menanyakan `question` dan, tergantung jawabannya pengguna, panggil `yes()` atau `no()`:\n\n```js run\n*!*\nfunction ask(question, yes, no) {\n if (confirm(question)) yes()\n else no();\n}\n*/!*\n\nfunction showOk() {\n alert( \"You agreed.\" );\n}\n\nfunction showCancel() {\n alert( \"You canceled the execution.\" );\n}\n\n// usage: functions showOk, showCancel are passed as arguments to ask\nask(\"Do you agree?\", showOk, showCancel);\n```\n\nPada praktiknya, fungsi macam ini agak berguna. Perbedaan besar antara `ask` kehidupan-nyata dan contoh di atas adalah fungsi kehidupan-nyata memakai cara komplex untuk berinteraksi dengan pengguna daripada sekedar `confirm`. Di peramban, fungsi macam ini biasanya menarik window pertanyaan menarik. Tapi itu cerita lain lagi.\n\n**Argumen `showOk` dan `showCancel` dari `ask` dipanggil *fungsi callback* atau hanya *callback*.**\n\nIdenya adalah kita mengoper fungsi dan berharap ia \"dipanggil kembali\" kemudian jika dibutuhkan. Pada kasus kita, `showOk` menjadi callback untuk jawaban \"yes\", dan `showCancel` untuk jawaban \"no\".\n\nKita bisa memakai Expresi Fungsi untuk menulis fungsi yang sama lebih pendek:\n\n```js run no-beautify\nfunction ask(question, yes, no) {\n if (confirm(question)) yes()\n else no();\n}\n\n*!*\nask(\n \"Do you agree?\",\n function() { alert(\"You agreed.\"); },\n function() { alert(\"You canceled the execution.\"); }\n);\n*/!*\n```\n\nDi sini, fungsi dideklarasi tepat di dalam panggilan `ask(...)`. Mereka tak punya nama, jadinya disebut *anonymous*. Fungsi macam ini tak bisa diakses di luar `ask` (karena mereka tak diset ke variabel), tapi itulah yang kita mau di sini.\n\nKode macam ini muncul di script kita secara sangat alamiah, ia ada di dalam semangat JavaScript.\n\n```smart header=\"Fungsi adalah nilai yang mewakili \\\"aksi\\\"\"\nNilai reguler seperti string atau angka mewakiliki *data*.\n\nFungsi bisa dianggap sebagai *aksi*.\n\nKita bisa mengopernya antara variabel dan menjalankannya kapanpun kita mau.\n```\n\n\n## Expresi Fungsi vs Deklarasi Fungsi\n\nMari kita rumuskan kunci perbedaan antara Deklarasi dan Expresi Fungsi.\n\nPertama, syntax: bagaimana membedakan antara mereka dalam kode.\n\n- *Deklarasi Fungsi:* fungsi, yang dideklarasi sebagai pernyataan terpisah, dalam aliran kode utama.\n\n ```js\n // Deklarasi Fungsi\n function sum(a, b) {\n return a + b;\n }\n ```\n- *Expresi Fungsi:* fungsi, yang dibuat dalam expresi atau dalam konstruksi syntax lain. Di sini, fungsi dibuat pada sisi kanan dari \"expresi penetapan\" `=`:\n\n ```js\n // Expresi Fungsi\n let sum = function(a, b) {\n return a + b;\n };\n ```\n\nPerbedaan yang lebih halus ialah *ketika* fungsi dibuat oleh JavaScript engine.\n\n**Expresi Fungsi dibuat ketika exekusi mencapainya dan hanya dapat dipakai saat itu saja.**\n\nSekali aliran exekusi melewati sisi kanan penetapan `let sum = function…` -- di sinilah, fungsi dibuat dan bisa digunakan (diset, dipanggil, dll. ) dari sekarang.\n\nDeklarasi Fungsi berbeda.\n\n**Deklarasi Fungsi bisa dipanggil lebih cepat dari ia didefinisi.**\n\nMisalnya, Deklarasi Fungsi global terlihat di seluruh script, tak peduli di mana ia berada.\n\nItu karena algoritma internal. Saat JavaScript siap menjalankan script, pertama ia melihat Deklarasi Fungsi global di dalam dan membuat fungsi. Kita bisa anggap itu sebagai \"tahap inisialisasi\".\n\nDan setelah semua Deklarasi Fungsi diproses, kodenya diexekusi. Jadi ia punya akses ke fungsi-fungsi ini.\n\nMisalnya, ini berjalan:\n\n```js run refresh untrusted\n*!*\nsayHi(\"John\"); // Hello, John\n*/!*\n\nfunction sayHi(name) {\n alert( `Hello, ${name}` );\n}\n```\n\nDeklarasi Fungsi `sayHi` dibuat saat JavaScript siap memulai scriptnya dan terlihat di manapun di dalam.\n\n...Jika ia Expresi Fungsi, maka ia tak akan berjalan:\n\n```js run refresh untrusted\n*!*\nsayHi(\"John\"); // galat!\n*/!*\n\nlet sayHi = function(name) { // (*) tak ada magic lagi\n alert( `Hello, ${name}` );\n};\n```\n\nExpresi Fungsi dibuat saat exekusi mencapainya. Itu hanya akan terjadi pada baris `(*)`. Sudah telat banget.\n\nFitur spesial lain dari Deklarasi Fungsi ialah scope blok mereka.\n\n**Di mode ketat, ketika Deklarasi Fungsi berada di jangkauan blok kode, ia terlihat di manapun di dalam blok. Tapi tidak di luarnya.**\n\nMisalnya, bayangkan kita harus mendeklarasi fungsi `welcome()` tergantung variabel `age` yang kita dapat saat runtime. Lalu kita berencana akan menggunakannya kemudian.\n\nJika kita memakai Deklarasi Fungsi, ia tak akan bekerja sesuai harapan:\n\n```js run\nlet age = prompt(\"What is your age?\", 18);\n\n// secara kondisional mendeklarasi fungsi\nif (age < 18) {\n\n function welcome() {\n alert(\"Hello!\");\n }\n\n} else {\n\n function welcome() {\n alert(\"Greetings!\");\n }\n\n}\n\n// ...pakai ini kemudian\n*!*\nwelcome(); // Error: welcome is not defined\n*/!*\n```\n\nItu karena Deklarasi Fungsi cuma terlihat di dalam blok kode yang ia tinggali.\n\nIni contoh lainnya:\n\n```js run\nlet age = 16; // ambil 16 sebagai contoh\n\nif (age < 18) {\n*!*\n welcome(); // \\ (berjalan)\n*/!*\n // |\n function welcome() { // | \n alert(\"Hello!\"); // | Deklarasi Fungsi tersedia\n } // | di manapun dalam blok kode tempat dia dideklarasi\n // |\n*!*\n welcome(); // / (berjalan)\n*/!*\n\n} else {\n\n function welcome() { \n alert(\"Greetings!\");\n }\n}\n\n// Di sini kita di luar kurung kurawal,\n// jadi kita tak bisa melihat Deklarasi Fungsi yang dibuat di dalamnya.\n\n*!*\nwelcome(); // Error: welcome is not defined\n*/!*\n```\n\nApa yang bisa kita lakukan supaya `welcome` terlihat di luar `if`?\n\nPendekatan yang benar ialah menggunakan Expresi Fungsi dan menetapkan `welcome` ke variabel yang dideklarasi di luar `if` dan punya visibilitas yang cukup.\n\nKode ini berjalan sesuai harapan:\n\n```js run\nlet age = prompt(\"What is your age?\", 18);\n\nlet welcome;\n\nif (age < 18) {\n\n welcome = function() {\n alert(\"Hello!\");\n };\n\n} else {\n\n welcome = function() {\n alert(\"Greetings!\");\n };\n\n}\n\n*!*\nwelcome(); // sekarang ok\n*/!*\n```\n\nAtau kita bisa menyederhanakannya lebih lanjut menggunakan operator tanda tanya `?`:\n\n```js run\nlet age = prompt(\"What is your age?\", 18);\n\nlet welcome = (age < 18) ?\n function() { alert(\"Hello!\"); } :\n function() { alert(\"Greetings!\"); };\n\n*!*\nwelcome(); // sekarang ok\n*/!*\n```\n\n\n```smart header=\"Kapan harus memilih Deklarasi Fungsi versus Expresi Fungsi?\"\nSebagai aturan praktis, saat kita harus mendeklarasi fungsi, hal pertama yang kita pertimbangkan ialah syntax Deklarasi Fungsi. Ia memberi kebebasan lebih dalam bagaimana mengorganisir kode kita, karena kita bisa memanggil fungsi macam ini sebelum mereka dideklarasi.\n\nItu juga untuk keterbacaan yang lebih baik, karena lebih mudah melihat `function f(…) {…}` dalam kode ketimbang `let f = function(…) {…}`. Deklarasi Fungsi lebih \"eye-catching\".\n\n...Tapi jika Deklarasi Fungsi tak cocok untuk beberapa alasan, atau kita butuh deklarasi kondisional (kita sudah lihat contohnya), maka Expresi Fungsi sebaiknya digunakan.\n```\n\n## Kesimpulan\n\n- Fungsi adalah nilai. Mereka bisa diset, dikopi atau dideklarasi di kode manapun.\n- Jika fungsi dideklarasi sebagai pernyataan terpisah di aliran kode utama, ia disebut \"Deklarasi Fungsi\".\n- Jika fungsi dibuat sebagai bagian expresi, ia disebut \"Expresi Fungsi\".\n- Deklarasi Fungsi diproses sebelum blok kode diexekusi. Mereka terlihat di manapun dalam blok.\n- Expresi Fungsi dibuat saat aliran exekusi mencapai mereka.\n\nDi banyak kasus saat kita harus mendeklarasi fungsi, Deklarasi Fungsi disenangi, karena ia terlihat sebelum deklarasi itu sendiri. Itu memberi kita flexibilitas lebih dalam organisasi kode, dan biasa lebih mudah terbaca.\n\nJadi sebaiknya kita gunakan Expresi Fungsi hanya saat Deklarasi Fungsi tak cocok digunakan. Kita sudah melihat beberapa contoh itu di bab ini, dan kita akan melihat lebih banyak lagi nanti.\n" }, { "path": "1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md", "content": "\n```js run\nfunction ask(question, yes, no) {\n if (confirm(question)) yes();\n else no();\n}\n\nask(\n \"Do you agree?\",\n*!*\n () => alert(\"You agreed.\"),\n () => alert(\"You canceled the execution.\")\n*/!*\n);\n```\n\nTerlihat pendek dan bersih, kan?\n" }, { "path": "1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md", "content": "\n# Rewrite with arrow functions\n\nGanti Expresi Fungsi dengan fungsi panah dalam kode berikut:\n\n```js run\nfunction ask(question, yes, no) {\n if (confirm(question)) yes();\n else no();\n}\n\nask(\n \"Do you agree?\",\n function() { alert(\"You agreed.\"); },\n function() { alert(\"You canceled the execution.\"); }\n);\n```\n" }, { "path": "1-js/02-first-steps/17-arrow-functions-basics/article.md", "content": "# Dasar-dasar fungsi Arrow\n\nTerdapat sintaks lain yang sangat sederhana dan ringkas untuk membuat fungsi-fungsi, bahkan sering kali lebih baik ketimbang fungsi-fungsi *Expression*.\n\nDisebut sebagai \"fungsi *arrow* (panah)\", karena sintaks fungsinya terlihat seperti ini:\n\n```js\nlet func = (arg1, arg2, ..., argN) => expression\n```\n\n...Ini membuat sebuah fungsi `func` yang menerima argumen `arg1..argN`, kemudian mengevaluasi `expression` yang ada di sisi kanan serta kegunaannya dan mengembalikan hasilnya.\n\nDalam kata lain, fungsi tersebut adalah versi yang lebih pendek dari:\n\n```js\nlet func = function(arg1, arg2, ..., argN) {\n return expression;\n};\n```\n\nMari kita lihat contoh konkritnya:\n\n```js run\nlet sum = (a, b) => a + b;\n\n/* Fungsi arrow ini adalah bentuk yang lebih pendek dari:\n\nlet sum = function(a, b) {\n return a + b;\n};\n*/\n\nalert( sum(1, 2) ); // 3\n```\n\nSeperti yang bisa dilihat, perhatikan `(a, b) => a + b` berarti sebuah fungsi yang menerima dua argumen yang diberinama `a` dan `b`. Ketika eksekusi, fungsi tersebut mengevaluasi ekpresi `a + b` dan mengembalikan hasilnya.\n\n- Jika kita memiliki satu argumen saja, maka *parentheses* di sekitar parameter bisa diabaikan, membuat sintaksnya jadi semakin pendek.\n\n Sebagai contoh:\n\n ```js run\n *!*\n let double = n => n * 2;\n // secara kasar sama dengan: let double = function(n) { return n * 2 }\n */!*\n\n alert( double(3) ); // 6\n ```\n\n- Jika tidak ada argumen, *parentheses* akan kosong(tapi harus ditunjukkan):\n\n ```js run\n let sayHi = () => alert(\"Hello!\");\n\n sayHi();\n ```\n\nFungsi-fungsi *arrow* dapat digunakan dengan cara yang sama dengan fungsi ekpresi (*expression*).\n\nUntuk membuat sebuah fungsi secara dinamis contohnya:\n\n```js run\nlet age = prompt(\"What is your age?\", 18);\n\nlet welcome = (age < 18) ?\n () => alert('Hello') :\n () => alert(\"Greetings!\");\n\nwelcome();\n```\n\nFungsi-fungsi *arrow* bisa terlihat tidak familiar dan sulit dibaca pada awalnya, namun hal tersebut bisa cepat berubah seiring dengan mata (kita) yang terbiasa dengan struktur tersebut.\n\nFungsi *arrow* sangat memudahkan untuk sintaks-sintaks sederhana, saat kita terlalu malas untuk menulis banyak kata.\n\n## Fungsi *arrow* multi-baris\n\nContoh-contoh di atas mengambil argumen dari sisi kiri dari `=>` dan mengevaluasi ekpresi di sisi kanan.\n\nTerkadang kita memerlukan sesuatu yang agak sedikit rumit, seperti ekspresi atau pernyataan (*statement*) multi-baris (berbaris-baris). Hal tidaklah tidak mungkin, tapi kita harus menutup ekspresi atau pernyataan tersebut dengan tanda kurung kurawal. Kemudian menggunakan sebuah `return` normal diantaranya.\n\nSeperti ini:\n\n```js run\nlet sum = (a, b) => { // tanda kurung kurawal membuka fungsi multi-baris\n let result = a + b;\n*!*\n return result; // jika kita menggunakan kurung kurawal, selajutnya kita perlu menuliskan \"return\" \n*/!*\n};\n\nalert( sum(1, 2) ); // 3\n```\n\n```smart header=\"More to come\"\nKini kita memuji fungsi arrow karena keringkasannya. Namun tidak hanya itu!\n\nFungsi arrow memiliki fitur-fitur menarik lainnya.\n\nUntuk mempelajarinya lebih mendalam, pertama-tama kita perlu untuk mengetahui aspek-aspek lain dari JavaScript, jadi kita akan kembali (mempelajari) fungsi arrow di bab selanjutnya .\n\nUntuk sekarang, kita sudah bisa menggunakan fungsi arrow untuk sintaks-sintaks sebaris dan callback.\n```\n\n## Ringkasan\n\nFungsi-fungsi *arrow* itu memudahkan untuk sintaks-sintaks yang hanya sebaris. Fungsi *arrow* juga hadir dengan dua cara:\n\n1. Tanpa tanda kurung kurawal: `(...args) => expression` -- sisi kanan adalah sebuah ekspresi: fungsi tersebut mengevaluasi ekspresi dan mengembalikan hasilnya.\n2. Dengan tanda kurung kurawal: `(...args) => { body }` -- tanda kurung kurawal membuat kita bisa menuliskan pernyataan-pernyataan berbaris-baris/multi-baris dalam fungsi tersebut, tapi kita perlu untuk menulsikan `return` untuk mengembalikan (hasil) sesuatu.\n" }, { "path": "1-js/02-first-steps/18-javascript-specials/article.md", "content": "# Spesial JavaScript\n\nBab ini secara singkat merekap fitur JavaScript yang sudah kita pelajari sekarang, membayar perhatian khusus ke momen-momen halus.\n\n## Struktur kode\n\nPernyataan didelimisi dengan semicolon:\n\n```js run no-beautify\nalert('Hello'); alert('World');\n```\n\nBiasanya, line-break juga diperlakukan sebagai delimiter, jadi itu juga akan bekerja:\n\n```js run no-beautify\nalert('Hello')\nalert('World')\n```\n\nItu disebut \"penyisipan semicolon otomatis\". Kadang ia tidak bekerja, misalnya:\n\n```js run\nalert(\"There will be an error after this message\")\n\n[1, 2].forEach(alert)\n```\n\nKebanyakan panduan codestyle setuju bahwa kita sebaiknya menaruh semicolon di tiap akhir pernyataan.\n\nSemicolon tak dibutuhkan setelah blok kode `{...}` dan konstruksi syntax dengan mereka yang seperti loop:\n\n```js\nfunction f() {\n // semicolon tak dibutuhkan setelah deklarasi fungsi\n}\n\nfor(;;) {\n // semicolon tak dibutuhkan setelah loop\n}\n```\n\n...Tapi meskipun kita taruh semicolon \"extra\" di suatu tempat, itu bukan galat. Ia akan diabaikan.\n\nLebih lanjut di: .\n\n## Mode ketat\n\nUntuk mengaktifkan penuh semua fitur modern JavaScript, kita sebaiknya mulai script dengan `\"use strict\"`.\n\n```js\n'use strict';\n\n...\n```\n\nDirective ini harus ada di paling atas script atau di awal badan fungsi.\n\nTanpa `\"use strict\"`, apapun akan bekerja, tapi beberapa fitur bersikap dengan cara kuno, \"kompatibel\". Secara umum kita akan pilih sikap modern.\n\nBeberapa fitur modern bahasa ini (seperti kelas yang akan kita pelajari di kemudian) mengaktifkan mode ketat secara implisit.\n\nLebih lanjut di: .\n\n## Variabel\n\nBisa dideklarasi menggunakan:\n\n- `let`\n- `const` (konstan, tak bisa berubah)\n- `var` (kuno, akan lihat kemudian)\n\nNama variabel bisa mengandung:\n- Huruf dan digit, tapi karakter pertama bisa tak boleh digit.\n- Karakter `$` dan `_` itu normal, setara dengan huruf.\n- Alfabet non-latin dan hieroglyph juga boleh, tapi jarang dipakai.\n\nVariabel adalah tipe dinamis. Mereka bisa menyimpan nilai apapun:\n\n```js\nlet x = 5;\nx = \"John\";\n```\n\nTerdapat 8 tipe data:\n\n- `number` untuk floating-point(bilangan pecahan) dan integer,\n- `bigint` untuk integer yang sangat panjang,\n- `string` untuk string,\n- `boolean` untuk nilai logik: `true/false`,\n- `null` tipe data dengan nilai tunggal `null`, yang sama dengan \"empty/kosong\" atau \"does not exist/tidak ada nilai\",\n- `undefined` -- tipe data dengan nilai tunggal `undefined`, yang sama dengan \"not assigned/belum didefinisikan\",\n- `object` dan `symbol` -- untuk struktur data yang kompleks dan identifier unik, sampai saat ini kita belum belajar ini.\n\nOperator `typeof` mengembalikan tipe untuk satu nilai, dengan dua pengecualian:\n```js\ntypeof null == \"object\" // galat di bahasa\ntypeof function(){} == \"function\" // fungsi diperlakukan spesial\n```\n\nLebih lanjut di: and .\n\n## Interaksi\n\nKita menggunakan peramban sebagai lingkungan kerja, jadi fungsi UI dasar akan menjadi:\n\n[`prompt(question, [default])`](mdn:api/Window/prompt)\n: Menanyakan `question`, dan mengembalikan apa yang pengunjung isikan atau `null` jika mereka mengklik \"cancel\".\n\n[`confirm(question)`](mdn:api/Window/confirm)\n: Menanyakan `question` dan menyarakan memilih antara Ok dan Cancel. Pilihannya dikembalikan sebagai `true/false`.\n\n[`alert(message)`](mdn:api/Window/alert)\n: Menampilkan a `message`.\n\nSemua fungsi ini adalah *modal*, mereka menyela exekusi kode dan mencegah pengunjung dari berinteraksi dengan laman hingga mereka menjawab.\n\nMisalnya:\n\n```js run\nlet userName = prompt(\"Your name?\", \"Alice\");\nlet isTeaWanted = confirm(\"Do you want some tea?\");\n\nalert( \"Visitor: \" + userName ); // Alice\nalert( \"Tea wanted: \" + isTeaWanted ); // true\n```\n\nLebih lanjut di: .\n\n## Operator\n\nJavaScript mendukung operator berikut:\n\nArithmatika\n: Regular: `* + - /`, juga `%` untuk remainder dan `**` untuk pangkat bilangan.\n\n Operator biner plus `+` menggabungkan string. Dan juka ada operan yang string, maka yang lainnya akan diubah menjadi string juga:\n\n ```js run\n alert( '1' + 2 ); // '12', string\n alert( 1 + '2' ); // '12', string\n ```\n\nPenetapan\n: Ada penetapan simpel: `a = b` dan penetapan kombinasi seperti `a *= 2`.\n\nBitwise\n: Operator bitwise bekerja dengan integer 32-bit di bit-level paling kecil: lihat [docs](mdn:/JavaScript/Reference/Operators/Bitwise_Operators) ketika mereka dibutuhkan.\n\nKondisional\n: Satu-satunya operator dengan tiga parameter: `cond ? resultA : resultB`. Jika `cond` truthy, mengembalikan `resultA`, jika tidak `resultB`.\n\nOperator logika\n: Logika AND `&&` dan OR `||` menyajikan evaluasi sirkuit-pendek dan mengembalikan nilai di mana ia berhenti. Logika NOT `!` mengkonversi operand ke tipe boolean dan mengembalikan nilai kebalikannya.\n\nNullish coalescing operator/Operator penggabung nullish\n: Operator `??` menyediakan cara untuk memilih nilai yang terdefinisikan dari sebuah daftar variabel. Hasil dari `a ?? b` adalah a kecuali jika nilainya `null/undefined`, lalu `b`.\n\nPerbandingan\n: Persamaan nilai `==` dari type yang berbeda akan mengubahnya menjadi angka (kecuali `null` dan `undefined` yang sama dengan nilai itu sendiri), jadi contoh dibawah adalah sama: \n\n ```js run\n alert( 0 == false ); // true\n alert( 0 == '' ); // true\n ```\n\n Pembandingan lainnya tentu saja mengubah nilainya menjadi angka.\n\n Operator pembanding `===` tidak melakukan perubahan tipe: untuk operator pembanding ini, berbeda tipe sama dengan berbeda nilai.\n\n Nilai `null` dan `undefined` adalah spesial: mereka sama `==` satu sama lainnya dan tidak sama dengan nilai lain manapun.\n\n Pembanding lebih/kurang dari membandingkan string karakter-demi-karakter, tipe lain akan diubah menjadi angka.\n\nOperator lainnya\n: Ada beberapa operator lainnya, seperti operator koma.\n\nLebih lanjut di: , , , .\n\n## Loop\n\n- Kita meliput 3 tipe loop:\n\n ```js\n // 1\n while (condition) {\n ...\n }\n\n // 2\n do {\n ...\n } while (condition);\n\n // 3\n for(let i = 0; i < 10; i++) {\n ...\n }\n ```\n\n- Variabel yang dideklarasi di loop `for(let...)` terlihat cuma di dalam loop. Tapi kita juga bisa membuang `let` dan memakai kembali variabel yang sudah eksis.\n- Directive `break/continue` membolehkan untuk keluar iterasi loop/current. Guakan label untuk menghancurkan loop bersarang.\n\nDetil di: .\n\nNanti kita akan pelajari tipe loop lainnya untuk berhadapan dengan object.\n\n## Konstruksi \"switch\"\n\nKonstruksi \"switch\" bisa mengganti pengecekan ganda `if`. Ia memakai `===` (ekualitas ketat) untuk pembandingan.\n\nMisalnya:\n\n```js run\nlet age = prompt('Your age?', 18);\n\nswitch (age) {\n case 18:\n alert(\"Won't work\"); // hasil dari prompt adalah string, bukan angka\n break;\n\n case \"18\":\n alert(\"This works!\");\n break;\n\n default:\n alert(\"Any value not equal to one above\");\n}\n```\n\nDetal di: .\n\n## Fungsi\n\nKita meliput tiga cara membuat fungsi di JavaScript:\n\n1. Deklarasi Fungsi: fungsi di aliran kode utama\n\n ```js\n function sum(a, b) {\n let result = a + b;\n\n return result;\n }\n ```\n\n2. Expresi Fungsi: fungsi di dalam kontex expresi\n\n ```js\n let sum = function(a, b) {\n let result = a + b;\n\n return result;\n };\n ```\n\n3. Fungsi panah:\n\n ```js\n // expresi di sisi kanan\n let sum = (a, b) => a + b;\n\n // atau syntax baris-ganda dengan { ... }, butuh kembalian di sini:\n let sum = (a, b) => {\n // ...\n return a + b;\n }\n\n // tanpa argumen\n let sayHi = () => alert(\"Hello\");\n\n // dengan argumen tunggal\n let double = n => n * 2;\n ```\n\n\n- Fungsi bisa punya variabel lokal: mereka yang dideklarasi dalam badannya. Variabel macam itu cuma terlihat di dalam fungsi.\n- Parameter bisa punya nilai default: `function sum(a = 1, b = 2) {...}`.\n- Fungsi selalu mengembalikan sesuatu. Jika tak ada pernyataan `return`, maka kembaliannya `undefined`.\n\nDetil: lihat , .\n\n## Lebih banyak yang akan datang\n\nIni daftar ringkas fitur JavaScript. Untuk sekarang kita belajar hanya dasar. Kemudian di tutorial nanti kamu akan menemui fitur JavaScript yang lebih canggih dan spesial.\n" }, { "path": "1-js/02-first-steps/index.md", "content": "# JavaScript Dasar\n\nMari kita belajar dasar-dasar pembuatan skrip." }, { "path": "1-js/03-code-quality/01-debugging-chrome/article.md", "content": "# Mendebug di Chrome\n\nSebelum menulis kode lebih komplex, ayo kita bahas tentang mendebug.\n\n[Mendebug](https://en.wikipedia.org/wiki/Debugging) ialah proses mencari dan membetulkan galat di dalam script. Semua peramban modern dan kebanyakan lingkungan lain mendukung debugging tools -- UI spesial di developer tools yang membuat debugging jauh lebih mudah. Ia juga membolehkan menjejak kode pelan-pelan untuk melihat apa yang sebenarnya terjadi.\n\nKita akan menggunakan Chrome di sini, karena ia punya cukup fitur, kebanyakan peramban lain punya proses serupa`.\n\n## Panel \"Sources\"\n\nVersi Chrome kamu mungkin terlihat berbeda, tapi tetap kelihatan jelas bedanya.\n\n- Buka [laman contoh](debugging/index.html) di Chrome.\n- Nyalakan developer tools dengan `key:F12` (Mac: `key:Cmd+Opt+I`).\n- Pilih panel `Sources`.\n\nInilah apa yang mesti kamu lihat jika kamu baru melakukannya pertama kali:\n\n![](chrome-open-sources.svg)\n\nTombol toggler membuka tab dengan file.\n\nKlik itu dan pilih `hello.js` di tree view. Inilah yang mestinya muncul:\n\n![](chrome-tabs.svg)\n\nPanel Sources punya 3 bagian:\n\n1. Pane **File Navigator** melist HTML, JavaScript, CSS, dan file lainnya, termasuk image yang dilampirkan ke laman. Extensi Chrome bisa muncul juga di sini.\n2. Pane **Editor Kode** menampilkan kode sumber.\n3. Pane **Javascript Debugging** untuk debugging, kita akan mengexplorasi itu segera.\n\nSekarang kamu bisa mengklik toggler yang sama lagi untuk menyembunyikan daftar sumber daya dan memberi spasi ke kode.\n\n## Konsol\n\nJika kita menekan `key:Esc`, maka konsol terbuka di bawah. Kita bisa mengetik command di sana dan menekan `key:Enter` untuk exekusi.\n\nSetelah pernyataan diexekusi, hasilnya ditampilkan di bawah.\n\nMisalnya, `1+2` menghasilkan `3`, dan `hello(\"debugger\")` tak mengembalikan apa-apa, jadi hasilnya `undefined`:\n\n![](chrome-sources-console.svg)\n\n## Breakpoint\n\nMari periksa apa yang terjadi di dalam kode [laman contoh](debugging/index.html). Di `hello.js`, klik nomor baris `4`. Ya, tepat di digit `4`, bukan di kode.\n\nSelamat! Kamu mengeset breakpoint. Silakan klik juga angka untuk baris `8`.\n\nRupanya mesti seperti ini (biru adalah tempat di mana kamu klik):\n\n![](chrome-sources-breakpoint.svg)\n\n*Breakpoint* ialah poin kode di mana debugger akan otomatis menjeda exekusi JavaScript.\n\nKetika kode dijeda, kita bisa periksa variabel kini, mengexekusi command di konsol dsb. Dengan kata lain, kita bisa mendebug itu.\n\nKita selalu bisa menemukan daftar breakpoint di panel kanan. Ini berguna ketika kita punya banyak breakpoint di berbagai file. Ia membolehkan kita untuk:\n- Lompak cepat ke breakpoint di kode (dengan mengklik itu di panel kanan).\n- Mematikan sementara breakpoint dengan meng-uncheck itu.\n- Buang breakpoint dengan mengklik-kanan dan memilik Remove.\n- ...Dan banyak lagi.\n\n```smart header=\"Breakpoint kondisional\"\n*Klik kanan* di nomor baris bisa membuat breakpoint *kondisional*. Ia hanya terpicu saat expresi yang diberikan truthy.\n\nIni praktis saat kita harus berhenti cuma untuk nilai variabel tertentu atau untuk parameter fungsi tertentu.\n```\n\n## Command debugger\n\nKita juga bisa menjeda kode menggunakan command `debugger` di dalamnya, seperti ini:\n\n```js\nfunction hello(name) {\n let phrase = `Hello, ${name}!`;\n\n*!*\n debugger; // <-- debugger berhenti di sini\n*/!*\n\n say(phrase);\n}\n```\n\nIni sangat nyaman saat kita di dalam editor kode dan tak ingin berubah ke peramban dan mencari script di developer tools untuk mengeset breakpoint.\n\n\n## Jeda dan lihat sekitar\n\nDi contoh kita, `hello()` dipanggil selama page load, jadi cara termudah untuk mengaktivasi debugger (setelah kita set breakpoint) ialah memuat-ulang laman. Jadi mari tekan `key:F5` (Windows, Linux) atau `key:Cmd+R` (Mac).\n\nKetika breakpoint diset, exekusi terjeda di baris ke-4:\n\n![](chrome-sources-debugger-pause.svg)\n\nSilakan buka dropdown informasional ke kanan (dilabeli panah). Mereka membolehkan kamu memeriksa code state sekarang:\n\n1. **`Watch` -- menampilkan nilai sekarang untuk expresi apapun.**\n\n Kamu bisa mengklik `+` dan menginput expresi. Debugger akan menampilkan nilainya kapan saja, otomatis merekalkulasi itu di proses exekusi.\n\n2. **`Call Stack` -- menampilkan rantai panggilan bersarang.**\n\n Di momen sekarang debugger berada di dalam panggilan `hello()`, dipanggil script di `index.html` (tak ada fungsi di sana, jadi ia disebut \"anonymous\").\n\n If you click on a stack item (e.g. \"anonymous\"), the debugger jumps to the corresponding code, and all its variables can be examined as well.\n3. **`Scope` -- current variables.**\n\n `Local` menampilkan variabel fungsi lokal. Kita juga bisa melihat nilai mereka yang dihighlight tepat di sebelah kanan kode.\n\n `Global` has global variables (out of any functions).\n\n Ada juta katakunci `this` di sana yang tidak kita pelajari sekarang, tapi nanti kemudian.\n\n## Menjejak exekusi\n\nSekarang waktunya *menjejak* script.\n\nAda tombol untuk itu di ujung atas panel kanan. Ayo kita ikuti mereka.\n\n -- melanjutkan exekusi, hotkey `key:F8`.\n: Melanjutkan exekusi. Jika tak ada breakpoint tambahan, maka exekusi berlanjut dan debugger hilang kontrol.\n\n Inilah apa yang bisa kita lihat setelah satu klik ke dia:\n\n ![](chrome-sources-debugger-trace-1.svg)\n\n Exekusi dilanjutkan, mencapai breakpoint lain di dalam `say()` dan terjeda di sana. Perhatikan \"Call Stack\" di kanan. Ia meningkat satu panggilan lagi. Kita di dalam `say()` sekarang.\n\n -- \"Langkahi\": jalankan command berikutnya, hotkey `key:F9`.\n: Jalankan pernyataan berikutnya. Jika kita klik itu sekarang, `alert` akan muncul.\n\n Mengklik ini akan melangkahi semua aksi script satu-satu.\n\n -- \"Langkahi atas\": jalankan command berikutnya, tapi *jangan masuk ke fungsi*, hotkey `key:F10`.\n: Serupa dengan command \"Step\" sebelumnya, tapi berbeda jika pernyataan berikutnya berupa panggilan fungsi. Yaitu: bukan built-in, seperti `alert`, tapi fungsi kita sendiri.\n\n Command \"Langkahi\" masuk ke dalam dan menjeda exekusi di baris pertama, sedangkan \"Kangkangi\" mengexekusi panggilan fungsi bersarang secara tak terlihat, mengabaikan internal fungsi.\n\n Exekusi kemudian segera dijeda setelah fungsi itu.\n\n Itu baik jika kita tak tertarik mencaritahu ada apa di dalam panggilan fungsi.\n\n -- \"Langkahi masuk\", hotkey `key:F11`.\n: Serupa dengan \"Langkahi\", tapi berbeda dalam hal panggilan fungsi asynchronous. Jika kamu baru mulai belajar JavaScript, maka kamu bisa abaikan perbedaan, karena kita tak punya panggilan asynchronous sekarang.\n\n Untuk masa depan, perhatikan bahwa command \"Langkahi\" mengabaikan aksi async, seperti `setTimeout` (panggilan fungsi terjadwal), itu diexekusi nanti. \"Langkahi masuk\" masuk ke dalam kode mereka, menunggu mereka jika perlu. Lihat [DevTools manual](https://developers.google.com/web/updates/2018/01/devtools#async) untuk detil lebih.\n\n -- \"Langkahi keluar\": lanjutkan exekusi hingga akhir fungsi sekarang, hotkey `key:Shift+F11`.\n: Lanjutkan exekusi dan berhenti di baris terakhir dari fungsi sekarang. Ini praktis saat kita tak sengaja masuk ke panggilan bersarang memakai , tapi itu tak menarik bagi kita, dan kita mau lanjut ke ujungnya sesegera mungkin.\n\n -- nyalakan/matikan semua breakpoint.\n: Tombol itu tidak menggerakkan exekusi. Cuma on/off massal untuk breakpoint.\n\n -- nyalakan/matikan jeda otomatis jika ada galat.\n: Ketika menyala, dan developer tools terbuka, galat script otomatis menjeda exekusi. Lalu kita bisa menganalisa variabel untuk melihat apa yang salah. Jadi jika script kita mati karena galat, kita bisa buka debugger, menyalakan opsi ini dan memuat-ulang laman untuk melihat di mana ia mati dan apa kontexnya saat itu.\n\n```smart header=\"Lanjut ke sini\"\nKlilk kanan di satu baris kode membuka context menu dengan opsi hebat yang disebut \"Lanjut ke sini\".\n\nIni praktis saat kita mau pindah beberpaa langkah maju ke baris itu, tapi kita terlalu malas mengeset breakpoint.\n```\n\n## Logging\n\nUntuk mengoutput sesuatu ke konsol dari kode kita, ada fungsi `console.log`.\n\nMisalnya, ini mengoutput nilai dari `0` ke `4` ke konsol:\n\n```js run\n// buka konsol untuk melihat\nfor (let i = 0; i < 5; i++) {\n console.log(\"value,\", i);\n}\n```\n\nPengguna reguler tak melihat output itu, itu di dalam konsol. Untuk melihat itu, buka panel Console developer tool atau tekan `key:Esc` ketika di panel lain: yang membukakan konsol di bawah.\n\nJika kita punya cukup logging di kode kita, maka kita bisa melihat apa yang terjadi dari record, tanpa debugger.\n\n## Kesimpulan\n\nSeperti yang kita lihat, ada tiga cara utama untuk menjeda script:\n1. Breakpoint.\n2. Pernyataan `debugger`.\n3. Galat (jika dev tools terbuka dan tombol \"menyala\").\n\nKetika terjeda, kita bisa mendebug - periksa variabel dan menjejak kode untuk melihat di mana terjadi kesalahan exekusi.\n\nAda banyak lebih opsi di developer tool dari yang diliput di sini. Manual lengkap ada di .\n\nInformasi dari bab ini cukup untuk memulai debugging, tapi nanti, terutama jika kamu melakukan banyak hal-hal berkaitan dengan peramban, silakan masuk ke sana dan mencari kemampuan canggih lainnya dari developer tool.\n\nOh, dan juga kamu bisa mengklik di berbagai tempat dev tools dan cuma melihat apa yang muncul. Itu mungkin rute tercepat untuk mempelajari dev tools. Jangan lupa tentang klik kanan dan context menu!\n" }, { "path": "1-js/03-code-quality/01-debugging-chrome/debugging.view/hello.js", "content": "function hello(name) {\n let phrase = `Hello, ${name}!`;\n\n say(phrase);\n}\n\nfunction say(phrase) {\n alert(`** ${phrase} **`);\n}\n" }, { "path": "1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html", "content": "\n\n\n\n \n\n Contoh debugging.\n\n \n\n\n\n" }, { "path": "1-js/03-code-quality/01-debugging-chrome/head.html", "content": "\n" }, { "path": "1-js/03-code-quality/02-coding-style/1-style-errors/solution.md", "content": "\nKamu bisa perhatikan berikut:\n\n```js no-beautify\nfunction pow(x,n) // <- tak ada spasi diantara arguments\n{ // <- menemukan bracket di baris terpisah\n let result=1; // <- tak ada spasi sebelum atau setelah =\n for(let i=0;i\n\nSekarang kita bahas aturannya dan alasannya secara detil.\n\n```warn header=\"Tak ada aturan yang memaksa\"\nTak ada yang diset sekeras batu di sini. Mereka cuma preferensi gaya saja, buka dogma agama.\n```\n\n### Kurung Kurawal\n\nDi kebanyakan proyek JavaScript kurung kurawal ditulis dalam gaya \"Egyptian\" dengan kurawal buka di baris yang sama dengan katakunci -- bukan di baris baru. Juga harus ada spasi sebelum bracket pembuka, seperti ini:\n\n```js\nif (condition) {\n // lakukan ini\n // ...dan itu\n // ...dan itu\n}\n```\n\nKonstruksi sebaris, seperti `if (condition) doSomething()`, ialah hal penting sampingan. Haruskah kita memakai kurawal sama sekali?\n\nIni adalah varian yang teranotasi jadi kamu bisa menilai sendiri keterbacaan mereka:\n\n1. 😠 Pemula kadang melakukan itu. Buruk! Kurung kurawal tak dibutuhkan:\n ```js\n if (n < 0) *!*{*/!*alert(`Power ${n} is not supported`);*!*}*/!*\n ```\n2. 😠 Pisahkan baris berbeda tanpa kurawal. Jangan pernah lakukan, mudah membuat galat saat menambah baris baru:\n ```js\n if (n < 0)\n alert(`Power ${n} is not supported`);\n ```\n3. 😏 Sebaris tanpa kurawal - bisa diterima, jika pendek:\n ```js\n if (n < 0) alert(`Power ${n} is not supported`);\n ```\n4. 😃 Varian terbaik:\n ```js\n if (n < 0) {\n alert(`Power ${n} is not supported`);\n }\n ```\n\nUntuk kode ringkas, sebaris dibolehkan, misal `if (cond) return null`. Tapi blok kode (varian terakhir) biasanya lebih dapat terbaca.\n\n### Panjang Baris\n\nTak ada orang suka membaca kode horizontal yang panjang. Memisahkan mereka ialah praktik yang baik.\n\nMisalnya:\n```js\n// backtick quote ` memperbolehkan memecah string jadi beberapa baris\nlet str = `\n ECMA International's TC39 is a group of JavaScript developers,\n implementers, academics, and more, collaborating with the community\n to maintain and evolve the definition of JavaScript.\n`;\n```\n\nDan, untuk pernyataan `if`:\n\n```js\nif (\n id === 123 &&\n moonPhase === 'Waning Gibbous' &&\n zodiacSign === 'Libra'\n) {\n letTheSorceryBegin();\n}\n```\n\nPanjang baris maximum sebaiknya disepakati di level-tim. Biasanya 80 atau 120 karakter.\n\n### Indent\n\nAda dua tipe indent:\n\n- **Indent horizontal: 2 atau 4 spasi.**\n\n Indentasi horizontal dibuat menggunakan 2 atau 4 spasi atau simbol tab horizontal (kunci `key:Tab`). Pemilihan ini sudah lama jadi perang suci. Spasi jadi lebih umum sekarang ini.\n\n Satu keutamaan spasi dari tab ialah konfigurasi indent spasi lebih flexibel dari simbol tab.\n\n Misalnya, kita bisa mengalinea argumen dengan bracket pembuka, seperti ini:\n\n ```js no-beautify\n show(parameters,\n aligned, // 5 padding spasi di kiri\n one,\n after,\n another\n ) {\n // ...\n }\n ```\n\n- **Indent vertikal: baris kosong untuk memecah kode menjadi blok logika.**\n\n Bahkan satu fungsi pun sering bisa dibagi jadi blok logika. Di contoh berikut, inisialisasi variabel, loop utama dan hasil kembalian dipecah secara vertikal:\n\n ```js\n function pow(x, n) {\n let result = 1;\n // <--\n for (let i = 0; i < n; i++) {\n result *= x;\n }\n // <--\n return result;\n }\n ```\n\n Sisipkan extra baris baru di mana ini membantu membuat kode lebih terbaca. Tak boleh lebih dari sembilan baris kode tanpa indentasi vertikal.\n\n### Semicolon\n\nSemicolon sebaiknya ada di tiap ujung pernyataan, bahkan meski jika itu bisa dilewati.\n\nAda bahasa di mana semicolon benar-benar opsional dan jarang dipakai. Tapi di JavaScript, ada kasus di mana line break tidak diinterpretasi sebagai semicolon, membuat kode rentan galat. Lihat lebih lanjut tentang itu di bab .\n\nJika kamu programmer JavaScript berpengalaman, kamu bisa pilih gaya kode tanpa semicolon seperti [StandardJS](https://standardjs.com/). Atau, lebih baik memakai semicolon untuk menghindari kemungkinan jurang nista. Mayoritas pengembang menaruh semicolon.\n\n### Level Bersarang\n\nCoba hindari kode bersarang dengan level terlalu dalam.\n\nMisalnya, dalam loop, kadang ide bagus memakai directive [`continue`](info:while-for#continue) untuk menghindari sarang extra.\n\nMisalnya, ketimbang menambah kondisional `if` bersarang seperti ini:\n\n```js\nfor (let i = 0; i < 10; i++) {\n if (cond) {\n ... // <- satu lagi level bersarang\n }\n}\n```\n\nKita bisa tulis:\n\n```js\nfor (let i = 0; i < 10; i++) {\n if (!cond) *!*continue*/!*;\n ... // <- tak ada extra level bersarang\n}\n```\n\nHal serupa bisa dilakukan dengan `if/else` dan `return`.\n\nMisalnya, dua konstruksi berikut identik.\n\nOpsi 1:\n\n```js\nfunction pow(x, n) {\n if (n < 0) {\n alert(\"Negative 'n' not supported\");\n } else {\n let result = 1;\n\n for (let i = 0; i < n; i++) {\n result *= x;\n }\n\n return result;\n } \n}\n```\n\nOpsi 2:\n\n```js\nfunction pow(x, n) {\n if (n < 0) {\n alert(\"Negative 'n' not supported\");\n return;\n }\n\n let result = 1;\n\n for (let i = 0; i < n; i++) {\n result *= x;\n }\n\n return result;\n}\n```\n\nYang kedua lebih terbaca karena \"kasus spesial\" `n < 0` ditangani segera. Sekali pengecekan selesai kita bisa pindah ke aliran kode \"utama\" tanpa sarang tambahan.\n\n## Penempatan Fungsi\n\nJika kamu menulis beberapa fungsi \"pembantu\" dan kode yang menggunakan mereka, ada tiga cara untuk mengorganisir fungsi.\n\n1. Deklarasi fungsi *di atas* kode yang menggunakan mereka:\n\n ```js\n // *!*deklarasi fungsi*/!*\n function createElement() {\n ...\n }\n\n function setHandler(elem) {\n ...\n }\n\n function walkAround() {\n ...\n }\n\n // *!*kode yang menggunakan mereka*/!*\n let elem = createElement();\n setHandler(elem);\n walkAround();\n ```\n2. Kode pertama, lalu fungsi\n\n ```js\n // *!*kode yang menggunakan mereka*/!*\n let elem = createElement();\n setHandler(elem);\n walkAround();\n\n // --- *!*fungsi pembantu*/!* ---\n function createElement() {\n ...\n }\n\n function setHandler(elem) {\n ...\n }\n\n function walkAround() {\n ...\n }\n ```\n3. Campuran: fungsi dideklarasi di mana ia pertama dipakai.\n\nSeringnya, varian kedua jadi pilihan.\n\nItu karena saat membaca kode, kita pertama mau tahu *itu bisa apa*. Jika kode mulai duluan, maka jadi lebih jelas dari awal. Lalu, mungkin kita tak mau membaca fungsinya sama sekali, terutama jika nama mereka deskriptif, sesuai dengan kelakuan mereka.\n\n## Panduan Gaya\n\nPanguan gaya berisi aturan umum tentang \"bagaimana menulis\" kode, misal quote mana yang dipakai, berapa spasi indent, panjang baris maximal, dll. Banyak hal remeh.\n\nSaat semua anggota tim menggunakan panduan gaya yang sama, kodenya terlihat seragam, tak peduli anggota tim mana yang menulisnya.\n\nTentu saja, tim bisa saja menulis panduan gaya mereka sendiri, tapi biasanya mereka tak butuh. There are many existing guides to choose from.\n\nBeberapa pilihan populer:\n\n- [Panduan Gaya JavaScript Google](https://google.github.io/styleguide/javascriptguide.xml)\n- [Panduan Gaya JavaScript Airbnb](https://github.com/airbnb/javascript)\n- [Idiomatic.JS](https://github.com/rwaldron/idiomatic.js)\n- [StandardJS](https://standardjs.com/)\n- (plus banyak lainnya)\n\nJika kamu pengembang pemula, mulai dengan cheatsheet di awal bab ini. Lalu kamu bisa menjelajah panduan gaya lain untuk mencari ide lebih dan menentukan mana yang terbaik.\n\n## Linter Terotomasi\n\nLinter ialah tool yang bisa otomatis mengecek gaya kodemu dan memberi saran improvisasi.\n\nYang keren dari ini ialah pengecekan gaya sekaligus menemukan bug., like typos in variable or function names. Because of this feature, using a linter is recommended even if you don't want to stick to one particular \"code style\".\n\nBerikut beberapa linting tool terkenal:\n\n- [JSLint](http://www.jslint.com/) -- one of the first linters.\n- [JSHint](http://www.jshint.com/) -- more settings than JSLint.\n- [ESLint](http://eslint.org/) -- probably the newest one.\n\nSemuanya bisa melakukan itu. Penulis ini menggunakan [ESLint](http://eslint.org/).\n\nKebanyakan linter terintegrasi dengan banyak editor populer: cuma mengaktifkan plugin di editor dan mengkonfigurasi gayanya.\n\nMisalnya, untuk ESLint kamu harus melakukan hal ini:\n\n1. Instal [Node.js](https://nodejs.org/).\n2. Instal ESLint dengan command `npm install -g eslint` (npm ialah installer package JavaScript).\n3. Buat file konfig bernama `.eslintrc` di root proyek JavaScriptmu (di folder yang berisi semua filemu).\n4. Instal/aktifkan plugin untuk editormu yang berintegrasi dengan ESLint. Mayoritas editor punya satu.\n\nBerikut contoh file `.eslintrc`:\n\n```js\n{\n \"extends\": \"eslint:recommended\",\n \"env\": {\n \"browser\": true,\n \"node\": true,\n \"es6\": true\n },\n \"rules\": {\n \"no-console\": 0,\n \"indent\": 2\n }\n}\n```\n\nDi sini directive `\"extends\"` menunjukkan bahwa konfigurasinya berdasarkan set pengaturan \"eslint:recommended\". Setelah itu, kita spesifikasikan punya kita sendiri.\n\nSelain itu, dimungkinkan juga mengunduh set aturan gaya dari web dan mengextend mereka. Lihat untuk detil lebih tentang instalasi.\n\nJuga IDE tertentu punya linting built-in, yang nyaman tapi tak bisa dikustomisasi seperti ESLint.\n\n## Kesimpulan\n\nSemua aturan syntax yang dideskripsikan di bab ini (dan di referensi panduan gaya) bertujuan untuk meningkatkan keterbacaan kodemu. Mereka dapat diperdebatkan.\n\nSaat kita berpikir tentang menulis kode \"lebih baik\", pertanyaannya ialah haruskah kita tanya diri kita sendiri: \"Apa yang membuat kode dapat lebih terbaca dan lebih mudah dipahami?\" dan \"Apa yang bisa membantu kita menghindari galat?\" Inilah hal utama yang harus dipikirkan saat memilih dan memperdebatkan gaya kode.\n\nMembaca panduan gaya populer akan membuatmu selalu terupdate dengan ide terbaru tentang tren gaya kode dan praktik terbaiknya.\n" }, { "path": "1-js/03-code-quality/03-comments/article.md", "content": "# Komentar\n\nSeperti yang kita tahu dari bab , komentar bisa sebaris tunggal: mulai dari `//` dan baris-ganda: `/* ... */`.\n\nNormalnya kita pakai mereka untuk menjelaskan bagaimana dan kenapa kode bekerja.\n\nDi awal pandangan, berkomentar itu sudah jelas, tapi pemula sering salah memakainya dalam pemrograman.\n\n## Komentar jelek\n\nPemula cenderung memakai komentar untuk menjelaskan \"ada apa di dalam kode\". Seperti ini:\n\n```js\n// Kode ini akan melakukan ini (...) dan itu (...)\n// ...dan entah apa lagi...\nvery;\ncomplex;\ncode;\n```\n\nTapi di dalam kode yang baik, jumlah komentar \"penjelasan\" seperti ini sebaiknya minimal. Seriusnya, kode harus bisa dimengerti tanpa mereka.\n\nAda aturan besar tentang itu: \"jika kode begitu tak jelas hingga ia butuh komentar, mungkin malah ia harus ditulis ulang\".\n\n### Resep: fungsi faktor keluar\n\nKadang menguntungkan untuk mengganti sepotong kode dengan fungsi, seperti ini:\n\n```js\nfunction showPrimes(n) {\n nextPrime:\n for (let i = 2; i < n; i++) {\n\n*!*\n // cek apakah i angka prima\n for (let j = 2; j < i; j++) {\n if (i % j == 0) continue nextPrime;\n }\n*/!*\n\n alert(i);\n }\n}\n```\n\nVarian lebih baiknya, dengan fungsi faktor keluar `isPrime`:\n\n\n```js\nfunction showPrimes(n) {\n\n for (let i = 2; i < n; i++) {\n *!*if (!isPrime(i)) continue;*/!*\n\n alert(i); \n }\n}\n\nfunction isPrime(n) {\n for (let i = 2; i < n; i++) {\n if (n % i == 0) return false;\n }\n\n return true;\n}\n```\n\nSekarang kita mudah mengerti kodenya. Fungsinya itu sendiri menjadi komentar. Kode macam ini disebut *menjelaskan-diri-sendiri*.\n\n### Resep: membuat fungsi\n\nDan jika kita punya \"code sheet\" sangat panjang seperti ini:\n\n```js\n// kita tambah \\whiskey di sini\nfor(let i = 0; i < 10; i++) {\n let drop = getWhiskey();\n smell(drop);\n add(drop, glass);\n}\n\n// kita tambah jus di sini\nfor(let t = 0; t < 3; t++) {\n let tomato = getTomato();\n examine(tomato);\n let juice = press(tomato);\n add(juice, glass);\n}\n\n// ...\n```\n\nMaka mungkin varian lebih baiknya ialah merefaktornya menjadi fungsi seperti:\n\n```js\naddWhiskey(glass);\naddJuice(glass);\n\nfunction addWhiskey(container) {\n for(let i = 0; i < 10; i++) {\n let drop = getWhiskey();\n //...\n }\n}\n\nfunction addJuice(container) {\n for(let t = 0; t < 3; t++) {\n let tomato = getTomato();\n //...\n }\n}\n```\n\nSekali lagi, fungsi mereka sendiri menjelaskan apa yang terjadi. Tak ada yang dikomentari. Dan juga struktur kodenya lebih baik saat dipisah. Kelakuan tiap fungsi jadi lebih jelas, apa yang ia ambil dan yang ia kembalikan.\n\nRelitanya, kita tak bisa menghindar total dari komentar \"penjelasan\". Ada algoritma rumit. Dan ada \"tweak\" pintar dengan tujuan optimisasi. Tapi umumnya kita harus coba menjaga kodenya simpel dan menjelaskan-diri-sendiri.\n\n## Komentar baik\n\nJadi, komentar penjelasan biasanya jelek. Komentar mana yang bagus?\n\nJelaskan arsitekturnya\n: Sediakan overview tingkat-tinggi dari komponen, bagaimana mereka berinteraksi, apa aliran kontrolnya di berbagai situasi... Singkatnya -- gambaran umum dari kode. Ada bahasa spesial [UML](http://wikipedia.org/wiki/Unified_Modeling_Language) untuk membangun diagram arsitektur tingkat-tinggi yang menjelaskan kode. Sangat berfaedah untuk dipelajari.\n\nParameter dan kegunaan fungsi dokumen\n: Ada syntax spesial [JSDoc](http://en.wikipedia.org/wiki/JSDoc) untuk mendokumentasi fungsi: kegunaan, parameter, nilai kembalian.\n\n Misalnya:\n ```js\n /**\n * Kembalikan x yang diberi pangkat n.\n *\n * @param {number} x Angka yang mau dinaikkan.\n * @param {number} n Pangkat, harus angka asli.\n * @return {number} x hasil setelah pangkat n.\n */\n function pow(x, n) {\n ...\n }\n ```\n\n Komentar macam ini membolehkan kita memahami maksud fungsi dan memakainya dengan tepat tanpa melihat isi kode.\n\n Oya, banyak editor seperti [WebStorm](https://www.jetbrains.com/webstorm/) bisa memahami mereka juga dan memakai mereka untuk menyediakan autocomplete dan beberapa pengecekan-kode otomatis.\n\n Juga, Ada tool seperti [JSDoc 3](https://github.com/jsdoc3/jsdoc) yang bisa menggenerate dokumentasi-HTML dari komentar. Kamu bisa baca informasi lebih tentang JSDoc di .\n\nKenapa tugas ini diselesaikan begini?\n: Apa yang tertulis itu penting. Tapi apa yang *tak* tertilis mungkin lebih penting lagi untuk memahami yang terjadi. Kenapa tugas ini diselesaikan tepat seperti ini? Kodenya tak memberikan jawaban.\n\n Jika ada banyak cara menyelesaikan tugas, kenapa harus ini? Apalagi ini belum jelas.\n\n Tanpa komentar macam ini situasi berikut memungkinkan:\n 1. Kamu (atau kolegamu) membuka kode yang ditulis kapan hari, dan melihat bahwa ini \"suboptimal\".\n 2. Kamu berpikir: \"Koq bego ya saya waktu itu, dan lihat betapa pintar saya sekarang\", dan menulis-ulang menggunakan varian yang \"lebih jelas dan benar\".\n 3. ...Urgensi menulis-ulang itu bagus. Tapi di proses yang kamu lihat adalah solusi \"lebih jelas\" tersebut jadi minus. Kamu bahkan agak lupa kenapa, karena kamu sudah mencobanya di masa lalu. Kamu balikkan ke varian yang benar, tapi waktumu terbuang percuma.\n\n Komentar yang menjelaskan solusi itu penting. Mereka membantu melanjutkan pengembangan ke arah yang benar.\n\nAda fitur halus dari kodenya? Di mana mereka dipakai?\n: Jika kodenya punya sesuatu yang halus dan kontra-intuitif, itu sudah pasti bagus untuk dikomentari.\n\n## Kesimpulan\n\nTanpa penting dari pengembang yang baik ialah komentar: kehadiran mereka dan kealfaan mereka.\n\nKomentar yang baik membuat kita memelihara kode lebih baik, kembali ke situ setelah delay dan memakainya secara efektif.\n\n**Komentari ini:**\n\n- Arsitektur keseluruhan, pemandangan tingkat-tinggi.\n- Kegunaan fungsi.\n- Solusi penting, terutama yang masih belum jelas.\n\n**Hindari komentar:**\n\n- Yang menjelaskan \"bagaimana kode bekerja\" dan \"apa kelakuannya\".\n- Menaruh mereka hanya jika sudah tak mungkin menyederhanakan kode dan menjelaskan diri sendiri yang mana itu tak dibutuhkan.\n\nKomentar juga dipakai untuk mengotodokumentasikan tool seperti JSDoc3: mereka membacanya dan menggenerate HTML-docs (atau docs di format lainnya).\n" }, { "path": "1-js/03-code-quality/04-ninja-code/article.md", "content": "# Kode ninja\n\n\n```quote author=\"Confucius (Analects)\"\nLearning without thought is labor lost; thought without learning is perilous.\n```\n\nNinja programmer dari masa lalu memakai trik ini untuk mempertajam pikiran maintainer kode.\n\nCode review guru mencari-cari mereka dalam tugas pengujian.\n\nPengembang pemula kadang memakai mereka lebih baik dari ninja programmer.\n\nBaca mereka dengan hati-hati dan cari tahu siapa kamu -- ninja, pemula, atau mungkin code reviewer?\n\n\n```warn header=\"Ironi terdeteksi\"\nBanyak yang mencoba mengikuti jalan ninja. Tapi cuma sedikit yang sukses.\n```\n\n\n## Singkat adalah jiwa kecerdasan\n\nBuat kode sependek mungkin. Tunjukkan kepintaranmu.\n\nBiarkan fitur bahasa halus memandumu.\n\nMisalnya, perhatikan operator ternary ini `'?'`:\n\n```js\n// diambil dari library javascript terkenal\ni = i ? i < 0 ? Math.max(0, len + i) : i : 0;\n```\n\nKeren, kan? Kalau kamu menulis begitu, pengembang yang melihat baris ini dan mencoba memahami apa nilai `i` akan merasa senang. Lalu datanglah kamu, mencari jawaban.\n\nKatakan pada mereka bahwa yang lebih pendek selalu lebih baik that. Inisasikan mereka ke dalam langkah ninja.\n\n## Variabel satu-huruf\n\n```quote author=\"Laozi (Tao Te Ching)\"\nThe Dao hides in wordlessness. Only the Dao is well begun and well\ncompleted.\n```\n\nCara lain untuk mengkode cepat ialah memakai nama variabel huruf-tunggal di manapun. Seperti `a`, `b` atau `c`.\n\nVariabel pendek hiland dalam kode seperti ninja sungguhan di hutan. Tak ada yang mampu mencarinya memakai \"pencari\" editor. Dan bahkan jika seseorang menemukannya, mereka tak mampu men\"decipher\" arti nama `a` atau `b`.\n\n...Tapi ada pengecualian. Ninja riil tak akan pernah memakai `i` sebagai counter di loop `\"for\"`. Di tempat lain iya, tapi di sini tidak. Lihat saja, ada banyak huruf exotis. Misalnya, `x` atau `y`.\n\nVariabel exotis sebagai counter loop itu keren terutama jika badan loop memakan 1-2 laman (buat ia lebih panjang lagi jika kamu bisa). Lalu jika ada orang lihat lebih dalam ke loop, mereka tak akan cepat menerka nama variabel `x` sebagai counter loop.\n\n## Gunakan singkatan\n\nJika aturan tim melarang penggunaan nama satu-huruf dan geje -- perpendek mereka, buat singkatan.\n\nSeperti ini:\n\n- `list` -> `lst`.\n- `userAgent` -> `ua`.\n- `browser` -> `brsr`.\n- ...etc\n\nHanya orang-orang yang memiliki intuisi bagus yang akan mengerti nama-nama seperti itu. Cobalah untuk memendekan segalanya. Hanya orang-orang yang layak yang bisa bertahan dengan perkembangan kodemu.\n\n## Terbang Tinggi. Jadilah abstrak.\n\n```quote author=\"Laozi (Tao Te Ching)\"\nThe great square is cornerless
\nThe great vessel is last complete,
\nThe great note is rarified sound,
\nThe great image has no form.\n```\n\nSaat memilih nama cobalah pakai kata paling abstrak. Seperti `obj`, `data`, `value`, `item`, `elem` dan seterusnya.\n\n- **Nama ideal untuk variabel ialah `data`.** Pakai itu di manapun kamu bisa. Jelas, tiap variabel memegang *data*, kan?\n\n ...Tapi bagaimana jika `data` sudah diambil? Coba `value`, itu juga universal. Setelahnya, sebuah variabel akhirnya mendapatkan sebuah *nilai*.\n\n- **Beri nama variabel berdasarkan tipe: `str`, `num`...**\n\n Coba saja mereka. Pemula mungkin heran -- apa nama-nama begini berguna bagi ninja? Tentu!\n\n Pasti, nama variabel masih punya arti. Ia menerangkan apa isi variabel: string, number atau yang lain. Tapi saat orang asing mencoba memahami kodenya, mereka akan terkejut melihat tak ada informasi sama sekali! Dan pasti akan gagal mengubah kodemu yang sudah dipikirkan matang-matang.\n\n Tipe nilai mudah dicaritahu dari debugging. Tapi apa arti dari variabel? String/number mana yang disimpan?\n\n Tak ada cara mencaritahu tanpa meditasi yang bagus!\n\n- **...Tapi bagaimana jika tak ada name lagi?** Tambahkan saja angka: `data1, item2, elem5`...\n\n## Uji perhatian\n\nHanya programmer sungguhan bisa memahami kodemu. Tapi bagaimana mengeceknya?\n\n**Salah satu caranya -- pakai nama variabel yang serupa, seperti `date` dan `data`.**\n\nCampurkan saja mereka sebisamu.\n\nBaca cepan kode begini makin mustahil. Dan saat ada typo... Ummm... Kita stuck cukup lama, waktunya minum teh.\n\n\n## Synonym pintar\n\n```quote author=\"Laozi (Tao Te Ching)\"\nThe Tao that can be told is not the eternal Tao. The name that can be named is not the eternal name.\n```\n\nMemakai nama *serupa* untuk hal *sama* membuat hidup menarik dan menampilkan kreatifitasmu ke publik.\n\nMisalnya, pikirkan prefix fungsi. Jika fungsi menunjukkan pesan ke layar -- mulai dengan `display…`, seperti `displayMessage`. Lalu jika fungsi lain menampilkan yang lain di layar, seperti nama pengguna, mulai dengan `show…` (seperti `showName`).\n\nMenyindir bahwa ada perbedaan halus antara kedua fungsi, padahal tidaka da.\n\nBuatlah sebuah team kawan ninja: jika John mulai *menampilkan* fungsi dengan `display...` didalam kodenya, lalu Peter menggunakan `render...`, dan Ann -- `paint...`. Perhatikan akan seberapa menarik dan berbedakah nantinya.\n\n...Dan sekarang untuk hat trick!\n\nUntuk dua fungsi dengan perbedaan mencolok -- pakai prefix yang sama!\n\nMisalnya, fungsi `printPage(page)` akan memakai printer. Dan fungsi `printText(text)` akan menaruh teks ke layar. Biarkan pembaca asing berpikir baik tentang fungsi bernama `printMessage`: \"Ke mana ia taruh pesannya? Ke printer atau ke layar?\". Supaya lebih bersinar, `printMessage(message)` sebaiknya mengoutput itu di jendela baru!\n\n## Pakai-ulang nama\n\n```quote author=\"Laozi (Tao Te Ching)\"\nOnce the whole is divided, the parts
\nneed names.
\nThere are already enough names.
\nOne must know when to stop.\n```\n\nTambah variabel baru hanya saat diperlukan.\n\nLebih baik gunakan ulang nama yang sudah ada. Tulis saja nilai baru ke dalamnya.\n\nDi dalam fungsi cobalah hanya memakai variabel yang dioper sebagai parameter.\n\nItu akan menyulitkan identifikasi apa yang ada di variabel *sekarang*. Dan juga darimana asalnya. Tujuannya untuk mengembangka intuisi dan memori orang yang membaca kodenya. Orang dengan intuisi lemah akan menganalisa kodenya baris per-baris dan menjejak perubahan ke seluruh cabang kode.\n\n**Varian canggih dari pendekatan ini ialah mengganti diam-diam (!) nilai dengan sesuatu yang serupa di tengah loop atau fungsi.**\n\nMisalnya:\n\n```js\nfunction ninjaFunction(elem) {\n // 20 baris kode berjalan dengan elem\n\n elem = clone(elem);\n\n // 20 baris lagi, sekarang berjalan dengan clone dari elem!\n}\n```\n\nSobat programmer yang mau bekerja dengan `elem` di pertengahan kedua dari fungsi akan terkejut... Cuma selama debugging, setelah memeriksa kodenya mereka akan menemukan bahwa mereka bekerja dengan clone!\n\nTerlihat dalam kode secara reguler. Benar-benar efektif bahkan melawan ninja berpengalaman.\n\n## Underscore untuk kesenangan\n\nTaruh underscores `_` dan `__` sebelum nama variabel. Seperti `_name` atau `__value`. Akan lebih bagus jika cuma kamu yang tahu artinya. Atau, lebih baik, tambahkan mereka hanya untuk kesenangan, tanpa ada arti sama sekali. Atau arti berbeda di tempat berbeda.\n\nKamu membunuh dua kelinci satu tembakan. Pertama, kodenya jadi lebih panjang dan kurang terbaca, dan kedua, sobat pengembang menghabiskan banyak waktu mencaritahu arti underscores.\n\nNinja pintar menaruh underscore di satu spot kode dan menghindari mereka di tempat lain. Itu membuat kodenya jadi lebih rapuh dan meningkatkan kemungkinan muncul galat masa depan.\n\n## Tunjukkan cintamu\n\nBiarkan orang melihat betapa indahnya entiti kamu! Nama seperti `superElement`, `megaFrame` dan `niceItem` pasti akan mencerahkan pembacamu.\n\nTentu, di satu sisi, satu hal tertulis: `super..`, `mega..`, `nice..` Tapi di sisi lain -- ia tak membawa detil. Pembaca mungkin memutuskan untuk melihat arti tersembunyi dan meditasi selama sejam atau dua jam dari waktu kerja mereka.\n\n\n## Tumpang-tindih variabel terluar\n\n```quote author=\"Guan Yin Zi\"\nWhen in the light, can't see anything in the darkness.
\nWhen in the darkness, can see everything in the light.\n```\n\nPakai nama yang sama untuk variabel di dalam dan di luar fungsi. Simpelnya. Tak perlu usaha menemukan nama baru.\n\n```js\nlet *!*user*/!* = authenticateUser();\n\nfunction render() {\n let *!*user*/!* = anotherValue();\n ...\n ...many lines...\n ...\n ... // <-- programmer mau bekerja dengan pengguna di sini dan...\n ...\n}\n```\n\nProgrammer yang lompat ke dalam `render` mungkin akan gagal melihat ada `user` lokal yang membayangi user yang terluar.\n\nLalu mereka akan mencoba bekerja dengan `user` dengan asumsi ia variabel external, hasil `authenticateUser()`... Jebakan muncul! Halo, debugger...\n\n\n## Efek-samping di manapun!\n\nAda fungsi yang kelihatan tak mengubah apapun. Seperti `isReady()`, `checkPermission()`, `findTags()`... Mereka dikira melakukan kalkulasi, mencari dan menghasilkan data, tanpa mengubah apapun di luar mereka. Dengan kata lain, tanpa \"efek-samping\".\n\n**Trik yang sangat cantik ialah menambah aksi \"berfaedah\" ke mereka, selain tugas utamanya.**\n\nExpresi linglung kaget dari muka kolegamu saat mereka melihat fungsi bernama `is..`, `check..` atau `find...` yang mengubah sesuatu -- pastinya akan memperluas batas alasanmu.\n\n**Cara lain membuat kejutan ialah mengembalikan hasil non-standar.**\n\nTunjukan pemikiran orisinilmu! Biarkan panggilan `checkPermission` mengembalikan bukan `true/false`, tapi objek rumit dengan hasil pengecekan.\n\nPengembang itu yang mencoba `if (checkPermission(..))`, akan heran kenapa itu tak bekerja. Katakan ke mereka: \"Baca docs!\". Dan berikan artikel ini.\n\n\n## Fungsi yang kuat!\n\n```quote author=\"Laozi (Tao Te Ching)\"\nThe great Tao flows everywhere,
\nboth to the left and to the right.\n```\n\nJangan batasi fungsi karena tulisan namanya. Melebarlah.\n\nMisalnya, fungsi `validateEmail(email)` bisa (selain mengecek keebenaran email) menampilkan pesan galat dan meminta masukan ulang email.\n\nAksi tambahan sebaiknya jangan diperjelas dari nama fungsi. Coder ninja sejati akan membuat mereka tidak jelas dari kodenya juga.\n\n**Menggabung beberapa aksi jadi satu melindungi kodemu dari penggunaan ulang.**\n\nBayangkan, pengembang lain mau mengecek email, dan tak menghasilkan pesan apapun. Fungsimu `validateEmail(email)` yang melakukan keduanya tak akan cocok dengan mereka. Jadi mereka tak akan mengganggu meditasimu dengan menanyakan itu.\n\n## Kesimpulan\n\nSemua \"potongan saran\" di atas berasal dari real kode sungguhan... Kadang, tertulis dari pengembang berpengalaman. Bahkan lebih berpengalaman dari kamu ;)\n\n- Ikuti beberapa dari mereka, dan kodemu akan menjadi penuh kejutan.\n- Ikuti banyak dari mereka, dan kodemu akan menjadi milikmu sepenuhnya, tak ada yang mau mengubahnya.\n- Ikuti semua, dan kodemu akan menjadi pelajaran berharga untuk pengembang muda yang mencari pencerahan.\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md", "content": "Tes ini mendemonstrasikan satu dari godaan yang pengembang temui dan saat menulis tes.\n\nApa yang kita punya di sini sebenarnya 3 tes, tapi diletakkan sebagai satu fungsi tunngal dengan 3 assert.\n\nKadang lebih mudah menulis di cara ini, tapi jika muncul galat, kurang jelas apa yang salah.\n\nJika galat terjadi di tengah alur exekusi rumit, maka kita harus caritahu data di poin itu. Kita sebenarnya harus *mendebug tes*.\n\nAkan jauh lebih baik memecah tes jadi beberapa blok `it` dengan input dan output yang tertulis jelas.\n\nSeperti ini:\n```js\ndescribe(\"Raises x to power n\", function() {\n it(\"5 in the power of 1 equals 5\", function() {\n assert.equal(pow(5, 1), 5);\n });\n\n it(\"5 in the power of 2 equals 25\", function() {\n assert.equal(pow(5, 2), 25);\n });\n\n it(\"5 in the power of 3 equals 125\", function() {\n assert.equal(pow(5, 3), 125);\n });\n});\n```\n\nKita mengganti `it` tunggal dengan `describe` dan grup blok `it`. Sekarang jika sesuatu gagal kita akan lihat jelas apa datanya.\n\nJuga kita bisa mengisolasi tes tunggal dan menjalankannya dalam mode standalone dengan menulis `it.only` ketimbang `it`:\n\n\n```js\ndescribe(\"Raises x to power n\", function() {\n it(\"5 in the power of 1 equals 5\", function() {\n assert.equal(pow(5, 1), 5);\n });\n\n*!*\n // Mocha hanya akan menjalankan blok ini\n it.only(\"5 in the power of 2 equals 25\", function() {\n assert.equal(pow(5, 2), 25);\n });\n*/!*\n\n it(\"5 in the power of 3 equals 125\", function() {\n assert.equal(pow(5, 3), 125);\n });\n});\n```\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md", "content": "nilai penting: 5\n\n---\n\n# Apa yang salah dalam tes ini?\n\nApa yang salah dalam tes `pow` di bawah?\n\n```js\nit(\"Raises x to the power n\", function() {\n let x = 5;\n\n let result = x;\n assert.equal(pow(x, 1), result);\n\n result *= x;\n assert.equal(pow(x, 2), result);\n\n result *= x;\n assert.equal(pow(x, 3), result);\n});\n```\n\nP.S. Secara sintaktis tesnya benar dan lulus.\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/article.md", "content": "# Pengetesan terotomasi dengan Mocha\n\nPengetesan terotomasi akan dipakai di tugas lebih lanjut, dan juga luas dipakai di proyek riil.\n\n## Kenapa kita butuh tes?\n\nSaat kita menulis fungsi, kita biasanya akan membayangkan apa yang ia harus lakukan: parameter apa memberikan hasil apa.\n\nSelama pengembangan, kita bisa mengecek fungsi dengan menjalankannya dan membandingkan keluaran yang muncul dengan yang keluaran diharapkan. Misalnya, kita bisa melakukannya di konsol.\n\nJika sesuatu buruk terjadi -- maka kita membetulkan kode, menjalankan lagi, mengecek hasil -- dan begitu terus hingga bekerja.\n\nTapi proses \"jalan-ulang\" manual seperti ini tak sempurna.\n\n**Ketika pengetesan kode dengan jalan-ulang manual, sangat rentang untuk kelupaan sesuatu.**\n\nMisalnya, kita membuat fungsi `f`. Membuat beberapa kode, mengetes: `f(1)` bekerja, tapi `f(2)` tak bekerja. Kita betulkan kodenya dan sekarang `f(2)` bekerja. Sudah lengkap? Tapi kita lupa mengetes-ulang `f(1)`. Di situ mungkin terjadi galat.\n\nIni sangat tipikal. Saat kita mengembangkan sesuatu, kita menyimpan banyak use case di kepala. Tapi sulit mengharapkan programmer mengecek semuanya secara manual setelah setiap perubahan. Jadi lebih mudah membetulkan satu hal dan merusak hal lainnya.\n\n**Pengecekan terotomasi artinya tes itu ditulis terpisah, sebagai tambahan ke kode. Mereka menjalankan kode kita dalam berbagai cara dan membandingkan hasil dengan harapan.**\n\n## Behavior Driven Development (BDD)\n\nAyo mulai dengan teknik bernama [Behavior Driven Development](http://en.wikipedia.org/wiki/Behavior-driven_development) atau, singkatnya, BDD.\n\n**BDD adalah tiga hal dalam satu: tes DAN dokumentasi DAN contoh.**\n\nUntuk memahami BDD, kita akan periksa kasus praktik pengembangan.\n\n## Pengembangan \"pow\": spek\n\nKatakan kita mau membuat fungsi `pow(x, n)` yang menaikkan `x` ke bilangan pangkat `n`. Kita asumsikan `n≥0`.\n\nTugas itu cuma contoh: ada operator `**` di JavaScript yang bisa melakukan itu, tapi di sini kita koncentrasi di alur pengembangan yang bisa ditiru di tugas komplex lainnya juga.\n\nSebelum membuat kode `pow`, kita bisa bayangkan apa yang harus dilakukan fungsi itu dan menjelaskannya.\n\nDeskripsi begitu disebut _spesifikasi_ atau, singkatnya, spek, dan berisi deskripsi use case bersama dengan tes untuk mereka, seperti ini:\n\n```js\ndescribe(\"pow\", function () {\n it(\"raises to n-th power\", function () {\n assert.equal(pow(2, 3), 8);\n });\n});\n```\n\nSpek punya tiga blok bangunan utama yang bisa kamu lihat di bawah:\n\n`describe(\"title\", function() { ... })` : Fungsionalitas apa yang kita jelaskan. Di kasus ini kita akan menjelaskan fungsi `pow`. Dipakai untuk mengelompokkan \"pekerja\" -- blok `it`.\n\n`it(\"use case description\", function() { ... })` : Di judul `it` kita _dalam bahasa manusia_ menjelaskan use case tertentu, dan argumen kedua ialah fungsi yang mengetes itu.\n\n`assert.equal(value1, value2)` : Kode di dalam blok `it`, jika implementasinya benar, harus berjalan tanpa galat.\n\n Fungsi `assert.*` dipakai untuk mengecek apakah `pow` bekerja sesuai harapan. Tepat di sini kita memakai salah satunya -- `assert.equal`, ia membandingkan argumen dan menghasilkan galat jika mereka tak sama. Di sini ia mengecek apakah hasil `pow(2, 3)` sama dengan `8`. Ada tipe perbandingan dan pengecekan lain, yang akan kita tambah nanti.\n\nSpesifikasi ini bisa diexekusi, dan ia akan menjalankan tes yang dispesifikasi dalam blok `it`. Kita akan lihat nanti.\n\n## Alur pengembangan\n\nAlur pengembangan biasanya seperti ini:\n\n1. Spek inisial ditulis, dengan tes untuk kebanyakan fungsionalitas dasar.\n2. Implementatsi inisial dibuat.\n3. Untuk mengecek apakah ia bekerja, kita jalankan framework pengetesan [Mocha](http://mochajs.org/) (detil lebih segera) yang menjalankan spek. Saat fungsionalitas tak lengkap, galat ditampilkan. Kita buat koreksi hingga semuanya bekerja.\n4. Sekarang kita punya implementasi inisial yang bekerja dengan tes.\n5. Kita tambah use case lain ke spek, mungkin belum didukung implementasinya. Tes mulai gagal.\n6. Pergi ke 3, perbaharui implementasinya hingga tes tak memberikan galat.\n7. Ulangi langkah 3-6 hingga fungsionalitasnya siap.\n\nJadi, pengembangannya _iteratif_. Kita tulis spek, implementasikan, memastikan tes lulus, lalu menulis tes lainnya, memastikan mereka bekerja dll. Akhirnya kita punya implementasi yang bekerja dan tes untuk itu.\n\nAyo lihat alur pengembangan ini di kasus praktik kita.\n\nLangkap pertama sudah lengkap: kita punya spek inisial untuk `pow`. Sekarang, sebelum membuat implementasinya, ayo pakai beberapa librari JavaScript untuk menjalankan tes, hanya untuk melihat mereka bekerja (mereka semua akan gagal).\n\n## Spec dalam aksi\n\nDi sini di tutorial ini kita akan memakai librari JavaScript untuk tes:\n\n- [Mocha](http://mochajs.org/) -- inti framework: menyediakan fungsi testing umum `describe` dan `it` dan fungsi utama yang menjalankan test.\n- [Chai](http://chaijs.com) -- librari dengan banyak penambahan. Ini membuatmu bisa untuk menggunakan banyak penambahan yang berbeda, untuk sekarang kita hanya membutuhkan `assert.equal`.\n- [Sinon](http://sinonjs.org/) -- sebuah librari untuk memata-matai fungsi, meniru fungsi bawaan dan lainnya, kita akan butuh ini nanti.\n\nLibrari ini cocok baik untuk pengetesan in-browser dan server-side. Di sini kita akan mempertimbangkan varian peramban.\n\nLaman HTML lengkap dengan framework ini dan spek `pow`:\n\n```html src=\"index.html\"\n\n```\n\nLaman ini bisa dibagi jadi lima bagian:\n\n1. `` -- menambah librari dan gaya pihak-ketiga untuk tes.\n2. `\n \n \n \n \n \n\n \n \n \n \n
\n\n \n \n \n\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js", "content": "describe(\"test\", function() {\n \n // Mocha usually waits for the tests for 2 seconds before considering them wrong\n \n this.timeout(200000); // With this code we increase this - in this case to 200,000 milliseconds\n\n // This is because of the \"alert\" function, because if you delay pressing the \"OK\" button the tests will not pass!\n \n before(() => alert(\"Testing started – before all tests\"));\n after(() => alert(\"Testing finished – after all tests\"));\n\n beforeEach(() => alert(\"Before a test – enter a test\"));\n afterEach(() => alert(\"After a test – exit a test\"));\n\n it('test 1', () => alert(1));\n it('test 2', () => alert(2));\n\n});\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/index.html", "content": "\n\n\n \n \n \n \n \n \n \n \n\n\n\n\n \n\n \n \n\n \n
\n\n \n \n\n\n\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/pow-1.view/index.html", "content": "\n\n\n \n \n \n \n \n \n \n \n\n\n\n\n \n\n \n \n\n \n
\n\n \n \n\n\n\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/pow-1.view/test.js", "content": "describe(\"pow\", function() {\n\n it(\"raises to n-th power\", function() {\n assert.equal(pow(2, 3), 8);\n });\n\n});\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/pow-2.view/index.html", "content": "\n\n\n \n \n \n \n \n \n \n \n\n\n\n\n \n\n \n \n\n \n
\n\n \n \n\n\n\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js", "content": "describe(\"pow\", function() {\n\n it(\"2 raised to power 3 is 8\", function() {\n assert.equal(pow(2, 3), 8);\n });\n\n it(\"3 raised to power 4 is 81\", function() {\n assert.equal(pow(3, 4), 81);\n });\n\n});\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/pow-3.view/index.html", "content": "\n\n\n \n \n \n \n \n \n \n \n\n\n\n\n \n\n \n \n\n \n
\n\n \n \n\n\n\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/pow-3.view/test.js", "content": "describe(\"pow\", function() {\n\n function makeTest(x) {\n let expected = x * x * x;\n it(`${x} in the power 3 is ${expected}`, function() {\n assert.equal(pow(x, 3), expected);\n });\n }\n\n for (let x = 1; x <= 5; x++) {\n makeTest(x);\n }\n\n});\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html", "content": "\n\n\n \n \n \n \n \n \n \n \n\n\n\n\n \n\n \n \n\n \n
\n\n \n \n\n\n\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js", "content": "describe(\"pow\", function() {\n\n describe(\"raises x to power 3\", function() {\n\n function makeTest(x) {\n let expected = x * x * x;\n it(`${x} in the power 3 is ${expected}`, function() {\n assert.equal(pow(x, 3), expected);\n });\n }\n\n for (let x = 1; x <= 5; x++) {\n makeTest(x);\n }\n\n });\n\n // ... more tests to follow here, both describe and it can be added\n});\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/pow-full.view/index.html", "content": "\n\n\n \n \n \n \n \n \n \n \n\n\n\n\n \n\n \n \n\n \n
\n\n \n \n\n\n\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js", "content": "describe(\"pow\", function() {\n\n describe(\"raises x to power 3\", function() {\n\n function makeTest(x) {\n let expected = x * x * x;\n it(`${x} in the power 3 is ${expected}`, function() {\n assert.equal(pow(x, 3), expected);\n });\n }\n\n for (let x = 1; x <= 5; x++) {\n makeTest(x);\n }\n\n });\n\n it(\"if n is negative, the result is NaN\", function() {\n assert.isNaN(pow(2, -1));\n });\n\n it(\"if n is not integer, the result is NaN\", function() {\n assert.isNaN(pow(2, 1.5));\n });\n\n});\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/pow-min.view/index.html", "content": "\n\n\n \n \n \n \n \n \n \n \n\n\n\n\n \n\n \n \n\n \n
\n\n \n \n\n\n\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/pow-min.view/test.js", "content": "describe(\"pow\", function() {\n\n it(\"raises to n-th power\", function() {\n assert.equal(pow(2, 3), 8);\n });\n\n});\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/pow-nan.view/index.html", "content": "\n\n\n \n \n \n \n \n \n \n \n\n\n\n\n \n\n \n \n\n \n
\n\n \n \n\n\n\n" }, { "path": "1-js/03-code-quality/05-testing-mocha/pow-nan.view/test.js", "content": "describe(\"pow\", function() {\n\n describe(\"raises x to power 3\", function() {\n\n function makeTest(x) {\n let expected = x * x * x;\n it(`${x} in the power 3 is ${expected}`, function() {\n assert.equal(pow(x, 3), expected);\n });\n }\n\n for (let x = 1; x <= 5; x++) {\n makeTest(x);\n }\n\n });\n\n it(\"if n is negative, the result is NaN\", function() {\n assert.isNaN(pow(2, -1));\n });\n\n it(\"if n is not integer, the result is NaN\", function() {\n assert.isNaN(pow(2, 1.5));\n });\n\n});\n" }, { "path": "1-js/03-code-quality/06-polyfills/article.md", "content": "# Polyfill dan transpiler\n\nJavaScript secara konsisten terus berevolusi. Proposal-proposal untuk menambah fitur-fitur baru terus bermunculan. Proposal-proposal ini akan didaftarkan pada jika memang berpotensi dan layak untuk ditambahkan dalam standard dalam bahasa pemrograman JavaScript. Kemudian proposal-proposal yang telah diterima akan dimasukkan dalam [daftar spesifikasi](http://www.ecma-international.org/publications/standards/Ecma-262.htm) JavaScript.\n\nTim yang mengurus JavaScript mengerti dan akan mengusulkan mana dari proposal-proposal ini yang akan diimplementasikan terlebih dahulu. Tim ini boleh saja nanti memasukkan proposal-proposal ini kedalam kategori 'draft / dalam perancangan' atau 'postpone / tunda' karena mungkin menurut mereka proposal-proposal ini menarik untuk didiskusikan lebih dalam atau sulit untuk direalisasikan.\n\nSangat wajar jika kebanyakan dari browser-browser yang ada hanya mengimplementasikan bagian-bagian yang tidak terlalu sulit.\n\nSebuah halaman yang bagus untuk melihat kondisi terkini dari fitur yang didukung oleh bahasa ini ialah (isinya banyak, kita masih banyak yang belum dipelajari)\n\nSebagai programmer, kita suka untuk menggunakan fitur yang terbaru. lebih banyak fitur bagus - lebih baik lagi!\n\ndi sisi lain, bagaimana membuat kodingan modern bekerja di mesin yang lama yang tidak mengetahui fitur-fitur terbaru ?\n\nAda dua cara untuk itu:\n\n1. Transpilers.\n2. Polyfills.\n\ndi chapter ini, tujuan kita adalah untuk mendapatkan intisari cara kerjanya, dan tempatnya dalam proses pengembangan web.\n\n## Transpilers\n\nSebuah [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler) adalah perangkat lunak khusus yang dapat mengurai (\"membaca dan memahami\") kode modern, dan menulis ulang menggunakan konstruksi sintaks yang lebih lama, sehingga hasilnya akan sama.\n\nMisalnya. JavaScript sebelum tahun 2020 tidak memiliki \"nullish coalescing operator\" `??`. Jadi, jika pengunjung menggunakan browser yang sudah ketinggalan zaman, ia mungkin gagal memahami kode seperti `height = height ?? 100`\n\nSebuah transpiler akan menganalisa kodingan kita dan menulis `height ?? 100` menjadi `(height !== undefined && height !== null) ? height : 100`.\n\n```js\n// sebelum menjalankan transpiler\nheight = height ?? 100;\n\n// setelah transpile dijalankan\nheight = (height !== undefined && height !== null) ? height : 100;\n```\n\nSekarang kode yang ditulis ulang cocok untuk mesin JavaScript lama.\n\nBiasanya, pengembang menjalankan transpiler di komputer mereka sendiri, dan kemudian menyebarkan kode yang ditranspilasi ke server.\n\nBerbicara tentang nama, [Babel](https://babeljs.io) adalah salah satu transpiler paling terkenal di luar sana. \n\nSistem pembangunan proyek modern, seperti [webpack](http://webpack.github.io/), menyediakan sarana untuk menjalankan transpiler secara otomatis pada setiap perubahan kode, sehingga sangat mudah untuk diintegrasikan ke dalam proses pengembangan.\n\n## Polyfills\n\nFitur bahasa baru tidak hanya mencakup konstruksi dan operator sintaks, tetapi juga fungsi bawaan.\n\nMisalnya, `Math.trunc (n)` adalah fungsi yang \"memotong\" bagian desimal dari sebuah angka, misalnya `Math.trunc (1.23) = 1`.\n\nDi beberapa mesin JavaScript (sangat usang), tidak ada `Math.trunc`, jadi kode seperti itu akan gagal.\n\nkarena kita berbicara tentang fungsi baru, bukan perubahan sintaks, tidak perlu mentranspilasi apa pun di sini. Kita hanya perlu mendeklarasikan fungsi yang hilang.\n\nSkrip yang memperbarui / menambahkan fungsi baru disebut \"polyfill\". Ini \"mengisi\" celah dan menambahkan implementasi yang hilang.\n\nUntuk kasus khusus ini, polyfill untuk `Math.trunc` adalah skrip yang mengimplementasikannya, seperti ini:\n\n```js\nif (!Math.trunc) { // kalo ga ada fungsi seperti ini\n // implementasikan\n Math.trunc = function(number) {\n // Math.ceil dan Math.floor ada bahkan di mesin JavaScript yang lama\n // mereka akan dibahas nanti di tutorial\n return number < 0 ? Math.ceil(number) : Math.floor(number);\n };\n}\n```\n\nJavaScript adalah bahasa yang sangat dinamis, skrip dapat menambah / memodifikasi fungsi apa pun, bahkan termasuk yang sudah ada di dalamnya.\n\nDua library polyfill yang menarik adalah:\n- [core js](https://github.com/zloirock/core-js) yang mendukung banyak hal, memungkinkan untuk kita memasukkan hanya fitur yang dibutuhkan.\n- [polyfill.io](http://polyfill.io) layanan yang menyediakan skrip dengan polyfills, bergantung pada fitur dan browser pengguna.\n\n\n## Kesimpulan\n\nDi bab ini, kami ingin memotivasi Anda untuk mempelajari fitur bahasa modern dan bahkan \"yang paling mutakhir\", meskipun fitur tersebut belum didukung dengan baik oleh mesin JavaScript.\n\nJangan lupa untuk menggunakan transpiler (jika menggunakan sintaks atau operator modern) dan polyfill (untuk menambahkan fungsi yang mungkin hilang). Dan mereka akan memastikan bahwa kodenya berfungsi.\n\nMisalnya, nanti saat Anda sudah terbiasa dengan JavaScript, Anda dapat menyiapkan sistem pembuatan kode berdasarkan [webpack](http://webpack.github.io/) dengan [babel-loader](https://github.com/babel/babel-loader).\n\nSumber daya bagus yang menunjukkan status dukungan saat ini untuk berbagai fitur:\n- - untuk JavaScript murni.\n- - untuk fungsi terkait dengan browser.\n\nP.S. Google Chrome biasanya paling mutakhir dengan fitur bahasa, coba saja jika demo tutorial gagal. Sebagian besar demo tutorial berfungsi dengan browser modern apa pun." }, { "path": "1-js/03-code-quality/index.md", "content": "# Kualitas Kode\n\nBab ini menjelaskan tentang *coding practices* yang akan kita selanjutnya gunakan di proses *development*.\n" }, { "path": "1-js/04-object-basics/01-object/2-hello-object/solution.md", "content": "\n\n```js\nlet user = {};\nuser.name = \"John\";\nuser.surname = \"Smith\";\nuser.name = \"Pete\";\ndelete user.name;\n```\n\n" }, { "path": "1-js/04-object-basics/01-object/2-hello-object/task.md", "content": "nilai penting: 5\n\n---\n\n# Hello, object\n\nTulis kode, satu baris untuk setiap aksi:\n\n1. Buatlah sebuah objek kosong `user`.\n2. Tambahkan properti `name` dengan nilai `John`.\n3. Tambahkan properti `surname` dengan nilai `Smith`.\n4. Ubah nilai `name` menjadi `Pete`.\n5. Hapus properti `name` dari objek.\n\n" }, { "path": "1-js/04-object-basics/01-object/3-is-empty/_js.view/solution.js", "content": "function isEmpty(obj) {\n for (let key in obj) {\n // jika perulangan dimulai, berarti ada sebuah properti\n return false;\n }\n return true;\n}\n" }, { "path": "1-js/04-object-basics/01-object/3-is-empty/_js.view/test.js", "content": "describe(\"isEmpty\", function() {\n it(\"returns true for an empty object\", function() {\n assert.isTrue(isEmpty({}));\n });\n\n it(\"returns false if a property exists\", function() {\n assert.isFalse(isEmpty({\n anything: false\n }));\n });\n});" }, { "path": "1-js/04-object-basics/01-object/3-is-empty/solution.md", "content": "Lakukanlah perulangan pada objek dan segera `return false` jika ada setidaknya satu properti" }, { "path": "1-js/04-object-basics/01-object/3-is-empty/task.md", "content": "nilai penting: 5\n\n---\n\n# cek kekosongan\n\nTulislah sebuah fungsi `isEmpty(obj)` yang mana akan mengembalikan `true` jika objek tidak memiliki properti dan `false` jika sebaliknya.\n\nHarus bekerja seperti ini:\n\n```js\nlet schedule = {};\n\nalert( isEmpty(schedule) ); // true\n\nschedule[\"8:30\"] = \"get up\";\n\nalert( isEmpty(schedule) ); // false\n```\n\n" }, { "path": "1-js/04-object-basics/01-object/5-sum-object/solution.md", "content": "\n```js run\nlet salaries = {\n John: 100,\n Ann: 160,\n Pete: 130\n};\n\nlet sum = 0;\nfor (let key in salaries) {\n sum += salaries[key];\n}\n\nalert(sum); // 390\n```\n\n" }, { "path": "1-js/04-object-basics/01-object/5-sum-object/task.md", "content": "nilai penting: 5\n\n---\n\n# Tambahkan properti objek\n\nKita punya sebuah objek untuk menyimpan gaji dari tim kita:\n\n```js\nlet salaries = {\n John: 100,\n Ann: 160,\n Pete: 130\n}\n```\n\nTulislah kode untuk menambahkan seluruh gaji dan simpanlah didalam sebuah variabel `sum`. Haruslah menjadi `390` di contoh diatas.\n\nJika `salaries` kosong, selanjutnya hasilnya haruslah `0`." }, { "path": "1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/solution.js", "content": "function multiplyNumeric(obj) {\n for (let key in obj) {\n if (typeof obj[key] == 'number') {\n obj[key] *= 2;\n }\n }\n}" }, { "path": "1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/source.js", "content": "let menu = {\n width: 200,\n height: 300,\n title: \"My menu\"\n};\n\n\nfunction multiplyNumeric(obj) {\n \n /* Tulis kodemu disini */\n\n}\n\nmultiplyNumeric(menu);\n\nalert( \"menu width=\" + menu.width + \" height=\" + menu.height + \" title=\" + menu.title );\n\n" }, { "path": "1-js/04-object-basics/01-object/8-multiply-numeric/_js.view/test.js", "content": "describe(\"multiplyNumeric\", function() {\n it(\"multiplies all numeric properties by 2\", function() {\n let menu = {\n width: 200,\n height: 300,\n title: \"My menu\"\n };\n let result = multiplyNumeric(menu);\n assert.equal(menu.width, 400);\n assert.equal(menu.height, 600);\n assert.equal(menu.title, \"My menu\");\n });\n\n it(\"returns nothing\", function() {\n assert.isUndefined( multiplyNumeric({}) );\n });\n\n});\n" }, { "path": "1-js/04-object-basics/01-object/8-multiply-numeric/solution.md", "content": "" }, { "path": "1-js/04-object-basics/01-object/8-multiply-numeric/task.md", "content": "nilai penting: 3\n\n---\n\n# Kalikan properti numerik dengan 2\n\nBuatlah sebuah fungsi `multiplyNumerik(obj)` yang mengkalikan seluruh properti numerik dari `obj` dengan `2`.\n\nContoh:\n\n```js\n// sebelum dipanggil\nlet menu = {\n width: 200,\n height: 300,\n title: \"My menu\"\n};\n\nmultiplyNumeric(menu);\n\n// setelah dipanggil\nmenu = {\n width: 400,\n height: 600,\n title: \"My menu\"\n};\n```\n\nPerhatikan bahwa `multiplyNumeric` tidak butuh mengembalikan apapun. Fungsinya harus memodifikasi objectnya langsung.\n\nCatatan, gunakan `typeof` untuk memeriksa angka disini.\n\n\n" }, { "path": "1-js/04-object-basics/01-object/article.md", "content": "\n# Objek\n\nSeperti yang kita tahu dari bab , ada delapan tipe data di JavaScript. Enak dari mereka disebut \"primitif\", karena nilai mereka berisi cuma satu hal tunggal (entah string atau angka atau apapun).\n\nKontrasnya, objek dipakai untuk menyimpan koleksi terkunci dari berbagai data dan entitas rumit lainnya. Di JavaScript, objek menembus hampir tiap aspek bahasa. Jadi kita harus memahami mereka dulu sebelum masuk lebih dalam ke manapun.\n\nTiap objek bisa dibuat dengan tanda bracket `{…}` dengan daftar *properti* opsional. Properti ialah pasangan \"key: value\", di mana `key` string (juga disebut \"nama properti\"), dan `value` bisa apapun.\n\nKita bisa bayangkan objek sebagai kabinet dengan file bertanda. Tiap potong data disimpan di dalam filenya dengan kuncinya. Mudah mencari filenya dengan namanya atau menambah/menghapus satu file.\n\n![](object.svg)\n\nObjek kosong (\"kabinet kosong\") bisa dibuat memakai salah satu dari dua syntax:\n\n```js\nlet user = new Object(); // syntax \"konstruktor objek\"\nlet user = {}; // syntax \"literal objek\"\n```\n\n![](object-user-empty.svg)\n\nBiasanya, tanda bracket `{...}` dipakai. Deklarasi itu disebut *literal objek*.\n\n## Literal dan properti\n\nKita bisa segera menaruh beberapa properti ke dalam `{...}` sebagai pasangan \"key: value\":\n\n```js\nlet user = { // objek\n name: \"John\", // dengan kunci \"name\" menyimpan nilai \"John\"\n age: 30 // dengan kunci \"age\" menyimpan nilai 30\n};\n```\n\nProperti punya kunci (juga disebut \"nama\" atau \"identifier\") sebelum colon `\":\"` dan nilai di sebelah kanannya.\n\nDalam objek `user`, ada dua properti:\n\n1. Properti pertama punya nama `\"name\"` dan nilai `\"John\"`.\n2. Yang kedua punya nama `\"age\"` dan nilai `30`.\n\nHasil objek `user` bisa dibayangkan sebagai kabinet dengan dua file bertanda dengan label \"name\" dan \"age\".\n\n![user object](object-user.svg)\n\nKita bisa tambah, hapus dan baca file darinya kapanpun.\n\nNilai properti bisa diakses memakai notasi dot:\n\n```js\n// ambil nilai properti objek:\nalert( user.name ); // John\nalert( user.age ); // 30\n```\n\nNilainya bisa tipe apapun. Ayo tambah nilai boolean:\n\n```js\nuser.isAdmin = true;\n```\n\n![user object 2](object-user-isadmin.svg)\n\nUntuk menghapus properti, kita bisa pakai operator `delete`:\n\n```js\ndelete user.age;\n```\n\n![user object 3](object-user-delete.svg)\n\nKita juga bisa memakai nama properti multi-kata, tapi mereka harus diquotasi:\n\n```js\nlet user = {\n name: \"John\",\n age: 30,\n \"likes birds\": true // nama properti multi-kata harus diquotasi\n};\n```\n\n![](object-user-props.svg)\n\n\nProperti terakhir di daftar bisa berakhir dengan koma:\n```js\nlet user = {\n name: \"John\",\n age: 30*!*,*/!*\n}\n```\nItu disebut koma \"buntut\" atau \"menggantung\". Memudahkan kita menambah/menghapus/memindahkan properti, karena semua barus menjadi mirip.\n\n## Kurung siku\n\nUntuk properti multi-kata, akses dot tak bekerja:\n\n```js run\n// ini akan memberi galat syntax\nuser.likes birds = true\n```\n\nJavascript tidak akan mengerti itu dan akan menganggap kita mencoba mengakses `user.likes`, lalu akan memberikan sintaks error saat sampai ke bagian yang tidak terduga `birds`.\n\nTitik/dot membutukan sebuah kunci/key untuk menjadi identifier yang valid. Berarti: tidak ada spasi, tidak dimulai dengan angka dan tidak mengandung karakter khusus (`$` dan `_` diperbolehkan).\n\nAda alternatif \"notasi bracket kotak\" yang bekerja dengan string apapun:\n\n```js run\nlet user = {};\n\n// set\nuser[\"likes birds\"] = true;\n\n// get\nalert(user[\"likes birds\"]); // true\n\n// delete\ndelete user[\"likes birds\"];\n```\n\nSekarang semuanya oke. Tolong catat bahwa string di dalam bracket diquotasi dengan benar (bisa tipe quotasi apapun).\n\nBracket kotak juga menyediakan cara memperoleh nama properti sebagai hasil expresi -- lawannya string literal -- seperti dari variabel berikut:\n\n```js\nlet key = \"likes birds\";\n\n// sama dengan user[\"likes birds\"] = true;\nuser[key] = true;\n```\n\nDi sini, variabel `key` bisa dikalkulasi saat run-time atau tergantung input user. Lalu kita pakai untuk mengakses properti. Ini memberi kita flexibilitas yang sangat besar.\n\nMisalnya:\n\n```js run\nlet user = {\n name: \"John\",\n age: 30\n};\n\nlet key = prompt(\"What do you want to know about the user?\", \"name\");\n\n// akses dari variabel\nalert( user[key] ); // John (jika mengenter \"name\")\n```\n\nNotasi dot tak bisa dipakai dalam cara serupa:\n\n```js run\nlet user = {\n name: \"John\",\n age: 30\n};\n\nlet key = \"name\";\nalert( user.key ) // undefined\n```\n\n### Properti terkomputasi\n\nKita bisa menggunakan kurung siku didalam objek literal, ketika kita membuat objek. Dipanggil dengan *properti terkomputasi*\n\nMisalnya:\n\n```js run\nlet fruit = prompt(\"Which fruit to buy?\", \"apple\");\n\nlet bag = {\n*!*\n [fruit]: 5, // nama properti diambil dari variabel fruit\n*/!*\n};\n\nalert( bag.apple ); // 5 jika fruit=\"apple\"\n```\n\nArti properti terkomputasi simpel: `[fruit]` artinya nama properti harus diambil dari `fruit`.\n\nJadi, jika pengunjung mengenter `\"apple\"`, `bag` akan menjadi `{apple: 5}`.\n\nEssensinya, ia bekerja mirip dengan:\n```js run\nlet fruit = prompt(\"Which fruit to buy?\", \"apple\");\nlet bag = {};\n\n// ambil nama properti dari variabel fruit\nbag[fruit] = 5;\n```\n\n...Tapi lebih manis.\n\nKita bisa pakai expresi rumit di dalam bracket kotak:\n\n```js\nlet fruit = 'apple';\nlet bag = {\n [fruit + 'Computers']: 5 // bag.appleComputers = 5\n};\n```\n\nBracket kotak jauh lebih kuat dari notasi dot. Mereka membolehkan variabel dan nama properti apapun. Tapi mereka juga lebih rumit untuk ditulis.\n\nJadi seringnya, saat nama properti diketahui dan simpel, dot dipakai. Dan jika kita butuh sesuatu yang rumit, maka kita ganti ke bracket kotak.\n\n## Singkatan nilai properti\n\nDi kode riil kita sering memakai variabel sebagai nilai untuk nama properti.\n\nMisalnya:\n\n```js run\nfunction makeUser(name, age) {\n return {\n name: name,\n age: age,\n // ...properti lainnya\n };\n}\n\nlet user = makeUser(\"John\", 30);\nalert(user.name); // John\n```\n\nDi contoh di atas, properti punya nama sama dengan variabel. Use-case penggunaan properti dari variabel sangat umum, bahwa ada *singkatan nilai properti* spesial yang memperpendek itu.\n\nKetimbang `name:name` kita bisa menuliskan `name`, seperti ini:\n\n```js\nfunction makeUser(name, age) {\n*!*\n return {\n name, // sama dengan name: name\n age // sama dengan age: age\n // ...\n };\n*/!*\n}\n```\n\nKita bisa pakai baik singkatan dan properti normal bersamaan dalam satu objek:\n\n```js\nlet user = {\n name, // sama dengan name:name\n age: 30\n};\n```\n\n\n## Batasan nama properti\n\nSeperti yang sudah kita tahu, sebuah variabel tidak bisa memiliki nama yang sama dengan salah satu \"kata yang telah dimiliki bahasa pemrograman\" seperti \"for\", \"let\", \"return\" dan lainnya.\n\nTapi dari sebuah properti objek, tidak ada batasan seperti itu:\n\n```js run\n// properti seperti ini bisa digunakan\nlet obj = {\n for: 1,\n let: 2,\n return: 3\n};\n\nalert( obj.for + obj.let + obj.return ); // 6\n```\n\nSingkatnya, tidak ada batasan dalam pemberian nama properti. Bisa digunakan string atau simbol apapun (untuk tipe identifier spesial, akan dibahas nanti).\n\nUntuk tipe lainnya akan secara otomatis diubah kebentuk string.\n\nContoh, angka `0` menjadi string `\"0\"` ketika digunakan sebagai kunci/key properti:\n\n```js run\nlet obj = {\n 0: \"test\" // sama dengan \"0\": \"test\"\n};\n\n// kedua alert mengakses properti yang sama (angka 0 diubah menjadi string \"0\")\nalert( obj[\"0\"] ); // test\nalert( obj[0] ); // test (properti yang sama)\n```\n\nAda hal kecil dengan properti spesial yang bernama `__proto__`. Kita tidak bisa mengatur nilai non-objek kedalamnya:\n\n```js run\nlet obj = {};\nobj.__proto__ = 5; // memasukan angka\nalert(obj.__proto__); // [object Object] - tidak ada nilai didalam objek, tidak bekerja seperti yang diinginkan\n```\n\nSeperti yang kita lihat didalam kode, memasukan nilai primitif `5` akan diabaikan.\n\nKita akan membahas sifat alami dari `__proto__` didalam [bab selanjutnya](info:prototype-inheritance), dan menyarankan [cara untuk membenarkan](info:prototype-methods) sifatnya.\n\n## Test sebuah keberadaan properti, operator \"in\"\n\nFitur yang bisa dicatat didalam objek Javascript, dibandingkan dengan bahasa lainnya, adalah memungkinkannya untuk mengakses properti apapun. Tidak akan terjadi error jika propertinya tidak ada!\n\nMembaca sebuah properti yang tidak ada akan mengembalikan `undefined`. Jadi kita akan dengan mudah mengetest apakah propertinya ada atau tidak:\n\n```js run\nlet user = {};\n\nalert( user.noSuchProperty === undefined ); // true artinya \"tak ada properti macam ini\"\n```\n\nAda juga operator spesial `\"in\"` untuk mengecek existensi properti.\n\nSyntaxnya:\n```js\n\"key\" in object\n```\n\nMisalnya:\n\n```js run\nlet user = { name: \"John\", age: 30 };\n\nalert( \"age\" in user ); // true, user.age ada\nalert( \"blabla\" in user ); // false, user.blabla tak ada\n```\n\nTolong ingat bahwa di sebelah kiri `in` harus ada *nama properti*. Itu biasanya string yang dikuotasi.\n\nJika kita menghilangkan kutipnya, berarti sebuah variabel, itu haruslah mengandung nama yang akan dites. Contoh:\n\n```js run\nlet user = { age: 30 };\n\nlet key = \"age\";\nalert( *!*key*/!* in user ); // true, properti \"age\" ada\n```\n\nLalu kenapa ada operator `in`? Bukankah cukup untuk membandingkannya dengan `undefined`?\n\nBaik, kebanyakan waktu perbandingan dengan `undefined` bekerja dengan semestinya. Akan tetapi ada kasus spesial dimana itu akan gagal, tapi dengan `\"in\"` akan berjalan dengan baik.\n\n\nItu ialah saat ada properti objek, tapi menyimpan `undefined`:\n\n```js run\nlet obj = {\n test: undefined\n};\n\nalert( obj.test ); // mengembalikan undefined, apakah propertinya tidak ada?\n\nalert( \"test\" in obj ); // true, propertinya ada!\n```\n\n\nDi contoh kode di atas, properti `obj.test` ada secara teknis. Tapi operator `in` bekerja dengan baik.\n\nSituasi seperti ini jarang terjadi, karena `undefined` biasanya tak ditetapkan. Kita sering memakai `null` untuk nilai \"unknown\" atau \"empty\". Jadi operator `in` merupakan tamu exotik dalam kode.\n````\n\n## \"for..in\"\n\nUntuk mengitari semua kunci objek, ada bentuk spesial dari loop: `for..in`. Ini sangat berbeda dari konstruksi `for(;;)` yang kita pelajari sebelumnya.\n\nSyntaxnya:\n\n```js\nfor (key in object) {\n // mengexekusi badan untuk tiap kunci dalam properti objek\n}\n```\n\nMisalnya, mari mengoutkan semua properti `user`:\n\n```js run\nlet user = {\n name: \"John\",\n age: 30,\n isAdmin: true\n};\n\nfor (let key in user) {\n // keys\n alert( key ); // name, age, isAdmin\n // nilai untuk key\n alert( user[key] ); // John, 30, true\n}\n```\n\nCatat bahwa semua konstruksi \"for\" membolehkan kita mendeklarasi variabel looping di dalam loop, seperti `let key` di sini.\n\nJuga, kita bisa memakai nama variabel lain di sini ketimbang `key`. Misalnya, `\"for (let prop in obj)\"` juga banyak dipakai.\n\n\n### Berurut seperti objek\n\nApa objek terurut? Dengan kata lain, jika kita meloop satu objek keseluruhan, apa kita mengambil semua properti dengan urutan yang sama saat mereka ditambahkan? Apa kita bisa percaya itu?\n\nJawaban pendeknya ialah: \"terurut dalam cara spesial\": properti integer terurut, yang lainnya muncul dalam urutan pembuatan. Detilnya mengikuti.\n\nMisalnya, mari pertimbangkan objek dengan kode telpon:\n\n```js run\nlet codes = {\n \"49\": \"Germany\",\n \"41\": \"Switzerland\",\n \"44\": \"Great Britain\",\n // ..,\n \"1\": \"USA\"\n};\n\n*!*\nfor (let code in codes) {\n alert(code); // 1, 41, 44, 49\n}\n*/!*\n```\n\nObjek ini digunakan untuk mensugesti daftar opsi ke pengguna. Jika kita membuat situs khusus untuk audiensi Jerman maka kita kemungkinan mau `49` jadi yang pertama.\n\nTapi jika kita menjalankan kodenya, kita lihat potret yang berbeda:\n\n- USA (1) goes first\n- then Switzerland (41) and so on.\n\nKode telpon berurut secara ascending, karena mereka integer. Jadi kita lihat `1, 41, 44, 49`.\n\n````smart header=\"Properti integer? Apa itu?\"\nIstilah \"properti integer\" di sini artinya string yang bisa dikonversi ke-dan-dari integer tanpa perubahan.\n\nJadi, \"49\" nama properti integer, karena mereka ditransform ke angka integer dan kebalikannya, ia masih sama saja. Tapi \"+49\" dan \"1.2\" tidak:\n\n```js run\n// Math.trunc is a built-in function that removes the decimal part\nalert( String(Math.trunc(Number(\"49\"))) ); // \"49\", sama, properti integer\nalert( String(Math.trunc(Number(\"+49\"))) ); // \"49\", tidak sama \"+49\" ⇒ bukan properti integer\nalert( String(Math.trunc(Number(\"1.2\"))) ); // \"1\", tidak sama \"1.2\" ⇒ bukan properti integer\n```\n````\n\n...Di sisi lain, jika kuncinya non-integer, maka mereka didaftar dalam urutan kreasi, misalnya:\n\n```js run\nlet user = {\n name: \"John\",\n surname: \"Smith\"\n};\nuser.age = 25; // tambah satu lagi\n\n*!*\n// properti non-integer didaftar dalam order kreasi\n*/!*\nfor (let prop in user) {\n alert( prop ); // name, surname, age\n}\n```\n\nJadi, untuk mengatasi isu kode telpon, kita bisa berbuat \"curang\" dengan menjadikan kode non-integer. Cukup menambahkan tanda plus `\"+\"` sebelum tiap kode.\n\nSeperti ini:\n\n```js run\nlet codes = {\n \"+49\": \"Germany\",\n \"+41\": \"Switzerland\",\n \"+44\": \"Great Britain\",\n // ..,\n \"+1\": \"USA\"\n};\n\nfor (let code in codes) {\n alert( +code ); // 49, 41, 44, 1\n}\n```\n\nSekarang itu bekerja sesuai yang diinginkan.\n\n## Ringkasan\n\nObjek adalah array asosiatif dengan beberapa fitur spesial.\n\nObjek menyimpan properti (pasangan key-value), dimana:\n- kunci/key properti haruslah sebuah string atau simbol (biasanya string).\n- Nilai bisa tipe apapun.\n\nUntuk mengakses properti, kita bisa gunakan:\n- Notasi dot: `obj.properti`.\n- Notasi kurung siku `obj[\"properti\"]`. Kurung siku memperbolehkan mengambil key dari sebuah variabel, seperti `obj[varDenganKey]`.\n\nOperator tambahan:\n- Untuk menghapus properti: `delete obj.prop`.\n- Untuk memeriksa jika properti dengan nilai yang diberikan ada: `\"key\" in obj`.\n- Untuk mengiterasi sebuah objek: `for (let key in obj)` loop.\n\nDi bab ini kita sudah belajar apa yang dipanggil dengan \"plain object\" atau \"Objek sederhana\" atau `Object`.\n\nMasuk ada banyak hal tentang objek didalam Javascript:\n\n- `Array` untuk menyimpan koleksi data,\n- `Date` untuk menyimpan informasi tentang tanggal dan waktu,\n- `Error` untuk menyimpan informasi tentang sebuah error.\n- ...Dan lainnya.\n\nMereka mempunyai fitur spesial lainnya yang akan kita pelajari nanti. Terkadang orang-orang berkata seperti \"Tipe array\" atau \"tipe tanggal/waktu\", akan tetapi secara formal mereka bukanlah tipe yang mereka miliki sendiri, tapi milik sebuah tipe data \"objek\" tunggal. dan mereka bisa meluas ke berbagai arah.\n\nObjek didalam Javascript sangatlah kuat. Kita baru saja belajar sedikit saja tentang topiknya yang sebenarnya sangat luas. Kita akan belajar lebih tentang objek dan belajar tentang objek di bagian selanjutnya." }, { "path": "1-js/04-object-basics/02-object-copy/article.md", "content": "# Referensi objek dan menyalinnya\n\nSalah satu perbedaan mendasar dari objek versus primitif adalah bahwa objek disimpan dan disalin \"dengan referensi\", sedangkan nilai primitif: string, angka, boolean, dll - selalu disalin \"sebagai nilai keseluruhan\".\n\nItu mudah dipahami jika kita melihat sedikit ke belakang tentang apa yang terjadi saat kita menyalin sebuah nilai.\n\nMari kita mulai dengan yang primitif, seperti string.\n\nDi sini kami memasukkan salinan `pesan` ke dalam` frase`:\n\n```js\nlet message = \"Hello!\";\nlet phrase = message;\n```\n\nSebagai hasilnya kita punya dua variabel yang berdiri sendiri, dan keduanya menyimpan nilai string `\"Hello!\"`.\n\n![](variable-copy-value.svg)\n\nHasil yang cukup jelas, bukan?\n\nObjek tidak seperti itu.\n\n**Sebuah variabel tidak menyimpan objek itu sendiri, akan tetapi \"disimpan didalam memori\", dengan kata lain \"mereferensi\" kepadanya (ke data didalam memori).**\n\nMari kita lihat contoh variabel tersebut:\n\n```js\nlet user = {\n name: \"John\"\n};\n```\n\nDan ini bagaimana kita menyimpannya di dalam memory:\n\n![](variable-contains-reference.svg)\n\nObjek disimpan di suatu tempat di memori (di sebelah kanan gambar), sedangkan variabel `user` (di sebelah kiri) memiliki\" referensi \"padanya.\n\nKita mungkin menganggap variabel objek, seperti `pengguna`, seperti selembar kertas dengan alamat objek di atasnya.\n\nSaat kita melakukan tindakan dengan objek, misalnya: mengambil properti `user.name`, mesin JavaScript melihat apa yang ada di alamat itu dan melakukan operasi pada objek sebenarnya.\n\nSekarang inilah mengapa itu penting.\n\n**Ketika sebuah variabel objek disalin -- referensinya akan tersalin, objeknya tidak terduplikasi.**\n\nContoh:\n\n```js no-beautify\nlet user = { name: \"John\" };\n\nlet admin = user; // menyalin referensinya\n```\n\nKita sekarang punya dua variabel, masing-masing mereferensi ke objek yang sama:\n\n![](variable-copy-reference.svg)\n\nSeperti yang Anda lihat, masih ada satu objek, sekarang dengan dua variabel yang mereferensikannya.\n\nKita dapat menggunakan variabel apa saja untuk mengakses objek dan mengubah isinya:\n\n\n```js run\nlet user = { name: 'John' };\n\nlet admin = user;\n\n*!*\nadmin.name = 'Pete'; // mengganti admin dengan menggunakan \"referensi\"\n*/!*\n\nalert(*!*user.name*/!*); // 'Pete', perubahan akan terlihat pada \"user\"\n```\n\nSeolah-olah kita memiliki lemari dengan dua kunci dan menggunakan salah satunya (admin) untuk masuk ke dalamnya dan membuat perubahan. Kemudian, jika nanti kita menggunakan kunci lain (pengguna), kita masih membuka lemari yang sama dan dapat mengakses konten yang diubah.\n\n## Perbandingan dengan referensi\n\n**Dua objek adalah sama jika mereka objek yang sama.**\n\nDibawah adalah dua variabel yang mereferensi ke objek yang sama, dengan demikian mereka sama:\n\nContohnya, di sini a dan b mereferensikan objek yang sama, sehingga keduanya sama:\n\n```js run\nlet a = {};\nlet b = a; // menyalin referensi\n\nalert( a == b ); // true, kedua variabel mereferensi ke objek yang sama\nalert( a === b ); // true\n```\n\nDan dibawah adalah dua objek yang berdiri sendiri, tidaklah sama, walaupun keduanya kosong:\n\n```js run\nlet a = {};\nlet b = {}; // dua objek yang berdiri sendiri\n\nalert( a == b ); // false\n```\n\nUntuk perbandingan seperti `obj1 > obj2` atau untuk perbandingan dengan sebuah nilai primitif `obj == 5`, objek akan diubah dahulu menjadi primitif. Kita akan belajar bagaimana perubahan objek sebentar lagi, akan tetapi sebenarnya, perbandingan seperti itu muncul sangat jarang, biasanya hanya sebuah hasil dari kesalahan koding.\n\n## Penggandaan dan penggabungan, Object.assign [#cloning-and-merging-object-assign]\n\nJadi, menyalin sebuah variabel objek akan menciptakan satu lagi referensi kepada objek yang sama.\n\nTapi bagaimana jika kita butuh untuk menduplikasi objek? Membuat salinan yang berdiri sendiri, menggandakan atau meng-klon?\n\nHal itu juga bisa dilakukan, tapi sedikit lebih sulit, karena tidak ada method bawaan untuk hal itu di javascript. Sebenarnya, hal itu juga jarang dibutuhkan. Di kebanyakan waktu, menyalin referensinya sudah cukup.\n\nTapi bagaimana jika kita benar-benar ingin hal itu, lalu kita membutuhkan untuk menciptakan sebuah objek dan mengulangi struktur dari objek yang sama dengan meng-iterasi propertinya dan menyalin mereka didalam level primitif.\n\nSeperti ini:\n\n```js run\nlet user = {\n name: \"John\",\n age: 30\n};\n\n*!*\nlet clone = {}; // objek kosong baru\n\n// salin semua properti user kedalamnya\nfor (let key in user) {\n clone[key] = user[key];\n}\n*/!*\n\n// sekarang clone adalah sebuah objek yang berdiri sendiri dengan konten yang sama\nclone.name = \"Pete\"; // ubah data didalamnya\n\nalert( user.name ); // masih John didalam objek yang asli\n```\n\nJuga kita bisa menggunakan method [Object.assign](mdn:js/Object/assign) untuk itu.\n\nsintaksnya adalah:\n\n```js\nObject.assign(dest, [src1, src2, src3...])\n```\n\n- Argumen pertama `dest` adalah sebuah objek target.\n- Argumen selanjutnya `src1, ..., srcN` (bisa sebanyak yang dibutuhkan) adalah objek sumber.\n- Itu akan menyalin properti dari seluruh objek sumber `src1, ..., srcN` kedalam target `dest`. Dengan kata lain, properti dari semua argumen dimulai dari argumen kedua akan disalin kedalam object pertama.\n- Setelah pemanggilan akan mengembalikan `dest`.\n\n\nContoh, kita bisa menggunakan untuk menggabungkan beberapa objek menjadi satu:\n```js\nlet user = { name: \"John\" };\n\nlet permissions1 = { canView: true };\nlet permissions2 = { canEdit: true };\n\n*!*\n// menyalin seluruh properti dari permission1 dan permission2 kedalam user\nObject.assign(user, permissions1, permissions2);\n*/!*\n\n// sekarang user = { name: \"John\", canView: true, canEdit: true }\n```\n\nJika nama dari properti yang disali sudah ada, propertinya akan ditimpa:\n\n```js run\nlet user = { name: \"John\" };\n\nObject.assign(user, { name: \"Pete\" });\n\nalert(user.name); // sekarang user = { name: \"Pete\" }\n```\n\nKita juga bisa menggunakan `Object.assign` untuk mengganti perulangan `for...in` untuk penggandaan yang sederhana.\n\n```js\nlet user = {\n name: \"John\",\n age: 30\n};\n\n*!*\nlet clone = Object.assign({}, user);\n*/!*\n```\n\nKode diatas akan menyalin seluruh properti dari `user` kedalam objek yang kosong dan mengembalikan/me-return hasilnya.\n\nAda juga metode lain untuk mengkloning objek, mis. menggunakan [sintaksis spread](info:rest-parameters-spread) `clone = {...user}`, dibahas nanti dalam tutorial.\n\n## Nested cloning\n\nSampai sekarang kita telah berasumsi bahwa seluruh properti dari `user` adalah primitif. Tapi properti bisa di referensi ke objek lainnya. Apa yang harus dilakukan dengan mereka?\n\nLike this:\n```js run\nlet user = {\n name: \"John\",\n sizes: {\n height: 182,\n width: 50\n }\n};\n\nalert( user.sizes.height ); // 182\n```\n\nNow it's not enough to copy `clone.sizes = user.sizes`, because the `user.sizes` is an object, it will be copied by reference. So `clone` and `user` will share the same sizes:\nSekarang hal itu tidak cukup untuk menyalin `clone.sizes = user.sizes`, karena `user.sizes` adalah sebuah objek, itu akan tersalin secara referensi. Jadi `clone` dan `user` akan berbagi objek yang sama:\n\nLike this:\n\n```js run\nlet user = {\n name: \"John\",\n sizes: {\n height: 182,\n width: 50\n }\n};\n\nlet clone = Object.assign({}, user);\n\nalert( user.sizes === clone.sizes ); // true, objek yang sama\n\n// user dan clone akan berbagi objek yang sama\nuser.sizes.width++; // ganti properti dari satu tempat\nalert(clone.sizes.width); // 51, melihat hasilnya ditempat yang lain\n```\n\nUntuk membenarkan hal itu, kita harus menggunakan perulangan kloning yang memeriksa setip nilai dari `user[key]` dan, jika itu adalah sebuah objek, lalu duplikasi strukturnya juga. Hal itu dinamakan dengan \"deep cloning\".\n\nWe can use recursion to implement it. Or, to not reinvent the wheel, take an existing implementation, for instance [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep) from the JavaScript library [lodash](https://lodash.com).\n\n\n````smart header=\"Const objects can be modified\"\nAn important side effect of storing objects as references is that an object declared as `const` *can* be modified.\n\nFor instance:\n\n```js run\nconst user = {\n name: \"John\"\n};\n\n*!*\nuser.name = \"Pete\"; // (*)\n*/!*\n\nalert(user.name); // Pete\n```\n\nSepertinya baris `(*)` akan menyebabkan kesalahan, tetapi sebenarnya tidak. Nilai dari `user` adalah konstan, itu harus selalu mereferensikan objek yang sama, tetapi properti dari objek tersebut bebas untuk berubah.\n\nDengan kata lain, `const user` memberikan kesalahan hanya jika kita mencoba menyetel` user = ... `secara keseluruhan.\n\nyang berarti, jika kita benar-benar perlu membuat properti objek konstan, itu juga mungkin, tetapi menggunakan metode yang sama sekali berbeda. Kita akan membahasnya di bab .\n````\n\n\n## Ringkasan\n\nobjek dibuat dan disalin dengan menggunakan referensi. Dengan kata lain, sebuah variable menyimpan bukanlah \"nilai objek\", tapi sebuah \"referensi\" (address/alamat di memori) untuk nilainya. Jadi menyalin sebuah variabel atau memindahkannya sebagai fungsi argumen akan menyalin referensinya, bukan objeknya.\n\nSemua operasi yang disalin dengan menggunakan referensi (seperti menambah/menghapus properti) dilakukan didalam satu objek yang sama.\n\nUntuk membuat \"salinan asli\" (kloning) kita dapat menggunakan `Object.assign` untuk apa yang disebut \"shallow copy\"(objek bersarang disalin dengan referensi) atau fungsi\"deep cloning\", seperti [_.cloneDeep (obj)](https://lodash.com/docs#cloneDeep). \n\n\n\n\n" }, { "path": "1-js/04-object-basics/03-garbage-collection/article.md", "content": "# Pengumpulan sampah (_Garbage collection_)\n\nManajemen memori di JavaScript dilakukan secara otomatis dan tak terlihat oleh kita. Kita membuat _primitive_, objek, fungsi... Semua yang membutuhkan memori.\n\nApa yang terjadi ketika sesuatu yang telah kita buat tersebut sudah tidak diperlukan? Bagaimana _engine_ JavaScript menemukan dan membersihkannya?\n\n## Keterjangkauan (_Reachability_)\n\nKonsep utama manajemen memori di JavaScript ialah *keterjangkauan*.\n\nSederhananya, sebuah nilai yang \"terjangkau\" adalah mereka yang masih dapat diakses atau dapat digunakan. Mereka dapat dipastikan tersimpan di memori.\n\n1. Ada sekumpulan nilai-nilai yang terjangkau secara inheren, yang tak dapat dihapus untuk alasan yang jelas.\n\n Contohnya:\n\n - Variabel lokal dan parameter-parameter dari fungsi (yang di eksekusi) saat ini.\n - Variabel-variabel dan parameter-parameter dari fungsi-fungsi lain yang terkait dengan rantai panggilan bersarang saat ini.\n - Variabel-variabel global.\n - (ada beberapa hal lain, yang internal juga)\n\n Nilai-nilai tadi disebut *roots*.\n\n2. Nilai lainnya dianggap terjangkau jika dapat dijangkau dari sebuah _root_ melalui sebuah rujukkan atau rantai rujukkan.\n\n Contoh, jika terdapat sebuah objek didalam global variabel, dan objek tersebut memiliki sebuah properti yang mereferensi objek lain, objek itu dianggap dapat dijangkau. Dan referensinya juga bisa dijangkau. Contoh lengkap dibawah ini.\n\nAda sebuah _background process_ di _engine_ JavaScript yang disebut [garbage collector](https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)). Ia mengamati seluruh objek dan menyingkirkan semua yang sudah tak terjangkau.\n\n## Contoh Sederhana\n\nBerikut adalah contoh paling sederhana:\n\n```js\n// user memiliki rujukkan terhadap objek\nlet user = {\n name: \"John\"\n};\n```\n\n![](memory-user-john.svg)\n\nTanda panah disini menggambarkan sebuah rujukkan objek. Variabel global `\"user\"` merujuk objek `{name: \"John\"}` (kita sebut John supaya singkat). _Property_ `\"name\"` dari objek John menyimpan sebuah _primitive_, jadi itu disematkan di dalam objek.\n\nJika nilai dari `user` ditimpa, maka rujukkannya hilang:\n\n```js\nuser = null;\n```\n\n![](memory-user-john-lost.svg)\n\nSekarang John menjadi tak terjangkau. Tak ada cara untuk mengaksesnya, tak ada rujukkan terhadapnya. _Garbage collector_ akan membuang data tersebut and membebaskan memori.\n\n## Dua rujukkan\n\nSekarang bayangkan kita menyalin rujukkan dari `user` ke `admin`:\n\n```js\n// user memiliki rujukkan terhadap objek\nlet user = {\n name: \"John\"\n};\n\n*!*\nlet admin = user;\n*/!*\n```\n\n![](memory-user-john-admin.svg)\n\nSekarang jika kita melakukan hal yang sama:\n```js\nuser = null;\n```\n\n...Maka objek \"John\" tersebut masih bisa dijangkau lewat variabel global `admin`, jadi masih ada di memori. Jika kita menimpa `admin` juga, barulah dapat dihilangkan.\n\n## Objek-objek yang saling terkait\n\nSekarang contoh yang lebih kompleks. Keluarga:\n\n```js\nfunction marry(man, woman) {\n woman.husband = man;\n man.wife = woman;\n\n return {\n father: man,\n mother: woman\n }\n}\n\nlet family = marry({\n name: \"John\"\n}, {\n name: \"Ann\"\n});\n```\n\nFungsi `marry` \"mengawinkan\" dua objek dengan memberikan keduanya rujukkan satu sama lain dan mengembalikan sebuah objek baru yang berisikan kedua objek tersebut.\n\nHasil struktur memorinya ialah :\n\n![](family.svg)\n\nDisini, semua objek terjangkau.\n\nSekarang mari hapus dua rujukkan:\n\n```js\ndelete family.father;\ndelete family.mother.husband;\n```\n\n![](family-delete-refs.svg)\n\nTak cukup hanya dengan menghapus salah satu dari dua rujukkan tersebut, karena semua objek masih bisa dijangkau.\n\nTetapi jika kita menghapus keduanya, maka dapat kita lihat bahwa John tak lagi memiliki objek yang merujukkannya:\n\n![](family-no-father.svg)\n\nRujukkan keluar (_outgoing reference_) tidak masalah. Hanya rujukkan masuk (_incoming reference_) yang dapat membuat sebuah objek terjangkau. Jadi, sekarang John tak terjangkau dan akan dihapus dari memori bersama semua datanya yang juga tak dapat diakses.\n\nSetelah _garbage collection_:\n\n![](family-no-father-2.svg)\n\n## Pulau tak terjangkau\n\nMungkin saja satu kumpulan (pulau) objek yang saling tertaut menjadi tak terjangkau dan dihapus dari memori.\n\nObjeknya sama seperti diatas. Kemudian:\n\n```js\nfamily = null;\n```\n\nGambaran _in-memory_-nya menjadi:\n\n![](family-no-family.svg)\n\nContoh ini menunjukkan bagaimana pentingnya konsep keterjangkauan (_reachability_).\n\nSudah jelas bahwa John dan Ann masih tertaut, keduanya memiliki rujukkan masuk. Tapi itu saja tak cukup.\n\nObjek `\"family\"` diatas telah menjadi tak terhubung dengan _root_, tak ada lagi rujukkan terhadapnya, sehingga keseluruhan pulau kumpulan objek tersebut menjadi tak terjangkau dan akan dihapus.\n\n## Algoritma internal\n\nAlgoritma _garbage collection_ dasar disebut _\"mark-and-sweep\"_.\n\nLangkah _\"garbage collection\"_ berikut dilakukan secara teratur:\n\n- _Garbage collector_ mengambil objek _roots_ dan \"menandai\" (_marks_ / mengingat) mereka.\n- Kemudian ia mendatangi dan \"menandai\" semua rujukkannya.\n- Kemudian ia mendatangi objek yang telah ditandai tersebut dan menandai rujukkan *mereka*. Semua objek yang telah dikunjungi akan diingat, agar nantinya tidak mengunjungi objek yang sama dua kali.\n- ...Dan seterusnya sampai semua rujukkan yang dapat dijangkau (dari _roots_) telah dikunjungi.\n- Semua objek kecuali yang ditandai akan dihapus.\n\nContohnya, semisal kita memiliki struktur objek seperti berikut:\n\n![](garbage-collection-1.svg)\n\nDapat kita lihat dengan jelas \"pulau tak terjangkau\" di sisi kanan. Sekarang mari kita lihat bagaimana _\"mark-and-sweep\" garbage collector_ berurusan dengannya.\n\nLangkah pertama menandai _roots_-nya:\n\n![](garbage-collection-2.svg)\n\nKemudian rujukkannya ditandai:\n\n![](garbage-collection-3.svg)\n\n...Dan kemudian rujukkan dalamnya juga, jika masih ada:\n\n![](garbage-collection-4.svg)\n\nSekarang objek-objek yang tak dapat dikunjungi selama proses berlangsung dianggap tak terjangkau (_unreachable_) dan akan dihapus:\n\n![](garbage-collection-5.svg)\n\nKita juga bisa membayangkan proses tersebut sebagai menumpahkan ember cat dari _roots_, yang mengalir ke semua rujukkan dan menandai semua objek yang terjangkau. Yang tidak tertandai akan dihapus.\n\nItu merupakan konsep dari bagaimana cara kerja _garbage collection_. _Engines_ JavaScript menerapkan banyak optimisasi untuk membuatnya berjalan lebih cepat dan tanpa mempengaruhi eksekusi.\n\nBeberapa optimisasi:\n\n- **Generational collection** -- objek-objek dibagi kedalam dua set: \"yang baru\" dan \"yang lama\". Kebanyakan objek muncul, melakukan tugasnya dan mati dengan cepat, mereka dapat dibersihkan secara agresif. Mereka yang bertahan cukup lama, akan menjadi \"yang lama\" dan tak akan sering diperiksa.\n- **Incremental collection** -- Jika terdapat banyak objek-objek, dan kita mencoba menapaki sambil menandai keseluruhan set objek sekaligus, itu dapat memakan waktu dan menimbulkan keterlambatan yang terlihat dalam eksekusi. Jadi _engine_ akan mencoba untuk memecah proses _garbage collection_ menjadi bagian-bagian kecil. Kemudian bagian-bagian kecil tersebut akan dieksekusi satu-persatu, secara terpisah. Itu memerlukan pencatatan ekstra diantara mereka untuk melacak perubahan, tetapi jadinya kta hanya mengalami keterlambatan kecil yang banyak daripada satuan yang besar.\n- **Idle-time collection** -- _garbage collector_ akan mencoba untuk jalan hanya ketika _CPU_ sedang _idle_, untuk mengurangi kemungkinan efek pada eksekusi.\n\nTerdapat optimisasi-optimisasi dan tipe-tipe lain dari algoritma _garbage collection_. Sebesar apapun keinginan untuk menjelaskannya disini, harus kutahan, karena _engines_ yang berbeda mengimplementasikan teknik dan _tweaks_ yang berbeda pula. Dan, yang lebih penting, hal-hal tersebut akan berubah seiring dengan pengembangan _engine_, jadi mempelajarinya lebih dalam \"di awal\", tanpa kebutuhan yang berarti mungkin akan sia-sia. Kecuali, tentu saja, jika itu merupakan murni masalah ketertarikan, maka ada beberapa tautan untukmu dibawah.\n\n## Ringkasan\n\nHal utama yang perlu diketahui:\n\n- Pengumpulan sampah (_Garbage collection_) dilakukan secara otomatis. Kita tidak bisa memaksa ataupun mencegahnya.\n- Objek-objek dipertahankan dalam memori selagi mereka terjangkau (_reachable_).\n- Menjadi yang dirujuk tidak sama dengan menjadi terjangkau (dari sebuah _root_): sekumpulan objek yang saling terkait dapat menjadi tak terjangkau sebagai keseluruhan.\n\n_Engine_ modern mengimplementasikan algoritma _garbage collection_ canggih (_advance_).\n\nBuku \"The Garbage Collection Handbook: The Art of Automatic Memory Management\" (R. Jones et al) mencakup beberapanya.\n\nJika kamu familiar dengan pemrograman _low-level_, informasi mendalam tentang _garbage collector_ V8 terdapat pada artikel [A tour of V8: Garbage Collection](http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection).\n\n[V8 blog](https://v8.dev/) juga mempublikasikan artikel-artikel tentang ubahan-ubahan dalam manajemen memori dari waktu ke waktu. Tentu saja, untuk belajar proses _garbage collection_, kamu lebih baik mempersiapkan diri dengan belajar tentang _internals_ V8 secara umum dan membaca blog [Vyacheslav Egorov](http://mrale.ph) yang merupakan salah seorang _engineer_ V8. Saya bilang: \"V8\", karena merupakan yang paling komprehensif di _cover_ oleh artikel-artikel di internet. Untuk _engine_ lainnya, pendekatannya kebanyakan mirip-mirip, tetapi _garbage collection_ berbeda dalam banyak aspek.\n\nPengetahuan mendalam mengenai _engines_ itu bagus ketika membutuhkan optimisasi _low-level_. Tapi akan lebih bijak untuk merencanakan itu sebagai langkah selanjutnya setelah kamu akrab dengan bahasanya (JavaScript). \n" }, { "path": "1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md", "content": "**Jawaban: error.**\n\nCoba ini:\n```js run\nfunction makeUser() {\n return {\n name: \"John\",\n ref: this\n };\n}\n\nlet user = makeUser();\n\nalert( user.ref.name ); // Error: Tidak bisa membaca properti 'name' dari undefined\n```\n\nHal itu karena aturan-aturan yang mengatur `this` tidak melihat definisi objek. Yang penting hanya momen saat panggilan terjadi.\n\nDi sini nilai dari `this` dalam `makeUser()` adalah `undefined`, karena dipanggil sebagai sebuah fungsi, tidak sebagai sebuah metode dengan sintaks \"tanda titik\".\n\nNilai `this` adalah satu untuk keseluruhan fungsi, blok kode serta penulisan objek tidak mempengaruhi nilai tersebut.\n\nJadi `ref: this` sebenarnya mengambil `this` yang sekarang dari fungsi tersebut.\n\nBerikut ini contoh kasus kebalikannya:\n\n```js run\nfunction makeUser() {\n return {\n name: \"John\",\n*!*\n ref() {\n return this;\n }\n*/!*\n };\n}\n\nlet user = makeUser();\n\nalert( user.ref().name ); // John\n```\n\nKini kode itu berfugsi, karena `user.ref()` adalah sebuah metode. Dan nilai dari `this` ditentukan ke objek sebelum tanda titik `.`.\n" }, { "path": "1-js/04-object-basics/04-object-methods/4-object-property-this/task.md", "content": "importance: 5\n\n---\n\n# Menggunakan \"this\" dalam penulisan objek\n\nBerikut ini adalah fungsi `makeUser` yang mengembalikan sebuah objek.\n\nApa hasil dari mengakses `ref`? Mengapa demikian?\n\n```js\nfunction makeUser() {\n return {\n name: \"John\",\n ref: this\n };\n}\n\nlet user = makeUser();\n\nalert( user.ref.name ); // Apa hasilnya?\n```\n\n" }, { "path": "1-js/04-object-basics/04-object-methods/7-calculator/_js.view/solution.js", "content": "let calculator = {\n sum() {\n return this.a + this.b;\n },\n\n mul() {\n return this.a * this.b;\n },\n\n read() {\n this.a = +prompt('a?', 0);\n this.b = +prompt('b?', 0);\n }\n};" }, { "path": "1-js/04-object-basics/04-object-methods/7-calculator/_js.view/test.js", "content": "\n\ndescribe(\"calculator\", function() {\n \n context(\"when 2 and 3 entered\", function() {\n beforeEach(function() {\n sinon.stub(window, \"prompt\");\n\n prompt.onCall(0).returns(\"2\");\n prompt.onCall(1).returns(\"3\");\n\n calculator.read();\n });\n\n afterEach(function() {\n prompt.restore();\n });\n \n it('the read get two values and saves them as object properties', function () {\n assert.equal(calculator.a, 2);\n assert.equal(calculator.b, 3);\n });\n\n it(\"the sum is 5\", function() {\n assert.equal(calculator.sum(), 5);\n });\n\n it(\"the multiplication product is 6\", function() {\n assert.equal(calculator.mul(), 6);\n });\n });\n\n});\n" }, { "path": "1-js/04-object-basics/04-object-methods/7-calculator/solution.md", "content": "\n```js run demo solution\nlet calculator = {\n sum() {\n return this.a + this.b;\n },\n\n mul() {\n return this.a * this.b;\n },\n\n read() {\n this.a = +prompt('a?', 0);\n this.b = +prompt('b?', 0);\n }\n};\n\ncalculator.read();\nalert( calculator.sum() );\nalert( calculator.mul() );\n```\n" }, { "path": "1-js/04-object-basics/04-object-methods/7-calculator/task.md", "content": "importance: 5\n\n---\n\n# Membuat sebuah kalkulator\n\nBuatlah sebuah objek `calculator` dengan tiga metode:\n\n- `read()` mendorong kedua nilai dan menyimpan nilai-nilai tersebut sebagai properti objek.\n- `sum()` mengembalikan jumlah dari nilai-nilai yang disimpan.\n- `mul()` mengalikan nilai-nilai yang disimpan dan mengembalikan hasilnya.\n\n```js\nlet calculator = {\n // ... your code ...\n};\n\ncalculator.read();\nalert( calculator.sum() );\nalert( calculator.mul() );\n```\n\n[demo]\n\n" }, { "path": "1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/solution.js", "content": "\nlet ladder = {\n step: 0,\n up: function() { \n this.step++;\n return this;\n },\n down: function() { \n this.step--;\n return this;\n },\n showStep: function() { \n alert(this.step);\n }\n};" }, { "path": "1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/test.js", "content": "\ndescribe('Ladder', function() {\n before(function() {\n window.alert = sinon.stub(window, \"alert\");\n });\n \n beforeEach(function() {\n ladder.step = 0;\n });\n\n it('up() should return this', function() {\n assert.equal(ladder.up(), ladder);\n });\n\n it('down() should return this', function() {\n assert.equal(ladder.down(), ladder);\n });\n\n it('showStep() should call alert', function() {\n ladder.showStep();\n assert(alert.called);\n });\n\n it('up() should increase step', function() {\n assert.equal(ladder.up().up().step, 2);\n });\n\n it('down() should decrease step', function() {\n assert.equal(ladder.down().step, -1);\n });\n\n it('down().up().up().up() ', function() {\n assert.equal(ladder.down().up().up().up().step, 2);\n });\n \n after(function() {\n ladder.step = 0;\n alert.restore();\n });\n});\n" }, { "path": "1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md", "content": "Solusinya adalah untuk mengembalikan objek itu sendiri dari setiap panggilan.\n\n```js run demo\nlet ladder = {\n step: 0,\n up() {\n this.step++;\n*!*\n return this;\n*/!*\n },\n down() {\n this.step--;\n*!*\n return this;\n*/!*\n },\n showStep() {\n alert( this.step );\n*!*\n return this;\n*/!*\n }\n};\n\nladder.up().up().down().up().down().showStep(); // 1\n```\n\nKita juga bisa menuliskan sebuah panggilan di setiap baris. Untuk rantai kode yang panjang jadi lebih mudah dibaca seperti ini:\n\n```js\nladder\n .up()\n .up()\n .down()\n .up()\n .down()\n .showStep(); // 1\n```\n" }, { "path": "1-js/04-object-basics/04-object-methods/8-chain-calls/task.md", "content": "importance: 2\n\n---\n\n# *Chaining* (merantaikan)\n\nAda sebuah objek layaknya tangga (`ladder`) yang dapat naik dan turun:\n\n```js\nlet ladder = {\n step: 0,\n up() { \n this.step++;\n },\n down() { \n this.step--;\n },\n showStep: function() { // menunjukkan langkah yang sekarang\n alert( this.step );\n }\n};\n```\n\nKini, jika kita perlu untuk membuat beberapa panggilan secara berurutan, bisa dilakukan dengan cara seperti ini:\n\n```js\nladder.up();\nladder.up();\nladder.down();\nladder.showStep(); // 1\n```\n\nModifikasi kode `up`, `down` dan `showStep` untuk membuat panggilan-panggilan tersebut dapat dirantaikan satu sama lain, seperti ini:\n\n```js\nladder.up().up().down().showStep(); // 1\n```\n\nPendekatan demikian digunakan secara luas di banyak *library* JavaScript.\n" }, { "path": "1-js/04-object-basics/04-object-methods/article.md", "content": "# Metode objek, \"this\"\n\nObjek-objek biasanya dibuat untuk merepresentasikan benda di dunia nyata, seperti para pengguna, perintah dan sebagainya:\n\n```js\nlet user = {\n name: \"John\",\n age: 30\n};\n```\n\nDan, di dunia nyata, seorang pengguna bisa *bertindak*: memilih sesuatu dari keranjang belanja, *login*, *logout* dan lain-lain.\n\nTindakan-tindakan direpresentasikan dalam JavaScript dengan fungsi-fungsi dalam properti.\n\n## Contoh metode\n\nSebagai awalan, mari ajarkan `user` untuk bilang hello:\n\n```js run\nlet user = {\n name: \"John\",\n age: 30\n};\n\n*!*\nuser.sayHi = function() {\n alert(\"Hello!\");\n};\n*/!*\n\nuser.sayHi(); // Hello!\n```\n\nDi sini kita hanya menggunakan sebuah fungsi ekspresi untuk membuat fungsi dan menugaskannya ke properti `user.sayHi` pada objek.\n\nKemudian kita memanggil fungsi tersebut. Kini \"pengguna\" bisa berbicara!\n\nSebuah fungsi yang mana merupakan properti dari sebuah objek disebut sebagai *metode*-nya.\n\nJadi, di sini kita memiliki sebuah metode `sayHi` dari objek`user`.\n\nTentu saja, kita bisa menggunakan sebuah fungsi sebagai sebuah metode pra-deklarasi (*pre-declared*), seperti beriktu:\n\n```js run\nlet user = {\n // ...\n};\n\n*!*\n// pertama, deklarasi\nfunction sayHi() {\n alert(\"Hello!\");\n};\n\n// lalu tambbahkan sebagai sebuah metodes\nuser.sayHi = sayHi;\n*/!*\n\nuser.sayHi(); // Hello!\n```\n\n```smart header=\"Object-oriented programming\"\nKetika kita menulis kode kita menggunakan objek-objek untuk merepresentasikan benda, itulah yang disebut sebagai [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), disingkat menjadi: \"OOP\".\n\nOOP adalah hal besar, sebuah sains yang sangat menarik. Bagaimana cara memilih entitas yang benar? bagaimana cara mengorganisir interaksi diantara mereka? Itulah arsitektur, dan terdapat buku yang bagus untuk topik itu, seperti \"Design Patterns: Elements of Reusable Object-Oriented Software\" oleh E. Gamma, R. Helm, R. Johnson, J. Vissides atau \"Object-Oriented Analysis and Design with Applications\" by G. Booch, and more.\n```\n### Metode ringkas\n\nTerdapat sebuah sintaks yang lebih pendek untuk metode-metode dalams sebuah penulisan (kode) objek:\n\n```js\n// objek-objek ini sama\n\nuser = {\n sayHi: function() {\n alert(\"Hello\");\n }\n};\n\n// metode ringkas terlihat lebih bagus, kan?\nuser = {\n*!*\n sayHi() { // sama seperti \"sayHi: function()\"\n*/!*\n alert(\"Hello\");\n }\n};\n```\n\nSeperti yang didemonstrasikan, kita bisa mengabaikan `\"function\"` dan hanya menuliskan `sayHi()`.\n\nSebenarnya, notasi-notasi tersebut tidak sepenuhnya sama. Ada beberapa perbedaan kecil yang berhubungan dengan *object inheritance* atau pewarisan objek (akan dibahas nanti), tetapi untuk sekarang hal-hal tersebut tidak terlalu penting. Dalam hampir kebanyakan kasus sintaks ringkas lebih disukai.\n\n## \"this\" dalam metode\n\nSudah umum bahwa sebuah metode objek perlu untuk mengakses informasi yang disimpan dalam objek untuk melakukan tugasnya.\n\nContohnya, kode di dalam `user.sayHi()` bisa jadi membutuhkan nama dari `user`.\n\n**Untuk mengakses objek yang bersangkutan, sebuah metode dapat menggunakan kata kunci `this`.**\n\nNilai dari `this` adalah objek \"sebelum (tanda) titik\", yang mana sebelumnya memanggil metode tersebut.\n\nSebagai contoh:\n\n```js run\nlet user = {\n name: \"John\",\n age: 30,\n\n sayHi() {\n*!*\n // \"this\" adalah \"objek yang sekarang\"\n alert(this.name);\n*/!*\n }\n\n};\n\nuser.sayHi(); // John\n```\n\nDi sini selama ekseskusi `user.sayHi()`, nilai dari `this` akan menjadi `user`.\n\nSecara teknis, memungkingkan juga untuk mengakses objek tanpa `this`, dengan cara mereferensikannya melalui variabel luar:\n\n```js\nlet user = {\n name: \"John\",\n age: 30,\n\n sayHi() {\n*!*\n alert(user.name); // menggunakan \"user\" ketimbang \"this\"\n*/!*\n }\n\n};\n```\n\n...Namun kode yang demikian tidak dapat diandalkan. Jika kita memilih untuk menyalin `user` ke sebuah variabel lain, misalnya `admin = user` dan menimpa `user` dengan hal lain, akhirnya malah akan mengakses objek yang salah.\n\nHal tersebut dicontohkan seperti berikut ini:\n\n```js run\nlet user = {\n name: \"John\",\n age: 30,\n\n sayHi() {\n*!*\n alert( user.name ); // akan mengarah ke sebuah error\n*/!*\n }\n\n};\n\n\nlet admin = user;\nuser = null; // timpa/overwrite agar terlihat lebih jelas\n\nadmin.sayHi(); // Uups! dalam sayHi(), nama yang lama sedang digunakan! error!\n```\n\nJika kita menggunakan `this.name` ketimbang `user.name` dalam `alert`, maka kodenya akhirnya berfungsi.\n\n## \"this\" tidak ditemukan\n\nDalam JavaScript, kata kunci `this` berperilaku tidak seperti kebanyak bahasa pemrograman lainnya. 'this' juga bisa digunakan dalam fungsi apapun.\n\nTidak ada *syntax error* dalam contoh berikut ini:\n\n```js\nfunction sayHi() {\n alert( *!*this*/!*.name );\n}\n```\n\nNilai dari `this` dievaluasi selama proses *run-time*, tergantung dari konteksnya.\n\nContohnya, di sini fungsi yang sama ditugaskan pada dua objek yang berbeda dan memiliki \"this\" dalam pemanggilannya:\n\n```js run\nlet user = { name: \"John\" };\nlet admin = { name: \"Admin\" };\n\nfunction sayHi() {\n alert( this.name );\n}\n\n*!*\n// menggunakan fungsi yang sama dalam dua objek\nuser.f = sayHi;\nadmin.f = sayHi;\n*/!*\n\n// panggilan-panggilan ini memiliki this yang berbeda\n// \"this\" dalam fungsi adalah objek \"sebelum tanda titik\"\nuser.f(); // John (this == user)\nadmin.f(); // Admin (this == admin)\n\nadmin['f'](); // Admin (tanda titik atau kurung siku mengakses metode tersebut – bukan masalah)\n```\n\nAturannya sederhana: jika `obj.f()` dipanggil, maka `this` adalah `obj` selama pemanggilan `f`. Jadi antara `user` atau `admin` pada contoh di atas.\n\n````smart header=\"Pemanggilan tanpa sebuah objek: `this == undefined`\"\nKita bahkan bisa memanggil fungsi tanpa sebuah objek sama sekali:\n\n```js run\nfunction sayHi() {\n alert(this);\n}\n\nsayHi(); // undefined\n```\n\nDalam kasus ini `this` adalah `undefined` di mode *strict*. Jika kita coba untuk mengakses `this.name`, akan menghasilkan sebuah error.\n\nDalam mode *non-strict* nilai dari `this` dalam kasus demikian akan menjadi *objek global* (`window` dalam sebuah peramban, kita akan membahasnya lebih lanjut dalam bab [](info:global-object)). Ini adalah sebuah perilaku historis yang dibenahi oleh `\"use strict\"`.\n\nBiasanya panggilan yang demikian adalah sebuah kesalahan *programming*. Jika terdapat `this` dalam sebuah fungsi, `this` tersebut kemungkinan besar akan dipanggil dalam konteks sebuah objek.\n````\n\n```smart header=\"Akibat dari `this` yang tidak terikat\"\nJika kamu berasal dari bahasa pemrograman lain, mungkin saja kamu menggunakan gagasan sebuah \"pengikatan (bound) `this`\", dimana metode-metode didefinisikan dalam sebuah objek selalu memiliki `this` yang merujuk pada objek itu.\n\nDalam JavaScript `this` itu \"bebas\", nilainya dieveluasi saat waktu pemanggilan dan tidak tergantung pada dimana metode tersebut di deklarasikan, namun lebih pada objek apa yang berada \"sebelum (tanda) titik\".\n\nKonsep run-time mengeveluasi `this` memiliki kelebihan dan kekurangan sendiri. Di satu sisi, sebuah fungsi bisa digunakan ulang untuk objek-objek yang berbeda. Pada sisi sebaliknya, fleksibilitas yang besar membuat lebih banyak kemungkinan adanya kesalahan-kesalahan.\n\nDi sini posisi kita tidak untuk menghakimi apakah pilihan rancangan bahasa pemrograman ini baik atau buruk. Kita akan mengerti bagaimana bekerja dengan hal itu, serta bagaimana cara mendapatkan keuntungan dari hal tersebut dan menghindari adanya masalah.\n````\n\n## Fungsi arrow tidak memiliki \"this\"\n\nFungsi-fungsi *arrow* itu istimewa: fungsi tersebut tidak memiliki `this` \"milik fungsi itu sendiri\". Jika kita mereferensikan `this` dari fungsi demikian, hal itu didapat dari fungsi \"normal\" di luar.\n\nFor instance, here `arrow()` uses `this` from the outer `user.sayHi()` method:\n\n```js run\nlet user = {\n firstName: \"Ilya\",\n sayHi() {\n let arrow = () => alert(this.firstName);\n arrow();\n }\n};\n\nuser.sayHi(); // Ilya\n```\n\nItulah fitur istimewa dari fungsi *arrow*, fitur berguna ketika kita benar-benar tidak ingin memiliki sebuah `this` yang terpisah, namun kita mengambilnya dari luar lingkung tersebut. Selanjutnya dalam bab kita akan mempelajari lebih dalam mengenai fungsi *arrow*.\n\n\n## Ringkasan\n\n- Fungsi-fungsi yang disimpan dalam properti objek disebut sebagai \"metode\".\n- Metode membuat objek dapat \"bertindak\" seperti `object.doSomething()`.\n- Metode bisa mereferensikan ke objek sebagai `this`.\n\nNilai dari `this` didefiniskan saat *run-time*.\n- Ketika sebuah fungsi dideklarasikan, fungsi tersebut bisa menggunakan `this`, tetapi `this` tersebut tidak memiliki nilai sampai fungsi tersebut dipanggil.\n- Sebuah fungsi bisa disalin di antara objek-objek.\n- Ketika sebuah fungsi dipanggil dalam sintaks \"metode\": `object.method()`, nilai `this` selama pemanggilan adalah `object`.\n\nMohon diingat bahwa fungsi *arrow* itu istimewa: fungsi tersebut tidak memiliki `this`. Ketika `this` diakses di dalam sebuah fungsi *arrow*, `this` itu diambil dari luar.\n" }, { "path": "1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/solution.md", "content": "Ya, hal itu memungkinkan.\n\nJika sebuah fungsi mengembalikan sebuah objek lalu `new` mengembalikan objek tersebut sebagai ganti `this`.\n\nJadi fungsi tersebut dapat, misalnya, mengembalikan objek `obj` yang secara eksternal didefinisikan sama:\n\n```js run no-beautify\nlet obj = {};\n\nfunction A() { return obj; }\nfunction B() { return obj; }\n\nalert( new A() == new B() ); // true\n```\n" }, { "path": "1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md", "content": "importance: 2\n\n---\n\n# Dua fungsi – satu objek\n\nApakah mungkin untuk membuat fungsi `A` dan fungsi `B` seperti `new A()==new B()`?\n\n```js no-beautify\nfunction A() { ... }\nfunction B() { ... }\n\nlet a = new A;\nlet b = new B;\n\nalert( a == b ); // true\n```\n\nJika bisa, berikan contoh kodenya.\n" }, { "path": "1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/solution.js", "content": "function Calculator() {\n\n this.read = function() {\n this.a = +prompt('a?', 0);\n this.b = +prompt('b?', 0);\n };\n\n this.sum = function() {\n return this.a + this.b;\n };\n\n this.mul = function() {\n return this.a * this.b;\n };\n}" }, { "path": "1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/test.js", "content": "\ndescribe(\"calculator\", function() {\n let calculator;\n before(function() {\n sinon.stub(window, \"prompt\")\n\n prompt.onCall(0).returns(\"2\");\n prompt.onCall(1).returns(\"3\");\n\n calculator = new Calculator();\n calculator.read();\n });\n \n it(\"the read method asks for two values using prompt and remembers them in object properties\", function() {\n assert.equal(calculator.a, 2);\n assert.equal(calculator.b, 3);\n });\n\n it(\"when 2 and 3 are entered, the sum is 5\", function() {\n assert.equal(calculator.sum(), 5);\n });\n\n it(\"when 2 and 3 are entered, the product is 6\", function() {\n assert.equal(calculator.mul(), 6);\n });\n\n after(function() {\n prompt.restore();\n });\n});\n" }, { "path": "1-js/04-object-basics/06-constructor-new/2-calculator-constructor/solution.md", "content": "```js run demo\nfunction Calculator() {\n\n this.read = function() {\n this.a = +prompt('a?', 0);\n this.b = +prompt('b?', 0);\n };\n\n this.sum = function() {\n return this.a + this.b;\n };\n\n this.mul = function() {\n return this.a * this.b;\n };\n}\n\nlet calculator = new Calculator();\ncalculator.read();\n\nalert( \"Sum=\" + calculator.sum() );\nalert( \"Mul=\" + calculator.mul() );\n```\n" }, { "path": "1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md", "content": "importance: 5\n\n---\n\n# Buat Kalkulator baru\n\nBuatlah sebuah fungsi konstruktor `Calculator` yang membuat objek dengan 3 method:\n\n- `read()` tanyakan dua nilai menggunakan `prompt dan masukan mereka kedalam properti objek.\n- `sum()` mengembalikan jumlah dari properti-properti.\n- `mul()` mengembalikan perkalian produk dari properti-properti.\n\nContoh:\n\n```js\nlet calculator = new Calculator();\ncalculator.read();\n\nalert( \"Sum=\" + calculator.sum() );\nalert( \"Mul=\" + calculator.mul() );\n```\n\n[demo]\n" }, { "path": "1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js", "content": "function Accumulator(startingValue) {\n this.value = startingValue;\n\n this.read = function() {\n this.value += +prompt('How much to add?', 0);\n };\n\n}\n" }, { "path": "1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/test.js", "content": "describe(\"Accumulator\", function() {\n\n beforeEach(function() {\n sinon.stub(window, \"prompt\")\n });\n\n afterEach(function() {\n prompt.restore();\n });\n\n it(\"initial value is the argument of the constructor\", function() {\n let accumulator = new Accumulator(1);\n\n assert.equal(accumulator.value, 1);\n });\n\n it(\"after reading 0, the value is 1\", function() {\n let accumulator = new Accumulator(1);\n prompt.returns(\"0\");\n accumulator.read();\n assert.equal(accumulator.value, 1);\n });\n\n it(\"after reading 1, the value is 2\", function() {\n let accumulator = new Accumulator(1);\n prompt.returns(\"1\");\n accumulator.read();\n assert.equal(accumulator.value, 2);\n });\n});\n" }, { "path": "1-js/04-object-basics/06-constructor-new/3-accumulator/solution.md", "content": "\n\n```js run demo\nfunction Accumulator(startingValue) {\n this.value = startingValue;\n\n this.read = function() {\n this.value += +prompt('How much to add?', 0);\n };\n\n}\n\nlet accumulator = new Accumulator(1);\naccumulator.read();\naccumulator.read();\nalert(accumulator.value);\n```\n" }, { "path": "1-js/04-object-basics/06-constructor-new/3-accumulator/task.md", "content": "importance: 5\n\n---\n\n# Membuat Akumulator baru\n\nBuatlah sebuah fungsi konstruktor `Accumulator(startingValue)`.\n\nObjek yang dibuat fungsi tersebut harus:\n\n- Menyimpan \"nilai yang sekarang\" dalam `value` properti. Nilai awal diatur menjadi argumen konstruktor `startingValue`.\n- Metode `read()` harus menggunakan `prompt` untuk membaca sebuah angka dan menambahkannya ke `value`.\n\nDalam kata lain, properti `value` adalah hasil penjumlahan dari semua nilai yang dimasukkan oleh pengguna dengan nilai awal `startingValue`.\n\nBerikut ini contoh kodenya:\n\n```js\nlet accumulator = new Accumulator(1); // nilai awal 1\n\naccumulator.read(); // menambahkan nilai yang dimasukkan oleh pengguna\naccumulator.read(); // menambahkan nilai yang dimasukkan oleh pengguna\n\nalert(accumulator.value); // menampilkan jumlah dari kedua nilai\n```\n\n[demo]\n" }, { "path": "1-js/04-object-basics/06-constructor-new/article.md", "content": "# Konstruktor, operator \"new\"\n\nSintaks reguler `{...}` memungkinkan kita untuk membuat satu objek. Tapi seringkali kita perlu untuk membuat banyak objek-objek serupa, seperti pengguna atau *item* menu berganda dan sebagainya.\n\nHal tersebut dapat diselesaikan dengan menggunakan fungsi konstruktor dan operator `\"new\"`.\n\n## Fungsi konstruktor\n\nFungsi konstruktor secara teknis adalah fungsi biasa. Terdapat dua persetujuan sebelumnya, yakni:\n\n1. Fungsi tersebut diberi nama dengan huruf kapital terlebih dulu.\n2. Fungsi tersebut harus dieksekusi dengan hanya menggunakan operator `\"new\"`.\n\nSebagai contoh:\n\n```js run\nfunction User(name) {\n this.name = name;\n this.isAdmin = false;\n}\n\n*!*\nlet user = new User(\"Jack\");\n*/!*\n\nalert(user.name); // Jack\nalert(user.isAdmin); // false\n```\n\nKetika sebuah fungsi dieksekusi dengan menggunakan `new`, fungsi tersebut melakukan tahapan-tahapan berikut ini:\n\n1. Sebuah objek kosong yang dibuat dan diserahkan ke `this`.\n2. Bagian utama fungsi tersebut bereksekusi. Biasanya memodifikasi `this`, menambahkan properti baru ke `this`.\n3. Nilai dari `this` dikembalikan.\n\nDengan kata lain, `new User(...)` berjalan seperti ini:\n\n```js\nfunction User(name) {\n*!*\n // this = {}; (secara implisit)\n*/!*\n\n // menambahkan properti ke this\n this.name = name;\n this.isAdmin = false;\n\n*!*\n // mengembalikan this; (secara implisit)\n*/!*\n}\n```\n\nJadi `let user = new User(\"Jack\")` memberikan hasil yang sama seperti halnya:\n\n```js\nlet user = {\n name: \"Jack\",\n isAdmin: false\n};\n```\n\nSekarang jika kita ingin membuat *user* lain, kita bisa memanggil `new User(\"Ann\")`, `new User(\"Alice\")` dan seterusnya. Lebih pendek penulisannya daripada menulis langsung sintaks baru setiap ingin membuat *user* baru, serta lebih mudah dibaca.\n\nItulah tujuan utama dari konstruktor -- untuk mengimplementasikan kode pembuatan objek yang dapat dipakai ulang (*reusable*).\n\nMari ingat sekali lagi -- secara teknis, fungsi apapun dapat digunakan sebagai sebuah konstruktor. Hal tersebut berarti: fungsi apapun dapat dijalankan dengan `new`, dan bisa mengeksekusi algoritma di atas. \"Huruf kapital dulu\" adalah kesepakatan umum, untuk membuatnya lebih jelas bahwa sebuah fungsi untuk dijalankan dengan `new`.\n\n````smart header=\"function() { ... } baru\"\nJika kita memiliki banyak baris kode tentang pembuatan sebuah objek tunggal yang kompleks, kita dapat membungkus kode tersebut dalam fungsi konstruktor, seperti ini:\n\n```js\n// create a function and immediately call it with new\nlet user = new function() { \n this.name = \"John\";\n this.isAdmin = false;\n\n // ...kode lain untuk pembuatan user\n // bisa jadi lebih rumit logika dan pernyataannya\n // variabel lokal dan lain-lain.\n};\n```\n\nKonstruktor tersebut tidak dapat dipanggil lagi, karena tidak disimpan dimanapun, hanya dibuat dan dipanggil. Jadi trik ini ditujukan untuk mengenkapsulasi kode yang mengonstruksi objek tunggal, tanpa penggunaan di masa yang akan datang.\n````\n\n## Constructor mode test: new.target\n\n```smart header=\"Pembahasan tingkat lanjut\"\nSintaks dari bagian ini jarang digunakan, lewati saja kecuali kamu ingin mengetahui semuanya.\n```\n\nDi dalam sebuah fungsi, kita dapat memeriksa apakah fungsi tersebut dipanggil dengan atau tanpa `new`, dengan cara menggunakan sebuah properti khusus `new.target`.\n\nFungsi tersebut kosong untuk panggilan-panggilan reguler dan menyamai fungsi jika dipanggil dengan `new`:\n\n```js run\nfunction User() {\n alert(new.target);\n}\n\n// tanpa \"new\":\n*!*\nUser(); // undefined\n*/!*\n\n// dengan \"new\":\n*!*\nnew User(); // fungsi User { ... }\n*/!*\n```\n\nSintaks itu dapat digunakan di dalam fungsi tersebut untuk mengetahui apakah fungsi dipanggil dengan `new`, \"dalam mode konstruktor\", atau tanpa `new`, \"dalam mode reguler\".\n\nKita juga bisa membuat baik panggilan dengan `new` serta panggilan reguler untuk melakukan hal yang sama, seperti ini:\n\n```js run\nfunction User(name) {\n if (!new.target) { // jika kamu menjalankanku tanpa new\n return new User(name); // ...aku akan menambahkan new untukmu\n }\n\n this.name = name;\n}\n\nlet john = User(\"John\"); // mengarahkan ulang panggilan ke User baru\nalert(john.name); // John\n```\n\nPendekatan ini terkadang digunakan dalam *library* untuk membuat sintaks lebih fleksibel. Jadi orang-orang bisa memanggil fungsi dengan atau tanap `new`, dan masih bisa berfungsi.\n\nMungkin saja bukanlah hal baik untuk menggunakan pendekatan tersebut dimana saja, karena melewatkan `new` membuat kurang jelas sintaks atau kode yang sedang berjalan. Dengan `new` kita semua tahu bahwa objek baru sedang dibuat.\n\n## Hasil *return* dari konstruktor\n\nBiasanya, konstruktor tidak memiliki sebuah pernyataan `return`. Tugas konstruktor adalah untuk menulis semua hal-hal yang dibutuhkan ke dalam `this`, dan hal tersebut secara otomatis menjadi hasil.\n\nTetapi jika ada sebuah pernyataan `return`, maka aturannya sederhana:\n\n- Jika `return` dipanggil dengan sebuah objek, maka objek tersebut dikembalikan sebagai ganti `this`.\n- Jika `return` dipanggil dengan sebuah *primitive*, panggilan tersebut diabaikan.\n\nDalam kata lain, `return` dengan sebuah objek mengembalikan objek itu, dalam semua kasus lainnya `this` dikembalikan.\n\nSebagai contoh, di sini `return` mengambil alih `this` dengan cara mengembalikan sebuah objek:\n\n```js run\nfunction BigUser() {\n\n this.name = \"John\";\n\n return { name: \"Godzilla\" }; // <-- mengembalikan objek this\n}\n\nalert( new BigUser().name ); // Godzilla, dapat objeknya\n```\n\nDan berikut ini adalah sebuah contoh dengan sebuah `return` kosong (atau bisa kita tempatkan dengan sebuah *primitive* setelahnya, tidak dipermasalahkan):\n\n```js run\nfunction SmallUser() {\n\n this.name = \"John\";\n\n return; // <-- mengembalikan this\n}\n\nalert( new SmallUser().name ); // John\n```\n\nBiasanya konstruktor tidak memiliki sebuah pernyataan `return`. Di sini kita menyebutkan perilaku khusus dengan cara mengembalikan objek dengan tujuan utamanya yakni hanya untuk melengkapi saja.\n\n````smart header=\"Mengabaikan parentheses\"\nOmong-omong, kita bisa mengabaikan parentheses setelah `new`, jika tidak memiliki argumen:\n\n```js\nlet user = new User; // <-- tanpa parentheses\n// sama seperti\nlet user = new User();\n```\n\nMengabaikan parentheses di sini tidak dipandang sebagai sebuah \"gaya yang baik\", tetapi sintaks tersebut diperbolehkan oleh spesifikasi.\n````\n\n## Metode dalam konstruktor\n\nMenggunakan fungsi-fungsi konstruktor untuk membuat objek memberikan sebuah fleksibilitas yang amat baik. Fungsi konstruktor bisa jadi memiliki parameter yang mendefinisikan bagaimana cara untuk mengonstruksi objek tersebut, serta hal apa yang dimasukkan ke objek tersebut.\n\nTentu saja, kita bisa menambahkan ke `this` tidak hanya properti, tapi metode juga.\n\nSebagai contoh, `new User(name)` di bawah membuat sebuah objek dengan `name` yang diberikan dan metode `sayHi`:\n\n```js run\nfunction User(name) {\n this.name = name;\n\n this.sayHi = function() {\n alert( \"My name is: \" + this.name );\n };\n}\n\n*!*\nlet john = new User(\"John\");\n\njohn.sayHi(); // My name is: John\n*/!*\n\n/*\njohn = {\n name: \"John\",\n sayHi: function() { ... }\n}\n*/\n```\n\nUntuk membuat objek yang kompleks, ada sintaks tingkat lanjut, yaitu [classes](info:classes), yang akan kita bahas nanti.\n\n## Ringkasan\n\n- Fungsi konstruktor, atau secara singkat, konstruktor, adalah fungsi reguler, tetapi ada sebuah kesepakatan umum untuk memberi nama konstruktor dengan huruf kapital terlebih dahulu.\n- Fungsi konstruktor seharusnya hanya bisa dipanggil menggunakan `new`. Panggilan yang demkian berarti sebuah pembuatan `this` kosong pada awalnya dan mengembalikan `this` yang sudah berisi di akhir.\n\nKita bisa menggunakan fungsi konstruktor untuk membuat objek-objek serupa sekaligus.\n\nJavaScript menyediakan fungsi konstruktor untuk banyak objek bawaan di bahasa pemrograman: seperti `Date` untuk penanggalan, `Set` untuk kumpulan/rangkaian dan banyak lainnya yang akan kita pelajari.\n\n```smart header=\"Objek, kita akan kembali!\"\nDalam bab ini kita hanya membahas dasar-dasar tentang objek dan konstruktor. Objek dan konstruktor adalah dasar penting untuk mempelajari lebih banyak tentang tipe data dan fungsi dalam bab-bab selanjutnya.\n\nSetelah kita mempelajari itu, kita kembali ke objek dan membahas objek lebih mendalam lagi di bab dan .\n```\n" }, { "path": "1-js/04-object-basics/07-optional-chaining/article.md", "content": "\n# Optional chaining '?.'\n\n[recent browser=\"new\"]\n\nThe optional chaining `?.` is a safe way to access nested object properties, even if an intermediate property doesn't exist.\n\n## The \"non-existing property\" problem\n\nIf you've just started to read the tutorial and learn JavaScript, maybe the problem hasn't touched you yet, but it's quite common.\n\nAs an example, let's say we have `user` objects that hold the information about our users.\n\nMost of our users have addresses in `user.address` property, with the street `user.address.street`, but some did not provide them.\n\nIn such case, when we attempt to get `user.address.street`, and the user happens to be without an address, we get an error:\n\n```js run\nlet user = {}; // a user without \"address\" property\n\nalert(user.address.street); // Error!\n```\n\nThat's the expected result. JavaScript works like this. As `user.address` is `undefined`, an attempt to get `user.address.street` fails with an error.\n\nIn many practical cases we'd prefer to get `undefined` instead of an error here (meaning \"no street\").\n\n...And another example. In the web development, we can get an object that corresponds to a web page element using a special method call, such as `document.querySelector('.elem')`, and it returns `null` when there's no such element.\n\n```js run\n// document.querySelector('.elem') is null if there's no element\nlet html = document.querySelector('.elem').innerHTML; // error if it's null\n```\n\nOnce again, if the element doesn't exist, we'll get an error accessing `.innerHTML` of `null`. And in some cases, when the absence of the element is normal, we'd like to avoid the error and just accept `html = null` as the result.\n\nHow can we do this?\n\nThe obvious solution would be to check the value using `if` or the conditional operator `?`, before accessing its property, like this:\n\n```js\nlet user = {};\n\nalert(user.address ? user.address.street : undefined);\n```\n\nIt works, there's no error... But it's quite inelegant. As you can see, the `\"user.address\"` appears twice in the code. For more deeply nested properties, that becomes a problem as more repetitions are required.\n\nE.g. let's try getting `user.address.street.name`.\n\nWe need to check both `user.address` and `user.address.street`:\n\n```js\nlet user = {}; // user has no address\n\nalert(user.address ? user.address.street ? user.address.street.name : null : null);\n```\n\nThat's just awful, one may even have problems understanding such code.\n\nDon't even care to, as there's a better way to write it, using the `&&` operator:\n\n```js run\nlet user = {}; // user has no address\n\nalert( user.address && user.address.street && user.address.street.name ); // undefined (no error)\n```\n\nAND'ing the whole path to the property ensures that all components exist (if not, the evaluation stops), but also isn't ideal.\n\nAs you can see, property names are still duplicated in the code. E.g. in the code above, `user.address` appears three times.\n\nThat's why the optional chaining `?.` was added to the language. To solve this problem once and for all!\n\n## Optional chaining\n\nThe optional chaining `?.` stops the evaluation if the value before `?.` is `undefined` or `null` and returns `undefined`.\n\n**Further in this article, for brevity, we'll be saying that something \"exists\" if it's not `null` and not `undefined`.**\n\nIn other words, `value?.prop`:\n- works as `value.prop`, if `value` exists,\n- otherwise (when `value` is `undefined/null`) it returns `undefined`.\n\nHere's the safe way to access `user.address.street` using `?.`:\n\n```js run\nlet user = {}; // user has no address\n\nalert( user?.address?.street ); // undefined (no error)\n```\n\nThe code is short and clean, there's no duplication at all.\n\nReading the address with `user?.address` works even if `user` object doesn't exist:\n\n```js run\nlet user = null;\n\nalert( user?.address ); // undefined\nalert( user?.address.street ); // undefined\n```\n\nPlease note: the `?.` syntax makes optional the value before it, but not any further.\n\nE.g. in `user?.address.street.name` the `?.` allows `user` to safely be `null/undefined` (and returns `undefined` in that case), but that's only for `user`. Further properties are accessed in a regular way. If we want some of them to be optional, then we'll need to replace more `.` with `?.`.\n\n```warn header=\"Don't overuse the optional chaining\"\nWe should use `?.` only where it's ok that something doesn't exist.\n\nFor example, if according to our coding logic `user` object must exist, but `address` is optional, then we should write `user.address?.street`, but not `user?.address?.street`.\n\nSo, if `user` happens to be undefined due to a mistake, we'll see a programming error about it and fix it. Otherwise, coding errors can be silenced where not appropriate, and become more difficult to debug.\n```\n\n````warn header=\"The variable before `?.` must be declared\"\nIf there's no variable `user` at all, then `user?.anything` triggers an error:\n\n```js run\n// ReferenceError: user is not defined\nuser?.address;\n```\nThe variable must be declared (e.g. `let/const/var user` or as a function parameter). The optional chaining works only for declared variables.\n````\n\n## Short-circuiting\n\nAs it was said before, the `?.` immediately stops (\"short-circuits\") the evaluation if the left part doesn't exist.\n\nSo, if there are any further function calls or side effects, they don't occur.\n\nFor instance:\n\n```js run\nlet user = null;\nlet x = 0;\n\nuser?.sayHi(x++); // no \"sayHi\", so the execution doesn't reach x++\n\nalert(x); // 0, value not incremented\n```\n\n## Other variants: ?.(), ?.[]\n\nThe optional chaining `?.` is not an operator, but a special syntax construct, that also works with functions and square brackets.\n\nFor example, `?.()` is used to call a function that may not exist.\n\nIn the code below, some of our users have `admin` method, and some don't:\n\n```js run\nlet userAdmin = {\n admin() {\n alert(\"I am admin\");\n }\n};\n\nlet userGuest = {};\n\n*!*\nuserAdmin.admin?.(); // I am admin\n*/!*\n\n*!*\nuserGuest.admin?.(); // nothing (no such method)\n*/!*\n```\n\nHere, in both lines we first use the dot (`userAdmin.admin`) to get `admin` property, because we assume that the user object exists, so it's safe read from it.\n\nThen `?.()` checks the left part: if the admin function exists, then it runs (that's so for `userAdmin`). Otherwise (for `userGuest`) the evaluation stops without errors.\n\nThe `?.[]` syntax also works, if we'd like to use brackets `[]` to access properties instead of dot `.`. Similar to previous cases, it allows to safely read a property from an object that may not exist.\n\n```js run\nlet key = \"firstName\";\n\nlet user1 = {\n firstName: \"John\"\n};\n\nlet user2 = null; \n\nalert( user1?.[key] ); // John\nalert( user2?.[key] ); // undefined\n```\n\nAlso we can use `?.` with `delete`:\n\n```js run\ndelete user?.name; // delete user.name if user exists\n```\n\n````warn header=\"We can use `?.` for safe reading and deleting, but not writing\"\nThe optional chaining `?.` has no use at the left side of an assignment.\n\nFor example:\n```js run\nlet user = null;\n\nuser?.name = \"John\"; // Error, doesn't work\n// because it evaluates to undefined = \"John\"\n```\n\nIt's just not that smart.\n````\n\n## Summary\n\nThe optional chaining `?.` syntax has three forms:\n\n1. `obj?.prop` -- returns `obj.prop` if `obj` exists, otherwise `undefined`.\n2. `obj?.[prop]` -- returns `obj[prop]` if `obj` exists, otherwise `undefined`.\n3. `obj.method?.()` -- calls `obj.method()` if `obj.method` exists, otherwise returns `undefined`.\n\nAs we can see, all of them are straightforward and simple to use. The `?.` checks the left part for `null/undefined` and allows the evaluation to proceed if it's not so.\n\nA chain of `?.` allows to safely access nested properties.\n\nStill, we should apply `?.` carefully, only where it's acceptable that the left part doesn't exist. So that it won't hide programming errors from us, if they occur." }, { "path": "1-js/04-object-basics/08-symbol/article.md", "content": "\n# Tipe simbol\n\nMenurut spesifikasi spesifikasi, properti-properti kunci objek bisa saja bertipe *string*, atau bertipe simbol. Bukan angka (*number*), bukan *boolean*, hanya *string* atau simbol-simbol, kedua tipe ini.\n\nHingga kini kita telah menggunakan *string* saja. Mari kita lihat keuntungan-keuntungan apa saja dari simbol yang bisa diberikan ke kita.\n\n## Simbol-simbol\n\nSebuah \"simbol\" merepresentasikan sebuah pengidentifikasi yang unik.\n\nNilai dari tipe ini dapat dibuat menggunakan `Symbol()`:\n\n```js\n// id adalah sebuah simbol baru\nlet id = Symbol();\n```\n\nSelama penyusunan, kita bisa memberikan simbol sebuah deskripsi (juga disebut sebagai nama simbol), kebanyakan berguna untuk tujuan-tujuan *debugging*:\n\n```js\n// id adalah simbol dengan deskripsi \"id\"\nlet id = Symbol(\"id\");\n```\n\nSimbol-simbol sudah pasti unik. Bahkan jika kita membuat banyak simbol dengan deskripsi yang, mereka memiliki nilai-nilai yang berbeda. Deskripsi hanyalah sebuah label yang tidak mempengaruhi apapun.\n\nSebagai contoh, berikut ini ada dua simbol dengan deskripsi yang sama -- keduanya tidak sama:\n\n```js run\nlet id1 = Symbol(\"id\");\nlet id2 = Symbol(\"id\");\n\n*!*\nalert(id1 == id2); // false\n*/!*\n```\n\nJika kamu tidak asing dengan Ruby atau bahasa pemrograman lain yang juga memiliki hal seperti \"simbol\" -- tolong jangan sampai keliru. Simbol-simbol (di) JavaScript itu berbeda.\n\n````warn header=\"Simbol-simbol tidak dikonversi otomatis menjadi string\"\nKebanyakan nilai-nilai dalam JavaScript mendukung konversi implisit menjadi sebuah string. Contohnya, kita bisa memberi `alert` pada hampir nilai apapun, dan masih akan berfungsi. Simbol itu istimewa. Mereka tidak terkonversi otomatis.\n\nSebagai contoh, `alert` ini akan memunculkan sebuah error:\n\n```js run\nlet id = Symbol(\"id\");\n*!*\nalert(id); // TypeError: Cannot convert a Symbol value to a string\n*/!*\n```\n\nHal tersebut adalah sebuah \"garda bahasa pemrograman\" untuk menghadapi adanya kekacauan, karena string dan simbol itu berbeda secara fundamental dan sudah seharusnya tidak akan terkonversi dari satu ke lainnya secara tidak sengaja.\n\nJika kita benar-benar ingin menunjukkan sebuah simbol, kita perlu secara eskplisit memanggil `.toString()` sintaks tersebut, seperti berikut ini:\n```js run\nlet id = Symbol(\"id\");\n*!*\nalert(id.toString()); // Symbol(id), sekarang berfungsi\n*/!*\n```\n\nAtau mengambil properti `symbol.description` untuk menunjuukan deskripsinya saja:\n```js run\nlet id = Symbol(\"id\");\n*!*\nalert(id.description); // id\n*/!*\n```\n\n````\n\n## Properti \"tersembunyi\" (*hidden*)\n\nSimbol memungkinkan kita untuk membuat properti-properti yang \"tersembunyi\" (*hidden*) dari sebuah objek, yang mana tidak akan ada bagian lain dari kode yang bisa mengakses atau meng-*overwrite* tanpa sengaja.\n\nSebagai contoh, jika kita bekerja dengan objek-objek `user`, yang dimiliki oleh sebuah kode pihak ketiga. Kita akan menambahkan pengidentifikasi pada objek-objek tersebut.\n\nMari gunakan sebuah kunci simbol untuk hal tersebut:\n\n```js run\nlet user = { // dimiliki oleh kode lainyya\n name: \"John\"\n};\n\nlet id = Symbol(\"id\");\n\nuser[id] = 1;\n\nalert( user[id] ); // kita bisa mengakses data menggunakan simbol sebagai kunci\n```\n\nApa keuntungan dari menggunakan `Symbol(\"id\")` daripada sebuah *string* `\"id\"`?\n\nSebagaimana objek-objek `user` adalah milik kode lain, dan kode itu juga berfungsi dengan objek-objek tadi, kita seharusnya tidak hanya menambahkan ruang apapun di situ. Hal tersebut tidak aman. Tetapi sebuah simbol tidak bisa diakses tanpa sengaja, kode pihak ketiga bahkan tidak akan melihatnya, jadi mungkin tidak masalah jika demikian.\n\nJuga, bayangkan *script* lain ingin memiliki pengidentifikasi sendiri dalam objek `user`, untuk tujuannya masing-masing. Hal tersebut bisa saja *library* JavaScript lainnya, jadi *script-script* tersebut benar-benar tidak menyadari satu sama lainnya.\n\nKemudian *script* tersebut bisa membuat `Symbol(\"id\")`-nya sendiri, seperti berikut ini:\n\n```js\n// ...\nlet id = Symbol(\"id\");\n\nuser[id] = \"Their id value\";\n```\n\nTidak ada konflik antara pengidentifikasi kita dengan pengidentifikasi mereka, karena simbol selalu berebeda, bahkan jika simbol-simbol itu memiliki nama yang sama.\n\n...Tapi jika kita menggunakan sebuah *string* `\"id\"` bukan sebuah simbol untuk tujuan yang sama, dengan demikian *akan menjadi* sebuah konflik:\n\n```js\nlet user = { name: \"John\" };\n\n// Script kita menggunakan properti \"id\"\nuser.id = \"Our id value\";\n\n// ...Script lain juga menginginkan \"id\" untuk tujuannya sendiri...\n\nuser.id = \"Their id value\"\n// Boom! properti tertimpa/overwrite oleh script lain!\n```\n\n### Simbol didalam objek literal\n\nJika kita ingin menggunakan sebuah simbol dalam sebuah tulisan objek `{...}`, kita perlu menuliskan simbol tersebut dalam tanda kurung siku.\n\nSeperti ini:\n\n```js\nlet id = Symbol(\"id\");\n\nlet user = {\n name: \"John\",\n*!*\n [id]: 123 // bukan \"id\": 123\n*/!*\n};\n```\nItu karena kita memerlukan nilai dari variabel `id` sebagai kunci, bukan *string* dari \"id\".\n\n### Simbol diabaikan menggunakan *for..in*\n\nProperti-properti simbolis tidak ikut serta dalam pengulangan (*loop*) `for..in`.\n\nFor instance:\n\n```js run\nlet id = Symbol(\"id\");\nlet user = {\n name: \"John\",\n age: 30,\n [id]: 123\n};\n\n*!*\nfor (let key in user) alert(key); // name, age (bukan simbol)\n*/!*\n\n// akses langsung dengan simbol, berfungsi\nalert( \"Direct: \" + user[id] );\n```\n\n`Object.keys(user)` juga mengabaikannya. Itu adalah bagian dari prinsip umum \"menyembunyikan properti simbolis\" (*hiding symbolic properties*). Jika *script* lain atau sebuah *library* melakukan pengulanagn pada objek kita, hal tersebut tidak akan mengakses sebuah properti simbolis tanpa diduga.\n\nSebaliknya, [Object.assign](mdn:js/Object/assign) menyalin baik *string* properti maupun simbol properti:\n\n```js run\nlet id = Symbol(\"id\");\nlet user = {\n [id]: 123\n};\n\nlet clone = Object.assign({}, user);\n\nalert( clone[id] ); // 123\n```\n\nTidak ada paradoks di sini. Hal itu sesuai rancangan. Gagasan bahwa ketika kita meng-*clone* sebuah objek atau menyatukan (*merge*) objek-objek, kita biasanya ingin *semua* properti disalin (termasuk simbol seperti `id`).\n\n## Simbol global\n\nSeperti yang kita lihat, biasanya semua simbol itu berbeda, bahkan jika simbol-simbol tersebut memiliki nama yang sama. Tapi terkadang kita ingin simbol yang bernama sama untuk menjadi barang yang sama pula. Sebagai contoh, bagian-bagian lain dari aplikasi kita ingin mengakses simbol `\"id\"` yang berarti properti yang sama pula.\n\nUntuk melaksanakan aksi itu, hadirlah sebuah catatan simbol-simbol global (*global symbol registry*). Kita bisa membuat simbol-simbol di dalamnya dan mengaksesnya nanti, dan hal tersebut menjamin bahwa akses yang berulang oleh nama yang sama (akan) mengembalikan simbol yang sama pula.\n\nAgar bisa membaca (atau membuat jika belum ada) sebuah simbol dari catatan, gunakan `Symbol.for(key)`.\n\nHal itu memeriksa catatan (simbol) global, dan jika ada sebuah simbol yang dideskripsikan sebagai `key`, lalu mengembalikannya, jika tidak - buatlah sebuah simbol baru `Symbol(key)` dan menyimpan simbol baru tersebut dalam catatan sesuai namanya `key`.\n\nContohnya:\n\n```js run\n// membaca dari catatan global\nlet id = Symbol.for(\"id\"); // jika simbol tidak ada, simbol tersebut akan dibuat\n\n// baca simbol tersebut lagi (mungkin dari bagian lain dari kode)\nlet idAgain = Symbol.for(\"id\");\n\n// simbol yang sama\nalert( id === idAgain ); // true\n```\n\nSimbol-simbol di dalam catatan (*registry*) disebut sebagai *simbol-simbol global* (*global symbols*). Jika kita ingin sebuah simbol yang berlaku untuk keseluruhan aplikasi, dapat diakses dari mana saja dalam kode -- itulah kegunaan dari simbol global.\n\n```smart header=\"Simbol global itu seperti dalam Ruby\"\nDalam beberapa bahasa pemrograman, seperti Ruby, hanya ada satu simbol per nama.\n\nDalam JavaScript, seperti yang bisa kita lihat, yakni simbol-simbol global.\n```\n\n### Symbol.keyFor\n\nUntuk simbol-simbol global, tidak hanya `Symbol.for(key)` yang mengembalikan sebuah simbol berdasarkan nama, tetapi ada sebuah panggilan sebaliknya: `Symbol.keyFor(sym)`, sintaks tersebut melakukan hal sebaliknya tadi: mengembalikan sebuah nama berdasarkan sebuah simbol global.\n\nContohnya:\n\n```js run\n// mendapatkan simbol bersasarkan nama\nlet sym = Symbol.for(\"name\");\nlet sym2 = Symbol.for(\"id\");\n\n// mendapatkan nama berdasarkan simbol\nalert( Symbol.keyFor(sym) ); // name\nalert( Symbol.keyFor(sym2) ); // id\n```\n\n`Simbol.keyFor` secara internal menggunakan simbol registry global untuk mencari key/kunci dari simbolnya. Jadi itu tidak akan bekerja dengan simbol non-global. Jika simbolnya bukan global, itu tidak akan bisa menemukannya dan akan mengembalikan `undefined`.\n\nSeperti yang dikatakan, simbol apapun memiliki properti `description`.\n\nContohnya:\n\n```js run\nlet globalSymbol = Symbol.for(\"name\");\nlet localSymbol = Symbol(\"name\");\n\nalert( Symbol.keyFor(globalSymbol) ); // name, simbol global\nalert( Symbol.keyFor(localSymbol) ); // undefined, bukan simbol global\n\nalert( localSymbol.description ); // name\n```\n\n## Simbol-simbol sistem\n\nTerdapat banyak simbol-simbol \"sistem\" yang JavaScript gunakan secara internal, dan kita bisa menggunakan simbol-simbol sistem tersebut untuk mengatur dengan baik berbagai aspek dari objek kita.\n\nSimbol-simbol tersebut sudah terdaftar dalam spesifikasi di tabel [Simbol-simbol ternama (*well-known symbols*)](https://tc39.github.io/ecma262/#sec-well-known-symbols):\n\n- `Symbol.hasInstance`\n- `Symbol.isConcatSpreadable`\n- `Symbol.iterator`\n- `Symbol.toPrimitive`\n- ...dan seterusnya.\n\nContohnya, `Symbol.toPrimitive` membuat kita dapat mendeskripsikan objek menjadi hasil konversi yang primitif. Kita akan melihatnya segera.\n\nSimbol-simbol lain akan juga menjadi tidak asing ketika kita sedenang mempelajari fitur-fitur di bahasa pemrograman tersebut.\n\n## Ringkasan\n\n`Symbol` adalah sebuah jenis primitif dari pengindetifikasi yang unik.\n\nSimbol-simbol dibuat menggunakan panggilan `Symbol()` dengan sebuah deskripsi (nama).\n\nSimbols selalu berbeda nilainya, bahkan jika mereka memiliki nama yang sama. Jika kita ingin simbol-simbol yang bernama sama tersebut untuk menjadi (simbol yang) sama, maka kita harus menggunakan catatan (*registry*) global: `Symbol.for(key)` mengembalikan (membuat jika perlu) sebuah simbol global dengan `key` yang sama dengan namanya. Panggilan-panggilan berganda pada `Symbol.for` dengan `key` yang sama mengenbalikan simbol yang persis sama.\n\nSimbol memiliki dua alasan utama pada pemakaiannya:\n\n1. Properti objek yang \"tersembunyi\".\n Jika kita ingin menambahkan sebuah properti ke dala sebuah objek yang \"dimiliki\" oleh *script* lain atau sebuah *library*, kita bisa membuat sebuah simbol dan menggunakannya sebagai sebuah kunci properti. Sebuah properti simbolis tidak muncul dalam `for..in`, jadi hal tersbeut tidak akan tanpa sengaja terproses bersama properti-properti lain. Juga, simbol tidak akan diakses secara langsung, karena *script* tidak memiliki simbol kita. Jadi properti akan terlindungi dari penggunaan yang tak disengaja maupun tertimpa (*overwrite*).\n\n Jadi kita bisa \"secara terselubung\" menyembunyikan sesuatu ke dalam objek yang kita inginkan, tetapi tidak bisa diliha oleh pihak lain, menggunakn properti simbolis.\n\n2. Terdapat banyak simbol sistem yang digunakan oleh oleh JavaScript yang mana dapat diakses sebagai `Symbol.*`. Kita bisa menggunakan simbol-simbol tersebut untuk mengubah beberapa perilaku bawaan (*built-in*). Sebagai contohnya, di tutorial selanjutnya kita akan menggunakan `Symbol.iterator` untuk [*iterables*](info:iterable), `Symbol.toPrimitive` untuk mengatur [konversi objek-ke-primitif](info:object-toprimitive) dan sebagainya.\n\nSecara teknis, simbol-simbol tidak 100% tersembunyi. Ada sebuah metode bawaan [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) yang membuat kita dapat mendapatkan semua simbol. Juga terdapat sebuah metode yang dinamakan [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) yang mengembalikan *semua* kunci dari sebuah objek termasuk yang kunci yang simbolik. Jadi simbol-simbol tersebut tidak sepenuhnya tersembunyi. Namun untuk sebagian besar *library*, fungsi-fungsi bawaan dan kontruksi sintaks constructs tidak menggunakan metode-metode ini.\n" }, { "path": "1-js/04-object-basics/09-object-toprimitive/article.md", "content": "# Menolak konversi primitif\n\nApa yang terjadi ketika objek ditambahkan `obj1 + obj2`, dikurangi `obj1 - obj2` atau dicetak menggunakan `alert(obj)`?\n\nJavaScript tidak benar-benar memungkinkan untuk menyesuaikan cara operator bekerja pada objek. Tidak seperti beberapa bahasa pemrograman lain, seperti Ruby atau C++, kami tidak dapat mengimplementasikan metode objek khusus untuk menangani penambahan (atau operator lain).\n\nDalam kasus operasi seperti itu, objek secara otomatis dikonversi ke primitif, dan kemudian operasi dilakukan di atas primitif ini dan menghasilkan nilai primitif.\n\nItu batasan penting, karena hasil dari `obj1 + obj2` tidak bisa menjadi objek lain!\n\nMisalnya. kita tidak dapat membuat objek yang mewakili vektor atau matriks (atau pencapaian atau apa pun), menambahkannya dan mengharapkan objek \"dijumlahkan\" sebagai hasilnya. Prestasi arsitektur seperti itu secara otomatis \"di luar papan\".\n\nJadi, karena kita tidak bisa berbuat banyak di sini, tidak ada matematika dengan objek dalam proyek nyata. Ketika itu terjadi, biasanya karena kesalahan pengkodean.\n\nDalam bab ini kita akan membahas bagaimana sebuah objek dikonversi ke primitif dan bagaimana menyesuaikannya.\n\nKami memiliki dua tujuan:\n\n1. Ini akan memungkinkan kita untuk memahami apa yang terjadi jika terjadi kesalahan pengkodean, ketika operasi seperti itu terjadi secara tidak sengaja.\n2. Ada pengecualian, di mana operasi semacam itu dimungkinkan dan terlihat bagus. Misalnya. mengurangkan atau membandingkan tanggal (objek `Tanggal`). Kami akan menemukan mereka nanti.\n\n## Aturan konversi\n\nDalam bab kita telah melihat aturan untuk konversi numerik, string, dan boolean dari primitif. Tapi kami meninggalkan celah untuk objek. Sekarang, seperti yang kita ketahui tentang metode dan simbol, menjadi mungkin untuk mengisinya.\n\n1. Semua objek `benar` dalam konteks boolean. Hanya ada konversi numerik dan string.\n2. Konversi numerik terjadi ketika kita mengurangi objek atau menerapkan fungsi matematika. Misalnya, objek `Tanggal` (akan dibahas dalam bab ) dapat dikurangi, dan hasil dari `tanggal1 - tanggal2` adalah perbedaan waktu antara dua tanggal.\n3. Untuk konversi string -- biasanya terjadi ketika kita mengeluarkan objek seperti `alert(obj)` dan dalam konteks yang serupa.\n\nKita dapat menyempurnakan konversi string dan numerik, menggunakan metode objek khusus.\n\nAda tiga varian konversi tipe, yang terjadi dalam berbagai situasi.\n\nMereka disebut \"petunjuk\", seperti yang dijelaskan dalam [spesifikasi](https://tc39.github.io/ecma262/#sec-toprimitive):\n\n`\"tali\"`\n: Untuk konversi objek-ke-string, saat kita melakukan operasi pada objek yang mengharapkan string, seperti `alert`:\n\n ```js\n // keluaran\n waspada (obj);\n\n // menggunakan objek sebagai kunci properti\n lainObj[obj] = 123;\n ```\n\n`\"nomor\"`\n: Untuk konversi objek ke angka, seperti saat kita mengerjakan matematika:\n\n ```js\n // konversi eksplisit\n misalkan angka = Angka(obj);\n\n // matematika (kecuali biner plus)\n misalkan n = +obj; // unary plus\n biarkan delta = tanggal1 - tanggal2;\n\n // lebih sedikit/perbandingan lebih besar\n biarkan lebih besar = pengguna1 > pengguna2;\n ```\n\n`\"default\"`\n: Terjadi dalam kasus yang jarang terjadi ketika operator \"tidak yakin\" jenis apa yang diharapkan.\n\n Misalnya, biner plus `+` dapat bekerja baik dengan string (menggabungkannya) dan angka (menambahkannya), jadi string dan angka bisa digunakan. Jadi jika biner plus mendapatkan objek sebagai argumen, ia menggunakan petunjuk `\"default\"` untuk mengonversinya.\n\n Selain itu, jika suatu objek dibandingkan menggunakan `==` dengan string, angka, atau simbol, konversi mana yang harus dilakukan juga tidak jelas, sehingga petunjuk `\"default\"` digunakan.\n\n ```js\n // binary plus menggunakan petunjuk \"default\"\n misalkan total = obj1 + obj2;\n\n // obj == nomor menggunakan petunjuk \"default\"\n if (pengguna == 1) { ... };\n ```\n\n Operator perbandingan yang lebih besar dan lebih kecil, seperti `<` `>`, dapat bekerja dengan string dan angka juga. Namun, mereka menggunakan petunjuk `\"number\"`, bukan `\"default\"`. Itu karena alasan historis.\n\n Namun dalam praktiknya, kita tidak perlu mengingat detail aneh ini, karena semua objek bawaan kecuali satu kasus (objek `Tanggal`, kita akan mempelajarinya nanti) mengimplementasikan konversi `\"default\"` dengan cara yang sama seperti ` \"nomor\"`. Dan kita bisa melakukan hal yang sama.\n\n```smart header=\"Tidak ada petunjuk `\\\"boolean\\\"`\"\nHarap dicatat -- hanya ada tiga petunjuk. Sesederhana itu.\n\nTidak ada petunjuk \"boolean\" (semua objek `benar` dalam konteks boolean) atau yang lainnya. Dan jika kita memperlakukan `\"default\"` dan `\"number\"` sama, seperti kebanyakan built-in, maka hanya ada dua konversi.\n```\n\n**Untuk melakukan konversi, JavaScript mencoba menemukan dan memanggil tiga metode objek:**\n\n1. Panggil `obj[Symbol.toPrimitive](hint)` - metode dengan kunci simbolis `Symbol.toPrimitive` (simbol sistem), jika metode tersebut ada,\n2. Sebaliknya jika petunjuknya adalah `\"string\"`\n - coba `obj.toString()` dan `obj.valueOf()`, apa pun yang ada.\n3. Jika petunjuknya adalah `\"number\"` atau `\"default\"`\n - coba `obj.valueOf()` dan `obj.toString()`, apa pun yang ada.\n\n## Symbol.toPrimitive\n\nMari kita mulai dari cara pertama. Ada simbol bawaan bernama `Symbol.toPrimitive` yang harus digunakan untuk menamai metode konversi, seperti ini:\n\n```js\nobj[Simbol.toPrimitif] = fungsi(petunjuk) {\n // dia" }, { "path": "1-js/04-object-basics/index.md", "content": "# Objects: dasar-dasar\n" }, { "path": "1-js/05-data-types/01-primitives-methods/1-string-new-property/solution.md", "content": "\nCobalah jalankan:\n\n```js run\nlet str = \"Hello\";\n\nstr.test = 5; // (*)\n\nalert(str.test);\n```\n\nTergantung apakah kamu gunakan `use strict` atau tidak, hasilnya mungkin bisa:\n1. `undefined` (bukan strict mode)\n2. An error (strict mode).\n\nKenapa? Kita lihat apa yang terjadi apda baris `(*)`:\n\n1. Ketika properti dari `str` di akses, sebuah \"objek pembungkus\" dibuat.\n2. Didalam mode strict, menulis kedalamnya adalah sebuah error.\n3. Otherwise, the operation with the property is carried on, the object gets the `test` property, but after that the \"wrapper object\" disappears, so in the last line `str` has no trace of the property.\n3. Sebaliknya, operasi dengan propertinya dibawa, objeknya mendapatkan properti `test`, tapi setelah itu \"objek pembungkus\" menghilang, jadi di baris terakhir `str` tidak mempunyai jejak dari properti itu.\n\n**Contoh ini dengan jelas membuktikan bahwa primitif bukanlah sebuah objek**\n\nMereka tidak bisa menyimpan data tambahan." }, { "path": "1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md", "content": "nilai penting: 5\n\n---\n\n# Bisakah saya menambahkan properti string?\n\n\nPerhatikan kode berikut:\n\n```js\nlet str = \"Hello\";\n\nstr.test = 5;\n\nalert(str.test);\n```\n\nBagaimana menurutmu, akankah itu bekerja? apa yang akan muncul?" }, { "path": "1-js/05-data-types/01-primitives-methods/article.md", "content": "# Metode primitif\n\nJavascript memperbolehkan kita untuk bekerja dengan primitif (string, angka, dan lain-lain.) seperti jika mereka adalah objek. Mereka juga menyediakan metode untuk dipanggil. Kita akan belajar tentang hal itu nanti, tapi pertama kita akan melihat bagaimana hal itu bekerja, dan juga, primitif bukanlah objek (dan disini kita akan membuat hal itu lebih jelas).\n\nAyo kita lihat pada kunci perbedaan diantara primitif dan objek.\n\nPrimitif\n\n- Adalah sebuah nilai dari tipe primitif.\n- Ada 7 primitif tipe: `string`, `number`, `bigint`, `boolean`, `symbol`, `null` dan `undefined`.\n\nObjek\n\n- Mampu untuk menyimpan banyak nilai sebagai properti.\n- Bisa dibuat dengan menggunakan `{}`, contoh: `{name: \"John\", age: 30}`. Terdapat beberapa macam objek di Javascript: untuk contoh, fungsi, adalah objek.\n\nSalah satu hal yang terbaik tentang objek adalah kita bisa menyimpan fungsi sebagai salah satu dari propertinya.\n\n```js run\nlet john = {\n name: \"John\",\n sayHi: function() {\n alert(\"Hi buddy!\");\n }\n};\n\njohn.sayHi(); // Hi buddy!\n```\n\nJadi disini kita membuat sebuah objek `john` dengan method `sayHi`.\n\nAda juga built-in objek yang tersedia, seperti objek yang bekerja dengan tanggal, error, elemen HTML, dll. Mereka mempunyai properti dan method yang berbeda-beda.\n\nTapi, fitur ini ada dengan efek samping.\n\nObjek lebih \"berat\" dari primitif. Dan mereka membutuhkan sumber daya tambahan untuk mendukung pekerjaannya.\n\n## Sebuah primitif sebagai sebuah objek\n\nIni adalah paradoks yang dihadapi dari pencipta Javascript:\n\n- Terdapat banyak hal yang harus dilakukan dengan primitif seperti string atau angka. Akan menjadi lebih baik jika mereka bisa diakses sebagai method.\n- Primitives must be as fast and lightweight as possible.\n- Sebisa mungkin primitif haruslah cepat dan ringan.\n\nSolusinya terlihat sedikit aneh, tapi inilah solusinya:\n\n1. Primitif masih tetap primitif. Sebuah nilai tunggal, seperti yang diinginkan.\n2. Bahasanya membolehkan untuk mengakses method dan properti dari string, number, boolean dan symbols.\n3. Untuk membuat itu bekerja, \"objek pembungkus\" spesial yang menyediakan fungsionalitas tambahan dibuat, dan lalu dihancurkan.\n\n\"Objek pembungkus\" berbeda untuk setiap tipe primitif dan dipanggil: `String`, `Number`, `Boolean` dan `Symbol`. Lalu, mereka menyediakan metode-metode yang berbeda.\n\nContoh, ada methode string [str.toUpperCase()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) yang mengembalikan string `str` yang telah diubah menjadi huruf kapital.\n\nBeginilah caranya itu bekerja:\n\n```js run\nlet str = \"Hello\";\n\nalert( str.toUpperCase() ); // HELLO\n```\n\nSimpel, kan? Inilah sebenarnya yang terjadi didalam `str.toUpperCase()`:\n\n1. String `str` adalah sebuah primitif. Jadi sementara waktu untuk mengakses propertinya, sebuah objek spesial yang tahu tentang nilai dari string dibuat, dan memiliki metode yang berguna, seperti `toUpperCase()`.\n2. Metode itu menjalankan dan mengembalikan string baru (ditampilkan oleh `alert`).\n3. Objek spesial itu lalu dihancurkan, meninggalkan `str` primitif.\n\nJadi primitif bisa menyediakan metode, tapi mereka akan tetap ringan.\n\nMesin Javascript sangat mengoptimasi proses ini. Ini mungkin akan melewatkan pembuatan dari objek tambahan itu. Tapi itu masih melekat pada spesifikasinya dan bertingkah seperti jika itu memang diciptakan.\n\nSebuah angka mempunyai metodenya sendiri, contoh [toFixed(n)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) membulatkan angka kedalam presisi yang diberikan:\n\n```js run\nlet n = 1.23456;\n\nalert( n.toFixed(2) ); // 1.23\n```\n\nKita akan melihat metode spesifik lainnya di bab dan .\n\n\n````warn header=\"Konstruktor `String/Number/Boolean` hanya digunakan untuk kebutuhan internal\" \nBeberapa bahasa seperti Java membolehkan kita untuk secara jelas membuat \"objek pembungkus\" untuk primitif menggunakan sintaks seperti `new Number(1)` atau `new Boolean(false)`.\n\nDidalam javascript, hal itu bisa dilakukan untuk beberapa alasan, tapi sangat **tidak direkomendasikan**. Beberapa hal akan menjadi rumit di beberapa tempat.\n\nContoh:\n\n```js run\nalert( typeof 0 ); // \"number\"\n\nalert( typeof new Number(0) ); // \"object\"!\n```\n\nObjek akan selalu truthy didalam `if`, jadi disini alert akan muncul:\n\n```js run\nlet zero = new Number(0);\n\nif (zero) { // zero adalah true, karena itu adalah sebuah objek\n alert( \"zero is truthy!?!\" );\n}\n```\n\nDisisi lain, menggunakan fungsi yang sama `String/Number/Boolean` tanpa `new` adalah hal yang masuk akal dan hal yang berguna. Mereka mengubah nilai kedalam tipe yang sesuai: kedalam sebuah string, sebuah number, atau sebuah boolean(primitif).\n\nContoh, hal ini sepenuhnya valid:\n```js\nlet num = Number(\"123\"); // mengubah string menjadi angka\n```\n````\n\n\n````warn header=\"null/undefined tidak memiliki method\"\nPrimitif spesial `null` dan `undefined` adalah pengecualian. Mereka tidak mempunyai \"objek pembungkus\" yang sesuai dan tidak menyediakan metode. Dalam arti tertentu, mereka adalah \"yang paling primitif\".\n\nPercobaan untuk mengakses properti seperti nilai akan memberikan error:\n\n```js run\nalert(null.test); // error\n````\n\n## Ringkasan\n\n- Primitif kecuali `null` dan `undefined` menyediakan banyak metode yang berguna. Kita akan belajar hal itu di bab selanjutnya.\n- Secara formal, metode-metode ini akan bekerja dengan menggunakan objek sementara, tapi mesin Javascript telah dibuat dengan baik untuk mengoptimasi hal itu secara internal, jadi mereka tidaklah sulit untuk dipanggil.\n\n" }, { "path": "1-js/05-data-types/02-number/1-sum-interface/solution.md", "content": "\n\n```js run demo\nlet a = +prompt(\"The first number?\", \"\");\nlet b = +prompt(\"The second number?\", \"\");\n\nalert( a + b );\n```\n\nCatatan bahwa unary plus `+` sebelum `prompt`. Segera mengkonversi nilai ke angka.\n\nJika tidak, `a` dan `b` akan menjadi string jumlah mereka akan menjadi gabungan mereka, yaitu: `\"1\" + \"2\" = \"12\"`." }, { "path": "1-js/05-data-types/02-number/1-sum-interface/task.md", "content": "nilai penting: 5\n\n---\n\n# Jumlahkan angka dari pengunjung\n\nBuat skrip yang meminta pengunjung untuk memasukkan dua angka dan kemudian menunjukkan jumlah mereka.\n\n[demo]\n\nN.B. Ada gotcha dengan tipe.\n" }, { "path": "1-js/05-data-types/02-number/2-why-rounded-down/solution.md", "content": "Secara internal pecahan desimal `6.35` adalah sebuah biner tanpa akhir. Seperti biasa dalam kasus seperti ini, disimpan dengan kehilangan presisi.\n\nAyo lihat:\n\n```js run\nalert( 6.35.toFixed(20) ); // 6.34999999999999964473\n```\n\nKehilangan presisi dapat menyebabkan peningkatan dan penurunan angka. Dalam kasus khusus ini jumlahnya menjadi sedikit lebih sedikit, itu sebabnya dibulatkan.\n\nDan apa untuk `1.35`?\n\n```js run\nalert( 1.35.toFixed(20) ); // 1.35000000000000008882\n```\n\nDi sini kehilangan presisi membuat jumlahnya sedikit lebih besar, jadi itu dibulatkan.\n\n**Bagaimana kita dapat memperbaiki masalah dengan `6.35` jika kita ingin itu dibulatkan dengan cara yang benar?**\n\nKita harus membawanya lebih dekat ke integer sebelum pembulatan:\n\n```js run\nalert( (6.35 * 10).toFixed(20) ); // 63.50000000000000000000\n```\n\nPerhatikan bahwa `63.5` tidak memiliki kehilangan presisi sama sekali. Itu karena bagian desimal `0,5` sebenarnya` 1 / 2`. Pecahan yang dibagi oleh kekuatan `2` persis diwakili dalam sistem biner, sekarang kita dapat membulatkannya:\n\n\n```js run\nalert( Math.round(6.35 * 10) / 10); // 6.35 -> 63.5 -> 64(rounded) -> 6.4\n```\n\n" }, { "path": "1-js/05-data-types/02-number/2-why-rounded-down/task.md", "content": "nilai penting: 4\n\n---\n\n# Kenapa 6.35.toFixed(1) == 6.3?\n\nBerdasarkan dokumentasi `Math.round` dan `toFixed` keduanya membulatkan ke angka terdekat: `0..4` turun sementara `5..9` naik.\n\nContohnya:\n\n```js run\nalert( 1.35.toFixed(1) ); // 1.4\n```\n\nDalam contoh serupa di bawah ini, mengapa `6.35` dibulatkan menjadi `6.3`, dan tidak `6.4`?\n\n```js run\nalert( 6.35.toFixed(1) ); // 6.3\n```\n\nBagaimana untuk membulatkan `6.35` dengan benar?\n\n" }, { "path": "1-js/05-data-types/02-number/3-repeat-until-number/_js.view/solution.js", "content": "\nfunction readNumber() {\n let num;\n\n do {\n num = prompt(\"Enter a number please?\", 0);\n } while ( !isFinite(num) );\n\n if (num === null || num === '') return null;\n \n return +num;\n}" }, { "path": "1-js/05-data-types/02-number/3-repeat-until-number/_js.view/test.js", "content": "beforeEach(function() {\n sinon.stub(window, \"prompt\");\n});\n\nafterEach(function() {\n prompt.restore();\n});\n\ndescribe(\"readNumber\", function() {\n\n it(\"if a number, returns it\", function() {\n prompt.returns(\"123\");\n assert.strictEqual(readNumber(), 123);\n });\n\n it(\"if 0, returns it\", function() {\n prompt.returns(\"0\");\n assert.strictEqual(readNumber(), 0);\n });\n\n it(\"continues the loop until meets a number\", function() {\n prompt.onCall(0).returns(\"not a number\");\n prompt.onCall(1).returns(\"not a number again\");\n prompt.onCall(2).returns(\"1\");\n assert.strictEqual(readNumber(), 1);\n });\n\n it(\"if an empty line, returns null\", function() {\n prompt.returns(\"\");\n assert.isNull(readNumber());\n });\n\n it(\"if cancel, returns null\", function() {\n prompt.returns(null);\n assert.isNull(readNumber());\n });\n\n});\n" }, { "path": "1-js/05-data-types/02-number/3-repeat-until-number/solution.md", "content": "\n```js run demo\nfunction readNumber() {\n let num;\n\n do {\n num = prompt(\"Enter a number please?\", 0);\n } while ( !isFinite(num) );\n\n if (num === null || num === '') return null;\n \n return +num;\n}\n\nalert(`Read: ${readNumber()}`);\n```\n\nSolusinya sedikit lebih rumit dari itu karena kita perlu menangani `null`/baris kosong.\n\nJadi, kita benar-benar menerima input hingga ini merupakan \"angka reguler\". Baik `null` (cancel) maupun baris kosong juga cocok dengan kondisi itu, karena dalam bentuk numerik mereka adalah` 0`.\n\nSetelah kita berhenti, kita perlu memperlakukan `null` dan khususnya baris kosong (mengembalikan `null`), karena mengonversinya menjadi angka akan mengembalikan `0`.\n\n" }, { "path": "1-js/05-data-types/02-number/3-repeat-until-number/task.md", "content": "nilai penting: 5\n\n---\n\n# Ulangi sampai masukan adalah sebuah angka\n\nBuatlah sebuah fungsi `readNumber` yang meminta (prompts) nomor hingga pengunjung memasukkan nilai numerik yang valid.\n\nNilai yang dihasilkan harus dikembalikan sebagai angka.\n\nPengunjung juga dapat menghentikan proses dengan memasukkan baris kosong atau menekan \"BATAL\". Dalam hal ini, fungsi tersebut harus mengembalikan `null`.\n\n[demo]\n\n" }, { "path": "1-js/05-data-types/02-number/4-endless-loop-error/solution.md", "content": "Itu karena `i` tidak akan pernah sebanding dengan `10`.\n\nJalankan ini untuk melihat nilai *real* dari `i`:\n\n```js run\nlet i = 0;\nwhile (i < 11) {\n i += 0.2;\n if (i > 9.8 && i < 10.2) alert( i );\n}\n```\n\nTidak satu pun dari mereka yang benar-benar `10`.\n\nHal-hal seperti itu terjadi karena kehilangan presisi ketika menambahkan pecahan seperti `0,2`.\n\nKesimpulan: menghindari pemeriksaan kesetaraan saat bekerja dengan pecahan desimal." }, { "path": "1-js/05-data-types/02-number/4-endless-loop-error/task.md", "content": "nilai penting: 4\n\n---\n\n# Lingkaran tak terbatas tak berkala\n\nLoop ini tidak terbatas. Tidak pernah berakhir. Mengapa?\n\n```js\nlet i = 0;\nwhile (i != 10) {\n i += 0.2;\n}\n```\n\n" }, { "path": "1-js/05-data-types/02-number/8-random-min-max/solution.md", "content": "Kita perlu \"memetakan\" semua nilai dari interval 0..1 ke dalam nilai dari `min` ke` max`.\n\nItu bisa dilakukan dalam dua tahap:\n\n1. Jika kita mengalikan angka acak dari 0..1 dengan `max-min`, maka interval nilai yang mungkin meningkat` 0..1` ke `0..max-min`.\n2. Sekarang jika kita menambahkan `min`, interval yang mungkin menjadi dari` min` ke `max`.\n\nFungsi:\n\n```js run\nfunction random(min, max) {\n return min + Math.random() * (max - min);\n}\n\nalert( random(1, 5) ); \nalert( random(1, 5) ); \nalert( random(1, 5) ); \n```\n\n" }, { "path": "1-js/05-data-types/02-number/8-random-min-max/task.md", "content": "nilai penting: 2\n\n---\n\n# Sebuah angka acak dari min ke max\n\nFungsi bawaan `Math.random()` membuat sebuah angka acak dari `0` ke `1` (tidak termasuk `1`).\n\nTulis fungsi `random(min, max)` untuk menghasilkan angka floating-point acak dari `min` ke` max` (tidak termasuk `max`).\n\nContoh kerjanya:\n\n```js\nalert( random(1, 5) ); // 1.2345623452\nalert( random(1, 5) ); // 3.7894332423\nalert( random(1, 5) ); // 4.3435234525\n```\n" }, { "path": "1-js/05-data-types/02-number/9-random-int-min-max/solution.md", "content": "# The simple but wrong solution\n\nThe simplest, but wrong solution would be to generate a value from `min` to `max` and round it:\n\n```js run\nfunction randomInteger(min, max) {\n let rand = min + Math.random() * (max - min); \n return Math.round(rand);\n}\n\nalert( randomInteger(1, 3) );\n```\n\nThe function works, but it is incorrect. The probability to get edge values `min` and `max` is two times less than any other.\n\nIf you run the example above many times, you would easily see that `2` appears the most often.\n\nThat happens because `Math.round()` gets random numbers from the interval `1..3` and rounds them as follows:\n\n```js no-beautify\nvalues from 1 ... to 1.4999999999 become 1\nvalues from 1.5 ... to 2.4999999999 become 2\nvalues from 2.5 ... to 2.9999999999 become 3\n```\n\nNow we can clearly see that `1` gets twice less values than `2`. And the same with `3`.\n\n# The correct solution\n\nThere are many correct solutions to the task. One of them is to adjust interval borders. To ensure the same intervals, we can generate values from `0.5 to 3.5`, thus adding the required probabilities to the edges:\n\n```js run\n*!*\nfunction randomInteger(min, max) {\n // now rand is from (min-0.5) to (max+0.5)\n let rand = min - 0.5 + Math.random() * (max - min + 1);\n return Math.round(rand);\n}\n*/!*\n\nalert( randomInteger(1, 3) );\n```\n\nAn alternative way could be to use `Math.floor` for a random number from `min` to `max+1`:\n\n```js run\n*!*\nfunction randomInteger(min, max) {\n // here rand is from min to (max+1)\n let rand = min + Math.random() * (max + 1 - min);\n return Math.floor(rand);\n}\n*/!*\n\nalert( randomInteger(1, 3) );\n```\n\nNow all intervals are mapped this way:\n\n```js no-beautify\nvalues from 1 ... to 1.9999999999 become 1\nvalues from 2 ... to 2.9999999999 become 2\nvalues from 3 ... to 3.9999999999 become 3\n```\n\nAll intervals have the same length, making the final distribution uniform.\n" }, { "path": "1-js/05-data-types/02-number/9-random-int-min-max/task.md", "content": "nilai penting: 2\n\n---\n\n# Sebuah integer acak dari min ke max\n\nBuatlah sebuah fungsi `randomInteger(min, max)` yang menghasilkan angka *integer* acak dari `min` ke `max` termasuk keduanya `min` dan `max` sebagai nilai yang mungkin.\n\nAngka apa pun dari interval `min..max` harus muncul dengan probabilitas yang sama.\n\n\nContoh kerjanya:\n\n```js\nalert( randomInteger(1, 5) ); // 1\nalert( randomInteger(1, 5) ); // 3\nalert( randomInteger(1, 5) ); // 5\n```\n\nAnda dapat menggunakan solusi dari [tugas sebelumnya](info:task/random-min-max) sebagai basis.\n" }, { "path": "1-js/05-data-types/02-number/article.md", "content": "# Angka\n\nDalam JavaScript modern, ada dua tipe angka:\n\n1. Angka regular di JavaScript yang disimpan dalam format 64-bit [IEEE-754](https://en.wikipedia.org/wiki/IEEE_754-2008_revision), juga dikenal sebagai \"angka double precision floating point\". Inilah angka yang kita paling sering kita pakai, dan kita akan bahas tentang mereka di bab ini.\n\n2. Angka BigInt, untuk mewakili integer dengan panjang sembarang. Mereka kadang dibutuhkan, karena angka regular tak bisa lebih dari 253 atau kurang dari -253. Karena bigint dipakai di sedikit area spesial, kita khususkan mereka bab spesial .\n\nJadi di sini kita akan bahas angka regular. Ayo perluas pengetahuan kita tentang mereka.\n\n## Cara lain menulis angka\n\nBayangkan kita harus menulis 1 milyar. Cara jelasnya begini:\n\n```js\nlet billion = 1000000000;\n```\n\nKita juga bisa menggunakan `_` sebagai pemisahnya:\n\n```js\nlet billion = 1_000_000_000;\n```\n\nDi sini, garis bawah `_` memainkan peran sebagai \"syntactic sugar\", ini membuat angka lebih mudah dibaca. Mesin JavaScript mengabaikan `_` di antara digit, jadi nilainya sama persis dengan satu miliar di atas.\n\nTapi di kehidupan nyata, kita biasanya menghindari menulis string nol yang panjang karena rentan terjadi kesalahan. Selain itu, kita malas. Kita biasanya akan menulis sesuatu seperti `\"1bn\"` untuk milyar atau `\"7.3bn\"` untuk 7 milyar 300 juta. Sama halnya dengan angka besar lainnya.\n\nDi JavaScript, kita perpendek angka dengan menambah huruf `\"e\"` ke angka dan menspesifikasi jumlah nol:\n\n```js run\nlet billion = 1e9; // 1 milyar, literalnya: 1 dan 9 nol\n\nalert( 7.3e9 ); // 7.3 milyar (7,300,000,000)\n```\n\nDengan kata lain, `\"e\"` kalikan angkanya dengan `1` dengan jumlah nol yang diberikan.\n\n```js\n1e3 = 1 * 1000 // e3 means *1000\n1.23e6 = 1.23 * 1000000 // e6 means *1000000\n```\n\nSekarang ayo tulis sesuatu lebih kecil. Katakan, 1 microsecond (sepersejuta second):\n\n```js\nlet ms = 0.000001;\n```\n\nSama seperti sebelumnya, memakai `\"e\"` bisa membantu. Jika kita ingin menghindari menulis nol eksplisit, kita bisa katakan hal yang sama:\n\n```js\nlet ms = 1e-6; // enam nol di sebelah kiri dari 1\n```\n\nJika kita hitung nol di `0.000001`, ada 6 dari mereka. Jadi alaminya `1e-6`. \n\nDengan kata lain, angka negatif setelah `\"e\"` artinya pembagian 1 dengan jumlah nol yang diberikan:\n\n```js\n// -3 membagi 1 dengan 3 nol\n1e-3 = 1 / 1000 (=0.001)\n\n// -6 membagi 1 dengan 6 nol\n1.23e-6 = 1.23 / 1000000 (=0.00000123)\n```\n\n### Hex, angka binary dan octal\n\nAngka [Hexadecimal](https://en.wikipedia.org/wiki/Hexadecimal) secara luas dipakai di JavaScript untuk mewakili warna, encode karakter, dan banyak hal lain. Alaminya, ada cara lebih singkat menulis mereka: `0x` kemudian angkanya.\n\nMisalnya:\n\n```js run\nalert( 0xff ); // 255\nalert( 0xFF ); // 255 (sama, case diabaikan)\n```\n\nSistem numeral binary dan octal jarang dipakai, tapi juga didukung menggunakan prefix `0b` dan `0o`:\n\n\n```js run\nlet a = 0b11111111; // bentuk binary dari 255\nlet b = 0o377; // bentuk octal dari 255\n\nalert( a == b ); // true, angka sama 255 dari kedua sisi\n```\n\nCuma ada 3 sistem numeral dengan dukungan begitu. Untuk sistem numeral lain, kita sebaiknya memakai fungsi `parseInt` (yang akan kita lihat nanti di bab ini).\n\n## toString(base)\n\nMetode `num.toString(base)` mengembalikan representasi string dari `num` di sistem numeral dengan `base` yang diberikan.\n\nMisalnya:\n```js run\nlet num = 255;\n\nalert( num.toString(16) ); // ff\nalert( num.toString(2) ); // 11111111\n```\n\n`base` bisa bervariasi dari `2` hingga `36`. Defaultnya `10`.\n\nPenggunaan umumnya ialah:\n\n- **base=16** dipakai untuk warna hex, character encoding dll, digit bisa `0..9` atau `A..F`.\n- **base=2** paling banyak untuk mendebug operasi bitwise, digit bisa `0` atau `1`.\n- **base=36** ini maximum, digit bisa `0..9` atau `A..Z`. Seluruh alfabet latin dipakai untuk merepresentasi angka. Hal lucu, tapi berguna untuk `36` ialah saat kita harus mengubah identifier numerik panjang ke dalam sesuatu yang lebih pendek, misalnya untuk membuat url pendek. Bisa direpresentasikan dalam sistem `36`:\n\n ```js run\n alert( 123456..toString(36) ); // 2n9c\n ```\n\n```warn header=\"Dua dot untuk memanggil metode\"\nTolong ingat bahwa dua dot di `123456..toString(36)` bukan typo. Jika kita mau memanggil langsung metode pada angka, seperti `toString` di contoh di atas, maka kita harus menaruh dua dot `..` setelahnya.\n\nJika kita menaruh dot tunggal: `123456.toString(36)`, maka akan ada galat, karena syntax JavaScript berimplikasi bahwa bagian desimal setelah dot pertama. Dan jika kita menaruh satu dot lagi, maka JavaScript tahu bahwa bagian desimal kosong dan sekarang pergi ke metode.\n\nJuga bisa menulis `(123456).toString(36)`.\n```\n\n## Pembulatan\n\nSatu dari operasi paling banyak dipakai saat bekerja dengan angka ialah pembulatan.\n\nAda beberapa fungsi built-in untuk pembulatan:\n\n`Math.floor`\n: Membulat ke bawah: `3.1` menjadi `3`, dan `-1.1` menjadi `-2`.\n\n`Math.ceil`\n: Membulat ke atas: `3.1` menjadi `4`, dan `-1.1` menjadi `-1`.\n\n`Math.round`\n: Membulatkan ke bilangan bulat terdekat: `3.1` menjadi` 3`, `3.6` menjadi` 4`, huruf tengah: `3.5` juga dibulatkan ke atas menjadi` 4`.\n\n`Math.trunc` (tidak didukung oleh Internet Explorer)\n: Menghapus apa pun setelah koma desimal tanpa pembulatan: `3.1` menjadi` 3`, `-1.1` menjadi` -1`.\n\nIni tabel untuk meringkas perbedaan di antara mereka:\n\n| | `Math.floor` | `Math.ceil` | `Math.round` | `Math.trunc` |\n|---|---------|--------|---------|---------|\n|`3.1`| `3` | `4` | `3` | `3` |\n|`3.6`| `3` | `4` | `4` | `3` |\n|`-1.1`| `-2` | `-1` | `-1` | `-1` |\n|`-1.6`| `-2` | `-1` | `-2` | `-1` |\n\n\nFungsi ini membahas semua cara yang mungkin untuk berhadapan dengan bagian desimal dari angka. Tapi bagaimana jika kita mau membulatkan angka ke digit `ke-n` setelah desimal?\n\nMisalnya, kita punya `1.2345` dan mau membulatkan ke 2 digit, memperoleh `1.23`.\n\nAda dua cara melakukannya:\n\n1. Kali-dan-bagi.\n\n Misalnya, untuk membulatkan angka ke digit kedua setelah desimal, kita bisa mengalikan angkanya dengan `100` (atau sebuah pangkat dari 10), panggil fungsi pembulatan lalu membagi itu kembali.\n ```js run\n let num = 1.23456;\n\n alert( Math.round(num * 100) / 100 ); // 1.23456 -> 123.456 -> 123 -> 1.23\n ```\n\n2. Metode [toFixed(n)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) Membulatkan ke digit `n` setelah poin itu dan mengembalikan representasi string dari hasilnya.\n\n ```js run\n let num = 12.34;\n alert( num.toFixed(1) ); // \"12.3\"\n ```\n\n Ini membulatkan ke atas atau ke bawah ke nilai terdekat, serupa dengan `Math.round`:\n\n ```js run\n let num = 12.36;\n alert( num.toFixed(1) ); // \"12.4\"\n ```\n\n Silakan catat hasil dari `toFixed` ialah string. Jika bagian desimal lebih pendek dari yang dibutuhkan, nol ditambahkan di akhir:\n\n ```js run\n let num = 12.34;\n alert( num.toFixed(5) ); // \"12.34000\", tambah nol supaya tepat 5 digit\n ```\n\n Kita bisa mengkonversi itu ke angka menggunakan unary plus atau panggilan `Number()`: `+num.toFixed(5)`.\n\n## Kalkulasi yang tidak tepat\n\nSecara internal, angka direpresentasikan dalam format 64-bit [IEEE-754](https://en.wikipedia.org/wiki/IEEE_754-2008_revision), jadi ada tepat 64 bit untuk menyimpan angka: 52 di antaranya digunakan untuk menyimpan angka, 11 di antaranya menyimpan posisi titik desimal (nol untuk angka bilangan bulat), dan 1 bit untuk tanda.\n\nJika angka terlalu besar, itu akan meluapkan penyimpanan 64-bit, berpotensi memberikan infinity:\n\n```js run\nalert( 1e500 ); // Infinity\n```\n\nYang mungkin agak kurang jelas, tetapi sering terjadi adalah hilangnya ketepatan.\n\nPertimbangkan (falsy!) tes ini:\n\n```js run\nalert( 0.1 + 0.2 == 0.3 ); // *!*false*/!*\n```\n\nBenar, jika kita memeriksa jumlah dari `0.1` dan `0.2` adalah `0.3`, kita mendapatkan `false`.\n\nAneh! Kenapa hasilnya itu dan tidak `0.3`?\n\n```js run\nalert( 0.1 + 0.2 ); // 0.30000000000000004\n```\n\nAduh! Ada lebih banyak konsekuensi daripada perbandingan yang salah di sini. Bayangkan Anda membuat situs e-shopping dan pengunjung memasukkan barang-barang `$ 0,10` dan` $ 0,20` ke troli mereka. Total pesanan akan `$ 0,30000000000000004`. Itu akan mengejutkan siapa pun.\n\nTetapi kenapa hal ini bisa terjadi?\n\nSebuah angka disimpan di memori dalam bentuk binary, sebuah urutan dari bits - satu dan nol. Tetapi bilangan pecahan seperti `0.1`, `0.2` yang terlihat sederhana dalam sistem angka desimal sebenarnya adalah pecahan tak berujung dalam bentuk binernya.\n\nDengan kata lain, apa itu `0,1`? Ini adalah satu dibagi dengan sepuluh `1 / 10`, sepersepuluh. Dalam sistem angka desimal, angka-angka seperti itu mudah diwakili. Bandingkan dengan sepertiga: `1 / 3`. Ini menjadi pecahan yang tak berujung `0,33333 (3)`.\n\nJadi, pembagian dengan kekuatan `10` dijamin bekerja dengan baik dalam sistem desimal, tetapi pembagian dengan `3` tidak. Untuk alasan yang sama, dalam sistem angka biner, pembagian dengan kekuatan `2` dijamin bekerja, tetapi `1 / 10` menjadi fraksi biner tanpa akhir.\n\nTidak ada cara untuk menyimpan * tepat 0,1 * atau * persis 0,2 * menggunakan sistem biner, sama seperti tidak ada cara untuk menyimpan sepertiga sebagai fraksi desimal.\n\nFormat numerik IEEE-754 memecahkan ini dengan membulatkan ke angka terdekat yang mungkin. Aturan pembulatan ini biasanya tidak memungkinkan kita untuk melihat bahwa \"kehilangan presisi kecil\", tetapi itu ada.\n\nKita bisa melihat ini dalam aksi:\n```js run\nalert( 0.1.toFixed(20) ); // 0.10000000000000000555\n```\n\nDan ketika kita menjumlahkan dua angka, \"kehilangan presisi\" mereka bertambah.\n\nItu sebabnya `0,1 + 0,2` tidak sepenuhnya` 0,3`.\n\n```smart header=\"Tidak hanya JavaScript\"\nMasalah yang sama ada di banyak bahasa pemrograman lainnya.\n\nPHP, Java, C, Perl, Ruby memberikan hasil yang sama persis, karena mereka didasarkan pada format numerik yang sama.\n```\n\nBisakah kita mengatasi masalah ini? Tentu, metode yang paling dapat diandalkan adalah melengkapi hasilnya dengan bantuan metode [toFixed(n)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed):\n\n```js run\nlet sum = 0.1 + 0.2;\nalert( sum.toFixed(2) ); // 0.30\n```\n\nHarap dicatat bahwa `toFixed` selalu mengembalikan string. Ini memastikan bahwa ia memiliki 2 digit setelah titik desimal. Itu sebenarnya nyaman jika kita memiliki e-shopping dan perlu menunjukkan `$ 0,30`. Untuk kasus lain, kita dapat menggunakan plus unary untuk memaksanya menjadi nomor:\n\n```js run\nlet sum = 0.1 + 0.2;\nalert( +sum.toFixed(2) ); // 0.3\n```\n\nKita juga dapat sementara mengalikan angka dengan 100 (atau angka yang lebih besar) untuk mengubahnya menjadi bilangan bulat, menghitung, dan kemudian membaginya kembali. Kemudian, saat kita mengerjakan matematika dengan bilangan bulat, kesalahannya agak berkurang, tetapi kita masih mendapatkannya di pembagian:\n\n```js run\nalert( (0.1 * 10 + 0.2 * 10) / 10 ); // 0.3\nalert( (0.28 * 100 + 0.14 * 100) / 100); // 0.4200000000000001\n```\n\nJadi, pendekatan perkalian/pembagian mengurangi kesalahan, tetapi tidak menghapusnya sama sekali.\n\nTerkadang kita bisa mencoba menghindari pecahan sama sekali. Seperti jika kita berurusan dengan toko, maka kita dapat menyimpan harga dalam sen, bukan dalam dolar. Tetapi bagaimana jika kita menerapkan diskon 30%? Dalam praktiknya, menghindari pecahan sama sekali jarang dimungkinkan. Hanya bulatkan mereka untuk memotong \"ekor\" bila diperlukan.\n\n````smart header=\"Lucunya\"\nCoba jalankan ini:\n\n```js run\n// Halo! saya adalah angka yang meningkat sendiri!\nalert( 9999999999999999 ); // menunjukkan 10000000000000000\n```\n\nPenderitaan ini berasal dari masalah yang sama: kehilangan presisi. Ada 64 bit untuk angka, 52 di antaranya dapat digunakan untuk menyimpan digit, tetapi itu tidak cukup. Jadi digit yang paling tidak penting menghilang.\n\nJavaScript tidak memicu kesalahan dalam kejadian semacam itu. Itu melakukan yang terbaik untuk memasukkan angka ke dalam format yang diinginkan, tetapi sayangnya, format ini tidak cukup besar.\n````\n\n```smart header=\"Dua nol\"\nKonsekuensi lucu yang lain dari representasi internal dari angka adalah adanya dua nol: `0` dan` -0`.\n\nItu karena sebuah tanda diwakili oleh satu bit, sehingga dapat diatur atau tidak diatur untuk angka apa pun termasuk nol.\n\nDalam kebanyakan kasus perbedaannya tidak terlalu mencolok, karena operator cocok untuk memperlakukan mereka sebagai sesuatu yang sama.\n```\n\n## Tests: isFinite dan isNaN\n\nIngat dua nilai numerik khusus ini?\n\n- `Infinity` (dan `-Infinity`) adalah nilai numerik khusus yang lebih besar (kurang) dari apa pun.\n- `NaN` mewakili kesalahan.\n\nMereka termasuk dalam tipe `angka`, tetapi bukan angka \"normal\", jadi ada fungsi khusus untuk memeriksanya:\n\n\n- `isNaN(value)` mengubah argumennya menjadi angka dan kemudian mengujinya `NaN`:\n\n ```js run\n alert( isNaN(NaN) ); // true\n alert( isNaN(\"str\") ); // true\n ```\n\n Tetapi apakah kita membutuhkan fungsi ini? Tidak bisakah kita menggunakan perbandingan `=== NaN`? Maaf, tapi jawabannya adalah tidak. Nilai `NaN` unik karena tidak sama dengan apa pun, termasuk dirinya sendiri:\n\n ```js run\n alert( NaN === NaN ); // false\n ```\n\n- `isFinite(value)` mengonversi argumennya menjadi angka dan mengembalikan `true` jika itu angka biasa, bukan `NaN/Infinity/-Infinity`:\n\n ```js run\n alert( isFinite(\"15\") ); // true\n alert( isFinite(\"str\") ); // false, karena nilai khusus: NaN\n alert( isFinite(Infinity) ); // false, karena nilai khusus: Infinity\n ```\n\nTerkadang `isFinite` digunakan untuk memvalidasi apakah sebuah nilai string adalah sebuah angka reguler:\n\n\n```js run\nlet num = +prompt(\"Enter a number\", '');\n\n// akan benar kecuali jika Anda memasukkan Infinity, -Infinity atau bukan angka\nalert( isFinite(num) );\n```\n\nHarap dicatat bahwa string kosong atau spasi-saja diperlakukan sebagai `0` dalam semua fungsi numerik termasuk` isFinite`.\n\n```smart header=\"Dibandingkan dengan `Object.is`\"\n\nAda metode bawaan khusus [Object.is](mdn:js/Object/is) yang membandingkan nilai seperti `===`, tetapi lebih dapat diandalkan untuk dua kasus:\n\n1. Ini bekerja dengan `NaN`: `Object.is(NaN, NaN) === true`, itu hal yang bagus.\n2. Nilai `0` and `-0` adalah berbeda: `Object.is(0, -0) === false`, secara teknis adalah benar, karena secara internal nomor tersebut memiliki bit tanda yang mungkin berbeda bahkan jika semua bit lainnya nol.\n\nPada kasus lain, `Object.is(a, b)` adalah sama dengan `a === b`.\n\nCara perbandingan ini sering digunakan dalam spesifikasi JavaScript. Ketika suatu algoritma internal perlu membandingkan dua nilai untuk menjadi persis sama, ia menggunakan `Object.is` (secara internal disebut [SameValue](https://tc39.github.io/ecma262/#sec-samevalue)).\n```\n\n\n## parseInt dan parseFloat\n\nKonversi angka menggunakan nilai tambah `+` atau `Number()` sangat ketat. Jika suatu nilai bukan angka, itu gagal:\n\n```js run\nalert( +\"100px\" ); // NaN\n```\n\nSatu-satunya pengecualian adalah spasi di awal atau di akhir string, karena diabaikan.\n\nTetapi dalam kehidupan nyata kita sering memiliki nilai dalam satuan, seperti `\"100px\"` atau `\"12pt\"` dalam CSS. Juga di banyak negara simbol mata uang mengikuti jumlah, jadi kita memiliki `\"€19\"` dan ingin mengekstraksi nilai numerik dari itu.\n\nUntuk itulah `parseInt` dan` parseFloat` ada.\n\nMereka \"membaca\" angka dari sebuah string sampai mereka tidak bisa. Jika terjadi kesalahan, nomor yang dikumpulkan dikembalikan. Fungsi `parseInt` mengembalikan integer, sementara` parseFloat` akan mengembalikan nomor floating-point:\n\n```js run\nalert( parseInt('100px') ); // 100\nalert( parseFloat('12.5em') ); // 12.5\n\nalert( parseInt('12.3') ); // 12, hanya bagian integer yang dikembalikan\nalert( parseFloat('12.3.4') ); // 12.3, poin kedua berhenti membaca\n```\n\nAda situasi dimana `parseInt/parseFloat` akan mengembalikan `NaN`. Ini terjadi ketika tidak ada digit yang bisa dibaca\n\n```js run\nalert( parseInt('a123') ); // NaN, symbol pertama menghentikan proses\n```\n\n````smart header=\"Pernyataan kedua dari `parseInt(str, radix)`\"\nFungsi `parseInt()` fungsi memiliki parameter opsional kedua. Ini menentukan dasar dari sistem angka, jadi `parseInt` juga dapat mengurai string nomor hex, angka biner dan sebagainya:\n\n```js run\nalert( parseInt('0xff', 16) ); // 255\nalert( parseInt('ff', 16) ); // 255, tanpa 0x juga bekerja\n\nalert( parseInt('2n9c', 36) ); // 123456\n```\n````\n\n## Fungsi matematika lainnya\n\nJavascript memiliki objek [Math](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Math) bawaan dimana berisi perpustakaan kecil fungsi matematika dan konstanta.\n\nBeberapa contoh:\n\n`Math.random()`\n: Mengembalikan angka acak dari 0 hingga 1 (tidak termasuk 1)\n\n ```js run\n alert( Math.random() ); // 0.1234567894322s\n alert( Math.random() ); // 0.5435252343232\n alert( Math.random() ); // ... (angka aca apa saja)\n ```\n\n`Math.max(a, b, c...)` / `Math.min(a, b, c...)`\n: Mengembalikan argumen terbesar / terkecil dari jumlah argumen yang arbitrer.\n\n ```js run\n alert( Math.max(3, 5, -10, 0, 1) ); // 5\n alert( Math.min(1, 2) ); // 1\n ```\n\n`Math.pow(n, power)`\n: mengembalikan bilangan `n` yang dipangkatkan.\n\n ```js run\n alert( Math.pow(2, 10) ); // 2 pangkat 10 = 1024\n ```\n\nAda lebih banyak fungsi dan konstanta dalam objek `Math`, termasuk trigonometri, yang dapat Anda temukan di [docs untuk objek Math](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Math).\n\n## Kesimpulan\n\nUntuk menulis angka dengan banyak nol:\n\n- Tambahkan `\"e\"` dengan hitungan angka nol ke angka. Seperti: `123e6` sama dengan `123` dengan 6 nol `123000000`.\n- Angka negatif setelah `\"e\"` menyebabkan angka untuk dibagi 1 dengan nol yang diberikan. Contohnya `123e-6` berarti `0.000123` (`123` millionths).\n\nUntuk sistem angka yang berbeda:\n\n- Dapat menulis angka secara langsung dalam sistem hex (`0x`), oktal (`0o`) dan sistem biner (`0b`)\n- `parseInt(str, base)` mem-parsing string `str` menjadi bilangan bulat dalam sistem angka dengan diberikan `base`, `2 ≤ base ≤ 36`.\n- `num.toString(base)` mengonversi angka menjadi string dalam sistem angka dengan diberikan `base`.\n\nUntuk mengkonversi nilai seperti `12pt` dan `100px` menjadi sebuah angka:\n\n- Gunakan `parseInt/parseFloat` untuk konversi \"lembut\", dimana membaca sebuah angka dari string dan mengembalikan nilai yang bisa dibaca sebelum terjadi kesalahan.\n\nUntuk pecahan:\n\n- Bulangan menggunakan `Math.floor`, `Math.ceil`, `Math.trunc`, `Math.round` atau `num.toFixed(presisi)`.\n- Pastikan untuk mengingat ada kehilangan presisi saat bekerja dengan pecahan.\n\nLebih banyak fungsi matematika:\n\n- Lihat objek [Math](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Math) ketika Anda membutuhkannya. Perpustakaannya sangat kecil, tetapi dapat memenuhi kebutuhan dasar.\n" }, { "path": "1-js/05-data-types/03-string/1-ucfirst/_js.view/solution.js", "content": "function ucFirst(str) {\n if (!str) return str;\n\n return str[0].toUpperCase() + str.slice(1);\n}" }, { "path": "1-js/05-data-types/03-string/1-ucfirst/_js.view/test.js", "content": "describe(\"ucFirst\", function() {\n it('Uppercases the first symbol', function() {\n assert.strictEqual(ucFirst(\"john\"), \"John\");\n });\n\n it(\"Doesn't die on an empty string\", function() {\n assert.strictEqual(ucFirst(\"\"), \"\");\n });\n});" }, { "path": "1-js/05-data-types/03-string/1-ucfirst/solution.md", "content": "Kita tidak dapat \"mengganti\" karakter pertama, karena di Javascript string bersifat tidak dapat berubah.\n\nTetapi kita dapat membuat sebuah string baru berdasarkan yang sudah ada, dengan karakter pertama yang besar:\n\n```js\nlet newStr = str[0].toUpperCase() + str.slice(1);\n```\n\nTetapi ada sedikit masalah. Jika `str` bernilai kosong, maka `str[0]` bernilai `undefined`, dan `undefined` tidak memiliki method `toUpperCase()`. Hal tersebut yang menyebabkan error.\n\nAda dua cara di sini:\n\n1. Gunakan `str.charAt(0)`, karena method ini selalu mengembalikan string (mungkin kosong).\n2. Tambahkan pengecekan string kosong.\n\nBerikut adalah cara yang kedua:\n\n```js run demo\nfunction ucFirst(str) {\n if (!str) return str;\n\n return str[0].toUpperCase() + str.slice(1);\n}\n\nalert( ucFirst(\"john\") ); // John\n```\n" }, { "path": "1-js/05-data-types/03-string/1-ucfirst/task.md", "content": "Nilai penting: 5\n\n---\n\n# Buat karakter pertama menjadi besar\n\nTulislah sebuah fungsi `ucFirst(str)` yang mengembalikan `str` dengan karakter pertama yang besar, sebagai contoh:\n\n```js\nucFirst(\"john\") == \"John\";\n```\n\n" }, { "path": "1-js/05-data-types/03-string/2-check-spam/_js.view/solution.js", "content": "function checkSpam(str) {\n let lowerStr = str.toLowerCase();\n\n return lowerStr.includes('viagra') || lowerStr.includes('xxx');\n}" }, { "path": "1-js/05-data-types/03-string/2-check-spam/_js.view/test.js", "content": "describe(\"checkSpam\", function() {\n it('finds spam in \"buy ViAgRA now\"', function() {\n assert.isTrue(checkSpam('buy ViAgRA now'));\n });\n\n it('finds spam in \"free xxxxx\"', function() {\n assert.isTrue(checkSpam('free xxxxx'));\n });\n\n it('no spam in \"innocent rabbit\"', function() {\n assert.isFalse(checkSpam('innocent rabbit'));\n });\n});" }, { "path": "1-js/05-data-types/03-string/2-check-spam/solution.md", "content": "Untuk membuat pencarian bersifat case-insensitive, mari kita ubah string menjadi huruf kecil sebelum kita lakukan pencarian:\n\n```js run demo\nfunction checkSpam(str) {\n let lowerStr = str.toLowerCase();\n\n return lowerStr.includes('viagra') || lowerStr.includes('xxx');\n}\n\nalert( checkSpam('buy ViAgRA now') );\nalert( checkSpam('free xxxxx') );\nalert( checkSpam(\"innocent rabbit\") );\n```\n\n" }, { "path": "1-js/05-data-types/03-string/2-check-spam/task.md", "content": "Nilai kepentingan: 5\n\n---\n\n# Mengecek apakah spam\n\nTulislah sebuah fungsi `checkSpam(str)` yang mengembalikan `true` apabila `str` mengandung 'viagra' atau 'XXX', jika tidak kembalikan `false`.\n\nFungsi yang ditulis harus bersifat case-insensitive:\n\n```js\ncheckSpam('buy ViAgRA now') == true\ncheckSpam('free xxxxx') == true\ncheckSpam(\"innocent rabbit\") == false\n```\n\n" }, { "path": "1-js/05-data-types/03-string/3-truncate/_js.view/solution.js", "content": "function truncate(str, maxlength) {\n return (str.length > maxlength) ? \n str.slice(0, maxlength - 1) + '…' : str;\n}" }, { "path": "1-js/05-data-types/03-string/3-truncate/_js.view/test.js", "content": "describe(\"truncate\", function() {\n it(\"truncate the long string to the given length (including the ellipsis)\", function() {\n assert.equal(\n truncate(\"What I'd like to tell on this topic is:\", 20),\n \"What I'd like to te…\"\n );\n });\n\n it(\"doesn't change short strings\", function() {\n assert.equal(\n truncate(\"Hi everyone!\", 20),\n \"Hi everyone!\"\n );\n });\n\n});\n" }, { "path": "1-js/05-data-types/03-string/3-truncate/solution.md", "content": "Panjang maksimum adalah `maxlength`, jadi kita perlu memotongnya menjadi lebih pendek, untuk memberi tempat bagi elipsis.\n\nPerlu diperhatikan bahwa elipsis hanyalah sebuah karakter unicode, bukan tiga karakter titik.\n\n```js run demo\nfunction truncate(str, maxlength) {\n return (str.length > maxlength) ?\n str.slice(0, maxlength - 1) + '…' : str;\n}\n```\n" }, { "path": "1-js/05-data-types/03-string/3-truncate/task.md", "content": "Nilai kepentingan: 5\n\n---\n\n# Memotong teks menjadi lebih pendek\n\nBuatlah sebuah fungsi `truncate(str, maxlength)` yang mengecek panjang dari `str` dan, apabila panjangnya melebihi `maxlength` -- ganti akhir dari `str` menjadi karakter elipsis `\"…\"`, supaya panjangnya sama dengan `maxlength`.\n\nHasil kembalian dari fungsi seharusnya string yang dipotong (jika diperlukan).\n\nSebagai contoh:\n\n```js\ntruncate(\"What I'd like to tell on this topic is:\", 20) = \"What I'd like to te…\"\n\ntruncate(\"Hi everyone!\", 20) = \"Hi everyone!\"\n```\n" }, { "path": "1-js/05-data-types/03-string/4-extract-currency/_js.view/solution.js", "content": "function extractCurrencyValue(str) {\n return +str.slice(1);\n}" }, { "path": "1-js/05-data-types/03-string/4-extract-currency/_js.view/test.js", "content": "describe(\"extractCurrencyValue\", function() {\n\n it(\"for the string $120 returns the number 120\", function() {\n assert.strictEqual(extractCurrencyValue('$120'), 120);\n });\n\n\n});" }, { "path": "1-js/05-data-types/03-string/4-extract-currency/solution.md", "content": "" }, { "path": "1-js/05-data-types/03-string/4-extract-currency/task.md", "content": "Nilai kepentingan: 4\n\n---\n\n# Ambil uangnya\n\nKita memiliki uang dalam bentuk `\"$120\"`. Yaitu: tanda dolar muncul pertama, lalu diikuti oleh angka.\n\nBuatlah sebuah fungsi `extractCurrencyValue(str)` yang mengambil nilai dari bagian angka string tersebut dan mengembalikannya.\n\nSebagai contoh:\n\n```js\nalert( extractCurrencyValue('$120') === 120 ); // true\n```\n\n" }, { "path": "1-js/05-data-types/03-string/article.md", "content": "# String\n\nDi Javascript, data teks disimpan sebagai string. Tidak ada tipe data sendiri untuk satu buah karakter.\n\n[UTF-16](https://en.wikipedia.org/wiki/UTF-16) selalu digunakan sebagai format internal string, hal tersebut tidak terikat dengan jenis encoding yang digunakan oleh halaman.\n\n## Petik\n\nMari kita lihat berbagai jenis petik.\n\nString dapat ditutup dengan petik satu, petik dua, maupun backtick:\n\n```js\nlet single = 'single-quoted';\nlet double = \"double-quoted\";\n\nlet backticks = `backticks`;\n```\n\nPetik satu dan petik dua kurang lebih hampir sama. Akan tetapi backtick memiliki perbedaan, yaitu memperbolehkan kita untuk menyisipkan ekspresi ke dalam string, dengan menaruhnya di dalam `${…}`:\n\n```js run\nfunction sum(a, b) {\n return a + b;\n}\n\nalert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.\n```\n\nKelebihan backtick yang lain yaitu backtick memperbolehkan sebuah string untuk terdiri lebih dari satu baris:\n\n```js run\nlet guestList = `Guests:\n * John\n * Pete\n * Mary\n`;\n\nalert(guestList); // list tamu, dipisahkan per baris\n```\n\nLebih rapi, kan? Tetapi petik satu atau dua tidak bekerja seperti itu.\n\nJika kita coba untuk menggunakan mereka untuk lebih dari satu baris, akan terjadi error:\n\n```js run\nlet guestList = \"Guests: // Error: Unexpected token ILLEGAL\n * John\";\n```\n\nPetik satu dan petik dua berasal dari masa lalu saat bahasa pemrograman dibuat, dimana kebutuhan untuk string lebih dari satu baris belum dipikirkan. Backtick muncul di kemudian hari, dan lebih fleksibel.\n\nBacktick juga memperbolehkan kita untuk menspesifikasi \"fungsi template\" sebelum backtick pertama. Syntaxnya yaitu: func`string`. Fungsi `func` dipanggil secara otomatis, menerima string dan ekspresi yang berada di dalamnya dan bisa memproses mereka. Ini disebut \"tagged templates\". Fitur ini membuat implementasi kustom templating lebih mudah, tapi jaran dipakai dalam praktik. Kamu bisa membaca lebih tentang ini di [manual](mdn:/JavaScript/Reference/Template_literals#Tagged_templates).\n\n## Karakter spesial\n\nMasih mungkin untuk membuat string dengan banyak baris menggunakan petik satu atau petik dua dengan menggunakan \"karakter newline\", ditulis seperti berikut `\\n`, yang menandakan baris baru:\n\n```js run\nlet guestList = \"Guests:\\n * John\\n * Pete\\n * Mary\";\n\nalert(guestList); // list tamu yang dipisahkan per baris\n```\n\nSebagai contoh, kedua baris berikut sama saja, hanya ditulis dengan cara yang berbeda:\n\n```js run\nlet str1 = \"Hello\\nWorld\"; // dua baris menggunakan \"simbol baris baru\"\n\n// dua baris menggunakan backtick\nlet str2 = `Hello\nWorld`;\n\nalert(str1 == str2); // true\n```\n\nAda karakter spesial lain, tetapi mereka jarang digunakan\n\nBerikut adalah daftar lengkapnya:\n\n| Character | Description |\n|-----------|-------------|\n|`\\n`|Baris baru|\n|`\\r`|Carriage return: tidak digunakan sendiri. File teks milik di Windows menggunakan kombinasi dari dua karakter `\\r\\n` untuk menandakan baris baru.|\n|`\\'`, `\\\"`|Petik-petik|\n|`\\\\`|Backslash|\n|`\\t`|Tab|\n|`\\b`, `\\f`, `\\v`| Backspace, Form Feed, Vertical Tab -- tetap bisa digunakan untuk kompabilitas, sekarang sudah tidak digunakan. |\n|`\\xXX`|Karakter unicode dengan nilai heksadesimal `XX`, misalnya `'\\x7A'` itu sama saja dengan `'z'`.|\n|`\\uXXXX`|Sebuah simbol unicode dengan nilai heksadesimal `XXXX` di dalam encoding UTF-16, sebagai contoh `\\u00A9` -- adalah sebuah unicode untuk simbol copyright `©`. Simbol ini harus terdiri dari 4 digit heksadesimal. |\n|`\\u{X…XXXXXX}` (1 to 6 karakter heksadesimal)|Sebuah simbol unicode dengan encoding UTF-32. Beberapa karakter langka menggunakan dua simbol unicode, yang memakan 4 byte. Dengan cara ini kita dapat menggunakan kode yang panjang. |\n\nContoh dengan unicode:\n\n```js run\nalert( \"\\u00A9\" ); // ©\nalert( \"\\u{20331}\" ); // 佫, sebuah karakter mandarin (unicode panjang)\nalert( \"\\u{1F60D}\" ); // 😍, sebuah simbol wajah tersenyum (unicode panjang lainnya)\n```\n\nKarakter-karakter spesial yang diawali dengan karakter backslash `\\` kadang dipanggil dengan sebutan \"escape character\".\n\nKita kadang dapat menggunakannya apabila kita ingin menggunakan petik di dalam string.\n\nMisalnya:\n\n```js run\nalert( 'I*!*\\'*/!*m the Walrus!' ); // *!*I'm*/!* the Walrus!\n```\n\nSeperti yang kita lihat, kita harus menambahkan backslash di depan petik yang di dalam string `\\'`, karena jika tidak petik tersebut akan menandakan akhir dari sebuah string.\n\nTentu saja, hanya jenis petik yang sama dengan penutup string yang perlu di \"escape\". Jadi, solusi yang lebih elegan yaitu mengganti petik satu menjadi petik dua atau backtick:\n\n```js run\nalert( `I'm the Walrus!` ); // I'm the Walrus!\n```\n\nIngat bahwa backslash `\\` hanya dipakai untuk Javascript agar dapat membaca string dengan benar. Di dalam memori, string tidak memiliki `\\`. Anda dapat melihatnya secara langsung pada contoh `alert` di atas.\n\nTetapi bagaimana jika kita ingin menampilkan backslash `\\` di dalam sebuah string?\n\nHal tersebut bisa dilakukan, tetapi kita harus menulisnya dua kali seperti ini `\\\\`:\n\n```js run\nalert( `The backslash: \\\\` ); // The backslash: \\\n```\n\n## Panjang string\n\nProperti `length` memiliki panjang dari string:\n\n```js run\nalert( `My\\n`.length ); // 3\n```\n\nPerlu diingat bahwa `\\n` adalah sebuah karakter spesial, jadi panjang dari string adalah `3`.\n\n```warn header=\"`length` adalah sebuah properti\"\nOrang dengan latar belakang di bahasa pemrograman lain kadang salah mengetik `str.length()` alih-alih `str.length`. Hal tersebut tidak bekerja.\n\nPerlu diingat bahwa `str.length` adalah properti numerik, bukan sebuah fungsi. Tidak perlu menambahkan kurung di belakangnya.\n```\n\n## Mengakses karakter di dalam string\n\nUntuk mengakses karakter pada posisi `pos`, digunakan kurung kotak `[pos]` atau dengan method [str.charAt(pos)](mdn:js/String/charAt). Karakter pertama dimulai dari posisi ke-0:\n\n```js run\nlet str = `Hello`;\n\n// karakter pertama\nalert( str[0] ); // H\nalert( str.charAt(0) ); // H\n\n// karakter terakhir\nalert( str[str.length - 1] ); // o\n```\n\nKurung kotak adalah cara modern untuk mengakses sebuah karakter, sementara `charAt` ada karena alasan historis.\n\nPerbedaan satu-satunya di antara mereka adalah apabila tidak ada karakter yang ditemukan, `[]` mengembalikan `undefined`, dan `charAt` mengembalikan string kosong:\n\n```js run\nlet str = `Hello`;\n\nalert( str[1000] ); // undefined\nalert( str.charAt(1000) ); // '' (string kosong)\n```\n\nKita juga bisa mengakses karakter per karakter menggunakan sintaks `for..of`:\n\n```js run\nfor (let char of \"Hello\") {\n alert(char); // H,e,l,l,o (char bernilai \"H\", lalu \"e\", lalu \"l\", dan seterusnya)\n}\n```\n\n## String bersifat tidak dapat diubah\n\nNilai string tidak dapat diubah di Javascript. Tak mungkin mengubah sebuah karakter.\n\nMari kita coba buktikan:\n\n```js run\nlet str = 'Hi';\n\nstr[0] = 'h'; // galat\nalert( str[0] ); // tidak bekerja\n```\n\nSalah satu cara untuk mengatasi hal tersebut adalah untuk membuat string baru lalu memasukkan nilainya ke `str`.\n\nSebagai contoh:\n\n```js run\nlet str = 'Hi';\n\nstr = 'h' + str[1]; // mengganti nilai string\n\nalert( str ); // hi\n```\n\nDi bab ini kita akan melihat contoh lebih banyak dari ini.\n\n## Mengganti case\n\nMetode [toLowerCase()](mdn:js/String/toLowerCase) dan [toUpperCase()](mdn:js/String/toUpperCase) mengganti case:\n\n```js run\nalert( 'Interface'.toUpperCase() ); // INTERFACE\nalert( 'Interface'.toLowerCase() ); // interface\n```\n\nAtau, apabila kita hanya ingin sebuah karakter yang diubah menjadi huruf kecil:\n\n```js\nalert( 'Interface'[0].toLowerCase() ); // 'i'\n```\n\n## Mencari substring\n\nAda banyak cara untuk mencari sebuah substring di dalam sebuah string.\n\n### str.indexOf\n\nCara yang pertama yaitu [str.indexOf(substr, pos)](mdn:js/String/indexOf).\n\nMethod ini mencari `substr` di dalam `str`, mulai dari posisi `pos` yang diberikan, dan mengembalikan posisi dimana substring ditemukan atau `-1` jika tidak ditemukan.\n\nMisalnya:\n\n```js run\nlet str = 'Widget with id';\n\nalert( str.indexOf('Widget') ); // 0, karena 'Widget' ditemukan di awal string\nalert( str.indexOf('widget') ); // -1, tidak ditemukan, karena pencarian bersifat case-sensitive\n\nalert( str.indexOf(\"id\") ); // 1, \"id\" ditemukan pada posisi 1 (..idget with id)\n```\n\nParameter kedua yang opsional memperbolehkan kita untuk mencari dari posisi yang ditentukan.\n\nMisalnya, kemunculan pertama `\"id\"` ada di posisi `1`. Untuk mencari kemunculan berikutnya, ayo kita mulai pencarian dari posisi `2`:\n\n```js run\nlet str = 'Widget with id';\n\nalert( str.indexOf('id', 2) ) // 12\n```\n\nJika kita tertarik dengan semua kemunculan, kita bisa menjalankan `indexOf` di dalam loop. Setiap panggilan dibuat dengan posisi setelah kemunculan sebelumnya:\n\n```js run\nlet str = 'As sly as a fox, as strong as an ox';\n\nlet target = 'as'; // mari kita cari\n\nlet pos = 0;\nwhile (true) {\n let foundPos = str.indexOf(target, pos);\n if (foundPos == -1) break;\n\n alert( `Found at ${foundPos}` );\n pos = foundPos + 1; // lanjutkan pencarian dari posisi berikutnya\n}\n```\n\nAlgoritma yang sama dapat ditulis lebih pendek:\n\n```js run\nlet str = \"As sly as a fox, as strong as an ox\";\nlet target = \"as\";\n\n*!*\nlet pos = -1;\nwhile ((pos = str.indexOf(target, pos + 1)) != -1) {\n alert( pos );\n}\n*/!*\n```\n\n```smart header=\"`str.lastIndexOf(substr, position)`\"\nAda juga method yang hampir sama [str.lastIndexOf(substr, position)](mdn:js/String/lastIndexOf) yang mencari dari akhir sebuah string sampai ke awalnya.\n\nCara tersebut akan menemukan kemunculan dalam urutan yang terbalik.\n```\n\nAda sedikit kerepotan dalam menggunakan `indexOf` di dalam `if`. Kita tidak dapat menggunakannya seperti ini:\n\n```js run\nlet str = \"Widget with id\";\n\nif (str.indexOf(\"Widget\")) {\n alert(\"We found it\"); // tidak bekerja!\n}\n```\n\nContoh di atas tidak bekerja karena `str.indexOf(\"Widget\")` mengembalikan `0` (artinya kemunculan ditemukan di awal string). `if` menganggap `0` sebagai `false`.\n\nJadi, kita harus mengecek dengan nilai `-1`, seperti ini:\n\n```js run\nlet str = \"Widget with id\";\n\n*!*\nif (str.indexOf(\"Widget\") != -1) {\n*/!*\n alert(\"We found it\"); // kalau sekarang berhasil!\n}\n```\n\n#### Trik bitwise NOT\n\nSalah satu trik lama yang digunakan disini adalah operator [bitwise NOT](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT) `~`. Operator ini mengubah angka menjadi integer 32-bit (menghilangkan bagian desimal jika ada) lalu menegasikan semua bit pada representasi binernya.\n\nDalam praktik, hal tersebut berarti: untuk integer 32-bit `~n` sama dengan `-(n+1)`.\n\nSebagai contoh:\n\n```js run\nalert( ~2 ); // -3, sama dengan -(2+1)\nalert( ~1 ); // -2, sama dengan -(1+1)\nalert( ~0 ); // -1, sama dengan -(0+1)\n*!*\nalert( ~-1 ); // 0, sama dengan -(-1+1)\n*/!*\n```\n\nSeperti yang kita lihat, `~n` bernilai nol apabila `n == -1` (untuk semua signed integer `n`).\n\nJadi, pengecekan di dalam `if ( ~str.indexOf(\"...\") )` bernilai benar apabila hasil dari `indexOf` tidak bernilai `-1`. Dengan kata lain, jika kemunculan ditemukan.\n\nOrang-orang menggunakannya untuk memperpendek pengecekan `indexOf`:\n\n```js run\nlet str = \"Widget\";\n\nif (~str.indexOf(\"Widget\")) {\n alert( 'Found it!' ); // bekerja\n}\n```\n\nBiasanya tidak direkomendasikan untuk menggunakan fitur bahasa dengan cara yang tidak jelas, tetapi trik ini biasa digunakan di kode yang kuno, jadi kita harus memahaminya.\n\nIngat: `if (~str.indexOf(...))` dibaca sebagai \"if ditemukan\".\n\nUntuk lebih detail, karena bilangan yang besar dipotong menjadi 32-bit oleh operator `~`, ada angka lain yang memberikan hasil `0`, angka yang terkecil yaitu `~4294967295=0`. Hal tersebut menyebabkan trik ini benar apabila string yang dites tidak sepanjang itu.\n\nKita dapat melihat bahwa trik ini hanya digunakan di kode yang kuno, karena Javascript modern menyediakan method `.includes` (lihat di bawah).\n\n### includes, startsWith, endsWith\n\nMethod yang lebih modern [str.includes(substr, pos)](mdn:js/String/includes) mengembalikan `true/false` tergantung dengan apakah `str` mengandung `substr` di dalamnya.\n\nIni adalah pilihan yang cocok apabila kita hanya perlu mengetes apakah `substr` ada, tetapi tidak memerlukan posisinya:\n\n```js run\nalert( \"Widget with id\".includes(\"Widget\") ); // true\n\nalert( \"Hello\".includes(\"Bye\") ); // false\n```\n\nParameter opsinal kedua dari `str.includes` adalah posisi dimana pencarian mulai dilakukan:\n\n```js run\nalert( \"Widget\".includes(\"id\") ); // true\nalert( \"Widget\".includes(\"id\", 3) ); // false, dari posisi 3 tidak ditemukan \"id\"\n```\n\nMethod [str.startsWith](mdn:js/String/startsWith) dan [str.endsWith](mdn:js/String/endsWith) melakukan fungsi seperti namanya:\n\n```js run\nalert( \"Widget\".startsWith(\"Wid\") ); // true, \"Widget\" diawali oleh \"Wid\"\nalert( \"Widget\".endsWith(\"get\") ); // true, \"Widget\" diakhiri oleh \"get\"\n```\n\n## Mengambil substring\n\nAda 3 cara untuk mengambil sebuah substring di Javascript: `substring`, `substr` dan `slice`.\n\n`str.slice(start [, end])`\n: Mengembalikan bagian dari string dari `start` sampai (tapi tidak termasuk) `end`.\n\n Sebagai contoh:\n\n ```js run\n let str = \"stringify\";\n alert( str.slice(0, 5) ); // 'strin', substring dari posisi 0 sampai 5 (tidak termasuk 5)\n alert( str.slice(0, 1) ); // 's', dari 0 sampai 1, tetapi tidak termasuk 1, jadi hanya karakter pada posisi 0\n ```\n\n Jika tidak ada parameter kedua, maka `slice` akan mengambil semua bagian dari `start` sampai akhir string:\n\n ```js run\n let str = \"st*!*ringify*/!*\";\n alert( str.slice(2) ); // ringify, dari posisi kedua sampai terakhir\n ```\n\n Nilai negatif untuk `start/end` juga bisa digunakan. Nilai negatif berarti posisinya dihitung dari akhir string:\n\n ```js run\n let str = \"strin*!*gif*/!*y\";\n\n // mulai dari posisi ke-4 dari kanan, berakhir di posisi pertama dari kanan\n alert( str.slice(-4, -1) ); // gif\n ```\n\n`str.substring(start [, end])`\n: Mengembalikan bagian dari string *di antara* `start` dan `end`.\n\n Method ini hampir sama dengan `slice`, tetapi nilai `start` boleh lebih besar daripada `end`.\n\n Sebagai contoh:\n\n ```js run\n let str = \"st*!*ring*/!*ify\";\n\n // kedua ini sama saja untuk substring\n alert( str.substring(2, 6) ); // \"ring\"\n alert( str.substring(6, 2) ); // \"ring\"\n\n // ...tetapi tidak untuk slice:\n alert( str.slice(2, 6) ); // \"ring\" (sama)\n alert( str.slice(6, 2) ); // \"\" (string kosong)\n\n ```\n\n Parameter negatif tidak didukung (tidak seperti slice), mereka dianggap sebagai `0`.\n\n`str.substr(start [, length])`\n: Mengembalikan substring dari `start`, dengan panjang `length`.\n\n Dibandingkan dengan cara-cara sebelumnya, cara ini memperbolehkan kita untuk menyebutkan `length` alih-alih posisi akhir dari string:\n\n ```js run\n let str = \"st*!*ring*/!*ify\";\n alert( str.substr(2, 4) ); // ring, dari posisi ke-2 ambil 4 karakter\n ```\n\n Parameter pertama mungkin bernilai negatif, untuk menghitung dari akhir string:\n\n ```js run\n let str = \"strin*!*gi*/!*fy\";\n alert( str.substr(-4, 2) ); // gi, dari posisi ke-4 ambil 2 karakter\n ```\n\nMari kita review cara-cara tersebut untuk menghindari kebingungan:\n\n| method | mengambil... | negatives |\n|--------|-----------|-----------|\n| `slice(start, end)` | dari `start` sampai `end` (tidak termasuk `end`) | nilai negatif diperbolehkan |\n| `substring(start, end)` | antara `start` dan `end` | nilai negatif berarti mean `0` |\n| `substr(start, length)` | dari `start` ambil `length` karakter | `start` negatif diperbolehkan |\n\n```smart header=\"Cara mana yang harus kita gunakan?\"\nSemuanya dapat melakukan pekerjaannya. Secara formal, `substr` memiliki kekurangan: fungsi ini tidak tercantum di spesifikasi inti Javascript, tetapi di Annex B, yang mencakup hanya fitur browser yang ada karena alasan historis. Jadi, environment non-browser mungkin gagal untuk mendukungnya. Tetapi dalam praktik fungsi ini bekerja di mana saja.\n\nDibandingkan dengan dua varian yang lain, `slice` lebih fleksibel, karena memperbolehkan parameter negatif dan lebih pendek untuk ditulis. Jadi, dari ketiga cara sudah cukup untuk mengingat `slice`.\n```\n\n## Membandingkan string\n\nSeperti yang kita tahu dari bab , string dibandingkan karakter per karakter dengan urutan alfabet.\n\nAkan tetapi, ada beberapa pengecualian.\n\n1. Huruf kecil selalu lebih besar dibanding huruf kapital:\n\n ```js run\n alert( 'a' > 'Z' ); // true\n ```\n\n2. Karakter dengan tanda diakritik \"tidak sesuai urutan\":\n\n ```js run\n alert( 'Österreich' > 'Zealand' ); // true\n ```\n\n Hal ini dapat menyebabkan hasil yang aneh apabila kita mengurutkan nama-nama negara. Biasanya orang mengharapkan `Zealand` muncul setelah `Österreich` di daftar.\n\nUntuk memahami apa yang terjadi, mari kita review representasi internal string di Javascript.\n\nSemua string menggunakan encoding [UTF-16](https://en.wikipedia.org/wiki/UTF-16). Yaitu: setiap karakter memiliki masing-masing kode numerik. Ada method spesial yang memperbolehkan kita untuk mengambil karakter dari kode dan sebaliknya.\n\n`str.codePointAt(pos)`\n: Mengembalikan kode untuk karakter pada posisi `pos`:\n\n ```js run\n // karakter dengan case yang berbeda memiliki kode berbeda\n alert( \"z\".codePointAt(0) ); // 122\n alert( \"Z\".codePointAt(0) ); // 90\n ```\n\n`String.fromCodePoint(code)`\n: Membuat sebuah karakter berdasarkan `code` numeriknya\n\n ```js run\n alert( String.fromCodePoint(90) ); // Z\n ```\n\n Kita juga dapat membuat karakter unicode dengan kode mereka menggunakan `\\u` yang diikuti oleh kode heksadesimal:\n\n ```js run\n // 90 bernilai 5a di dalam sistem heksadesimal\n alert( '\\u005a' ); // Z\n ```\n\nSekarang mari kita lihat karakter dengan kode di antara `65..220` (alfabet latin dan sedikit tambahan) dengan membuat string yang terdiri dari mereka:\n\n```js run\nlet str = '';\n\nfor (let i = 65; i <= 220; i++) {\n str += String.fromCodePoint(i);\n}\nalert( str );\n// ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~€‚ƒ„\n// ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜ\n```\n\nKan? Huruf kapital muncul pertama, lalu beberapa karakter spesial, lalu huruf kecil, dan `Ö` berada di dekat akhir string.\n\nSekarang terlihat jelas kenapa `a > Z`.\n\nKarakter-karakter dibandingkan berdasarkan kode numeriknya. Kode yang lebih besar berarti karakter tersebut lebih besar. Kode untuk `a` (97) lebih besar dibandingkan dengan kode untuk `Z` (90).\n\n- Semua huruf kecil muncul setelah huruf kapital karena kode mereka lebih besar.\n- Beberapa karakter seperti `Ö` terpisah dari alfabet utama. Disini, kodenya lebih besar dibandingkan semua karakter dari `a` to `z`.\n\n### Perbandingan yang benar\n\nAlgoritma yang \"benar\" untuk melakukan perbandingan string lebih kompleks dari kelihatannya, setiap bahasa memiliki alfabet mereka masing-masing.\n\nJadi, browser harus tahu bahasa yang digunakan untuk perbandingan.\n\nBeruntungnya, semua browser modern (IE10- memerlukan library tambahan [Intl.JS](https://github.com/andyearnshaw/Intl.js/)) mendukung standar internasionalisasi [ECMA 402](http://www.ecma-international.org/ecma-402/1.0/ECMA-402.pdf).\n\nHal tersebut menyediakan cara spesial untuk membandingkan stringi di berbeda bahasa, mengikuti peraturan mereka.\n\nMethod [str.localeCompare(str2)](mdn:js/String/localeCompare) mengembalikan sebuah interger yang menandakan apakah `str` lebih kecil, sama dengan atau lebih besar dari `str2` menurut peraturan-peraturan bahasa:\n\n- Mengembalikan nilai negatif jika `str` lebih kecil dibandingkan `str2`\n- Mengembalikan nilai positif jika `str` lebih besar dibandingkan `str2`\n- Mengembalikan `0` apabila mereka sama.\n\nSeperti contoh:\n\n```js run\nalert( 'Österreich'.localeCompare('Zealand') ); // -1\n```\n\nMethod ini sebenarnya menerima 2 argumen tambahan yang disebutkan di [dokumentasi](mdn:js/String/localeCompare), yang memperbolehkan untuk menyebutkan bahasa (yang biasanya diambil dari environment, urutan huruf bergantung dari bahasa) dan menyebutkan peraturan-peraturan tambahan seperti case sensitivity atau apakah `\"a\"` and `\"á\"` dianggap sama dan seterusnya.\n\n## Bagian internal dari unicode\n\n```warn header=\"Pengetahuan lanjutan\"\nBagian ini membahas lebih dalam tentang bagian internal string. Pengetahuan ini akan berguna apabila Anda akan berurusan dengan emoji, simbol matematika, hieroglif, atau simbol-simbol lain yang langka.\n\nAnda dapat melewati bagian ini jika tidak berurusan dengan mereka.\n```\n\n### Surrogate pairs\n\nSemua karakter yang sering digunakan memiliki kode 2-byte. Huruf di kebanyakan negara eropa, angka, dan bahkan kebanyakan hieroglif, memiliki representasi 2-byte.\n\nTetapi 2 byte hanya memperbolehkan 65536 kombinasi dan itu tidak cukup untuk semua kombinasi simbol. Jadi simbol-simbol yang langka menggunakan encoding dengan sepasang karakter 2-byte yang disebut \"surrogate pair\".\n\nPanjang dari simbol tersebut adalah `2`:\n\n```js run\nalert( '𝒳'.length ); // 2, SIMBOL MATEMATIKA X BESAR\nalert( '😂'.length ); // 2, MUKA DENGAN TANGISAN BAHAGIA\nalert( '𩷶'.length ); // 2, karakter mandarin\n```\n\nPerlu diingat bahwa surrogate pair tidak ada pada saat Javascript dibuat, oleh karena itu fitur ini tidak diproses secara benar oleh bahasa ini!\n\nKita sebenarnya memiliki sebuah simbol di setiap string di atas, tetapi `length` menunjukkan panjang `2`.\n\n`String.fromCodePoint` dan `str.codePointAt` adalah beberapa method yang menangani surrogate pair dengan benar. Belum lama ini mereka muncul di bahasa ini. Sebelum mereka, hanya ada [String.fromCharCode](mdn:js/String/fromCharCode) dan [str.charCodeAt](mdn:js/String/charCodeAt). Method-method tersebut sebenarnya sama saja dengan `fromCodePoint/codePointAt`, tetapi tidak bisa digunakan untuk surrogate pair.\n\nMengambil sebuah simbol terkadang agak susah, karena surrogate pair diperlakukan sebagai dua karakter:\n\n```js run\nalert( '𝒳'[0] ); // simbol aneh...\nalert( '𝒳'[1] ); // ...bagian dari surrogate pair\n```\n\nPerlu diingat bahwa bagian dari surrogate pair tidak memiliki arti tanpa pasangan yang lain. Jadi contoh di atas menampilkan karakter aneh.\n\nSecara teknis, surrogate pair juga dapat dideteksi berdasarkan kode mereka, jika sebuah karakter memiliki kode di antara `0xd800..0xdbff`, maka karakter ini adalah bagian pertama dari surrogate pair. Karakter selanjutnya (bagian kedua) harus berada di antara `0xdc00..0xdfff`. Interval ini sudah dipesan secara khusus untuk surrogate pair oleh standar.\n\nPada kasus diatas:\n\n```js run\n// charCodeAt is not surrogate-pair aware, so it gives codes for parts\n\nalert( '𝒳'.charCodeAt(0).toString(16) ); // d835, diantara 0xd800 dan 0xdbff\nalert( '𝒳'.charCodeAt(1).toString(16) ); // dcb3, diantara 0xdc00 dan 0xdfff\n```\n\nAnda akan menemukan cara lain untuk bertanganan dengan surrogate pair nanti di bab . Mungkin juga ada library-library yang untuk hal tersebut, tetapi tidak ada yang cukup terkenal untuk disarankan di sini.\n\n### Tanda diakritik dan normalisasi\n\nDi banyak bahasa terdapat simbol-simbol yang terdiri dari huruf dasar dengan tanda di atas/bawahnya.\n\nSebagai contoh, karakter `a` dapat menjadi huruf dasar untuk: `àáâäãåā`. Kebanyakan karakter \"komposit\" memiliki kode mereka sendiri di tabel UTF-16. Hal tersebut tidak selalu terjadi, karena terlalu banyak kemungkinan kombinasi.\n\nUntuk mendukung komposisi yang fleksibel, UTF-16 memperbolehkan kita untuk menggunakan beberapa karakter unicode: sebuah huruf dasar yang diikuti oleh satu atau lebih karakter \"tanda\" yang \"menghiasinya\".\n\nSebagai contoh, jika kita memiliki `S` diikuti dengan karakter spesial \"titik di atas\" (kode `\\u0307`), maka akan ditampilkan Ṡ.\n\n```js run\nalert( 'S\\u0307' ); // Ṡ\n```\n\nJika kita memerlukan tanda tambahan di atas huruf (atau di bawahnya) -- tidak masalah, tambahkan saja karakter tanda yang diperlukan.\n\nSebagai contoh, jika kita tambahkan sebuah karakter \"titik di bawah\" (kode `\\u0323`), maka kita akan mendapatkan \"S dengan titik di atas dan di bawah\": `Ṩ`.\n\nSebagai contoh:\n\n```js run\nalert( 'S\\u0307\\u0323' ); // Ṩ\n```\n\nHal tersebut memberikan banyak fleksibilitas, tetapi juga masalah yang menarik: dua karakter mungkin terlihat sama, tetapi dapat direpresentasikan dengan komposisi unicode yang berbeda.\n\nSebagai contoh:\n\n```js run\nlet s1 = 'S\\u0307\\u0323'; // Ṩ, S + titik di atas + titik di bawah\nlet s2 = 'S\\u0323\\u0307'; // Ṩ, S + titik di atas + titik di bawah\n\nalert( `s1: ${s1}, s2: ${s2}` );\n\nalert( s1 == s2 ); // false walaupun karakter terlihat sama (?!)\n```\n\nUntuk menyelesaikan masalah ini, terdapat sebuah algoritma \"normalisasi unicode\" yang membuat setiap string menjadi satu bentuk \"normal\".\n\nAlgoritma tersebut diimplementasikan oleh [str.normalize()](mdn:js/String/normalize).\n\n```js run\nalert( \"S\\u0307\\u0323\".normalize() == \"S\\u0323\\u0307\".normalize() ); // true\n```\n\nAgak lucu bahwa di situasi kita `normalize()` menjadikan sekumpulan karakter dengan panjang 3 menjadi satu: `\\u1e68` (S dengan dua titik).\n\n```js run\nalert( \"S\\u0307\\u0323\".normalize().length ); // 1\n\nalert( \"S\\u0307\\u0323\".normalize() == \"\\u1e68\" ); // true\n```\n\nPada kenyataan, hal ini tidak selalu berlaku. Contoh diatas berlaku karena simbol `Ṩ` is \"cukup sering digunakan\", jadi pembuat UTF-16 memasukkannya di tabel utama dan memberinya sebuah kode.\n\nJika Anda ingin belajar lebih lanjut tentang aturan normalisasi dan variasinya -- mereka dideskripsikan di appendix Unicode standard: [Unicode Normalization Forms](http://www.unicode.org/reports/tr15/), tetapi untuk kebanyakan kasus informasi yang terdapat di bagian ini sudah cukup.\n\n## Kesimpulan\n\n- Terdapat 3 jenis tanda petik. Backtick membolehkan string memiliki baris ganda dan menyisipkan expresi `${…}`.\n- String di Javascript diencode menggunakan UTF-16.\n- Kita bisa memakai karakter seperti `\\n` dan memasukkan karakter berdasarkan unicode mereka menggunakan `\\u...`.\n- Untuk mendapatkan karakter, gunakan: `[]`.\n- Untuk mendapatkan substring, gunakan: `slice` atau `substring`.\n- Untuk mengubah case kecil/besar dari string, gunakan: `toLowerCase/toUpperCase`.\n- Untuk mencari substring, gunakan: `indexOf`, atau `includes/startsWith/endsWith` untuk pengecekan sederhana.\n- Untuk membandingkan string mengikuti bahasa, gunakan `localeCompare`, jika tidak mereka akan dibandingkan berdasarkan kode karakter.\n\nAda beberapa metode string lain yang berguna:\n\n- `str.trim()` -- menghilangkan (\"memotong\") spasi dari awal dan akhir dari sebuah string.\n- `str.repeat(n)` -- mengulang string sebanyak `n` kali.\n- ...dan masih banyak lagi yang dapat ditemukan di dalam [manual](mdn:js/String).\n\nString juga memiliki method-method untuk mencari/mengganti dengan ekspresi reguler (regular expression). Tetapi itu adalah topik yang luas, jadi topik ini dibahas di bagiannya sendiri .\n" }, { "path": "1-js/05-data-types/04-array/1-item-value/solution.md", "content": "The result is `4`:\n\n\n```js run\nlet fruits = [\"Apples\", \"Pear\", \"Orange\"];\n\nlet shoppingCart = fruits;\n\nshoppingCart.push(\"Banana\");\n\n*!*\nalert( fruits.length ); // 4\n*/!*\n```\n\nItu karena *array* adalah objek. Jadi baik `shoppingCart` dan `fruits` mereferensi ke *array* yang sama.\n\n" }, { "path": "1-js/05-data-types/04-array/1-item-value/task.md", "content": "importance: 3\n\n---\n\n# Apakah *array* disalin?\n\nApa yang kode ini akan tunjukkan?\n\n```js\nlet fruits = [\"Apples\", \"Pear\", \"Orange\"];\n\n// push sebuah nilai baru ke \"copy\"\nlet shoppingCart = fruits;\nshoppingCart.push(\"Banana\");\n\n// apa yang ada di dalam fruits?\nalert( fruits.length ); // ?\n```\n\n" }, { "path": "1-js/05-data-types/04-array/10-maximal-subarray/_js.view/solution.js", "content": "function getMaxSubSum(arr) {\n let maxSum = 0;\n let partialSum = 0;\n\n for (let item of arr) {\n partialSum += item;\n maxSum = Math.max(maxSum, partialSum);\n if (partialSum < 0) partialSum = 0;\n }\n return maxSum;\n}" }, { "path": "1-js/05-data-types/04-array/10-maximal-subarray/_js.view/test.js", "content": "describe(\"getMaxSubSum\", function() {\n it(\"maximal subsum of [1, 2, 3] equals 6\", function() {\n assert.equal(getMaxSubSum([1, 2, 3]), 6);\n });\n\n it(\"maximal subsum of [-1, 2, 3, -9] equals 5\", function() {\n assert.equal(getMaxSubSum([-1, 2, 3, -9]), 5);\n });\n\n it(\"maximal subsum of [-1, 2, 3, -9, 11] equals 11\", function() {\n assert.equal(getMaxSubSum([-1, 2, 3, -9, 11]), 11);\n });\n\n it(\"maximal subsum of [-2, -1, 1, 2] equals 3\", function() {\n assert.equal(getMaxSubSum([-2, -1, 1, 2]), 3);\n });\n\n it(\"maximal subsum of [100, -9, 2, -3, 5] equals 100\", function() {\n assert.equal(getMaxSubSum([100, -9, 2, -3, 5]), 100);\n });\n\n it(\"maximal subsum of [] equals 0\", function() {\n assert.equal(getMaxSubSum([]), 0);\n });\n\n it(\"maximal subsum of [-1] equals 0\", function() {\n assert.equal(getMaxSubSum([-1]), 0);\n });\n\n it(\"maximal subsum of [-1, -2] equals 0\", function() {\n assert.equal(getMaxSubSum([-1, -2]), 0);\n });\n\n it(\"maximal subsum of [2, -8, 5, -1, 2, -3, 2] equals 6\", function() {\n assert.equal(getMaxSubSum([2, -8, 5, -1, 2, -3, 2]), 6);\n });\n});\n" }, { "path": "1-js/05-data-types/04-array/10-maximal-subarray/solution.md", "content": "# Solusi lamban\n\nKita dapat menghitung semua semua sub-penjumlahan yang memungkinkan.\n\nCara paling sederhana adalah dengan cara mengambil setiap elemen dan menghitung jumlah semua *subarray* dimulai dari situ.\n\nContohnya, untuk `[-1, 2, 3, -9, 11]`:\n\n```js no-beautify\n// Dimulai dari -1:\n-1\n-1 + 2\n-1 + 2 + 3\n-1 + 2 + 3 + (-9)\n-1 + 2 + 3 + (-9) + 11\n\n// Dimulai dari 2:\n2\n2 + 3\n2 + 3 + (-9)\n2 + 3 + (-9) + 11\n\n// Dimulai dari 3:\n3\n3 + (-9)\n3 + (-9) + 11\n\n// Dimulai dari -9\n-9\n-9 + 11\n\n// Dimulai dari 11\n11\n```\n\nKode tersebut sebenarnya adalah sebuah pengulangan *nested* (atau *nested* loop): pengulangan eksternal elemen-elemen *array*, dan yang internal menghitung sub-jumlah dengan elemen yang sekarang.\n\n```js run\nfunction getMaxSubSum(arr) {\n let maxSum = 0; // jika kita tidak mengambil elemen apapaun, angka nol akan dikembalikan\n\n for (let i = 0; i < arr.length; i++) {\n let sumFixedStart = 0;\n for (let j = i; j < arr.length; j++) {\n sumFixedStart += arr[j];\n maxSum = Math.max(maxSum, sumFixedStart);\n }\n }\n\n return maxSum;\n}\n\nalert( getMaxSubSum([-1, 2, 3, -9]) ); // 5\nalert( getMaxSubSum([-1, 2, 3, -9, 11]) ); // 11\nalert( getMaxSubSum([-2, -1, 1, 2]) ); // 3\nalert( getMaxSubSum([1, 2, 3]) ); // 6\nalert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100\n```\n\nSolusi tersebut memiliki waktu penyelesaian [O(n2)](https://en.wikipedia.org/wiki/Big_O_notation). Dalam kata lain, jika kita menambah ukuran *array* 2 kali lipat, algoritma akan bekerja 4 kali lipat lebih lama.\n\nUntuk *array* yang besar (1000, 10000 *item* atau lebih) algoritma yang demikian akan mengarah pada kelambanan yang parah.\n\n# Solusi cepat\n\nMari jalankan *array* tersebut dan simpan hasil penjumlahkan parsial elemen yang sekarang di dalam variabel `s`. Jika `s` menjadi negatif pada beberapa titik, maka tugaskan `s=0`. Nilai maksimum dari semua `s` tersebut akan menjadi jawabannya.\n\nJika deskripsi tersebut terlalu samar, mohon perhatikan kodenya, yang ternyata cukup pendek:\n\n```js run demo\nfunction getMaxSubSum(arr) {\n let maxSum = 0;\n let partialSum = 0;\n\n for (let item of arr) { // untuk setiap item arr\n partialSum += item; // menambahkannya ke partialSum\n maxSum = Math.max(maxSum, partialSum); // ingat nilai maxksimum\n if (partialSum < 0) partialSum = 0; // nol jika negatif\n }\n\n return maxSum;\n}\n\nalert( getMaxSubSum([-1, 2, 3, -9]) ); // 5\nalert( getMaxSubSum([-1, 2, 3, -9, 11]) ); // 11\nalert( getMaxSubSum([-2, -1, 1, 2]) ); // 3\nalert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100\nalert( getMaxSubSum([1, 2, 3]) ); // 6\nalert( getMaxSubSum([-1, -2, -3]) ); // 0\n```\n\nAlgoritma tersebut membutuhkan tepat 1 *array* yang lolos, jadi waktu penyelesaian adalah O(n).\n\nKamu dapat menemukan informasi yang lebih rinci tentang algoritma di sini: [Masalah *subarray* maksimum](http://en.wikipedia.org/wiki/Maximum_subarray_problem). Jika masih kurang jelas bagaimana hal tersebut bekerja, maka mohon menelusuri algoritma pada contoh di atas, perhatikan bagaimana algoritmanya bekerja, itulah cara yang paling baik.\n" }, { "path": "1-js/05-data-types/04-array/10-maximal-subarray/task.md", "content": "importance: 2\n\n---\n\n# *Subarray* maksimum\n\nInput adalah sebuah *array* angka, e.g. `arr = [1, -2, 3, 4, -9, 6]`.\n\nTugasnya adalah: menemukan *subarray* `arr` yang berdampingan dengan nilai maksimal penjumlahan *item* yang ada.\n\nTulis fungsi `getMaxSubSum(arr)` yang akan mengembalikan nilai penjumlahan tersebut.\n\nSebagai contoh: \n\n```js\ngetMaxSubSum([-1, *!*2, 3*/!*, -9]) == 5 (the sum of highlighted items)\ngetMaxSubSum([*!*2, -1, 2, 3*/!*, -9]) == 6\ngetMaxSubSum([-1, 2, 3, -9, *!*11*/!*]) == 11\ngetMaxSubSum([-2, -1, *!*1, 2*/!*]) == 3\ngetMaxSubSum([*!*100*/!*, -9, 2, -3, 5]) == 100\ngetMaxSubSum([*!*1, 2, 3*/!*]) == 6 (take all)\n```\n\nJika semua *item* adalah negatif, hal tersebut berarti kita tidak mengambil apapun (*subarray* kosong), jadi jumlahnya sama dengan nol:\n\n```js\ngetMaxSubSum([-1, -2, -3]) = 0\n```\n\nMohon coba untuk memikirkan sebuah solusi cepat: [O(n2)](https://en.wikipedia.org/wiki/Big_O_notation) atau bahkan O(n) jika bisa.\n" }, { "path": "1-js/05-data-types/04-array/2-create-array/solution.md", "content": "\n\n```js run\nlet styles = [\"Jazz\", \"Blues\"];\nstyles.push(\"Rock-n-Roll\");\nstyles[Math.floor((styles.length - 1) / 2)] = \"Classics\";\nalert( styles.shift() );\nstyles.unshift(\"Rap\", \"Reggae\");\n```\n\n" }, { "path": "1-js/05-data-types/04-array/2-create-array/task.md", "content": "importance: 5\n\n---\n\n# Operasi *array*.\n\nMari coba 5 operasi *array*.\n\n1. Buat sebuah *array* `styles` dengan elemen \"Jazz\" dan \"Blues\" di dalamnya.\n2. Tambahkan \"Rock-n-Roll\" pada akhir *array*.\n3. Ganti nilai yang berada di tengah menjadi \"Classics\". Kodemu untuk menemukan nilai di tengah harus berhasil untuk *array* sepanjang apapun.\n4. Hilangkan nilai pertama dari *array* lalu tampilkan *array*.\n5. Dahulan *array* dengan `Rap` and `Reggae` di depannya.\n\n*Array* selama proses:\n\n```js no-beautify\nJazz, Blues\nJazz, Blues, Rock-n-Roll\nJazz, Classics, Rock-n-Roll\nClassics, Rock-n-Roll\nRap, Reggae, Classics, Rock-n-Roll\n```\n\n" }, { "path": "1-js/05-data-types/04-array/3-call-array-this/solution.md", "content": "Panggilan `arr[2]()` secara sintaks adalah `obj[method]()` yang sudah ada dari lama, dalam peran sebagai `obj` kita memiliki `arr`, dan dalam peran sebagai `method` kita memiliki `2`.\n\nJadi kita memiliki sebuah panggilan fungsi `arr[2]` sebagai sebuah metode objek. Secara alami, fungsi terebut menerima `this` yang mereferensikan ke `arr` and menghasilakn *array* berikut:\n\n```js run\nlet arr = [\"a\", \"b\"];\n\narr.push(function() {\n alert( this );\n})\n\narr[2](); // a,b,function(){...}\n```\n\n*Array* tersebut memiliki 3 nilai: sejak awal *array* tersebut memiliki dua nilai, plus fungsi. \n" }, { "path": "1-js/05-data-types/04-array/3-call-array-this/task.md", "content": "importance: 5\n\n---\n\n# Panggilan dalam konteks *array*\n\nApa hasilnya? Mengapa demikian?\n\n```js\nlet arr = [\"a\", \"b\"];\n\narr.push(function() {\n alert( this );\n})\n\narr[2](); // ?\n```\n\n" }, { "path": "1-js/05-data-types/04-array/5-array-input-sum/solution.md", "content": "Tolong perhatikan rincian penting dari solusi yang diberikan berikut. Kita tidak mengonversi `value` menjadi angka secara langsung setelah `prompt`, karena setelah `value = +value` kita tidak bisa memberitahukan sebuah string kosong (tanda berhenti) dari angka nol (angka yang valid). Kita melakukannya setelah langkah tersebut.\n\n\n```js run demo\nfunction sumInput() {\n \n let numbers = [];\n\n while (true) {\n\n let value = prompt(\"A number please?\", 0);\n\n // perlukah kita batalkan?\n if (value === \"\" || value === null || !isFinite(value)) break;\n\n numbers.push(+value);\n }\n\n let sum = 0;\n for (let number of numbers) {\n sum += number;\n }\n return sum;\n}\n\nalert( sumInput() ); \n```\n\n" }, { "path": "1-js/05-data-types/04-array/5-array-input-sum/task.md", "content": "importance: 4\n\n---\n\n# Menjumlahkan angka yang di-input\n\nTuliskan fungsi `sumInput()` yang:\n\n- Meminta nilai dari dengan menggunakan `prompt` dan menyimpan nilai tersebut dalam *array*.\n- Berhenti meminta nilai dari pengguna ketika pengguna memasukkan nilai non-numerik, sebuah *string* kosong, atau menekan \"Cancel\".\n- Hitung dan mengembalikan hasil penjumlahan *item* dalam *array*.\n\nCatatan. Sebuah nol `0` adalah angka yang valid, mohon tidak menghentikan input pada angka nol.\n\n[demo]\n" }, { "path": "1-js/05-data-types/04-array/article.md", "content": "# *Array*\n\nObjek mengizinkanmu untuk menyimpan koleksi-koleksi tertulis dari nilai. Itu bagus.\n\nNamun seringkali kita menemukan bahwa kita butuh sebuah *koleksi yang tertata*, dimana kita memiliki elemen ke-1, ke-2, ke-3 dan seterusnya. Sebagai contohnya, kita butuh menyimpan sebuah daftat sesuatu: pengguna, barang, elemen HTML, dan lain-lain.\n\nTidaklah nyaman untuk menggunakan sebuah objek di kasus ini, karena objek tidak menyediakan metode untuk mengelola elemen. Kita tidak bisa memasukkan sebuah properti baru \"di antara\" properti yang sudah dulu ada. Objek memang tidak tujukan untuk penggunaan yang demikian.\n\nADa sebuah struktur data spesial yang dinamakan `Array`, untuk menyimpan koleksi-koleksi yang tertata.\n\n## Deklarasi\n\nTerdapat dua sintaks untuk membuat sebuah *array* kosong:\n\n```js\nlet arr = new Array();\nlet arr = [];\n```\n\nHampir tiap waktu, sintaks kedua lah yang digunakan. Kita bisa menyediakan elemen-elemen awal dalam tanda:\n\n```js\nlet fruits = [\"Apple\", \"Orange\", \"Plum\"];\n```\n\nElemen-elemen *array* itu diberi (urutan) nomor, mulai dari nol.\n\nKita bisa mendapatkan sebuah elemen menggunakan nomor elemen itu dalam tanda kurung siku:\n\n```js run\nlet fruits = [\"Apple\", \"Orange\", \"Plum\"];\n\nalert( fruits[0] ); // Apple\nalert( fruits[1] ); // Orange\nalert( fruits[2] ); // Plum\n```\n\nKita bisa mengganti sebuah elemen:\n\n```js\nfruits[2] = 'Pear'; // kini [\"Apple\", \"Orange\", \"Pear\"]\n```\n\n...Atau menambakan elemen baru ke *array*:\n\n```js\nfruits[3] = 'Lemon'; // kini [\"Apple\", \"Orange\", \"Pear\", \"Lemon\"]\n```\n\nJumlah elemen di dalam sebuah *array* adalah `length` (panjang) dari *array* tersebut:\n\n```js run\nlet fruits = [\"Apple\", \"Orange\", \"Plum\"];\n\nalert( fruits.length ); // 3\n```\n\nKita juga bisa menggunakan `alert` untuk menampilkan keseluruhan *array*.\n\n```js run\nlet fruits = [\"Apple\", \"Orange\", \"Plum\"];\n\nalert( fruits ); // Apple,Orange,Plum\n```\n\nSebuah *array* dapat menyimpan elemen dari tipe (data) apapun.\n\nContohnya:\n\n```js run no-beautify\n// nilai-nilai campuran\nlet arr = [ 'Apple', { name: 'John' }, true, function() { alert('hello'); } ];\n\n// mendapatkan objek pada indeks 1 dan menampilkan namanya\nalert( arr[1].name ); // John\n\n// mendapatkan fungsi pada indeks 3 dan menjalankannya\narr[3](); // hello\n```\n\n\n````smart header=\"Tanda koma yang membuntuti\"\nSebuah array, seperti halnya sebuh objek, diakhir dengan tanda koma:\n```js\nlet fruits = [\n \"Apple\",\n \"Orange\",\n \"Plum\"*!*,*/!*\n];\n```\n\nGaya \"tanda koma yang membuntuti\" membuat lebih mudah untuk memasukkan/menghilangkan item dari sebuah array, karena semua baris serupa.\n````\n\n\n## Metode *pop*/*push*, *shift*/*unshift*\n\nSebuah [antrian (*queue*)](https://en.wikipedia.org/wiki/Queue_(abstract_data_type)) adalah bentuk penggunaan paling umum sebuah *array*. Dalam *computer science*, hal ini berarti sebuah koleksi elemen yang tertata yang mendukung dua operasi:\n\n- `push` menambahkan sebuah elemen di akhir antrian.\n- `shift` mengambil sebuah elemen di awal antrian, memajukan antrian elemen, jadi elemen urutan ke-2 menjadi urutan pertama1.\n\n![](queue.svg)\n\n*Array* sudah mendukung kedua operasi tersebut.\n\nDalam latihan yang kita sering kali memerlukannya. Contohnya, sebuah antrian pesan yang perlu ditampilkan di layar.\n\nAda kasus kegunaan lain untuk *array* -- struktur data yang dinamakan [tumpukan *(stack)*](https://en.wikipedia.org/wiki/Stack_(abstract_data_type)).\n\n*Stack* mendukung dua operasi, yakni:\n\n- `push` menambahkan sebuah elemen di akhir tumpukan.\n- `pop` mengambil sebuah elemen di akhir tumpukan.\n\nJadi elemen-elemen baru ditambahkan atau diambil selalu dari \"akhir\" tumpukan.\n\nSebuah *stack* biasanya diilustrasikan sebagai sebuah *pack* kartu: kartu-kartu baru ditambahkan di atas tumpukan atau diambil dari atas tumpukan *pack* kartu tersebut:\n\n![](stack.svg)\n\nUntuk *stack*, elemen terakhir yang di-*push* diterima lebih dulu, hal itu juga disebut sebagai prinsip LIFO (*Last-In-First-Out*) atau \"terakhir masuk, pertama keluar\". Sedangkan untuk *queue*, kita memiliki prinsip (*First-In-First-Out*) atau \"pertama masuk, pertama keluar\".\n\n*Array* dalam JavaScript dapat bekerja baik sebagai sebuah *queue* maupun *stack*. Keduanya membuat kamu bisa menambahkan/menghilangkan elemen baik dari/ke awal ataupun akhir.\n\nDalam *computer science* struktur data yang memungkinkan kita bisa melakukan hal-hal demikian disebut sebagai [*deque* (*double-ended queue*)](https://en.wikipedia.org/wiki/Double-ended_queue).\n\n**Metode yang berfungsi dengan bagian akhir dari _array_:**\n\n`pop`\n: Mengekstrak elemen terakhir dari *array* dan mengembalikan hasilnya:\n\n ```js run\n let fruits = [\"Apple\", \"Orange\", \"Pear\"];\n\n alert( fruits.pop() ); // menghilangkan \"Pear\" dan memberi alert\n\n alert( fruits ); // Apple, Orange\n ```\n\n`push`\n: Mendorong elemen ke bagian akhir *array*:\n\n ```js run\n let fruits = [\"Apple\", \"Orange\"];\n\n fruits.push(\"Pear\");\n\n alert( fruits ); // Apple, Orange, Pear\n ```\n\n Panggilan `fruits.push(...)` sama dengan `fruits[fruits.length] = ...`.\n\n**Metode yang berfungsi dengan bagian awal dari _array_:**\n\n`shift`\n: Mengekstrak elemen pertama dari *array* dan mengembalikannya:\n\n ```js run\n let fruits = [\"Apple\", \"Orange\", \"Pear\"];\n\n alert( fruits.shift() ); // menghilangkan Apple dan memberi alert\n\n alert( fruits ); // Orange, Pear\n ```\n\n`unshift`\n: Menambahkan elemen ke bagian awal *array*:\n\n ```js run\n let fruits = [\"Orange\", \"Pear\"];\n\n fruits.unshift('Apple');\n\n alert( fruits ); // Apple, Orange, Pear\n ```\n\nMetode `push` dan `unshift` dapat menambahkan beberapa elemen sekaligus:\n\n```js run\nlet fruits = [\"Apple\"];\n\nfruits.push(\"Orange\", \"Peach\");\nfruits.unshift(\"Pineapple\", \"Lemon\");\n\n// [\"Pineapple\", \"Lemon\", \"Apple\", \"Orange\", \"Peach\"]\nalert( fruits );\n```\n\n## Internal *array*\n\nSebuah *array* adalah objek yang spesial. Tanda kurung siku digunakan untuk mengakses sebuah properti `arr[0]` sebenarnya berasal dari sintaks objek. Hal itu secara mendasar sama seperti `obj[key]`, dimana `arr` adalah objek, sedangkan angka-angka digunakan selayaknya kunci.\n\nSintaks tersebut memperpanjang objek yang menyediakan metode khusus untuk berfungsi dengan koleksi-koleksi data yang tertata serta properti `length`. Tetapi pada intinya, *array* tetaplah sebuah objek.\n\n\nIngat, ada 7 tipe (data) dasar dalamJavaScript. *Array* adalah sebuah objek dan oleh karena itu berperilaku selayaknya sebuah objek.\n\nSebagai contoh, *array* disalin oleh referensi:\n\n```js run\nlet fruits = [\"Banana\"]\n\nlet arr = fruits; // salinan dari referensi (dua variabel mereferensikan array yang sama)\n\nalert( arr === fruits ); // true\n\narr.push(\"Pear\"); // modiikasi array oleh referensi\n\nalert( fruits ); // Banana, Pear - 2 elemen sekarang\n```\n\n...Namun apa yang membuat *array* benar-benar istimewa adalah representasi internalnya. Mesin berusaha untuk menyimpan elemen *array* ke dalam area memori yang berdampingan, satu dengan yang lainnya, sepereti yang digambarkan pada ilustrasi di bab ini, serta ada cara optimasi lainnya, untuk membuat *array* bekerja lebih cepat lagi.\n\nBut they all break if we quit working with an array as with an \"ordered collection\" and start working with it as if it were a regular object.\n\nContohnya, secara teknis kita dapat melakukan hal berikut ini:\n\n```js\nlet fruits = []; // membuat sebuah array\n\nfruits[99999] = 5; // menugaskan sebuah properti dengan indeks yang jauh lebih panjang dari length/panjang indeks\n\nfruits.age = 25; // membuat sebuah properti dengan nama yang dapat berubah-ubah\n```\n\nHal itu memungkinkan, karena *array* adalah objek pada dasarnya. Kita bisa menambahkan properti apapun ke *array*.\n\nTetapi mesin akan melihat bahwa kita sedang *array* sebagai sebuah objek reguler. Optimasi yang khusus untuk *array* tidaklah cocok untuk kasus demikian dan akan dihentikan serta hilang pula keuntungannya.\n\nCara-cara penggunaan *array* yang salah yakni:\n\n- Menambahkan sebuah properti non-numerik seperti `arr.test = 5`.\n- Membuat celah-celah kosong, seperti: menambahkan `arr[0]` dan kemudian `arr[1000]` (dan tanpa ada apapun di antara kedua indeks tersebut).\n- Mengisi sebuah *array* dalam urutan yang terbalik, seperti `arr[1000]`, `arr[999]` dan seterusnya.\n\nTolong pikirkan *array* sebagai sebuah struktur istimewa untuk bekerja dengan *data yang tersusun*. *Array* menyediakan metode khusus untuk hal tersebut. *Array* dikembangkan secara hati-hati dalam mesin JavaScript untuk bekerja dengan data yang tersusun berdampingan, mohon gunakan *array* dengan cara demikian. Dan jika kamu membutuhkan kunci-kunci yang dapat diubah-ubah, besar kemungkinan bahwa kamu sebenarnya butuh sebuah objek reguler `{}`.\n\n## Performa\n\nMetode `push/pop` berjalan cepat, sedangkan `shift/unshift` lamban.\n\n![](array-speed.svg)\n\nMengapa bekerja dengan bagian akhir sebuah *array* ketimbang bagian depannya? Mari lihat apa yang terjadi sewaktu eksekusi:\n\n```js\nfruits.shift(); // mengambil 1 elemen dari bagian awal\n```\n\nTidaklah cukup mengambil dan menghapus elemen dengan angka `0`. Elemen lainnya juga perlu diberi angka pula.\n\nOperasi `shift` harus menjalankan 3 hal:\n\n1. Menghapus elemen dengan indeks `0`.\n2. Memindahkan semua elemen ke kiri, memberi nomor ulang semua elemen dari indeks `1` ke `0`, dari `2` ke `1` dan seterusnya.\n3. Memperbarui properti `length`.\n\n![](array-shift.svg)\n\n**Semakin banyak elemen dalam _array_, semakin banyak waktu yang dibutuhkan untuk memindahkan elemen-elemen tersebut, semakin banyak operasi dalam memori.**\n\nHal serupa terjadi dengan `unshift`: untuk menambahkan sebuah elemen ke bagian awal *array*, kita perlu pertama-tama memindahkan elemen yang ada ke kanan, menambah indeksnya.\n\nDan ada apa dengan `push/pop`? Metode tersebut tidak perlu untuk memindahkan apapun. Untuk mengekstrak sebuah elemen dari bagian akhir, metode `pop` membersihkan indeks dan memendekkan `length`.\n\nSintaks untuk operasi `pop` yakni:\n\n```js\nfruits.pop(); // mengambil 1 elemen dari bagian akhir\n```\n\n![](array-pop.svg)\n\n**Metode `pop` tidak perlu memindahkan apapun, karena elemen lain tetap pada indeks masing-masing. Itulah mengapa metode tersebut sangat cepat.**\n\nHal serupa juga terjadi dengan metode `push`.\n\n## Pengulangan (*loop*)\n\nSalah satu cara tertua untuk mensirkulasi elemen-elemen *array* adalah dengan pengulangan indeks dengan `for`:\n\n```js run\nlet arr = [\"Apple\", \"Orange\", \"Pear\"];\n\n*!*\nfor (let i = 0; i < arr.length; i++) {\n*/!*\n alert( arr[i] );\n}\n```\n\nTetapi untuk *array* ada bentuk dari pengulangan lain, `for..of`:\n\n```js run\nlet fruits = [\"Apple\", \"Orange\", \"Plum\"];\n\n// beralih pada elemen array\nfor (let fruit of fruits) {\n alert( fruit );\n}\n```\n\nMetode `for..of` tidak memberikan akses pada nomor elemen yang sekarang, hanya nilainya saja, tetapi dalam kebanyakan kasus hal tersebut cukup. Dan lebih pendek.\n\nSecara teknis, karena *array* adalah objek, *array* juga memungkinkan untuk menggunakan `for..in`:\n\n```js run\nlet arr = [\"Apple\", \"Orange\", \"Pear\"];\n\n*!*\nfor (let key in arr) {\n*/!*\n alert( arr[key] ); // Apple, Orange, Pear\n}\n```\n\nNamun sebenernya hal itu adalah ide buruk. Ada beberapa masalah-masalah potensial:\n\n1. Pengulangan `for..in` beralih pada *semua properti*, tidak hanya yang numerik saja.\n\n Terdapat apa yang disebut sebagai objek \"seperti *array*\" dalam peramban serta lingkungan lainnya, yang *terlihat seperti array*. Objek tersebut, memiliki `length` dan properti yang ber-indeks, namun juga bisa memiliki properti non-numerik lain serta metode-metode, yang mana biasanya tidak kita butuhkan. Pengulangan `for..in` akan mendaftarkan properti tersebut. Jadi kita perlu bekerja dengan objek-objek yang seperti *array*, lalu properti-properti \"ekstra\" ini akan menjadi sebuah masalah.\n\n2. Pengulangan `for..in` dioptimasi untuk objek-objek umum (*generic*), bukan *array*, dan 10-100 kali lebih lambat. Tentu saja, pengulangan tersebut masih begitu cepat. Percepatannya mungkin saja berpengaruh saat kondisi kemacetan saja. Namun tetap kita harus menyadari perbedaannya.\n\nSecara umum, kita tidak seharusnya menggunakan `for..in` *array*.\n\n\n## Sebuah kata untuk \"length\"\n\nProperti `length` secara otomatis diperbarui ketika kita memodifikasi *array*. Lebih tepatnya, `length` bukanlah jumlah nilai yang ada dalam *array*, tapi angka indeks terbesar ditambah satu.\n\nContohnya, sebuah elemen tunggal dengan indeks yang besar juga menghasilkan panjang atau `length` yang besar:\n\n```js run\nlet fruits = [];\nfruits[123] = \"Apple\";\n\nalert( fruits.length ); // 124\n```\n\nCatat bahwa kita biasanya tidak menggunakan *array* seperti itu.\n\nHal menarik lain tentang properti `length` adalah bahwa properti tersebut juga dapat dituliskan.\n\nJika kita menambahnya secara manual, tidak hal menarik yang terjadi. Tapi jika kita menguranginya, *array* tersebut terpotong. Prosesnya tidak dapat dibalikkan (seperti semula), berikut ini contohnya:\n\n```js run\nlet arr = [1, 2, 3, 4, 5];\n\narr.length = 2; // memotong hingga 2 elemen\nalert( arr ); // [1, 2]\n\narr.length = 5; // mengembalikan length/panjang\nalert( arr[3] ); // undefined: nilai tidak dapat dikembalikan\n```\n\nJadi, cara paling sederhana untuk membersihkan *array* adalah yakni dengan: `arr.length = 0;`.\n\n\n## new Array() [#new-array]\n\nAda satu sintaks lagi untuk membuat sebuah *array*:\n\n```js\nlet arr = *!*new Array*/!*(\"Apple\", \"Pear\", \"etc\");\n```\n\nSintaks tersebut jarang digunakan, karena tanda kurung siku `[]` lebih pendek. Juga terdapat sebuah fitur yang sukar di dalamnya.\n\nJika `new Array` dipanggil dengan sebuah argumen tunggal yang mana adalah sebuah angka, maka sintaks tersebut akan membuat sebuah *array* yang *tanpa elemen, namun dengan panjang sesuai yang diberikan*.\n\nMari lihat bagaimana orang-orang bisa terjebak dengan hal ini:\n\n```js run\nlet arr = new Array(2); // akankah membuat sebuah array berisi [2] ?\n\nalert( arr[0] ); // undefined! tidak ada elemen.\n\nalert( arr.length ); // length atau panjangnya adalah 2\n```\n\nDalam kode di atas, `new Array(number)` memiliki semua elemen yang `undefined`.\n\nUntuk menghindari kejutan-kejutan yang demikian, kita biasanya menggunakan tanda kurung siku, kecuali kita benar-benar tahu kode apa yang sedang kita tulis.\n\n## *Array* multidimensi\n\n*Array* dapat memiliki isi yang juga merupakan *array*. Kita bisa menggunakannya untuk *array* multidimensi, sebagai contoh untuk menyimpan matriks:\n\n```js run\nlet matrix = [\n [1, 2, 3],\n [4, 5, 6],\n [7, 8, 9]\n];\n\nalert( matrix[1][1] ); // 5, elemen pusat\n```\n\n## toString\n\n*Array* memiliki implementasi metode `toString`-nya sendiri yang mengembalikan daftar elemen yang dipisahkan oleh tanda koma.\n\nContoh:\n\n\n```js run\nlet arr = [1, 2, 3];\n\nalert( arr ); // 1,2,3\nalert( String(arr) === '1,2,3' ); // true\n```\n\nCoba juga contoh berikut ini:\n\n```js run\nalert( [] + 1 ); // \"1\"\nalert( [1] + 1 ); // \"11\"\nalert( [1,2] + 1 ); // \"1,21\"\n```\n\n*Array* tidak memiliki `Symbol.toPrimitive`, begitu juga `valueOf` dapat diandalkan, *array* hanya mengimplentasikan konversi`toString`, jadi di sini `[]` menjadi sebuah *string* kosong, `[1]` menjadi `\"1\"` dan `[1,2]` menjadi `\"1,2\"`.\n\nKetika operator tanda tambah biner `\"+\"` menambahkan sesuatu pada sebuah *string*, operator tersebut mengonversi hal yang ditambahkan tadi menjadi sebuah *string* juga, jadi langkah selanjutnya akan terlihat seperti berikut ini:\n\n```js run\nalert( \"\" + 1 ); // \"1\"\nalert( \"1\" + 1 ); // \"11\"\nalert( \"1,2\" + 1 ); // \"1,21\"\n```\n\n## Jangan bandingkan array dengan ==\n\nArray dalam JavaScript, tidak seperti beberapa bahasa pemrograman lainnya, tidak boleh dibandingkan dengan operator `==`.\n\nOperator ini tidak memiliki perlakuan khusus untuk array, ia bekerja dengan mereka seperti pada objek lainnya.\n\nMari kita ingat aturannya:\n\n- Dua objek sama `==` hanya jika mereka merujuk ke objek yang sama.\n- Jika salah satu argumen `==` adalah objek, dan argumen lainnya primitif, objek tersebut akan diubah menjadi primitif, seperti yang dijelaskan pada bab .\n- ... Dengan pengecualian `null` dan` undefined` yang sama `==` satu sama lain dan tidak ada yang lain.\n\nPerbandingan ketat `===` bahkan lebih sederhana, karena tidak mengonversi jenis.\n\nJadi, jika kita membandingkan array dengan `==`, keduanya tidak akan pernah sama, kecuali jika kita membandingkan dua variabel yang mereferensikan array yang sama persis.\n\nSebagai contoh:\n```js run\nalert( [] == [] ); // false\nalert( [0] == [0] ); // false\n```\n\nArray ini adalah objek yang secara teknis berbeda. Jadi mereka tidak sama. Operator `==` tidak melakukan perbandingan item-demi-item.\n\nPerbandingan dengan primitif mungkin memberikan hasil yang tampak aneh juga:\n\n```js run\nalert( 0 == [] ); // true\n\nalert('0' == [] ); // false\n```\n\nDi sini, dalam kedua kasus, kami membandingkan primitif dengan objek array. Jadi, array `[]` diubah menjadi primitif untuk tujuan perbandingan dan menjadi string kosong `` '' `.\n\nKemudian proses perbandingan berlanjut dengan primitif, seperti yang dijelaskan dalam bab :\n\n```js run\n// after [] was converted to ''\nalert( 0 == '' ); // true, karena '' diubah menjadi angka 0\n\nalert('0' == '' ); // false, tidak ada konversi tipe data, string berbeda\n```\n\nJadi, bagaimana cara membandingkan array?\n\nSederhana saja: jangan gunakan operator `==`. Sebaliknya, bandingkan item-by-item dalam satu putaran atau gunakan metode iterasi yang dijelaskan di bab berikutnya.\n\n## Kesimpulan\n\n*Array* adalah sebuah objek berjenis khusus, cocok untuk menyimpan dan mengelola data yang tersusun.\n\n- Deklarasinya:\n\n ```js\n // tanda kurung siku (seperti biasa)\n let arr = [item1, item2...];\n\n // new Array (pengecualian yang jarang)\n let arr = new Array(item1, item2...);\n ```\n\n Panggilan `new Array(number)` membuat sebuah *array* dengan panjang indeks (*length*) yang diberikan, tetapi tanpa elemen.\n\n- Properti `length` adalah panjang *array* atau, lebih tepatnya, angka indeks terakhir plus satu. Hal tersebut secara otomatis diatur dengan metode *array*.\n- Jika kita memendekkan `length` secara manuak, *array* tersebut akan terpotong.\n\nKita bisa menggunakan sebuah *array* sebagai sebuah *deque* dengan operasi sebagai berikut:\n\n- `push(...items)` menambahkan `items` ke bagian akhir *array*.\n- `pop()` menghilangkan elemen dari bagian akhir *array* dan mengembalikannya.\n- `shift()` menghilangkan elemen dari bagian awal *array* dan mengembalikannya.\n- `unshift(...items)` menambahkan `items` ke bagian awal *array*.\n\nUntuk membuat pengulangan (*loop*) elemen *array*:\n - `for (let i=0; i`, `<` dan lainnya), karena mereka tidak memiliki perlakuan khusus untuk array. Mereka menanganinya sebagai objek apa pun, dan itu bukan yang biasanya kita inginkan.\n\nSebagai gantinya kamu bisa menggunakan loop `for..of` untuk membandingkan array item-by-item.\n\nKita akan melanjutkan dengan array dan mempelajari lebih banyak metode untuk menambah, menghapus, mengekstrak elemen dan mengurutkan array di bab berikutnya .\n" }, { "path": "1-js/05-data-types/05-array-methods/1-camelcase/_js.view/solution.js", "content": "function camelize(str) {\n return str\n .split('-') // pecah 'my-long-word' menjadi array ['my', 'long', 'word']\n .map(\n // Ubah huruf pertama dari setiap item array menjadi huruf kapital kecuali item pertama\n // Ubah ['my', 'long', 'word'] into ['my', 'Long', 'Word']\n (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)\n )\n .join(''); // satukan ['my', 'Long', 'Word'] menjadi 'myLongWord'\n}\n" }, { "path": "1-js/05-data-types/05-array-methods/1-camelcase/_js.view/test.js", "content": "describe(\"camelize\", function() {\n\n it(\"leaves an empty line as is\", function() {\n assert.equal(camelize(\"\"), \"\");\n });\n\n it(\"turns background-color into backgroundColor\", function() {\n assert.equal(camelize(\"background-color\"), \"backgroundColor\");\n });\n\n it(\"turns list-style-image into listStyleImage\", function() {\n assert.equal(camelize(\"list-style-image\"), \"listStyleImage\");\n });\n\n it(\"turns -webkit-transition into WebkitTransition\", function() {\n assert.equal(camelize(\"-webkit-transition\"), \"WebkitTransition\");\n });\n\n});" }, { "path": "1-js/05-data-types/05-array-methods/1-camelcase/solution.md", "content": "" }, { "path": "1-js/05-data-types/05-array-methods/1-camelcase/task.md", "content": "nilai penting: 5\n\n---\n\n# Ubah border-left-width menjadi borderLeftWidth\n\nTulis sebuah fungsi `cameize(str)` yang mengubah tulisan dengan tanda garin seperti \"my-short-string\" menjadi camel-case \"myShortString\".\n\nItu saja: hapus semua tanda garis, setiap kata setelah tanda garis menjadi camel-case.\n\nContoh:\n\n```js\ncamelize(\"background-color\") == 'backgroundColor';\ncamelize(\"list-style-image\") == 'listStyleImage';\ncamelize(\"-webkit-transition\") == 'WebkitTransition';\n```\n\nCatatan. Hint: gunakan `split` untuk memisahkan string menjadi array, ubah itu dan gunakan `join` untuk menyatukannya.\n" }, { "path": "1-js/05-data-types/05-array-methods/10-average-age/solution.md", "content": "```js run\nfunction getAverageAge(users) {\n return users.reduce((prev, user) => prev + user.age, 0) / users.length;\n}\n\nlet john = { name: \"John\", age: 25 };\nlet pete = { name: \"Pete\", age: 30 };\nlet mary = { name: \"Mary\", age: 29 };\n\nlet arr = [ john, pete, mary ];\n\nalert( getAverageAge(arr) ); // 28\n```\n\n" }, { "path": "1-js/05-data-types/05-array-methods/10-average-age/task.md", "content": "nilai penting: 4\n\n---\n\n# Dapatkan rata-rata umur\n\nTulis fungsi `getAverageAge(users)` yang menerima sebuah array dari objek dengan properti `age` dan mengembalikan rata-rata umur.\n\nRumus dari rata-rata adalah `(age1 + age2 + ... + ageN) / N`.\n\nContoh:\n\n```js no-beautify\nlet john = { name: \"John\", age: 25 };\nlet pete = { name: \"Pete\", age: 30 };\nlet mary = { name: \"Mary\", age: 29 };\n\nlet arr = [ john, pete, mary ];\n\nalert( getAverageAge(arr) ); // (25 + 30 + 29) / 3 = 28\n```\n" }, { "path": "1-js/05-data-types/05-array-methods/11-array-unique/_js.view/solution.js", "content": "function unique(arr) {\n let result = [];\n\n for (let str of arr) {\n if (!result.includes(str)) {\n result.push(str);\n }\n }\n\n return result;\n}\n" }, { "path": "1-js/05-data-types/05-array-methods/11-array-unique/_js.view/test.js", "content": "describe(\"unique\", function() {\n it(\"removes non-unique elements\", function() {\n let strings = [\"Hare\", \"Krishna\", \"Hare\", \"Krishna\",\n \"Krishna\", \"Krishna\", \"Hare\", \"Hare\", \":-O\"\n ];\n\n assert.deepEqual(unique(strings), [\"Hare\", \"Krishna\", \":-O\"]);\n });\n\n it(\"does not change the source array\", function() {\n let strings = [\"Krishna\", \"Krishna\", \"Hare\", \"Hare\"];\n unique(strings);\n assert.deepEqual(strings, [\"Krishna\", \"Krishna\", \"Hare\", \"Hare\"]);\n });\n});\n" }, { "path": "1-js/05-data-types/05-array-methods/11-array-unique/solution.md", "content": "Kita lihat seluruh item didalam array:\n- Untuk setiap item kita memeriksa apakah array keluaran sudah memiliki itemnya.\n- Jika sudah maka abaikan, sebaliknya tambahkan kedalam array keluaran.\n\n```js run demo\nfunction unique(arr) {\n let result = [];\n\n for (let str of arr) {\n if (!result.includes(str)) {\n result.push(str);\n }\n }\n\n return result;\n}\n\nlet strings = [\"Hare\", \"Krishna\", \"Hare\", \"Krishna\",\n \"Krishna\", \"Krishna\", \"Hare\", \"Hare\", \":-O\"\n];\n\nalert( unique(strings) ); // Hare, Krishna, :-O\n```\n\nKodenya bekerja, tapi terdapat sebuah masalah performansi didalamnya.\n\nMetode `result.includes(str)` secara internal menyusuri arrau `result` dan membandingkan setiap elemen dengan `str` untuk menemukan apakah ada yang sama.\n\nJadi jika didalam `result` terdapat `100` elemen dan tidak ada yang sama dengan `str`, lalu itu akan menyusuri seluruh `result` dan melakukan tepat `100` perbandingan. Dan jika `result` berukuran sangat besar, seperti `10000`, maka akan terjadi `10000` perbandingan.\n\nItu bukanlah masalah bagi mesinnya, karena mesin Javascript sangatlah cepat, jadi menyusuri `10000` array hanya akan terjadi secara microseconds (micro detik).\n\nTapi kita melakukan test untuk setiap elemen dari `arr`, didalam perulangan `for`.\n\nJadi jika `arr.length` adalah `10000` kita akan memiliki sesuatu seperti `10000*10000` = 100 juta perbandingan. Itu sangatlah banyak.\n\nDemikian, solusi ini hanya bagus untuk array dengan ukuran kecil.\n\nSelanjutnya didalam bab kita akan melihat bagaimana cara mengoptimasinya.\n" }, { "path": "1-js/05-data-types/05-array-methods/11-array-unique/task.md", "content": "nilai penting: 4\n\n---\n\n# Filter untuk anggota array yang unik\n\nBuatlah sebuah array `arr`.\n\nBuatlah sebuah fungsi `unique(arr)` yang harus mengembalikan array dengan item yang unik dari `arr`.\n\nContoh:\n\n```js\nfunction unique(arr) {\n /* kodemu */\n}\n\nlet strings = [\"Hare\", \"Krishna\", \"Hare\", \"Krishna\",\n \"Krishna\", \"Krishna\", \"Hare\", \"Hare\", \":-O\"\n];\n\nalert( unique(strings) ); // Hare, Krishna, :-O\n```\n" }, { "path": "1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/solution.js", "content": "function groupById(array) {\n return array.reduce((obj, value) => {\n obj[value.id] = value;\n return obj;\n }, {})\n}\n" }, { "path": "1-js/05-data-types/05-array-methods/12-reduce-object/_js.view/test.js", "content": "describe(\"groupById\", function() {\n\n it(\"creates an object grouped by id\", function() {\n let users = [\n {id: 'john', name: \"John Smith\", age: 20},\n {id: 'ann', name: \"Ann Smith\", age: 24},\n {id: 'pete', name: \"Pete Peterson\", age: 31},\n ];\n\n assert.deepEqual(groupById(users), {\n john: {id: 'john', name: \"John Smith\", age: 20},\n ann: {id: 'ann', name: \"Ann Smith\", age: 24},\n pete: {id: 'pete', name: \"Pete Peterson\", age: 31},\n });\n });\n\n it(\"works with an empty array\", function() {\n users = [];\n assert.deepEqual(groupById(users), {});\n });\n});\n" }, { "path": "1-js/05-data-types/05-array-methods/12-reduce-object/solution.md", "content": "" }, { "path": "1-js/05-data-types/05-array-methods/12-reduce-object/task.md", "content": "nilai penting: 4\n\n---\n\n# Buatlah objek dengan kunci dari array\n\nAnggaplah kita menerima sebuah array dari user didalam form `{id:..., name:..., age... }`.\n\nBuatlah sebuah fungsi `groupById(arr)` yang membuat sebuah objek, dengan `id` sebagai key/kunci, dan item array sebagai nilai\n\nContoh:\n\n```js\nlet users = [\n {id: 'john', name: \"John Smith\", age: 20},\n {id: 'ann', name: \"Ann Smith\", age: 24},\n {id: 'pete', name: \"Pete Peterson\", age: 31},\n];\n\nlet usersById = groupById(users);\n\n/*\n// Setelah pemanggilan kita harus mempunyai:\n\nusersById = {\n john: {id: 'john', name: \"John Smith\", age: 20},\n ann: {id: 'ann', name: \"Ann Smith\", age: 24},\n pete: {id: 'pete', name: \"Pete Peterson\", age: 31},\n}\n*/\n```\n\nFungsi seperti itu sangat berguna ketika bekerja dengan data dari server.\n\nDitugas ini kita asumsikan bahwa `id` adalah unik. Tidak mungkin memiliki dua item array dengan `id` yang sama.\n\nTolong gunakan metode array `.reduce` didalam solusi." }, { "path": "1-js/05-data-types/05-array-methods/2-filter-range/_js.view/solution.js", "content": "\nfunction filterRange(arr, a, b) {\n // menambahkan kurung di sekitar ekspresi untuk membuat keterbacaan menjadi lebih baik\n return arr.filter(item => (a <= item && item <= b));\n}" }, { "path": "1-js/05-data-types/05-array-methods/2-filter-range/_js.view/test.js", "content": "describe(\"filterRange\", function() {\n\n it(\"returns the filtered values\", function() {\n\n let arr = [5, 3, 8, 1];\n\n let filtered = filterRange(arr, 1, 4); \n\n assert.deepEqual(filtered, [3, 1]);\n });\n\n it(\"doesn't change the array\", function() {\n\n let arr = [5, 3, 8, 1];\n\n let filtered = filterRange(arr, 1, 4); \n\n assert.deepEqual(arr, [5,3,8,1]);\n });\n\n});" }, { "path": "1-js/05-data-types/05-array-methods/2-filter-range/solution.md", "content": "```js run demo\r\nfunction filterRange(arr, a, b) {\r\n // menambahkan kurung di sekitar ekspresi untuk membuat keterbacaan menjadi lebih baik\r\n return arr.filter(item => (a <= item && item <= b));\r\n}\r\n\r\nlet arr = [5, 3, 8, 1];\r\n\r\nlet filtered = filterRange(arr, 1, 4);\r\n\r\nalert( filtered ); // 3,1 (mencocokan nilai)\r\n\r\nalert( arr ); // 5,3,8,1 (tidak diubah)\r\n```\r\n" }, { "path": "1-js/05-data-types/05-array-methods/2-filter-range/task.md", "content": "nilai penting: 4\n\n---\n\n# Filter range / menyaring dengan jarak\n\nTulislah sebuah fungsi `filterRange(arr, a, b)` yang mendapatkan sebuah array `arr`, carilah elemen yang berada diantara `a` dan `b` didalamnya dan kembalikanlah array dari mereka.\n\nFungsinya haruslah tidak memodifikasi arraynya. Itu haruslah mengembalikan array baru.\n\nContoh:\n\n```js\nlet arr = [5, 3, 8, 1];\n\nlet filtered = filterRange(arr, 1, 4); \n\nalert( filtered ); // 3,1 (mencocokan nilai)\n\nalert( arr ); // 5,3,8,1 (tidak diubah)\n```\n\n" }, { "path": "1-js/05-data-types/05-array-methods/3-filter-range-in-place/_js.view/solution.js", "content": "\nfunction filterRangeInPlace(arr, a, b) {\n\n for (let i = 0; i < arr.length; i++) {\n let val = arr[i];\n\n // hilangkan jika diluar dari interval\n if (val < a || val > b) {\n arr.splice(i, 1);\n i--;\n }\n }\n\n}\n" }, { "path": "1-js/05-data-types/05-array-methods/3-filter-range-in-place/_js.view/test.js", "content": "describe(\"filterRangeInPlace\", function() {\n\n it(\"returns the filtered values\", function() {\n\n let arr = [5, 3, 8, 1];\n\n filterRangeInPlace(arr, 1, 4); \n\n assert.deepEqual(arr, [3, 1]);\n });\n\n it(\"doesn't return anything\", function() {\n assert.isUndefined(filterRangeInPlace([1,2,3], 1, 4)); \n });\n\n});" }, { "path": "1-js/05-data-types/05-array-methods/3-filter-range-in-place/solution.md", "content": "```js run demo\r\nfunction filterRangeInPlace(arr, a, b) {\r\n\r\n for (let i = 0; i < arr.length; i++) {\r\n let val = arr[i];\r\n\r\n // hilangkan jika berada diluar interval\r\n if (val < a || val > b) {\r\n arr.splice(i, 1);\r\n i--;\r\n }\r\n }\r\n\r\n}\r\n\r\nlet arr = [5, 3, 8, 1];\r\n\r\nfilterRangeInPlace(arr, 1, 4); // hilangkan angkanya kecuali dari 1 to 4\r\n\r\nalert( arr ); // [3, 1]\r\n```\r\n" }, { "path": "1-js/05-data-types/05-array-methods/3-filter-range-in-place/task.md", "content": "nilai penting: 4\n\n---\n\n# Filter range \"in place\" / menyaring dengan jarak \"secara langsung\"\n\nTulis sebuah fungsi `filteredRangeInPlace(arr, a, b)` yang mendapatkan array `arr` dan menghilangkan seluruh nilai yang berada diantara `a` dan `b`. Testnya adalah: `a ≤ arr[i] ≤ b`.\n\nFungsinya haruslah hanya memodifikasi arraynya. Itu harus tidak mengembalikan apapun.\n\nFor instance:\n```js\nlet arr = [5, 3, 8, 1];\n\nfilterRangeInPlace(arr, 1, 4); // hapus angka kecuali dari 1 to 4\n\nalert( arr ); // [3, 1]\n```\n" }, { "path": "1-js/05-data-types/05-array-methods/4-sort-back/solution.md", "content": "\n\n```js run\nlet arr = [5, 2, 1, -10, 8];\n\narr.sort((a, b) => b - a);\n\nalert( arr );\n```\n\n" }, { "path": "1-js/05-data-types/05-array-methods/4-sort-back/task.md", "content": "nilai penting: 4\n\n---\n\n# Sortir secara menurun\n\n```js\nlet arr = [5, 2, 1, -10, 8];\n\n// ... kodemu untuk menyortir secara menurun\n\nalert( arr ); // 8, 5, 2, 1, -10\n```\n\n" }, { "path": "1-js/05-data-types/05-array-methods/5-copy-sort-array/solution.md", "content": "Kita bisa menggunakan `slice()` untuk membuat salinan dan menjalankan penyortirannya:\n\n```js run\nfunction copySorted(arr) {\n return arr.slice().sort();\n}\n\nlet arr = [\"HTML\", \"JavaScript\", \"CSS\"];\n\n*!*\nlet sorted = copySorted(arr);\n*/!*\n\nalert( sorted );\nalert( arr );\n```\n\n" }, { "path": "1-js/05-data-types/05-array-methods/5-copy-sort-array/task.md", "content": "nilai penting: 5\n\n---\n\n# Salin dan sortir array\n\nKita mempunyai sebuah array dari string `arr`. Kita ingin mempunyai salinan yang telah disortir, tapi tidak mengubah `arr`.\n\nBuat sebuah fungsi `copySorted(arr)` yang mengembalikan kopiannya.\n\n```js\nlet arr = [\"HTML\", \"JavaScript\", \"CSS\"];\n\nlet sorted = copySorted(arr);\n\nalert( sorted ); // CSS, HTML, JavaScript\nalert( arr ); // HTML, JavaScript, CSS (tidak berubah)\n```\n" }, { "path": "1-js/05-data-types/05-array-methods/6-array-get-names/solution.md", "content": "```js run\n\nlet john = { name: \"John\", age: 25 };\nlet pete = { name: \"Pete\", age: 30 };\nlet mary = { name: \"Mary\", age: 28 };\n\nlet users = [ john, pete, mary ];\n\nlet names = users.map(item => item.name);\n\nalert( names ); // John, Pete, Mary\n```\n\n" }, { "path": "1-js/05-data-types/05-array-methods/6-array-get-names/task.md", "content": "nilai penting: 5\n\n---\n\n# Memetakan nama\n\nKamu punya sebuah array dari objek `user`, masing-masing memiliki `user.name`. Tulis kode yang mengubah itu menjadi sebuah array dari nama.\n\nContoh:\n\n```js no-beautify\nlet john = { name: \"John\", age: 25 };\nlet pete = { name: \"Pete\", age: 30 };\nlet mary = { name: \"Mary\", age: 28 };\n\nlet users = [ john, pete, mary ];\n\nlet names = /* ... Kodemu */\n\nalert( names ); // John, Pete, Mary\n```\n\n" }, { "path": "1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/solution.js", "content": "function Calculator() {\n\n this.methods = {\n \"-\": (a, b) => a - b,\n \"+\": (a, b) => a + b\n };\n\n this.calculate = function(str) {\n\n let split = str.split(' '),\n a = +split[0],\n op = split[1],\n b = +split[2];\n\n if (!this.methods[op] || isNaN(a) || isNaN(b)) {\n return NaN;\n }\n\n return this.methods[op](a, b);\n };\n\n this.addMethod = function(name, func) {\n this.methods[name] = func;\n };\n}\n" }, { "path": "1-js/05-data-types/05-array-methods/6-calculator-extendable/_js.view/test.js", "content": "describe(\"Calculator\", function() {\n let calculator;\n\n before(function() {\n calculator = new Calculator;\n });\n\n it(\"calculate(12 + 34) = 46\", function() {\n assert.equal(calculator.calculate(\"12 + 34\"), 46);\n });\n\n it(\"calculate(34 - 12) = 22\", function() {\n assert.equal(calculator.calculate(\"34 - 12\"), 22);\n });\n\n it(\"add multiplication: calculate(2 * 3) = 6\", function() {\n calculator.addMethod(\"*\", (a, b) => a * b);\n assert.equal(calculator.calculate(\"2 * 3\"), 6);\n });\n\n it(\"add power: calculate(2 ** 3) = 8\", function() {\n calculator.addMethod(\"**\", (a, b) => a ** b);\n assert.equal(calculator.calculate(\"2 ** 3\"), 8);\n });\n});\n" }, { "path": "1-js/05-data-types/05-array-methods/6-calculator-extendable/solution.md", "content": "\n- Tolong perhatikan bagaimana method disimpan. Mereka secara sederhana ditambahkan kedalam properti `this.methods`.\n- Semua test dan perubahan numerik dilakukan didalam method `calculate`. Selanjutnya mungkin bisa diperluas untuk mendukung lebih banyak ekspresi yang rumit.\n" }, { "path": "1-js/05-data-types/05-array-methods/6-calculator-extendable/task.md", "content": "nilai penting: 5\n\n---\n\n# Buat sebuah kalkulator yang bisa diperluas\n\nBuat sebuah konstructor fungsi `Calculator` yang membuat objek kalkulator \"yang dapat diperluas\".\n\nTugasnya terdiri dari dua bagian.\n\n1. Pertama, implementasikan method `calculate(str)` yang menerima sebuah string sepertin `\"1 + 2\"` didalam format \"ANGKA operator ANGKA\" (membatasi ruang) dan mengembalikan hasilnya. Harus mengerti tambah `+` dan kurang `-`.\n\n Contoh penggunaan:\n\n ```js\n let calc = new Calculator;\n\n alert( calc.calculate(\"3 + 7\") ); // 10\n ```\n\n2. Lalu tambahkan method `addMethod(name, func)` yang mengajarkan operator operasi baru. methodnya akan menerima `name` dan fungsi dengan dua-argumen `func(a, b)` yang mengimplementasikannya.\n\n Contoh, kita tambah perkalian `*`, pembagian `/` dan pangkat `**`:\n\n ```js\n let powerCalc = new Calculator;\n powerCalc.addMethod(\"*\", (a, b) => a * b);\n powerCalc.addMethod(\"/\", (a, b) => a / b);\n powerCalc.addMethod(\"**\", (a, b) => a ** b);\n\n let result = powerCalc.calculate(\"2 ** 3\");\n alert( result ); // 8\n ```\n\n- Tidak ada tanda kurung atau ekspresi yang rumit didalam tugas ini.\n- Angka dan operatornya dibatasi dengan hanya satu spasi.\n- Disana mungkin terdapat penanganan error jika kamu ingin menambahkannya.\n" }, { "path": "1-js/05-data-types/05-array-methods/7-map-objects/solution.md", "content": "\n```js run no-beautify\nlet john = { name: \"John\", surname: \"Smith\", id: 1 };\nlet pete = { name: \"Pete\", surname: \"Hunt\", id: 2 };\nlet mary = { name: \"Mary\", surname: \"Key\", id: 3 };\n\nlet users = [ john, pete, mary ];\n\n*!*\nlet usersMapped = users.map(user => ({\n fullName: `${user.name} ${user.surname}`,\n id: user.id\n}));\n*/!*\n\n/*\nusersMapped = [\n { fullName: \"John Smith\", id: 1 },\n { fullName: \"Pete Hunt\", id: 2 },\n { fullName: \"Mary Key\", id: 3 }\n]\n*/\n\nalert( usersMapped[0].id ); // 1\nalert( usersMapped[0].fullName ); // John Smith\n```\n\nPerhatikan bahwa didalam fungsi arrow kita butuh untuk menggunakan tambahan kurung.\n\nKita tidak bisa menulis seperti ini:\n```js\nlet usersMapped = users.map(user => *!*{*/!*\n fullName: `${user.name} ${user.surname}`,\n id: user.id\n});\n```\n\nSeperti yang kita ingat, terdapat dua fungsi arrow: tanpa body `value => expression` dan dengan body `value => {...}`.\n\nDisini Javascript akan memperlakukan `{` seperti awal dari fungsi body, bukan awal dari objek. Solusinya adalah untuk membungkus mereka didalam kurung \"biasa\":\n\n```js\nlet usersMapped = users.map(user => *!*({*/!*\n fullName: `${user.name} ${user.surname}`,\n id: user.id\n}));\n```\n\nSekarang beres.\n\n\n" }, { "path": "1-js/05-data-types/05-array-methods/7-map-objects/task.md", "content": "nilai penting: 5\n\n---\n\n# Memetakan objek\n\nKamu mempunyai array dari objek `user`, masing-masing memiliki `name`, `surname` dan `id`.\n\nTulis kode untuk membuat array lainnya dari itu, sebuah objek dengan `id` dan `fullName`, dimana` fullName` dibuat dari `name` dan `surname`.\n\nContoh: \n\n```js no-beautify\nlet john = { name: \"John\", surname: \"Smith\", id: 1 };\nlet pete = { name: \"Pete\", surname: \"Hunt\", id: 2 };\nlet mary = { name: \"Mary\", surname: \"Key\", id: 3 };\n\nlet users = [ john, pete, mary ];\n\n*!*\nlet usersMapped = /* ... kodemu ... */\n*/!*\n\n/*\nusersMapped = [\n { fullName: \"John Smith\", id: 1 },\n { fullName: \"Pete Hunt\", id: 2 },\n { fullName: \"Mary Key\", id: 3 }\n]\n*/\n\nalert( usersMapped[0].id ) // 1\nalert( usersMapped[0].fullName ) // John Smith\n```\n\nJadi, sebenarnya kamu harus memetakan satu array dari objek menjadi array dari objek lainnya. Cobalah gunakan `=>` disini. Ada sedikit yang harus ditangkap." }, { "path": "1-js/05-data-types/05-array-methods/8-sort-objects/solution.md", "content": "```js run no-beautify\nfunction sortByAge(arr) {\n arr.sort((a, b) => a.age - b.age);\n}\n\nlet john = { name: \"John\", age: 25 };\nlet pete = { name: \"Pete\", age: 30 };\nlet mary = { name: \"Mary\", age: 28 };\n\nlet arr = [ pete, john, mary ];\n\nsortByAge(arr);\n\n// sekarang sudah diurutkan: [john, mary, pete]\nalert(arr[0].name); // John\nalert(arr[1].name); // Mary\nalert(arr[2].name); // Pete\n```\n" }, { "path": "1-js/05-data-types/05-array-methods/8-sort-objects/task.md", "content": "nilai penting: 5\n\n---\n\n# Urutkan user dari umur\n\nTulislah fungsi `sortByAge(users)` yang menerima sebuah array dari objek dengan properti `age` dan urutkan mereka berdasarkan `age`.\n\nContoh:\n\n```js no-beautify\nlet john = { name: \"John\", age: 25 };\nlet pete = { name: \"Pete\", age: 30 };\nlet mary = { name: \"Mary\", age: 28 };\n\nlet arr = [ pete, john, mary ];\n\nsortByAge(arr);\n\n// sekarang: [john, mary, pete]\nalert(arr[0].name); // John\nalert(arr[1].name); // Mary\nalert(arr[2].name); // Pete\n```\n" }, { "path": "1-js/05-data-types/05-array-methods/9-shuffle/solution.md", "content": "Solusi simpelnya bisa seperti:\n\n```js run\n*!*\nfunction shuffle(array) {\n array.sort(() => Math.random() - 0.5);\n}\n*/!*\n\nlet arr = [1, 2, 3];\nshuffle(arr);\nalert(arr);\n```\n\nEntah bagaimana kode diatas bekerja, karena `Math.random() - 0.5` adalah angka acak yang mungkin bisa positif atau negatif, jadi fungsi untuk pengurutan menyusun ulang elemen secara acak.\n\nTapi karena fungsi untuk mengurutkan bukan digunakan dengan cara seperti ini, tidak semua permutasi memiliki probabilitas yang sama.\n\nContoh, lihat kode dibawah. Itu akan menjalankan `shuffle` 1000000 kali dan menghitung kemunculan dari seluruh hasil yang mungkin terjadi:\n\n```js run\nfunction shuffle(array) {\n array.sort(() => Math.random() - 0.5);\n}\n\n// hitung kemunculan dari seluruh permutasi yang mungkin terjadi\nlet count = {\n '123': 0,\n '132': 0,\n '213': 0,\n '231': 0,\n '321': 0,\n '312': 0\n};\n\nfor (let i = 0; i < 1000000; i++) {\n let array = [1, 2, 3];\n shuffle(array);\n count[array.join('')]++;\n}\n\n// tampilkan hitungan permutasi yang mungkin terjadi\nfor (let key in count) {\n alert(`${key}: ${count[key]}`);\n}\n```\n\nAn example result (depends on JS engine):\n\n```js\n123: 250706\n132: 124425\n213: 249618\n231: 124880\n312: 125148\n321: 125223\n```\n\nKita bisa melihat secara jelas: `123` dan `213` muncul lebih banyak dari lainnya.\n\nHasil dari kodenya mungkin berbeda-beda diantara mesin Javascript, tapi kita sudah bisa melihat pendekatan yang tak bisa diandalkan.\n\nkenapa itu tidak bekerja? Secara umum, `sort` adalah sebuah \"black box\": kita bisa berikan sebuah array dan fungsi perbandingan kedalamnya dan berharap arraynya akan diurutkan. Tapi karena keteracakan dari perbandingan blackbox menjadi tak karuan, dan bagaimana tepatnya itu tergantung dari perbedaan implementasi diantara mesinnya.\n\nTerdapat cara yang lebih baik untuk melakukan tugas seperti itu. Contoh, terdapat algoritma bagus yang dipanggil dengan [Fisher-Yates shuffle](https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle). Idenya adalah untuk membuat array menjadi terbalik dan mengganti setiap elemen dengan elemen acak sebelumnya:\n\n```js\nfunction shuffle(array) {\n for (let i = array.length - 1; i > 0; i--) {\n let j = Math.floor(Math.random() * (i + 1)); // index acak dari 0 ke i\n\n // ganti elemen array[i] dan array[j]\n // kita gunakan sintaks \"destructuring assignment\" untuk mendapatkannya\n // kamu akan menemukan lebih banyak detail tentang sintaksnya nanti di bab selanjutnya\n // bisa juga ditulis seperti:\n // let t = array[i]; array[i] = array[j]; array[j] = t\n [array[i], array[j]] = [array[j], array[i]];\n }\n}\n```\n\npengetesan dengan cara yang sama:\n\n```js run\nfunction shuffle(array) {\n for (let i = array.length - 1; i > 0; i--) {\n let j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n}\n\n// hitung seluruh kemunculan dari permutasi yang mungkin terjadi\nlet count = {\n '123': 0,\n '132': 0,\n '213': 0,\n '231': 0,\n '321': 0,\n '312': 0\n};\n\nfor (let i = 0; i < 1000000; i++) {\n let array = [1, 2, 3];\n shuffle(array);\n count[array.join('')]++;\n}\n\n// tampilkan perhitungan dari seluruh permutasi yang mungkin terjadi\nfor (let key in count) {\n alert(`${key}: ${count[key]}`);\n}\n```\n\nContoh keluaran:\n\n```js\n123: 166693\n132: 166647\n213: 166628\n231: 167517\n312: 166199\n321: 166316\n```\n\nSekarang terlihat bagus: seluruh permutasi muncul dengan probabilitas yang sama.\n\nAlso, performance-wise the Fisher-Yates algorithm is much better, there's no \"sorting\" overhead.\nJuga, performansi dari algoritma Fisher-Yates lebih baik, tidak ada \"pengurutan\" tambahan.\n" }, { "path": "1-js/05-data-types/05-array-methods/9-shuffle/task.md", "content": "nilai penting: 3\n\n---\n\n# Mengacak sebuah array\n\nTulis fungsi `shuffle(array`) yang mengocok (pengurutan secara acak) elemen dari sebuah array.\n\nPemanggilan dari `shuffle` akan menghasilkan urutan yang berbeda-beda. Contoh:\n\n```js\nlet arr = [1, 2, 3];\n\nshuffle(arr);\n// arr = [3, 2, 1]\n\nshuffle(arr);\n// arr = [2, 1, 3]\n\nshuffle(arr);\n// arr = [3, 1, 2]\n// ...\n```\n\nSeluruh pengurutan elemen harus punya probabilitas yang sama. Contoh, `[1,2,3]` bisa di urutkan menjadi `[1,2,3]` atau `[1,3,2]` atau `[3,1,2]` dll, dengan probabilitas yang sama untuk setiap kasus." }, { "path": "1-js/05-data-types/05-array-methods/article.md", "content": "# Metode *array*\n\n*Array* menyediakan begitu banyak metode. Untuk mempermudah, dalam bab ini metode-metode tersebut dibagi menjadi beberapa kelompok.\n\n## Menambahkan/menghapus *item*\n\nKita sudah tahu metode-metode yang menambahkan dan menghapus *item* dari bagian awal atau akhir *array*:\n\n- `arr.push(...items)` -- menambahkan *item* ke bagian akhir,\n- `arr.pop()` -- mengekstrak sebuah *item* dari bagian akhir,\n- `arr.shift()` -- mengekstrak sebuah *item* dari bagian awal,\n- `arr.unshift(...items)` -- menambahkan *item* ke bagian awal.\n\nBerikut ini ada beberapa metode lainnya.\n\n### *splice*\n\nBagaimana cara untuk menghapus sebuah elemen dari *array*?\n\n*Array* merupakan objek, jadi kita bisa coba menggunakan `delete`:\n\n```js run\nlet arr = [\"I\", \"go\", \"home\"];\n\ndelete arr[1]; // menghapus \"go\"\n\nalert( arr[1] ); // undefined\n\n// kini arr = [\"I\", , \"home\"];\nalert( arr.length ); // 3\n```\n\nElemen tersebut telah dihapus, tetapi *array* itu masih memiliki 3 elemen, kita bisa melihat bahwa `arr.length == 3`.\n\nHal itu alami, karena `delete obj.key` menghilangkan sebuah nilai berdasarkan `key`. Itulah yang dilakukannya. Tidak masalah bagi objek. Tapi untuk *array* kita biasanya ingin elemen yang tersisa untuk bergeser dan mengisi ruang yang dikosongkan tadi. Kita ingin memiliki sebuah *array* yang lebih pendek sekarang.\n\nJadi, metode khusus harus digunakan.\n\nMetode [arr.splice(start)](mdn:js/Array/splice) adalahs sebuah fungsi serbaguna untuk *array*. *Splice* bisa melakukan banyak hal: memasukkan, menghilangkan serta mengganti elemen.\n\nSintaksnya yakni:\n\n```js\narr.splice(start[, deleteCount, elem1, ..., elemN])\n```\n\n\nDimulai dari posisi `index`: menghapus elemen `deleteCount` dan kemudian memasukkan `elem1, ..., elemN` di tempatnya masing-masing. Mengembalikan *array* yang tersusun atas elemen yang dihapus.\n\n\nMetode ini mudah untuk dipahami melalui contoh.\n\nMari mulai dengan penghapusan:\n\n```js run\nlet arr = [\"I\", \"study\", \"JavaScript\"];\n\n*!*\narr.splice(1, 1); // dari indeks 1 menghapus 1 elemen\n*/!*\n\nalert( arr ); // [\"I\", \"JavaScript\"]\n```\n\nMudah, kan? Mulai dari indeks `1` metode ini menghilangkan elemen di indeks `1`.\n\nDalam contoh selanjutnya kita menghilangkan 3 element dan menggantinya dengan 2 elemen lain:\n\n```js run\nlet arr = [*!*\"I\", \"study\", \"JavaScript\",*/!* \"right\", \"now\"];\n\n// menghilangkan 3 elemen pertama dan menggantinya dengan yang lain\narr.splice(0, 3, \"Let's\", \"dance\");\n\nalert( arr ) // sekarang [*!*\"Let's\", \"dance\"*/!*, \"right\", \"now\"]\n```\n\nDi sini kita dapat melihat bahwa `splice` mengembalikan *array* yang berisi elemen terhapus:\n\n```js run\nlet arr = [*!*\"I\", \"study\",*/!* \"JavaScript\", \"right\", \"now\"];\n\n// menghilangkan 2 elemen pertama\nlet removed = arr.splice(0, 2);\n\nalert( removed ); // \"I\", \"study\" <-- array yang berisi elemen-elemen yang dihapus\n```\n\nMetode `splice` juga mampu memasukkan elemen tanpa menghilangkan elemen apapun yang ada sebelumnya. Untuk itu kita perlu mengatur `deleteCount` menjadi `0`:\n\n```js run\nlet arr = [\"I\", \"study\", \"JavaScript\"];\n\n// dari indeks 2\n// menghapus 0\n// kemudian masukkan \"complex\" dan \"language\"\narr.splice(2, 0, \"complex\", \"language\");\n\nalert( arr ); // \"I\", \"study\", \"complex\", \"language\", \"JavaScript\"\n```\n\n````smart header=\"Indeks berangka negatif diperbolehkan\"\nDi sini dan di metode array lainnya, indeks (berangka) negatif diperbolehkan. Indeks-indeks tersebut menspesifikasikan posisi dari bagian akhir sebuah array, seperti ini:\n\n```js run\nlet arr = [1, 2, 5];\n\n// dari indeks -1 (satu langkah dari bagian akhir)\n// menghaous 0 element,\n// lalu memasukka 3 dan 4\narr.splice(-1, 0, 3, 4);\n\nalert( arr ); // 1,2,3,4,5\n```\n````\n\n### *slice*\n\nMetode [arr.slice](mdn:js/Array/slice) lebih sederhana daripada metode serupa sebelumnya yakni `arr.splice`.\n\nSintaksnya adalah:\n\n```js\narr.slice([start], [end])\n```\n\nMetode ini mengembalikan sebuah sebuah *array* baru hasil salinan semua *item* yang ada dari indeks `start` hingga `end` (indeks `end` tidak termasuk). Baik `start` maupun `end` bisa saja negatif, dalam kasus tersebut posisi dari bagian akhir *array* sudah diasumsikan/diperkirakan.\n\nMirip dengan metode *string* `str.slice`, namun membuat *subarray* bukan *substring*.\n\nContohnya:\n\n```js run\nlet arr = [\"t\", \"e\", \"s\", \"t\"];\n\nalert( arr.slice(1, 3) ); // e,s (disalin dari 1 sampai 3)\n\nalert( arr.slice(-2) ); // s,t (disalin dari -2 sampai bagian akhir)\n```\n\nKita juga bisa memanggil metode tersebut tanpa argumen: `arr.slice()` membuat sebuah salinan dari `arr`. Cara demikian seringkali digunakan untuk mendapatkan sebuah salinan untuk transformasi yang lebih jauh tanpa mempengaruhi *array* yang asli.\n\n### *concat*\n\nMetode [arr.concat](mdn:js/Array/concat) membuat sebuah *array* baru yang sudah termasuk nilai-nilai dari *array* lainnya serta *item-item* tambahan.\n\nSintaksnya sebagai berikut:\n\n```js\narr.concat(arg1, arg2...)\n```\n\nSintaks tersebut menerima berapapun argumen -- bisa jadi *array* atau nilai.\n\nHasilnya adalah sebuah *array* yang berisi *item* dari `arr`, kemudian `arg1`, `arg2` dan sebagainya.\n\nJika sebuah argumen `argN` adalah sebuah *array*, makan semua elemennya akan disalin. Jika tidak, argumen itu sendiri yang akan disalin.\n\nSebagai contoh:\n\n```js run\nlet arr = [1, 2];\n\n// membuat sebuah array dari: arr dan [3,4]\nalert( arr.concat([3, 4]) ); // 1,2,3,4\n\n// membuat sebuah array dari: arr dan [3,4] dan [5,6]\nalert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6\n\n// membuat sebuah array dari: arr dan [3,4], lalu menambahkan nilai 5 dan 6\nalert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6\n```\n\nNormalnya, metode ini hanya menyalin elemen-elemen dari *array*. Objek lainnya, bahkan jika objek-objek tersebut terlihat seperti *array*, akan ditambahkan secara keseluruhan:\n\n```js run\nlet arr = [1, 2];\n\nlet arrayLike = {\n 0: \"something\",\n length: 1\n};\n\nalert( arr.concat(arrayLike) ); // 1,2,[oobjek Object]\n```\n\n...Tetapi jika sebuah objek mirip *array* memiliki sebuah properti khusus `Symbol.isConcatSpreadable`, maka objek tersebut diperlakukan sebagai sebuah *array* dengan `concat`: elemennya ditambahkan:\n\n```js run\nlet arr = [1, 2];\n\nlet arrayLike = {\n 0: \"something\",\n 1: \"else\",\n*!*\n [Symbol.isConcatSpreadable]: true,\n*/!*\n length: 2\n};\n\nalert( arr.concat(arrayLike) ); // 1,2,something,else\n```\n\n## *Iterate*: forEach\n\nMetode [arr.forEach](mdn:js/Array/forEach) membuat kita dapat menjalankan sebuah fungsi untuk setiap elemen yang ada di dalam *array*.\n\nSintaksnya:\n```js\narr.forEach(function(item, index, array) {\n // ... do something with item\n});\n```\n\nSebagai contoh, kode berikut ini menampilkan tiap elemen dalam *array*:\n\n```js run\n// untuk setiap (for each) elemen memanggil alert\n[\"Bilbo\", \"Gandalf\", \"Nazgul\"].forEach(alert);\n```\n\nDan kode ini lebih rinci tentang posisi elemen-elemen tersebut dalam *array* yang dituju:\n\n```js run\n[\"Bilbo\", \"Gandalf\", \"Nazgul\"].forEach((item, index, array) => {\n alert(`${item} is at index ${index} in ${array}`);\n});\n```\n\nHasil dari fungsi tersebut (jika mengembalikan sesuatu) dibuang dan diabaikan.\n\n\n## Mencari dalam *array*\n\nKini mari membahas metode-metode yang bertugas mencari dalam *array*.\n\n### *indexOf/lastIndexOf* dan *includes*\n\nMetode [arr.indexOf](mdn:js/Array/indexOf), [arr.lastIndexOf](mdn:js/Array/lastIndexOf) dan [arr.includes](mdn:js/Array/includes) memiliki sintaks yang sama dan pada dasarnya keduanya melakukan fungsi yang samahave the same syntax, namun untuk mengoperasikannya perlu ditujukan *item* bukan karakter:\n\n- `arr.indexOf(item, from)` -- mencari `item` dimulai dari indeks `from`, dan mengembalikan indeks dimana *item* yang dicari itu ditemukan, jika tidak akan mengembalikan `-1`.\n- `arr.lastIndexOf(item, from)` -- serupa, namun mencari dari kiri ke kanan.\n- `arr.includes(item, from)` -- mencari `item` dimulai dari indeks `from`, mengembalkikan `true` jika yang dicari itu ditemukan.\n\nContohnya:\n\n```js run\nlet arr = [1, 0, false];\n\nalert( arr.indexOf(0) ); // 1\nalert( arr.indexOf(false) ); // 2\nalert( arr.indexOf(null) ); // -1\n\nalert( arr.includes(1) ); // true\n```\n\nPerlu diperhatikan bahwa metode tersebut menggunakan perbandingan `===`. Jadi, jika kita mencari `false`, metode ini akan tepat mencari `false` dan bukan nol.\n\nJika kita ingin memeriksa pencantuman, dan tidak ingin tahu indeks yang persis, maka direkomendasikan menggunakan `arr.includes`.\n\nJuga, perbedaan kecil dari `includes` yakni metode ini menangani `NaN` dengan tepat, tidak seperti `indexOf/lastIndexOf`:\n\n```js run\nconst arr = [NaN];\nalert( arr.indexOf(NaN) ); // -1 (seharusnya 0, tetapi tanda persamaan === tidak berfungsi pada NaN)\nalert( arr.includes(NaN) );// true (benar)\n```\n\n### *find* dan *findIndex*\n\nBayangkan kita memiliki sebuah *array* berisi objek. Bagaimana cata kita menemukan sebuah objek dengan kondisi tertentu?\n\nBerikut ini ada metode [arr.find(fn)](mdn:js/Array/find) yang dapat mudah digunakan.\n\nSintaksnya:\n```js\nlet result = arr.find(function(item, index, array) {\n // jika true dikembalikan, item dikembalikan dan pengulangan dihentinkan\n // untuk skenario palsu akan mengembalikan undefined\n});\n```\n\nFungsi tersebut dipanggil untuk elemen-elemen dalam *array*, satu sama lainnya:\n\n- `item` adalah elemen.\n- `index` adalah indeks elemen tersebut.\n- `array` adalah *array* itu sendiri.\n\nJika fungsi tersebut mengembalikan `true`, pencarian dihentikan, lalu `item` akan dikembalikan. Jika tidak ditemukan apa-apa, `undefined` yang dikembalikan.\n\nSebagai contoh, kita memiliki sebuah *array* berisi elemen pengguna, tiap pengguna memiliki *field* `id` dan `name`. Mari cari pengguna dengan `id == 1`:\n\n```js run\nlet users = [\n {id: 1, name: \"John\"},\n {id: 2, name: \"Pete\"},\n {id: 3, name: \"Mary\"}\n];\n\nlet user = users.find(item => item.id == 1);\n\nalert(user.name); // John\n```\n\nPada kehidupan nayata *array* berisi objek adalah hal yang umum, jadi metode `find` sangatlah berguna.\n\nIngat bahwa contoh yang kami berikan untuk mencari (`find`) fungsi `item => item.id == 1` hanya dengan satu argumen. Ini adalah hal umum, argumen lainnya pada fungsi lainnya jarang digunakan.\n\nMetode [arr.findIndex](mdn:js/Array/findIndex) pada dasarnya sama, namun mengembalikan indeks dimana elemen tersebut ditemukan bukan elemen itu sendiri serta mengembalikan `-1` ketika tidak ditemukan apapun.\n\n### *filter*\n\nMetode `find` mencari sebuah elemen tunggal (pertama) yang akan membuat fungsi tersebut mengembalikan `true`.\n\nJika ada banyak elemen demikian, kita bisa menggunakan[arr.filter(fn)](mdn:js/Array/filter).\n\nSintaksnya mirip dengan `find`, tetapi `filter` mengembalikan *array* yang berisi elemen-elemen yang cocok:\n\n```js\nlet results = arr.filter(function(item, index, array) {\n // jika true item di-push ke hasil dan pengulangan berlanjut\n // mengembalikan array kosong jika tidak ditemukan apapun\n});\n```\n\nSebagai contoh:\n\n```js run\nlet users = [\n {id: 1, name: \"John\"},\n {id: 2, name: \"Pete\"},\n {id: 3, name: \"Mary\"}\n];\n\n// mengembalikan array dua user pertama\nlet someUsers = users.filter(item => item.id < 3);\n\nalert(someUsers.length); // 2\n```\n\n## Mengubah *array*\n\nMari lanjutkan ke metode-metode yang mengubah dan mengatur ulang *array*.\n\n### *map*\n\nMetode [arr.map](mdn:js/Array/map) adalah salah satu metode yang paling berguna dan paling sering digunakan.\n\nMetode ini memanggil fungsi untuk tiap elemen di *array* dan mengembalikan hasilnya dalam bentuk *array*.\n\nSintaksnya yakni:\n\n```js\nlet result = arr.map(function(item, index, array) {\n // mengembalikan nilai baru, bukan item\n});\n```\n\nSebagai contoh, di sini kita mengubah setiap elemen menjadi panjang (*length*) dari *string* elemen tersebut:\n\n```js run\nlet lengths = [\"Bilbo\", \"Gandalf\", \"Nazgul\"].map(item => item.length);\nalert(lengths); // 5,7,6\n```\n\n### *sort*(fn)\n\nPanggilan [arr.sort()](mdn:js/Array/sort) menata *array* *dalam wadah*, mengubah urutan elemen yang ada.\n\nMetode ini juga mengembalikan *array* yang sudah tertata, tetapi nilai yang dikembalikan biasanya diabaikan, mengingat `arr` itu sendiri sudah termodifikasi/diubah.\n\nContohnya:\n\n```js run\nlet arr = [ 1, 2, 15 ];\n\n// metode tersebut mengurutkan ulang konten arr\narr.sort();\n\nalert( arr ); // *!*1, 15, 2*/!*\n```\n\nApa kamu menyadari adanya keanehan dari hasil di atas?\n\nUrutannya menjadi `1, 15, 2`. Tidak benar. Tapi mengapa demikian?\n\n**_Item-item_ tersebut diurutkan sebagai *string* secara pada dasarnya.**\n\nSecara harfiah, semua elemen dikonversi menjadi *string* untuk dibandingkan. Sedangkan pada *string*, berlaku pengurutan leksikograpis dan memang benar bahwa `\"2\" > \"15\"`.\n\nUntuk menggunakan urutan penataan kita sendiri, kita perlu memberikan sebuah fungsi sebagai argumen pada `arr.sort()`.\n\nFungsi tersebut harus membandingkan dua nilai yang berubah-ubah dan mengembalikan (hasilnya):\n```js\nfunction compare(a, b) {\n if (a > b) return 1; // if the first value is greater than the second\n if (a == b) return 0; // if values are equal\n if (a < b) return -1; // if the first value is less than the second\n}\n```\n\nContoh, untuk mengurutkan elemen sebagai angka:\n\n```js run\nfunction compareNumeric(a, b) {\n if (a > b) return 1;\n if (a == b) return 0;\n if (a < b) return -1;\n}\n\nlet arr = [ 1, 2, 15 ];\n\n*!*\narr.sort(compareNumeric);\n*/!*\n\nalert(arr); // *!*1, 2, 15*/!*\n```\n\nKini metode tersebu berfungsi seperti yang diinginkan.\n\nMari berhenti sejenak dan pikirkan apa yang terjadi. `arr` bisa jadi *array* berisi apapun, benar? *Array* itu bisa saja berisi angka atau *string* atau objek atau apapun. Kita memiliki sekumpulan *beberapa item*. Untuk mengurutkannya, kita perlu sebuah *fungsi pengurutan* yang tahu bagaimana cara untuk membandingkan elemen-elemen. Setelan awalnya adalah sebuah urutan *string*.\n\nMetode `arr.sort(fn)` mengimplementasikan sebuah algoritma pengurutan yang umum. Kita tidak perlu benar-benar tahu bagaimana algoritma itu bekerja (sebuah [cara cepat/*quicksort*](https://en.wikipedia.org/wiki/Quicksort) yang sudah teroptimasi sepanjang waktu). Algoritma itu akan menyusuri *array*, membandungkan elemen-elemennya menggunakan fungsi yang diberikan dan mengurutkan ulang elemen-elemen tersebut, yang perlu kita lakukan yakni memberikan `fn` yang mana akan melakukan operasi perbandingan.\n\n*Ngomong-omong*, jika kita pernah ingin tahu elemen mana saja yang dibandingkan -- cukup dengan cara memberi *alert*:\n\n```js run\n[1, -2, 15, 2, 0, 8].sort(function(a, b) {\n alert( a + \" <> \" + b );\n return a - b;\n});\n```\n\nAlgoritma tersebut dapat membandingkan sebuah elemen dengan banyak elemen lainnya dalam proses ini, tapi algoritma itu akan mencoba membuat sedikit mungkin perbandingan.\n\n````smart header=\"Sebuah fungsi perbandingan dapat mengembalikan angka manapun\"\nSebenarnya, sebuah fungsi perbandingan hanya perlu untuk mengembalikan sebuah angka positif untuk mengatakan \"lebih besar (dari)\" dan angka negatif untuk mengatakan \"kurang (dari)\".\n\nHal tersebut membuat penulisan fungsi jadi lebih pendek:\n\n```js run\nlet arr = [ 1, 2, 15 ];\n\narr.sort(function(a, b) { return a - b; });\n\nalert(arr); // *!*1, 2, 15*/!*\n```\n````\n\n````smart header=\"Fungsi arrow yang terbaik\"\nIngat [fungsi arrow](info:arrow-functions-basics)? Kita dapat menggunakan fungsi arrow di sini untuk pengurutan yang lebih rapi:\n\n```js\narr.sort( (a, b) => a - b );\n```\n\nFungsi ini berfungsi samahalnya dengan metode versi yang lebih panjang di atasnya.\n````\n\n\n### *reverse*\n\nMetode [arr.reverse](mdn:js/Array/reverse) membalikkan urutan elemen di dalam `arr`.\n\nContohnya:\n\n```js run\nlet arr = [1, 2, 3, 4, 5];\narr.reverse();\n\nalert( arr ); // 5,4,3,2,1\n```\n\nMetode ini juga mengembalikan *array* `arr` setelah proses pembalikan.\n\n### *split* dan *join*\n\nIni adalah situasi dari dunia nyata. Kita menulis sebuah aplikasi olahpesan, dan orang tersebut memasukkan ke dalam daftar penerima yang dipisahkan oleh tanda koma, antara lain: `John, Pete, Mary`. Namun bagi kita *array* yang berisi nama akan jauh lebih apik ketimbang sebuah *string*. Jadi bagaiman cara mendapatkannya?\n\nMetode [str.split(delim)](mdn:js/String/split) melakukan tepat hal yang dijelaskan di atas. Metode ini memisahkan *string* ke dalam *array* dengan *delimiter* (pemisah) `delim`.\n\nDalam contoh berikut ini, kita memisahkan elemen dengan tanda koma yang diikuti oleh spasi:\n\n```js run\nlet names = 'Bilbo, Gandalf, Nazgul';\n\nlet arr = names.split(', ');\n\nfor (let name of arr) {\n alert( `A message to ${name}.` ); // Sebuah pesan untuk (serta nama-nama lainnya)\n}\n```\n\nMetode `split` memiliki argumen numerik oposional kedua -- sebuah batas pada panjang (*length*) *array*. Jika batasan itu diberikan, maka elemen ekstra (lebih dari batas panjang *array* yang diberikan) akan diabaikan. Dalam praktiknya, hal ini jarang digunakan:\n\n```js run\nlet arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);\n\nalert(arr); // Bilbo, Gandalf\n```\n\n````smart header=\"Pisah menjadi huruf\"\nPanggilan `split(s)` dengan `s` yang kosong akan memisahkan string menjadi array yang berisi huruf-huruf:\n\n```js run\nlet str = \"test\";\n\nalert( str.split('') ); // t,e,s,t\n```\n````\n\nPanggilan [arr.join(glue)](mdn:js/Array/join) melalukan pembalikan ke `split`. Panggilan ini membuat sebuah *string item-item* `arr` digabungkan oleh `glue` (lem) diantara *item* tersebut.\n\nContohnya:\n\n```js run\nlet arr = ['Bilbo', 'Gandalf', 'Nazgul'];\n\nlet str = arr.join(';'); // menempelkan/me-lem isi array menjadi sebuah string menggunakan ;\n\nalert( str ); // Bilbo;Gandalf;Nazgul\n```\n\n### *reduce*/reduceRight\n\nKetika kita perlu mengulang-ulang sebuah *array* -- kita dapat menggunakan `forEach`, `for` atau `for..of`.\n\nKetika kita perlu mengulang dan mengembalikan data setiap elemen -- kita menggunakan `map`.\n\nMetode [arr.reduce](mdn:js/Array/reduce) dan metode [arr.reduceRight](mdn:js/Array/reduceRight) juga termasuk ke dalam kelompok metode-metode tadi, tapi ada sedikit lebih rumit. Kedua metode ini digunakan untuk menghitung sebuah nilai tunggal berdasarkan *array*.\n\nSintaksnya yakni:\n\n```js\nlet value = arr.reduce(function(accumulator, item, index, array) {\n // ...\n}, [initial]);\n```\n\nFungsi di atas diterapkan pada semua elemen *array* satu sama lainnya dan \"melanjutkan\" hasil perhitungannya ke panggilan berikutnya.\n\nArgument-argumennya yakni:\n\n- `previousValue` -- adalah hasil dari dari pemanggilan fungsi sebelumnya, sama dengan `initial` pertama kalinya (jika `initial` diberikan).\n- `item` -- adalah *item array* yang sekarang.\n- `index` -- adalah posisi *item* tersebut.\n- `array` -- adalah *array*-nya.\n\nJika fungsi sudah diterapkan, masil dari panggilan fungsi sebelumnya dioper ke panggilan selanjutnya sebagai argumen pertama.\n\nMemang terdengar rumit, tapi tidak seperti yang kamu pikirkan tentang argumen pertama sebagai \"akumulator\" yang menyimpan dan menggabungkan jasil dari semua eksekusi sebelumnya. Serta pada akhirnya, itu menjadi hasil dari `reduce`.\n\nCara termudah untuk memahami metode ini adalah dengan melihat contohnya.\n\nDi sini kita mendapat jumlah dari sebuah *array* dalam satu baris:\n\n```js run\nlet arr = [1, 2, 3, 4, 5];\n\nlet result = arr.reduce((sum, current) => sum + current, 0);\n\nalert(result); // 15\n```\n\nFungsi yang dioper ke `reduce` hanya menggunakan 2 argumen, itu cukup khas.\n\nMari lihat rincian dari apa yang terjadi.\n\n1. Pada *run* pertama, `sum` adalah nilai `initial` (argumen terakhir dari `reduce`), sama dengan `0`, dan `current` adalah elemen pertama *array* tersebut, yang sama dengan `1`. Jadi hasil fungsi tersebut adalah `1`.\n2. Pada *run* ke-dua, `sum = 1`, kita tambahkan elemen kedua dari *array* (`2`) dan mengembalikan hasilnya.\n3. Pada *run* ke-tiga, `sum = 3` dan kita menambahkan satu elemen lagi, dan seterusnya...\n\nAlur perhitungannya:\n\n![](reduce.svg)\n\nATau dalam bentuk sebuah tabel, dimana setiap baris merepresentasikan sebuah panggilan fungsi pada elemen *array* selanjutnya:\n\n| |`sum`|`current`|result|\n|---|-----|---------|---------|\n|the first call|`0`|`1`|`1`|\n|the second call|`1`|`2`|`3`|\n|the third call|`3`|`3`|`6`|\n|the fourth call|`6`|`4`|`10`|\n|the fifth call|`10`|`5`|`15`|\n\nDi sini kita bisa dengan jelas melihat bagaimana hasil dari panggilan sebelumnya menjadi argumen pertama pada panggilan berikutnya.\n\nKita bisa juga mengjilangkan nilai awal (*initial*):\n\n```js run\nlet arr = [1, 2, 3, 4, 5];\n\n// menghilangkan nilai awal dari reduce (bukan 0)\nlet result = arr.reduce((sum, current) => sum + current);\n\nalert( result ); // 15\n```\n\nHasilnya sama. Itu karena tidak ada nilai awal, maka `reduce` mengambil elemen pertama *array* sebagai nilai awal dan memulai pengulangan dari elemen ke-dua.\n\nTabel perhitungan tersebut sama dengan yang di atas, tanpa baris pertama.\n\nAkan tetapi, penggunaan yang demikian membutuhkan perhatian lebih. Jika *array* kosong, maka panggilan `reduce` tanpa nilai awal akan menghasilkan error.\n\nBerikut ini contohnya:\n\n```js run\nlet arr = [];\n\n// Error: Reduce dari array kosong tanpa nilai awal\n// jika nilai awalnya ada, reduce akan mengembalikannya pada arr yang kosong.\narr.reduce((sum, current) => sum + current);\n```\n\n\nJadi sangat disarankan untuk selalu menspesifikasikan nilai awal.\n\nMetode [arr.reduceRight](mdn:js/Array/reduceRight) melaksanakan hal yang sama, tapi beroperasi dari kanan ke kiri.\n\n\n## Array.isArray\n\n*Array* tidak membentuk sebuah bahasa tipe sendiri. *Array* terbentuk berdasarkan objek.\n\nJadi `typeof` tidak membantu membedakan sebuah objek polos dari sebuah *array*:\n\n```js run\nalert(typeof {}); // objek\nalert(typeof []); // sama\n```\n\n...Tetapi *array* serung diguakan hingga ada metode khusus untuk hal ini: [Array.isArray(value)](mdn:js/Array/isArray). Metode ini mengembalikan `true` jika `value` adalah sebuah *array*, dan `false` jika sebaliknya.\n\n```js run\nalert(Array.isArray({})); // false\n\nalert(Array.isArray([])); // true\n```\n\n## Kebanyakan metode mendukung \"thisArg\"\n\nHamppir semua metode *array* yang memanggil fungsi -- seperti `find`, `filter`, `map`, dengan pengecualian `sort`, menerima paramater tambahan yakni `thisArg`.\n\nParameter itu tidak dijelaskan pada bab sebelumnya, karena jarang digunakan. Tetapi demi kelengkapan kita harus menutupi metodenya.\n\nBerikut ini adalah sintkas lengkap dari metode-metode tersebut:\n\n```js\narr.find(func, thisArg);\narr.filter(func, thisArg);\narr.map(func, thisArg);\n// ...\n// thisArg adalah argumen akhir yang oposional\n```\n\nNilai dari paramater `thisArg` menjadi `this` untuk `func`.\n\nContohnya, di sini kita menggunakan metode dengan objek `army` sebagai penyaringnya, dan `thisArg` mengoper konteksnya:\n\n```js run\nlet army = {\n minAge: 18,\n maxAge: 27,\n canJoin(user) {\n return user.age >= this.minAge && user.age < this.maxAge;\n }\n};\n\nlet users = [\n {age: 16},\n {age: 20},\n {age: 23},\n {age: 30}\n];\n\n*!*\n// cari user, dari army.canJoin yang megembalikan true\nlet soldiers = users.filter(army.canJoin, army);\n*/!*\n\nalert(soldiers.length); // 2\nalert(soldiers[0].age); // 20\nalert(soldiers[1].age); // 23\n```\n\nJika dalam contoh di atas kita menggunakan `users.filter(army.canJoin)`, maka `army.canJoin` akan bisa dipanggil sebagai fungsi yang berdisi sendiri, dengan `this=undefined`, itu smeua berujung pada error seketika.\n\nSebuah panggilan ke `users.filter(army.canJoin, army)` bisa diganti dengan `users.filter(user => army.canJoin(user))`, yang mana melakukan hal yang sama. Metode yang pertama (`users.filter(army.canJoin, army)`) lebih sering digunakan, karena sedikit lebih mudah dimengerti oleh banyak orang.\n\n## Ringkasan\n\n*Cheat sheet* tentang metode-metode *array*:\n\n- Untuk menambah/menghilangkan elemen:\n - `push(...items)` -- menambah *item* ke bagian akhir,\n - `pop()` -- mengekstrak sebuah *item* dari bagian akhir,\n - `shift()` -- mengekstrak sebuah *item* dari bagian awal,\n - `unshift(...items)` -- menambah *item* ke bagian awal.\n - `splice(pos, deleteCount, ...items)` -- pada indeks `pos` menghapus elemen `deleteCount` dam memasukkan `items`.\n - `slice(start, end)` -- membuat *array* baru, menyalin elemen dari posisi `start` hingga `end` (tidak inklusif) ke dalam *array* baru tersebut.\n - `concat(...items)` --mengembalikan sebuah *array* baru: menyalin semua anggota *array* yang sekarang dan menambahkan `items` ke dalamnya. Jika `items` adalah sebuah *array*, maka elemennya yang akan diambil.\n\n- Untuk mencari di antara elemen-elemen:\n - `indexOf/lastIndexOf(item, pos)` -- mencari `item` mulai dari posisi `pos`, mengembalikan indeksnya atau `-1` jika tidak ditemukan.\n - `includes(value)` -- mengembalikan `true` jika *array* memiliki `value`, jika tidak akan mengembalikan `false`.\n - `find/filter(func)` -- menyaring elemen dengan menggunakan fungsi, mengembalikan nilai awal/semua nilai yang membuat hasil *return*-nya menjadi `true`.\n - `findIndex` seperti `find`, namun mengembalikan indeks bukan nilai.\n\n- Untuk mengulang elemen:\n - `forEach(func)` -- memanggil `func` untuk setiap elemen, tidak mengembalikan apapun.\n\n- Untuk mengubah *array*:\n - `map(func)` -- membuat sebuah *array* dari hasil pemanggilan `func` untuk setiap elemen.\n - `sort(func)` -- mengurutkan *array* dalam-tempatnya, lalu mengembalikan hasilnya.\n - `reverse()` -- membalikkan *array* dalam-tempatnya, lalu mengembalikan hasilnya.\n - `split/join` -- mengonversi sebuah *string* menjadi *array* dan sebaliknya.\n - `reduce(func, initial)` -- menghitung sebuah nilai tunggal pada *array* dengan cara memanggil `func` untuk setiap elemen dan mengoper hasil tersebut di antara panggilan.\n\n- Sebagai tambahan:\n - `Array.isArray(arr)` memeriksa apakah `arr` merupakan *array* atau bukan.\n\nTolong diingat bahwa metode `sort`, `reverse` dan `splice` memodifikasi *array* itu sendiri.\n\nMetode-metode ini adalah yang paling sering digunakan, mencakupi 99% kasus penggunaan. Namun masih ada beberapa metode lainnya:\n\n- [arr.some(fn)](mdn:js/Array/some)/[arr.every(fn)](mdn:js/Array/every) memeriksa *array* terseebut.\n\n Fungsi `fn` dipanggil pada tiap elemen *array* yang serupa dengan `map`. Jika beberapa/semua hasilnya `true`, maka akan mengembalikan `true`, jika tidak maka akan mengembalikan `false`.\n\n Metode ini berperilaku seperti operator `||` dan `&&`: jika `fn` mengembalikan nilai yang sebenarnya,` arr.some () `segera mengembalikan` true` dan berhenti melakukan iterasi pada item lainnya; jika `fn` mengembalikan nilai yang salah,` arr.every () `segera mengembalikan` false` dan juga menghentikan iterasi pada item lainnya.\n\n Kita bisa menggunakan `every` untuk membandingkan array:\n ```js run\n function arraysEqual(arr1, arr2) {\n return arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);\n }\n\n alert( arraysEqual([1, 2], [1, 2])); // true\n ```\n\n- [arr.fill(value, start, end)](mdn:js/Array/fill) -- mengisi array dengan `nilai` berulang dari indeks` mulai` hingga `akhir`.\n\n- [arr.copyWithin(target, start, end)](mdn:js/Array/copyWithin) -- menyalin elemen dari posisi `start` hingga posisi `end` ke dalam *array itu sendiri*, pada posisi `target` (menumpuk/*overwrite* elemen yang ada).\n\n- [arr.flat(depth)](mdn:js/Array/flat)/[arr.flatMap(fn)](mdn:js/Array/flatMap) buat array baru dari array multidimensi.\n\nUntuk daftar lengkapnya, lihat [manual](mdn:js/Array).\n\nSejak pandangan pertama mungkin terlihat ada begitu banyak metode, cukup sulit untuk diingat. Namun sebenarnya hal itu jauh lebih mudah.\n\nLihat *cheat sheet* hanya untuk sekedar tahu semua metode tersebut. Lalu selesaikan *task* bab ini sebagai latihan, jadi kamu memiliki pengalaman mengenai metode *array*.\n\nSesudah itu kapan pun kamu perlu melakukan sesuatu dengan *array*, dan tidak tahu bagaimana caranya -- datanglah ke halaman ini, lihat *cheat sheet* dan temukan metode yang tepat. Contoh-contoh yang diberikan akan membantumu dalam penulisan sintaks yang benar. Setelah itu kamu akan secara otomatis mengingat metode-metode tersebut, tanpa usaha yang terlalu rumit.\n" }, { "path": "1-js/05-data-types/06-iterable/article.md", "content": "\n# Iterables / Bisa di iterasi\n\nObjek yang *bisa di iterasi* adalah sebuah generalisasi dari sebuah array. Konsep itu membolehkan kita untuk membuat objek apapun yang bisa digunakan didalam perulangan `for..of`.\n\nTentu saja, Array bisa di iterasi. Tapi disana terdapat objek bawaan (built-in objek) lainnya, yang tentu saja bisa di iterasi. Contoh string juga bisa di iterasi.\n\nJika sebuah objek secara teknis bukan sebuah array, tapi representasi dari sebuah koleksi (list, set) dari sesuatu, lalu `for..of` adalah sintaks yang bagus untuk melakukan perulangan didalamnya, Jadi ayo kita lihat bagaimana cara membuat itu bekerja.\n\n\n## Symbol.iterator\n\nKita bisa dengan mudah mendapatkan konsep dari iterasi dengan membuatnya sendiri.\n\nUntuk contoh, kita mempunyai sebuah objek yang bukanlah array, tapi cocok untuk `for..of`.\n\nSeperti objek `range` yang merepresentasikan sebuah interval dari angka:\n\n```js\nlet range = {\n from: 1,\n to: 5\n};\n\n// Kita ingin membuat for..of untuk bisa digunakan:\n// for(let num of range) ... num=1,2,3,4,5\n```\n\nUntuk bisa membuat `range` bisa diiterasi (dan membuat `for..of` bekerja) kita harus menambahkan sebuah metode kedalam objeknya bernama `Symbol.iterator` (Simbol built-in spesian yang hanya digunakan untuk hal itu).\n\n1. Ketika `for.of` dimulai, itu akan memanggil metodenya sekali (atau error jika tidak ditemukan). Metodenya haruslah mengembalikan sebuah *iterator* -- sebuah objek dengan metode `next`.\n2. Selanjutnya, `for..of` bekerja *hanya bila itu mengembalikan objek*.\n3. Ketika `for..of` menginginkan nilai selanjutnya, itu akan memanggil `next()` didalam objeknya.\n4. Hasil dari `next()` harus mempunyai form `{done: Boolean, value: any}`, dimana `done=true` berarti iterasinya telah selesai, sebaliknya `value` adalah nilai selanjutnya.\n\nIni adalah implementasi penuh untuk `range` dengan catatan:\n\n```js run\nlet range = {\n from: 1,\n to: 5\n};\n\n// 1. panggil for..of pertama kali untuk memanggil ini\nrange[Symbol.iterator] = function() {\n\n // ini akan mengembalikan objek iterator:\n // 2. Selanjutnya, for..of hanya bekerja dengan iterator ini, menanyakan nilai selanjutnya\n return {\n current: this.from,\n last: this.to, \n\n // 3. next() dipanggil untuk setiap iterasi oleh perulangan for..of\n next() {\n // 4. itu harus mengembalikan nilai sebagai sebuah objek {done:.., nilai:...}\n if (this.current <= this.last) {\n return { done: false, value: this.current++ };\n } else {\n return { done: true };\n }\n }\n };\n};\n\n// sekarang ini bekerja!\nfor (let num of range) {\n alert(num); // 1, lalu 2, 3, 4, 5\n}\n```\n\nPerhatikan fitur utama dari *iterables*: pemisahan perhatian.\n\n- `range` sendiri tidak memiliki metode `next()`.\n- Malah, objek lainnya, yang dipanggil \"iterator\" dibuat dengan memanggil ke `range[Symbol.iterator]()`, dan `next()` miliknya menghasilkan nilai untuk diiterasi.\n\nJadi, objek iterator berbeda dari objek yang diiterasi.\n\nSecara teknis, kita mungkin menyatukannya dan menggunakan `range` nya sendiri sebagai iterator untuk membuat kode lebih simpel.\n\nSeperti ini:\n\n```js run\nlet range = {\n from: 1,\n to: 5,\n\n [Symbol.iterator]() {\n this.current = this.from;\n return this;\n },\n\n next() {\n if (this.current <= this.to) {\n return { done: false, value: this.current++ };\n } else {\n return { done: true };\n }\n }\n};\n\nfor (let num of range) {\n alert(num); // 1, lalu 2, 3, 4, 5\n}\n```\n\nSekarang `range[Symbol.iterator]()` mengembalikan objek `range`nya sendiri: itu membutuhkan metode `next()` dan mengingat progress iterasi saat ini didalam `this.current`. Lebih pendek? Ya. Dan terkadang bagus juga.\n\nKekurangannya adalah sekarang menjadi mustahil untuk memiliki dua perulangan `for..of` yang berjalan didalam objeknya secara bersamaan: mereka akan membagi bagian-bagian iterasi, karena hanya terdapat satu iterator -- objeknya sendiri. Tapi menggunakan dua for-of adalah hal yang jarang terjadi, bahkan didalam asinkron sekalipun.\n\n```smart header=\"Iterator tak terbatas/infinite iterator\"\nInterator tak terbatas bisa dilakukan. Contoh, `range` menjadi tak terbatas terhadap `range.to = Infinity`. Atau kita bisa membuat objek yang bisa di iterasi dan menghasilkan rentetan tak terbatas dari angka yang acak. Juga bisa berguna.\n\nTidak ada batasan didalam `next`, itu bisa mengembalikan semakin banyak nilai, itu adalah hal yang normal.\n\nTentu saja, perulangan `for..of` didalam iterasi seperti itu takan ada habisnya. Tapi kita selalu bisa menghentikannya dengan menggunakan `break`.\n```\n\n\n## String bisa di iterasi\n\nArray dan string adalah dua hal yang paling banyak menggunakan iterasi.\n\nUntuk string, perulangan `for..of` akan mengiterasi karakternya:\n\n```js run\nfor (let char of \"test\") {\n // berjalan 4 kali: sekali tiap karakter\n alert( char ); // t, lalu e, lalu s, lalu t\n}\n```\n\nDan itu akan berjalan lancar dengan karakter pengganti (surrogate pairs)!\n\n```js run\nlet str = '𝒳😂';\nfor (let char of str) {\n alert( char ); // 𝒳, dan lalu 😂\n}\n```\n\n## Memanggil sebuah iterator secara jelas\n\nUntuk pemahaman lebih dalam, kita lihat bagaimana untuk menggunakan sebuah iterator secara eksplisit.\n\nKita akan mengiterasi didalam sebuah string dengan cara yang sama seperti `for..of`, tapi dengan pemanggilan yang langsung. Kode ini membuat sebuah iterator string dan mendapatkan nilai dari itu secara \"manual\":\n\n```js run\nlet str = \"Hello\";\n\n// melakukan hal yang sama dengan\n// for (let char of str) alert(char);\n\n*!*\nlet iterator = str[Symbol.iterator]();\n*/!*\n\nwhile (true) {\n let result = iterator.next();\n if (result.done) break;\n alert(result.value); // karakter keluar satu demi satu\n}\n```\n\nHal itu sangat jarang dibutuhkan, tapi akan memberikan kita kontrol lebih terhadap prosesnya daripada `for..of`. Contoh, kita bisa membagi proses iterasi: iterasi sedikit, lalu berhenti, lakukan hal lain, dan lalu lanjutkan nanti.\n\n## Bisa di iterasi dan seperti array [#array-like]\n\nTerdapat dua istilah resmi yang terlihat mirip, akan tetapi sangat berbeda. Perhatikan mereka baik-baik dan pahamilah untuk terhindar dari kebingungan.\n\n- *Iterables/bisa di iterasi* adalah objek yang mengimplementasikan metode `Symbol.iterator`, seperti yang dideskripsikan diatas.\n- *Array-likes/Seperti array* adalah objek yang memiliki indeks dan `length`, jadi mereka terlihat seperti array.\n\nketika kita menggunakan javascript untuk melakukan prakter didalam browser atau lingkungan pengembangan lainnya, kita mungkin bertemu objek yang bisa diiterasi atau yang seperti array, atau keduanya.\n\nContoh, string adalah keduanya, bisa diiterasi (`for..of` dapat bekerja) dan seperti array(mempunyai indeks angka dan `length`(panjang)).\n\nAkan tetapi bisa diiterasi mungkin bukanlah array. Dan sebaliknya sebuah array mungkin tidak bisa diiterasi.\n\nContoh, `range` di contoh diatas bisa diiterasi, tapi tidak seperti array, karena itu tidak memiliki properti indeks dan `length`.\n\nDan disini objek yang seperti array, tapi tidak bisa diiterasi:\n\n```js run\nlet arrayLike = { // punya indeks dan panjang(length) => seperti array\n 0: \"Hello\",\n 1: \"World\",\n length: 2\n};\n\n*!*\n// Error (no Symbol.iterator)\nfor (let item of arrayLike) {}\n*/!*\n```\n\nContoh diatas bisa diiterasi dan seperti array yang biasanya *bukan array*, mereka tidak punya `push`, `pop`, dll. Hal seperti itu bisa merepotkan jika kita memiliki sebuah objek dan ingin bekerja dengannya sama seperti sebuah array. Misalnya, kita ingin bekerja dengan `range` menggunakan metode array. Bagaimana cara mencapai hal itu?\n\n## Array.from\n\nTerdapat sebuah metode universal [Array.from](mdn:js/Array/from) yang menerima hal yang bisa diiterasi atau nilai yang seperti array dan membuat `Array` \"sungguhan darinya. Lalu kita bisa memanggil metode array didalamnya.\n\nContoh:\n\n```js run\nlet arrayLike = {\n 0: \"Hello\",\n 1: \"World\",\n length: 2\n};\n\n*!*\nlet arr = Array.from(arrayLike); // (*)\n*/!*\nalert(arr.pop()); // World (metode bekerja)\n```\n\n`Array.from` pada baris `(*)` menerima objeknya, memeriksanya apakah itu sesuatu yang bisa diiterasi atau seperti array, lalu membuat array bari dan menyalin seluruh item kedalamnya.\n\nHal yang serupa terjadi untuk sesuatu yang bisa diiterasi:\n\n```js\n// asumsikan bahwa range diambil dari contoh diatas\nlet arr = Array.from(range);\nalert(arr); // 1,2,3,4,5 (konversi array toString bekerja)\n```\n\nSintaks penuh dari `Array.from` juga memperbolehkan kita untuk menyediakan fungsi \"mapping\" opsional:\n```js\nArray.from(obj[, mapFn, thisArg])\n```\n\nArgumen kedua yang opsional `mapFn` bisa saja sebuah fungsi yang akan digunakan untuk setiap elemen sebelum ditambahkan kedalam array, dan `thisArg` memperbolehkan kita untuk menggunakan `this` didalamnya.\n\nContoh:\n\n```js\n// asumsikan bahwa range diambil dari contoh diatas\n\n// kuadratkan setiap angka\nlet arr = Array.from(range, num => num * num);\n\nalert(arr); // 1,4,9,16,25\n```\n\nDisini kita gunakan `Array.from` untuk mengubah string menjadi array dari karakter-karakter:\n\n```js run\nlet str = '𝒳😂';\n\n// pisahkan str menjadi array dari karakter-karakter\nlet chars = Array.from(str);\n\nalert(chars[0]); // 𝒳\nalert(chars[1]); // 😂\nalert(chars.length); // 2\n```\n\nTidak seperti `str.split`, itu bergantung pada sifat bisa diiterasi dari string dan juga, sama seperti `for..of`, yang bekerja dengan benar bahkan dengan karakter pengganti (surrogate pairs).\n\n\nSecara teknis disini itu melakukan hal yang sama seperti:\n\n```js run\nlet str = '𝒳😂';\n\nlet chars = []; // Array.from secara internal melakukan perulangan yang sama\nfor (let char of str) {\n chars.push(char);\n}\n\nalert(chars);\n```\n\n...Tapi ini lebih pendek. \n\nKita bahkan bisa membangun `slice` pengganti didalamnya:\n\n```js run\nfunction slice(str, start, end) {\n return Array.from(str).slice(start, end).join('');\n}\n\nlet str = '𝒳😂𩷶';\n\nalert( slice(str, 1, 3) ); // 😂𩷶\n\n// metode natif tidak mendukung karakter pengganti\nalert( str.slice(1, 3) ); // tidak berguna (dua bagian dari karakter pengganti yang berbeda)\n```\n\n\n## Ringkasan\n\nObjek yang bisa digunakan didalam `for..if` dipanggil dengan *iterable*.\n\n- Secara teknis, iterables harus mengimplementasi nama metode `Symbol.iterator`.\n - Hasil dari `obj[Symbol.iterator]` dipanggil dengan sebuah *iterator*. Itu menangani proses iterasi lebih jauh.\n - Sebuah iterator harus mempunyai nama metode `next()` yang mengembalikan sebuah objek `{done: Boolean, value: any}`, disini `done:true` menandakan akhir dari proses iterasi, sebaliknya `value` adalah nilai selanjutnya.\n- Metode `Symbol.iterator` dipanggil secara otomatis oleh `for..of`, tapi kita bisa melakukannya secara langsung.\n- Iterables bawaan seperti string atau array, juga mengimplementasikan `Symbol.iterator`.\n- Iterator string tahu tentang karakter pengganti (surrogate pairs).\n\n\nObjek yang mempunyai properti indeks dan `length` dipanggil dengan *seperti-array/array-like*. Objek seperti itu mungkin mempunyai properti dan metode lainnya, tapi tidak memiliki metode bawaan dari array.\n\nJika kita melihat kedalam spesifikasinya -- kita akan melihat kebanyakan metode bawaan yang mengasumsikan bahwa mereka bekerja dengan iterables atau seperti-array daripada dengan array \"sungguhan\", karena hal itu lebih abstrak.\n\n`Array.from(obj[, mapFn, thisArg])` membuak `Array` sungguhan dari sebuah iterable atau seperti-array `obj`, dan lalu kita bisa menggunakan metode array didalamnya. Argumen opsional `mapFn` dan `thisArg` memperbolehan kita untuk menerapkan sebuah fungsi kedalam setiap item.\n" }, { "path": "1-js/05-data-types/07-map-set/01-array-unique-map/_js.view/solution.js", "content": "function unique(arr) {\n return Array.from(new Set(arr));\n}\n" }, { "path": "1-js/05-data-types/07-map-set/01-array-unique-map/_js.view/test.js", "content": "describe(\"unique\", function() {\n it(\"removes non-unique elements\", function() {\n let strings = [\"Hare\", \"Krishna\", \"Hare\", \"Krishna\",\n \"Krishna\", \"Krishna\", \"Hare\", \"Hare\", \":-O\"\n ];\n\n assert.deepEqual(unique(strings), [\"Hare\", \"Krishna\", \":-O\"]);\n });\n\n it(\"does not change the source array\", function() {\n let strings = [\"Krishna\", \"Krishna\", \"Hare\", \"Hare\"];\n unique(strings);\n assert.deepEqual(strings, [\"Krishna\", \"Krishna\", \"Hare\", \"Hare\"]);\n });\n});\n" }, { "path": "1-js/05-data-types/07-map-set/01-array-unique-map/solution.md", "content": "" }, { "path": "1-js/05-data-types/07-map-set/01-array-unique-map/task.md", "content": "nilai penting: 5\n\n---\n\n# Memfilter item array yang unik\n\nAnggaplah `arr` sebagai sebuah array.\n\nCiptakanlah fungsi `unique(arr)` yang harus mengembalikan array yang berisi nilai-nilai unik dari `arr`.\n\nSebagai contoh:\n\n```js\nfunction unique(arr) {\n /* kodemu */\n}\n\nlet values = [\"Hare\", \"Krishna\", \"Hare\", \"Krishna\",\n \"Krishna\", \"Krishna\", \"Hare\", \"Hare\", \":-O\"\n];\n\nalert( unique(values) ); // Hare, Krishna, :-O\n```\n\nP.S. Disini string dipakai sebagai contoh, tetapi nilai dengan tipe apa saja bisa dipakai.\n\nP.P.S. Pakailah `Set` untuk menyimpan nilai-nilai yang unik.\n" }, { "path": "1-js/05-data-types/07-map-set/02-filter-anagrams/_js.view/solution.js", "content": "\nfunction aclean(arr) {\n let map = new Map();\n\n for(let word of arr) {\n let sorted = word.toLowerCase().split(\"\").sort().join(\"\");\n map.set(sorted, word);\n }\n\n return Array.from(map.values());\n}" }, { "path": "1-js/05-data-types/07-map-set/02-filter-anagrams/_js.view/test.js", "content": "function intersection(arr1, arr2) {\n return arr1.filter(item => arr2.includes(item));\n}\n\ndescribe(\"aclean\", function() {\n\n it(\"returns exactly 1 word from each anagram set\", function() {\n let arr = [\"nap\", \"teachers\", \"cheaters\", \"PAN\", \"ear\", \"era\", \"hectares\"];\n\n let result = aclean(arr);\n assert.equal(result.length, 3);\n\n assert.equal(intersection(result, [\"nap\", \"PAN\"]).length, 1);\n assert.equal(intersection(result, [\"teachers\", \"cheaters\", \"hectares\"]).length, 1);\n assert.equal(intersection(result, [\"ear\", \"era\"]).length, 1);\n\n });\n\n it(\"is case-insensitive\", function() {\n let arr = [\"era\", \"EAR\"];\n assert.equal(aclean(arr).length, 1);\n });\n\n});" }, { "path": "1-js/05-data-types/07-map-set/02-filter-anagrams/solution.md", "content": "Untuk menemukan semua anagram, mari kita pecahkan setiap kata menjadi huruf-huruf dan urutkanlah. Ketika huruf-huruf terurut, semua anagram adalah sama. \n\nSebagai contoh:\n\n```\nnap, pan -> anp\near, era, are -> aer\ncheaters, hectares, teachers -> aceehrst\n...\n```\n\nKita akan menggunakan varian yang diurutkan berdasarkan huruf sebagai kunci map untuk menyimpan hanya satu nilai untuk setiap kunci:\n\n```js run\nfunction aclean(arr) {\n let map = new Map();\n\n for (let word of arr) {\n // split the word by letters, sort them and join back\n*!*\n let sorted = word.toLowerCase().split('').sort().join(''); // (*)\n*/!*\n map.set(sorted, word);\n }\n\n return Array.from(map.values());\n}\n\nlet arr = [\"nap\", \"teachers\", \"cheaters\", \"PAN\", \"ear\", \"era\", \"hectares\"];\n\nalert( aclean(arr) );\n```\n\nPenyortiran huruf dilakukan oleh deretan panggilan di baris `(*)`.\n\nUntuk kenyamanan marilah kita pecahkan menjadi beberapa baris:\n\n```js\nlet sorted = word // PAN\n .toLowerCase() // pan\n .split('') // ['p','a','n']\n .sort() // ['a','n','p']\n .join(''); // anp\n```\n\nDua kata berbeda `'PAN'` dan `'nap'` mendapatkan form urutan huruf yang sama `'anp'`.\n\nBaris berikutnya menempatkan kata tersebut ke dalam map:\n\n```js\nmap.set(sorted, word);\n```\n\nJika kita pernah bertemu kata dengan urutan huruf yang sama lagi, maka kata itu akan menggantikan nilai sebelumnya dengan kunci yang sama di dalam map. Maka dari itu kita akan selalu mempunyai maksimum satu kata untuk setiap form huruf.\n\nAkhirnya `Array.from(map.values())` mengambil iterable atas nilai-nilai map (kita tidak memperlukan kunci-kunci dalam hasilnya) dan mengembalikan array dengan isi tersebut.\n\nDisini kita juga bisa menggunakan objek biasa daripada `Map`, karena kunci adalah string.\n\nSolusinya bisa terlihat seperti ini:\n\n```js run demo\nfunction aclean(arr) {\n let obj = {};\n\n for (let i = 0; i < arr.length; i++) {\n let sorted = arr[i].toLowerCase().split(\"\").sort().join(\"\");\n obj[sorted] = arr[i];\n }\n\n return Object.values(obj);\n}\n\nlet arr = [\"nap\", \"teachers\", \"cheaters\", \"PAN\", \"ear\", \"era\", \"hectares\"];\n\nalert( aclean(arr) );\n```\n" }, { "path": "1-js/05-data-types/07-map-set/02-filter-anagrams/task.md", "content": "nilai penting: 4\n\n---\n\n# Filter anagram\n\n[Anagram](https://en.wikipedia.org/wiki/Anagram) adalah kata-kata yang mempunyai jumlah huruf-huruf yang sama, tetapi dengan susunan yang berbeda. \n\nSebagai contoh:\n\n```\nnap - pan\near - are - era\ncheaters - hectares - teachers\n```\n\nCiptakanlah fungsi `aclean(arr)` yang mengembalikan array yang bersih dari anagram.\n\nSebagai contoh:\n\n```js\nlet arr = [\"nap\", \"teachers\", \"cheaters\", \"PAN\", \"ear\", \"era\", \"hectares\"];\n\nalert( aclean(arr) ); // \"nap,teachers,ear\" or \"PAN,cheaters,era\"\n```\n\nDari setiap grup anagram hanya harus tersisa satu kata, boleh yang mana saja.\n" }, { "path": "1-js/05-data-types/07-map-set/03-iterable-keys/solution.md", "content": "\nItu karena `map.keys()` mengembalikan iterable, tetapi bukan sebuah array.\n\nKita bisa mengubahnya ke sebuah array menggunakan `Array.from`:\n\n```js run\nlet map = new Map();\n\nmap.set(\"name\", \"John\");\n\n*!*\nlet keys = Array.from(map.keys());\n*/!*\n\nkeys.push(\"more\");\n\nalert(keys); // name, more\n```\n" }, { "path": "1-js/05-data-types/07-map-set/03-iterable-keys/task.md", "content": "nilai penting: 5\n\n---\n\n# Kunci-kunci iterable\n\nKami ingin mendapatkan array daripada `map.keys()` dalam satu variabel lalu mengaplikasikan metode yang array spesifik kepadanya, contoh `.push`.\n\nTapi itu tidak berhasil:\n\n```js run\nlet map = new Map();\n\nmap.set(\"name\", \"John\");\n\nlet keys = map.keys();\n\n*!*\n// Error: keys.push is not a function\nkeys.push(\"more\");\n*/!*\n```\n\nMengapa? Bagaimana kita bisa membenarkan kode ini untuk membuat `keys.push` berhasil?\n" }, { "path": "1-js/05-data-types/07-map-set/article.md", "content": "\n# Map dan Set\n\nSekarang kita telah membelajari struktur data compleks berikut:\n\n- Objek untuk menyimpan koleksi kunci.\n- Array untuk menyimpan koleksi berurut.\n\nTapi itu tidak cukup dalam kehidupan nyata. Itu sebabnya `Map` dan` Set` juga ada.\n\n## Map\n\n[Map](mdn:js/Map) adalah kumpulan item data yang berkunci, seperti `Object`. Tetapi perbedaan utama adalah `Map` membolehkan kunci jenis apa pun.\n\nMetode dan properti:\n\n- `new Map()` -- menciptakan map.\n- `map.set(key, value)` -- menyimpan nilai dengan kunci.\n- `map.get(key)` -- mengembalikan nilai dengan kunci, `undefined` jika` key` tidak ada di map.\n- `map.has(key)` -- mengembalikan `true` jika` key` ada, `false` sebaliknya.\n- `map.delete(key)` -- menghapus nilai dengan kunci.\n- `map.clear()` -- menghapus semua isi dari map.\n- `map.size` -- mengembalikan jumlah elemen saat ini.\n\nMisalnya:\n\n```js run\nlet map = new Map();\n\nmap.set('1', 'str1'); // kunci string\nmap.set(1, 'num1'); // kunci nomor\nmap.set(true, 'bool1'); // kunci boolean\n\n//ingat Object biasa? ia akan mengkonversi kunci menjadi string\n//Map menyimpan tipenya, jadi kedua berikut tidaklah sama:\nalert( map.get(1) ); // 'num1'\nalert( map.get('1') ); // 'str1'\n\nalert( map.size ); // 3\n```\n\nSeperti yang dapat kita lihat, lain dari objek, kunci tidak dikonversi ke string. Jenis kunci apa pun dimungkinkan.\n\n```smart header=\"`map[key]` bukan cara yang baik untuk menggunakan `Map`\"\nMeski `map[key]` juga bekerja, misal kita bisa mengeset `map[key] = 2`, ini memperlakukan `map` sebagai objek JavaScript biasa, berimplikasi pada semua limitasi yang sesuai (tak ada kunci objek dan lain-lain).\n\nJadi kita sebaiknya memakai metode `map`: `set`, `get` dan seterusnya.\n```\n\n**Map juga dapat menggunakan objek sebagai kunci.**\n\nMisalnya:\n\n```js run\nlet john = { name: \"John\" };\n\n// Untuk setiap pengguna, mari kita simpan jumlah kunjungan mereka\nlet visitsCountMap = new Map();\n\n// john adalah kunci bagi mapnya\nvisitsCountMap.set(john, 123);\n\nalert( visitsCountMap.get(john) ); // 123\n```\n\nMenggunakan objek sebagai kunci adalah salah satu fitur `Map` yang paling terkenal dan penting. Untuk kunci string, `Object` bisa dipakai, tetapi tidak untuk kunci objek.\n\nMari kita coba:\n\n```js run\nlet john = { name: \"John\" };\nlet ben = { name: \"Ben\" };\n\nlet visitsCountObj = {}; // cobalah memakai objek\n\nvisitsCountObj[ben] = 234; // cobalah memakai ben sebagai kunci\nvisitsCountObj[john] = 123; // cobalah memakai john sebagai kunci\n\n*!*\n// Inilah yang tertulis!\nalert( visitsCountObj[\"[object Object]\"] ); // 123\n*/!*\n```\n\nKarena `visitsCountObj` adalah sebuah objek, ia mengubah semua kunci, seperti `john` menjadi string, jadi kita mendapatkan kunci string `\"[object Object]\"`. Jelas bukan yang kita inginkan.\n\n```smart header=\"Cara `Map` membandingkan kunci\"\nUntuk mengetes kesamaan kunci, `Map` menggunakan algoritma [SameValueZero](https://tc39.github.io/ecma262/#sec-samevaluezero). Ini kira-kira sama dengan kesetaraan ketat `===`, tetapi perbedaannya adalah `NaN` dianggap sama dengan `NaN`. Jadi `NaN` bisa digunakan sebagai kunci juga.\n\nAlgoritma ini tidak dapat diubah atau dikustomisasi.\n```\n\n````smart header=\"Chaining\"\nSetiap panggilan `map.set` mengembalikan map itu sendiri, sehingga kami dapat \"mem-chain\" panggilan-panggilan:\n\n```js\nmap.set('1', 'str1')\n .set(1, 'num1')\n .set(true, 'bool1');\n```\n````\n\n\n## Iterasi Atas Map\n\nUntuk looping atas `map`, ada 3 method:\n\n- `map.keys()` -- mengembalikan iterable untuk kunci,\n- `map.values()` -- mengembalikan iterable untuk nilai,\n- `map.entries()` -- mengembalikan iterable untuk entri `[key, value]`, ini digunakan dengan standar di `for..of`.\n\nMisalnya:\n\n```js run\nlet recipeMap = new Map([\n ['cucumber', 500],\n ['tomatoes', 350],\n ['onion', 50]\n]);\n\n// iterasi atas kunci (vegetables)\nfor (let vegetable of recipeMap.keys()) {\n alert(vegetable); // cucumber, tomatoes, onion\n}\n\n// iterasi atas nilai (amounts)\nfor (let amount of recipeMap.values()) {\n alert(amount); // 500, 350, 50\n}\n\n// iterasi atas entri-entri [key, value] \nfor (let entry of recipeMap) { // the same as of recipeMap.entries()\n alert(entry); // cucumber,500 (and so on)\n}\n```\n\n```smart header=\"Urutan insersi digunakan\"\nIterasi berjalan dalam urutan yang sama dengan nilai yang dimasukkan. `Map` mempertahankan urutan ini, tidak seperti `Object` biasa.\n```\n\nSelain itu, `Map` memilike method `forEach`, mirip dengan `Array`:\n\n```js\n// menjalankan fungsi untuk setiap pasangan (kunci, nilai)\nrecipeMap.forEach( (value, key, map) => {\n alert(`${key}: ${value}`); // cucumber: 500 etc\n});\n```\n\n## Object.entries: Map dari Object\n\nKetika `Map` diciptakan, kita bisa memberi array (atau iterabel lainnya) pasangan kunci/nilai untuk inisialisasi, seperti ini:\n\n```js run\n// array berisi pasangan [kunci, nilai]\nlet map = new Map([\n ['1', 'str1'],\n [1, 'num1'],\n [true, 'bool1']\n]);\n\nalert( map.get('1') ); // str1\n```\n\nJika kita memiliki objek biasa, dan kita mau menciptakan sebuah `Map` darinya, kita bisa menggunakan method built-in [Object.entries(obj)](mdn:js/Object/entries) yang mengembalikan array daripada pasangan-pasangan kunci/nilai untuk satu objek yang berformat persis sama.\n\nJadi kita bisa menciptakan map dari objek seperti ini:\n\n```js run\nlet obj = {\n name: \"John\",\n age: 30\n};\n\n*!*\nlet map = new Map(Object.entries(obj));\n*/!*\n\nalert( map.get('name') ); // John\n```\n\nDisini, `Object.entries` mengembalikan array daripada pasangan-pasangan kunci/nilai: `[ [\"name\",\"John\"], [\"age\", 30] ]`. Itu yang `Map` perlukan.\n\n\n## Object.fromEntries: Object dari Map\n\nKita baru saja menyaksikan cara menciptakan `Map` dari objek biasa dengan `Object.entries(obj)`.\n\nAda juga method `Object.fromEntries` yang melakukan kebalikkannya: jika diberi array berisi pasangan `[kunci, nilai]`, ia menciptakan objek darinya:\n\n```js run\nlet prices = Object.fromEntries([\n ['banana', 1],\n ['orange', 2],\n ['meat', 4]\n]);\n\n// now prices = { banana: 1, orange: 2, meat: 4 }\n\nalert(prices.orange); // 2\n```\n\nKita bisa menggunakan `Object.fromEntries` untuk mendapatkan objek polos dari `Map`.\n\nContoh: Kita menyimpan data di dalam `Map`, tapi kita perlu mengirimnya ke kode pihak ketiga yang mengharapkan objek biasa.\n\nKita mulai:\n\n```js run\nlet map = new Map();\nmap.set('banana', 1);\nmap.set('orange', 2);\nmap.set('meat', 4);\n\n*!*\nlet obj = Object.fromEntries(map.entries()); // ciptakan objek biasa (*)\n*/!*\n\n// selesai!\n// obj = { banana: 1, orange: 2, meat: 4 }\n\nalert(obj.orange); // 2\n```\n\nPemanggilan `map.entries()` mengembalikan sebuah iterable dari pasangan key/value, persis didalam format dari `Object.fromEntries`.\n\nKita juga bisa membuat barisan `(*)` lebih pendek:\n```js\nlet obj = Object.fromEntries(map); // hilangkan .entries()\n```\n\nItu sama, karena `Object.fromEntries` mengharapkan objek iterabel sebagai argumen. Tidak harus sesuatu array. Dan iterasi standar untuk `map` mengembalikan pasangan kunci/nilai yang sama dengan `map.entries()`. Jadi kita mendapatkan objek biasa dengan kunci/nilai yang sama dengan `map`.\n\n## Set\n\n`Set` adalah tipe koleksi spesial - \"set nilai-nilai\" (tanpa kunci), dimana setiap nilai hanya dapat terjadi sekali.\n\nMethod utamanya adalah:\n\n- `new Set(iterable)` -- menciptakan set, dan jika objek `iterable` disediakan (biasanya array), menyalin nilai darinya ke set.\n- `set.add(value)` -- menambahkan nilai, mengembalikan set itu sendiri.\n- `set.delete(value)` -- menghapus nilai, mengembalikan `true` jika `value` ada pada saat panggilan berlangsung, jika tidak `false`.\n- `set.has(value)` -- mengembalikan `true` jika nilai ada di set, jika tidak `false`.\n- `set.clear()` -- menghapus semuanya dari set.\n- `set.size` -- adalah hitungan elemen.\n\nFitur utamanya adalah panggilan berulang `set.add(value)` dengan nilai yang sama tidak melakukan apa-apa. Itulah alasan mengapa setiap nilai hanya muncul dalam `Set` sekali.\n\nMisalnya, ada pengunjung yang datang, dan kami ingin mengingat semua orang. Tetapi kunjungan berulang tidak harus menyebabkan duplikasi. Pengunjung harus \"dihitung\" hanya sekali.\n\n`Set` adalah hal yang tepat untuk itu:\n\n```js run\nlet set = new Set();\n\nlet john = { name: \"John\" };\nlet pete = { name: \"Pete\" };\nlet mary = { name: \"Mary\" };\n\n// kunjungan-kunjungan, beberapa pengguna datang berkali-kali\nset.add(john);\nset.add(pete);\nset.add(mary);\nset.add(john);\nset.add(mary);\n\n// set hanya menyimpan nilai-nilai unik\nalert( set.size ); // 3\n\nfor (let user of set) {\n alert(user.name); // John (lalu Pete dan Mary)\n}\n```\n\nAlternatif untuk `Set` dapat berupa array pengguna, dan kode untuk memeriksa duplikat pada setiap insersi menggunakan [arr.find](mdn:js/Array/find). Tetapi kinerjanya akan jauh lebih buruk, karena metode ini menjalani seluruh array memeriksa setiap elemen. `Set` jauh lebih baik dioptimalkan secara internal untuk pemeriksaan keunikan.\n\n## Iteration atas Set\n\nKita bisa meng-loop atas set dengan `for..of` atau menggunakan `forEach`:\n\n```js run\nlet set = new Set([\"oranges\", \"apples\", \"bananas\"]);\n\nfor (let value of set) alert(value);\n\n// sama untuk forEach:\nset.forEach((value, valueAgain, set) => {\n alert(value);\n});\n```\n\nIngat keanehannya. Fungsi callback yang dilewatkan dalam `forEach` memiliki 3 argumen: satu `value`, kemudian *nilai yang sama* `valueAgain`, dan kemudian objek target. Memang, nilai yang sama muncul dalam argumen dua kali.\n\nItu untuk kompatibilitas dengan `Map` di mana callback yang dilewati `forEach` memiliki tiga argumen. Terlihat agak aneh, memang. Tetapi dapat membantu mengganti `Map` dengan` Set` dalam kasus-kasus tertentu dengan mudah, dan sebaliknya.\n\nMetode yang sama yang dimiliki `Map` untuk iterator juga didukung:\n\n- `set.keys()` -- mengembalikan objek iterable untuk nilai,\n- `set.values()` -- sama dengan `set.keys()`, untuk kompatibilitas dengan `Map`,\n- `set.entries()` -- mengembalikan objek iterable untuk entri `[nilai, nilai]`, ada untuk kompatibilitas dengan `Map`.\n\n## Ringkasan\n\n`Map` -- adalah kumpulan nilai-nilai berkunci.\n\nMetode dan properti:\n\n- `new Map([iterable])` -- membuat map, dengan `iterable` opsional (mis. array) dari pasangan `[key, value]` untuk inisialisasi.\n- `map.set(key, value)` -- menyimpan nilai dengan kunci.\n- `map.get(key)` -- mengembalikan nilai dengan kunci, `undefined` jika `key` tidak ada di map.\n- `map.has(key)` -- mengembalikan `true` jika `key` ada, `false` sebaliknya.\n- `map.delete(key)` -- menghapus nilai dengan kunci.\n- `map.clear()` -- menghapus semuanya dari peta.\n- `map.size` -- mengembalikan jumlah elemen saat ini.\n\nPerbedaan dari `Object` biasa:\n\n- Kunci apa saja, objek bisa dijadikan kunci.\n- Metode-metode tambahan untuk kenyamanan, properti `size`.\n\n`Set` -- adalah kumpulan nilai-nilai unik.\n\nMetode dan properti:\n\n- `new Set([iterable])` -- membuat set, dengan nilai opsional `iterable` (mis. array) untuk inisialisasi.\n- `set.add(value)` -- menambahkan nilai (tidak melakukan apa-apa jika `value` ada), mengembalikan set itu sendiri.\n- `set.delete(value)` -- menghapus nilai, mengembalikan `true` jika `value` ada pada saat panggilan berlangsung, jika tidak `false`.\n- `set.has(value)` -- mengembalikan `true` jika nilai ada di set, jika tidak `false`.\n- `set.clear()` -- menghapus semuanya dari set.\n- `set.size` -- adalah hitungan elemen.\n\nIterasi atas `Map` dan` Set` selalu dalam urutan insersi, jadi kami tidak dapat mengatakan bahwa koleksi ini tidak berurut, tetapi kami tidak dapat menyusun ulang elemen atau secara langsung mendapatkan elemen dengan nomornya.\n" }, { "path": "1-js/05-data-types/08-weakmap-weakset/01-recipients-read/solution.md", "content": "Ayo kita simpan pesan yang dibaca didalam `WeakSet`:\n\n```js run\nlet messages = [\n {text: \"Hello\", from: \"John\"},\n {text: \"How goes?\", from: \"John\"},\n {text: \"See you soon\", from: \"Alice\"}\n];\n\nlet readMessages = new WeakSet();\n\n// dua pesan telah dibaca\nreadMessages.add(messages[0]);\nreadMessages.add(messages[1]);\n// readMessages mempunyai 2 elemen\n\n// ...sekarang baca pesan pertama lagi!\nreadMessages.add(messages[0]);\n// readMessages masih memiliki 2 elemen yang unik\n\n// jawaban: apakah message[0] telah dibaca?\nalert(\"Read message 0: \" + readMessages.has(messages[0])); // true\n\nmessages.shift();\n// sekarang readMessages mempunyai 1 elemen (secara teknis memory mungkin akan dibersihkan nanti)\n```\n\n`WeakSet` membolehkan untuk menyimpan satu set dari messages dan dengan mudah memeriksa apakah sebuah pesan ada didalamnya.\n\nItu akan membersihkan dirinya sendiri secara otomatis. Timbal baliknya adalah kita tidak bisa melakukan iterasi didalamnya, tidak bisa mendapatkan \"semua pesan yang telah dibaca\" darinya secara langsung. Tapi kita bisa melakukan iterasi kepada seluruh pesan dan memfilter semuanya yang ada didalam set.\n\nHal lainnya, solusi berbeda bisa saja seperti menambahkan properti seperti `message.isRead=true` kepada pesan setelah pesannya dibaca. Seperti objek pesan dikelola oleh kode lain, hal itu tidak direkomendasikan, tapi kita bisa menggunakan properti simbol untuk menghindari konflik.\n\nSeperti ini:\n```js\n// properti simbol yang hanya diketahui kode kita\nlet isRead = Symbol(\"isRead\");\nmessages[0][isRead] = true;\n```\n\nSekarang kode dari pihak-ketiga kemungkinan tidak akan melihat properti tambahan kita.\n\nwalaupun simbol membolehkan kita untuk mengecilkan kemunculan dari masalah, menggunakan `WeakSet` lebih baik dari sisi arsitektural." }, { "path": "1-js/05-data-types/08-weakmap-weakset/01-recipients-read/task.md", "content": "nilai penting: 5\n\n---\n\n# Menyimpan tanda \"unread\"\n\nTerdapat beberapa pesan dari array\"\n\n```js\nlet messages = [\n {text: \"Hello\", from: \"John\"},\n {text: \"How goes?\", from: \"John\"},\n {text: \"See you soon\", from: \"Alice\"}\n];\n```\n\nKode kamu bisa mengaksesnya, tapi pesannya di kelola oleh kode orang lain. Pesan baru ditambahkan, pesan lama dihilangkan secara secara teratur oleh kode itu, dan kamu tidak tahu persis saat ketika itu terjadi.\n\nSekarang, struktur data mana yang harus kamu gunakan untuk menyimpan informasi tentang pesannya apakah \"telah dibaca\"? Strukturnya haruslah tepat untuk memberikan jawaban \"apakah telah dibaca\"? untuk pesan objek yang diberikan.\n\nCatatan. Ketika sebuah pesan dihilangkan dari `messages`, pesan itu harus menghilang dari strukturnya juga.\n\nCatatan tambahan. Kita seharusnya tidak memodifikasi objek message, tambahkan properti kita kedalamnya. Seperti mereka di kelola oleh kode orang lain, itu mungkin akan mengarah ke hasil akhir yang tidak diinginkan.\n" }, { "path": "1-js/05-data-types/08-weakmap-weakset/02-recipients-when-read/solution.md", "content": "\nUntuk menyimpan tanggal, kita bisa menggunakan `WeakMap`:\n\n```js\nlet messages = [\n {text: \"Hello\", from: \"John\"},\n {text: \"How goes?\", from: \"John\"},\n {text: \"See you soon\", from: \"Alice\"}\n];\n\nlet readMap = new WeakMap();\n\nreadMap.set(messages[0], new Date(2017, 1, 1));\n// Kita akan belajar objek Date nanti\n```\n" }, { "path": "1-js/05-data-types/08-weakmap-weakset/02-recipients-when-read/task.md", "content": "nilai penting: 5\n\n---\n\n# Menyimpan tanggal\n\nTerdapat sebuah array dari pesan sama seperti di [previous task](info:task/recipients-read).Situasinya sama.\n\n```js\nlet messages = [\n {text: \"Hello\", from: \"John\"},\n {text: \"How goes?\", from: \"John\"},\n {text: \"See you soon\", from: \"Alice\"}\n];\n```\n\nPertanyaannya: struktur data mana yang kamu gunakan untuk menyimpan informasinya: \"ketika pesannya dibaca?\".\n\nDi tugas sebelumnya kita hanya menyimpan \"yes/no\". Sekarang kita butuh untuk menyimpan tanggal, dan itu harus tetap berada di memori simpan sampai pesannya dibuang.\n\nCatatan. Tanggal bisa disimpan sebagai objek dengan kelas bawaan `Date, kita akan mempelajarinya nanti.\n" }, { "path": "1-js/05-data-types/08-weakmap-weakset/article.md", "content": "# WeakMap dan WeakSet\n\nSeperti yang kita tahu dari bab , Mesin Javascript menyimpan sebuah nilai didalam memori selama itu bisa terjangkau (dan secara potensial bisa digunakan).\n\nContoh:\n```js\nlet john = { name: \"John\" };\n\n// Objeknya bisa diakses, john mereferensi kedalamnya.\n\n// tulis urang referensinya\njohn = null;\n\n*!*\n// objeknya akan dihilangkan dari memori\n*/!*\n```\n\nBiasanya. properti dari sebuah objek atau elemen dari array atau struktur data lainnya bisa dianggap bisa dijangkau dan tetap berada dimemori selama struktur datanya masih didalam memori.\n\nContoh, jika kita memasukan objek kedalam sebuah array, lalu selama arraynya ada, objeknya akan tetap ada juga, bahkan jika disana sudah tidaka ada yang mereferensi kedalamnya.\n\nSeperti ini:\n\n```js\nlet john = { name: \"John\" };\n\nlet array = [ john ];\n\njohn = null; // tulis ulang referensinya\n\n*!*\n\n// the object previously referenced by john is stored inside the array \n// therefore it won't be garbage-collected\n// we can get it as array[0]\n*/!*\n```\n\nSama seperti itu, jika kita bisa menggunakan sebuah objek sebagai sebuah kunci/key didalam `Map` biasa, lalu selama `Map`nya ada, objeknya akan selalu ada juga. Itu akan menempati memori dan mungkin tidak akan dibuang.\n\nContoh:\n\n```js\nlet john = { name: \"John\" };\n\nlet map = new Map();\nmap.set(john, \"...\");\n\njohn = null; // tulis ulang referensinya\n\n*!*\n// john disimpan didalam map,\n// kita bisa mendapatkannya dengan menggunakan map.keys()\n*/!*\n```\n\n`WeakMap` secara dasar berbeda didalam aspek ini. Itu tidak akan mencegah pembuangan dari objek kunci.\n\nAyo kita lihat didalam contoh.\n\n## WeakMap\n\nPerbedaan pertama dari `Map` adalah kunci `WeakMap` haruslah objek, bukan nilai primitif:\n\n```js run\nlet weakMap = new WeakMap();\n\nlet obj = {};\n\nweakMap.set(obj, \"ok\"); // bekerja dengan benar (object kunci/key)\n\n*!*\n// tidak bisa menggunakan string sebagai kunci\nweakMap.set(\"test\", \"Whoops\"); // Error, karena \"test\" bukanlah sebuah objek\n*/!*\n```\n\nSekarang, jika kita menggunakan sebuah objek sebagai kunci didalamnya, dan disana tidak terdapat referensi lain ke objeknya -- itu akan dihilangkan dari memori (dan juga dari map) secara otomatis.\n\n```js\nlet john = { name: \"John\" };\n\nlet weakMap = new WeakMap();\nweakMap.set(john, \"...\");\n\njohn = null; // tulis ulang referensinya\n\n// jogn telah dihilangkan dari memori!\n```\n\nBandingkan itu dengan `Map` biasa dicontoh diatas. Sekarang jika `john` hanya ada jika sebagai kunci dari `WeakMap` -- itu akan secara otomatis dihapus dari map (dan memori).\n\n`WeakMap` tidak mendukung iterasi dan metode `keys()`, `nilai()`, `entries()`, jadi tidak ada cara untuk mendapatkan semua kunci atau nilai darinya.\n\n`WeakMap` hanya mempunyai metode berikut:\n\n- `weakMap.get(key)`\n- `weakMap.set(key, value)`\n- `weakMap.delete(key)`\n- `weakMap.has(key)`\n\nKenapa terdapat batasan seperti itu? Itu hanyalah untuk alasan teknis. Jika sebuah objek kehilangan semua referensi lainnya (seperti `john` didalam kode diatas), lalu itu akan dibuang secara otomatis. Tapi secara teknis itu tidak benar-benar di spesifikasikan *ketika pembersihan terjadi*.\n\nMesin Javascript yang memilih hal itu. Itu mungkin akan memilih untuk melakukan pembersihan memori seketika atau menunggu dan melakukan pembersihan nanti ketika penghapusan lainnya terjadi. Jadi, secara teknis elemen count yang sekarang dari `WeakMap` tidak diketahui. Mesinnya mungkin sudah menghapusnya atau belum, atau sudah dihapus sebagian. Untuk alasan itu, metode yang mengakses seluruh key/nilai tidak didukung.\n\nSekarang dimana kita butuh struktur data seperti itu?\n\n## Kasus: tambahan data\n\nBagian utama dari penggunaan `WeakMap` adalah sebuah *penambahan penyimpanan data*.\n\nJika kita bekerja dengan sebuah objek yang \"dimiliki\" kode yang lain, bahkan mungkin sebuah librari pihak-ketiga, dan harus menyimpan beberapa data yang terkait dengannya, itu harus ada selama objeknya ada - lalu `WeakMap` adalah sesuatu yang dibutuhkan.\n\nKita menyimpan datanya kedalam `WeakMap`, menggunakan objek sebagai kunci, dan ketika objeknya dihapus, datanya akan secara otomatis menghilang juga.\n\n```js\nweakMap.set(john, \"secret documents\");\n// jika john meninggal, secret documents-nya akan dihapus secara otomatis\n```\n\nKita lihat didalam contoh.\n\nContoh, kita mempunyai kode yang menyimpan hitungan kunjungan untuk pengguna. Informasinya disimpan didalam map: sebuah objek user adalah kunci dan hitungan kunjungan adalah nilainya. Ketika pengguna pergi (objeknya akan dihapus), kita tidak ingin kunjungan mereka dihitung lagi.\n\nIni adalah contoh dari fungsi penghitung dengan `Map`:\n\n```js\n// 📁 visitsCount.js\nlet visitsCountMap = new Map(); // map: user => kunjungan dihitung\n\n// naikan hitungan kunjungan\nfunction countUser(user) {\n let count = visitsCountMap.get(user) || 0;\n visitsCountMap.set(user, count + 1);\n}\n```\n\nDan disini bagian kode lainnya, mungkin file lainnya akan menggunakannya:\n\n```js\n// 📁 main.js\nlet john = { name: \"John\" };\n\ncountUser(john); // hitung kunjungannya\n\n// lalu john pergi\njohn = null;\n```\n\nSekarang objek `john` harusnya dihapus, tapi tetap berada di memori, itu sebagai kunci didalam `visitsCountMap`.\n\nKita perlu membersihkan `visitsCountMap` ketika kita menghapus pengguna, sebaliknya itu akan tetap didalam memori terus-menerus. Pembersihan seperti itu akan menjadi pekerjaan yang membosankan didalam arsitektur yang rumit.\n\nMalahan kita bisa menghindarinya dengan berpindah ke `WeakMap`:\n\n```js\n// 📁 visitsCount.js\nlet visitsCountMap = new WeakMap(); // weakmap: user => kunjungan dihitung\n\n// naikan hitungan kunjungan\nfunction countUser(user) {\n let count = visitsCountMap.get(user) || 0;\n visitsCountMap.set(user, count + 1);\n}\n```\n\nSekarang kita tidak harus membersihkan `visitsCountMap`. Setelah objek `john` menjadi tidak terjangkau lagi kecuali sebagai kunci dari `WeakMap`, itu akan dihilangkan dari memori, bersamaan dengan informasi kuncinya dari `WeakMap`.\n\n## Kasus: penyimpanan cache\n\nContoh biasa lainnya adalah penyimpanan cache: ketika sebuah hasil dari fungsi harus diingat (\"di cache\"), jadi didalam pemanggilan selanjutnya didalam objek yang sama bisa menggunakannya.\n\nKita bisa menggunakan `Map` untuk menyimpan hasil, seperti ini:\n\n```js run\n// 📁 cache.js\nlet cache = new Map();\n\n// hitung dan ingat hasilnya\nfunction process(obj) {\n if (!cache.has(obj)) {\n let result = /* kalkulasi hasil */ obj;\n\n cache.set(obj, result);\n }\n\n return cache.get(obj);\n}\n\n*!*\n// sekarang kita gunakan process() didalam file lainnya:\n*/!*\n\n// 📁 main.js\nlet obj = {/* katakan kita mempunyai objek */};\n\nlet result1 = process(obj); // dihitung\n\n// ...selanjutnya, dari bagian kode lainnya...\nlet result2 = process(obj); // ingat hasil yang diambil dari cache\n\n// ...nanti, ketika objek tidak dibutuhkan lagi:\nobj = null;\n\nalert(cache.size); // 1 (Ouch! Objeknya masih didalam cache, menggunakan memori)\n```\n\nUntuk banyak pemanggilan dari `process(obj)` dengan objek yang sama, itu akan mengkalkulasikan hasilnya pertama kali, dan lalu hanya mengambilnya dari `cache`. kekurangannya adalah kita perlu membersihkan `cache` ketika objeknya tidak dibutuhkan lagi.\n\nJika kita mengganti `Map` dengan `WeakMap`, kemudian masalah ini menghilang: hasil yang di cache akan dihapus dari memori secara otomatis setelah objeknya dihapus.\n\n```js run\n// 📁 cache.js\n*!*\nlet cache = new WeakMap();\n*/!*\n\n// hitung dan ingat hasilnya\nfunction process(obj) {\n if (!cache.has(obj)) {\n let result = /* perhitungan hasil */ obj;\n\n cache.set(obj, result);\n }\n\n return cache.get(obj);\n}\n\n// 📁 main.js\nlet obj = {/* objek */};\n\nlet result1 = process(obj);\nlet result2 = process(obj);\n\n// ...nanti, ketika objeknya tidak dibutuhkan lagi:\nobj = null;\n\n// tidak bisa mendapatkan cache.size, karena itu WeakMap,\n// tapi itu 0 atau nanti akan jadi 0\n// Ketika obj dihapus, data cache akan dihapus juga\n```\n\n## WeakSet\n\n`WeakSet` memiliki perilaku yang sama:\n\n- Analoginya adalah untuk meng-`Set`, tapi mungkin kita hanya butuh menambahkan objek kedalam `WeakSet` (bukan primitif).\n- Sebuah objek ada didalam set selama itu bisa dijangkau dari tempat lain.\n- Seperti `Set`, itu mendukung `add`, `has` dan `delete`, tapi tidak `size`, `keys()` dan tidak ada iterasi\n\nmenjadi \"weak\", itu juga menyediakan penyimpanan tambahan. Tapi tidak untuk data yang asal-asalan, tapi untuk \"yes/no\". Keanggotaan dari `WeakSet` mungkin berarti sesuatu tentang objeknya.\n\nContoh, kita bisa menambahkan user kedalam `WeakSet` untuk mengetahui dari siapa saja yang mengunjungi website kita:\n\n```js run\nlet visitedSet = new WeakSet();\n\nlet john = { name: \"John\" };\nlet pete = { name: \"Pete\" };\nlet mary = { name: \"Mary\" };\n\nvisitedSet.add(john); // John mengunjungi website\nvisitedSet.add(pete); // lalu Pete\nvisitedSet.add(john); // John lagi\n\n// visitedSet sekarang memiliki 2 user\n\n// periksa jika John telah berkunjung?\nalert(visitedSet.has(john)); // true\n\n// periksa jika Mary telah berkunjung?\nalert(visitedSet.has(mary)); // false\n\njohn = null;\n\n// visitedSet akan dibersihkan secara otomatis\n```\n\nHal yang paling bisa diingat adalah batasan dari `WeakMap` dan `WeakSet` adalah tidak adanya iterasi, dan ketidak mampuan untuk mendapatkan seluruh konten saat ini. Itu mungkin akan merepotkan, tapi tidak mencegah `WeakMap/WeakSet` untuk melakukan tugas utama mereka -- menjadi \"tambahan\" penyimpanan data dari objek yang disimpan/dikelola di tempat lain.\n\n## Ringkasan\n\n`WeakMap` adalah koleksi seperti-`Map` yang mengijinkan hanya objek sebagai kunci dan menghapus mereka bersama dengan nilai yang terkait sekalinya mereka menjadi tidak terjangkau.\n\n`WeakSet` adalah koleksi seperti-`Set` yang hanya menyimpan objek dan menghapus mereka sekalinya mereka menjadi tidak bisa diakses.\n\nKeduanya tidak mendukung metode dan properti yang mengacu pada seluruh kunci atau jumlah mereka. Hanya operasi individual yang diperbolehkan.\n\n`WeakMap` dan `WeakSet` digunakan sebagai struktur data \"kedua\" sebagai tambahan kepada penyimpanan objek \"utama\". Sekalinya objeknya dihapus dari penyimpanan utama, jika itu hanya ditemukan sebagai kunci dari `WeakMap` atau didalam `WeakSet`, itu akan dihapus secara otomatis.\n" }, { "path": "1-js/05-data-types/09-keys-values-entries/01-sum-salaries/_js.view/solution.js", "content": "function sumSalaries(salaries) {\n\n let sum = 0;\n for (let salary of Object.values(salaries)) {\n sum += salary;\n }\n\n return sum;\n}\n\n" }, { "path": "1-js/05-data-types/09-keys-values-entries/01-sum-salaries/_js.view/test.js", "content": "describe(\"sumSalaries\", function() {\n it(\"returns sum of salaries\", function() {\n let salaries = {\n \"John\": 100,\n \"Pete\": 300,\n \"Mary\": 250\n };\n\n assert.equal( sumSalaries(salaries), 650 );\n });\n\n it(\"returns 0 for the empty object\", function() {\n assert.strictEqual( sumSalaries({}), 0);\n });\n});" }, { "path": "1-js/05-data-types/09-keys-values-entries/01-sum-salaries/solution.md", "content": "```js run demo\nfunction sumSalaries(salaries) {\n\n let sum = 0;\n for (let salary of Object.values(salaries)) {\n sum += salary;\n }\n\n return sum; // 650\n}\n\nlet salaries = {\n \"John\": 100,\n \"Pete\": 300,\n \"Mary\": 250\n};\n\nalert( sumSalaries(salaries) ); // 650\n```\nAtau kita juga bisa mendapatkan jumlah total dengan menggunakan `Object.values` dan `reduce`:\n\n```js\n// reduce meng-loop atas array gaji,\n// menambahkannya\n// dan mengembalikan hasilnya\nfunction sumSalaries(salaries) {\n return Object.values(salaries).reduce((a, b) => a + b, 0) // 650\n}\n```\n" }, { "path": "1-js/05-data-types/09-keys-values-entries/01-sum-salaries/task.md", "content": "nilai penting: 5\n\n---\n\n# Tambahkan propertinya\n\nAda objek `salaries` berisi beberapa gaji orang-orang.\n\nTulis fungsi `sumSalaries(salaries)` yang mengembalikan jumlah total semua gaji menggunakan `Object.values` dan loop `for..of`.\n\nJika `salaries` kosong, lalu hasilnya akan `0`.\n\nContohnya:\n\n```js\nlet salaries = {\n \"John\": 100,\n \"Pete\": 300,\n \"Mary\": 250\n};\n\nalert( sumSalaries(salaries) ); // 650\n```\n\n" }, { "path": "1-js/05-data-types/09-keys-values-entries/02-count-properties/_js.view/solution.js", "content": "function count(obj) { \n return Object.keys(obj).length;\n}\n\n" }, { "path": "1-js/05-data-types/09-keys-values-entries/02-count-properties/_js.view/test.js", "content": "describe(\"count\", function() {\n it(\"counts the number of properties\", function() {\n assert.equal( count({a: 1, b: 2}), 2 );\n });\n\n it(\"returns 0 for an empty object\", function() {\n assert.equal( count({}), 0 );\n });\n\n it(\"ignores symbolic properties\", function() {\n assert.equal( count({ [Symbol('id')]: 1 }), 0 );\n });\n});" }, { "path": "1-js/05-data-types/09-keys-values-entries/02-count-properties/solution.md", "content": "" }, { "path": "1-js/05-data-types/09-keys-values-entries/02-count-properties/task.md", "content": "nilai penting: 5\n\n---\n\n# Count properties\n\nTulis fungsi `count(obj)` yang mengembalikan jumlah properti di dalam objek:\n\n```js\nlet user = {\n name: 'John',\n age: 30\n};\n\nalert( count(user) ); // 2\n```\n\nCoba buat kodenya sependek mungkin.\n\nP.S. Jangan pedulikan properti simbolik, hanya hitung yang \"reguler\".\n\n" }, { "path": "1-js/05-data-types/09-keys-values-entries/article.md", "content": "\n# Objek.kunci, nilai, entri\n\nMari kita berpaling dari struktur data individual dan membahas iterasi mereka.\n\nDi bab sebelumnya kita telah melihat method `map.keys()`, `map.values()`, `map.entries()`.\n\nMethod ini generik, ada persetujuan umum untuk menggunakan mereka untuk struktur data. Jika kita pernah menciptakan struktur data sendiri, kita harus mengimplementasikannya juga.\n\nMereka tersedia untuk:\n\n- `Map`\n- `Set`\n- `Array`\n\nObjek biasa juga menghadapi method yang mirip, tapi sintaksisnya sedikit berbeda.\n\n## Objek.kunci, nilai-nilai, entri-entri\n\nUntuk objek biasa, method berikut tersedia:\n\n- [Object.keys(obj)](mdn:js/Object/keys) -- mengembalikan array kunci.\n- [Object.values(obj)](mdn:js/Object/values) -- mengembalikan array nilai.\n- [Object.entries(obj)](mdn:js/Object/entries) -- mengembalikan array pasangan `[key, value]`.\n\nPerhatikanlah perbedaannya(dibanding map contohnya):\n\n| | Map | Object |\n|-------------|------------------|--------------|\n| Call syntax | `map.keys()` | `Object.keys(obj)`, but not `obj.keys()` |\n| Returns | iterable | \"real\" Array |\n\nPerbedaan pertama adalah kita harus memanggil `Object.keys(obj)`, bukan `obj.keys()`.\n\nMengapa? Alasan pertama adalah fleksibilitas. Ingat, objek adalah dasar dari struktur kompleks di Javascript. Jadi kita mungkin mempunyai objek seperti `data` yang mengimplemen method `data.values()` sendirinya. Dan kita masih bisa memanggil `Object.values(data)` atasnya.\n\nAlasan kedua adalah method `Object.*` mengembalikan objek array \"betulan\", bukan hanya iterable. Itu terutama untuk alasan-alasan historis.\n\nContohnya:\n\n```js\nlet user = {\n name: \"John\",\n age: 30\n};\n```\n\n- `Object.keys(user) = [\"name\", \"age\"]`\n- `Object.values(user) = [\"John\", 30]`\n- `Object.entries(user) = [ [\"name\",\"John\"], [\"age\",30] ]`\n\nIni adalah contoh pengunaan `Object.values` untuk meng-loop atas nilai-nilai properti:\n\n```js run\nlet user = {\n name: \"John\",\n age: 30\n};\n\n// loop atas nilai\nfor (let value of Object.values(user)) {\n alert(value); // John, then 30\n}\n```\n\n```warn header=\"Object.keys/values/entries abaikan properti simbolis\"\nSeperti `for..in` loop, method ini mengabaikan properti yang menggunakan `Symbol(...)` as keys.\n\nBiasanya itu mudah. Tapi jika kita mau kunci simbolis juga, ada method lain [Object.getOwnPropertySymbols](mdn:js/Object/getOwnPropertySymbols) yang mengembalikan array berisi kunci simbolis saja. Ada juga method [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) yang mengembalikan semua kunci.\n```\n\n\n## Mengubah objek\n\nObjek kekurangan banyak method yang ada untuk arrays, contoh `map`, `filter` dan yang lainnya.\n\nJika kita ingin mengapplikasikan method-method tersebut, kita bisa menggunakan `Object.entries` diikuti oleh `Object.fromEntries`:\n\n1. Gunakan `Object.entries(obj)` untuk mendapatkan array pasangan kunci/nilai dari `obj`.\n2. Gunakan method array di array tersebut, contoh `map`. \n3. Gunakan `Object.fromEntries(array)` di array hasil untuk mengubahnya kembali menjadi objek.\n\nSebagai contoh, kita mempunyai objek dengan harga-harga, dan mau melipat duakan harga-harganya:\n\n```js run\nlet prices = {\n banana: 1,\n orange: 2,\n meat: 4,\n};\n\n*!*\nlet doublePrices = Object.fromEntries(\n // ubah menjadi array, map, lalu fromEntries mengembalikan objeknya\n Object.entries(prices).map(([key, value]) => [key, value * 2])\n);\n*/!*\n\nalert(doublePrices.meat); // 8\n``` \n\nMungkin ini terlihat susah pertama kalinya, tetapi ini akan menjadi mudah untuk di mengerti setelah kamu menggunakannya beberapa kali. Kita bisa membuat perantaian hebat dengan cara ini.\n" }, { "path": "1-js/05-data-types/10-destructuring-assignment/1-destruct-user/solution.md", "content": "\n```js run\nlet user = {\n name: \"John\",\n years: 30\n};\n\nlet {name, years: age, isAdmin = false} = user;\n\nalert( name ); // John\nalert( age ); // 30\nalert( isAdmin ); // false\n```" }, { "path": "1-js/05-data-types/10-destructuring-assignment/1-destruct-user/task.md", "content": "nilai penting: 5\n\n---\n\n# Destrukturisasi penugasan\n\nKita mempunyai sebuah objek:\n\n```js\nlet user = {\n name: \"John\",\n years: 30\n};\n```\n\nTulis destrukturisasi penugasan yang terbaca:\n\n- `name` properti menjadi variabel `name`.\n- `years` properti menjadi variabel `age`.\n- `isAdmin` properti menjadi variabel `isAdmin` (false, jika tidak ada properti seperti itu)\n\nBerikut adalah contoh nilai setelah penugasan Anda:\n\n```js\nlet user = { name: \"John\", years: 30 };\n\n// kode Anda ke sisi kiri:\n// ... = user\n\nalert( name ); // John\nalert( age ); // 30\nalert( isAdmin ); // false\n```\n" }, { "path": "1-js/05-data-types/10-destructuring-assignment/6-max-salary/_js.view/solution.js", "content": "function topSalary(salaries) {\n\n let maxSalary = 0;\n let maxName = null;\n\n for(const [name, salary] of Object.entries(salaries)) {\n if (maxSalary < salary) {\n maxSalary = salary;\n maxName = name;\n }\n }\n\n return maxName;\n}" }, { "path": "1-js/05-data-types/10-destructuring-assignment/6-max-salary/_js.view/test.js", "content": "describe(\"topSalary\", function() {\n it(\"returns top-paid person\", function() {\n let salaries = {\n \"John\": 100,\n \"Pete\": 300,\n \"Mary\": 250\n };\n\n assert.equal( topSalary(salaries), \"Pete\" );\n });\n\n it(\"returns null for the empty object\", function() {\n assert.isNull( topSalary({}) );\n });\n});" }, { "path": "1-js/05-data-types/10-destructuring-assignment/6-max-salary/solution.md", "content": "" }, { "path": "1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md", "content": "nilai penting: 5\n\n---\n\n# Gaji maksimal\n\nAda objek `salaries`:\n\n```js\nlet salaries = {\n \"John\": 100,\n \"Pete\": 300,\n \"Mary\": 250\n};\n```\n\nBuatlah fungsi `topSalary(salaries)` yang mengembalikan nama orang dengan bayaran tertinggi.\n\n- Jika `gaji` kosong, itu harus mengembalikan` null`.\n- Jika ada beberapa orang bergaji tinggi, kembalikan salah satu dari mereka.\n\nN.B. Gunakan `Object.entries` dan destrukturisasi untuk meng-iterasi lewat pasangan kunci/nilai.\n" }, { "path": "1-js/05-data-types/10-destructuring-assignment/article.md", "content": "# Destrukturisasi Penugasan\n\nDua stuktur data yang paling banyak digunakan di Javascript adalah `Object` dan `Array`\n\nObjek memungkinkan kita untuk membuat entitas tunggal yang menyimpan data item berdasarkan kunci, dan array memungkinkan kita untuk mengumpulkan data item menjadi koleksi yang terurut.\n\nTetapi ketika kita meneruskannya ke suatu fungsi, itu mungkin tidak perlu objek / array secara keseluruhan, melainkan potongan individual.\n\n*Destructuring assignment* adalah sebuah sintaks spesial yang memungkinkan kita untuk \"membongkar\" array atau objek menjadi variabel yang banyak, kadang-kadang itu memang lebih nyaman. Destrukturisasi juga berfungsi baik dengan fungsi-fungsi kompleks yang mempunyai banyak parameter, nilai default, dan sebagainya.\n\n## Destrukturisasi Array\n\nContoh bagaimana array di-destrukturisasi menjadi variabel:\n\n```js\n// kita mempunyai array dengan nama, dan nama keluarga\nlet arr = [\"John\", \"Smith\"]\n\n*!*\n// destructuring assignment\n// atur firstName = arr[0]\n// dan surname = arr[1]\nlet [firstName, surname] = arr;\n*/!*\n\nalert(firstName); // John\nalert(surname); // Smith\n```\n\nSekarang kita bisa bekerja dengan variabel bukan anggota array.\n\nIni terlihat hebat ketika dikombinasikan dengan `split` atau metode pengembalian array lainnya:\n\n```js run\nlet [firstName, surname] = \"John Smith\".split(' ');\nalert(firstName); // John\nalert(surname); // Smith\n```\n\n````smart header=\"\\\"Destructuring\\\" bukan berarti \\\"destructive\\\".\"\nIni disebut \"destructuring assignment,\" karena \"destructurizes\" dengan menyalin item kedalam variabel. Tetapi array itu sendiri tidak dimodifikasi.\n\nIni hanya cara singkat untuk menulis:\n```js\n// let [firstName, surname] = arr;\nlet firstName = arr[0];\nlet surname = arr[1];\n```\n````\n\n````smart header=\"Hindari elemen menggunakan koma\"\nElemen yang tidak diinginkan di array juga bisa di buang dengan sebuah koma tambahan:\n\n```js run\n*!*\n// elemen kedua tidak dibutuhkan\nlet [firstName, , title] = [\"Julius\", \"Caesar\", \"Consul\", \"of the Roman Republic\"];\n*/!*\n\nalert( title ); // Consul\n```\n\nPada kode diatas, elemen kedua dari array dilewati, yang ketiga ditetapkan untuk `title`, dan sisa item array juga dilewati (karena tidak ada variabel untuknya).\n````\n\n````smart header=\"Bekerja dengan iterabel apapun di sisi kanan\"\n\n... Sebenarnya, kita bisa mengggunakan itu untuk iterasi apapun, bukan hanya array:\n\n```js\nlet [a, b, c] = \"abc\"; // [\"a\", \"b\", \"c\"]\nlet [one, two, three] = new Set([1, 2, 3]);\n```\nThat works, because internally a destructuring assignment works by iterating over the right value. It's kind of syntax sugar for calling `for..of` over the value to the right of `=` and assigning the values.\n````\n\n\n````smart header=\"Menetapkan ke apa saja pada sisi kiri\"\n\nKita bisa menggunakan \"penetapan\" apa saja pada sisi kiri.\n\nMisalnya, sebuah properti objek:\n```js run\nlet user = {};\n[user.name, user.surname] = \"John Smith\".split(' ');\n\nalert(user.name); // John\nalert(user.surname); // Smith\n```\n\n````\n\n````smart header=\"Pengulangan dengan .entries()\"\n\nDi bagian sebelumnya kita melihat metode [Object.entries(obj)](mdn:js/Object/entries).\n\nKita bisa menggunakan itu untuk destrukturisasi untuk melompati kunci-dan-nilai sebuah objek:\n\n```js run\nlet user = {\n name: \"John\",\n age: 30\n};\n\n// loop over keys-and-values\n*!*\nfor (let [key, value] of Object.entries(user)) {\n*/!*\n alert(`${key}:${value}`); // name:John, then age:30\n}\n```\n\nKodingan yang sama untuk sebuah `Map` lebih sederhana, dan juga bisa diiterasi:\n\n```js run\nlet user = new Map();\nuser.set(\"name\", \"John\");\nuser.set(\"age\", \"30\");\n\n*!*\n// Map iterates as [key, value] pairs, very convenient for destructuring\nfor (let [key, value] of user) {\n*/!*\n alert(`${key}:${value}`); // name:John, then age:30\n}\n```\n````\n\n```smart header=\"Trik menukar variabel\"\nTrik yang paling diketahui untuk menukar nilai dari dua variabel:\n\n```js run\nlet guest = \"Jane\";\nlet admin = \"Pete\";\n\n// Tukar nilai: buat guest=Pete, admin=Jane\n[guest, admin] = [admin, guest];\n*/!*\n\nalert(`${guest} ${admin}`); // Pete Jane (penukaran berhasil!)\n```\n\nDisini kita membuat array sementara untuk dua variabel dan langsung memisahkannya dengan urutan penukaran.\n\nKita bisa menukar lebih daripada dua variabel dengan cara ini.\n\n\n### Sisanya '...'\n\nJika kita ingin tidak hanya mendapatkan nilai pertama, tetapi juga untuk mengumpulkan semua yang mengikuti -- kita dapat menambahkan satu parameter lagi dan mendapat \"the rest\" menggunakan tiga titik `\"...\"`:\n\n```js run\nlet [name1, name2] = [\"Julius\", \"Caesar\", \"Consul\", \"of the Roman Republic\"];\n\nalert(name1); // Julius\nalert(name2); // Caesar\n// Further items aren't assigned anywhere\n```\n\nIf we'd like also to gather all that follows -- we can add one more parameter that gets \"the rest\" using three dots `\"...\"`:\n\n```js run\nlet [name1, name2, *!*...rest*/!*] = [\"Julius\", \"Caesar\", *!*\"Consul\", \"of the Roman Republic\"*/!*];\n\n*!*\n// Catatan bahwa tipe dari `rest` adalah Array.\nalert(rest[0]); // Consul\nalert(rest[1]); // of the Roman Republic\nalert(rest.length); // 2\n*/!*\n```\n\nNilai dari `rest` adalah array dari elemen array yang tersisa. Kita bisa menggunakan variabel lain apapun pada `rest`, hanya pastikan memiliki tiga titik sebelum itu dan pergi terakhir di penetapan destrukturisasi.\n\n```js run\nlet [name1, name2, *!*...titles*/!*] = [\"Julius\", \"Caesar\", \"Consul\", \"of the Roman Republic\"];\n// now titles = [\"Consul\", \"of the Roman Republic\"]\n```\n\n### Nilai default\n\nJika ada lebih sedikit nilai dalam array daripada variabel dalam penugasan, tidak akan ada kesalahan. Nilai absen dianggap undefined:\n\n```js run\n*!*\nlet [firstName, surname] = [];\n*/!*\n\nalert(firstName); // undefined\nalert(surname); // undefined\n```\n\nJika kita ingin sebuah nilai \"default\" untuk mengganti yang hilang, kita bisa menyediakan menggunakan `=`:\n\n```js run\n*!*\n// nilai default\nlet [name = \"Guest\", surname = \"Anonymous\"] = [\"Julius\"];\n*/!*\n\nalert(name); // Julius (dari array)\nalert(surname); // Anonymous (digunakan default)\n```\n\nNilai default bisa berupa ekspresi yang lebih kompleks atau bahkan panggilan fungsi\nDefault values can be more complex expressions or even function calls. Mereka dievaluasi hanya jika nilainya tidak diberikan.\n\nSebagai contoh, di sini kita menggunakan fungsi `prompt` untuk dua default. Tapi itu hanya akan berjalan untuk yang hilang:\n\n```js run\n// prompt hanya berjalan untuk nama keluarga (surname)\nlet [name = prompt('name?'), surname = prompt('surname?')] = [\"Julius\"];\n\nalert(name); // Julius (dari array)\nalert(surname); // apapun yang prompt dapatkan\n```\n\nPlease note: the `prompt` will run only for the missing value (`surname`).\n\n## Destrukturisasi objek\n\nPenugasan destrukturisasi juga bekerja dengan objek.\n\nSintaks dasarnya adalah:\n\n```js\nlet {var1, var2} = {var1:…, var2:…}\n```\n\nKita memiliki objek yang ada di sisi kanan, yang ingin kita pisah menjadi beberapa variabel. Sisi kiri berisi \"pola\" untuk properti yang sesuai. Dalam kasus sederhana, itu adalah daftar nama variabel di `{...}`.\n\nContohnya:\n\n```js run\nlet options = {\n title: \"Menu\",\n width: 100,\n height: 200\n};\n\n*!*\nlet {title, width, height} = options;\n*/!*\n\nalert(title); // Menu\nalert(width); // 100\nalert(height); // 200\n```\n\nProperti `options.title`, `options.width` dan `options.height` ditugaskan ke variabel yang sesuai. Urutannya tidak masalah. Ini juga berfungsi:\n\n```js\n// mengganti urutan di let {...}\nlet {height, width, title} = { title: \"Menu\", height: 200, width: 100 }\n```\n\nPola di sisi kiri mungkin lebih kompleks dan menentukan pemetaan antara properti dan variabel.\n\nJika kita ingin menetapkan properti ke variabel dengan nama lain, misalnya, `options.width` untuk masuk ke variabel bernama` w`, maka kita dapat mengaturnya menggunakan tanda titik dua:\n\n```js run\nlet options = {\n title: \"Menu\",\n width: 100,\n height: 200\n};\n\n*!*\n// { sourceProperty: targetVariable }\nlet {width: w, height: h, title} = options;\n*/!*\n\n// width -> w\n// height -> h\n// title -> title\n\nalert(title); // Menu\nalert(w); // 100\nalert(h); // 200\n```\n\nKolon menunjukkan \"apa : pergi kemana\". Dalam contoh di atas properti `width` pergi ke` w`, properti `height` pergi ke` h`, dan `title` ditugaskan ke nama yang sama.\n\nUntuk properti yang berpotensi hilang, kita dapat menetapkan nilai default menggunakan `\" = \"`, seperti ini:\n\n```js run\nlet options = {\n title: \"Menu\"\n};\n\n*!*\nlet {width = 100, height = 200, title} = options;\n*/!*\n\nalert(title); // Menu\nalert(width); // 100\nalert(height); // 200\n```\n\nSama seperti dengan array atau parameter fungsi, nilai default dapat berupa ekspresi atau bahkan panggilan fungsi. Mereka akan dievaluasi jika nilainya tidak diberikan.\n\nDalam kode di bawah ini `prompt` meminta` width`, tetapi tidak untuk `title`:\n\n```js run\nlet options = {\n title: \"Menu\"\n};\n\n*!*\nlet {width = prompt(\"width?\"), title = prompt(\"title?\")} = options;\n*/!*\n\nalert(title); // Menu\nalert(width); // (apapun hasil dari prompt)\n```\n\nKita juga dapat menggabungkan titik dua dan persamaan:\n\n```js run\nlet options = {\n title: \"Menu\"\n};\n\n*!*\nlet {width: w = 100, height: h = 200, title} = options;\n*/!*\n\nalert(title); // Menu\nalert(w); // 100\nalert(h); // 200\n```\n\nJika kita memiliki objek yang kompleks dengan banyak properti, kita hanya dapat mengekstrak apa yang kita butuhkan:\n\n```js run\nlet options = {\n title: \"Menu\",\n width: 100,\n height: 200\n};\n\n// hanya ekstrak judul sebagai variabel\nlet { title } = options;\n\nalert(title); // Menu\n```\n\n### Pola sisanya \"...\"\n\nBagaimana jika objek memiliki lebih banyak properti daripada variabel yang kita miliki? Bisakah kita mengambil beberapa dan kemudian menetapkan \"sisanya\" di suatu tempat?\n\nKita bisa menggunakan pola 'rest', seperti yang kita lakukan dengan array. Itu tidak didukung oleh beberapa browser tua (IE, gunakan Babel untuk mem-polyfill itu) tapi berjalan di yang modern.\n\nTerlihat seperti ini:\n\n```js run\nlet options = {\n title: \"Menu\",\n height: 200,\n width: 100\n};\n\n*!*\n// title = properti bernama judul\n// rest = objek dengan sisa properti\nlet {title, ...rest} = options;\n*/!*\n\n// sekarang title=\"Menu\", rest={height: 200, width: 100}\nalert(rest.height); // 200\nalert(rest.width); // 100\n```\n\n````smart header=\"Gotcha jika tidak ada `let`\"\nDalam contoh-contoh di atas, variabel dinyatakan tepat dalam penugasan: `let {...} = {...}`. Tentu saja, kita bisa menggunakan variabel yang ada juga, tanpa `let`. Tapi ada tangkapan.\n\nIni tidak akan berfungsi:\n```js run\nlet title, width, height;\n\n// kesalahan di baris ini\n{title, width, height} = {title: \"Menu\", width: 200, height: 100};\n```\n\nMasalahnya adalah bahwa JavaScript memperlakukan `{...}` dalam aliran kode utama (tidak di dalam ekspresi lain) sebagai blok kode. Blok kode seperti itu dapat digunakan untuk pernyataan grup, seperti ini:\n\n```js run\n{\n // sebuah kode blok\n let message = \"Hello\";\n // ...\n alert( message );\n}\n```\n\nJadi di sini JavaScript mengasumsikan bahwa kita memiliki blok kode, itu sebabnya ada kesalahan. Kita ingin mendekstukturisasi.\n\nUntuk memperlihatkan JavaScript bahwa itu bukan blok kode, kita dapat membungkus ekspresi dalam tanda kurung `(...)`:\n\n```js run\nlet title, width, height;\n\n// oke sekarang\n*!*(*/!*{title, width, height} = {title: \"Menu\", width: 200, height: 100}*!*)*/!*;\n\nalert( title ); // Menu\n```\n````\n\n## Destrukturisasi bersarang\n\nJika suatu objek atau array berisi objek dan array bersarang lainnya, kita dapat menggunakan pola sisi kiri yang lebih kompleks untuk mengekstraksi bagian yang lebih dalam.\n\nDalam kode di bawah ini `options` memiliki objek lain di properti` size` dan sebuah array di properti `items`. Pola di sisi kiri penugasan memiliki struktur yang sama untuk mengekstrak nilai dari mereka:\n\n```js run\nlet options = {\n size: {\n width: 100,\n height: 200\n },\n items: [\"Cake\", \"Donut\"],\n extra: true \n};\n\n// tugas dekstukturisasi dibagi dalam beberapa baris untuk kejelasan\nlet {\n size: { // letakkan ukuran di sini\n width,\n height\n },\n items: [item1, item2], // tetapkan item di sini\n title = \"Menu\" // tidak ada dalam objek (nilai default digunakan)\n} = options;\n\nalert(title); // Menu\nalert(width); // 100\nalert(height); // 200\nalert(item1); // Cake\nalert(item2); // Donut\n```\n\n\nSemua properti objek `options` kecuali` extra` yang tidak ada di bagian kiri, ditetapkan ke variabel yang sesuai:\n\n![](destructuring-complex.svg)\n\nAkhirnya, kita memiliki `width`,` height`, `item1`,` item2` dan `title` dari nilai default.\n\nPerhatikan bahwa tidak ada variabel untuk `size` dan` item`, karena kita mengambil kontennya.\n\n## Parameter fungsi cerdas\n\nAda kalanya suatu fungsi memiliki banyak parameter, yang sebagian besar bersifat opsional. Itu terutama berlaku untuk antarmuka pengguna. Bayangkan sebuah fungsi yang menciptakan menu. Mungkin memiliki lebar, tinggi, judul, daftar item dan sebagainya.\n\nBerikut cara yang buruk untuk menulis fungsi tersebut:\n\n```js\nfunction showMenu(title = \"Untitled\", width = 200, height = 100, items = []) {\n // ...\n}\n```\n\nDalam kehidupan nyata, masalahnya adalah bagaimana cara mengingat urutan argumen. Biasanya IDE mencoba membantu kita, terutama jika kodenya didokumentasikan dengan baik, tetapi masih ... Masalah lain adalah bagaimana memanggil fungsi ketika sebagian besar parameter ok secara default.\n\nSoperti ini?\n\n```js\n// tidak ditentukan dimana nilai default baik-baik saja\nshowMenu(\"My Menu\", undefined, undefined, [\"Item1\", \"Item2\"])\n```\n\nItu jelek. Dan menjadi tidak dapat dibaca ketika kita berurusan dengan lebih banyak parameter.\n\nDestrukturisasi datang untuk menyelamatkan!\n\nKita dapat melewatkan parameter sebagai objek, dan fungsinya segera merusaknya menjadi variabel:\n\n```js run\n// kita meneruskan objek ke fungsi\nlet options = {\n title: \"My menu\",\n items: [\"Item1\", \"Item2\"]\n};\n\n// ...dan segera memperluasnya ke variabel\nfunction showMenu(*!*{title = \"Untitled\", width = 200, height = 100, items = []}*/!*) {\n // title, items – diambil dari options,\n // width, height – standar yang digunakan\n alert( `${title} ${width} ${height}` ); // My Menu 200 100\n alert( items ); // Item1, Item2\n}\n\nshowMenu(options);\n```\n\nKita juga dapat menggunakan perusakan yang lebih kompleks dengan objek bersarang dan pemetaan titik dua:\n\n```js run\nlet options = {\n title: \"My menu\",\n items: [\"Item1\", \"Item2\"]\n};\n\n*!*\nfunction showMenu({\n title = \"Untitled\",\n width: w = 100, // width menjadi w\n height: h = 200, // height menjadi h\n items: [item1, item2] // element pertama items menjadi item1, kedua menjadi item2\n}) {\n*/!*\n alert( `${title} ${w} ${h}` ); // My Menu 100 200\n alert( item1 ); // Item1\n alert( item2 ); // Item2\n}\n\nshowMenu(options);\n```\n\nSintaks lengkapnya sama dengan untuk tugas penataan:\n```js\nfunction({\n incomingProperty: varName = defaultValue\n ...\n})\n```\n\nKemudian, untuk objek parameter, akan ada variabel `varName` untuk properti` incomingProperty`, dengan `defaultValue` secara default.\n\nHarap perhatikan bahwa destrukturisasi seperti itu mengasumsikan bahwa `showMenu ()` memang memiliki argumen. Jika kita menginginkan semua nilai secara default, maka kita harus menentukan objek kosong:\n\n```js\nshowMenu({}); // ok, semua nilai adalah default\n\nshowMenu(); // ini akan memberikan kesalahan\n```\n\nKita dapat memperbaikinya dengan menjadikan `{}` nilai default untuk seluruh objek parameter:\n\n```js run\nfunction showMenu({ title = \"Menu\", width = 100, height = 200 }*!* = {}*/!*) {\n alert( `${title} ${width} ${height}` );\n}\n\nshowMenu(); // Menu 100 200\n```\n\nDalam kode di atas, objek argumen keseluruhan adalah `{}` secara default, jadi selalu ada sesuatu untuk distrukturisasi.\n\n## Ringkasan\n\n- Penugasan destrukturisasi memungkinkan untuk memetakan objek atau array secara instan ke banyak variabel.\n- Sintaks lengkap objek:\n ```js\n let {prop : varName = default, ...rest} = object\n ```\n\n Ini berarti properti `prop` harus masuk ke variabel` varName` dan, jika tidak ada properti seperti itu, maka nilai `default` harus digunakan.\n\n Properti objek yang tidak memiliki pemetaan disalin ke objek `rest`.\n\n- Sintaks lengkap array:\n\n ```js\n let [item1 = default, item2, ...rest] = array\n ```\n\n Item pertama masuk ke `item1`; yang kedua masuk ke `item2`, sisanya membuat array `rest`.\n\n- Dimungkinkan untuk mengekstraksi data dari array / objek bersarang, untuk itu sisi kiri harus memiliki struktur yang sama dengan yang benar.\n" }, { "path": "1-js/05-data-types/11-date/1-new-date/solution.md", "content": "Konstruktor `new Date` menggunakan zona waktu lokal. Sehingga hal penting yang harus diingat adalah bulan dimulai dari angka 0.\n\nJadi Februari mempunyai angka 1.\n\nHere's an example with numbers as date components:\n\n```js run\n//new Date(year, month, date, hour, minute, second, millisecond)\nlet d1 = new Date(2012, 1, 20, 3, 12);\nalert( d1 );\n```\nWe could also create a date from a string, like this:\n\n```js run\n//new Date(datastring)\nlet d2 = new Date(\"February 20, 2012 03:12:00\");\nalert( d2 );\n```\n" }, { "path": "1-js/05-data-types/11-date/1-new-date/task.md", "content": "Tingkat kepentingan: 5\n\n---\n\n# Buat sebuah tanggal\n\nBuat sebuah objek `Date` untuk tanggal: Feb 20, 2012, 3:12am. Zona waktu lokal.\n\nTampilkan menggunakan `alert`.\n" }, { "path": "1-js/05-data-types/11-date/2-get-week-day/_js.view/solution.js", "content": "function getWeekDay(date) {\n let days = ['MIN', 'SEN', 'SEL', 'RAB', 'KAM', 'JUM', 'SAB'];\n\n return days[date.getDay()];\n}\n" }, { "path": "1-js/05-data-types/11-date/2-get-week-day/_js.view/test.js", "content": "describe(\"getWeekDay\", function() {\n it(\"3 January 2014 - friday\", function() {\n assert.equal(getWeekDay(new Date(2014, 0, 3)), 'JUM');\n });\n\n it(\"4 January 2014 - saturday\", function() {\n assert.equal(getWeekDay(new Date(2014, 0, 4)), 'SAB');\n });\n\n it(\"5 January 2014 - sunday\", function() {\n assert.equal(getWeekDay(new Date(2014, 0, 5)), 'MIN');\n });\n\n it(\"6 January 2014 - monday\", function() {\n assert.equal(getWeekDay(new Date(2014, 0, 6)), 'SEN');\n });\n\n it(\"7 January 2014 - tuesday\", function() {\n assert.equal(getWeekDay(new Date(2014, 0, 7)), 'SEL');\n });\n\n it(\"8 January 2014 - wednesday\", function() {\n assert.equal(getWeekDay(new Date(2014, 0, 8)), 'RAB');\n });\n\n it(\"9 January 2014 - thursday\", function() {\n assert.equal(getWeekDay(new Date(2014, 0, 9)), 'KAM');\n });\n});\n" }, { "path": "1-js/05-data-types/11-date/2-get-week-day/solution.md", "content": "Metode `date.getDay()` mengembalikan angka dari hari dalam satu minggu, dimulai dari Minggu.\n\nBuat array hari dalam seminggu, sehingga kita bisa mendapatkan nama yang sesuai dengan angkanya:\n\n```js run demo\nfunction getWeekDay(date) {\n let days = ['MIN', 'SEN', 'SEL', 'RAB', 'KAM', 'JUM', 'SAB'];\n\n return days[date.getDay()];\n}\n\nlet date = new Date(2014, 0, 3); // 3 Jan 2014\nalert( getWeekDay(date) ); // JUM\n```\n" }, { "path": "1-js/05-data-types/11-date/2-get-week-day/task.md", "content": "Tingkat kepentingan: 5\n\n---\n\n# Tampilkan hari dalam satu minggu \n\nTulis sebuah fungsi `getWeekDay(tanggal)` untuk menunjukkan hari dalam format: 'SEN', 'SEL', 'RAB', 'KAM', 'JUM', 'SAB', 'MIN'.\n\nSebagai contoh:\n\n```js no-beautify\nlet tanggal = new Date(2012, 0, 3); // 3 Jan 2012\nalert( getWeekDay(tanggal) ); // harus mengeluarkan \"SEL\"\n```\n" }, { "path": "1-js/05-data-types/11-date/3-weekday/_js.view/solution.js", "content": "function getLocalDay(date) {\n\n let days = date.getDay();\n\n if (days == 0) { // hari ke-0 (Minggu) adalah hari ke-7 di Eropa\n days = 7;\n }\n\n return days;\n}\n" }, { "path": "1-js/05-data-types/11-date/3-weekday/_js.view/test.js", "content": "describe(\"getLocalDay mengembalikan hari sesuai dengan standar di \\\"eropa\\\" \", function() {\n it(\"3 January 2014 - Jumat\", function() {\n assert.equal(getLocalDay(new Date(2014, 0, 3)), 5);\n });\n\n it(\"4 January 2014 - Sabtu\", function() {\n assert.equal(getLocalDay(new Date(2014, 0, 4)), 6);\n });\n\n it(\"5 January 2014 - Minggu\", function() {\n assert.equal(getLocalDay(new Date(2014, 0, 5)), 7);\n });\n\n it(\"6 January 2014 - Senin\", function() {\n assert.equal(getLocalDay(new Date(2014, 0, 6)), 1);\n });\n\n it(\"7 January 2014 - Selasa\", function() {\n assert.equal(getLocalDay(new Date(2014, 0, 7)), 2);\n });\n\n it(\"8 January 2014 - Rabu\", function() {\n assert.equal(getLocalDay(new Date(2014, 0, 8)), 3);\n });\n\n it(\"9 January 2014 - Kamis\", function() {\n assert.equal(getLocalDay(new Date(2014, 0, 9)), 4);\n });\n});\n" }, { "path": "1-js/05-data-types/11-date/3-weekday/solution.md", "content": "" }, { "path": "1-js/05-data-types/11-date/3-weekday/task.md", "content": "Tingkat kepentingan: 5\n\n---\n\n# Hari di Eropa\n\nNegara-negara di Eropa mempunyai hari yang dimulai dari Senin (angka 1), kemudian Selasa (angka 2) sampai dengan Minggu (angka 7). Buatlah sebuah fungsi `getLocalDay(date)` yang mengembalikan hari sesuai dengan standar tanggal di Eropa.\n\n```js no-beautify\nlet date = new Date(2012, 0, 3); // 3 Jan 2012\nalert( getLocalDay(date) ); // Selasa, seharusnya menunjukkan angka 2\n```\n" }, { "path": "1-js/05-data-types/11-date/4-get-date-ago/_js.view/solution.js", "content": "function getDateAgo(date, days) {\n let dateCopy = new Date(date);\n\n dateCopy.setDate(date.getDate() - days);\n return dateCopy.getDate();\n}\n" }, { "path": "1-js/05-data-types/11-date/4-get-date-ago/_js.view/test.js", "content": "describe(\"getDateAgo\", function() {\n\n it(\"1 hari sebelum 02.01.2015 -> tanggal 1\", function() {\n assert.equal(getDateAgo(new Date(2015, 0, 2), 1), 1);\n });\n\n\n it(\"2 hari sebelum 02.01.2015 -> tanggal 31\", function() {\n assert.equal(getDateAgo(new Date(2015, 0, 2), 2), 31);\n });\n\n it(\"100 hari sebelum 02.01.2015 -> tanggal 24\", function() {\n assert.equal(getDateAgo(new Date(2015, 0, 2), 100), 24);\n });\n\n it(\"365 hari sebelum 02.01.2015 -> tanggal 2\", function() {\n assert.equal(getDateAgo(new Date(2015, 0, 2), 365), 2);\n });\n\n it(\"tidak mengubah tanggal yang diberikan\", function() {\n let tanggal = new Date(2015, 0, 2);\n let tanggalCopy = new Date(tanggal);\n getDateAgo(tanggalCopy, 100);\n assert.equal(tanggal.getTime(), tanggalCopy.getTime());\n });\n\n});\n" }, { "path": "1-js/05-data-types/11-date/4-get-date-ago/solution.md", "content": "Idenya mudah: Kurangi `tanggal` dengan jumlah hari yang diberikan.\n\n```js\nfunction getDateAgo(tanggal, hari) {\n tanggal.setDate(tanggal.getDate() - hari);\n return tanggal.getDate();\n}\n```\n\n...Namun fungsi tersebut tidak boleh mengubah `tanggal` yang diberikan. Ini adalah yang terpenting, karena kode di luar yang memberikan kita tanggal tidak mengira tanggal tersebut akan berubah. \n\nUntuk mengimplementasikannya kita akan menduplikasi tanggal tersebut, seperti ini:\n\n```js run demo\nfunction getDateAgo(tanggal, hari) {\n let tanggalCopy = new Date(tanggal);\n\n tanggalCopy.setDate(tanggal.getDate() - hari);\n return tanggalCopy.getDate();\n}\n\nlet tanggal = new Date(2015, 0, 2);\n\nalert( getDateAgo(tanggal, 1) ); // 1, (1 Jan 2015)\nalert( getDateAgo(tanggal, 2) ); // 31, (31 Des 2014)\nalert( getDateAgo(tanggal, 365) ); // 2, (2 Jan 2014)\n```\n" }, { "path": "1-js/05-data-types/11-date/4-get-date-ago/task.md", "content": "Tingkat kepentingan: 4\n\n---\n\n# Tanggal berapakah beberapa hari yang lalu? \n\nBuatlah sebuah fungsi `getDateAgo(tanggal, hari)` yang mengembalikan beberapa `hari` yang telah berlalu dari sebuah `tanggal`. \n\nSebagai contoh, apabila hari ini tanggal 20, maka `getDateAgo(new Date(), 1)` harus mengembalikan tanggal 19 dan `getDateAgo(new Date(), 2)` harus mengembalikan tanggal 18.\n\nHarus bekerja dengan baik dan dapat diandalkan untuk `hari=365` atau lebih:\n\n```js\nlet tanggal = new Date(2015, 0, 2);\n\nalert( getDateAgo(tanggal, 1) ); // 1, (1 Jan 2015)\nalert( getDateAgo(tanggal, 2) ); // 31, (31 Des 2014)\nalert( getDateAgo(tanggal, 365) ); // 2, (2 Jan 2014)\n```\n\nP.S. Fungsi tidak boleh mengubah `tanggal` yang diberikan. \n" }, { "path": "1-js/05-data-types/11-date/5-last-day-of-month/_js.view/solution.js", "content": "function getLastDayOfMonth(tahun, bulan) {\n let tanggal = new Date(tahun, bulan + 1, 0);\n return tanggal.getDate();\n}\n" }, { "path": "1-js/05-data-types/11-date/5-last-day-of-month/_js.view/test.js", "content": "describe(\"getLastDayOfMonth\", function() {\n it(\"tanggal terakhir dari 01.01.2012 - 31\", function() {\n assert.equal(getLastDayOfMonth(2012, 0), 31);\n });\n\n it(\"tanggal terakhir dari 01.02.2012 - 29 (tahun kabisat)\", function() {\n assert.equal(getLastDayOfMonth(2012, 1), 29);\n });\n\n it(\"tanggal terakhir dari 01.02.2013 - 28\", function() {\n assert.equal(getLastDayOfMonth(2013, 1), 28);\n });\n});\n" }, { "path": "1-js/05-data-types/11-date/5-last-day-of-month/solution.md", "content": "Buat sebuah tanggal menggunakan bulan berikutnya, namun berikan 0 sebagai tanggalnya:\n```js run demo\nfunction getLastDayOfMonth(tahun, bulan) {\n let tanggal = new Date(tahun, bulan + 1, 0);\n return tanggal.getDate();\n}\n\nalert( getLastDayOfMonth(2012, 0) ); // 31\nalert( getLastDayOfMonth(2012, 1) ); // 29\nalert( getLastDayOfMonth(2013, 1) ); // 28\n```\n\nNormalnya, tanggal dimulai dari 1, namun secara teknis kita bisa berikan angka apapun, dan tanggal akan otomatis menyesuaikan. Sehingga ketika kita berikan 0, itu berarti \"satu hari sebelum tanggal pertama untuk sebuah bulan\", dengan kata lain: \"hari terakhir pada bulan sebelumnya\".\n" }, { "path": "1-js/05-data-types/11-date/5-last-day-of-month/task.md", "content": "Tingkat kepentingan: 5\n\n---\n\n# Tanggal terakhir dari sebuah bulan?\n\nTulis sebuah fungsi `getLastDayOfMonth(tahun, bulan)` yang mengembalikan tanggal terakhir dari sebuah bulan. Terkadang 30, 31, atau bahkan 28/29 untuk Februari.\n\nParameter:\n\n- `tahun` -- tahun dalam empat-digit, sebagai contoh 2012.\n- `bulan` -- bulan, dari 0 sampai 11.\n\nSebagai contoh, `getLastDayOfMonth(2012, 1) = 29` (tahun kabisat, Feb).\n" }, { "path": "1-js/05-data-types/11-date/6-get-seconds-today/solution.md", "content": "Untuk mendapatkan jumlah detik, kita harus membuat sebuah tanggal menggunakan hari yang sedang berlangsung dan waktu 00:00:00, dan mengurangi waktu \"saat ini\" dengannya.\n\nPerbedaan yang didapat adalah angka dalam milidetik sejak permulaan hari, yang harus dibagi dengan 1000 agar menjadi detik:\n\n```js run\nfunction getSecondsToday() {\n let sekarang = new Date();\n\n // Buat sebuah objek menggunakan hari/bulan/tahun saat ini\n let hariIni = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n\n let beda = sekarang - hariIni; // beda dalam milidetik\n return Math.round(beda / 1000); // ubah menjadi detik\n}\n\nalert( getSecondsToday() );\n```\n\nSolusi alternatif adalah cari jam/menit/detik dan ubah menjadi detik:\n\n```js run\nfunction getSecondsToday() {\n let d = new Date();\n return d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();\n}\n\nalert( getSecondsToday() );\n```\n" }, { "path": "1-js/05-data-types/11-date/6-get-seconds-today/task.md", "content": "Tingkat kepentingan: 5\n\n---\n\n# Berapa detik yang telah berlalu untuk hari ini?\n\nTulis sebuah fungsi `getSecondsToday()` yang mengembalikan angka dari detik yang telah berlalu dari sejak permulaan hari ini.\n\nSebagai contoh, sekarang pukul `10:00 am`, dan tidak ada daylight savings shift, maka:\n\n```js\ngetSecondsToday() == 36000 // (3600 * 10)\n```\n\nFungsi haruslah berjalan untuk hari apapun. sehingga, tidak boleh ada nilai \"hari ini\" yang ditulis secara hard-code.\n" }, { "path": "1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/solution.md", "content": "Untuk mendapatkan jumlah milidetik hingga besok, kita bisa mendapatkannya melalui pengurangan tanggal hari ini dengan \"besok 00:00:00\"\n\nPertama, kita tentukan \"besok\", dan kemudian lakukan perhitungan:\n\n```js run\nfunction getSecondsToTomorrow() {\n let sekarang = new Date();\n\n // besok\n let besok = new Date(now.getFullYear(), now.getMonth(), *!*now.getDate()+1*/!*);\n\n let beda = besok - sekarang; // beda dalam milidetik\n return Math.round(beda / 1000); // ubah ke detik \n}\n```\n\nSolusi alternatif:\n\n```js run\nfunction getSecondsToTomorrow() {\n let sekarang = new Date();\n let jam = sekarang.getHours();\n let menit = sekarang.getMinutes();\n let detik = sekarang.getSeconds();\n let detikTotalHariIni = (jam * 60 + menit) * 60 + detik;\n let detikTotalDalamSatuHari = 86400;\n\n return detikTotalDalamSatuHari - detikTotalHariIni;\n}\n```\n\nHarap diingat bahwa banyak negara menerapkan Daylight Savings Time (DST), sehingga memungkinkan ada hari dengan 23 atau 25 jam. Kita mungkin ingin melakukan perhitungan dengan cara yang berbeda untuk mereka.\n" }, { "path": "1-js/05-data-types/11-date/7-get-seconds-to-tomorrow/task.md", "content": "Tingkat kepentingan: 5\n\n---\n\n# Berapa detik lagi sampai besok?\n\nBuat sebuah fungsi `getSecondsToTomorrow()` yang mengembalikan jumlah detik yang tersisa hingga esok hari.\n\nSebagai contoh, jika sekarang `23:00`, maka:\n\n```js\ngetSecondsToTomorrow() == 3600\n```\n\nP.S. Fungsi haruslah berjalan untuk semua hari, sehingga \"hari ini\" tidak bisa dalam bentuk hard-code.\n" }, { "path": "1-js/05-data-types/11-date/8-format-date-relative/_js.view/solution.js", "content": "\nfunction formatDate(date) {\n let diff = new Date() - date; // perbedaan dalam mili-detik\n\n if (diff < 1000) { // kurang dari 1 detik\n return 'right now';\n }\n\n let sec = Math.floor(diff / 1000); // ubah diff menjadi detik\n\n if (sec < 60) {\n return sec + ' sec. ago';\n }\n\n let min = Math.floor(diff / 60000); // ubah diff menjadi menit\n if (min < 60) {\n return min + ' min. ago';\n }\n\n // format tanggalnya\n // tambah awalan nol ke satu-digit hari/bulan/jam/menit\n let d = date;\n d = [\n '0' + d.getDate(),\n '0' + (d.getMonth() + 1),\n '' + d.getFullYear(),\n '0' + d.getHours(),\n '0' + d.getMinutes()\n ].map(component => component.slice(-2)); // ambil 2 dijit dari setiap komponen\n\n // satukan komponen menjadi tanggal\n return d.slice(0, 3).join('.') + ' ' + d.slice(3).join(':');\n}\n" }, { "path": "1-js/05-data-types/11-date/8-format-date-relative/_js.view/test.js", "content": "describe(\"formatDate\", function() {\n it(\"shows 1ms ago as \\\"right now\\\"\", function() {\n assert.equal(formatDate(new Date(new Date - 1)), 'right now');\n });\n\n it('\"30 seconds ago\"', function() {\n assert.equal(formatDate(new Date(new Date - 30 * 1000)), \"30 sec. ago\");\n });\n\n it('\"5 minutes ago\"', function() {\n assert.equal(formatDate(new Date(new Date - 5 * 60 * 1000)), \"5 min. ago\");\n });\n\n it(\"older dates as DD.MM.YY HH:mm\", function() {\n assert.equal(formatDate(new Date(2014, 2, 1, 11, 22, 33)), \"01.03.14 11:22\");\n });\n\n});\n" }, { "path": "1-js/05-data-types/11-date/8-format-date-relative/solution.md", "content": "Untuk mendapatkan waktu dari `date` sampai sekarang -- kita kurangi tanggalnya.\n\n```js run demo\nfunction formatDate(date) {\n let diff = new Date() - date; // perbedaan dalam mili-detik\n\n if (diff < 1000) { // kurang dari 1 detik\n return 'right now';\n }\n\n let sec = Math.floor(diff / 1000); // ubah diff menjadi detik\n\n if (sec < 60) {\n return sec + ' sec. ago';\n }\n\n let min = Math.floor(diff / 60000); // ubah diff menjadi menit\n if (min < 60) {\n return min + ' min. ago';\n }\n\n // format tanggalnya\n // tambahkan awalan nol ke dijit-tunggal hari/bulan/jam/menit\n let d = date;\n d = [\n '0' + d.getDate(),\n '0' + (d.getMonth() + 1),\n '' + d.getFullYear(),\n '0' + d.getHours(),\n '0' + d.getMinutes()\n ].map(component => component.slice(-2)); // ambil setidaknya 2 dijit dari setiap komponen\n\n // satukan komponen menjadi tanggal\n return d.slice(0, 3).join('.') + ' ' + d.slice(3).join(':');\n}\n\nalert( formatDate(new Date(new Date - 1)) ); // \"sekarang\"\n\nalert( formatDate(new Date(new Date - 30 * 1000)) ); // \"30 detik yang lalu\"\n\nalert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // \"5 menit yang lalu\"\n\n// tanggal kemarin seperti 31.12.2016 20:00\nalert( formatDate(new Date(new Date - 86400 * 1000)) );\n```\n\nAlternative solution:\n\n```js run\nfunction formatDate(date) {\n let dayOfMonth = date.getDate();\n let month = date.getMonth() + 1;\n let year = date.getFullYear();\n let hour = date.getHours();\n let minutes = date.getMinutes();\n let diffMs = new Date() - date;\n let diffSec = Math.round(diffMs / 1000);\n let diffMin = diffSec / 60;\n let diffHour = diffMin / 60;\n\n // formatting\n year = year.toString().slice(-2);\n month = month < 10 ? '0' + month : month;\n dayOfMonth = dayOfMonth < 10 ? '0' + dayOfMonth : dayOfMonth;\n hour = hour < 10 ? '0' + hour : hour;\n minutes = minutes < 10 ? '0' + minutes : minutes;\n\n if (diffSec < 1) {\n return 'right now'; \n } else if (diffMin < 1) {\n return `${diffSec} sec. ago`\n } else if (diffHour < 1) {\n return `${diffMin} min. ago`\n } else {\n return `${dayOfMonth}.${month}.${year} ${hour}:${minutes}`\n }\n}\n```\n" }, { "path": "1-js/05-data-types/11-date/8-format-date-relative/task.md", "content": "nilai penting: 4\n\n---\n\n# Ubah menjadi tanggal yang berhubungan\n\nTulis sebuah fungsi `formatDate(date)` yang harus memformat `date` seperti berikut:\n\n- Jika sejak `date` lewat kurang dari 1 detik, lalu `\"sekarang\"`.\n- Sebaliknya, jika sejak `date` lewat kurang dari satu menit, lalu `\"n detik yang lalu\"`.\n- Sebaliknya, jika kurang dari satu jam, lalu `\"m menit yang lalu\"`.\n- Sebaliknya, tanggal dalam format penuh `\"DD.MM.YY HH:mm\"`. Itu adalah: `\"hari.bulan.tahun jam:menit\"`, semua dalam format 2 angka, contoh. `31.12.16 10:00`.\n\nContoh:\n\n```js\nalert( formatDate(new Date(new Date - 1)) ); // \"sekarang\"\n\nalert( formatDate(new Date(new Date - 30 * 1000)) ); // \"30 detik yang lalu\"\n\nalert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // \"5 menit yang lalu\"\n\n// tanggal kemarin seperti 31.12.16 20:00\nalert( formatDate(new Date(new Date - 86400 * 1000)) );\n```\n" }, { "path": "1-js/05-data-types/11-date/article.md", "content": "# Tanggal dan waktu\n\nAyo kita bertemu dengan objek bawaan baru: [Date](mdn:js/Date). yang akan menyimpan tanggal, waktu dan menyediakan metode untuk manajemen tanggal/waktu.\n\nContoh, kita bisa menggunakan itu untuk menyimpan pembuatan/modifikasi waktu, untuk menghitung waktu atau hanya untuk melihat tanggal sekarang.\n\n## Pembuatan\n\nUntuk membuat objek `Date` baru panggil `new Date()` dengan salah satu dari argumen dibawah:\n\n`new Date()`\n: Tanpa argumen -- membuat sebuah objek `Date` untuk tanggal dan waktu sekarang:\n\n ```js run\n let now = new Date();\n alert( now ); // tampilkan tanggal/waktu sekarang\n ```\n\n`new Date(milliseconds)`\n: Membuat sebuah objek `Date` dengan waktu yang sama dengan mili-detik (1/1000 dari satu detik) lewat dari Januari 1 1970 UTC+0.\n\n ```js run\n // 0 berarti 01.01.1970 UTC+0\n let Jan01_1970 = new Date(0);\n alert( Jan01_1970 );\n\n // sekarang tambahkan 24 jam, ambil 02.01.1970 UTC+0\n let Jan02_1970 = new Date(24 * 3600 * 1000);\n alert( Jan02_1970 );\n ```\n\n Sebuah angka integer merepresentasikan angka dari milidetik yang telah lewat sejak awal dari 1970 dipanggil dengan *timestamp*.\n\n Ini adalah angka numerik ringan yang merepresentasikan sebuah tanggal. Kita akan selalu bisa membuat tanggal dari timestamp menggunakan `new Date(timestamp)` dan mengubah objek `Date` yang ada ke sebuah timestamp dengan menggunakan metode `date.getTime()` (lihat dibawah).\n\n Tanggal sebelum 01.01.1970 mempunyai timestamp yang negatif, contoh.:\n ```js run\n // 31 Dec 1969\n let Dec31_1969 = new Date(-24 * 3600 * 1000);\n alert( Dec31_1969 );\n ```\n\n`new Date(datestring)`\n: Jika terdapat sebuah argumen tunggal, dan itu adalah sebuah string, lalu itu akan diurai secara otomatis. Algoritmanya sama dengan yang digunakan `Date.parse`, kita akan pelajari itu nanti.\n\n ```js run\n let date = new Date(\"2017-01-26\");\n alert(date);\n // Waktunya belum di set, jadi itu diasumsikan tengah malam GMT dan\n // disesuaikan menurut zona waktu dimana kodenya berjalan\n // Jadi hasilnya mungkin bisa\n // Kamis Jan 26 2017 11:00:00 GMT+1100 (Waktu timur siang hari Australia )\n // atau\n // Rabu Jan 25 2017 16:00:00 GMT-0800 (Waktu standar pasifik)\n ```\n\n`new Date(year, month, date, hours, minutes, seconds, ms)`\n: Membuat waktu dengan komponen yang diberikan dari zona waktu lokal. Hanya dua argument pertama yang wajib.\n\n - `Tahun`nya harus mempunyai 4 angka: `2013` boleh, `98` tidak boleh.\n - Perhitungan `Bulan`nya dimulai dari `0` (Jan), sampai `11` (Des).\n - Parameter `date` sebenarnya adalah hari dari bulan, jika tidak ada maka akan diasumsikan `1`.\n - Jika `jam/menit/detik/milidetik` tidak ada, mereka akan diasumsikan sama dengan `0`.\n\n Contoh:\n\n ```js\n new Date(2011, 0, 1, 0, 0, 0, 0); // 1 Jan 2011, 00:00:00\n new Date(2011, 0, 1); // sama, jam dan yang lainnya secara default adalah 0\n ```\n\n Presisi paling minimal adalah 1ms (1/1000 detik):\n\n ```js run\n let date = new Date(2011, 0, 1, 2, 3, 4, 567);\n alert( date ); // 1.01.2011, 02:03:04.567\n ```\n\n## Mengakses komponen tanggal\n\nTerdapat beberapa metode untuk mengakses tahun, bulan dan lainnya dari objek `Date`:\n\n[getFullYear()](mdn:js/Date/getFullYear)\n: Mendapatkan tahun (4 angka)\n\n[getMonth()](mdn:js/Date/getMonth)\n: Mendapatkan bulan, **dari 0 sampai 11**.\n\n[getDate()](mdn:js/Date/getDate)\n: mendapatkan hari dari bulan, dari 1 sampai 31, nama dari metodenya sedikit terlihat aneh.\n\n[getHours()](mdn:js/Date/getHours), [getMinutes()](mdn:js/Date/getMinutes), [getSeconds()](mdn:js/Date/getSeconds), [getMilliseconds()](mdn:js/Date/getMilliseconds)\n: Mendapatkan komponen-komponen yang bersangkutan.\n\n```warn header=\"Bukan `getYear()`, Tapi `getFullYear()`\"\nBanyak mesin Javascript mengimplementasikan metode yang tidak-standar `getYear()`. Metode ini sudah usang. Itu terkadang mengembalikan tahun dengan 2-angka. Tolong jangan gunakan itu. Gunakan `getFullYear()` untuk tahun.\n```\n\nSebagai tambahan, kita bisa mendapatkan hari dari minggu:\n\n[getDay()](mdn:js/Date/getDay)\n: Dapatkan hari dari minggu, dimulai dari `0` (Minggu) to `6` (Sabtu). Hari pertama akan selalu Minggu, di beberapa negara bukanlah minggu, dan tidak bisa diubah.\n\n**Semua metode diatas mengembalikan komponen yang bersangkutan dengan zona waktu lokal.**\n\nJuga terdapat pasangan-UTC, yang mengembalikan hari bulan, tahun dan lainnya untuk zona waktu UTC+0: [getUTCFullYear()](mdn:js/Date/getUTCFullYear), [getUTCMonth()](mdn:js/Date/getUTCMonth), [getUTCDay()](mdn:js/Date/getUTCDay). Hanya dengan memasukan `\"UTC\"` tepat setelah `\"get\"`.\n\nJika zona waktu lokal kamu diubah menjadi zona yang berhubungan dengan UTC, maka kode dibawah akan menunjukan waktu yang berbeda.\n\n```js run\n// tanggal sekarang\nlet date = new Date();\n\n// jam didalam zona waktu kamu sekarang\nalert( date.getHours() );\n\n// jam di zona waktu UTC+0 (waktu london tanpa waktu musim panas)\nalert( date.getUTCHours() );\n```\n\nDisamping metode yang diberikan, disana terdapat dua yang spesial yang tidak memiliki variasi waktu UTC:\n\n[getTime()](mdn:js/Date/getTime)\n: Mengembalikan timestamp untuk tanggal -- sebuah angka dari milidetik yang telah terlewat sejak 1 Januari 1970 UTC+0\n\n[getTimezoneOffset()](mdn:js/Date/getTimezoneOffset)\n: Mengembalikan perbedaan diantara UTC dan zona waktu lokal, dalam menit:\n\n ```js run\n // jika kamu berada didalam zona waktu UTC-1, mengeluarkan 60\n // jika kamu berada di zona waktu UTC+3, mengeluarkan -180\n alert( new Date().getTimezoneOffset() );\n\n ```\n\n## Menyetel komponen tanggal\n\nMetode berikut memperbolehkan kita untuk menyetel komponen tanggal/waktu:\n\n- [`setFullYear(year, [month], [date])`](mdn:js/Date/setFullYear)\n- [`setMonth(month, [date])`](mdn:js/Date/setMonth)\n- [`setDate(date)`](mdn:js/Date/setDate)\n- [`setHours(hour, [min], [sec], [ms])`](mdn:js/Date/setHours)\n- [`setMinutes(min, [sec], [ms])`](mdn:js/Date/setMinutes)\n- [`setSeconds(sec, [ms])`](mdn:js/Date/setSeconds)\n- [`setMilliseconds(ms)`](mdn:js/Date/setMilliseconds)\n- [`setTime(milliseconds)`](mdn:js/Date/setTime) (setel seluruh tanggal dengan milidetik sejak 01.01.1970 UTC)\n\nSemuanya kecuali salah satunya yaitu `setTime()` mempunyai varian-UTC, contoh: `setUTCHours()`.\n\nSeperti yang bisa kita lihat, beberapa metode bisa menyetel beberapa komponen sekaligus, untuk contoh `setHours`. Komponen yang tidak disebutkan tidak akan diubah.\n\nContoh:\n\n```js run\nlet today = new Date();\n\ntoday.setHours(0);\nalert(today); // masih hari ini, tapi jamnya diubah menjadi 0\n\ntoday.setHours(0, 0, 0, 0);\nalert(today); // masih hari ini, tapi tepat 00:00:00\n```\n\n## Koreksi otomatis\n\n*Koreksi otomatis* adalah fitur yang sangat berguna dari objek `Date`. Kita bisa menyetel nilai yang diluar jangkauan, dan itu akan menyesuaikan dirinya sendiri.\n\nContoh:\n\n```js run\nlet date = new Date(2013, 0, *!*32*/!*); // 32 Jan 2013 ?!?\nalert(date); // ...adalah 1st Feb 2013!\n```\n\nkomponen tanggal yang diluar jangkauan akan diganti secara otomatis.\n\nKita bisa berkata untuk menambah tanggal \"28 feb 2016\" dengan 2 hari. Itu mungkin akan \"2 maret\" atau \"1 maret\" didalam kasus tahun kabisat. Kita tidak perlu memikirkan hal itu. Tinggal tambah 2 hari. Objek `Date` akan melakukan sisanya:\n\n```js run\nlet date = new Date(2016, 1, 28);\n*!*\ndate.setDate(date.getDate() + 2);\n*/!*\n\nalert( date ); // 1 Mar 2016\n```\n\nFitur itu sering digunakan untuk mendapatkan tanggal setelah diberikan waktu yang ditentukan, coba dapatkan tanggal \"70 detik setelah saat ini\":\n\n```js run\nlet date = new Date();\ndate.setSeconds(date.getSeconds() + 70);\n\nalert( date ); // menampilkan tanggal yang benar\n```\n\nKita juga bisa menyetel nol atau bahkan nilai negatif. Contoh:\n\n```js run\nlet date = new Date(2016, 0, 2); // 2 Jan 2016\n\ndate.setDate(1); // setel hari pertama dari bulan\nalert( date );\n\ndate.setDate(0); // kurangi 1 hari, jadi diasumsikan hari terakhir di bulan sebelumnya\n\nalert( date ); // 31 Desember 2015\n```\n\n## Tanggal menjadi angka, perbedaan tanggal\n\n\nKetika sebuah objek `Date` diubah menjadi angka, itu menjadi timestamp sama seperti `date.getTime()`:\n\n```js run\nlet date = new Date();\nalert(+date); // angka dari milidetik, sama seperti date.getTime()\n```\n\nEfek yang perlu diperhatikan: tanggal bisa dikurangi, hasilnya adalah perbedaan dalam milidetik.\n\nHal itu bisa gunakan untuk mengukur waktu:\n\n```js run\nlet start = new Date(); // mulai pengukuran waktu\n\n// lakukan perhitungannya\nfor (let i = 0; i < 100000; i++) {\n let doSomething = i * i * i;\n}\n\nlet end = new Date(); // akhiri pengukuran waktu\n\nalert( `The loop took ${end - start} ms` );\n```\n\n## Date.now()\n\nJika kita ingin mengukur waktu, kita tidak butuh objek `Date`.\n\nTerdapat metode spesial `Date.now()` yang mengembalikan timestamp saat ini.\n\nItu secara semaktik sama dengan `new Date().getTime()`, tapi itu tidak menciptakan sebuah perantara objek `Date`. Jadi itu lebih cepat dan tidak menambah beban pembuangan sampah.\n\nKebanyakan itu digunakan untuk kenyamanan atau ketika performansi menjadi hal yang diperhatikan, seperti permainan didalam Javascript atau aplikasi yang terspesialisasi lainnya.\n\nJadi ini mungkin lebih baik:\n\n```js run\n*!*\nlet start = Date.now(); // milidetik dihitung dari 1 Januari 1970\n*/!*\n\n// lakukan perhitungannya\nfor (let i = 0; i < 100000; i++) {\n let doSomething = i * i * i;\n}\n\n*!*\nlet end = Date.now(); // selesai\n*/!*\n\nalert( `The loop took ${end - start} ms` ); // kurangi angka, bukan tanggal\n```\n\n## Menguji kemampuan / Benchmarking\n\nJika kita ingin kemampuan yang dapat diandalkan dari fungsi yang haus akan sumberdaya CPU, kita harus hati-hati.\n\nContoh, coba kita bandingkan dua fungsi yang mengkalkulasikan perbedaan diantara dua tanggal: yang mana yang lebih cepat?\n\nPengukurang performa seperti itu sering disebut dengan \"benchmarks\".\n\n```js\n// kita punya date1 dan date2, fungsi yang mana yang lebih cepat mengembalikan perbedaannya dalam milidetik?\nfunction diffSubtract(date1, date2) {\n return date2 - date1;\n}\n\n// atau\nfunction diffGetTime(date1, date2) {\n return date2.getTime() - date1.getTime();\n}\n```\n\nkedua fungsi itu melakukan hal yang sama persis, tapi satu dari mereka menggunakan `date.getTime()` secara eksplisit untuk mendapatkan tanggal dalam milidetik, dan lainnya menggunakan perubahan tanggal-ke-angka. Hasil mereka akan selalu sama.\n\nJadi, yang mana yang lebih cepat?\n\nCara sederhananya mungkin menjalankan mereka beberapa kali dan menghitung perbedaan waktunya. Untuk kasus ini, fungsi sangatlah sederhana, jadi kita hanya harus melakukannya setidaknya 100000 kali.\n\nAyo kita hitung:\n\n```js run\nfunction diffSubtract(date1, date2) {\n return date2 - date1;\n}\n\nfunction diffGetTime(date1, date2) {\n return date2.getTime() - date1.getTime();\n}\n\nfunction bench(f) {\n let date1 = new Date(0);\n let date2 = new Date();\n\n let start = Date.now();\n for (let i = 0; i < 100000; i++) f(date1, date2);\n return Date.now() - start;\n}\n\nalert( 'Time of diffSubtract: ' + bench(diffSubtract) + 'ms' );\nalert( 'Time of diffGetTime: ' + bench(diffGetTime) + 'ms' );\n```\n\nWow! Menggunakan `getTime()` lebih cepat! itu karena disana tidak terdapat perubahan tipe, itu akan membuat mesinnya lebih mudah dalam mengoptimasi.\n\nOke, kita punya sesuatu. Tapi itu bukanlah sebuah pengujian kemampuan yang bagus.\n\nBayangkan itu pada saat menjalankan `bench(diffSubtract)` CPU nya sedang melakukan sesuatu yang lain, dan itu mengambil sumberdaya nya. Dan pada saat menjalankan `bench(diffGetTime)` pekerjaanya telah selesai.\n\nSebuah skenario nyata untuk Sistem Operasi multi-proses yang modern.\n\nSebagai sebuah hasil, pengujian kemampuan pertama mempunyai sedikit sumberdaya CPU daripada yang kedua. Itu mungkin akan mengakibatkan hasil menjadi keliru.\n\n**Untuk pengujian yang lebih dapat diandalkan, seluruh pengujian harus dijalankan beberapa kali.**\n\nContoh, seperti ini:\n\n```js run\nfunction diffSubtract(date1, date2) {\n return date2 - date1;\n}\n\nfunction diffGetTime(date1, date2) {\n return date2.getTime() - date1.getTime();\n}\n\nfunction bench(f) {\n let date1 = new Date(0);\n let date2 = new Date();\n\n let start = Date.now();\n for (let i = 0; i < 100000; i++) f(date1, date2);\n return Date.now() - start;\n}\n\nlet time1 = 0;\nlet time2 = 0;\n\n*!*\n// jalankan bench(upperSlice) dan bench(upperLoop) setiap 10 kali bergantian\nfor (let i = 0; i < 10; i++) {\n time1 += bench(diffSubtract);\n time2 += bench(diffGetTime);\n}\n*/!*\n\nalert( 'Total time for diffSubtract: ' + time1 );\nalert( 'Total time for diffGetTime: ' + time2 );\n```\n\nMesin Javascript yang modern mulai menggunakan optimasi yang tinggi hanya untuk \"hot code\" yang dieksekusi beberapa kali (tidak butuh untuk optimasi hal yang jarang dieksekusi). Jadi, dalam contoh diatas, eksekusi pertama tidak benar-benar di optimasi. Kita mungkin butuh menambah sebuah pemanasan:\n\n```js\n// ditambahkan untuk \"memanaskan\" terlebih dahulu perulangan utama\nbench(diffSubtract);\nbench(diffGetTime);\n\n// sekarang benchmark\nfor (let i = 0; i < 10; i++) {\n time1 += bench(diffSubtract);\n time2 += bench(diffGetTime);\n}\n```\n\n```warn header=\"Berhati-hati saat melakukan microbenchmarking/pengujian kemampuan micro\"\nMesin Javascript modern melakukan banyak optimasi. mereka mungkin merekayasa hasil dari \"test buatan\" dibandingkan dengan \"pemakaian normal\", terutama ketika kita mengukur kemampuan sesuatu yang sangat kecil, seperti bagaimana operator bekerja, atau fungsi bawaan. Jadi jika kamu sangat serius ingin mengerti tentang performansi, maka pelajarilah bagaiman mesin Javascript bekerja. dan maka kamu mungkin tidak butuh microbenchmarking sama sekali\n\nKumpulan artikel yang bagus tentang V8 bisa ditemukan di .\n```\n\n## Date.parse dari sebuah string\n\nMetode [Date.parse(str)](mdn:js/Date/parse) bisa membaca tanggal dari sebuah string.\n\nBentuk dari string haruslah: `YYYY-MM-DDTHH:mm:ss.sssZ`, dimana:\n\n- `YYYY-MM-DD` -- adalah tanggal: tahun-bulan-hari.\n- Karakter dari `\"T\"` digunakan sebagai pembatas.\n- `HH:mm:ss.sss` -- adalah waktu: jam, menit, detik dan milidetik.\n- Bagian opsional `'Z'` menandakan zona waktu dalam format `+-hh:mm`. Huruf tunggal `Z` menandakan UTC+0.\n\nVarian yang lebih pendek juga bisa, seperti `YYYY-MM-DD` atau `YYYY-MM` atau bahkan `YYYY`.\n\nPemanggilan `Date.parse(str)` mengolah string dalam bentuk yang diberikan dan mengembalikan timestamp (angka dalam milidetik dari 1 Januari 1970 UTC+0). Jika formatnya tidak valid, akan mengembalikan `NaN`.\n\nContoh:\n\n```js run\nlet ms = Date.parse('2012-01-26T13:51:50.417-07:00');\n\nalert(ms); // 1327611110417 (timestamp)\n```\n\nKita bisa secara instan membuat sebuah objek `new Date` dari timestamp:\n\n```js run\nlet date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') );\n\nalert(date); \n```\n\n## Ringkasan\n\n- Tanggal dan waktu dalam Javascript direpresentasikan oleh objek [Date](mdn:js/Date). Kita tidak bisa membuat \"hanya tanggal\" atau \"hanya waktu\": objek `Date` selalu membawa keduanya. \n- Bulan dihitung dari nol (ya, Januari adalah bulan ke-nol)\n- Hari-hari di minggu di `getDay()` juga dihitung dari nol (yang mana adalah minggu).\n- `Date` mengkoreksi sendiri secara otomatis ketika komponen diluar jangkauan di-set. Bagus unduk menambahkan/mengurangi hari/bulan/jam.\n- Tanggal bisa dikurangi, memberikan perbedaannya dalam milidetik. Itu karena `Date` menjadi timestamp ketika diubah menjadi angka.\n- Gunakan `Date.now()` untuk mendapatkan timestamp dengan cepat.\n\nPerhatikan tidak seperti sistem lainnya, timestamp didalam Javascript adalah dalam milidetik, bukan dalam detik.\n\nTerkadang kita ingin pengukuran yang lebih teliti. Javascript sendiri tidak mendukung cara untuk mengukur waktu didalam microdetik (1 juta dalam satu detik), tapi kebanyakan lingkungan menyediakannya. Contoh, peramban punya [performance.now()](mdn:api/Performance/now) yang memberikan angka milidetik dari awal halaman dimuat dengan ketepatan microdetik (3 angka setelah titik):\n\n```js run\nalert(`Loading started ${performance.now()}ms ago`);\n// Sesuatu seperti: \"Loading started 34731.26000000001ms ago\"\n// .26 adalah microdetik (260 microdetik)\n// lebih dari 3 angka setelah titik desimal adalah presisi error, tapi hanya 3 yang benar\n```\n\nNode.js punya modul `microtime` dan cara lainnya. Secara teknis, hampir kebanyakan perangkat dan environment memperbolehkan untuk mendapatkan presisi, itu hanya bukan didalam `Date`." }, { "path": "1-js/05-data-types/12-json/1-serialize-object/solution.md", "content": "\n\n```js\nlet user = {\n name: \"John Smith\",\n age: 35\n};\n\n*!*\nlet user2 = JSON.parse(JSON.stringify(user));\n*/!*\n```\n\n" }, { "path": "1-js/05-data-types/12-json/1-serialize-object/task.md", "content": "nilai penting: 5\n\n---\n\n# Ubah objek menjadi JSON dan sebaliknya\n\nUbahlah `user` menjadi JSON dan kemudian baca kembali menjadi variabel lain.\n\n```js\nlet user = {\n name: \"John Smith\",\n age: 35\n};\n```\n" }, { "path": "1-js/05-data-types/12-json/2-serialize-event-circular/solution.md", "content": "\n```js run\nlet room = {\n number: 23\n};\n\nlet meetup = {\n title: \"Conference\",\n occupiedBy: [{name: \"John\"}, {name: \"Alice\"}],\n place: room\n};\n\nroom.occupiedBy = meetup;\nmeetup.self = meetup;\n\nalert( JSON.stringify(meetup, function replacer(key, value) {\n return (key != \"\" && value == meetup) ? undefined : value;\n}));\n\n/* \n{\n \"title\":\"Conference\",\n \"occupiedBy\":[{\"name\":\"John\"},{\"name\":\"Alice\"}],\n \"place\":{\"number\":23}\n}\n*/\n```\n\nDisini kita juga perlu untuk menguji `key==\"\"` untuk tidak memasukkan panggilan pertama dimana properti tersebut normal ketika `value` adalah `meetup`.\n\n" }, { "path": "1-js/05-data-types/12-json/2-serialize-event-circular/task.md", "content": "nilai penting: 5\n\n---\n\n# Tidak memasukkan referensi balik\n\nDalam kasus-kasus sederhana tentang referensi sirkular, kita bisa tidak memasukkan sebuah properti tertentu dari proses serialisasi berdasarkan namanya.\n\nNamun terkadang kita tidak bisa menggunakan nama saja, sebagaimana bisa saja properti tersebut menggunakan referensi sirkular dan (berfungsi sebagai) properti normal. Jadi kita bisa memeriksa properti berdasarkan nilainya.\n\nTulis fungsi `replacer` untuk me-*stringify* semuanya, tetapi menghilangkan propertii yang me-referensi ke `meetup`:\n\n```js run\nlet room = {\n number: 23\n};\n\nlet meetup = {\n title: \"Conference\",\n occupiedBy: [{name: \"John\"}, {name: \"Alice\"}],\n place: room\n};\n\n*!*\n// referensi-referensi sirkular\nroom.occupiedBy = meetup;\nmeetup.self = meetup;\n*/!*\n\nalert( JSON.stringify(meetup, function replacer(key, value) {\n /* kodemu */\n}));\n\n/* hasil yang diharapkan yakni:\n{\n \"title\":\"Conference\",\n \"occupiedBy\":[{\"name\":\"John\"},{\"name\":\"Alice\"}],\n \"place\":{\"number\":23}\n}\n*/\n```\n" }, { "path": "1-js/05-data-types/12-json/article.md", "content": "# Metode JSON, toJSON\n\nAnggap saja kita memiliki sebuah objek yang kompleks, dan kita ingin mengonversinya menjadi sebuah *string*, mengirimnya melalui sebuah jaringan atau hanya menghasilkan *string* tersebut untuk tujuan pencatatan.\n\nSecara alami, *string* seperti contoh di atas seharusnya sudah termasuk semua properti-properti penting di dalamnya.\n\nKita bisa mengimplementasikan konversi tersebut seperti ini:\n\n```js run\nlet user = {\n name: \"John\",\n age: 30,\n\n*!*\n toString() {\n return `{name: \"${this.name}\", age: ${this.age}}`;\n }\n*/!*\n};\n\nalert(user); // {name: \"John\", age: 30}\n```\n\n...Tetapi dalam proses pengembangan, properti-properti baru ditambahkan, properti-properti yang lama diganti nama baru dan dipindahkan. Memperbarui seperti `toStrong` setiap saat bisa jadi sangat menyebalkan. Kita bisa coba untuk memberi properti-properti tersebut perulangan dalam proses pengembangan, tetapi apa yang terjadi jika objeknya kompleks dan memiliki objek yang bersarang (*nested*) dalam propertinya? Kita pastinya perlu untuk mengimplementasikan konversinya juga.\n\nUntungnya, (kita) tak perlu untuk menulis kode untuk menangani semua hal ini. Tugas tersebut sudah terpecahkan solusinya.\n\n## JSON.stringify\n\n[JSON](http://en.wikipedia.org/wiki/JSON) (*JavaScript Object Notation*) adalah sebuah format umum yang merepresentasikan nilai-nilai dan objek. JSON dideskripsikan sebagaimana dalam standar [RFC 4627](http://tools.ietf.org/html/rfc4627). Awalnya JSON dibuat untuk JavaScript, tapi banyak bahasa pemrograman lain memiliki *library* untuk menangani JSON juga. Oleh karena itu, kini jadi mudah untuk menggunakan JSON untuk tujuan pertukaran data ketika klien menggunakan JavaScript dan server ditulis menggunakan bahasa pemrograman Ruby/PHP/Java/apapun itu.\n\nJavaScript menyediakan metode-metode seperti:\n\n- `JSON.stringify` untuk mengoversi objek menjadi JSON.\n- `JSON.parse` untuk mengonversi balik JSON menjadi sebuah objek.\n\nFor instance, here we `JSON.stringify` a student:\n```js run\nlet student = {\n name: 'John',\n age: 30,\n isAdmin: false,\n courses: ['html', 'css', 'js'],\n wife: null\n};\n\n*!*\nlet json = JSON.stringify(student);\n*/!*\n\nalert(typeof json); // we've got a string!\n\nalert(json);\n*!*\n/* JSON-encoded object:\n{\n \"name\": \"John\",\n \"age\": 30,\n \"isAdmin\": false,\n \"courses\": [\"html\", \"css\", \"js\"],\n \"wife\": null\n}\n*/\n*/!*\n```\n\nMetode `JSON.stringify(student)` mengambil objek dan mengonversikan objek tersebut menjadi sebuah *string*.\n\nHasil *string* `json` disebut sebagai sebuah objek *JSON-encoded* atau *serialized* atau *stringified* atau *marshalled*. Kita kini siap utnuk mengirimnya melalui jaringan atau menyimpannya ke sebuah penyimpanan data.\n\nMohon diingat bahwa sebuah objek *JSON-encoded* memiliki beberapa perbedaan penting dari objek secara harfiah:\n\n- *String* menggunakan tanda kutip. Dalam JSON tidak menggunakan tanda petik atau *backtick*. Jadi `'John'` menjadi `\"John\"`.\n- Nama-nama properti objek diberi tanda kutip juga. Hal ini wajib dilakukan. Jadi `age:30` menjadi `\"age\":30`.\n\n`JSON.stringify` bisa juga bisa diterapkan ke (tipe data) *primitive*.\n\nJSON mendukung tipe-tipe data berikut ini:\n\n- Objek `{ ... }`\n- *Array* `[ ... ]`\n- *Primitive*:\n - *string*,\n - angka (*number*),\n - nilai-nilai *boolean* `true/false`,\n - `null`.\n\nSebagai contoh:\n\n```js run\n// sebuah number(angka) dalam JSON hanyalah sebuah number\nalert( JSON.stringify(1) ) // 1\n\n// sebuah string dalam JSON tetaplah sebuah string, namun diberi tanda kutip\nalert( JSON.stringify('test') ) // \"test\"\n\nalert( JSON.stringify(true) ); // true\n\nalert( JSON.stringify([1, 2, 3]) ); // [1,2,3]\n```\n\nJSON adalah spessifikasi yang hanya terdiri dari data dan tidak terlekat bahasa pemrograman tertentu (*data-only language-independent*), jadi beberapa properti objek yang spesifik pada JavaScript akan dilewati oleh `JSON.stringify`.\n\nProperti-properti objek yang spesifik pada JavaScript tersebut yakni:\n\n- Properti fungsi (metode-metode).\n- Properti simbolis.\n- Propert yang menyimpan `undefined`.\n\n```js run\nlet user = {\n sayHi() { // diabaikan\n alert(\"Hello\");\n },\n [Symbol(\"id\")]: 123, // ignored\n something: undefined // diabaikan\n};\n\nalert( JSON.stringify(user) ); // {} (objek kosong)\n```\n\nBiasanya hal tersebut tidak masalah. Jika itu tidak kita inginkan, kita akan melihat bagaimana cara untuk meng-kustomisasi proses tersebut.\n\nHal bagusnya adalah objek-objek yang *nested* secara otomatis didukung dan dikonversikan.\n\nContohnya:\n\n```js run\nlet meetup = {\n title: \"Conference\",\n*!*\n room: {\n number: 23,\n participants: [\"john\", \"ann\"]\n }\n*/!*\n};\n\nalert( JSON.stringify(meetup) );\n/* Keseluruhan struktur di-stringify:\n{\n \"title\":\"Conference\",\n \"room\":{\"number\":23,\"participants\":[\"john\",\"ann\"]},\n}\n*/\n```\n\nBatasan penting: tidak boleh ada rujukan/referensi yang sirkular/berputar-putar.\n\nContohnya:\n\n```js run\nlet room = {\n number: 23\n};\n\nlet meetup = {\n title: \"Conference\",\n participants: [\"john\", \"ann\"]\n};\n\nmeetup.place = room; // meetup mereferensikan room \nroom.occupiedBy = meetup; // room mereferensikan meetup\n\n*!*\nJSON.stringify(meetup); // Error: Converting circular structure to JSON\n*/!*\n```\n\nDisini, konversi gagal, karena adanya referensi yang memutar/sirkular: `room.occupiedBy` mereferensikan ke `meetup`, dan `meetup.place` mereferensikan ke `room`:\n\n![](json-meetup.svg)\n\n\n## Mengecualikan dan mengubah: *replacer*\n\nSintaks lengkap dari `JSON.stringify` adalah:\n\n```js\nlet json = JSON.stringify(value[, replacer, space])\n```\n\n*value*\n: Sebuah nilai untuk di-*encode*.\n\n*replacer*\n: *Array* properti untuk di-*encode* atau sebuah fungsi pemetaan `function(key, value)`.\n\n*space*\n: Jumlah ruang yang digunakan untuk proses *formatting*.\n\nSeringkali, `JSON.stringify` digunakan dengan hanya sebuah argumen pertama. Tapi jika kita perlu untuk menyetel dengan baik proses pergantian tersebut, seperti menyaring referensi-referensi sirkular, kita dapat menggunakan argumen kedua dari `JSON.stringify`.\n\nJika kita mengoper sebuah *array* properti ke proses tersebut, hanya properti-properti berikut ini yang akan di-*encode*.\n\nSebagai contoh:\n\n```js run\nlet room = {\n number: 23\n};\n\nlet meetup = {\n title: \"Conference\",\n participants: [{name: \"John\"}, {name: \"Alice\"}],\n place: room // meetup mereferensikan room\n};\n\nroom.occupiedBy = meetup; // room mereferensikan meetup\n\nalert( JSON.stringify(meetup, *!*['title', 'participants']*/!*) );\n// {\"title\":\"Conference\",\"participants\":[{},{}]}\n```\n\nKini kita bisa jadi terlalu ketat (dalam mendeklarasikan). Daftar properti tersbeut diterapkan ke keseluruhan struktur objek. Jadi objek-objek dalam `participants` kosong, karena `name` tidak ada dalam daftar.\n\nMari memasukkan semua properti ke dalam daftar kecuali properti `room.occupiedBy` yang dapat menyebabkan referensi sirkular:\n\n```js run\nlet room = {\n number: 23\n};\n\nlet meetup = {\n title: \"Conference\",\n participants: [{name: \"John\"}, {name: \"Alice\"}],\n place: room // meetup mereferensikan room\n};\n\nroom.occupiedBy = meetup; // room mereferensikan meetup\n\nalert( JSON.stringify(meetup, *!*['title', 'participants', 'place', 'name', 'number']*/!*) );\n/*\n{\n \"title\":\"Conference\",\n \"participants\":[{\"name\":\"John\"},{\"name\":\"Alice\"}],\n \"place\":{\"number\":23}\n}\n*/\n```\n\nKini semuanya kecuali `occupiedBy` sudah di-serialisasi. Tapi daftar propertinya masih cukup panjang.\n\nUntungnya, kita bisa menggunakan sebuah fungsi ketimbang sebuah *array* sebagai `replacer`.\n\nFungsi tersebut akan dipanggil pada setiap pasangan `(key, value)` dan mengembalikan nilai \"replaced\", yang mana akan digunakan dan bukan nilai aslinya. Atau `undefined` jika nilai tersebut diatur agar dilewatkan.\n\nDalam kasus kita, kita bisa mengembalikan `value` \"as is\" untuk semua hal kecuali `occupiedBy`. Untuk mengabaikan `occupiedBy`, kode berikut ini mengembalikan `undefined`:\n\n```js run\nlet room = {\n number: 23\n};\n\nlet meetup = {\n title: \"Conference\",\n participants: [{name: \"John\"}, {name: \"Alice\"}],\n place: room // meetup mereferensikan room\n};\n\nroom.occupiedBy = meetup; // room mereferensikan meetup\n\nalert( JSON.stringify(meetup, function replacer(key, value) {\n alert(`${key}: ${value}`);\n return (key == 'occupiedBy') ? undefined : value;\n}));\n\n/* pasangan key:value yang menuju ke replacer:\n: [object Object]\ntitle: Conference\nparticipants: [object Object],[object Object]\n0: [object Object]\nname: John\n1: [object Object]\nname: Alice\nplace: [object Object]\nnumber: 23\noccupiedBy: [object Object]\n*/\n```\n\nMohon diingat, bahwa fungsi `replacer` mendapatkan setiap pasang *key/value* termasuk objek-objek *nested* dan *item* dalam *array*. Hal tersebut dapat diterapakn berulang (*recursive*). Nilai dari `this` dalam `replacer` adalah objek yang mengendung properti yang sekarang.\n\nPanggilan pertama itu khusus. Panggilan pertama tersebut dibuat menggunakan sebuah \"wrapper object\" yang khusus: `{\"\": meetup}`. Dengan kata lain, pasangan `(key, value)` pertama memiliki sebuah kunci kosong, dan nilainya adalah objek sasaran seutuhnya. Itulah mengapa baris pertama dalam contoh di atas adalah `\":[object Object]\"`.\n\nIde tersebut adalah untuk menyediakan sebanyak mungkin kemampuan pada `replacer`: ide tersebut punya sebuah kesempatan untuk menganalisis dan menggantikan/melewatkan hingga keseluruhan objek jika perlu.\n\n\n## Proses *Formatting*: *space*\n\nArgumen ke-tiga dari `JSON.stringify(value, replacer, space)` adalah jumlah ruang (*space*) yang digunakan untuk *formatting* yang apik.\n\nSebelumnya, semua objek yang di-*stringify* tidak memiliki ruang tambahan. Hal tersebut tidak masalah jika kita ingin mengirim sebuah objek melalui sebuah jaringan. Argumen `space` digunakan secara ekslusif demi sebuah hasil yang apik.\n\nDi sini `space = 2` memberitahukan JavaScript untuk menunjukkan objek-objek *nested* pada beberapa baris, dengan kedalaman (*indentation*) sebanyak 2 ruang (*space*) di dalam sebuah objek:\n\n```js run\nlet user = {\n name: \"John\",\n age: 25,\n roles: {\n isAdmin: false,\n isEditor: true\n }\n};\n\nalert(JSON.stringify(user, null, 2));\n/* indent dengan dua spasi:\n{\n \"name\": \"John\",\n \"age\": 25,\n \"roles\": {\n \"isAdmin\": false,\n \"isEditor\": true\n }\n}\n*/\n\n/* untuk JSON.stringify(user, null, 4) hasilnya kan lebih menjorok ke dalam:\n{\n \"name\": \"John\",\n \"age\": 25,\n \"roles\": {\n \"isAdmin\": false,\n \"isEditor\": true\n }\n}\n*/\n```\n\nParameter `space` digunakan hanya untuk pencatatan dan tujuan-tujuan yang bertujuan menghasilkan *output* yang apik.\n\n## \"toJSON\" khusus\n\nSeperti `toString` untuk konversi *string*, sebuah objek dapat menyediakan metode `toJSON` untuk konversi ke JSON. `JSON.stringify` secara otomatis akan memanggil metode tersebut jika tersedia.\n\nContohnya:\n\n```js run\nlet room = {\n number: 23\n};\n\nlet meetup = {\n title: \"Conference\",\n date: new Date(Date.UTC(2017, 0, 1)),\n room\n};\n\nalert( JSON.stringify(meetup) );\n/*\n {\n \"title\":\"Conference\",\n*!*\n \"date\":\"2017-01-01T00:00:00.000Z\", // (1)\n*/!*\n \"room\": {\"number\":23} // (2)\n }\n*/\n```\n\nDi sini kita bisa lihat bahwa `date` `(1)` menjadi sebuah *string*. Itu karena semua tanggal memiliki sebuah metode `toJSON` yang sudah *built-in* yang mana mengembalikan *string* seperti itu.\n\nKini mari menambahkan sebuah `toJSON` khusus untuk objek kita `room` `(2)`:\n\n```js run\nlet room = {\n number: 23,\n*!*\n toJSON() {\n return this.number;\n }\n*/!*\n};\n\nlet meetup = {\n title: \"Conference\",\n room\n};\n\n*!*\nalert( JSON.stringify(room) ); // 23\n*/!*\n\nalert( JSON.stringify(meetup) );\n/*\n {\n \"title\":\"Conference\",\n*!*\n \"room\": 23\n*/!*\n }\n*/\n```\n\nSeperti yang kita lihat, `toJSON` digunakan untuk memanggil langsung `JSON.stringify(room)` serta ketikan `room` bersarang (*nested*) dalam objek lain yang ter-*encode*.\n\n\n## JSON.parse\n\nUntuk men-*decode* sebuah *string* JSON, kita memerlukan sebuah metode lain bernama [JSON.parse](mdn:js/JSON/parse).\n\nSintaksnya:\n```js\nlet value = JSON.parse(str, [reviver]);\n```\n\n*str*\n: *string* JSON untuk di-*parse*.\n\n*reviver*\n: Fungsi opsional (*key,value*) yang akan dipanggil setiap pasang `(key, value)` dan dapat mengubah nilai.\n\nSebagai contoh:\n\n```js run\n// array yang di-stringify\nlet numbers = \"[0, 1, 2, 3]\";\n\nnumbers = JSON.parse(numbers);\n\nalert( numbers[1] ); // 1\n```\n\nAtau untuk objek-objek yang *nested*:\n\n```js run\nlet userData = '{ \"name\": \"John\", \"age\": 35, \"isAdmin\": false, \"friends\": [0,1,2,3] }';\n\nlet user = JSON.parse(userData);\n\nalert( user.friends[1] ); // 1\n```\n\nJSON bisa saja menjadi kompleks seiring jika perlu, objek-objek dan *array* bisa sudah termasuk objek-objek lain serta *array* lain. Namun, mereka (objek dan *array* lain tersebut) harus mematuhi format JSON yang sama.\n\nBerikut ini adalah beberapa kesalahan umum saat penulisan langsung JSON (terkadang kita harus menuliskannya untuk tujuan *debugging*):\n\n```js\nlet json = `{\n *!*name*/!*: \"John\", // kesalahan: nama properti tanpa tanda kutip\n \"surname\": *!*'Smith'*/!*, // kesalahan: nilai menggunakan tanda petik (harus tanda kutip)\n *!*'isAdmin'*/!*: false // kesalahan: menggunakan tanda petik pada key (harus tanda kutip)\n \"birthday\": *!*new Date(2000, 2, 3)*/!*, // kesalahan: tidak boleh ada \"new\", hanya berupa nilai saja\n \"friends\": [0,1,2,3] // tidak ada kesalahan\n}`;\n```\n\nSelaain itu semua, JSON tidak mendukung komentar. Menambahkan sebuah komentar ke JSON akan membuat JSON tersebut tidak valid.\n\nTerdapat format lain yang dinamakan [JSON5](http://json5.org/), yang mengizinkan *key* tanpa tanda kutip, adanya komentar dan lain-lain. Tapi ini adalah *library* yang berdiri sendiri, tidak terdapat dalam spesifikasi bahasa pemrograman.\n\nJSON biasa memang seketat itu bukan karena para pengembangnya malas, tetapi agar implementasinya mudah, dapat diandalkan dan cepat saat proses *parsing* algoritma.\n\n## Menggunakan *reviver*\n\nBayangkan, kita mendapat sebuah objek `meetup` yang telah di-*stringify* dari server.\n\nObjek tersebut akan terlihat seperti ini:\n\n```js\n// title: (judul meetup), date: (tanggal meetup)\nlet str = '{\"title\":\"Conference\",\"date\":\"2017-11-30T12:00:00.000Z\"}';\n```\n\n...Dan sekarang kita perlu untuk men-deserialisasi (*deserialize*) objek itu, untuk mengembalikannya menjadi objek JavaScript.\n\nMari lakukan dengan memamnggil `JSON.parse`:\n\n```js run\nlet str = '{\"title\":\"Conference\",\"date\":\"2017-11-30T12:00:00.000Z\"}';\n\nlet meetup = JSON.parse(str);\n\n*!*\nalert( meetup.date.getDate() ); // Error!\n*/!*\n```\n\nUpps! Ada error!\n\nNilai dari `meetup.date` adalah sebuah *string*, bukan sebuah objek `Date`. Bagaimana cara `JSON.parse` tahu bahwa ia harus mengubah *string* itu menjadi sebuah `Date`?\n\nMari oper ke `JSON.parse` fungsi yang digunakan lagi sebagai argumen kedua, yang mengembalikan semua nilai \"as is\", tetapi `date` akan menjadi sebuah objek `Date` dengan format yang benar:\n\n```js run\nlet str = '{\"title\":\"Conference\",\"date\":\"2017-11-30T12:00:00.000Z\"}';\n\n*!*\nlet meetup = JSON.parse(str, function(key, value) {\n if (key == 'date') return new Date(value);\n return value;\n});\n*/!*\n\nalert( meetup.date.getDate() ); // kini bekerja!\n```\n\nBy the way, that works for nested objects as well:\n\n```js run\nlet schedule = `{\n \"meetups\": [\n {\"title\":\"Conference\",\"date\":\"2017-11-30T12:00:00.000Z\"},\n {\"title\":\"Birthday\",\"date\":\"2017-04-18T12:00:00.000Z\"}\n ]\n}`;\n\nschedule = JSON.parse(schedule, function(key, value) {\n if (key == 'date') return new Date(value);\n return value;\n});\n\n*!*\nalert( schedule.meetups[1].date.getDate() ); // berhasil bekerja!\n*/!*\n```\n\n\n\n## Kesimpulan\n\n- JSON adalah sebuah format data yang memiliki standar dan *library*-nya sendiri untuk sebagian besar bahasa-bahasa pemrograman.\n- JSON mendukung objek-objek polos, *array*, *string*, angka, *boolean*, dan `null`.\n- JavaScript menyediakan metode-metode [JSON.stringify](mdn:js/JSON/stringify) untuk men-serialisasi objek menjadi JSON serta [JSON.parse](mdn:js/JSON/parse) untuk menbaca objek dari JSON.\n- Kedua metode tersebut mendukung fungsi-fungsi pengubah untuk proses pembacaan (*reading*)/penulisan (*writing*) yang cerdas.\n- Jika sebuah objek memiliki `toJSON`, lalu metode tersebut akan dipanggil oleh `JSON.stringify`.\n" }, { "path": "1-js/05-data-types/index.md", "content": "# Tipe data\n\nStruktur data lainnya dan pembelajaran lebih dalam tentang tipe-tipe.\n" }, { "path": "1-js/06-advanced-functions/01-recursion/01-sum-to/solution.md", "content": "Solusi menggunakan perulangan:\n\n```js run\nfunction sumTo(n) {\n let sum = 0;\n for (let i = 1; i <= n; i++) {\n sum += i;\n }\n return sum;\n}\n\nalert( sumTo(100) );\n```\n\nSolusi menggunakan rekursi:\n\n```js run\nfunction sumTo(n) {\n if (n == 1) return 1;\n return n + sumTo(n - 1);\n}\n\nalert( sumTo(100) );\n```\n\nSolusi menggunakan rumus: `sumTo(n) = n*(n+1)/2`:\n\n```js run\nfunction sumTo(n) {\n return n * (n + 1) / 2;\n}\n\nalert( sumTo(100) );\n```\n\nCatatan. Biasanya, rumus adalah solusi tercepat. Itu hanya menggunakan 3 operasi untuk angka `n` apapun. Matematika mambantu!\n\nvarian perulangan adalah yang kedua dalam hal waktu. Di varian rekusif dan perulangan kita menambahkan angka yang sama. Tapi rekursi melibatkan pemanggilan bercabang dan manajemen tumpukan eksekusi. Itu juga memakan sumberdaya, jadi itu lebih lambat.\n\nCatatan+. Beberapa mesin mendukung optimasi \"tail call\": jika sebuah pemanggilan rekursi adalah yang paling terakhir didalam fungsi (seperti dalam `sumTo` diatas), maka fungsi terluar tidak butuh untuk melanjutkan eksekusi, jadi mesinnya tidak akan mengingat konteks dari eksekusi. Itu akan menghilangkan beban didalam memori, jadi menghitung `sumTo(100000)` menjadi mungkin. Tapi jika mesin Javascript tidak mendukung optimasi tail call (kebanyakan tidak), disana akan terdapat error: \"maximum stack size exceeded\", karena disana biasanya terdapat batasan dalam total ukuran stack/penumpukan.\n" }, { "path": "1-js/06-advanced-functions/01-recursion/01-sum-to/task.md", "content": "nilai penting: 5\n\n---\n\n# Tambahkan seluruh angka sampai angka yang diberikan\n\nTulis sebuah fungsi `sumTo(n)` yang mengkalkulasikan penambahan dari angka `1 + 2 + ... + n`.\n\nContoh:\n\n```js no-beautify\nsumTo(1) = 1\nsumTo(2) = 2 + 1 = 3\nsumTo(3) = 3 + 2 + 1 = 6\nsumTo(4) = 4 + 3 + 2 + 1 = 10\n...\nsumTo(100) = 100 + 99 + ... + 2 + 1 = 5050\n```\n\nBuatlah jawaban dengan 3 varian:\n\n1. Gunakan perulangan\n2. Gunakan rekursi, karena `sumTo(n) = n + sumTo(n-1)` untuk `n > 1`.\n3. Gunakan rumus [arithmetic progression](https://en.wikipedia.org/wiki/Arithmetic_progression).\n\nContoh dari hasil:\n\n```js\nfunction sumTo(n) { /*... kodemu ... */ }\n\nalert( sumTo(100) ); // 5050\n```\n\nCatatan. Varian solusi mana yang lebih cepat? yang lebih lambat? kenapa?\n\nCatatan+. Bisakah kita gunakan rekursi untuk menghitung `sumTo(100000)`?\n" }, { "path": "1-js/06-advanced-functions/01-recursion/02-factorial/solution.md", "content": "Secara definisi, sebuah faktorial adalah `n!` bisa ditulis juga sebagai `n * (n-1)`.\n\nDengan kata lain, hasil dari `factorial(n)` bisa juga dikalkulasikan sebagai `n` dikalikan dengan hasil dari `factorial(n-1)`. Dan pemanggilan untuk `n-1` bisa secara rekursi menurun, dan terus menurun sampai `1`.\n\n```js run\nfunction factorial(n) {\n return (n != 1) ? n * factorial(n - 1) : 1;\n}\n\nalert( factorial(5) ); // 120\n```\n\nBasis dari rekursi adalah nilai `1`. Kita jika bisa membuat basis `0` disini, tidak akan berpengaruh banyak, tapi memberikan satu lagi tingkat rekursi:\n\n```js run\nfunction factorial(n) {\n return n ? n * factorial(n - 1) : 1;\n}\n\nalert( factorial(5) ); // 120\n```\n" }, { "path": "1-js/06-advanced-functions/01-recursion/02-factorial/task.md", "content": "nilai penting: 4\n\n---\n\n# Kalkulasikan faktorial\n\n[factorial](https://en.wikipedia.org/wiki/Factorial) dari sebuah angka natural adalah sebuah angka yang dikalikan dengan `\"angka minus satu\"`, lalu dengan `\"angka minus dua\"`, dan terus sampai `1`. Faktorial dari `n` di notasikan sebagai `n!`.\n\nKita bisa menulis definisi dari faktorial seperti ini:\n\n```js\nn! = n * (n - 1) * (n - 2) * ...*1\n```\n\nNilai dari faktorial untuk `n` yang berbeda:\n\n```js\n1! = 1\n2! = 2 * 1 = 2\n3! = 3 * 2 * 1 = 6\n4! = 4 * 3 * 2 * 1 = 24\n5! = 5 * 4 * 3 * 2 * 1 = 120\n```\n\nTugasnya adalah untuk menulis sebuah fungsi `factorial(n)` yang mengkalkulasikan `n!` menggunakan pemanggilan rekursi.\n\n```js\nalert( factorial(5) ); // 120\n```\n\nCatatan. Petunjuk: `n!` bisa juga ditulis sebagai `n * (n-1)!`, Contoh: `3! = 3*2! = 3*2*1! = 6`\n" }, { "path": "1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/solution.md", "content": "Solusi pertama kita harus coba adalah rekursi.\n\nAngka fibonacci adalah rekursi dari definisinya:\n\n```js run\nfunction fib(n) {\n return n <= 1 ? n : fib(n - 1) + fib(n - 2);\n}\n\nalert( fib(3) ); // 2\nalert( fib(7) ); // 13\n// fib(77); // akan sangat lambat!\n```\n\n...Tapi untuk nilai besar dari `n` akanlah sangat lambat. Contoh, `fib(77)` mungkin akan memberatkan mesinnya dan untuk beberapa saat akan menggunakan seluruh sumberdaya CPU.\n\nItu karena fungsinya memanggil terlalu banyak pemanggilan. Nilai yang sama akan terus di evaluasi lagi dan lagi.\n\nContoh, kita lihat satu potongan dari kalkulasi untuk `fib(5)`:\n\n```js no-beautify\n...\nfib(5) = fib(4) + fib(3)\nfib(4) = fib(3) + fib(2)\n...\n```\n\nDisini kita bisa melihat nilai dari `fib(3)` dibutuhkan untuk `fib(5)` dan `fib(4)`. Jadi `fib(3)` akan dipanggil dan dievaluasi dua kali secara bergantian.\n\nIni adalah pohon rekursi penuh:\n\n![fibonacci recursion tree](fibonacci-recursion-tree.svg)\n\nKita dengan jelas bisa memperhatikan bahwa `fib(3)` dievaluasi dua kali dan `fib(2)` di evaluasi tiga kali. Total dari komputasi akan terus membesar secara cepat lebih dari `n`, membuatnya besar sekali bahkan untuk `n=77`.\n\nKita bisa mengoptimasinya dengan mengingat nilai yang telah dievaluasi: jika sebuah nilai katakan `fib(3)` dikalkulasi sekali, lalu kita bisa menggunakan nilainya lagi di komputasi selanjutnya.\n\nVarian lainnya haruslah menyerah dengan rekursi dan menggunakan algoritma lain yang benar-benar berbeda.\n\nDaripada memulai dari `n` ke nilai yang dibawahnya, kota bisa membuat perulangan dimulai dari `1` dan `2`, lalu mendapatkan `fib(3)` sebagai nilai penambahan mereka, lalu `fib(4)` sebagai nilai penambahan dua bilangan sebelumnya, lalu `fib(5)` dan terus naik, sampai itu mencapai nilai yang dibutuhkan. Untuk setiap langkah kita hanya membutuhkan nilai dari kedua bilangan sebelumnya.\n\nIni adalah detail langkah dari algoritma baru.\n\nMulai:\n\n```js\n// a = fib(1), b = fib(2), nilai-nilai ini adalah definisi dari 1\nlet a = 1, b = 1;\n\n// get c = fib(3) sebagai penambahan mereka\nlet c = a + b;\n\n/* sekarang kita punya fib(1), fib(2), fib(3)\na b c\n1, 1, 2\n*/\n```\n\nsekarang kita ingin mendapatkan `fib(4) = fib(2) + fib(3)`.\n\nLalu kita ubah variabelnya: `a,b` akan mendapatkan `fib(2),fib(3)`, dan `c` akan mendapatkan penambahan mereka:\n\n```js no-beautify\na = b; // now a = fib(2)\nb = c; // now b = fib(3)\nc = a + b; // c = fib(4)\n\n/* sekarang kita punya urutannya:\n a b c\n1, 1, 2, 3\n*/\n```\n\nLangkah selanjutnya akan memberikan urutan angka lainnya:\n\n```js no-beautify\na = b; // now a = fib(3)\nb = c; // now b = fib(4)\nc = a + b; // c = fib(5)\n\n/* sekarang urutannya adalah (satu angka lagi):\n a b c\n1, 1, 2, 3, 5\n*/\n```\n\n...Dan seterusnya sampai kita mendapatkan nilai yang dibutuhkan. Itu lebih cepat daripada rekursi dan tidak melibatkan duplikasi komputasi\n\nSemua kodenya:\n\n```js run\nfunction fib(n) {\n let a = 1;\n let b = 1;\n for (let i = 3; i <= n; i++) {\n let c = a + b;\n a = b;\n b = c;\n }\n return b;\n}\n\nalert( fib(3) ); // 2\nalert( fib(7) ); // 13\nalert( fib(77) ); // 5527939700884757\n```\n\nPerulangak dimulai dari `i=3`, karena yang urutan nilai pertama dan kedua sudah dikode (hard-coded) kedalam variabel `a=1`, `b=1`.\n\nPendekatan ini dipanggil dengan [dynamic programming bottom-up](https://en.wikipedia.org/wiki/Dynamic_programming).\n" }, { "path": "1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/task.md", "content": "nilai penting: 5\n\n---\n\n# Angka fibonacci\n\nUrutan dari [Fibonacci numbers](https://en.wikipedia.org/wiki/Fibonacci_number) mempunyai rumus Fn = Fn-1 + Fn-2. Dengan kata lain, angka selanjutnya adalah penambahan dari dua angka sebelumnya.\n\nDua angka pertama adalah `1`, lalu `2(1+1)`, lalu `3(1+2)`, `5(2+3)` dan seterusnya: `1, 1, 2, 3, 5, 8, 13, 21...`.\n\nAngka fibonnaci adalah angka yang terkait kedalam [Golden ratio](https://en.wikipedia.org/wiki/Golden_ratio) dan fenomena natural lainnya disekitar kita.\n\nBuat sebuah fungsi `fib(n)` yang mengembalikan angka fibonacci ke-`n-th`.\n\nContoh hasil:\n\n```js\nfunction fib(n) { /* kodemu */ }\n\nalert(fib(3)); // 2\nalert(fib(7)); // 13\nalert(fib(77)); // 5527939700884757\n```\n\nCatatan. Fungsinya haruslah cepat. Pemanggilan ke `fib(77)` haruslah tidak memakan lebih dari beberapa detik.\n" }, { "path": "1-js/06-advanced-functions/01-recursion/04-output-single-linked-list/solution.md", "content": "# solusi berbasis perulangan\n\nVarian solusi berbasis perulangan:\n\n```js run\nlet list = {\n value: 1,\n next: {\n value: 2,\n next: {\n value: 3,\n next: {\n value: 4,\n next: null\n }\n }\n }\n};\n\nfunction printList(list) {\n let tmp = list;\n\n while (tmp) {\n alert(tmp.value);\n tmp = tmp.next;\n }\n\n}\n\nprintList(list);\n```\n\nPerhatikan bahwa kita menggunakan variabel semebtara `tmp` untuk menyusuri daftarnya. Secara teknis, malah kita bisa menggunakan parameter fungsi `list`:\n\n```js\nfunction printList(list) {\n\n while(*!*list*/!*) {\n alert(list.value);\n list = list.next;\n }\n\n}\n```\n\n...Tapi itu kurang tepat. Nanti mungkin kita ingin memperbesar fungsinya, melakukan sesuatu dengan daftarnya. Jika kita merubah `list`, maka kita akan kehilangan kemampuannya.\n\nBerbicara tentang nama variabel yang bagus, `list` disini adalah menandakan bahwa dirinya sendiri adalah list/daftar. Elemen pertama dari itu. Dan itu harus tetap seperti itu. Itu jelas dan dapat diandalkan.\n\nDari sisi lainnya, peran dari `tmp` sendiri secara eksklusif adalah daftar traversal, seperti `i` didalam perulangan `for`.\n\n# Solusi rekursif\n\nVarian rekursif dari `printList(list)` mengikuti logika yang sederhana: untuk mengeluarkan sebuah daftar kita harus mengeluatkan elemen saat ini dari `list`, lalu lakukan hal yang sama untuk `list.next`:\n\n```js run\nlet list = {\n value: 1,\n next: {\n value: 2,\n next: {\n value: 3,\n next: {\n value: 4,\n next: null\n }\n }\n }\n};\n\nfunction printList(list) {\n\n alert(list.value); // keluarkan item yang sekarang\n\n if (list.next) {\n printList(list.next); // lakukan hal yang sama dengan sisa item dalam list\n }\n\n}\n\nprintList(list);\n```\n\nSekarang mana yang lebih baik?\n\nSecara teknis, perulanganlah yang lebih efektif. Kedua varian itu melakukan hal yang sama, tapi perulangan tidak menghabiskan sumberdaya untuk pemanggilan fungsi yang bercabang.\n\nDisisi lainnya, varian rekursi lebih pendek dan terkadang lebih mudah untuk dimengerti.\n" }, { "path": "1-js/06-advanced-functions/01-recursion/04-output-single-linked-list/task.md", "content": "nilai penting: 5\n\n---\n\n# Keluarkan sebuah daftar single-linked\n\nKatakan kita punya sebuah daftar single-linked (seperti yang dideskripsikan pada bab );\n\n```js\nlet list = {\n value: 1,\n next: {\n value: 2,\n next: {\n value: 3,\n next: {\n value: 4,\n next: null\n }\n }\n }\n};\n```\n\nTulis sebuah fungsi `printList(list)` yang mengeluarkan item dalam daftar satu per satu.\n\nBuatlah dua varian dari solusinya: gunakan perulangan dan gunakan rekursi.\n\nMana yang lebih baik: dengan rekursi atau tanpa rekursi?\n" }, { "path": "1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md", "content": "# Menggunakan rekursi\n\nLogika rekursi sedikit lebih rumit disini.\n\nPertama kita harus mengeluarkan sisa item di daftarnya dan *lalu* mengeluarkan item yang sekarang dipilih.\n\n```js run\nlet list = {\n value: 1,\n next: {\n value: 2,\n next: {\n value: 3,\n next: {\n value: 4,\n next: null\n }\n }\n }\n};\n\nfunction printReverseList(list) {\n\n if (list.next) {\n printReverseList(list.next);\n }\n\n alert(list.value);\n}\n\nprintReverseList(list);\n```\n\n# Menggunakan perulangan\n\nVarian perulangan juga sedikit lebih rumit daripada mengeluarkannya secara langsung.\n\nTidak ada cara untuk mendapatkan nilai terakhir didalam `list` kita. Kita juga tidak bisa \"berjalan mundur\".\n\nJadi apa yang kita bisa lakukan adalah pertama susuri seluruh item secara langsung dan mengingat mereka didalam array, dan lalu mengeluarkan apa yang diingat dengan urutan terbalik:\n\n```js run\nlet list = {\n value: 1,\n next: {\n value: 2,\n next: {\n value: 3,\n next: {\n value: 4,\n next: null\n }\n }\n }\n};\n\nfunction printReverseList(list) {\n let arr = [];\n let tmp = list;\n\n while (tmp) {\n arr.push(tmp.value);\n tmp = tmp.next;\n }\n\n for (let i = arr.length - 1; i >= 0; i--) {\n alert( arr[i] );\n }\n}\n\nprintReverseList(list);\n```\n\nPerhatikan baik-baik bahwa solusi rekursi melakukan hal yang sama persis: itu akan menyusuri daftar, mengingat item-itemnya didalam rantai dari pemanggulan bercabang (dalam konteks penumpukan eksekusi), dan lalu mengeluarkan hasilnya.\n" }, { "path": "1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/task.md", "content": "nilai penting: 5\n\n---\n\n# keluarkan item single-linked dari list dengan urutan terbalik\n\nKeluarkan item single-linked dari daftar seperti tugas sebelumnya namun secara terbalik.\n\nBuatlah dua solusi: menggunakan perulangan dan menggunakan rekursi.\n" }, { "path": "1-js/06-advanced-functions/01-recursion/article.md", "content": "# Rekursi dan tumpukan (Recursion and stack)\n\nAyo kita kembali ke fungsi dan belajar tentanya lebih dalam lagi.\n\nTopik pertama kita adalah *rekursi*.\n\nJika programming bukanlah hal baru untukmu, maka kamu mungkin familiar dan kamu bisa melewatkan bab ini.\n\nRekursi adalah pola programming yang sangat berguna didalam situasi dimana sebuah task bisa secara natural dibagi menjadi beberapa task yang memiliki jenis yang sama, tapi lebih sederhana. Atau ketika task bisa dibuat lebih sederhana menjadi sebuah aksi ditambah varian yang lebih sederhana dari beberapa task yang serupa.\n\nketika sebuah fungsi menyelesaikan sebuah task, didalam proses itu bisa memanggila beberapa fungsi lainnya. Sebagian kasus dari ini ketika sebuah fungsi memanggil *dirinya sendiri*. Itulah yang disebut rekursi.\n\n## Cara berfikir dua arah\n\nUntuk sesuatu yang sederhana dimulai dengan -- ayo kita buat sebuah fungsi `pow(x, n)` yang menaikan `x` dengan pangkat dari `n`. Dengan kata lain, mengkalikan `x` dengan dirinya sendiri sebanyak `n` kali.\n\n```js\npow(2, 2) = 4\npow(2, 3) = 8\npow(2, 4) = 16\n```\n\nTerdapat dua cara untuk mengimplementasikan hal itu.\n\n1. Pemikiran interaktif: perulangan `for`:\n\n ```js run\n function pow(x, n) {\n let result = 1;\n\n // kalikan hasil dari x n kali didalam perulangan\n for (let i = 0; i < n; i++) {\n result *= x;\n }\n\n return result;\n }\n\n alert( pow(2, 3) ); // 8\n ```\n\n2. Pemikiran rekursif: sederhanakan tugasnya dan panggil diri-sendiri:\n\n ```js run\n function pow(x, n) {\n if (n == 1) {\n return x;\n } else {\n return x * pow(x, n - 1);\n }\n }\n\n alert( pow(2, 3) ); // 8\n ```\n\nIngat baik-baik bagaimana varian rekursif secara dasar berbeda.\n\nKetika `pow(x, n)` dipanggil, eksekusinya dibagi menjadi dua cabang:\n\n```js\n if n==1 = x\n /\npow(x, n) =\n \\ \n else = x * pow(x, n - 1)\n```\n\n1. Jika `n == 1`, maka semuanya menjadi tidak penting. Itulah yang dipanggil dengan *dasar* dari rekursi, karena itu langsung menghasilkan nilai yang jelas `pow(x, 1)` sama dengan `x`.\n2. Sebaliknya, kita bisa merepresentasikan `pow(x, n)` sebagai `x * pow(x, n - 1)`. Didalam matematika, satu akan ditulis xn = x * xn-1. Ini yang dipanggil dengan *Langkah rekursif*: kita mengubah tugas/task menjadi aksi yang lebih sederhana (perkalian dengan `x`) dan sebuah pemanggilan yang lebih sederhana dari tugas/task yang sama (`pow` dengan menurunkan `n`). Langkah selanjutnya menyederhanakan itu lebih jauh sampai `n` mencapai `1`.\n\nKita bisa berkata bahwa `pow` *secara rekursif memanggil dirinya sendiri sampai `n == 1`.\n\n![recursive diagram of pow](recursion-pow.svg)\n\n\nContoh, untuk mengkalkulasi `pow(2, 4)` varian rekursi melakukan langkah-langkah ini:\n\n1. `pow(2, 4) = 2 * pow(2, 3)`\n2. `pow(2, 3) = 2 * pow(2, 2)`\n3. `pow(2, 2) = 2 * pow(2, 1)`\n4. `pow(2, 1) = 2`\n\nJadi, rekursi mengurangi sebuah pemanggilan fungsi menjadi yang lebih sederhana, dan lalu -- bahkan lebih sederhana, dan seterusnya, sampai hasilnya menjadi jelas.\n\n````smart header=\"Rekursi biasanya lebih pendek\"\nSolusi rekursi biasanya lebih pendek daripada sebuah iterasi.\n\nDisini kita bisa menulis ulang menggunakan operator konsional `?` daripada `if` untuk membuat `pow(x, n)` lebih pendek dan tetap mudah dibaca:\n\n```js run\nfunction pow(x, n) {\n return (n == 1) ? x : (x * pow(x, n - 1));\n}\n```\n````\n\nAngka maksimal dari pemanggilan bercabang (termasuk yang pertama) dipanggil dengan *kedalaman rekursi/recursion depth*. Di kasus kita, itu akan persis `n`.\n\nMaksimal kedalaman rekursi dibatasi oleh mesin Javascript. Kita bisa berkata bahwa itu mungkin 10000, beberapa mesin bisa lebih tapi 100000 mungkin sudah diluar batas dari kebanyakan mesin. Terdapat optimasi otomatis yang membantu meringankan ini(\"optimasi tail calls\"), tapi mereka belum sepenuhnya didukung di semuanya dan hanya bekerja pada kasus yang sederhana.\n\nItu membatasi aplikasi dari rekursi, tapi itu tetaplah cukup besar. Disana terdapat task dimana cara berfikir rekursif membuat kode lebih sederhana, dan lebih mudah diperlihara.\n\n## Konteks eksekusi dan tumpukan\n\n\nSekarang ayo kita membahas bagaimana pemanggilan rekursi bekerja. Untuk itu kita akan melihat isi dari fungsi.\n\nInformasi tentang proses dari eksekusi dari sebuah fungsi yang berjalan disimpan didalam *konteks eksekusi*nya.\n\n[Execution context](https://tc39.github.io/ecma262/#sec-execution-contexts) adalah sebuah struktur data internal yang mengandung detail tentang eksekusinya dari sebuah fungsi: dimana alur kontrolnya adalah sekarang, variabel yang sekarang, nilai dari `this` (kita tidak akan mengunakan ini disini) dan beberapa detail internal lainnya.\n\nSatu pemanggilan fungsi mempunyai tepat satu konteks eksekusi yang terkait dengannya.\n\nKetika sebuah fungsi melakukan pemanggilan bercabang, Hal berikut terjadi:\n\n- Fungsi yang sekarang dihentikan sementara -- paused.\n- Konteks eksekusi yang terkait dengannya diingat dalam sebuah struktur data spesial dipanggil dengan *tumpukan konteks eksekusi*.\n- Pemanggilan bercabang dieksekusi.\n- Setelah itu selesai, eksekusi konteks yang lama diterima dari tumpukan, dan fungsi terluar dilanjutkan dari mana itu berhenti.\n\nAyo kita lihat apa yang terjadi selama pemanggilan `pow(2, 3)`.\n\n### pow(2, 3)\n\nDi awal pemanggilan `pow(2, 3)` konteks eksekusi akan menyimpan variabel: `x = 2, n = 3`, alur eksekusi berada pada baris `1` dari fungsi.\n\nKita bisa menggambarkannya seperti:\n\n
    \n
  • \n Context: { x: 2, n: 3, at line 1 }\n pow(2, 3)\n
    • \n
\n\nItu ketika fungsi mulai dieksekusi. Kondisinya `n == 1` adalah false, jadi alurnya berlanjut ke cabang kedua dari `if`:\n\n```js run\nfunction pow(x, n) {\n if (n == 1) {\n return x;\n } else {\n*!*\n return x * pow(x, n - 1);\n*/!*\n }\n}\n\nalert( pow(2, 3) );\n```\n\n\nVariabelnya juga sama, tapi barisnya berubah, jadi konteksnya sekarang:\n\n
    \n
  • \n Context: { x: 2, n: 3, at line 5 }\n pow(2, 3)\n
    • \n
\n\nUntuk mengkalkulasikan `x * pow(x, n -1)`, kita perlu membuat subcall dari `pow` dengan argumen baru `pow(2, 2)`.\n\n### pow(2, 2)\n\nUntuk melakukan pemanggilan bercabang, javascript mengingat konteks eksekusi yang sekarang didalam *tumpukan konteks eksekusi*.\n\nDisini kita memanggil fungsi yang sama `pow`, tapi itu tidaklah penting. Prosesnya sama untuk semua fungsi:\n\n1. Konteks yang sekarang telah \"mengingat\" tumpukan teratas.\n2. Konteks baru dibuat untuk subcall.\n3. Ketika subcall telah selesai -- konteks sebelumnya dikeluarkan dari tumpukan, dan eksekusinya dilanjutkan.\n\nHere's the context stack when we entered the subcall `pow(2, 2)`:\nDisini tumpukan konteks ketika kita memasuki subcallnya `pow(2, 2)`;\n\n
    \n
  • \n Context: { x: 2, n: 2, at line 1 }\n pow(2, 2)\n
    • \n
  • \n Context: { x: 2, n: 3, at line 5 }\n pow(2, 3)\n
    • \n
\n\nKonteks eksekusi baru yang sekarang berada di atas (dan jelas), dan konteks yang sebelumnya berada dibawah.\n\nKetika kita menyelesaikan subcall -- itu akan mudah untuk melanjutkan konteks sebelumnya, karena itu tetap menyimpan kedua variabel dan tempat yang tepat dimana kode itu berhenti.\n\n```smart\nDisini dialam gambar kita gunakan kata \"line\", sebagai contoh disana terdapat satu subcall didalam baris, tapi secara umum sebuah baris dari kode mungkin mengandung subcall ganda, seperti `pow(…) + pow(…) + somethingElse(…)`.\n\nJadi itu harus menjadi lebih presisi untuk dikatakan eksekusi berlanjut \"langsung seterlah subcall\".\n```\n\n### pow(2, 1)\n\nProsesnya diulangi: subcall baru dibuat pada baris `5`, sekarang dengan argumen `x=2`, `n=1`.\n\nSebuah konteks eksekusi baru dibuat, yang sebelumnya didorong dari atas tumpukan:\n\n
    \n
  • \n Context: { x: 2, n: 1, at line 1 }\n pow(2, 1)\n
    • \n
  • \n Context: { x: 2, n: 2, at line 5 }\n pow(2, 2)\n
    • \n
  • \n Context: { x: 2, n: 3, at line 5 }\n pow(2, 3)\n
    • \n
\n\nDisana terdapat 2 konteks lama sekarang dan 1 sedang berjalan untuk `pow(2, 1)`.\n\n### Keluar\n\nSelama eksekusi dari `pow(2, 1)`, tidak seperti sebelumnya, kondisi `n == 1` sekarang bernilai true, jadi cabang pertama dari `if` bekerja:\n\n```js\nfunction pow(x, n) {\n if (n == 1) {\n*!*\n return x;\n*/!*\n } else {\n return x * pow(x, n - 1);\n }\n}\n```\n\nDisana sekarang tidak ada lagi pemanggilan bercabang, jadi fungsinya selesai, mengembalikan `2`.\n\nSetelah fungsinya selesai, konteks eksekusinya tidak dibutuhkan lagi, jadi itu akan dihilangkan dari memori. Satu yang sebelumnya dikembalikan dari atas tumpukan:\n\n\n
    \n
  • \n Context: { x: 2, n: 2, at line 5 }\n pow(2, 2)\n
    • \n
  • \n Context: { x: 2, n: 3, at line 5 }\n pow(2, 3)\n
    • \n
\n\nEksekusi dari `pow(2, 2)` dilanjutkan. Itu telah mempunyai hasil dari subcall `pow(2, 1)`, jadi itu bisa menyelesaikan evaluasi dari `x * pow(x, n - 1)`, mengembalikan `4`.\n\nKonteks sebelumnya dikembalikan:\n\n
    \n
  • \n Context: { x: 2, n: 3, at line 5 }\n pow(2, 3)\n
    • \n
\n\nKetika itu selesai, kita mempunyai hasil dari `pow(2, 3) = 8`.\n\nDalam kasus ini kedalaman rekursinya adalah: **3**.\n\nSeperti yang bisa kita lihat dari ilustrasi diatas, kedalaman rekursi sama dengan nilai maksimal dari konteks didalam tumpukan.\n\nCatatan kebutuhan memori. Konteks memakan memori. Didalam kasus ini, menaikan dengan pangkat dari `n` sebenarnya membutuhkan memori sebanyak `n` konteks, untuk semua nilai terendah dari `n`.\n\nAlgoritma berbasis perulangan lebih menghemat memori:\n\n```js\nfunction pow(x, n) {\n let result = 1;\n\n for (let i = 0; i < n; i++) {\n result *= x;\n }\n\n return result;\n}\n```\n\nInteratif `pow` menggunakan konteks tunggal mengganti `i` dan `result` didalam prosesnya. Kebutuhan memorinya kecil, tidak berubah-ubah dan tidak tergantung kepada `n`.\n\n**Rekursi apapun bisa ditulis ulang sebagai perulangan. Varian perulangan biasanya bisa dibuat lebih efektif.**\n\n...Tapi terkadang menulis ulang bukanlah hal yang sepele, terutama ketika fungsi menggunakan pemanggilan rekursif yang berbeda tergantung dari kondisi dan menyatukan hasil mereka atau cabangnya lebih rumit. Dan optimasinya mungkin tidak dibutuhkan dan benar-benar menghabiskan tenaga.\n\nRekursi bisa memberikan kode yang lebih pendek, lebih mudah dimengerti dan didukung. Optimasi tidak dibutuhkan di setiap tempat, kebanyakan kita butuh kode yang bagus, itulah kenapa itu digunakan.\n\n## Rekursif traversal\n\nPenerapan bagus lainnya dari rekursi adalah rekursif traversal.\n\nBayangkan, kita punya sebuah perusahaan. Struktur karyawannya bisa dipresentasikan sebagai sebuah objek:\n\n```js\nlet company = {\n sales: [{\n name: 'John',\n salary: 1000\n }, {\n name: 'Alice',\n salary: 1600\n }],\n\n development: {\n sites: [{\n name: 'Peter',\n salary: 2000\n }, {\n name: 'Alex',\n salary: 1800\n }],\n\n internals: [{\n name: 'Jack',\n salary: 1300\n }]\n }\n};\n```\n\nDengan kata lain, perusahaannya mempunyai departemen.\n\n- Sebuah departemen mungkin mempunyai sebuah array untuk staf. Contoh, departemen `sales` mempunyai dua karyawan John dan Alice.\n- Atau sebuah departemen mungkin dibagi menjadi sub-departemen, like `development` mempunyai dua cabang: `sites` dan `internals`. Untuk masin-masing memiliki stafnya masing-masing.\n- Hal yang mungkin terjadi adalah ketika sub-departemennya berkembang, itu akan terbagi menjadi sub-sub-departemen (tau tim).\n\n Contoh, departemen `sites` di masa depan mungkin akan terbagi menjadi tim `siteA` dan `siteB`. Dan mereka, memiliki kemungkinan, terbagi lagi. Itu bukanlah sebuah gambaran, hanya sesuatu yang bisa terfikirkan.\n\nSekarang kita ingin sebuah fungsi untuk mendapatkan jumlah dari seluruh gaji. Bagaiman kita melakukannya?\n\nSebuah pendekatan iteratif tidaklah mudah, karena strukturnya tidak sederhana. Pertama mungkin untuk membuat perulangan `for`didalam `company` dengan sub-perulangan bercabang didalam departemen level 1. Tapi kita butuh lebih banyak sub-perulangan untuk mengiterasi staf didalam departemen level 2 seperti `sites`... Dan lalu sub-perulangan lainnya didalam departemen level 3 yang mungkin muncul di masa mendatang? Jika kita menggunakan 3-4 sub-perulangan didalam kode untuk menjelajahi objek tunggal, itu akan terlihat jelek.\n\nAyo kita coba rekursi.\n\nSeperti yang bisa kita lihat, ketika fungsi mendapatkan departemen untuk dijumlahkan, disana terdapat dua kemungkinan:\n\n1. Antara itu adalah sebuah departemen \"simpel\" dengan sebuah array dari orang -- lalu kita bisa menjumlahkan gajinya dengan perulangan yang sederhana.\n2. Atau itu adalah *sebuah objek* dengan `N` sub-departemen -- maka kita bisa membuat pemanggilan rekursif `N` untuk mendapatkan jumlah untuk setiap sub-departemen dan menjumlahkan hasilnya.\n\nDalam kasus pertama adalah dasar dari rekursi, kasus biasa, ketika kita mendapatkan sebuah array.\n\nKasus kedua ketika kita mendapatkan sebuah objek adalah langkah rekursif. Sebuah task yang kompleks dibagi menjadi sub-task untuk departemen yang lebih kecil. Mereka mungkin nanti akan terbagi lagi, tapi cepat atau lambat pembagiannya akan selesai pada (1).\n\nx\nAlgoritmanya mungkin lebih mudah untuk dibaca dari kodenya:\n\n\n```js run\nlet company = { // objek yang sama, dikompresi untuk keringkasan\n sales: [{name: 'John', salary: 1000}, {name: 'Alice', salary: 1600 }],\n development: {\n sites: [{name: 'Peter', salary: 2000}, {name: 'Alex', salary: 1800 }],\n internals: [{name: 'Jack', salary: 1300}]\n }\n};\n\n// Fungsinya melakukan pekerjaannya\n*!*\nfunction sumSalaries(department) {\n if (Array.isArray(department)) { // kasus (1)\n return department.reduce((prev, current) => prev + current.salary, 0); // jumlahkan arraynya\n } else { // kasus (2)\n let sum = 0;\n for (let subdep of Object.values(department)) {\n sum += sumSalaries(subdep); // secara rekursif memanggil sub-departemen, jumlahkan hasilnya\n }\n return sum;\n }\n}\n*/!*\n\nalert(sumSalaries(company)); // 7700\n```\n\nKodenya pendek dan mudah untuk dimengerti (semoga?). Itulah kemampuan dari rekursi. Itu juga bekerja untuk level apapun dari sub-departemen bercabang.\n\nIni adalah diagram dari pemanggilannya:\n\n![recursive salaries](recursive-salaries.svg)\n\nKita bisa dengan mudah melihat prinsipnya: untuk sebuah objek sub-pemanggilan `{...}` dibuat, semerata array `[...]` adalah daun dari pohon rekursi, mereka memberikan hasil secara langsung.\n\nIngat bahwa kodenya menggunakan fitur pintar yang sudah kita bahas sebelumnya:\n\n- Metode `arr.reduce` menjelaskan didalam bab untuk mendapatkan jumlah dari array.\n- Perulangan `for(val of Object.values(obj))` untuk mengiterasi nilai didalam objek: `Object.values` mengembalikan sebuah array darinya.\n\n\n## Struktur rekursif\n\nSebuah struktur data rekursif (ditetapkan secara rekursif) adalah sebuah struktur yang mengulangi dirinya-sendiri dalam beberapa bagian.\n\nKita juga telah melihatnya didalam contoh struktur perusahaan diatas.\n\nSebuah *departemen* perusahaan adalah:\n- Diantara sebuah array dari orang-orang\n- Atau sebuah objek dengan *departemen*.\n\nUntuk seorang pengembang-web disana terdapat contoh yang lebih baik: HTML dan dokumen XML.\n\nDidalam dokumen HTML, sebuah *tag-HTML* mungkin mengandung daftar dari:\n- Potongan-potongan text.\n- Komentar-komentar HTML.\n- *Tag-HTML* Lainnya (itu mungkin saja mengandung potongan text/komentar atau tag lainnya).\n\nItu sekali lagi adalah definisi rekursif.\n\nUntuk pemahaman lebih baik, kita akan memperlajari satu lagi struktur rekursif bernama \"Linked list\" itu mungkin sebuah alternatif yang bagus untuk array dalam beberapa kasus.\n\n### Linked list\n\nBayangkan, kita ingin menyimpan sebuah daftar terstruktur didalam sebuah objek.\n\nPilihan naturalnya mungkin sebuah array:\n\n```js\nlet arr = [obj1, obj2, obj3];\n```\n\n...Tapi disana terdapat sebuah masalah dengan array. Operasi \"delete element\" dan \"insert elemen\" sangatlah mahal. Contoh, operasi `arr.unshift(obj)` harus memberikan nomor baru untuk membuat ruang untuk `obj` baru, dan jika arraynya sangat besar, itu akan memakan waktu. Sama dengan `arr.shift()`.\n\nSatu-satunya modifikasi struktural yang tidak membutuhkan penomoran secara besar-besaran adalah itu yang beroperasi dengan akhiran dari array: `arr.push/pop`. Jadi sebuah array bisa menjadi cukup lambat untuk antrian yang panjang, ketika kita harus bekerja dengan awalannya.\n\nAlternatifnya, jika kita benar-benar membutuhkan memasukan/menghapus dengan cepat, kiat bisa memilih data struktur lainnya bernama [linked list](https://en.wikipedia.org/wiki/Linked_list).\n\n*Element linked list* didefinisikan secara rekursif sebagai sebuah objek dengan:\n- `value`.\n- `next` properti yang mereferensi *elemen linked list* selanjutnya atau `null` jika sudah mencapai akhir.\n\nContoh:\n\n```js\nlet list = {\n value: 1,\n next: {\n value: 2,\n next: {\n value: 3,\n next: {\n value: 4,\n next: null\n }\n }\n }\n};\n```\n\nRepresentasi grafikal dari sebuah list:\n\n![linked list](linked-list.svg)\n\nAlternatif kode untuk pembuatan:\n\n```js no-beautify\nlet list = { value: 1 };\nlist.next = { value: 2 };\nlist.next.next = { value: 3 };\nlist.next.next.next = { value: 4 };\nlist.next.next.next.next = null;\n```\n\nDisini kita bisa melihat lebih jelas bahwa disana terdapat beberapa objek, masing-masing memiliki `value` dan `next` mengarah ke objek disisinya. Variabel `list` adalah objek pertama didalam rantainya, jadi pointer `next` selanjutnya dari itu bisa kita dapat dari elemen apapun.\n\nList-nya bisa dengan mudah dibagi menjadi beberapa bagian dan lalu disatukan kembali:\n\n```js\nlet secondList = list.next.next;\nlist.next.next = null;\n```\n\n![linked list split](linked-list-split.svg)\n\nUntuk menyatukan:\n\n```js\nlist.next.next = secondList;\n```\n\nDan tentu saja kita bisa memasukan atau menghapus item dari manapun.\n\nContoh, untuk memasukan nilai baru, kita harus memperbaharui awalan dari list-nya:\n\n```js\nlet list = { value: 1 };\nlist.next = { value: 2 };\nlist.next.next = { value: 3 };\nlist.next.next.next = { value: 4 };\n\n*!*\n// memasukan nilai baru kedalam list-nya\nlist = { value: \"new item\", next: list };\n*/!*\n```\n\n![linked list](linked-list-0.svg)\n\nUntuk menghapus nilai dari tengah, ganti `next` dengan yang sebelumnya:\n\n```js\nlist.next = list.next.next;\n```\n\n![linked list](linked-list-remove-1.svg)\n\nKita membuat `list.next` melompati `1` menuju nilai `2`. Nilai `1` sekarang tidak termasuk dari rentetannya. Jika itu tidak tersimpan dimanapun, itu akan secara otomatis dihapus dari memori.\n\nTidak seperti array, disana tidak terdapat penomoran urang secara besar-besaran, kita bisa dengan mudah menyusun kembali elemen-elemennya.\n\nUmumnya, list tidak selalu lebih baik daripada array. Sebaliknya semua orang harusnya hanya menggunakan list.\n\nKekurangannya adalah kita tidak bisa dengan mudah mengakses sebuah elemen dengan nomornya. Didalam sebuah array kita bisa dengan mudah: `arr[n]` adalah sebuah referensi langsung. Tapi didalam list kita harus memulai dari item pertama dan maju `next` `N` kali untuk mendapatkan elemen ke Nth.\n\n...Tapi kita tidak selalu butuh operasi seperti itu. Contoh, ketika kita membutuhkan sebuah antrian atau bahkan [deque](https://en.wikipedia.org/wiki/Double-ended_queue) -- struktur urutannya harus mengijinkan penambahan/penghapusan elemen dengan cepat dari kedua sisi tapi akses kedalam bagian tengah tidak dibutuhkan.\n\nList bisa ditingkatkan:\n- Kita bisa menambahkan properti `prev` didalam penambahan untuk `next` untuk mereferensikan elemen sebelumnya, untuk berpindah mundur dengan mudah.\n- Kita juga bisa menambahkan sebuah variabel bernama `tail` mereferensi elemen terakhir dari list (dan memperbaharuinya ketika menambahkan/menghapus elemen dari ujung terakhir).\n- Struktur data mungkin bervariasi tergantung dari kebutuhan kita.\n\n## Rangkuman\n\nIstilah:\n- *Rekursi* adalah sebuah istilah programming yang berarti memanggil fungsi dari dirinya sendiri. Fungsi rekursi bisa digunakan untuk memecahkan tugas dengan cara yang elegan.\n\n Ketika sebuah fungsi memanggil dirinya sendiri, itulah yang disebut dengan *langkah rekursi*. *Dasar* dari rekursi adalah sebuah argumen fungsi yang membuat task menjadi lebih sederhana yang dimana fungsinya tidak membuat pemanggilan lebih jauh.\n\n- Sebuah struktur data [didefinisikan secara rekursif](https://en.wikipedia.org/wiki/Recursive_data_type) adalah struktur data yang bisa mendefinisikan menggunakan dirinya sendiri.\n\n Contoh, linked list bisa didefinisikan sebagai sebuah struktur data yang terdiri dari sebuah objek yang mereferensi sebuah list (atau null).\n\n ```js\n list = { value, next -> list }\n ```\n\n Pohon seperti pohon elemen HTML atau pohon departemen dari bab ini juga secara natural rekursif: cabang mereka dan setuap cabang mempunyai cabang lainnya.\n\n Fungsi rekursif bisa digunakan untuk menyusurinya seperti yang telah kita lihat didalam contoh `sumSalary`.\n\nFungsi rekursif manapun bisa ditulis ulang menggunakan iterasi. Dan itu terkadang membutuhkan hal-hal optimasi. Tapi untuk kebanyakan task sebuah solusi rekursif cukup cepat dan mudah untuk ditulis dan didukung." }, { "path": "1-js/06-advanced-functions/01-recursion/head.html", "content": "\n" }, { "path": "1-js/06-advanced-functions/02-rest-parameters-spread/article.md", "content": "# Parameter rest dan sintaks spread\n\nBanyak fungsi bawaan Javascript yang mendukung argumen dengan angka yang panjang.\n\nContoh:\n\n- `Math.max(arg1, arg2, ..., argN)` -- mengembalikan nilai terbesar dari argumen.\n- `Object.assign(dest, src1, ..., srcN)` -- menyalin properti dari `src1..N` kedalam `dest`.\n- ...dan lainnya.\n\nDidalam bab ini kita akan belajar bagaimana cara untuk melakukan hal yang sama, bagaimana cara untuk mengirim array kepada fungsi seperti itu sebagai parameter.\n\n## Parameter rest `...`\n\nSebuah fungsi dapat dipanggil dengan jumlah argumen berapapun, tidak peduli bagaimana itu didefinisikan.\n\nSeperti ini:\n```js run\nfunction sum(a, b) {\n return a + b;\n}\n\nalert( sum(1, 2, 3, 4, 5) );\n```\n\nDisana tidak akan terdapat error karena argumen \"berlebihan\". Tapi tentu saja hasilnya hanya dua angka pertama yang dihitung.\n\nSisa parameternya bisa digunakan didalam fungsi dengan menggunakan tiga titik `...` diikuti nama dari array yang akan berisi mereka. Titik secara harfiah berarti \"kumpulkan sisa parameter didalam array\".\n\nContoh, untuk mengumpulkan seluruh argumen menjadi array `args`:\n\n```js run\nfunction sumAll(...args) { // args adalah nama dari arraynya\n let sum = 0;\n\n for (let arg of args) sum += arg;\n\n return sum;\n}\n\nalert( sumAll(1) ); // 1\nalert( sumAll(1, 2) ); // 3\nalert( sumAll(1, 2, 3) ); // 6\n```\n\nKita bisa memilih untuk mendapatkan parameter pertama sebagai variabel, dan sisanya dikumpulkan.\n\nDisini dua parameter pertama akan dimasukan kedalam variabel dan sisanya akan masuk kedalam array `titles`:\n\n```js run\nfunction showName(firstName, lastName, ...titles) {\n alert( firstName + ' ' + lastName ); // Julius Caesar\n\n // sisanya masuk kedalam array titles\n // i.e. titles = [\"Consul\", \"Imperator\"]\n alert( titles[0] ); // Consul\n alert( titles[1] ); // Imperator\n alert( titles.length ); // 2\n}\n\nshowName(\"Julius\", \"Caesar\", \"Consul\", \"Imperator\");\n```\n\n````warn header=\"Parameter rest harus berada di akhir\"\nParameter rest mengumpulkan seluruh sisa argumen, jadi contoh dibawah tidak dapat dimengerti dan akan menyebabkan error:\n\n```js\nfunction f(arg1, ...rest, arg2) { // arg2 after ...rest ?!\n // error\n}\n```\n\n`...rest` harus selalu berada di akhir.\n````\n\n## Variable \"arguments\"\n\nJuga terdapat objek spesial seperti array bernama `arguments` yang mengandung seluruh argumen dengan indeksnya.\n\nContoh:\n\n```js run\nfunction showName() {\n alert( arguments.length );\n alert( arguments[0] );\n alert( arguments[1] );\n\n // dapat diiterasi\n // for(let arg of arguments) alert(arg);\n}\n\n// menampilkan: 2, Julius, Caesar\nshowName(\"Julius\", \"Caesar\");\n\n// menampilkan: 1, Ilya, undefined (tidak ada argumen kedua)\nshowName(\"Ilya\");\n```\n\nDahulu, parameter rest tidak ada didalam bahasa pemrograman, dan menggunakan `arguments` hanyalah satu-satunya cara untuk mendapatkan seluruh argumen dari sebuah fungsi. Dan itu tetap bekerja, kita bisa menemukannya di kode-kode jadul.\n\nTapi kekurangannya adalah walaupun `arguments` seperti array dan bisa diiterasi, itu bukanlah sebuah array. Itu tidak mendukung metode-metode array, jadi kita tidak bisa memanggil untuk contoh `arguments.map(...)`.\n\nJuga, itu selalu mengandung seluruh argumen. Kita tidak bisa menangkapnya dalam beberapa bagian, seperti yang kita lakukan dengan parameter rest.\n\nJadi ketika kita membutuhkan fiturnya, parameter rest lebih disukai.\n\n````smart header=\"Arrow function tidak memiliki `\\\"arguments\\\"`\"\nJika kita ingin mengakses objek `arguments`dari sebuah fungsi panah/arrow function, itu akan mengambilnya dari fungsi \"normal\" terluar.\n\nContoh:\n\n```js run\nfunction f() {\n let showArg = () => alert(arguments[0]);\n showArg();\n}\n\nf(1); // 1\n```\n\nSeperti yang kita ingat, arrow function tidak memiliki `this` mereka sendiri. Sekarang kita tahu mereka tidak memiliki objek `arguments` yang spesial juga.\n````\n\n\n## Sintaks spread [#spread-syntax]\n\nKita baru saja melihat bagaimana cara untuk mendapatkan sebuah array dari daftar dari sebuah parameter-parameter.\n\nTapi terkadang kita perlu untuk melakukan hal yang sama dengan terbalik.\n\nContoh, terdapat fungsi bawaan [Math.max](mdn:js/Math/max) yang mengembalikan angka terbesar dari list:\n\n```js run\nalert( Math.max(3, 5, 1) ); // 5\n```\n\nSekarang kita bayangkan kita mempunyai sebuah array `[3, 5, 1]. Bagaimana caranya kita memanggil `Math.max` dengan itu?\n\nBerikan itu \"kedalamnya\" tidak akan bekerja, karena `Math.max` mengharapkan sebuah daftar dari argumen numerik, bukan dari array tunggal:\n\n```js run\nlet arr = [3, 5, 1];\n\n*!*\nalert( Math.max(arr) ); // NaN\n*/!*\n```\n\nDan tentu saja kita tidak bisa secara manual memasukan itemnya kedalam kode `Math.max(arr[0], arr[1], arr[2])`, karena kita mungkin tidak yakin ada berapa elemen didalamnya. Lalu saat skripnya dieksekusi, disana mungkin terdapat banyak, atau mungkin tidak ada. Dan itu bukanlah hal yang bagus.\n\n*Sintaks spread* datang untuk membantu! Itu terlihat sama dengan parameter rest, juga menggunakan `...`, tapi itu melakukan yang sebaliknya.\n\nKetika `...arr` digunakan didalam pemanggilan fungsi, itu \"memperluas\" sebuah objek yang bisa diiterasi `arr` kedalam daftar dari argumen.\n\nUntuk `Math.max`:\n\n```js run\nlet arr = [3, 5, 1];\n\nalert( Math.max(...arr) ); // 5 (spread mengubah array menjadi daftar dari argumen)\n```\n\nKita juga bisa memberikan beberapa hal yang bisa diiterasi dengan cara ini:\n\n```js run\nlet arr1 = [1, -2, 3, 4];\nlet arr2 = [8, 3, -8, 1];\n\nalert( Math.max(...arr1, ...arr2) ); // 8\n```\n\nKita juga bisa mengkombinasikan sintaks spread dengan nilai normal:\n\n\n```js run\nlet arr1 = [1, -2, 3, 4];\nlet arr2 = [8, 3, -8, 1];\n\nalert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25\n```\n\nJuga, sintaks spread bisa digunakan untuk menyatukan array-array:\n\n```js run\nlet arr = [3, 5, 1];\nlet arr2 = [8, 9, 15];\n\n*!*\nlet merged = [0, ...arr, 2, ...arr2];\n*/!*\n\nalert(merged); // 0,3,5,1,2,8,9,15 (0, lalu arr, lalu 2, lalu arr2)\n```\n\nDalam contoh diatas kita menggunakan sebuah array untuk mendemonstrasikan sintaks spread, tapi hal yang bisa diiterasi apapun bisa digunakan.\n\nContoh, disini kita menggunakan sintaks spread untuk mengubah string menjadi array dari karakter-karakter:\n\n```js run\nlet str = \"Hello\";\n\nalert( [...str] ); // H,e,l,l,o\n```\n\nSintaks spread secara internal menggunakan iterator untuk menggabungkan elemen-elemen, cara yang sama seperti yang dilakukan `for..of`.\n\nJadi, untuk sebuah string, `for..of` mengembalikan karakter-karakter dan `...str` menjadi `\"H\",\"e\",\"l\",\"l\",\"o\"`. Daftar dari karakter-karakter diberikan kepada penginisialisasi array `[...str]`.\n\nUntuk task tertentu kita bisa juga menggunakan `Array.from`, karena itu akan mengkonversi sebuah hal yang bisa diiterasi (seperti string) menjadi sebuah array:\n\n```js run\nlet str = \"Hello\";\n\n// Array.from mengubah sebuah iterabel menjadi sebuah array\nalert( Array.from(str) ); // H,e,l,l,o\n```\n\nHasilnya akan sama seperti `[...str]`.\n\nTapi disana terdapat perbedaan yang tipis diantara `Array.from(obj)` dan `[...obj]`:\n\n- `Array.from` dapat dioperasikan di \"hal yang seperti array\" dan \"hal yang bisa diiterasi\".\n- Sintaks spread hanya bekerja dengan hal yang bisa diiterasi.\n\nJadi, task untuk mengubah sesuatu menjadi sebuah array, `Array.from` cenderung lebih banyak digunakan.\n\n\n## Mendapatkan salinan baru dari sebuah array/objek\n\nInget ketika kita berbicara tentang `Object.assign()` [sebelumnya](info:object-copy#cloning-and-merging-object-assign)?\n\nItu adalah hal yang bisa dilakukan untuk melakukan hal yang sama dengan sintaks spread.\n\n```js run\nlet arr = [1, 2, 3];\nlet arrCopy = [...arr]; // sebarkan arraynya menjadi list dari parameter\n // lalu masukan hasilnya kedalam array yang baru\n\n// apakah arraynya mempunyai konten yang sama?\nalert(JSON.stringify(arr) === JSON.stringify(arrCopy)); // true\n\n// apakah arraynya sama?\nalert(arr === arrCopy); // false (bukanlah referensi yang sama)\n\n// memodifikasi array awal kita tidak memodifikasi salinannya:\narr.push(4);\nalert(arr); // 1, 2, 3, 4\nalert(arrCopy); // 1, 2, 3\n```\n\nPerhatikan bahwa melakukan hal yang sama seperti menyalin sebuah objek adalah hal yang bisa dilakukan:\n\n```js run\nlet obj = { a: 1, b: 2, c: 3 };\nlet objCopy = { ...obj }; // sebarkan objeknya menjadi daftar dari parameter\n // lalu kembalikan hasilnya kedalam objek baru.\n\n// apakah objeknya memiliki kontent yang sama?\nalert(JSON.stringify(obj) === JSON.stringify(objCopy)); // true\n\n// apakah objeknya sama?\nalert(obj === objCopy); // false (not same reference)\n\n// memodifikasi objel awal kita tidak berarti memodifikasi salinannya:\nobj.d = 4;\nalert(JSON.stringify(obj)); // {\"a\":1,\"b\":2,\"c\":3,\"d\":4}\nalert(JSON.stringify(objCopy)); // {\"a\":1,\"b\":2,\"c\":3}\n```\n\nMenyalin objek dengan cara ini lebih pendek daripada `let objCopy = Object.assign({}, obj);` atau untuk sebuah array `let arrCopy = Objek.assign([], arr);` jadi kita lebih memilih menggunakannya kapanpun bila bisa digunakan.\n\n\n## Ringkasan\n\nketika kita melihat `\"...\"` didalam kode, itu adalah parameter rest atau sintaks spread.\n\nTerdapat sebuah cara yang mudah untuk membedakan mereka:\n\n- Ketika `...` berada di akhiran dari parameter fungsi, itu adalah \"parameter rest\" dan menggabungkan sisa dari daftar argumen menjadi sebuah array.\n- Ketika `...` muncul didalam pemanggilan fungsi atau sejenisnya, itu dipanggil dengan \"sintaks spread\" dan membentangkan array menjadi sebuah list.\n\nPenggunaan pola:\n\n- Paramter rest digunakan untuk membuat fungsi yang dapat menerima argumen dengan jumlah berapapun.\n- Sintkas spread digunakan untuk mengirimkan sebuah array kedalam sebuah fungsi yang biasanya membutuhkan daftar dari beberapa argumen.\n\nBersama mereka membantu menggunakan sebuah list dan sebuah array dari parameter dengan mudah.\n\nSemua argumen dari sebuah pemanggilan fungsi juga tersedia di argumen dengan \"gaya-lama\": objek seperti array yang bisa diiterasi.\n" }, { "path": "1-js/06-advanced-functions/03-closure/1-closure-latest-changes/solution.md", "content": "Jawabannya adalah: **Pete**.\n\nSebuah fungsi mendapatkan variabel yang sekarang, nilai paling terbaru akan digunakan.\n\nNilai variabel lama tidak akan tersimpan dimanapun. Ketika sebuah fungsi menginginkan sebuah variabel, nilai terbaru akan diambil dari lingkungan leksikalnya atau dari luar.\n" }, { "path": "1-js/06-advanced-functions/03-closure/1-closure-latest-changes/task.md", "content": "Nilai penting: 5\n\n---\n\n# Apakah sebuah fungsi akan mengambil perubahan terakhir?\n\nFungsi sayHi menggunakan nama variabel dari luar. Ketika fungsinya berjalan, nilai manakah yang akan digunakan?\n\n```js\nlet name = \"John\";\n\nfunction sayHi() {\n alert(\"Hi, \" + name);\n}\n\nname = \"Pete\";\n\nsayHi(); // apakah yang akan tampil: \"John\" atau \"Pete\"?\n```\n\nSituasi seperti itu adalah hal yang biasa didalam peramban dan pengembangan di bagian server. Sebuah fungsi mungkin sudah dijadwalkan untuk dieksekusi nanti daripada saat dibuat, untuk contoh setelah sebuah aksi user atau setelah me-request ke jaringan.\n\nJadi, pertanyaannya adalah: apakah nilai terakhir akan diambil?\n" }, { "path": "1-js/06-advanced-functions/03-closure/10-make-army/_js.view/solution.js", "content": "function makeArmy() {\n\n let shooters = [];\n\n for(let i = 0; i < 10; i++) {\n let shooter = function() { // fungsi shooter\n alert( i ); // harus menampilkan angkanya\n };\n shooters.push(shooter);\n }\n\n return shooters;\n}\n" }, { "path": "1-js/06-advanced-functions/03-closure/10-make-army/_js.view/source.js", "content": "function makeArmy() {\n let shooters = [];\n\n let i = 0;\n while (i < 10) {\n let shooter = function() { // fungsi shooter\n alert( i ); // harus menampilkan angkanya\n };\n shooters.push(shooter);\n i++;\n }\n\n return shooters;\n}\n\n/*\nlet army = makeArmy();\n\narmy[0](); // angka shooter 0 menampilkan 10\narmy[5](); // dan angka 5 juga mengeluarkan 10...\n// ... seluruh shooter menampilkan 10 daripada nilai 0, 1, 2, 3...\n*/\n" }, { "path": "1-js/06-advanced-functions/03-closure/10-make-army/_js.view/test.js", "content": "describe(\"army\", function() {\n\n let army;\n \n before(function() {\n army = makeArmy();\n window.alert = sinon.stub(window, \"alert\");\n });\n\n it(\"army[0] shows 0\", function() {\n army[0]();\n assert(alert.calledWith(0));\n });\n\n\n it(\"army[5] shows 5\", function() {\n army[5]();\n assert(alert.calledWith(5));\n });\n\n after(function() {\n window.alert.restore();\n });\n\n});\n" }, { "path": "1-js/06-advanced-functions/03-closure/10-make-army/solution.md", "content": "\nLet's examine what exactly happens inside `makeArmy`, and the solution will become obvious.\n\n1. It creates an empty array `shooters`:\n\n ```js\n let shooters = [];\n ```\n2. Fills it with functions via `shooters.push(function)` in the loop.\n\n Every element is a function, so the resulting array looks like this:\n\n ```js no-beautify\n shooters = [\n function () { alert(i); },\n function () { alert(i); },\n function () { alert(i); },\n function () { alert(i); },\n function () { alert(i); },\n function () { alert(i); },\n function () { alert(i); },\n function () { alert(i); },\n function () { alert(i); },\n function () { alert(i); }\n ];\n ```\n\n3. The array is returned from the function.\n \n Then, later, the call to any member, e.g. `army[5]()` will get the element `army[5]` from the array (which is a function) and calls it.\n \n Now why do all such functions show the same value, `10`?\n \n That's because there's no local variable `i` inside `shooter` functions. When such a function is called, it takes `i` from its outer lexical environment.\n \n Then, what will be the value of `i`?\n \n If we look at the source:\n \n ```js\n function makeArmy() {\n ...\n let i = 0;\n while (i < 10) {\n let shooter = function() { // shooter function\n alert( i ); // should show its number\n };\n shooters.push(shooter); // add function to the array\n i++;\n }\n ...\n }\n ```\n \n We can see that all `shooter` functions are created in the lexical environment of `makeArmy()` function. But when `army[5]()` is called, `makeArmy` has already finished its job, and the final value of `i` is `10` (`while` stops at `i=10`).\n \n As the result, all `shooter` functions get the same value from the outer lexical environment and that is, the last value, `i=10`.\n \n ![](lexenv-makearmy-empty.svg)\n \n As you can see above, on each iteration of a `while {...}` block, a new lexical environment is created. So, to fix this, we can copy the value of `i` into a variable within the `while {...}` block, like this:\n \n ```js run\n function makeArmy() {\n let shooters = [];\n \n let i = 0;\n while (i < 10) {\n *!*\n let j = i;\n */!*\n let shooter = function() { // shooter function\n alert( *!*j*/!* ); // should show its number\n };\n shooters.push(shooter);\n i++;\n }\n \n return shooters;\n }\n \n let army = makeArmy();\n \n // Now the code works correctly\n army[0](); // 0\n army[5](); // 5\n ```\n \n Here `let j = i` declares an \"iteration-local\" variable `j` and copies `i` into it. Primitives are copied \"by value\", so we actually get an independent copy of `i`, belonging to the current loop iteration.\n \n The shooters work correctly, because the value of `i` now lives a little bit closer. Not in `makeArmy()` Lexical Environment, but in the Lexical Environment that corresponds to the current loop iteration:\n \n ![](lexenv-makearmy-while-fixed.svg)\n \n Such a problem could also be avoided if we used `for` in the beginning, like this:\n \n ```js run demo\n function makeArmy() {\n \n let shooters = [];\n \n *!*\n for(let i = 0; i < 10; i++) {\n */!*\n let shooter = function() { // shooter function\n alert( i ); // should show its number\n };\n shooters.push(shooter);\n }\n \n return shooters;\n }\n \n let army = makeArmy();\n \n army[0](); // 0\n army[5](); // 5\n ```\n \n That's essentially the same, because `for` on each iteration generates a new lexical environment, with its own variable `i`. So `shooter` generated in every iteration references its own `i`, from that very iteration.\n \n ![](lexenv-makearmy-for-fixed.svg)\n\nNow, as you've put so much effort into reading this, and the final recipe is so simple - just use `for`, you may wonder -- was it worth that?\n\nWell, if you could easily answer the question, you wouldn't read the solution. So, hopefully this task must have helped you to understand things a bit better. \n\nBesides, there are indeed cases when one prefers `while` to `for`, and other scenarios, where such problems are real.\n" }, { "path": "1-js/06-advanced-functions/03-closure/10-make-army/task.md", "content": "nilai penting: 5\n\n---\n\n# Pasukan-pasukan fungsi\n\nKode berikut membuat array dari `shooters`.\n\nSetiap fungsi diinginkan untuk mengeluarkan angkanya sendiri. Tetapi ada yang salah...\n\n```js run\nfunction makeArmy() {\n let shooters = [];\n\n let i = 0;\n while (i < 10) {\n let shooter = function() { // fungsi shooter\n alert( i ); // seharusnya mengeluarkan angkanya sendiri\n };\n shooters.push(shooter); // and add it to the array\n i++;\n }\n\n // ...and return the array of shooters\n return shooters;\n}\n\nlet army = makeArmy();\n\n*!*\n// semua penembak menunjukkan 10 bukannya angka mereka 0, 1, 2, 3...\narmy[0](); // 10 dari nomor penembak 0\narmy[1](); // 10 dari penembak nomor 1\narmy[2](); // 10 ...dan seterusnya.\n*/!*\n```\n\nMengapa semua penembak menunjukkan nilai yang sama?\n\nPerbaiki kode agar berfungsi sebagaimana mestinya.\n\n" }, { "path": "1-js/06-advanced-functions/03-closure/2-closure-variable-access/solution.md", "content": "Jawabannya adalah: **Pete**.\n\nFungsi `work()` didalam kode mendapatkan `name` dari tempat dimana itu dibuat daripada mereferensi dari luar lingkungannya :\n\n![](lexenv-nested-work.svg)\n\njadi, hasilnya adalah `\"Pete\"` disini.\n\nTapi jika disana tidak ada `let name` didalam `makeWorker()`, maka pencarian akan berlanjut ke luar dan mengambil variabel global seperti yang bisa kita lihat diatas. Di kasus ini hasilnya akan menjadi `\"John\"`." }, { "path": "1-js/06-advanced-functions/03-closure/2-closure-variable-access/task.md", "content": "nilai penting: 5\n\n---\n\n# Variabel manakah yang tersedia?\n\nFungsi `makeWorker` dibawah membuat fungsi lainnya dan mengembalikannya. Fungsi baru itu bisa dipanggil dari manapun.\n\nAkankah itu mempunyai akses ke variabel luar dari tempat pembuatannya, atau dari tempat pemanggilannya, atau keduanya?\n\n```js\nfunction makeWorker() {\n let name = \"Pete\";\n\n return function() {\n alert(name);\n };\n}\n\nlet name = \"John\";\n\n// pembuatan fungsi\nlet work = makeWorker();\n\n// dipanggil\nwork(); // apakah yang akan tampil?\n```\n\nNilai manakah yang akan muncul? \"Pete\" atau \"John\"?\n" }, { "path": "1-js/06-advanced-functions/03-closure/3-counter-independent/solution.md", "content": "Jawaban: **0,1.**\n\nFungsi `counter` dan `counter2` dibuat dengan panggilan fungsi `makeCounter` yang berbeda.\n\nJadi mereka memiliki lingkungan leksikal yang berbeda, dengan `count` mereka masing-masing.\n" }, { "path": "1-js/06-advanced-functions/03-closure/3-counter-independent/task.md", "content": "nilai penting: 5\n\n---\n\n# Apakah para counter independen?\n\nDi sini kita membuat dua counter: `counter` dan `counter2` menggunakan fungsi `makeCounter` yang sama.\n\nApakah mereka independen? Apa yang akan counter kedua munculkan? `0,1` atau `2,3` atau yang lainnya?\n\n```js\nfunction makeCounter() {\n let count = 0;\n\n return function() {\n return count++;\n };\n}\n\nlet counter = makeCounter();\nlet counter2 = makeCounter();\n\nalert( counter() ); // 0\nalert( counter() ); // 1\n\n*!*\nalert( counter2() ); // ?\nalert( counter2() ); // ?\n*/!*\n```\n\n" }, { "path": "1-js/06-advanced-functions/03-closure/4-counter-object-independent/solution.md", "content": "\nTentu saja hal tersebut akan bekerja.\n\nKedua fungsi bersarang dibuat dengan lingkungan leksikal yang sama, jadi mereka membagi akses ke variabel `count` yang sama:\n\n```js run\nfunction Counter() {\n let count = 0;\n\n this.up = function() {\n return ++count;\n };\n \n this.down = function() {\n return --count;\n };\n}\n\nlet counter = new Counter();\n\nalert( counter.up() ); // 1\nalert( counter.up() ); // 2\nalert( counter.down() ); // 1\n```\n" }, { "path": "1-js/06-advanced-functions/03-closure/4-counter-object-independent/task.md", "content": "nilai penting: 5\n\n---\n\n# Objek counter\n\nDisini kita memiliki objek counter yang dibuat dengan bantuan fungsi konstruktor.\n\nApakah hal tersebut akan bekerja? Apa yang akan muncul?\n\n```js\nfunction Counter() {\n let count = 0;\n\n this.up = function() {\n return ++count;\n };\n this.down = function() {\n return --count;\n };\n}\n\nlet counter = new Counter();\n\nalert( counter.up() ); // ?\nalert( counter.up() ); // ?\nalert( counter.down() ); // ?\n```\n\n" }, { "path": "1-js/06-advanced-functions/03-closure/5-function-in-if/solution.md", "content": "Hasilnya yaitu **sebuah error**.\n\nFungsi `sayHi` dideklarasikan di dalam `if`, jadi fungsi tersebut hanya hidup di dalamnya. Tidak ada fungsi `sayHi` di luar." }, { "path": "1-js/06-advanced-functions/03-closure/5-function-in-if/task.md", "content": "\n# Fungsi di dalam if\n\nLihatlah kode di bawah ini. Apa hasil dari panggilan fungsi di baris terakhir?\n\n```js run\nlet phrase = \"Hello\";\n\nif (true) {\n let user = \"John\";\n\n function sayHi() {\n alert(`${phrase}, ${user}`);\n }\n}\n\n*!*\nsayHi();\n*/!*\n```\n" }, { "path": "1-js/06-advanced-functions/03-closure/6-closure-sum/solution.md", "content": "Agar kurung kedua berhasil, yang pertama harus mengembalikan sebuah fungsi.\n\nSeperti ini:\n\n```js run\nfunction sum(a) {\n\n return function(b) {\n return a + b; // mengambil \"a\" dari lingkungan leksikal luar\n };\n\n}\n\nalert( sum(1)(2) ); // 3\nalert( sum(5)(-1) ); // 4\n```\n\n" }, { "path": "1-js/06-advanced-functions/03-closure/6-closure-sum/task.md", "content": "nilai penting: 4\n\n---\n\n# Penjumlahan dengan closure\n\nBuatlah sebuah fungsi `sum` yang bekerja seperti ini: `sum(a)(b) = a+b`.\n\nYa, seperti ini, dengan kurung ganda (bukan salah ketik).\n\nSebagai contoh:\n\n```js\nsum(1)(2) = 3\nsum(5)(-1) = 4\n```\n\n" }, { "path": "1-js/06-advanced-functions/03-closure/7-let-scope/solution.md", "content": "Hasilnya adalah: **error**.\n\nCobalah jalankan ini:\n\n```js run\nlet x = 1;\n\nfunction func() {\n*!*\n console.log(x); // ReferenceError: Cannot access 'x' before initialization\n*/!*\n let x = 2;\n}\n\nfunc();\n```\n\nDidalam contoh ini kita bisa mengamati perbedaan aneh diantara variabel yang \"tidak-ada\" dan \"belum diinisialisasi\".\n\nMungkin seperti yang telah kamu baca didalam artikel [](info:closure), sebuah variabel dimulai didalam state \"belum diinisialisasi\" sejak saat eksekusinya memasuki blok kode (atau sebuah fungsi). Dan itu akan tetap belum diinisialisasi sampai statemen `let` yang bersangkutan.\n\nDengan kata lain, sebuah variabel secara teknis ada, tapi kita belum bisa menggunakannya sebelum `let`.\n\nKode diatas mendemonstrasikan hal itu.\n\n```js\nfunction func() {\n*!*\n // variabel lokal x dikenal mesinnya di awal dari fungsinya,\n // tapi \"belum diinisialisasi\" (tidak dapat digunakan) sampai let (\"zona mati\")\n // karenanya terdapat error\n*/!*\n\n console.log(x); // ReferenceError: Cannot access 'x' before initialization\n\n let x = 2;\n}\n```\n\nZona tidak terpakai dari sebuah variabel ini (dari awal blok kode sampai `let`) terkadang dipanggil dengan \"zona mati\".\n" }, { "path": "1-js/06-advanced-functions/03-closure/7-let-scope/task.md", "content": "nilai penting: 4\n\n---\n\n# Apakah variabelnya terlihat?\n\nApakah hasil dari kode ini?\n\n```js\nlet x = 1;\n\nfunction func() {\n console.log(x); // ?\n\n let x = 2;\n}\n\nfunc();\n```\n\nP.S. There's a pitfall in this task. The solution is not obvious.\nCatatan. Terdapat jebakan pada task ini. Solusinya menjadi kurang jelas.\n" }, { "path": "1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/solution.js", "content": "\nfunction inArray(arr) {\n return x => arr.includes(x);\n}\n\nfunction inBetween(a, b) {\n return x => (x >= a && x <= b);\n}" }, { "path": "1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/source.js", "content": "\nlet arr = [1, 2, 3, 4, 5, 6, 7];\n\nfunction inBetween(a, b) {\n // ...your code...\n}\n\nfunction inArray(arr) {\n // ...your code...\n}\n" }, { "path": "1-js/06-advanced-functions/03-closure/8-filter-through-function/_js.view/test.js", "content": "\ndescribe(\"inArray\", function() {\n let arr = [1, 2, 3, 4, 5, 6, 7];\n\n it(\"returns the filter for values in array\", function() {\n\n let filter = inArray(arr);\n assert.isTrue(filter(5));\n assert.isFalse(filter(0));\n });\n});\n\n\ndescribe(\"inBetween\", function() {\n\n it(\"returns the filter for values between\", function() {\n let filter = inBetween(3, 6);\n assert.isTrue(filter(5));\n assert.isFalse(filter(0));\n });\n});\n" }, { "path": "1-js/06-advanced-functions/03-closure/8-filter-through-function/solution.md", "content": "\n# Filter inBetween\n\n```js run\nfunction inBetween(a, b) {\n return function(x) {\n return x >= a && x <= b;\n };\n}\n\nlet arr = [1, 2, 3, 4, 5, 6, 7];\nalert( arr.filter(inBetween(3, 6)) ); // 3,4,5,6\n```\n\n# Filter inArray\n\n```js run demo\nfunction inArray(arr) {\n return function(x) {\n return arr.includes(x);\n };\n}\n\nlet arr = [1, 2, 3, 4, 5, 6, 7];\nalert( arr.filter(inArray([1, 2, 10])) ); // 1,2\n```\n" }, { "path": "1-js/06-advanced-functions/03-closure/8-filter-through-function/task.md", "content": "nilai penting: 5\n\n---\n\n# Filter dengan fungsi\n\nKita memiliki method bawaan `arr.filter(f)` untuk array. Method tersebut menyaring seluruh elemen menggunakan fungsi `f`. Apabila mengembalikan `true`, maka elemen tersebut dikembalikan di array hasil.\n\nBuatlah filter \"yang siap pakai\":\n\n- `inBetween(a, b)` -- antara `a` dan `b` atau sama dengan (inklusif).\n- `inArray([...])` -- terkandung di dalam array.\n\nPenggunaannya harus seperti ini:\n\n- `arr.filter(inBetween(3,6))` -- menyimpan hanya nilai di antara 3 dan 6.\n- `arr.filter(inArray([1,2,3]))` -- menyimpan elemen apabila sama dengan salah satu dari `[1,2,3]`.\n\nSebagai contoh:\n\n```js\n/* .. implementasi inBetween dan inArray */\nlet arr = [1, 2, 3, 4, 5, 6, 7];\n\nalert( arr.filter(inBetween(3, 6)) ); // 3,4,5,6\n\nalert( arr.filter(inArray([1, 2, 10])) ); // 1,2\n```\n\n" }, { "path": "1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/solution.js", "content": "function byField(fieldName){\n return (a, b) => a[fieldName] > b[fieldName] ? 1 : -1;\n}\n" }, { "path": "1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/source.js", "content": "function byField(fieldName){\n\n // Your code goes here.\n\n}\n" }, { "path": "1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/test.js", "content": "describe(\"byField\", function(){\n\n let users = [\n { name: \"John\", age: 20, surname: \"Johnson\" },\n { name: \"Pete\", age: 18, surname: \"Peterson\" },\n { name: \"Ann\", age: 19, surname: \"Hathaway\" },\n ];\n\n it(\"sorts users by name\", function(){\n let nameSortedKey = [\n { name: \"Ann\", age: 19, surname: \"Hathaway\" },\n { name: \"John\", age: 20, surname: \"Johnson\"},\n { name: \"Pete\", age: 18, surname: \"Peterson\" },\n ];\n let nameSortedAnswer = users.sort(byField(\"name\"));\n assert.deepEqual(nameSortedKey, nameSortedAnswer);\n });\n\n it(\"sorts users by age\", function(){\n let ageSortedKey = [\n { name: \"Pete\", age: 18, surname: \"Peterson\" },\n { name: \"Ann\", age: 19, surname: \"Hathaway\" },\n { name: \"John\", age: 20, surname: \"Johnson\"},\n ];\n let ageSortedAnswer = users.sort(byField(\"age\"));\n assert.deepEqual(ageSortedKey, ageSortedKey);\n });\n\n it(\"sorts users by surname\", function(){\n let surnameSortedKey = [\n { name: \"Ann\", age: 19, surname: \"Hathaway\" },\n { name: \"John\", age: 20, surname: \"Johnson\"},\n { name: \"Pete\", age: 18, surname: \"Peterson\" },\n ];\n let surnameSortedAnswer = users.sort(byField(\"surname\"));\n assert.deepEqual(surnameSortedAnswer, surnameSortedKey);\n });\n\n});\n" }, { "path": "1-js/06-advanced-functions/03-closure/9-sort-by-field/solution.md", "content": "\n" }, { "path": "1-js/06-advanced-functions/03-closure/9-sort-by-field/task.md", "content": "nilai penting: 5\n\n---\n\n# Urutkan berdasarkan field\n\nKita memiliki array objek untuk diurutkan:\n\n```js\nlet users = [\n { name: \"John\", age: 20, surname: \"Johnson\" },\n { name: \"Pete\", age: 18, surname: \"Peterson\" },\n { name: \"Ann\", age: 19, surname: \"Hathaway\" }\n];\n```\n\nCara yang biasa dilakukan yaitu:\n\n```js\n// berdasarkan name (Ann, John, Pete)\nusers.sort((a, b) => a.name > b.name ? 1 : -1);\n\n// berdasarkan age (Pete, Ann, John)\nusers.sort((a, b) => a.age > b.age ? 1 : -1);\n```\n\nApakah kita dapat membuatnya lebih ringkas, seperti ini?\n\n```js\nusers.sort(byField('name'));\nusers.sort(byField('age'));\n```\n\nJadi, daripada menulis sebuah fungsi, cukup tulis `byField(fieldName)`.\n\nTulislah fungsi `byField` yang dapat digunakan untuk itu.\n" }, { "path": "1-js/06-advanced-functions/03-closure/article.md", "content": "# Lingkup variabel, closure\n\nJavascript adalah bahasa yang berorientasi-fungsi. Itu memberikan kita banyak kebebasan. Sebuah fungsi bisa dibuat kapanpun, diberikan sebagai argumen kedalam fungsi lain, dan lalu dipanggil dari kode yang benar-benar berbeda nanti.\n\nKita sudah tahu bahwa sebuah fungsi bisa mengakses variabel diluar dari fungsi tersebut (variabel \"luar\").\n\nTapi apa yang terjadi jika variabel luar berubah saat fungsinya dibuat? Akankan fungsinya mendapatkan nilai yang baru atau yang lama?\n\nDan bagaimana jika sebuah fungsi diberikan sebagai paramter dan dipanggil dibagian kode lain, akankah itu mendapatkan akses ke variabel luar ditempat itu?\n\nAyo kita peruas pengetahuan kita untuk mengerti skenario ini dan skenario yang lebih kompleks.\n\n```smart header=\"Kita akan bahas tentang variabel `let/const` di sini\"\nDi JavaScript, ada 3 cara mendeklarasi variabel: `let`, `const` (cara-cara modern), dan `var` (sisa masa lalu).\n\n- Di artikel ini kita akan memakai variabel `let` dalam contoh.\n- Variabel, yang dideklarasi dengan `const`, bertindak sama, jadi artikel ini juga tentang `const`.\n- `var` usang punya perbedaan mencolok, mereka akan dibahas di artikel .\n```\n\n## Blok kode\n\nJika variabel dideklarasi di dalam blok kode `{...}`, ia hanya terlihat di dalam blok itu.\n\nMisalnya:\n\n```js run\n{\n // lakukan pekerjaan dengan variabel lokal yang harusnya tak terlihat dari luar\n\n let message = \"Hello\"; // hanya terlihat dalam blok ini\n\n alert(message); // Hello\n}\n\nalert(message); // Error: message is not defined\n```\n\nKita bisa memakai ini untuk mengisolasi potongan kode yang melakukan tugasnya sendiri, dengan variabel yang dia punya sendiri:\n\n```js run\n{\n // tampilkan pesan\n let message = \"Hello\";\n alert(message);\n}\n\n{\n // tampilkan pesan lain\n let message = \"Goodbye\";\n alert(message);\n}\n```\n\n````smart header=\"Akan muncul galat tanpa blok\"\nTolong ingat, tanpa blok terpisah akan muncul galat, jika kita memakai `let` dengan nama variabel yang sudah ada:\n\n```js run\n// tampilkan pesan\nlet message = \"Hello\";\nalert(message);\n\n// tampilkan pesan lain\n*!*\nlet message = \"Goodbye\"; // Galat: variabel sudah dideklarasi\n*/!*\nalert(message);\n```\n````\n\nUntuk `if`, `for`, `while` dan lain-lain, variabel yang dideklarasi dalam `{...}` juga hanya terlihat di situ saja:\n\n```js run\nif (true) {\n let phrase = \"Hello!\";\n\n alert(phrase); // Hello!\n}\n\nalert(phrase); // Galat, variabel ini tak ada!\n```\n\nDi sini, setelah `if` selesai, `alert` di bawah tak akan melihat `phrase`, sehingga terjadi galat.\n\nIni keren, karena ia memperbolehkan kita membuat variabel blok-lokal, yang spesifik ke cabang `if`.\n\nHal serupa juga berlaku untuk loop `for` dan `while`:\n\n```js run\nfor (let i = 0; i < 3; i++) {\n // variabel i hanya terlihat di dalam for ini\n alert(i); // 0, lalu 1, lalu 2\n}\n\nalert(i); // Galat, variabel ini tak ada\n```\n\nVisually, `let i` is outside of `{...}`. But the `for` construct is special here: the variable, declared inside it, is considered a part of the block.\n\n## Fungsi bersarang\n\nSebuah fungsi dikatakan \"bersarang\" apabila fungsi tersebut dibuat di dalam fungsi lainnya.\n\nHal tersebut mudah untuk dilakukan di JavaScript.\n\nKita dapat melakukannya untuk mengatur kode kita, seperti ini:\n\n```js\nfunction sayHiBye(firstName, lastName) {\n\n // fungsi pembantu untuk digunakan di bawah\n function getFullName() {\n return firstName + \" \" + lastName;\n }\n\n alert( \"Hello, \" + getFullName() );\n alert( \"Bye, \" + getFullName() );\n\n}\n```\n\nDi sini fungsi *bersarang* dibuat untuk kemudahan. Fungsi tersebut bisa mengakses variabel luar sehingga dapat mengembalikan nama lengkap. Fungsi bersarang cukup sering ditemui di JavaScript.\n\nYang lebih menarik yaitu, fungsi bersarang dapat dikembalikan: bisa sebagai properti dari objek baru atau sebagai nilai kembalian itu sendiri. Nilai kembalian tersebut bisa dipakai di tempat lain. Tak peduli di mana, ia masih punya akses ke variabel luar yang sama.\n\nDi bawah ini, `makeCounter` membuat fungsi \"counter\" yang mengembalikan angka berikutnya di tiap invokasi:\n\n```js run\nfunction makeCounter() {\n let count = 0;\n\n return function() {\n return count++;\n };\n}\n\nlet counter = makeCounter();\n\nalert( counter() ); // 0\nalert( counter() ); // 1\nalert( counter() ); // 2\n```\n\nMeski sederhana, varian kode itu yang sedikit dimodifikasi punya kegunaan praktis, misalnya, sebagai [generator angka random](https://en.wikipedia.org/wiki/Pseudorandom_number_generator) untuk menggenerate nilai random untuk tes terotomasi.\n\nHow does this work? If we create multiple counters, will they be independent? What's going on with the variables here?\n\nMemahami hal begini bagus untuk pengetahuan keseluruhan JavaScript dan menguntungkan untuk skenario yang lebih komplex. Jadi ayo kita selami lebih dalam.\n\n## Lingkungan Lexikal\n\n```warn header=\"Sini jadilah naga!\"\nPenjelasan teknikal mendalam ada di depan.\n\nSemakin jauh aku menghindari detil bahasa level-rendah, pemahaman apapun tanpa mereka akan kekurangan dan tak-lengkap, jadi bersiaplah.\n```\n\nSupaya jelas, penjelasan dibagi dalam beberapa langkah.\n\n### Langkah 1. Variabel\n\nDi JavaScript, setiap fungsi yang berjalan, blok kode `{...}`, dan satu script yang menyeluruh punya objek internal (tersembunyi) yang terasosiasi yang dikenal dengan *Lingkungan Lexikal*.\n\nObjek Lingkungan Lexikal punya dua bagian:\n\n1. *Rekaman Lingkungan* -- objek yang menyimpan semua variabel lokal sebagai propertinya (dan beberapa informasi lain seperti nilai `this`).\n2. Referensi ke *lingkungan lexikal luar*, yang terasosiasi dengan kode luar.\n\n**\"Variabel\" cuma suatu properti dari objek internal spesial, `Rekaman Lingkungan`. \"Untuk memperoleh atau mengganti variabel\" berarti \"memperoleh atau mengganti properti dari objek itu\".**\n\nDi kode sederhana tanpa fungsi ini, cuma ada satu Lingkugan Lexikal:\n\n![lingkungan lexikal](lexical-environment-global.svg)\n\nIni yang disebut Lingkungan Lexikal *global*, terasosiasi dengan script keseluruhan.\n\nDi gambar di atas, kotak persegi panjang artinya Rekaman Lingkungan (simpanan variabel) dan panah artinya referensi luar. Lingkungan Lexikal global tak punya referensi luar, itulah kenapa panahnya menunjuk ke `null`.\n\nSeiring kodenya mulai bereksekusi dan berjalan, Lingkungan Lexikal berganti.\n\nIni kode yang sedikit lebih panjang:\n\n![lingkungan lexikal](closure-variable-phrase.svg)\n\nKotak persegi panjang di sisi kanan mendemonstrasikan bagaimana Lingkungan Lexikal global berganti selama exekusi:\n\n1. Ketika script berjalan, Lingkungan Lexikal di-pre-populasi dengan semua variabel yang terdeklarasi.\n - Awalnya, mereka di state \"Belum terinisialisir\". Itu state internal spesial, yang berarti bahwa engine tahu tentang variabelnya, tapi tak akan mengijinkan penggunaan itu sebelum `let`. Ini hampir sama saja dengan variabel itu tak ada.\n2. Lalu definisi `let phrase` muncul. Tak ada penetapan dulu, jadi nilainya `undefined`. Kita sudah bisa pakai variabel ini di momen ini.\n3. `phrase` diberikan nilai.\n4. `phrase` mengganti nilai.\n\nApapun terlihat simpel untuk sekarang, ya kan?\n\n- Variabel ialah properti dari objek internal spesial, yang terasosiasi dengan blok/fungsi/script yang sedang berexekusi.\n- Bekerja dengan variabel sebenarnya bekerja dengan properti objek itu.\n\n```smart header=\"Lingkungan Lexikal merupakan objek spesifikasi\"\n\"Lingkungan Lexikal\" ialah objek spesifikasi: ia cuma ada \"secara teori\" di [spesifikasi bahasa](https://tc39.es/ecma262/#sec-lexical-environments) untuk menjelaskan bagaimana cara ia bekerja. Kita tak bisa memperoleh objek ini di kode kita dan memanipulasinya langsung.\n\nEngine JavaScript juga bisa mengoptimisasi itu, menghapus variabel yang tak dipakai untuk menghemat memory dan melakukan trik internal lainnya, selama kelakuan yang terlihat sesuai deskripsi.\n```\n\n### Langkah 2. Deklarasi Fungsi\n\nFungsi juga berupa nilai, seperti variabel.\n\n**Bedanya ialah Deklarasi Fungsi terinisialisasi penuh secara instan.**\n\nKetika Lingkungan Lexikal dibuat, Deklarasi Fungsi segera menjadi fungsi siap-pakai (tak seperti `let`, yang tak bisa dipakai hingga deklarasi).\n\nItulah kenapa kita bisa memakai fungsi, yang dideklarasi sebagai Deklarasi Fungsi, bahkan sebelum deklarasinya itu sendiri.\n\nMisalnya, ini state awal dari Lingkungan Lexikal global ketika kita tambah satu fungsi:\n\n![](closure-function-declaration.svg)\n\nAlaminya, kelakukan ini cuma berlaku pada Deklarasi Fungsi, bukan Expresi Fungsi di mana kita menetapkan fungsi ke variabel, seperti `let say = function(name)...`.\n\n### Langkah 3. Lingkungan Lexikal dalam dan luar\n\nKetika satu fungsi berjalan, di awal panggilan, Lingkungan Lexikal tercipta otomatis untuk menyimpan variabel lokal dan parameter dari panggilannya.\n\nMisalnya, untuk `say(\"John\")`, ini seperti (exekusinya ada di baris tersebut, yang diberi label dengan panah):\n\n\n\n![](lexical-environment-simple.svg)\n\nSelama panggilan fungsi, kita punya dua Lingkungan Lexikal: dalam (untuk panggilan fungsi) dan luar (global):\n\n- Lingkungan Lexikal dalam berkorespondensi dengan exekusi `say` yang sedang berlangsung. Ia punya properti tunggal: `name`, argumen fungsi. Kita panggil `say(\"John\")`, jadi nilai `name` adalah `\"John\"`.\n- Lingkungan Lexikal luar ialah Lingkungan Lexikal global. Ia punya variabel `phrase` dan fungsinya itu sendiri.\n\nLingkungan Lexikal dalam punya referensi ke `outer`.\n\n**Ketika kode ingin mengakses variabel -- Lingkungan Lexikal dalam ditelusuri pertama, lalu terluar, lalu yang lebih terluar dan berikutnya.**\n\nJika variabel tak ditemukan di manapun, itu adalah galat dalam mode ketat (tanpa `use strict`, penetapan ke variabel yang tak pernah ada menciptakan satu variabel global, untuk kompatibilitas dengan kode usang).\n\nDi contoh ini penelusuran terjadi seperti berikut:\n\n- Untuk variabel `name`, `alert` di dalam `say` mencarinya segera di dalam Lingkungan Lexikal dalam.\n- Ketika ia ingin mengakses `phrase`, maka tak ada `phrase` secara lokal, jadi ia mengikuti referensi ke Lingkungan Lexikal luar dan menemui itu di sana.\n\n![lexical environment lookup](lexical-environment-simple-lookup.svg)\n\n\n### Langkah 4. Mengembalikan fungsi\n\nAyo kembali ke contoh `makeCounter`.\n\n```js\nfunction makeCounter() {\n let count = 0;\n\n return function() {\n return count++;\n };\n}\n\nlet counter = makeCounter();\n```\n\nDi awal tiap panggilan `makeCounter()`, objek Lingkungan Lexikal baru dibuat, untuk menyimpan variabel untuk perjalanan `makeCounter` ini.\n\nJadi kita punya dua Lingkungan Lexikal bersarang, sama seperti contoh di atas:\n\n![](closure-makecounter.svg)\n\nBedanya adalah, selama exekusi dari `makeCounter()`, fungsi kecil bersarang tercipta dari cuma satu baris: `return count++`. Kita tak menjalankan itu sekarang, cuma membuat.\n\nSemua fungsi mengingat Lingkungan Lexikal di mana mereka dibuat. Teknisnya, tak ada sihir di sini: semua fungsi punya properti tersembunyi bernama `[[Environment]]`, yang menyimpan referensi ke Lingkungan Lexikal di mana fungsi itu dibuat:\n\n![](closure-makecounter-environment.svg)\n\nJadi, `counter.[[Environment]]` punya referensi ke `{count: 0}` Lingkungan Lexikal. Itulah bagaimana fungsi mengingat di mana ia dibuat, tak peduli di mana ia dipanggil. Referensi `[[Environment]]` diset sekali dan selamanya saat kresi fungsi.\n\nLalu, saat `counter()` dipanggil, Lingkungan Lexikal baru dibuat untuk panggilan, dan referensi Lingkungan Lexikal luar-nya diambil dari `counter.[[Environment]]`:\n\n![](closure-makecounter-nested-call.svg)\n\nSekarang ketika kode di dalam `counter()` mencari variabel `count`, ia pertama memeriksa Lingkungan Lexikal miliknya sendiri (kosong, karena tak ada variabel lokal di sana), lalu Lingkungan Lexikal dari panggilan `makeCounter()` luar, di mana ia ditemukan dan berubah.\n\n**Variabel diperbarui di Lingkungan Lexikal di mana ia tinggal.**\n\nIni state setelah exekusi:\n\n![](closure-makecounter-nested-call-2.svg)\n\nJika kita panggil `counter()` beberapa kali, variabel `count` akan meningkat ke `2`, `3`, dan seterusnya, at the same place.\n\n```smart header=\"Closure\"\nAda satu istilah pemrograman umum \"closure\", yang sebaiknya diketahui developer secara umum.\n\n[Closure](https://en.wikipedia.org/wiki/Closure_(computer_programming)) ialah fungsi yang mengingat variabel luarnya dan bisa mengakses mereka. Di beberapa bahasa, itu tak mungkin, atau satu fungsi harus ditulis dalam cara spesial untuk membuat ini terjadi. Tapi seperti yang dijelaskan di atas, di JavaScript, semua fungsi alaminya adalah closure (cuma ada satu pengecualian, akan dibahas di ).\n\nYaitu: mereka otomatis mengingat di mana mereka dibuat menggunakan property `[[Environment]]` tersembunyi, kemudian kdoe mereka bisa mengakses variabel luar.\n\nKetika dalam interview, frontend developer mendapat pertanyaan tentang \"apa itu closure?\", jawaban valid yaitu definisi closure dan penjelesan bahwa semua fungsi di JavaScript adalah closure, dan mungkin sedikit kata-kata tentang detil teknis: properti `[[Environment]]` dan bagaimana Lingkungan Lexikal bekerja.\n```\n\n## Koleksi sampah\n\nBiasanya, Lingkungan Lexikal dihapus dengan semua variabel setelah panggilan fungsinya selesai. Ini karena tak ada referensi ke situ. Sebagai objek JavaScript apapun, ia cuma ditahan di memory selama ia dapat digapai.\n\n...Tapi jika ada fungsi bersarang yang masih dapat digapai setelah akhir fungsi, maka ia punya properti `[[Environment]]` yang mereferensi lingkungan lexikal.\n\nDalam hal Lingkungan Lexikal masih bisa digapai meski setelah berakhirnya fungsi itu, ia tetap hidup.\n\nMisalnya:\n\n```js\nfunction f() {\n let value = 123;\n\n return function() {\n alert(value);\n }\n}\n\nlet g = f(); // g.[[Environment]] menyimpan referensi ke Lingkungan Lexikal\n// dari panggilan f() yang sesuai\n```\n\nTolong diperhatikan apabila `f()` dipanggil beberapa kali, dan fungsi kembaliannya disimpan, maka seluruh objek lingkungan leksikal akan disimpan di memori. Ketiga-tiganya pada kode di bawah:\n\n```js\nfunction f() {\n let value = Math.random();\n\n return function() { alert(value); };\n}\n\n// 3 fungsi di array, semuanya terhubung ke lingkungan leksikal\n// dari setiap f() yang bersangkutan\nlet arr = [f(), f(), f()];\n```\n\nSebuah objek lingkungan leksikal mati apabila sudah tidak dapat dicapai (sperti objek lainnya). Dengan kata lain, objek tersebut hidup selama masih ada setidaknya satu fungsi bersarang yang mengacunya.\n\nDi kode berikut, setelah fungsi bersarang itu dihapus, Lingkungan Lexikal lingkupannya (serta `value`-nya) dibersihkan dari memori;\n\n```js\nfunction f() {\n let value = 123;\n\n return function() {\n alert(value);\n }\n}\n\nlet g = f(); // selama fungsi g tetap ada, nilainya tetap berada di memori\n\ng = null; // ...dan sekarang memori dibersihkan\n```\n\n### Optimalisasi kehidupan nyata\n\nSeperti yang kita lihat, di teori selama sebuah fungsi masih hidup, seluruh variabel luarnya juga disimpan.\n\nTetapi di praktiknya, mesin JavaScript mencoba untuk mengoptimalkannya. Mereka menganalisis penggunaan variabel dan apabila sudah jelas bahwa variabel luar sudah tidak digunakan -- mereka dihapus.\n\n**Sebuah efek samping yang penting di V8 (Chrome, Opera) adalah variabel akan tak dapat diakses saat debugging**\n\nCobalah jalankan contoh di bawah di Chrome dengan Developer Tools.\n\nSaat dihentikan, pada console coba ketikkan `alert(value)`.\n\n```js run\nfunction f() {\n let value = Math.random();\n\n function g() {\n debugger; // di console: ketik alert(value); Variabel tak ditemukan!\n }\n\n return g;\n}\n\nlet g = f();\ng();\n```\n\nSeperti yang kita lihat -- variabel tersebut tak ditemukan! Secara teori, variabel tersebut masih bisa diakses, tetapi mesin mengoptimalkannya.\n\nHal tersebut mungkin menyebabkan masalah debugging yang aneh (mungkin memakan waktu). Salah satunya -- apabila kita mendapat variabel luar yang tak diharapkan:\n\n```js run global\nlet value = \"Surprise!\";\n\nfunction f() {\n let value = \"the closest value\";\n\n function g() {\n debugger; // di console: ketik alert(value); Surprise!\n }\n\n return g;\n}\n\nlet g = f();\ng();\n```\n\nFitur V8 ini baik untuk diketahui. Jika kamu melakukan debug memakai Chrome/Opera, cepat atau lambat kamu akan menemuinya.\n\nIni bukan bug di debugger, melainkan fitur spesial dari V8. Mungkin ini akan diganti suatu saat.\nKamu bisa mengeceknya dengan menjalankan contoh di laman ini.\n```\n" }, { "path": "1-js/06-advanced-functions/04-var/article.md", "content": "\n# Si Tua \"var\"\n\n```smart header=\"Artikel ini untuk memahami script lama\"\nInformasi yang terdapat di artikel ini berguna untuk memahami script lama.\nHal itu bukanlah cara kita menulis kode baru.\n```\n\nDi bab paling awal tentang [variabel](info:variables), kami menyebutkan tiga cara untuk deklarasi variabel:\n1. `let`\n2. `const`\n3. `var`\n\nDeklarasi dari `var` sama dengan `let`. Kebanyakan kasus kita bisa mengganti `let` dengan `var` atau sebaliknya dan dan mengira itu akan berjalan lancar:\n\n```js run\nvar message = \"Hi\";\nalert(message); // Hi\n```\n\nTapi secara internal `var` adalah monster yang benar-benar berbeda, yang berasal dari masa lalu. `var` biasanya tidak digunakan didalam skrip modern, tapi masih tetap ada didalam skrip-skrip lama.\n\nJika kamu tidak berencana bertemu dengan skrip seperti itu kamu bisa melewati bab ini dan membacanya nanti.\n\nAkan tetapi, perbedaan ini sangatlah penting untuk dimengerti apalagi ketika mengubah skrip lama dari `var` menjadi `let`. untuk menghindari error-error yang aneh.\n\nVariabel, dideklarasikan dengan `var`, baik function-wide ataupun global. Mereka terlihat melalui blok.\n\nContohnya:\n\n\n```js run\nif (true) {\n var test = true; // gunakan \"var\" daripada \"let\"\n}\n\n*!*\nalert(test); // benar, variabel ada setelah if\n*/!*\n```\n\nKarena `var` mengabaikan blok kode , kita mendapatkan global variabel `test`.\n\nJika kita menggunakan `let test` daripada `var test`, maka variabel hanya akan terlihat di dalam `if`:\n\n```js run\nif (true) {\n let test = true; // gunakan \"let\"\n}\n\n*!*\nalert(test); // Error: test tidak didefinisikan\n*/!*\n```\n\nHal yang sama juga untuk loop: `var` tidak dapat berupa blok atau loop-lokal:\n\n```js\nfor (var i = 0; i < 10; i++) {\n var one = 1;\n // ...\n}\n\n*!*\nalert(i); // 10, \"i\" terlihat setelah loop, itu adalah global variabel\n*/!*\n```\n\nJika blok kode ada di dalam fungsi, maka `var` menjadi variabel tingkat fungsi:\n\n```js run\nfunction sayHi() {\n if (true) {\n var phrase = \"Hello\";\n }\n\n alert(phrase); // bekerja\n}\n\nsayHi();\n\nalert(phrase); // Error: frasa tidak terdefinisi (periksa Developer Console)\n\n```\n\nSeperti yang bisa kita lihat `var` menembus `if`, `for` atau blok kode lainnya. Itu karena sejak dahulu di blok Javascript tidak memiliki Lingkungan Leksikal. dan `var` adalah sisanya. \n\n## \"var\" mentoleransi pendeklarasian ulang\n\nJika kita mendeklarasikan variabel yang sama dengan `let` didalam scope yang sama, itu akan menciptakan error:\n\n```js run\nlet user;\nlet user; // SyntaxError: 'user' has already been declared\n```\n\nDengan `var`, kita bisa mendeklarasikan ulang berapa kalipun. Jika kita menggunakan `var` dengan variabel yang telah dideklarasikan, `var` itu akan diabaikan:\n\n```js run\nvar user = \"Pete\";\n\nvar user = \"John\"; // \"var\" ini tidak melakukan apapun (sudah dideklarasikan)\n// ...hal ini tidak akan menciptakan error\n\nalert(user); // John\n```\n\n## Variabel \"var\" bisa dideklarasikan dibawah penggunaan variabel tersebut\n\nDeklarasi `var` diproses ketika fungsi dimulai (atau skrip dijalankan untuk global).\n\nDengan kata lain, variabel `var` didefinisikan dari awal fungsi, tidak peduli di manapun definisi tersebut ( dengan asumsi definisi tidak didalam fungsi bersarang).\nJadi kode ini:\n\n```js run\nfunction sayHi() {\n phrase = \"Hello\";\n\n alert(phrase);\n\n*!*\n var phrase;\n*/!*\n}\nsayHi();\n```\n\n...Secara teknis sama dengan ini (memindahkan `var pharse` di atas):\n\n```js run\nfunction sayHi() {\n*!*\n var phrase;\n*/!*\n\n phrase = \"Hello\";\n\n alert(phrase);\n}\nsayHi();\n```\n\n...Atau bahkan seperti ini (Ingat, blok kode diabaikan):\n\n```js run\nfunction sayHi() {\n phrase = \"Hello\"; // (*)\n\n *!*\n if (false) {\n var phrase;\n }\n */!*\n\n alert(phrase);\n}\nsayHi();\n```\n\nOrang-orang juga menyebut perilaku seperti ini \"hoisting\", karena semua `var` \"hoisted\" (diangkat) ke bagian atas fungsi.\n\nSehingga dalam contoh di atas, cabang `if (false)` tidak pernah dijalankan, tetapi itu tidak masalah. `var` di dalamnya diproses di awal fungsi, jadi pada saat `(*)` variabel ada. \n**Pendeklarasian hoisted, sedangkan penugasan (assigment) tidak.**\n\nLebih baik didemonstrasikan dengan sebuah contoh:\n\n```js run\nfunction sayHi() {\n alert(phrase); \n\n*!*\n var phrase = \"Hello\";\n*/!*\n}\n\nsayHi();\n```\n\nPada baris `var pharse = \"Hello\"` memiliki dua aksi didalamnya:\n1. Deklarasi variabel `var`\n2. Penugasan variabel `=`.\n\nDeklarasi diproses pada awal pelaksanaan fungsi (\"hoisted\"), tetapi penugasan selalu bekerja di tempat mucul. sehingga pada dasarnya kode bekerja seperti ini: \n```js run\nfunction sayHi() {\n*!*\n var phrase; // deklarasi bekerja di awal...\n*/!*\n\n alert(phrase); // tidak terdefinisi\n\n*!*\n phrase = \"Hello\"; // ...penugasan - saat penugasan mencapainya.\n*/!*\n}\n\nsayHi();\n```\n\nKarena semua deklarasi `var` diproses pada awal fungsi, kita dapat mendeferensikanya dimana saja. tetapi variabel tidak terdefinisi sampai penugasan.\n\nDalam kedua contoh diatas `alert` bekerja tanpa error, karena ada variabel `pharse`. Tetapi karena nilainya belum ditetapkan, sehingga menampilkan `undefined`.\n\n## IIFE\n\nKarena di masa lalu hanya ada `var`, dan ia tidak memiliki visibilitas tingkat blok, programmer menemukan cara untuk menirunya. cara mereka melakukanya dinamakan “immediately-invoked function expressions” (disingkat IIFE). \nItu bukanlah sesuatu yang harus kita gunakan saat ini, tetapi anda dapat menemukannya di skip lama\nSebuah IIFE terlihat seperti ini:\n\n```js run\n(function() {\n\n var message = \"Hello\";\n\n alert(message); // Hello\n\n})();\n```\n\nDisini ekspresi fungsi dibuat dan segera dipangil. Sehingga kode dieksekusi segera dan memiliki variabel pribadi sendiri.\n\nFungsi ekspresi dibungkus dengan tanda kurung `(function {...})`, karena ketika Javascript bertemu `\"function\"` dalam aliran kode utama, ia memahaminya sebagai awal dari Deklarasi Fungsi. tetapi sebuah Deklarasi Fungsi harus memiliki nama, sehingga kode seperti ini akan menghasilkan error:\n```js run\n// mencoba untuk mendeklarasikan dan langsung memanggil fungsinya\nfunction() { // <-- Error: Statmen Function membutuhkan sebuah nama fungsi\n\n var message = \"Hello\";\n\n alert(message); // Hello\n\n}();\n```\n\nBahkan jika kita mengatakan: \"Ok, mari tambahkan nama\", hal itu tidak dapat bekerja, karena Javascript tidak mengizinkan Deklarasi Fungsi dipanggil segera:\n```js run\n// syntax error karena frasa dibawah\nfunction go() {\n\n}(); // <-- tidak dapat segera memanggil deklarasi fungsi\n```\n\nJadi, tanda kurung di sekitar fungsi adalah trik untuk menunjukan Javascript bahwa fungsi dibuat dalam konteks ekxpresi lain, dan karenanya merupakan ekspresi fungsi: tidak memerlukan nama dan segera dipanggil.\n\nAda beberapa cara lain selain tanda kurung untuk memberi tahu Javascript bahwa yang dimaksud adalah Ekspresi fungsi:\n\n```js run\n// Cara membuat IIFE\n\n(function() {\n alert(\"kurung disekitar fungsi\");\n}*!*)*/!*();\n\n(function() {\n alert(\"kurung disekitar semuanya\");\n}()*!*)*/!*;\n\n*!*!*/!*function() {\n alert(\"Operator Bitwise NOT memulai ekspresi\");\n}();\n\n*!*+*/!*function() {\n alert(\"Unary plus memulai ekspresi\");\n}();\n```\n\nDalam semua kasus diatas kami mendeklarasikan sebuah Ekspresi fungsi dan menjalankanya segera. Mari catat kembali: Saat ini tidak ada alasan untuk menulis kode seperti itu.\n\n## Kesimpulan\n\nAda dua perbedaan utama dari `var` dibandingkan dengan `let/const`;\n\n1. `var` variabel tidak memiliki ruang lingkup blok, mereka terlihat minimum pada tingkat fungsi.\n2. Deklarasi `var` diproses saat fungsi dimulai (skrip dimulai untuk global).\n\nAda satu perbedaan kecil terkait objek global, yang akan kita bahas pada bab selanjutnya.\n\nPerbedaan-perbedaan ini membuat `var` lebih buruk daripada` let` hampir di setiap waktu. Variabel block-level adalah hal yang bagus. Itu sebabnya `let` diperkenalkan dalam standar sejak dahulu, dan sekarang merupakan cara utama (bersama dengan` const`) untuk mendeklarasikan variabel.\n" }, { "path": "1-js/06-advanced-functions/05-global-object/article.md", "content": "\n# Objek global\n\nObjek global menyediakan variabel dan fungsi yang bisa didapatkan dimana saja. Secara default, variabel dan fungsi yang sudah berada didalam bahasanya atau lingkungannya.\n\nDi dalam browser ia dinamakan `window`, untuk Node.js `global`, untuk lingkungan lainnya ia mungkin mempunyai nama lain.\n\nAkhir-akhir ini, `globalThis` ditambahkan ke bahasanya, sebagai nama standar untuk objek global, yang harus di dukung di semua lingkungan. Di browser tertentu, ya itu non-Chromium Edge, `globalThis` belum didukung, tapi bisa dengan mudah dipolyfill.\n\nKita akan memakai `window` disini, dengan anggapan bahwa lingkungan kita adalah browser. Jika script kamu mungkin digunakan di lingkungan lain, lebih baik menggunakan `globalThis`.\n\nSemua properti objek global bisa diakses secara langsung:\n\n```js run\nalert(\"Hello\");\n// sama saja dengan\nwindow.alert(\"Hello\");\n```\n\nDi dalam browser, fungsi global dan variabel yang dinyatakan dengan `var` (bukan `let/const`!) menjadi properti global objek:\n\n```js run untrusted refresh\nvar gVar = 5;\n\nalert(window.gVar); // 5 (menjadi properti objek global)\n```\n\nMohon jangan bergantung dengan itu! Perilaku ini ada untuk alasan kompatibilitas. Script modern menggunakan [JavaScript modules](info:modules) dimana hal-hal tersebut tidak terjadi.\n\nJika kita menggunakan `let`, hal tersebut tidak akan terjadi:\n\n```js run untrusted refresh\nlet gLet = 5;\n\nalert(window.gLet); // undefined (tidak menjadi properti objek global)\n```\n\nJika sesuatu nilai sangat penting sesampai kamu ingin membuatnya tersedia secara global, tulislah langsung sebagai satu properti:\n\n```js run\n*!*\n// buat info pengguna saat ini global, supaya semua script bisa mengaksesnya\nwindow.currentUser = {\n name: \"John\"\n};\n*/!*\n\n// di tempat lain di kode\nalert(currentUser.name); // John\n\n// atau jika kita mempunyai variabel lokal dengan nama \"currentUser\"\n// ambillah secara eksplisit dari window (aman!)\nalert(window.currentUser.name); // John\n```\n\nMeskipun begitu, menggunakan variabel global umumnya tidak dianjurkan. Variabel global harus ada sesedikit mungkin. Desain kode dimana fungsi mendapatkan variabel \"input\" dan mengeluarkan \"outcome\" tertentu akan lebih jelas, kurang cenderung menghasilkan eror dan lebih mudah untuk dites dibanding jika ia menggunakan variabel luar atau global.\n\n\n## Menggunakan polyfills\n\nKita menggunakan objek global untuk mengetes dukungan atas fitur bahasa modern.\n\nContohnya, tes jika objek built-in `Promise` berada (tidak ada di browser yang sangat tua):\n```js run\nif (!window.Promise) {\n alert(\"Your browser is really old!\");\n}\n```\n\nJika tidak ada (anggap kita di browser tua), kita bisa menciptakan \"polyfills\": tambahkan fungsi yang tidak di dukung oleh lingkungan, tapi ada di standar modern.\n\n```js run\nif (!window.Promise) {\n window.Promise = ... // implementasi custom dari fitur bahasa modern\n}\n```\n\n## Ringkasan\n\n- Objek global menyimpan variabel yang harus tersedia dimana saja.\n Itu termasuk built-in Javascript, seperti `Array` dan nilai-nilai lingkungan-spesifik, seperti `window.innerHeight` -- tinggi window di dalam browser.\n- Objek global mempunyai nama universal `globalThis`.\n ...Tapi lebih sering disebut nama lingkungan-spesifik \"old-school\", seperti `window` (browser) dan `global` (Node.js). Karena `globalThis` adalah usulan baru, ia belum didukung di dalam non-Chromium Edge (tapi bisa dipolyfill).\n- Kita harus menyimpan nilai di objek global jika kalau ia benar-benar global untuk projek kita. Dan pertahankan jumlah minimum. \n- Dalam browser, jika kita tidak menggunakan [modules](info:modules), fungsi global dan variabel ternyatakan `var` menjadi properti objek global.\n- Untuk membuat kode kami future-proof dan lebih mudah dimengerti, kita harus mengakses properti dari global objek secara langsung, sebagain `window.x`.\n\n" }, { "path": "1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/solution.js", "content": "function makeCounter() {\n let count = 0;\n\n function counter() {\n return count++;\n }\n\n counter.set = value => count = value;\n\n counter.decrease = () => count--;\n\n return counter;\n}\n" }, { "path": "1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/source.js", "content": "function makeCounter() {\n let count = 0;\n\n // ... kodemu ...\n}\n\nlet counter = makeCounter();\n\nalert( counter() ); // 0\nalert( counter() ); // 1\n\ncounter.set(10); // setel perhitungan baru\n\nalert( counter() ); // 10\n\ncounter.decrease(); // kurangi perhitungannya dengan 1\n\nalert( counter() ); // 10 (daripada 11)\n" }, { "path": "1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/_js.view/test.js", "content": "describe(\"counter\", function() {\n\n it(\"increases from call to call\", function() {\n\n let counter = makeCounter();\n\n assert.equal( counter(), 0 ); \n assert.equal( counter(), 1 ); \n assert.equal( counter(), 2 ); \n });\n\n \n describe(\"counter.set\", function() {\n it(\"sets the count\", function() {\n\n let counter = makeCounter();\n\n counter.set(10);\n\n assert.equal( counter(), 10 ); \n assert.equal( counter(), 11 ); \n });\n });\n \n describe(\"counter.decrease\", function() {\n it(\"decreases the count\", function() {\n\n let counter = makeCounter();\n\n counter.set(10);\n\n assert.equal( counter(), 10 ); \n\n counter.decrease();\n\n assert.equal( counter(), 10 ); \n\n });\n });\n\n});" }, { "path": "1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/solution.md", "content": "\nSolusinya adalah menggunakan `count` didalam variabel lokal, tapi metode tambahan ditulis tepat didalam `counter`nya. Mereka membagi lingkungan leksikan luar yang sama dan juga bisa mengakses `count` yang sekarang.\n" }, { "path": "1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/task.md", "content": "nilai penting: 5\n\n---\n\n# Setel dan kurangi penghitung\n\nModifikasi kode dari `makeCounter()` jadi penghitungnya juga bisa mengurangi dan menyetel ulang angkanya:\n\n- `counter()` harus mengembalikan angka selanjutnya (seperti sebelumnya).\n- `counter.set(value)` harus menyetel ulang penghitungnya jadi `value`.\n- `counter.decrease()` harus mengurangi angka penghitungnya dengan 1.\n\nLihat kode pada sandbox untuk contoh penggunaan yang lengkap.\n\nCatatan. Kamu bisa menggunakan closure atau properti fungsi untuk menyimpan perhitungan yang sekarang. Atau tulis kedua variannya.\n" }, { "path": "1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/solution.js", "content": "function sum(a) {\n\n let currentSum = a;\n\n function f(b) {\n currentSum += b;\n return f;\n }\n\n f.toString = function() {\n return currentSum;\n };\n\n return f;\n}\n" }, { "path": "1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/source.js", "content": "function sum(a){\n // Tulis kodemu disini.\n\n}\n\n/*\nsum(1)(2) == 3; // 1 + 2\nsum(1)(2)(3) == 6; // 1 + 2 + 3\nsum(5)(-1)(2) == 6\nsum(6)(-1)(-2)(-3) == 0\nsum(0)(1)(2)(3)(4)(5) == 15\n*/\n" }, { "path": "1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/_js.view/test.js", "content": "describe(\"sum\", function(){\n \n it(\"sum(1)(2) == 3\", function(){\n assert.equal(3, sum(1)(2));\n });\n\n it(\"sum(5)(-1)(2) == 6\", function(){\n assert.equal(6, sum(5)(-1)(2));\n });\n \n it(\"sum(6)(-1)(-2)(-3) == 0\", function(){\n assert.equal(0, sum(6)(-1)(-2)(-3));\n });\n\n it(\"sum(0)(1)(2)(3)(4)(5) == 15\", function(){\n assert.equal(15, sum(0)(1)(2)(3)(4)(5));\n });\n});\n\n" }, { "path": "1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/solution.md", "content": "\n1. Untuk membuat semuanya bekerja *entah bagaimana*, hasil dari `sum` haruslah sebuah fungsi.\n2. Fungsi harus menyimpan nilai sekarang yang berada diantara pemanggilan didalam memori.\n3. Menurut tasknya, fungsinya harus menjadi angka ketika digunakan didalam `==`. Fungsi adalah objek, jadi perubahan terjasi seperti yang dideskripsikan didalam bab , dan kita bisa menyediakan metode milik kita yang mengembalikan angkanya.\n\nSekarang angkanya:\n\n```js demo run\nfunction sum(a) {\n\n let currentSum = a;\n\n function f(b) {\n currentSum += b;\n return f;\n }\n\n f.toString = function() {\n return currentSum;\n };\n\n return f;\n}\n\nalert( sum(1)(2) ); // 3\nalert( sum(5)(-1)(2) ); // 6\nalert( sum(6)(-1)(-2)(-3) ); // 0\nalert( sum(0)(1)(2)(3)(4)(5) ); // 15\n```\n\nPerhatikan baik-baik bahwa fungsi `sum` sebenarnya hanya bekerja satu kali. Itu mengembalikan fungsi `f`.\n\nLalu, untuk setiap pemanggilan selanjutnya `f` menambahkan parameternya kedlaam `currentSum`, dan mengembalikan dirinya sendiri.\n\n**Tidak terdapat rekursi di akhir baris dari `f`.**\n\nIni adalah bagaimana rekursi terlihat:\n\n```js\nfunction f(b) {\n currentSum += b;\n return f(); // <-- pemanggilan rekursi\n}\n```\n\nDan didalam kasus kita, kita hanya mengembalikan fungsinya, tanpa memanggilnya:\n\n```js\nfunction f(b) {\n currentSum += b;\n return f; // <-- tidak memanggil dirinya-sendiri, hanya mengembalikan dirinya\n}\n```\n\n`f` ini akan digunakan didalam pemanggilan selanjutnya, dan lagi akan mengembalikan dirinya-sendiri, berapa kalipun seperti yang dibutuhkan. Lalu, ketika digunakan sebagai angka atau sebuah string -- `toString` mengembalikan `currentSum`. Kita jadi bisa menggunakan `Symbol.toPrimitive` atau `valueOf` disini sebagai perubahan.\n" }, { "path": "1-js/06-advanced-functions/06-function-object/5-sum-many-brackets/task.md", "content": "nilai penting: 2\n\n---\n\n# Tambahkan dengan jumlah kurung yang banyak\n\nBuatlah sebuah fungsi `sum` yang harus bekerja seperti ini:\n\n```js\nsum(1)(2) == 3; // 1 + 2\nsum(1)(2)(3) == 6; // 1 + 2 + 3\nsum(5)(-1)(2) == 6\nsum(6)(-1)(-2)(-3) == 0\nsum(0)(1)(2)(3)(4)(5) == 15\n```\n\nCatatan. Kamu mungkin perlu untuk mengatur objek kostum menjadi perngubah primitif didalam fungsi kamu." }, { "path": "1-js/06-advanced-functions/06-function-object/article.md", "content": "\n# Objek fungsi, NFE\n\nSeperti yang telah kita tahu, sebuah fungsi didalam Javascript adalah sebuah nilai.\n\nSetiap nilai didalam Javascript memiliki sebuah tipe. Apa tipe dari sebuah fungsi?\n\nDidalam Javascript, fungsi adalah objek.\n\nSebuah cara yang bagus untuk membayangkan fungsi adalah sebagai \"aksi objek\" yang dapat dipanggil. Kita tidak hanya memanggil mereka, tapi juga memperlakukannya seperti sebuah objek: menambah/menghapus properti, memberikan referensi dll.\n\n\n## Properti \"name\"\n\nObjek fungsi mengandung beberapa properti yang dapat digunakan.\n\nContoh, sebuah nama fungsi dapat diakses sebagai properti \"name\":\n\n```js run\nfunction sayHi() {\n alert(\"Hi\");\n}\n\nalert(sayHi.name); // sayHi\n```\n\nItu terlihat cukup lucu, logika untuk penggunaan nama cukup pintar. Itu juga menggunakan nama fungsi yang benar bahkan jika tidak terdapat nama sekalipun, dan jika langsung ditempatkan:\n\n```js run\nlet sayHi = function() {\n alert(\"Hi\");\n};\n\nalert(sayHi.name); // sayHi (ada namanya!)\n```\n\nItu juga akan bekerja jika assignmentnya dilakukan dengan menggunakan nilai default:\n\n```js run\nfunction f(sayHi = function() {}) {\n alert(sayHi.name); // sayHi (bekerja!)\n}\n\nf();\n```\n\nDidalam spesifikasinya, fitur ini dinamakan dengan \"nama kontekstual/contextual name\". Jika sebuah fungsi tidak memiliki nama, maka didalam assignment-nya akan mencarinya didalam konteksnya.\n\nMetode objek mempunyai nama juga:\n\n```js run\nlet user = {\n\n sayHi() {\n // ...\n },\n\n sayBye: function() {\n // ...\n }\n\n}\n\nalert(user.sayHi.name); // sayHi\nalert(user.sayBye.name); // sayBye\n```\n\nTidak ada sulap disini. Terdapat kasus dimana tidak ada cara untuk mengetahui namanya. Didalam kasus itu, properti namanya akan kosong, seperti disini:\n\n```js run\n// fungsi dibuat didalam array\nlet arr = [function() {}];\n\nalert( arr[0].name ); // \n// mesinnya tidak memiliki cara untuk mengetahui namanya, maka isinya akan menjadi kosong\n```\n\nDidalam penerapannya, entah bagaimana, kebanyakan fungsi akan memiliki nama.\n\n## Properti \"length\"\n\nJuga terdapat properti bawaan \"length\" yang mengembalikan jumlah dari parameter sebuah fungsi, contoh:\n\n```js run\nfunction f1(a) {}\nfunction f2(a, b) {}\nfunction many(a, b, ...more) {}\n\nalert(f1.length); // 1\nalert(f2.length); // 2\nalert(many.length); // 2\n```\n\nDisini kita bisa melihat parameter rest tidak dihitung.\n\nProperti `length` terkadang digunakan untuk [introspeksi](https://en.wikipedia.org/wiki/Type_introspection) didalam fungsi yang mengoperasikan fungsi lainnya.\n\nContoh, didalam kode dibawah fungsi `ask` menerima sebuah `question` untuk ditanyakan dan sebuah angka yang panjang dari fungsi `handler` untuk dipanggil.\n\nSekalinya pengguna memberikan jawaban mereka, pemanggilan fungsi akan memanggil handler-nya. Kita bisa memberikan dua macan handler:\n\n- Fungsi dengan jumlah argumen nol, yang mana hanya dipanggil ketika pengguna memberikan jawaban yang positif.\n- Fungsi dengan argumen, yang mana akan dipanggil diantara salah satu kasusnya dan mengembalikan sebuah jawaban.\n\nUntuk memanggil `handler` dengan cara yang tepat, kita memeriksa properti `handler.length`.\n\nIdenya adalah kita mempunyai handler yang simpel tanpa argumen untuk kasus yang positif (pada kasus yang sering terjadi), tapi yang tentunya tidak mendukung handler yang universal:\n\n```js run\nfunction ask(question, ...handlers) {\n let isYes = confirm(question);\n\n for(let handler of handlers) {\n if (handler.length == 0) {\n if (isYes) handler();\n } else {\n handler(isYes);\n }\n }\n\n}\n\n// untuk jawaban yang positif, kedua handler-nya akan dipanggil\n// untuk jawaban yang negatif, hanya yang kedua\nask(\"Question?\", () => alert('You said yes'), result => alert(result));\n```\n\nIni hanyalah kasus tertentu yang dipanggil dengan [polimorfisme](https://en.wikipedia.org/wiki/Polymorphism_(computer_science)) -- memperlakukan argumen berbeda-beda tergantung dari tipenya atau, didalam kasus kita tergantung dari `length`. Idenya adalah didalam penggunakan librari Javascript.\n\n## Properti-properti kustom/Custom properties\n\nKita juga bisa menambahkan properti-properti milik kita sendiri.\n\nDisini kita menambahkan properti `counter` untuk melacar total dari pemanggilan:\n\n```js run\nfunction sayHi() {\n alert(\"Hi\");\n\n *!*\n // hitung berapa kali kita berjalan\n sayHi.counter++;\n */!*\n}\nsayHi.counter = 0; // nilai awal\n\nsayHi(); // Hi\nsayHi(); // Hi\n\nalert( `Called ${sayHi.counter} times` ); // dipanggil dua kali\n```\n\n```warn header=\"Sebuah properti bukanlah sebuah variabel\"\nSebuah properti dimasukan kedalam fungsi seperti `sayHi.counter = 0` tidak mendefinisikan variabel lokal `counter` didalamnya. Dengan kata lain, sebuah properti `counter` dan sebuah variabel `let counter` adalah dua hal yang tidak memiliki hubungam sama sekali.\n\nKita bisa memperlakukan sebuah fungsi seperti sebuah objek, menyimpan properti didalamnya, tapi itu tidak akan mempengaruhi eksekusinya sendiri. Variabel bukanlah sebuah properti fungsi dan sebaliknya. Keduanya hanyalah dua hal yang berbeda.\n```\n\nTerkadang properti fungsi bisa menggantikan closure. Contoh, kita bisa menulis ulang contoh fungsi counter dari bab untuk menggunakan properti fungsi:\n\n```js run\nfunction makeCounter() {\n // daripada:\n // let count = 0\n\n function counter() {\n return counter.count++;\n };\n\n counter.count = 0;\n\n return counter;\n}\n\nlet counter = makeCounter();\nalert( counter() ); // 0\nalert( counter() ); // 1\n```\n\n`count`nya sekarang tersimpan didalam fungsinya langsung, bukan diluar dari lingkungan leksikalnya.\n\nApakah lebih baik atau tidak menggunakan closure?\n\nPerbedaan utamanya adalah jika nilai dari `count` berada didalam variabel luar, maka kode eksternal tidak dapat mengaksesnya. Hanya fungsi bercabang yang bisa memodifikasinya. Dan jika itu terikat dengan sebuah fungsi, maka kode eksternal dapat mengaksesnya.\n\n```js run\nfunction makeCounter() {\n\n function counter() {\n return counter.count++;\n };\n\n counter.count = 0;\n\n return counter;\n}\n\nlet counter = makeCounter();\n\n*!*\ncounter.count = 10;\nalert( counter() ); // 10\n*/!*\n```\n\nJadi pilihannya implementasinya adalah tergantung pada kebutuhan kita.\n\n## Ekspresi fungsi yang mempunyai nama\n\nEkspresi fungsi yang mempunyai nama, atau NFE(Named Function Expression) adalah istilah untuk ekspresi fungsi yang memiliki nama.\n\nContoh, ayo kita lihat ekspresi fungsi yang biasa:\n\n```js\nlet sayHi = function(who) {\n alert(`Hello, ${who}`);\n};\n```\n\nDan tambahkan nama:\n\n```js\nlet sayHi = function *!*func*/!*(who) {\n alert(`Hello, ${who}`);\n};\n```\n\nApakah kita meraih sesuatu disini? Apa tujuan dari penambahan nama `\"func\"`?\n\npertama kita perhatikan, bahwa kita masih memiliki ekspresi fungsi. Menambahkan nama `\"func\"` setelah `function` tidaklah membuatnya menjadi deklarasi fungsi, karena itu masih dibuat sebagai bagian dari sebuah assignment ekspresi.\n\nMenambahkan nama seperti itu tidak akan merusak apapun.\n\nFungsinya masih ada sebagai `sayHi()`:\n\n```js run\nlet sayHi = function *!*func*/!*(who) {\n alert(`Hello, ${who}`);\n};\n\nsayHi(\"John\"); // Hello, John\n```\n\nTerdapat dua hal yang spesial tentang nama `func`, hal itu adalah:\n\n1. Itu mengijinkan fungsinya untuk mereferensi dirinya sendiri secara internal.\n2. Fungsinya tidak akan terlihat diluar fungsi tersebut.\n\nUntuk contoh, fungsi `sayHi` dibawah memanggil dirinya-sendiri lagi dengan `\"Guest\"` jika `who` tidak ada:\n\n```js run\nlet sayHi = function *!*func*/!*(who) {\n if (who) {\n alert(`Hello, ${who}`);\n } else {\n*!*\n func(\"Guest\"); // gunakan func untuk memanggil dirinya sendiri\n*/!*\n }\n};\n\nsayHi(); // Hello, Guest\n\n// Tapi hal ini tidak akan bekerja\nfunc(); // Error, func is not defined (tidak terliha diluar fungsinya sendiri)\n```\n\nKenapa kita menggunakan `func`? Mungkin cukup gunakan `sayHi` untuk pemanggilan bercabang?\n\n\nSebenarnya, dalam kebanyakan kasus kita bisa:\n\n```js\nlet sayHi = function(who) {\n if (who) {\n alert(`Hello, ${who}`);\n } else {\n*!*\n sayHi(\"Guest\");\n*/!*\n }\n};\n```\n\nMasalahnya dengan kode itu adalah `sayHi` mungkin akan berubah di kode terluar. Malah jika fungsinya dimasukan kedalam variabel lain, kodenya akan mulai memberikan error:\n\n```js run\nlet sayHi = function(who) {\n if (who) {\n alert(`Hello, ${who}`);\n } else {\n*!*\n sayHi(\"Guest\"); // Error: sayHi is not a function\n*/!*\n }\n};\n\nlet welcome = sayHi;\nsayHi = null;\n\nwelcome(); // Error, pemanggilan bercabang sayHi tidak akan bekerja lagi!\n```\n\nHal itu terjadi karena fungsinya menggunakan `sayHi` dari luar lingkungan leksikalnya. Disana tidak ada `sayHi` lokal, jadi variabel terluar digunakan. Dan pada saat pemanggilannya terjadi `sayHi` terluar adalah `null`.\n\nNama opsional dimana kita bisa memasukannya kedalam ekspresi fungsi diartikan untuk menyelesaikan masalah yang tepat seperti ini.\n\nAyo kita gunakan itu untuk membetulkan masalah pada kode kita:\n\n```js run\nlet sayHi = function *!*func*/!*(who) {\n if (who) {\n alert(`Hello, ${who}`);\n } else {\n*!*\n func(\"Guest\"); // Sekarang semuanya mantap\n*/!*\n }\n};\n\nlet welcome = sayHi;\nsayHi = null;\n\nwelcome(); // Hello, Guest (pemanggilan bercabang bekerja)\n```\n\nSekarang hal itu bekerja karena nama `\"func\"` adalah fungsi-lokal. Fungsi itu tidak diambil dari luar (dan tidak terlihat dari luar). Spesifikasinya menjamin itu akan selalu mereferensi fungsi saat ini. \n\nFungsi dari luar kode mempunyai variabel `sayHi` atau `welcome`nya sendiri. Dan `func` adalah sebuah \"nama fungsi internal\", bagaimana fungsi bisa memanggil dirinya sendiri secara internal.\n\n```smart header=\"Tidak ada hal semacam itu untuk deklarasi fungsi\"\nFitur \"nama internal\" dideskripsikan disini hanya tersedia untuk ekspresi fungsi, bukan deklarasi fungsi. Untuk deklarasi fungsi, tidak terdapat sintaks untuk menambahkan sebuah nama \"internal\".\n\nTerkadang, ketika kita membutuhkan nama internal yang dapat diandalkan, itulah alasan yang tepat untuk menulis ulang sebuah deklarasi fungsi kedalam bentuk ekspresi fungsi.\n```\n\n## Ringkasan\n\nFungsi adalah objek.\n\nDisini kita memperlajari properti-propertinya:\n\n- `name` -- nama dari fungsinya. Biasanya diambil dari definisi fungsinya, tapi jika disana tidak ada, Javascript akan mencoba mencarinya dari konteksnya (contoh. dari assignment-nya).\n- `length` -- jumlah dari argumen didalam definisi dari fungsi. Parameter rest tidak dihitung.\n\nJika fungsinya di deklarasikan sebagai ekspresi fungsi (tidak didalam alur kode utama), dan itu memiliki nama, maka itu dipanggil dengan ekspresi fungsi yang memiliki nama. Namanya bisa digunakan didalam fungsinya untuk mereferensi dirinya sendiri, untuk pemanggilan rekursif atau sejenisnya.\n\nJuga, fungsi mungkin memiliki properti tambahan. Beberapa librari Javascript yang cukup terkenal banyak menggunakan fitur ini.\n\nMereka membuat sebuah fungsi \"utama\" dan mengkaitkannya dengan fungsi \"pembantu\". Contoh librari [jQuery](https://jquery.com) menciptakan fungsi bernama `$`. Librari The [lodash](https://lodash.com) membuat sebuah fungsi `_` dan lalu menambahkan `_.clone`, `_.keyBy`dan properti lainnya kedalamnya (lihat [dokumentasinya](https://lodash.com/docs) ketika kamu mau tau lebih dalam). Sebenarnya, mereka melakukannya untuk mengurangi penggunaan dari ruang global, jadi librari tunggal itu hanya menggunakan satu variabel global. Itu mengurangi kemungkinan dari konflik penamaan variabel.\n\n\nJadi, sebuah fungsi bisa melakukan hal-hal yang berguna dengan dirinya-sendiri dan juga membawa setumpuk fungsionalitas didalam propertinya sendiri." }, { "path": "1-js/06-advanced-functions/07-new-function/article.md", "content": "\n# Sintaks \"new Function\"\n\nTerdapat satu lagi cara untuk membuat fungsi. Ini sangat jarang digunakan, tapi terkadang tidak ada alternatif lain.\n\n## Sintaks\n\nSintaks untuk membuat sebuah fungsi:\n\n```js\nlet func = new Function ([arg1, arg2, ...argN], functionBody);\n```\n\nFungsinya dibuat dengan argumen-argumen `arg1...argN` dan diberikan `functionBody`.\n\nIni sangat mudah dimengerti hanya dengan melihat contohnya. Disini sebuah fungsi dengan dua argumen:\n\n```js run\nlet sum = new Function('a', 'b', 'return a + b');\n\nalert( sum(1, 2) ); // 3\n```\n\nDan ini fungsi tanpa argumen, hanya ada body dari fungsinya:\n\n```js run\nlet sayHi = new Function('alert(\"Hello\")');\n\nsayHi(); // Hello\n```\n\nPerbedaan utama dari cara lain yang pernah kita lihat adalah fungsinya dibuat secara harfiah dari sebuah string, yang dilanjutkan ke run-time.\n\nSeluruh deklarasi sebelumnya membutuhkan kita, programmer, untuk menulis kode fungsi didalam skrip.\n\nTapi `new Function` mengijinkan kita untuk mengubah string apapun menjadi fungsi. Contoh, kita bisa menerima sebuah fungsi baru dari server dan mengeksekusinya:\n\n```js\nlet str = ... receive the code from a server dynamically ...\n\nlet func = new Function(str);\nfunc();\n```\n\nItu digunakan dalam beberapa kasus yang spesifik, seperti ketika kita menerima kode dari server, atau secara dinamis mengkompilasikan sebuah fungsi dari sebuah template didalam aplikasi-web yang kompleks.\n\n## Closure\n\nBiasanya, sebuah fungsi mengingat dimana dirinya dibuat didalam properti spesial `[[Environtment]]. Fungsi itu akan mereferensi lingkungan leksikal dari dimana ia dibuat (kita telah membahasnya didalam bab ).\n\nTapi ketika sebuah fungsi dibuat menggunakan `new Function`, `[[Environment]]` miliknya disetel bukan pada lingkungan leksikal saat ini, tapi pada yang global.\n\nJadi, fungsi seperti itu tidak memiliki akses kepada variabel luar, hanya pada yang global saja.\n\n```js run\nfunction getFunc() {\n let value = \"test\";\n\n*!*\n let func = new Function('alert(value)');\n*/!*\n\n return func;\n}\n\ngetFunc()(); // error: value is not defined\n```\n\nBandingkan dengan yang biasa:\n\n```js run\nfunction getFunc() {\n let value = \"test\";\n\n*!*\n let func = function() { alert(value); };\n*/!*\n\n return func;\n}\n\ngetFunc()(); // *!*\"test\"*/!*, berasal dari lingkungan leksikal dari getFung\n```\n\nFitur spesial dari `new Function` ini terlihat aneh, tapi akan sangat berguna didalam penerapannya.\n\nBayangkan kalau kita harus membuat sebuah fungsi dari string. Kode dari fungsinya tidak diketahui saat penulisan skrip (itulah kenapa kita tidak menggunakan fungsi yang biasa), tapi akan diketahui saat proses dari eksekusinya. Kita mungkin menerima kodenya itu dari server atau sumber lainnya.\n\nFungsi baru kita membutuhkan interaksi dengan skrip utamanya.\n\nBagaimana jika itu bisa mengakses variabel luar?\n\nMasalahnya adalah saat Javascript belum dipublikasikan untuk produksi, itu akan dikompresi menggunakan *minifier* -- sebuah program spesial yang mengecilkan ukuran kode dengan menghapus komentar-komentar, spasi dan -- yang paling penting, menamai variabel lokal menjadi lebih pendek.\n\nContoh, jika sebuah fungsi mempunyai `let userName`, minifier akan mengganti itu dengan `let a` (atau huruf lainnya jika tidak hurufnya tidak tersedia), dan melakukannya dimanapun. Sebenarnya itu adalah yang yang aman untuk dilakukan, karena variabelnya lokal, tidak ada sesuatu dari luar fungsinya yang bisa mengaksesnya. Dan didalam fungsinya, minifier mengganti seluruh penamaan variabelnya. Minifier cukup pintar, mereka menganalisa struktur kodenya, jadi mereka tidak akan merusak apapun. Minifier bukanlah hal bodoh yang hanya akan mencari-dan-mengganti.\n\nJadi jika `new Function` mempunyai akses ke variabel luar, itu tidak akan bisa menemukan `userName` yang telah dinamai ulang.\n\n**Jika `new Function` mempunyai akses ke variabel luar, itu akan membuat masalah dengan minifiernya..**\n\nSelain itu, kode seperti itu secara arsitekturnya jelek dan rentan terhadap error.\n\nUntuk memberikan sesuatu kepada fungsi, dibuat sebagai `new Function`, kita seharusnya menggunakan argumennya.\n\n## Ringkasan\n\nSintaks:\n\n```js\nlet func = new Function ([arg1, arg2, ...argN], functionBody);\n```\n\nUntuk sebuah alasan lama, argumen-argumen bisa diberikan sebagai daftar dengan koma.\n\nKetiga deklarasi ini melakukan hal yang sama:\n\n```js\nnew Function('a', 'b', 'return a + b'); // sintaks dasar\nnew Function('a,b', 'return a + b'); // dipisahkan dengan kona\nnew Function('a , b', 'return a + b'); // dipisahkan dengan koma dan ditambah spasi\n```\n\nFungsi yang dibuat dengan `new Function`, memiliki `[[Environment]]` mereferensi kepada lingkungan leksikal global, bukan bagian luarnya. Karenanya, mereka tidak bisa menggunakan variabel di bagian luarnya. Tapi sebenarnya itu bagus karena itu memastikan kita menjauh dari error. Memberikan parameter secara jelas adalah metode yang lebih baik secara arsitektur dan tidak akan menyebabkan error pada minifier.\n" }, { "path": "1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/solution.md", "content": "\nUsing `setInterval`:\n\n```js run\nfunction printNumbers(from, to) {\n let current = from;\n\n let timerId = setInterval(function() {\n alert(current);\n if (current == to) {\n clearInterval(timerId);\n }\n current++;\n }, 1000);\n}\n\n// penggunaan:\nprintNumbers(5, 10);\n```\n\nUsing nested `setTimeout`:\n\n\n```js run\nfunction printNumbers(from, to) {\n let current = from;\n\n setTimeout(function go() {\n alert(current);\n if (current < to) {\n setTimeout(go, 1000);\n }\n current++;\n }, 1000);\n}\n\n// penggunaan:\nprintNumbers(5, 10);\n```\n\nPerhatikan dikedua solusinya, disana terdapat penundaan awal sebelum keluaran pertamanya. Fungsinya dipanggil setelah `1000ms` saat pertama kali.\n\nJika kita juga ingin fungsinya untuk berjalan langsung, maka kita bisa menambahkan pemanggilan di baris yang berbeda, seperti ini:\n\n```js run\nfunction printNumbers(from, to) {\n let current = from;\n\n function go() {\n alert(current);\n if (current == to) {\n clearInterval(timerId);\n }\n current++;\n }\n\n*!*\n go();\n*/!*\n let timerId = setInterval(go, 1000);\n}\n\nprintNumbers(5, 10);\n```\n" }, { "path": "1-js/06-advanced-functions/08-settimeout-setinterval/1-output-numbers-100ms/task.md", "content": "nilai penting: 5\n\n---\n\n# Membuat keluaran setiap detik\n\nTulis sebuah fungsi `printNumbers(from, to)` yang mengeluarkan angka setiap detik, dimulai dari `from` dan berakhir sampai `to`.\n\nBuatlah dua varian solusinya.\n\n1. Menggunakan `setInterval`.\n2. Gunakan `setTimeout` bercabang.\n" }, { "path": "1-js/06-advanced-functions/08-settimeout-setinterval/4-settimeout-result/solution.md", "content": "\n`setTimeout` apapun akan berjalan hanya setelah kode yang sedang berjalan saat ini telah selesai.\n\n`i`nya akan menjadi yang terakhir: `100000000`.\n\n```js run\nlet i = 0;\n\nsetTimeout(() => alert(i), 100); // 100000000\n\n// asumsikan waktu untuk mengeksekusi fungsi ini lebih dari 100ms\nfor(let j = 0; j < 100000000; j++) {\n i++; \n}\n```\n" }, { "path": "1-js/06-advanced-functions/08-settimeout-setinterval/4-settimeout-result/task.md", "content": "nilai penting: 5\n\n---\n\n# Apa yang akan ditampilkan setTimeout?\n\nDi kode dibawah disana terdapat pemanggilan `setTimeout` yang sudah terjadwal, lalu kalkulasi yang cukup berat berjalan, yang memakan waktu lebih dari 100ms untuk selesai.\n\nKapankan fungsi yang sudah dijadwal akan berjalan?\n\n1. Setelah perulangannya.\n2. Sebelum perulangannya.\n3. Di awal dari perulangannya.\n\nApakan yang akan `alert` tampilkan?\n\n```js\nlet i = 0;\n\nsetTimeout(() => alert(i), 100); // ?\n\n// asumsikan waktu untuk mengeksekusi fungsi ini lebih dari 100ms\nfor(let j = 0; j < 100000000; j++) {\n i++; \n}\n```\n" }, { "path": "1-js/06-advanced-functions/08-settimeout-setinterval/article.md", "content": "# Pendadwalan: setTimeout dan setInterval\n\nKita mungkin memutuskan untuk mengeksekusi fungsinya bukanlah sekarang, tapi pada waktu-waktu tertentu nanti. Itu dipanggil dengan \"penjadwalan pemanggilan\".\n\nTerdapat dua metode untuk itu:\n\n- `setTimeout` mengijinkan kita untuk menjalankan fungsinya setelah interval dari waktu.\n- `setInterval` mengijinkan kita untuk menjalankan fungsinya berulang-ulang, dimulai seterlah interval dari waktu yang diberikan, lalu akan terus berulang pada interval waktu yang diberikan.\n\nMetode-metode ini bukanlah bagian dari spesifikasi Javascript. Tapi kebanyakan lingkungan memiliki penjadwalan internal dan menyediakan metode-metode ini. Khususnya, mereka didukung didalam semua peramban dan Node.js.\n\n## setTimeout\n\nSintaksnya:\n\n```js\nlet timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)\n```\n\nParameters:\n\n`func|code`\n: Fungsi atau sebuah string dari kode untuk dieksekusi.\nBiasanya, adalah sebuah fungsi. Untuk beberapa alasan, sebuah string dari kode bisa diberikan, tapi hal itu tidak direkomendasikan.\n\n`delay`\n: Penundaannya sebelum berjalan, didalam milidetik (1000 milidetik = 1 detik), secara default 0.\n\n`arg1`, `arg2`...\n: Argumen-argumen untuk fungsinya (tidak didukung didalam IE9-).\n\nContoh, kode ini memanggil `sayHi()` setelah satu detik:\n\n```js run\nfunction sayHi() {\n alert('Hello');\n}\n\n*!*\nsetTimeout(sayHi, 1000);\n*/!*\n```\n\nDengan argumen:\n\n```js run\nfunction sayHi(phrase, who) {\n alert( phrase + ', ' + who );\n}\n\n*!*\nsetTimeout(sayHi, 1000, \"Hello\", \"John\"); // Hello, John\n*/!*\n```\n\nJika argumen pertama adalah sebuah string, maka Javascript akan membuatkan fungsi untuk itu.\n\nJadi, seperti ini juga akan bekerja:\n\n```js run no-beautify\nsetTimeout(\"alert('Hello')\", 1000);\n```\n\nTapi menggunakan string tidak direkomendasikan, lebih baik gunakan fungsi arrow, seperti ini:\n\n```js run no-beautify\nsetTimeout(() => alert('Hello'), 1000);\n```\n\n````smart header=\"Berikan sebuah fungsi, tapi jangan dijalankan\"\nDeveloper pemula terkadang membuat sebuah kesalahan dengan menambahkan kurung `()` setelah fungsinya:\n\n```js\n// wrong!\nsetTimeout(sayHi(), 1000);\n```\nItu tidak akan bekerja, karena `setTimeout` mengharapkan sebuah referensi kepada fungsi. Dan disini `sayHi()` akan menjalankan fungsinya, dan *hasil dari eksekusinya* akan diberikan kepada `setTimeout`. Didalam kasus kita hasil dari `sayHi()` adalah `undefined` (fungsinya tidak mengembalikan apapun), jadi tidak ada hal yang dijadwalkan.\n````\n\n### Pembatalan menggunakan clearTimeout\n\nPemanggilan `setTimeout` mengembalikan sebuah \"identifier waktu\" `timerId` yang bisa kita gunakan untuk membatalkan eksekusinya.\n\nSintaks untuk membatalkan:\n\n```js\nlet timerId = setTimeout(...);\nclearTimeout(timerId);\n```\n\nDi kode dibawah, kita menjadwalkan fungsinya dan membatalkannya (berubah pikiran). Sebagai hasilnya, tidak ada yang terjadi:\n\n```js run no-beautify\nlet timerId = setTimeout(() => alert(\"never happens\"), 1000);\nalert(timerId); // identifier waktu\n\nclearTimeout(timerId);\nalert(timerId); // identifier yang sama (tidak akan menjadi null setelah dibatalkan)\n```\n\nSeperti yang bisa kita lihat dari keluaran `alert`, didalam peramban identifier timernya adalah sebuah angka. Didalam lingkungan pengembangan lainnya, identifiernya bisa saja sesuatu yang lain. Contoh, Node.js mengembalikan objek timer dengan metode tambahan.\n\nLainnya, tidak terdapat spesifikasi universal untuk metode-metode ini, jadi tidak ada masalah.\n\nUntuk peramban, timer dideskripsikan didalam [bagian timer](https://www.w3.org/TR/html5/webappapis.html#timers) dari standar HTML5.\n\n## setInterval\n\nMetode `setInterval` mempunyai sintaks yang sama seperti `setTimeout`:\n\n```js\nlet timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)\n```\n\nSeluruh argumennya mempunyai arti yang sama. Tapi tidak seperti `setTimeout` fungsinya akan berjalan tidak sekali, tapi akan berjalan secara teratur dengan interval waktu yang diberikan.\n\nUntuk menghentikan pemanggilan selanjutnya, kita harus memanggil `clearInterval(timerId)`.\n\nContoh berikut akan memperlihatkan pesan setiap 2 detik. Setelah 5 detik, keluarannya akan dihentikan:\n\n```js run\n// Ulangi dengan interval 2 detik\nlet timerId = setInterval(() => alert('tick'), 2000);\n\n// setelah 5 detik berhenti\nsetTimeout(() => { clearInterval(timerId); alert('stop'); }, 5000);\n```\n\n```smart header=\"Waktu terus berjalan sementara `alert` ditampilkan\"\nDi kebanyakan peramban, termasuk Chrome dan Firefox penghitung waktu internal berlanjut \"berdetik\" selagi menampilkan `alert/confirm/prompt`.\n\nJadi jika kamu menjalankan kode diatas dan tidak menyingkirkan jendela `alert` untuk beberapa saat, maka `alert` selanjutnya akan langsung muncul. Interval sebenarnya diantara alert lebih pendek dari 2 detik.\n```\n\n## setTimeout bercabang\n\nTerdapat dua cara untuk menjalankan sesuatu secara terus-menerus.\n\nSatu adalah `setInterval`. Dan satunya lagi adalah `setTimeout` bercabang, seperti ini:\n\n```js\n/** daripada menggunakan:\nlet timerId = setInterval(() => alert('tick'), 2000);\n*/\n\nlet timerId = setTimeout(function tick() {\n alert('tick');\n*!*\n timerId = setTimeout(tick, 2000); // (*)\n*/!*\n}, 2000);\n```\n\n`setTimeout` diatas menjadwalkan pemanggilan selanjutnya tepat setelah akhir `(*)`.\n\n`setTimeout` bercabang metode yang lebih fleksibel daripada `setInterval`. Dengan cara ini pemanggilan mungkun dapat dijadwalkan dengan interval yang berbeda, tergantung dari hasil sebelumnya.\n\nContoh, kita perlu menulis sebuah service yang mengirim sebuah request kepada server setiap 5 detik untuk menanyakan data, tapi di kasus ini servernya sedang sibuk, maka intervalnya harus dinaikan menjadi 10, 20, 40 detik...\n\nIni adalah pseukodenya:\n```js\nlet delay = 5000;\n\nlet timerId = setTimeout(function request() {\n ...send request...\n\n if (request failed due to server overload) {\n // interval dinaikan untuk pemanggilan selanjutnya\n delay *= 2;\n }\n\n timerId = setTimeout(request, delay);\n\n}, delay);\n```\n\n\nDan jika fungsi yang sudah kita jadwalkan ternyata membutuhkan sumber-daya yang besar, maka kita bisa mengukur waktu yang diabmbil oleh eksekusinya dan mengatur ulang eksekusi selanjutnya agar lebih cepat atau lebih lambat.\n\n**`setTimeout` membolehkan untuk menyetel penundaan eksekusi-eksekusinya lebih presisi daripada `setInterval`.**\n\nAyo kita bandingkan dua pecahan kode berikut. Yang pertama menggunakan `setInterval`:\n\n```js\nlet i = 1;\nsetInterval(function() {\n func(i++);\n}, 100);\n```\n\nYang kedua menggunakan `setTimeout` bercabang:\n\n```js\nlet i = 1;\nsetTimeout(function run() {\n func(i++);\n setTimeout(run, 100);\n}, 100);\n```\n\nUntuk `setInterval` penjadwal internalnya akan berjalan `func(i++)` setiap 100ms:\n\n![](setinterval-interval.svg)\n\nApakah kamu memperhatikannya?\n\n**penundaan sebenarnya diantara pemanggilan `func` pada `setInterval` lebih cepat daripada apa yang ada pada kodenya!**\n\nItu adalah hal yang normal, karena waktu yang diambil oleh eksekusi `func` \"mengambil\" bagian dari intervalnya.\n\nAdalah hal yang mungkin jika eksekusi `func` ternyata lebih lama daripada yang kita harapkan dan memakan lebih dari 100ms.\n\nDidalam kasus ini mesinnya menunggu `func` untuk selesai, lalu memeriksa penjadwalnya dan jika waktunya sudah berakhir, maka akan *langsung* dieksekusi lagi.\n\nDidalam kasus yang jarang, jika fungsinya selalu mengeksekusi lebih lama daripada `penundaan` ms, maka pemanggilannya akan terjadi tanpa berhenti sama sekali.\n\nDan ini adalah gambaran dari `setTimeoute` bercabang:\n\n![](settimeout-interval.svg)\n\n**`setTimeout` bercabang menjamin penundaan yang tepar (disini 100ms).**\n\nItu karena pemanggilan baru sudah direncanakan pada akhir dari pemanggilan sebelumnya.\n\n````smart header=\"Garbage collection and callback pada setInterval/setTimeout\"\nKetika sebuah fungsi dimasukan kedalam `setInterval/setTimeout`, sebuah referensi interval dibuat kedalamnya dan disimpan didalam penjadwal. Itu akan mencegah fungsinya dari pembuangan (dihilangkan dari memori), bahkan jika disana sudah tidak ada yang mereferensi kedalam fungsinya lagi.\n\n```js\n// fungsinya tetap berada di memori sampai penjadwalnya memanggil lagi\nsetTimeout(function() {...}, 100);\n```\n\nUntuk `setInterval` fungsinya akan tetap didalam memori sampai `clearInterval` dipanggil.\n\nTidak terdapat efek-samping pada hal itu. Sebuah fungsi mereferensi lingkungan leksikal luar, jadi, selama itu masih ada, variabel luar pun akan tetap ada. Hal itu mungkin akan memakan memori daripada fungsinya sendiri. Jadi ketika kita tidak butuh fungsi yang sudah dijadwalkan lagi, akan lebih baik untuk dibatalkan/diberhentikan, bahkan jika itu sebuah kode yang sangat pendek/kecil.\n````\n\n## setTimeout dengan penundaan nol\n\nTerdapat sebuah kasus spesial: `setTimeout(func, 0)`, atau hanya `setTimeout(func)`.\n\nPenjadwalan eksekusi dari `func` akan dilakukan secepat mungkin. Tapi penjadwal akan memanggilnya hanya setelah skrip yang sedang berjalan selesai dieksekusi.\n\nJadi fungsinya dijadwalkan untuk berjalan \"tepat setelah\" skrip yang sedang berjalan.\n\nContoh, dibawah akan mengeluarkan \"Hello\", lalu langsung \"World\":\n\n```js run\nsetTimeout(() => alert(\"World\"));\n\nalert(\"Hello\");\n```\n\nPada baris pertama \"akan memasukan pemanggilan kedalam urutan pemanggilan setelah 0ms\". Tapi penjadwal hanya akan \"memeriksa urutanya\" setelah skrip yang sedang berjalan selesai, jadi `\"Hello\"` adalah pertama, dan `\"World\"` -- setelahnya.\n\nJuga terdapat kasus yang berhubungan dengan peramban, kita akan membahasnya didalam bab .\n\n````smart header=\"Penundaan dengan nol faktanya tidaklah nol (didalam peramban)\"\nDidalam peramban, terdapat sebuah batasan seberapa seringnya timer bercabang bisa berjalan. [standar HTML5](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers) mengatakan: \"setelah lima timer bercabang, intervalnya dipaksa untuk berjalan setidaknya 4 milidetik.\".\n\nLet's demonstrate what it means with the example below. The `setTimeout` call in it re-schedules itself with zero delay. Each call remembers the real time from the previous one in the `times` array. What do the real delays look like? Let's see:\nAyo kita prakterkan apa artinya itu dengan contoh dibawah. Pemanggilan `setTimeout` menjadwalkan ulang dengan penundaan 0. Setiap pemanggilan mengingat waktu yang asli dari pemanggilan sebelumnya didalam array `times`. Seperti apa penundaan sesungguhnya terlihat? Lihat dibawah:\n\n```js run\nlet start = Date.now();\nlet times = [];\n\nsetTimeout(function run() {\n times.push(Date.now() - start); // mengingat penundaan dari pemanggilan sebelumnya\n\n if (start + 100 < Date.now()) alert(times); // tampilkan penundaanya setelah 100ms\n else setTimeout(run); // atau akan dijadwalkan ulang\n});\n\n// contoh dari keluarannya:\n// 1,1,1,1,9,15,20,24,30,35,40,45,50,55,59,64,70,75,80,85,90,95,100\n```\n\nPertama timer akan berjalan secara langsung (seperti yang tertulis dalam spesifikasinya), dan lalu kita melihat `9, 15, 20, 24...`. Penundaan wajib 4+ms diantara pemanggilan akan berjalan.\n\nHal yang sama akan terjadi jika kita menggunakan `setInterval` daripada `setTimeout`: `setInterval(f)` menjalankan `f` beberapa kali dengan tanpa delay, dan setelahnya dengan 4+ms delay.\n\nBatasan itu sudah ada sejak lama dan beberapa skrip mengandalkan hal itu, jadi itu ada untuk beberapa alasan.\n\nUntuk Javascript dibagian server, batasan itu tidaklah ada, dan disana terdapat cara lain untuk menjadwalkan sebuah pekerjaan yang asinkronus, seperti [setImmediate](https://nodejs.org/api/timers.html) untuk Node.js. Jadi hal ini merupakan hal yang berada pada peramban.\n````\n\n## Ringkasan\n\n- Metode `setTimeout(func,delay, ...args)` dan `setInterval(func, delay, ...args)` mengijinkan kita untuk menjalankan fungsinya sekali atau terus menerus setelah `delay` milidetik.\n- Untuk membatalkan eksekusinya, kita harus memanggil `clearTimeout/clearInterval` dengan nilai yang dikembalikan oleh `setTimeout/setInterval`.\n- Pemanggilan `setTimeout` bercabang adalah alternatif yang lebih fleksibel dari `setInterval`, mengijinkan kita untuk menyetel waktu *diantara* eksekusinya dengan lebih presisi.\n- Penjadwalan dengan delay 0 dengan `setTimeout(func, 0)` (sama seperti `setTimeout(func)`) digunakan untuk menjadwalkan pemanggilan \"secepat mungkin, tapi setelah skrip yang sedang berjalan selesai\".\n- Peramban membatasi delay dengan minimal 5 atau lebih pada pemanggilan bercabang dari `setTimeout` atau dari `setInterval` (setelah pemanggilan kelima) menjadi 4ms. Hanyalah untuk alasan-alasan yang sudah lama.\n\nPerhatikan bahwa seluruh metode penjadwalan tidak *menjamin* delay yang tepat.\n\nContoh, didalam peramban timer mungkin lebih lambat untuk beberapa alasan:\n- CPU-nya sedang melakukan banyak pekerjaan.\n- Ada tab peramban yang sedang berjalan dalam mode background.\n- Laptopnya sedang menggunakan mode batre.\n\nSemua itu mungkin menaikan resolusi timernya (delay minimalnya) menjadi 300ms atau bahkan 1000ms tergantung perambannya dan performasi pada OS-nya.\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js", "content": "function spy(func) {\n\n function wrapper(...args) {\n // gunakan ...args daripada argumen untuk menyimpan \"array asli\" didalam wrapper.calls\n wrapper.calls.push(args);\n return func.apply(this, args);\n }\n\n wrapper.calls = [];\n\n return wrapper;\n}\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js", "content": "function spy(func) {\n // Tulis kodemu disini\n}\n\n\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/test.js", "content": "describe(\"spy\", function() {\n it(\"records calls into its property\", function() {\n function work() {}\n\n work = spy(work);\n assert.deepEqual(work.calls, []);\n\n work(1, 2);\n assert.deepEqual(work.calls, [\n [1, 2]\n ]);\n\n work(3, 4);\n assert.deepEqual(work.calls, [\n [1, 2],\n [3, 4]\n ]);\n });\n\n it(\"transparently wraps functions\", function() {\n\n let sum = sinon.spy((a, b) => a + b);\n\n let wrappedSum = spy(sum);\n\n assert.equal(wrappedSum(1, 2), 3);\n assert(sum.calledWith(1, 2));\n });\n\n\n it(\"transparently wraps methods\", function() {\n\n let calc = {\n sum: sinon.spy((a, b) => a + b)\n };\n\n calc.wrappedSum = spy(calc.sum);\n\n assert.equal(calc.wrappedSum(1, 2), 3);\n assert(calc.sum.calledWith(1, 2));\n assert(calc.sum.calledOn(calc));\n });\n\n});\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md", "content": "Pembungkus yang dikembalikan oleh `spy(f)` harus menyimpan semua argumen dan lalu menggunakan `f.apply` untuk melanjutkan pemanggilannya.\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md", "content": "nilai penting: 5\n\n---\n\n# Spy decorator\n\nBuatlah sebuah dekorator `spy(func)` yang harus mengembalikan pembungkus yang menyimpan semua pemanggilan kepada fungsinya didalam propertinya sendiri bernama `calls`.\n\nSetiap pemanggilan disimpan sebagai sebuah array dari argumen.\n\nContoh:\n\n```js\nfunction work(a, b) {\n alert( a + b ); // bayangkan work adalah sebuah fungsi yang panjang\n}\n\n*!*\nwork = spy(work);\n*/!*\n\nwork(1, 2); // 3\nwork(4, 5); // 9\n\nfor (let args of work.calls) {\n alert( 'call:' + args.join() ); // \"call:1,2\", \"call:4,5\"\n}\n```\n\nCatatan. Dekoratornya harus berguna untuk unit-testing. Bentuk lanjutannya adalah `sinon.spy` didalam librari [Sinon.JS](http://sinonjs.org/).\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/solution.js", "content": "function delay(f, ms) {\n\n return function() {\n setTimeout(() => f.apply(this, arguments), ms);\n };\n\n};" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js", "content": "describe(\"delay\", function() {\n before(function() {\n this.clock = sinon.useFakeTimers();\n });\n\n after(function() {\n this.clock.restore();\n });\n\n it(\"calls the function after the specified timeout\", function() {\n let start = Date.now();\n\n function f(x) {\n assert.equal(Date.now() - start, 1000);\n }\n f = sinon.spy(f);\n\n let f1000 = delay(f, 1000);\n f1000(\"test\");\n this.clock.tick(2000);\n assert(f.calledOnce, 'calledOnce check fails');\n });\n\n it(\"passes arguments and this\", function() {\n let start = Date.now();\n let user = {\n sayHi: function(phrase, who) {\n assert.equal(this, user);\n assert.equal(phrase, \"Hello\");\n assert.equal(who, \"John\");\n assert.equal(Date.now() - start, 1500);\n }\n };\n\n user.sayHi = sinon.spy(user.sayHi);\n\n let spy = user.sayHi;\n user.sayHi = delay(user.sayHi, 1500);\n\n user.sayHi(\"Hello\", \"John\");\n\n this.clock.tick(2000);\n\n assert(spy.calledOnce, 'calledOnce check failed');\n });\n});\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md", "content": "Solusi:\n\n```js run demo\nfunction delay(f, ms) {\n\n return function() {\n setTimeout(() => f.apply(this, arguments), ms);\n };\n\n}\n\nlet f1000 = delay(alert, 1000);\n\nf1000(\"test\"); // tampilkan \"test\" setelah 1000ms\n```\n\nPerhatikan bagaimana fungsi arrow digunakan disini. Seperti yang kita tahu, fungsi panah tidak memiliki `this` dan `argumen`nya sendiri, jadi `f.apply(this, arguments)` akan mengambil `this` dan `arguments` dari pembungkusnya.\n\nJika kita memasukan fungsi yang biasa, `setTimeout` akan memanggil fungsinya tanpa argumen dan `this=window` (asumsikan kita berada didalam peramban).\n\nKita masih bisa memberikan `this` yang benar dengan menggunakan variabel tambahan, tapi kodenya akan sedikit menjadi lebih rumit:\n\n```js\nfunction delay(f, ms) {\n\n return function(...args) {\n let savedThis = this; // simpan this kedalam variabel tambahan\n setTimeout(function() {\n f.apply(savedThis, args); // gunakan disini\n }, ms);\n };\n\n}\n```\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md", "content": "nilai penting: 5\n\n---\n\n# Dekorator penunda\n\nBuatlah sebuah dekorator `delay(f, ms)` yang menunda setiap pemanggilan dari `f` selama `ms` milidetik.\n\nContoh:\n\n```js\nfunction f(x) {\n alert(x);\n}\n\n// create wrappers\nlet f1000 = delay(f, 1000);\nlet f1500 = delay(f, 1500);\n\nf1000(\"test\"); // tampilkan \"test\" setelah 1000ms\nf1500(\"test\"); // tampilkan \"test\" setelah 1500ms\n```\n\nDengan kata lain, `delay(f, ms)` mengembalikan sebuah \"varian dari `f` yang telah ditunda selama `ms`\".\n\nDidalam kode diatas, `f` adalah sebuah fungsi dari sebuah argumen tunggal, tapi solusimu harus bisa melewati seluruh argumen dan konteks dari `this`.\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/solution.js", "content": "function debounce(func, ms) {\n let timeout;\n return function() {\n clearTimeout(timeout);\n timeout = setTimeout(() => func.apply(this, arguments), ms);\n };\n}\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js", "content": "describe('debounce', function () {\n before(function () {\n this.clock = sinon.useFakeTimers();\n });\n\n after(function () {\n this.clock.restore();\n });\n\n it('for one call - runs it after given ms', function () {\n const f = sinon.spy();\n const debounced = debounce(f, 1000);\n\n debounced('test');\n assert(f.notCalled, 'not called immediately');\n this.clock.tick(1000);\n assert(f.calledOnceWith('test'), 'called after 1000ms');\n });\n\n it('for 3 calls - runs the last one after given ms', function () {\n const f = sinon.spy();\n const debounced = debounce(f, 1000);\n\n debounced('a');\n setTimeout(() => debounced('b'), 200); // diabaikan (terlalu dini)\n setTimeout(() => debounced('c'), 500); // dijalankan (1000 ms telah berlalu)\n this.clock.tick(1000);\n\n assert(f.notCalled, 'not called after 1000ms');\n\n this.clock.tick(500);\n\n assert(f.calledOnceWith('c'), 'called after 1500ms');\n });\n\n it('keeps the context of the call', function () {\n let obj = {\n f() {\n assert.equal(this, obj);\n },\n };\n\n obj.f = debounce(obj.f, 1000);\n obj.f('test');\n this.clock.tick(5000);\n });\n \n});\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html", "content": "\n\n\nFunction handler is called on this input:\n
\n\n\n

\n\nDebounced function debounce(handler, 1000) is called on this input:\n
\n\n\n

\n\n\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md", "content": "```js demo\nfunction debounce(func, ms) {\n let timeout;\n return function() {\n clearTimeout(timeout);\n timeout = setTimeout(() => func.apply(this, arguments), ms);\n };\n}\n\n```\n\nPemanggilan kepada `debounce` mengembalikan sebuah pembungkus. Ketika dipanggil, `debounce` akan menunggu lalu memanggil fungsi aslinya setelah `ms` milidetik dan membatal kan timeout sebelumnya.\n\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md", "content": "nilai penting: 5\n\n---\n\n# Debounce decorator\n\nHasil dari dekorator `debounce(f, ms)` adalah sebuah pembungkus yang menghentikan pemanggilan `f` selama `ms` milidetik dari ketidakaktifan (tidak ada pemanggilan, \"masa menunggu\"), lalu memanggil `f` sekali dengan argumen terakhir.\n\nDengan kata lain, `debounce` seperti seorang sekertaris yang menerima \"telefon\", dan menunggu selama `ms` milidetik dari ketidakaktifan. Dan lalu menyampaikan pemanggilan terakhir kepada \"boss\" (melakukan pemanggilan `f`).\n\nContoh, jika kita mempunyai sebuah fungsi `f` dan lalu memasukan `f = debounce(f, 1000)`.\n\nMaka jika fungsi pembungkus dipanggil pada 0ms, 200ms, dan 500ms, dan lalu tidak ada pemanggilan lainnya, maka fungsi `f` akan dipanggil sekali, pada 1500ms. Itulah: setelah beberapa saat fungsi tidak dipanggil maka fungsinya akan benar-benar dipanggil dengan rentang waktu 1000ms setelah pemanggilan terakhir.\n\n![](debounce.svg)\n\n...Dan itu akan mendapatkan argumen dari pemanggilan yang paling terakhir, pemanggilan lainnya akan diabaikan.\n\nIni adalah kodenya (digunakan untuk dekorator debounce dari [Lodash library](https://lodash.com/docs/4.17.15#debounce)):\n\n```js\nlet f = _.debounce(alert, 1000);\n\nf(\"a\");\nsetTimeout( () => f(\"b\"), 200);\nsetTimeout( () => f(\"c\"), 500); \n// fungsi debounce menunggu 1000ms setelah pemanggilan terakhir dan lalu menjalankan: alert(\"c\")\n```\n\nSekarang contoh yang lebih praktikal. Katakan, penggunakan mengetik sesuatu, dan kita ingin mengirim request kepada server ketika pengguna telah selesai mengetik.\n\nPada hal ini, sangat tidak berguna untuk mengirim request kepada server untuk setiap huruf yang diketik. Lagipula kita ingin menunggu, dan lalu memproses hasil ketikan pengguna.\n\nDidalam peramban, kita bisa menyetel sebuah event handler(penangan event) -- sebuah fungsi yang dipanggi untuk setiap perubahan pada kotak inputan, sebuah penangan event dipanggil sangat sering untuk setiap huruf yang diketik. Tapi jika kita ingin men`debounce`nya selama 1000ms, maka fungsinya akan dipanggil sekali, 1000ms setelah penginputan huruf terakhir.\n\n```online\n\nDidalam contoh ini, handlernya memasukan hasilnya kedalam kotak dibawah, cobalah:\n\n[iframe border=1 src=\"debounce\" height=200]\n\nLihat? inputan kedua memanggil fungsi debounce, jadi kontennya diproses setelah 1000ms dari inputan terakhir.\n```\n\nJadi, `debounce` adalah cara terbaik untuk memproses event yang terjadi berurutan: bisa tombol yang dipencet berulang-ulang, pergerakan mouse atau lainnya.\n\nFungsinya akan menunggu hingga pemanggilan terakhir, dan lalu menjalankan fungsi aslinya, lalu hasilnya akan diolah.\n\nTugasnya adalah untuk mengimplementasikan dekorator `debounce`.\n\nPetunjuk: jika kamu perhatikan, perubahan fungsinya hanya dengan menambahkan beberapa baris :)\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js", "content": "function throttle(func, ms) {\n\n let isThrottled = false,\n savedArgs,\n savedThis;\n\n function wrapper() {\n\n if (isThrottled) {\n // mengingat argumen terakhir untuk diingat setelah kondisi tidak aktif\n savedArgs = arguments;\n savedThis = this;\n return;\n }\n\n // sebaliknya, masuk kedalam kondisi tidak aktif\n func.apply(this, arguments);\n\n isThrottled = true;\n\n // mereset isThrotthled setelah penundaan\n setTimeout(function() {\n isThrottled = false;\n if (savedArgs) {\n // jika terdapat sebuah pemanggilan, savedThis/savedArgs harusnya memiliki nilai terakhir\n // pemanggilan rekursif menjalankan fungsinya dan menyetel ulang kondisi tidak aktifnya.\n wrapper.apply(savedThis, savedArgs);\n savedArgs = savedThis = null;\n }\n }, ms);\n }\n\n return wrapper;\n}" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js", "content": "describe(\"throttle(f, 1000)\", function() {\n let f1000;\n let log = \"\";\n\n function f(a) {\n log += a;\n }\n\n before(function() {\n this.clock = sinon.useFakeTimers();\n f1000 = throttle(f, 1000);\n });\n\n it(\"the first call runs now\", function() {\n f1000(1); // runs now\n assert.equal(log, \"1\");\n });\n\n it(\"then calls are ignored till 1000ms when the last call works\", function() {\n f1000(2); // (ditunda - kurang dari 1000ms sejak pemanggilan terakhir)\n f1000(3); // (ditunda - kurang dari 1000ms sejak pemanggilan terakhir)\n // after 1000 ms f(3) call is scheduled\n // setelah 1000ms pemanggilan f(3) dilakukan\n\n assert.equal(log, \"1\"); // sampai sekarang hanya pemanggilan pertama yang pernah dilakukan\n\n this.clock.tick(1000); // setelah 1000ms\n assert.equal(log, \"13\"); // log==13, pemanggilan kepada f1000(3) telah dibuat\n });\n\n it(\"the third call waits 1000ms after the second call\", function() {\n this.clock.tick(100);\n f1000(4); // (ditunda - kurang dari 1000ms sejak pemanggilan terakhir)\n this.clock.tick(100);\n f1000(5); // (ditunda - kurang dari 1000ms sejak pemanggilan terakhir)\n this.clock.tick(700);\n f1000(6); // (ditunda - kurang dari 1000ms sejak pemanggilan terakhir)\n\n this.clock.tick(100); // sekarang 100 + 100 + 700 + 100 = 1000ms telah berlalu\n\n assert.equal(log, \"136\"); // pemanggilan terakhir adalah f(6)\n });\n\n after(function() {\n this.clock.restore();\n });\n\n});\n\ndescribe('throttle', () => {\n\n it('runs a forwarded call once', done => {\n let log = '';\n const f = str => log += str;\n const f10 = throttle(f, 10);\n f10('once');\n\n setTimeout(() => {\n assert.equal(log, 'once');\n done();\n }, 20);\n });\n\n});\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md", "content": "```js demo\nfunction throttle(func, ms) {\n\n let isThrottled = false,\n savedArgs,\n savedThis;\n\n function wrapper() {\n\n if (isThrottled) { // (2)\n savedArgs = arguments;\n savedThis = this;\n return;\n }\n isThrottled = true;\n\n func.apply(this, arguments); // (1)\n\n setTimeout(function() {\n isThrottled = false; // (3)\n if (savedArgs) {\n wrapper.apply(savedThis, savedArgs);\n savedArgs = savedThis = null;\n }\n }, ms);\n }\n\n return wrapper;\n}\n```\n\nPemanggilan kepada `throttle(func, ms)` mengembalikan `wrapper`.\n\n1. Selama pemanggilan pertama, `wrapper`nya hanya menjalankan `func` dan menyetel kondisi tidak aktif (`isThrottled = true`).\n2. Didalam kondisi ini semua pemanggilan akan diingat/disimpan didalam `savedArgs/savedThis`. Ingat baik-baik bahwa konteks dan argumennya sama-sama penting dan harus diingat/disimpan. Kita akan membutuhkannya untuk membuat panggilannya.\n3. Setelah `ms` milidetik berlalu, `setTimeout` akan berjalan. Kondisi tidak aktif dihilangkan (`isThrottled = false`) dan, jika kita memiliki daftar panggilan yang diabaikan, `wrapper` akan dieksekusi dengan argumen dan konteks yang terakhir diingat/disimpan.\n\nLangkah ketika yang berjalan bukanlah `func`, tapi `wrapper`, karena kita tidak hanya perlu mengeksekusi `func`, tapi sekali-lagi kita memasuki kondisi tidak aktif dan perlu menyetel ulang timeout.\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md", "content": "nilai penting: 5\n\n---\n\n# Dekorator penutup\n\nBuatlah sebuah dekorator \"penutup\" `throttle(f, ms)` -- yang mengembalikan sebuah pembungkus.\n\nKetika fungsinya dipanggil beberapa kali, fungsinya akan melakukan pemanggilan kepada `f` maksimal sekali per `ms` milidetik.\n\nPerbedaannya dengan dekorator debounce adalah keduanya benar-benar dekorator berbeda:\n- `debounce` menjalankan fungsinya sekali setelah masa \"tidak aktif\". Bagus untuk memproses hasil akhir.\n- `throttle` menjalankan fungsinya tidak lebih banyak dari waktu `ms` yang diberikan. Bagus untuk update tersusun yang tidak terlalu sering dipanggil.\n\nDengan kata lain, `throttle` seperti seorang sekertaris yang menerima panggilan telefon, tapi menggangu bos nya (memanggil fungsi `f` asli) tidak lebih sering dari sekali per `ms` milidetik.\n\nAyo kita lihat contoh pengaplikasiannya langsung untuk mengerti lebih dalam tentang kebutuhannya dan dimana digunakannya.\n\n**Contoh, kita ingin mengetahui posisis dari pergerakan mouse.**\n\nDidalam peramban kita bisa menyetel sebuah fungsi yang berjalan untuk setiap pergerakan mouse dan mendapatkan lokasi pointernya selama mouse-nya bergerak. Selama mouse-nya bergerak terus-menerus, fungsi ini biasanya berjalan sangat sering, bisa menjadi seperti 100 kali per-detik (setiap 10ms).\n**Kota ingin meng-update beberapa informasi didalam halaman webnya ketika pointernya bergerak.**\n\n...Akan tetapi meng-update fungsi `update()` terlalu berat dilakukan untuk dijalankan terus menerus mengikuti pergerakan mouse. Tidak ada alasan yang bagus untuk meng-update lebih sering daripada sekali per 100ms.\n\nJadi kita akan membungkusnya dengan dekorator: gunakan `throttle(update, 100)` sebagai fungsi untuk berjalan setiap pergerakan mouse daripada secara langsung menggunakan `update()`. Dekoratornya akan sering dipanggil, tapi untuk pemanggilan kepada `update` akan dilakukan maksimal sekali per 100ms.\n\nSecara visual, langkah-langkahnya akan seperti ini:\n\n1. Untuk pergerakan mouse pertama dekoratornya langsung memanggil fungsi `update`. Itu penting, untuk penggunanya melihat reaksi sistemnya ketika mereka baru saja bergerak.\n2. Lalu selama mousenya bergerak, sampai `100ms` tidak akan terjadi apa-apa. Dekoratornya akan mengabaikan pemanggilannya.\n3. Setelah melewati `100ms` -- satu pemanggilan fungsi `update `terjadi dengan kondisi paling terakhir.\n4. Lalu, pada akhirnya, mousenya berhenti disuatu tempat. Dekoratornya menunggu sampai melewati `100ms` dan lalu menjalankan `update` dengan kondisi terakhir. Jadi, cukup penting, pergerakan mouse terakhir akan diproses.\n\nContoh kode:\n\n```js\nfunction f(a) {\n console.log(a);\n}\n\n// f1000 mengirimkan pemanggilan kepada f maksimal sekali per 1000ms\nlet f1000 = throttle(f, 1000);\n\nf1000(1); // tampilkan 1\nf1000(2); // (ditahan, belum melewati 1000ms)\nf1000(3); // (ditahan, belum melewati 1000ms)\n\n// ketika 1000ms terlewati...\n// ...menampilkan 3, nilai sebelum tiga yaitu 2 akan diabaikan\n```\n\nCatatan. Argumen dan konteks `this` yang dikirimkan kepada `f1000` harus bisa dikirimkan kepada fungsi asli `f`.\n" }, { "path": "1-js/06-advanced-functions/09-call-apply-decorators/article.md", "content": "# Decorators dan forwarding, call/apply\n\nJavascript memberikan fleksibilitas yang istimewa ketika harus berurusan dengan fungsi. Mereka bisa dikirim, digunakan sebagai objek, dan sekarang kita akan melihat bagaimana *penerusan/forward* panggilan diantara mereka dan *mendekorasi/decorate* mereka.\n\n## Cache transparan\n\n\nKatakan kita mempunyai sebuah fungsi `slow(x)` yang mana adalah fungsi berat saat diolah pada CPU, tapi hasil dari fungsi tersebut stabil. Dengan kata lain, untuk `x` yang sama fungsi itu selalu mengembalikan hasil yang sama.\n\nJika fungsinya sering dipanggil, kita mungkin ingin meng-cache (mengingat) hasilnya untuk menghindari pembuangan waktu saat kalkulasi-ulang.\n\nTapi sebagai gantinya daripada menambahkan fungsionalitas lain kedalam `slow()` kita akan membuat sebuah fungsi pembungkus/wrapper, yang menambahkan cache. Seperti yang akan kita lihat, terdapat beberapa keuntungan untuk melakukan cache.\n\nIni kodenya, dan penjelasannya:\n\n```js run\nfunction slow(x) {\n // disini terdapat task berat yang menggunakan sumberdaya CPU\n alert(`Called with ${x}`);\n return x;\n}\n\nfunction cachingDecorator(func) {\n let cache = new Map();\n\n return function(x) {\n if (cache.has(x)) { // jika terdapat kunci \"x\" pada cache\n return cache.get(x); // baca hasil dari cache\n }\n\n let result = func(x); // jika tidak, panggil fungsi\n\n cache.set(x, result); // dan cache (ingat) hasilnya\n return result;\n };\n}\n\nslow = cachingDecorator(slow);\n\nalert( slow(1) ); // slow(1) telah dimasukan kedalam cache\nalert( \"Again: \" + slow(1) ); // sama seperti baris sebelumnya\n\nalert( slow(2) ); // slow(2) telah dimasukan kedalam cache\nalert( \"Again: \" + slow(2) ); // sama seperti baris sebelumnya\n```\n\nDidalam kode diatas `cachingDecorator` adalah sebuah *decorator/dekorator*: sebuah fungsi spesial yang menerima fungsi dan mengubah tingkah lakunya.\n\nIdenya adalah kita bisa memanggil `cachingDecorator` dari fungsi manapun, dan itu akan mengembalikan pembungkus caching. Itu bagus, karena kita bisa mempunyai banyak fungsi yang dapat menggunakan fitur itu, dan semua yang kita butuhkan adalah menerapkan `cachingDecorator` kedalam fungsinya.\n\nDengan memisahkan caching dari kode fungsi utama kita juga bisa tetap membuat kode utama tetap sederhana.\n\nHasil dari `cachingDecorator(func)` adalah sebuah \"pembungkus/wrapper\": `function(x)` yang \"membungkus\" pemanggilan dari `func(x)` kedalam logika penyimpanan cache.\n\n![](decorator-makecaching-wrapper.svg)\n\nDari kode luar, fungsi yang dibungkus `slow` akan melakukan tetap hal yang sama. Fungsinya hanya akan menambahkan aspek caching kedalam prilakunya.\n\nUntuk meringkaskan, terdapat beberapa keuntungan untuk menggunakan `cachingDecorator` secara terpisah daripada dimasukan kedalam kode `slow` itu sendiri:\n\n- `cachingDecorator` dapat digunakan lagi. Kita bisa menerapkannya kedalam fungsi lainnnya.\n- Logika dari penyimpanan kedalam cache dipisahkan, itu tidak akan menambah kompleksitas dari `slow` sendiri.\n- Kita bisa menggunakan beberapa dekorator jika dibutuhkan.\n\n## Menggunakan \"func.call\" untuk konteksnya\n\nDekorator penyimpanan kedalam cache diatas tidak cokok untuk bekerja dengan metode objek.\n\nContoh, didalam kode dibawah `worker.slow()` akan berhenti bekerja setelah decoration:\n\n```js run\n// disini membuat worker.slow menyimpan kedalam cache\nlet worker = {\n someMethod() {\n return 1;\n },\n\n slow(x) {\n // task yang benar-benar menggunakan banyak sumber daya CPU disini\n alert(\"Called with \" + x);\n return x * this.someMethod(); // (*)\n }\n};\n\n// same code as before\nfunction cachingDecorator(func) {\n let cache = new Map();\n return function(x) {\n if (cache.has(x)) {\n return cache.get(x);\n }\n*!*\n let result = func(x); // (**)\n*/!*\n cache.set(x, result);\n return result;\n };\n}\n\nalert( worker.slow(1) ); // metode aslinya bekerja\n\nworker.slow = cachingDecorator(worker.slow); // sekarang simpan kedalam cache\n\n*!*\nalert( worker.slow(2) ); // Whoops! Error: Cannot read property 'someMethod' of undefined\n*/!*\n```\n\nErrornya muncul pada baris `(*)` yang mencoba untuk mengakses `this.someMethod` dan gagal. Apakah kamu bisa lihat kenapa?\n\nAlasannya adalah karena pembungkusnya memanggil fungsi aslinya sebagai `func(x)` pada baris `(**)`. Dan, ketika dipanggil seperti itu, fungsinya mendapatkan `this = undefined`.\n\nKita harusnya bisa melihat kasus yang serupa jika kita mencoba menjalankan:\n\n```js\nlet func = worker.slow;\nfunc(2);\n```\n\nJadi, pembungkusnya mengirimkan pemanggilan pada metode aslinya, tapi tanpa konteks dari `this`. Karenanya akan terjadi error.\n\nCoba kita perbaiki.\n\nTerdapat sebuah metode bawaan yang spesial [func.call(context, ...args)](mdn:js/Function/call) yang mengijinkan untuk melakukan pemanggilan fungsi menyetel nilai dari `this`.\n\nSintaksnya adalah:\n\n```js\nfunc.call(context, arg1, arg2, ...)\n```\n\nItu akan menjalankan `func` yang menyediakan argumen pertama sebagai `this`, dan sisanya sebagai argumen-argumennya.\n\nUntuk menyederhanakannya, kedua pemanggilan dibawah hampir melakukan hal yang serupa:\n```js\nfunc(1, 2, 3);\nfunc.call(obj, 1, 2, 3)\n```\n\nKeduanya memanggil `func` dengan argumen `1`, `2`, dan `3`. Perbedaannya adalah `func.call` juga menyetel `this` menjadi `obj`.\n\nSebagai sebuah contoh, didalam kode dibawah kita memanggil `sayHi` didalam konteks pada objek yang berbeda: `sayHi.call(user)` menjalankan `sayHi` menyediakan `this=user`, dan baris selanjutnya menyetel `this=admin`:\n\n```js run\nfunction sayHi() {\n alert(this.name);\n}\n\nlet user = { name: \"John\" };\nlet admin = { name: \"Admin\" };\n\n// lakukan pemanggilan untuk memberikan objek yang berbeda sebagai \"this\"\nsayHi.call( user ); // John\nsayHi.call( admin ); // Admin\n```\n\nDan disini kita menggunakan `call` untuk memanggil `say` dengan konteks dan *phrase* yang diberikan:\n\n\n```js run\nfunction say(phrase) {\n alert(this.name + ': ' + phrase);\n}\n\nlet user = { name: \"John\" };\n\n// user menjadi this, dan \"Hello\" menjadi argumen pertama\nsay.call( user, \"Hello\" ); // John: Hello\n```\n\nDidalam kasus kita, kita bisa menggunakan `call` didalam pembungkus untuk memberikan konteks kedalam fungsi aslinya:\n\n```js run\nlet worker = {\n someMethod() {\n return 1;\n },\n\n slow(x) {\n alert(\"Called with \" + x);\n return x * this.someMethod(); // (*)\n }\n};\n\nfunction cachingDecorator(func) {\n let cache = new Map();\n return function(x) {\n if (cache.has(x)) {\n return cache.get(x);\n }\n*!*\n let result = func.call(this, x); // \"this\" diberikan dengan benar sekarang\n*/!*\n cache.set(x, result);\n return result;\n };\n}\n\nworker.slow = cachingDecorator(worker.slow); // sekarang disimpan kedalam cache\n\nalert( worker.slow(2) ); // bekerja\nalert( worker.slow(2) ); // bekerja, tidak memanggil yang aslinya (dari cache)\n```\n\nSekarang semuanya berjalan.\n\nUntuk memperjelas, kita akan melihat lebih dalam bagaimana `this` diberikan:\n\n1. Setelah dekorasi dari `worker.slow` sekarang menjadi pembungkusnya `function (x) { ... }`.\n2. Jadi ketika `worker.slow(2)` dieksekusi, pembungkusnya mendapatkan `2` sebagai sebuah argumen dan `this=worker` (sebuah objek sebelum titik).\n3. Didalam pembungkusnya, asumsikan hasilnya belum disimpan didalam cache, `func.call(this, x)` diberikan kepada `this` (`=worker`) dan argumennya (`=2`) kepada metode aslinya.\n\n## Menjadi multi-argument\n\nSekarang kita buat `cachingDecorator` menjadi lebih universal. Sampai sekarang fungsi itu hanya bekerja dengan satu-argumen.\n\nSekarang bagaimana untuk menyimpan multi-argumen metode `worker.slow` kedalam cache?\n\n```js\nlet worker = {\n slow(min, max) {\n return min + max; // asumsikan sebuah fungsi yang sangat berat\n }\n};\n\n// harus mengingat pemanggilan dengan argument-yang-sama\nworker.slow = cachingDecorator(worker.slow);\n```\n\n\nSebelumnya, untuk argumen tunggal `x` kita bisa dengan melakukan `cache.set(x, result)` untuk menyimpan result-nya dan `cache.get(x)` untuk mengambilnya. Tapi kita harus mengingat hasil dari sebuah *kombinasi dari argumen-argumen* `(min, max)`. `Map` yang asli mengambil nilai tunggal sebagai kuncinya.\n\nTerdapat beberapa solusi yang bisa dilakukan:\n\n1. Implementasikan struktur data seperti-map baru yang lebih serba guna dan mengijinkan menggunakan banyak-kunci (atau gunakan third-party).\n2. Gunakan maps bercabang: `cache.set(min)` akan menjadi sebuah `Map` yang menyimpan pasangan `(max, result)`. Jadi kita bisa mendapatkan `result` sebagai `cache.get(min).get(max)`.\n3. Gabungkan kedua nilai menjadi satu. Didalam kasus tertentu kita bisa menggunakna sebuah string `\"min,max\"` sebagai kunci `Map`. Untuk fleksibilitas, kita bisa mengijinkan untuk menyediakan sebuah *fungsi hashing* untuk dekoratornya, yang mengetahui bagaimana cara membuat nilai tunggal dari banyak nilai.\n\nUntuk kebanykan penggunaan yang praktikal, varian ketiga sudahlah cukup, jadi kita akan menggunakannya.\n\nJuga kita harus memberikan bukan hanya `x`, tapi seluruh argumen-argumen didalam `func.call`. Kita panggil ulang didalam sebuah `function()` kita bisa mendapatkan pseudo-array dari argumennya sebagai `arguments`, jadi `func.call(this, x)` harus diganti dengan `func.call(this, ...arguments)`.\n\nIni adalah `cachingDecorator` yang lebih powerful:\n\n```js run\nlet worker = {\n slow(min, max) {\n alert(`Called with ${min},${max}`);\n return min + max;\n }\n};\n\nfunction cachingDecorator(func, hash) {\n let cache = new Map();\n return function() {\n*!*\n let key = hash(arguments); // (*)\n*/!*\n if (cache.has(key)) {\n return cache.get(key);\n }\n\n*!*\n let result = func.call(this, ...arguments); // (**)\n*/!*\n\n cache.set(key, result);\n return result;\n };\n}\n\nfunction hash(args) {\n return args[0] + ',' + args[1];\n}\n\nworker.slow = cachingDecorator(worker.slow, hash);\n\nalert( worker.slow(3, 5) ); // bekerja\nalert( \"Again \" + worker.slow(3, 5) ); // sama (dari cache)\n```\n\nSekarang itu bekerja dengan berapapun jumlah argumen (walaupun fungsi hash harusnya disesuaikan untuk menerima argumen dengan jumlah berapapun. Cara yang menarik untuk menangani ini akan dijelaskan dibawah).\n\nTerdapat dua perubahan:\n\n- Didalam baris `(*)` memanggil `hash` untuk membuat sebuah kunci tunggal dari `arguments`. Disini kita menggunakan fungsi \"joining\" yang sederhana yang mengubah argument `(3, 5)` menjadi kunci `\"3,5\"`. Kasus kompleks yang lain mungkin membutuhkan fungsi-fungsi hashing lainnya.\n- Lalu `(**)` menggunakan `func.call(this, ...arguments)` untuk memberikan konteks dan seluruh argumen yang pembungkusnya dapatkan (tidak hanya yang pertama) dari fungsi aslinya.\n\n## func.apply\n\nDaripada `func.call(this, ...arguments)` kita bisa gunakan `func.apply(this, arguments)`.\n\nSintaks dari metode bawaannya [func.apply](mdn:js/Function/apply) adalah:\n\n```js\nfunc.apply(context, args)\n```\n\nKode diatas menjalankan `func` dan menyetel `this=context` dan menggunakan objek yang seperti array `args` sebagai daftar dari argumen-argumen.\n\nPerbedaan sintaks antara `call` dan `apply` adalah bahwa `call` mengharapkan sebuah daftar dari argumen-argumen, sementara `apply` menerima objek yang seperti-array didalamnya.\n\nJadi kedua pemanggilan dibawah hampir sama:\n\n```js\nfunc.call(context, ...args); // mengirimkan sebuah array sebagai daftar dengan sintaks spread\nfunc.apply(context, args); // sama seperti pemanggilan call\n```\n\nHanya terdapat perbedaan yang tipis:\n\n- Sintaks spread `...` mengijinkan untuk mengirimkan *iterable* `args` sebagai list untuk `call`.\n- `apply` hanya menerima `args` yang *seperti-array*.\n\nJadi, dimana kita mengharapkan sebuah iterasi, gunakan `call`, dan dimana kita menggunakan seperti-array, gunakan `apply`.\n\nDan untuk objek yang bisa diiterasi dan seperti-array, seperti array yang asli, kita bisa gunakan keduanya, tapi `apply` akan lebih cepat, karena kebanyakan mesin Javascript secara internal mengoptimasi `apply` lebih baik.\n\nMengirimkan seluruh argumen bersamaan dengan konteks ke fungsi lainnya dipanggil dengan *call forwarding*.\n\nIni adalah contoh paling sederhana dari *call forwarding*:\n\n```js\nlet wrapper = function() {\n return func.apply(this, arguments);\n};\n```\n\nKetika sebuah kode eksternal memanggil `wrapper` yang seperti diatas, pemanggilan itu tidak bisa dibedakan dengan pemanggilan dari fungsi asli `func`.\n\n## Meminjam sebuah metode [#method-borrowing]\n\nSekarang kita buat satu perubahan minor didalam fungsi hashing:\n\n```js\nfunction hash(args) {\n return args[0] + ',' + args[1];\n}\n```\n\nSeperti yang sekarang, fungsi diatas hanya akan bekerja dengan dua argumen. Fungsi diatas akan lebih baik jika dapat menerima berapapun jumlah dari `args`.\n\nSolusi naturalnya harusnya dengan menggunakan metode [arr.join](mdn:js/Array/join):\n\n```js\nfunction hash(args) {\n return args.join();\n}\n```\n\n...Sayangnya, hal diatas tidak akan bekerja. karena kita memanggil `hash(arguments)`, dan objek `arguments` adalah hal yang bisa diiterasi dan hal yang seperti array, tapi bukanlah array asli.\n\njadi memanggil `join` tentu tidak akan bekerja, seperti yang bisa kita lihat dibawah:\n\n```js run\nfunction hash() {\n*!*\n alert( arguments.join() ); // Error: arguments.join is not a function\n*/!*\n}\n\nhash(1, 2);\n```\n\nTetap, terdapat sebuah cara yang mudah untuk menggunakan array join:\n\n```js run\nfunction hash() {\n*!*\n alert( [].join.call(arguments) ); // 1,2\n*/!*\n}\n\nhash(1, 2);\n```\n\nCaranya bernama *method borrowing*.\n\nKita menggunakan (borrow/meminjam) metode join dari array biasa (`[].join`) dan gunakan `[].join.call` untuk menjalankannya didalam konteks dari `arguments`.\n\nKenapa hal itu bisa bekerja?\n\nItu karena algoritma internal dari metode native `arr.join(glue)` sangatlah sederhana.\n\nDiambil dari spesifikasi hampir \"as-is(apa adanya)\":\n\n1. Biarkan `glue` menjadi argumen pertama atau, jika tidak ada argumen, maka sebuah koma `\",\"`.\n2. Biarkan `result` menjadi sebuah string kosong.\n3. Masukan `this[0]` kedalam `result`.\n4. Masukan `glue` dan `this[1]`.\n5. Masukan `glue` dan `this[2]`.\n6. ...lakukan terus sampai item dari `this.length` ditempel.\n7. Kembalikan `result`.\n\nJadi, secara tekniks itu akan menggunakan `this` dan menggabungkan `this[0]`, `this[1]` ...lainnya bersama. Itu secara sengaja ditulis dengan cara yang mengijinkan hal yang seperti array `this` (bukan kebetulan, banyak metode lainnya mengikuti cara ini). Itulah kenapa hal ini bekerja juga dengan `this=arguments`.\n\n## Decorators and properti fungsi\n\nSecara umum mengganti sebuah fungsi atau metode dengan yang telah diubah adalah hal yang aman, kecuali untuk satu hal kecil. Jika fungsi aslinya memiliki properti didalamnya `func.calledCount` atau apapun, maka fungsi yang telah diubah tidak akan memilikinya. Karena itu adalah sebuah pembungkus. Jadi haruslah hati-hati saat menggunakannya.\n\nContoh, didalam contoh diatas jika fungsi `slow` memiliki properti apapun didalamnya, maka `cachingDecorator(slow)` adalah sebuah pembungkus tanpa properti itu.\n\nBeberapa dekorator mungkin menyediakan propertinya sendiri. Misalnya sebuah dekorator mungkin menghitung berapa kali fungsinya dipanggil dan berapa lama pemanggilannya, dan mengetahui informasi ini lewat pembungkus properti.\n\nTerdapat sebuah cara untuk membuat dekorator yang tetap menyimpan akses kepada properti fungsi, tapi hal ini membutuhkan objek spesial `Proxy` untuk membungkus fungsinya. Kita akan pelajari nanti dalam artikel .\n\n## Ringkasan\n\n*Dekorator* adalah sebuah pembungkus fungsi yang mengubah prilaku fungsi tersebut. Pekerjaan utamanya tetap untuk membawa fungsinya.\n\nDekorator bisa dilihat sebagai \"fitur\" atau \"aspek\" yang bisa ditambahkan kedalam fungsi. Kita bisa menambahkan satu atau banyak. Dan semuanya tanpa mengubah kode dari fungsinya sendiri.\n\nUntuk mengimplementasikan `cachingDecorator`, kita telah mempelajari metode:\n\n- [func.call(context, arg1, arg2...)](mdn:js/Function/call) -- memanggil `func` dengan konteks dan argumen yang diberikan.\n- [func.apply(context, args)](mdn:js/Function/apply) -- memanggil `func` mengirimkan `context` sebagai this dan hal yang seperti array `args` kedalam sebuah daftar dari argumen. \n\n*call forwarding* biasanya digunakan dengan `apply`:\n\n```js\nlet wrapper = function() {\n return original.apply(this, arguments);\n};\n```\n\nKita juga melihat contoh dari *method borrowing* ketika kita mengambil metode dari sebuah objek dan `call/memanggil`nya didalam konteks dari objek lain. Hal itu cukup umum untuk mengambil metode array dan mengaplikasikannya kepada `arguments`. Alternatif lainnya adalah untuk menggukanan objek parameter rest yang mana adalah sebuah array asli.\n\nTerdapat beberapa dekorator yang tersedia. Pecahkan seluruh task untuk mengetahui seberapa paham kamu tentang dekorator tersebut didalam bab ini.\n" }, { "path": "1-js/06-advanced-functions/10-bind/2-write-to-object-after-bind/solution.md", "content": "Jawabannya: `null`.\n\n\n```js run\nfunction f() {\n alert( this ); // null\n}\n\nlet user = {\n g: f.bind(null)\n};\n\nuser.g();\n```\n\nKonteks dari pengikatan fungsi sangat sulit diperbaiki. Tidak ada cara untuk merubahnya dilain waktu.\n\nJadi bahkan ketika kita menjalankan `user.g()`, fungsi aslinya dipanggil dengan `this=null`.\n" }, { "path": "1-js/06-advanced-functions/10-bind/2-write-to-object-after-bind/task.md", "content": "nilai penting: 5\n\n---\n\n# Ikat fungsi sebagai sebuah metode\n\nApakah keluarannya?\n\n```js\nfunction f() {\n alert( this ); // ?\n}\n\nlet user = {\n g: f.bind(null)\n};\n\nuser.g();\n```\n\n" }, { "path": "1-js/06-advanced-functions/10-bind/3-second-bind/solution.md", "content": "Jawabannya: **John**.\n\n```js run no-beautify\nfunction f() {\n alert(this.name);\n}\n\nf = f.bind( {name: \"John\"} ).bind( {name: \"Pete\"} );\n\nf(); // John\n```\n\nObjek eksotis [bound function](https://tc39.github.io/ecma262/#sec-bound-function-exotic-objects) yang dikembalikan oleh `f.bind(...)` mengingat konteksnya (dan argumen jika ada) hanya pada waktu pembuatan.\n\nSebuah fungsi tidak bisa diikat-ulang.\n" }, { "path": "1-js/06-advanced-functions/10-bind/3-second-bind/task.md", "content": "nilai penting: 5\n\n---\n\n# Pengikatan kedua\n\nBisakah kita merubah`this` dengan pengikatan tambahan?\n\nApakah yang akan menjadi keluarannya?\n\n```js no-beautify\nfunction f() {\n alert(this.name);\n}\n\nf = f.bind( {name: \"John\"} ).bind( {name: \"Ann\" } );\n\nf();\n```\n\n" }, { "path": "1-js/06-advanced-functions/10-bind/4-function-property-after-bind/solution.md", "content": "Jawabannya: `undefined`.\n\nHasil dari `bind` adalah objek lainnya. Objek tersebut tidak memiliki properti `test`.\n\n" }, { "path": "1-js/06-advanced-functions/10-bind/4-function-property-after-bind/task.md", "content": "nilai penting: 5\n\n---\n\n# Properti fungsi setelah pengikatan\n\nTerdapat sebuah nilai didalam properti dari sebuah fungsi. Apakah properti tersebut akan berubah setelah `bind`? Kenapa, atau kenapa tidak?\n\n```js run\nfunction sayHi() {\n alert( this.name );\n}\nsayHi.test = 5;\n\n*!*\nlet bound = sayHi.bind({\n name: \"John\"\n});\n\nalert( bound.test ); // apakah keluarannya? kenapa?\n*/!*\n```\n\n" }, { "path": "1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md", "content": "\nErrornya muncul karena `ask` mendapatkan fungsi `loginOk/loginFail` tanpa objeknya.\n\nketika `ask` memanggil, `loginOk/loginFail` mengasumsikan bahwa `this=undefined`.\n\nAyo kita coba `bind` konteksnya:\n\n```js run\nfunction askPassword(ok, fail) {\n let password = prompt(\"Password?\", '');\n if (password == \"rockstar\") ok();\n else fail();\n}\n\nlet user = {\n name: 'John',\n\n loginOk() {\n alert(`${this.name} logged in`);\n },\n\n loginFail() {\n alert(`${this.name} failed to log in`);\n },\n\n};\n\n*!*\naskPassword(user.loginOk.bind(user), user.loginFail.bind(user));\n*/!*\n```\n\nSekarang kodenya berjalan.\n\nAlternatif lainnya bisa menggunakan:\n```js\n//...\naskPassword(() => user.loginOk(), () => user.loginFail());\n```\n\nContoh diatas biasanya bekerja dan terlihat lebih rapih.\n \nCara ini sedikit kurang bisa digunakan didalam situasi yang lebih kompleks dimana variabel `user` mungkin berubah *setelah* `askPassword` dipanggil, tapi *sebelum* pengguna menjawab dan memanggil `() => user.loginOk()`.\n" }, { "path": "1-js/06-advanced-functions/10-bind/5-question-use-bind/task.md", "content": "nilai penting: 5\n\n---\n\n# Perbaiki sebuah fungsi yang telah kehilangan \"this\"\n\nPemanggilan kepada `askPassword()` didalam kode dibawah harus memeriksa passwordnya dan lalu memanggil `user.loginOk/loginFail` tergantung dari jawabannya.\n\nTapi pemanggilan itu mengembalikan sebuah error. kenapa?\n\nPerbaiki baris yang di tandai agar kodenya dapat berjalan dengan benar (baris lainnya tidak perlu diubah).\n\n```js run\nfunction askPassword(ok, fail) {\n let password = prompt(\"Password?\", '');\n if (password == \"rockstar\") ok();\n else fail();\n}\n\nlet user = {\n name: 'John',\n\n loginOk() {\n alert(`${this.name} logged in`);\n },\n\n loginFail() {\n alert(`${this.name} failed to log in`);\n },\n\n};\n\n*!*\naskPassword(user.loginOk, user.loginFail);\n*/!*\n```\n" }, { "path": "1-js/06-advanced-functions/10-bind/6-ask-partial/solution.md", "content": "\n\n1. Funakan fungsi pembungkus, lebih jelasnya gunakanlah fungsi arrow:\n\n ```js \n askPassword(() => user.login(true), () => user.login(false)); \n ```\n\n Sekarang fungsi `user dapat diambil dari variabel luar dan dijalankan dengan normal.\n\n2. Atau buat sebuah fungsi mini dari `user.login` yang menggunakan `user` sebagai konteksnya dan yang mana mempunyai argumen pertama yang benar:\n\n\n ```js \n askPassword(user.login.bind(user, true), user.login.bind(user, false)); \n ```\n" }, { "path": "1-js/06-advanced-functions/10-bind/6-ask-partial/task.md", "content": "nilai penting: 5\n\n---\n\n# Pengaplikasian parsial untuk login\n\nTugas yang ini adalah varian yang sedikit lebih sulit daripada . \n\nObjek `user`nya telah dimodifikasi. Sekarang daripada menggunakan dua fungsi `loginOk/loginFail`, sekarang hanya memiliki satu fungsi `user.login(true/false)`.\n\nApa yang harus kita kirimkan kedalam `askPassword` di kode dibawah, apakah harus memanggul `user.login(true)` sebagai `ok` dan `user.login(false)` sebagai `fail`?\n\n```js\nfunction askPassword(ok, fail) {\n let password = prompt(\"Password?\", '');\n if (password == \"rockstar\") ok();\n else fail();\n}\n\nlet user = {\n name: 'John',\n\n login(result) {\n alert( this.name + (result ? ' logged in' : ' failed to log in') );\n }\n};\n\n*!*\naskPassword(?, ?); // ?\n*/!*\n```\n\nUbahlah kodenya hanya pada bagian yang ditandai.\n\n" }, { "path": "1-js/06-advanced-functions/10-bind/article.md", "content": "libs:\n - lodash\n\n---\n\n# Function binding\n\nKetika mengirimkan metode objek sebagai callback, seperti `setTimeout`, terdapat sebuah masalah: \"kehilangan `this`\".\n\nDidalam chapter ini kita akan belajar cara memperbaikinya.\n\n## Kehilangan \"this\"\n\nKita sudah melihat beberapa contoh saat kehilangan `this`. Sekalinya sebuah metode dikirim kebagian kode lain dengan terpisah dari objeknya -- `this` akan menghilang dari metodenya.\n\nIni adalah bagaimana hal itu terjadi dengan `setTimeout`:\n\n```js run\nlet user = {\n firstName: \"John\",\n sayHi() {\n alert(`Hello, ${this.firstName}!`);\n }\n};\n\n*!*\nsetTimeout(user.sayHi, 1000); // Hello, undefined!\n*/!*\n```\n\nSeperti yang bisa kita lihat, keluarannya tidak menampilkan \"John\" sebagai `this.firstName`, tapi menampilkan `undefined`!\n\nItu karena `setTimeout` mendapatkan fungsi `user.sayHi`, terpisah dari objeknya. Baris terakhir bisa ditulis ulang sebagai:\n\n```js\nlet f = user.sayHi;\nsetTimeout(f, 1000); // kehilangan konteks dari user\n```\n\nMetode `setTimeout` didalam peramban sedikit spesial: metode tersebut menyetel `this=window` untuk pemanggilan fungsi (untuk Node.js, `this` menjadi objek timer, tapi tidak terlalu penting disini). Jadi untuk `this.firstName` metodenya jadi mendapatkan `window.firstName`, yang mana tidak ada. Dalam kasus serupa lainnya `this` akan menjadi `undefined`.\n\nTugasnya cukup tipikal -- kita ingin mengirim metode objek ke bagian kode lainnya (disini -- kepada penjadwal/setTimeout) dimana metodenya akan dipanggil. Bagaimana cara untuk memeriksa konteksnya dipanggil dengan benar?\n\n## Solusi 1: pembungkus\n\nSolusi sederhananya adalah untuk menggunakan fungsi pembungkus:\n\n```js run\nlet user = {\n firstName: \"John\",\n sayHi() {\n alert(`Hello, ${this.firstName}!`);\n }\n};\n\n*!*\nsetTimeout(function() {\n user.sayHi(); // Hello, John!\n}, 1000);\n*/!*\n```\n\nKode diatas bekerja, karena `user` didapatkan dari lingkungan leksikal terluar, dan lalu memanggil metodenya secara normal.\n\nSolusi yang sama, tapi lebih pendek:\n\n```js\nsetTimeout(() => user.sayHi(), 1000); // Hello, John!\n```\n\nTerlihat bagus, tapi sedikit memiliki kerentanan yang akan muncul pada struktur kodenya.\n\nBagaimana jika sebelum `setTimeout` berjalan (terdapat penundaan selama satu detik!) nilai `user` untuk berubah? Maka, tiba-tiba,fungsinya akan memanggil objek yang salah.\n\n\n```js run\nlet user = {\n firstName: \"John\",\n sayHi() {\n alert(`Hello, ${this.firstName}!`);\n }\n};\n\nsetTimeout(() => user.sayHi(), 1000);\n\n// ...nilai dari user berubah sebelum 1 detik!\nuser = {\n sayHi() { alert(\"Another user in setTimeout!\"); }\n};\n\n// setTimeout menggunakan user yang berbeda!\n```\n\nSolusi selanjutnya akan menjamin hal seperti diatas tidak akan terjadi.\n\n## Solusi 2: bind\n\nFungsi menyediakan sebuah metode bawaan [bind](mdn:js/Function/bind) yang mengijinkan untuk membernarkan `this`.\n\nSintaks dasarnya adalah:\n\n```js\n// contoh sintaks yang lebih kompleks akan kita segera lihat\nlet boundFunc = func.bind(context);\n```\n\nhasil dari `func.bind(contenxt)` adalah sesuatu yang terlihat seperti fungsi spesial atau bisa disebut dengan \"objek eksotik\", yang dapat dipanggil sebagai fungsi dan dapat melanjutkan pemanggilan kepada `func` sambil menyetel `this=context`.\n\nDengan kata lain, memanggil `boundFunc` sama seperti `func` dengan nilai `this` yang tetap.\n\nContoh, disini `funcUser` mengirimkan sebuah panggilan kepada `func` dengan `this=user`:\n\n```js run \nlet user = {\n firstName: \"John\"\n};\n\nfunction func() {\n alert(this.firstName);\n}\n\n*!*\nlet funcUser = func.bind(user);\nfuncUser(); // John \n*/!*\n```\n\nDisini `func.bin(user)` sebagai sebuah varian dari `func`, dengan nilai tetap `this=user`.\n\nSeluruh argumen dikirim kepada `func` asli \"sebagaimana adanya\", contoh:\n\n```js run \nlet user = {\n firstName: \"John\"\n};\n\nfunction func(phrase) {\n alert(phrase + ', ' + this.firstName);\n}\n\n// bind this to user\nlet funcUser = func.bind(user);\n\n*!*\nfuncUser(\"Hello\"); // Hello, John (argumen \"Hello\" dikirim, dan this=user)\n*/!*\n```\n\nSekarang kita coba dengan menggunakan metode objek:\n\n\n```js run\nlet user = {\n firstName: \"John\",\n sayHi() {\n alert(`Hello, ${this.firstName}!`);\n }\n};\n\n*!*\nlet sayHi = user.sayHi.bind(user); // (*)\n*/!*\n\n// bisa dijalankan tanpa objek\nsayHi(); // Hello, John!\n\nsetTimeout(sayHi, 1000); // Hello, John!\n\n// bahkan jika nilai dari user berubah sebelum 1 detik\n// sayHi menggunakan nilai yang telah diikat, yang mana telah mereferensi kepada objek yang lama\nuser = {\n sayHi() { alert(\"Another user in setTimeout!\"); }\n};\n```\n\nDidalam baris `(*)` kita menggunakan metode `user.sayHi` dan mengikatkannta kepada `user`. `sayHi` adalah sebuah fungsi \"terikat\", yang bisa dipanggil sendiri atau dikirimkan kepada `setTimeout` -- itu tidaklah penting, yang penting adalah konteksnya tepat.\n\nDisini kita bisa melihat argumen yang dikirimkan \"seperti adanya\", hanya saja `this` nilainya menjadi tetap oleh `bind`:\n\n```js run\nlet user = {\n firstName: \"John\",\n say(phrase) {\n alert(`${phrase}, ${this.firstName}!`);\n }\n};\n\nlet say = user.say.bind(user);\n\nsay(\"Hello\"); // Hello, John (argumen \"Hello\" dikirim untuk digunakan)\nsay(\"Bye\"); // Bye, John (\"Bye\" dikirim untuk digunakan)\n```\n\n````smart header=\"Metode yang bermanfaat: `bindAll`\"\nJika sebuah objek mempunyai beberapa metode dan kita berencana untuk mengirimkannya kebagian kode lain secara terus-menerus, kita bisa mengikatkannya didalam sebuah perulangan:\n\n```js\nfor (let key in user) {\n if (typeof user[key] == 'function') {\n user[key] = user[key].bind(user);\n }\n}\n```\n\nLibrari Javascript juga menyediakan fungsi untuk memudahkan pengikatan/binding masal, contoh [_.bindAll(object, methodNames)](http://lodash.com/docs#bindAll) didalam lodash.\n\n\n## Partial functions/Fungsi sebagian\n\nSampai sekarang kita hanya berbicara tentang binding/pengikatan `this`. Ayo kita lihat lebih dalam.\n\nKita bisa mengikat bukan hanya `this`, tapi juga argumen. Yang mana sangat jarang digunakan, tapi terkadang cukup mudah digunakan.\n\nSintaks penuh dari `bind`:\n\n```js\nlet bound = func.bind(context, [arg1], [arg2], ...);\n```\n\nYang mana mengijinkan kita untuk mengikat konteks sebagai `this` dan memulai argumen dari sebuah fungsi.\n\nContoh, kita mempunyai sebuah fungsi perkalian `mul(a, b)`:\n\n```js\nfunction mul(a, b) {\n return a * b;\n}\n```\n\nKita gunakan `bind` untuk membuat sebuah fungsi `double` didalamnya:\n\n```js run\nfunction mul(a, b) {\n return a * b;\n}\n\n*!*\nlet double = mul.bind(null, 2);\n*/!*\n\nalert( double(3) ); // = mul(2, 3) = 6\nalert( double(4) ); // = mul(2, 4) = 8\nalert( double(5) ); // = mul(2, 5) = 10\n```\n\nPanggilan pada `mul.bind(null, 2)` membuat function `double` baru yang memberikan panggilan terhadap `mul`, memperbaiki `null` sebagai konteksnya dan `2` sebagai argumen pertamanya. Argumen-argumen lebih lanjut yang diberikan \"as is/sebagaimana adanya\".\n\nItu dipanggil [partial function application](https://en.wikipedia.org/wiki/Partial_application) -- kita membuat sebuah fungsi baru dengan memperbaiki beberapa parameter dari yang sudah ada.\n\nHarap dicatat bahwa disini kita tidak menggunakan `this`. Tapi `bind` memerlukannya, jadi kita harus meletakkan di dalam sesuatu seperti `null`.\n\nFungsi `triple` di dalam kode dibawah ini melipatkan tiga kali lipat nilai tersebut:\n\n```js run\nfunction mul(a, b) {\n return a * b;\n}\n\n*!*\nlet triple = mul.bind(null, 3);\n*/!*\n\nalert( triple(3) ); // = mul(3, 3) = 9\nalert( triple(4) ); // = mul(3, 4) = 12\nalert( triple(5) ); // = mul(3, 5) = 15\n```\n\nKenapa kita umumnya membuat fungsi parsial?\n\nManfaatnya bahwa kita dapat membuat sebuah fungsi independen dengan nama yang dapat dibaca (`double`, `triple`). Kita bisa menggunakannya dan tidak menyediakan argumen pertamanya setiap saat karena sudah diperbaiki dengan `bind`.\n\nDalam kasus lain, aplikasi parsial berguna saat kita punya sebuah fungsi generik dan menginginkan varian yang kurang universal untuk kenyamanan.\n\nContoh, kita punya sebuah fungsi `send(from, to, text)`. Kemudian, di dalam objek `user` kita mungkin ingin menggunakan varian parsial darinya: `sendTo(to, text)` yang dikirim dari user saat ini.\n\n## Menjadi parsial tanpa konteks\n\nBagaimana jika kita ingin memperbaiki beberapa argumen, tetapi bukan konteks `this`? Contoh, untuk sebuah method objek.\n\n`bind` yang asli tidak mengizinkan itu. Kita tidak bisa begitu saja mengabaikan konteks dan lompat ke argumen.\n\nUntungnya, fungsi `partial` untuk mengikat argumen saja dapat dengan mudah diterapkan.\n\nSeperti ini:\n\n```js run\n*!*\nfunction partial(func, ...argsBound) {\n return function(...args) { // (*)\n return func.call(this, ...argsBound, ...args);\n }\n}\n*/!*\n\n// Usage:\nlet user = {\n firstName: \"John\",\n say(time, phrase) {\n alert(`[${time}] ${this.firstName}: ${phrase}!`);\n }\n};\n\n// tambahkan method parsial dengan waktu tetap\nuser.sayNow = partial(user.say, new Date().getHours() + ':' + new Date().getMinutes());\n\nuser.sayNow(\"Hello\");\n// Something like:\n// [10:00] John: Hello!\n```\nHasil dari panggilan `partial(func[, arg1, arg2...])` yaitu sebuah pembungkus `(*)` yang memanggil `func` dengan:\n- `this` sama seperti yang didapat (`user.sayNow` menyebutnya `user`)\n- Lalu berikan `...argsBound` -- argumen dari panggilan `partial` yaitu (`\"10:00\"`)\n- Lalu berikan `...args` -- argumen yang diberikan ke pembungkus (`\" Hello \"`)\n\nSangat mudah melakukannya dengan sintaks penyebaran, bukan?\n\nJuga ada implementasi [_.partial](https://lodash.com/docs#pihak) yang siap dari perpustakaan lodash.\n\n## Kesimpulan\n\nMethod `func.bind(context, ...args)` mengembalikan sebuah \"varian terikat\" dari function `func` yang memperbaiki konteks` this` dan argumen pertama jika diberikan.\n\nBiasanya kita menerapkan `bind` untuk memperbaiki `this` untuk sebuah method objek, sehingga kita bisa memberikannya ke suatu tempat. Misalnya, ke `setTimeout`.\n\nKetika kita memperbaiki beberapa argumen dari function yang ada, fungsi yang dihasilkan (less universal) disebut *partially applied* atau *partial*.\n\nParsial lebih mudah digunakan ketika kita tidak ingin mengulangi argumen yang sama berulang kali. Seperti jika kita memiliki fungsi `send (from, to)`, dan `from` harus selalu sama untuk tugas kita, kita bisa mendapatkan sebuah partial dan melanjutkannya.\n" }, { "path": "1-js/06-advanced-functions/10-bind/head.html", "content": "" }, { "path": "1-js/06-advanced-functions/12-arrow-functions/article.md", "content": "# Membahas Kembali Fungsi Arrow\n\nAyo kita kunjungi kembali Fungsi Arrow.\n\nFungsi arrow bukanlah cuma bertujuan untuk menyingkat penulisan fungsi. Namun mereka memiliki fitur yang berguna dalam kondisi tertentu.\n\n\nJavascript memiliki banyak kondisi yang dimana kita membutuhkan penulisan fungsi kecil yang yang dijalankan disuatu tempat.\n\nSebagai contoh:\n\n- `arr.forEach(func)` -- `func` dijalankan oleh `forEach` untuk setiap item pada array.\n- `setTimeout(func)` -- `func` dijalankan oleh penjadwal bawaan.\n- ...dan ada banyak contoh lain.\n\nSudah menjadi jiwa dasar javascript untuk membuat fungsi dan menjalankannya disuatu tempat.\n\nDan ada kalanya pada suatu fungsi, kita biasanya tidak ingin meninggalkan konteks dimana fungsi itu berjalan. dan situlah dimana penggunaan fungsi arrow menjadi berguna.\n\n## Fungsi Arrow tidak memiliki \"this\"\n\nSeperti yang kita ingat pada chapter , fungsi arrow tidak memiliki `this`. jika `this` diakses, itu diambil dari fungsi normal diluar. (bukan dari fungsi arrow)\n\nSebagai contoh, kita bisa menggunakannya untuk mengiterasi apa yang ada didalam objek method:\n\n```js run\nlet group = {\n title: \"Our Group\",\n students: [\"John\", \"Pete\", \"Alice\"],\n\n showList() {\n*!*\n this.students.forEach(\n student => alert(this.title + ': ' + student)\n );\n*/!*\n }\n};\n\ngroup.showList();\n```\n\nPada `forEach` disini, fungsi arrow digunakan, jadi `this.title` hasilnya akan sama persis dengan fungsi diluar `showList`. Yaitu : `group.title`.\n\nJika kita menggunakan fungsi \"normal\", maka akan terjadi eror:\n\n```js run\nlet group = {\n title: \"Our Group\",\n students: [\"John\", \"Pete\", \"Alice\"],\n\n showList() {\n*!*\n this.students.forEach(function(student) {\n // Error: Cannot read property 'title' of undefined\n alert(this.title + ': ' + student);\n });\n*/!*\n }\n};\n\ngroup.showList();\n```\n\nError tersebut terjadi karena `forEach` berjalan dengan fungsi `this=undefined` sebagai bawaannya, jadi upaya untuk mengakses `undefined.title` terjadi.\n\nItu tidak mempengaruhi fungsi arrow, karena mereka tidak memiliki `this`.\n\n```warn header=\"Fungsi arrow tidak bisa berjalan dengan `new`\"\nTidak memiliki `this` sebagai bawaannya, berarti memiliki keterbatasan lainnya: fungsi arrow tidak bisa digunakan sebagai fungsi constructors. Mereka tidak bisa dipanggil dengan `new`.\n```\n\n```smart header=\"Arrow functions VS bind\"\nTerdapat sedikit perbedaan antara fungsi arrow '=>' dan sebuah fungsi normal yang dipanggil dengan `.bind(this`):\n\n- `.bind(this)` membuat sebuah \"versi terikat\" dari fungsi itu.\n- The arrow `=>` tidak membuat keterikatan. Fungsi itu secara dasar tidak memiliki `this`. Pencarian dari `this` dibuat sama persis dengan sebuah pencarian variabel normal: yaitu pada luar lexical environment. \n```\n\n## Fungsi arrow tidak memiliki \"arguments\"\n\nFungsi arrow juga tidak memiliki variabel `arguments` .\n\nItu bagus untuk decorators, ketika kita butuh untuk meneruskan panggilan dengan `this` dan `arguments` yang sekarang. \n\nSebagai contoh, `defer(f, ms)` mendapatkan sebuah fungsi dan mengembalikan sebuah wrapper disekitarnya yang menunda panggilan selama `ms` milisekon:\n\n```js run\nfunction defer(f, ms) {\n return function() {\n setTimeout(() => f.apply(this, arguments), ms);\n };\n}\n\nfunction sayHi(who) {\n alert('Hello, ' + who);\n}\n\nlet sayHiDeferred = defer(sayHi, 2000);\nsayHiDeferred(\"John\"); // Hello, John Setelah 2 detik\n```\n\nSama juga tanpa menggunakan fungsi arrow berupa:\n\n```js\nfunction defer(f, ms) {\n return function(...args) {\n let ctx = this;\n setTimeout(function() {\n return f.apply(ctx, args);\n }, ms);\n };\n}\n```\n\nDisini kita butuh untuk membuat variabel tambahan `args` dan `ctx` agar fungsi didalam `setTimeout` bisa mengambilnya.\n\n## Kesimpulan\n\nFungsi arrow:\n\n- Tidak memiliki `this`\n- Tidak memiliki `arguments`\n- Tidak bisa dipanggil dengan `new`\n- Dia juga tidak memiliki `super`, kita belum mempelajarinya. Tapi kita akan mempelajarinya di \n\nItu dikarenakan fungsi arrow dibuat untuk pembentukan fungsi kode pendek yang tidak memiliki \"konteks\" pribadi, melainkan bekerja pada konteks dimana fungsi itu bekerja. Dan mereka bekerja sangat baik pada kasus tersebut.\n" }, { "path": "1-js/06-advanced-functions/index.md", "content": "# Penggunaan lanjutan fungsi\n" }, { "path": "1-js/07-object-properties/01-property-descriptors/article.md", "content": "\n# Properti flag dan Deskriptor\n\nSeperti yang kita ketahui, objek dapat menyimpan banyak properti.\n\nSampai sekarang, sebuah properti hanyalah pasangan nilai dan kunci bagi kita. Tapi, sebuah properti objek sebenarnya lebih fleksibel dan memiliki banyak kegunaan.\n\nPada bab ini kita akan mempelajari konfigurasi tambahan dan pada bab selanjutnya kita akan melihat bagaimana secara samar mengubahnya menjadi fungsi getter atau setter.\n\n## Properti Flag\n\nProperti Objek, selain sebuah **`Nilai`**, memiliki tiga atribut spesial (yang dinamakan \"flags\"):\n\n- **`writable`** -- jika `benar`, maka nilai nya bisa diubah, jika tidak maka hanya bsa dibaca.\n- **`enumerable`** -- jika `benar`, maka akan dicantumkan pada daftar perulangan, jika tidak maka tidak akan dicantumkan. (Menentukan apakah bisa melakukan perulangan dengan properti objek tersebut)\n- **`configurable`** -- jika `benar`, properti itu dapat dihapus dan attribute-attributenya bisa diubah-ubah, jika tidak maka tidak bisa dihapus dan diubah.\n\n**catatan:** *`benar` disini biasanya di gambarkan sebagai boolean `true` dan `salah` digambarkan sebagai boolean `false` pada javascript.*\n\nKita belum melihat mereka, karena biasanya mereka tidak muncul. Ketika kita membuat sebuah properti \"dengan cara biasa\", Semua dari tiga attribut diatas biasanya bernilai `benar`.namun, kita juga bisa mengubahnya kapan pun kita mau.\n\nPertama, mari kita lihat bagaimana cara mendapatkan properti flag tersebut.\n\nPada Method [Object.getOwnPropertyDescriptor](mdn:js/Object/getOwnPropertyDescriptor) memperbolehkan kita untuk melakukan query terhadap informasi *komplit* dari sebuah properti.\n\nSintaksnya adalah:\n```js\nlet descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);\n```\n\n`obj`\n: Objek yang akan kita ambil informasinya.\n\n`propertyName`\n: Nama dari properti tersebut.\n\nNilai yang akan dikembalikan disebut sebagai \"properti deskriptor\" dari objek: didalamnya mengandung nilai dan semua flag dari properti tersebut. \n\nSebagai contoh:\n\n```js run\nlet user = {\n name: \"John\"\n};\n\nlet descriptor = Object.getOwnPropertyDescriptor(user, 'name');\n\nalert( JSON.stringify(descriptor, null, 2 ) );\n/* property descriptor:\n{\n \"Nilai\": \"John\",\n \"writable\": true,\n \"enumerable\": true,\n \"configurable\": true\n}\n*/\n```\n\nUntuk mengganti flag tersebut, kita dapat menggunakan [Object.defineProperty](mdn:js/Object/defineProperty).\n\nSintaksnya adalah:\n\n```js\nObject.defineProperty(obj, propertyName, descriptor)\n```\n\n`obj`, `propertyName`\n: Objek dan nama properti yang akan diterapkan deskriptornya.\n\n`descriptor`\n: Properti deskriptor objek yang akan digunakan.\n\nJika properti tersebut ada, `defineProperty` akan memperbarui flagnya. namun, itu akan membuat properti dengan nilai yang diberikan dan flag properti tersebut; pada kasus itu, jika sebuah flag tidak disediakan, maka itu akan diasumsikan dengan nilai `false` (salah).\n\nSebagai contoh, sebuah properti `name` dibuat dengan semua nilai flag yang salah:\n\n```js run\nlet user = {};\n\n*!*\nObject.defineProperty(user, \"name\", {\n value: \"John\"\n});\n*/!*\n\nlet descriptor = Object.getOwnPropertyDescriptor(user, 'name');\n\nalert( JSON.stringify(descriptor, null, 2 ) );\n/*\n{\n \"value\": \"John\",\n*!*\n \"writable\": false,\n \"enumerable\": false,\n \"configurable\": false\n*/!*\n}\n */\n```\n\nbandingkan dengan \"pembuatan cara biasa\" `user.name` diatas: sekarang semua nilai flagnya berbentuk salah. Jika itu yang bukan kita mau maka kita sebaiknya merubahnya menjadi `true` pada `deskriptor`nya.\n\nSekarang mari kita lihat efek flag tersebut dengan contoh.\n\n## Non-writable\n\nAyo kita buat `user.name` menjadi non-writable (tidak bisa diatur dan ditetapkan kembali) dengan mengubah flag `writable` nya :\n\n```js run\nlet user = {\n name: \"John\"\n};\n\nObject.defineProperty(user, \"name\", {\n*!*\n writable: false\n*/!*\n});\n\n*!*\nuser.name = \"Pete\"; // Error: Cannot assign to read only property 'name'\n*/!*\n```\nSekarang tidak ada yang dapat mengubah nama dari user kita, kecuali mereka menetapkan `defineProperty`nya sendiri untuk menimpa konfigurasi kita.\n\n\n```smart header=\"Errors appear only in strict mode\"\nPada mode non-strict, tidak ada eror yang terjadi ketika menulis pada properti non-writable dan sejenisnya. tapi operasi itu tetap tidak akan berhasil. Aksi pelanggaran flag hanya saja diabaikan pada mode non-strict.\n```\n\nBerikut contoh kasus yang sama, tapi properti itu dibuat dari awal:\n\n```js run\nlet user = { };\n\nObject.defineProperty(user, \"name\", {\n*!*\n value: \"John\",\n // untuk properti baru kita butuh untuk memberi tau apa saja yang benar/true\n enumerable: true,\n configurable: true\n*/!*\n});\n\nalert(user.name); // John\nuser.name = \"Pete\"; // Error\n```\n\n## Non-enumerable\n\nSekarang mari kita tambahkan `toString` yang sudah disesuaikan pada `user`.\n\nSecara normal, bawaan `toString` untuk objek merupakan non-enumerable (tidak bisa diiterasi), itu tidak akan muncul pada `for..in`. Tapi apabila kita tambahkan`toString` yang kita buat sendiri, maka secara default akan muncul pada `for..in`, contohnya seperti ini:\n\n```js run\nlet user = {\n name: \"John\",\n toString() {\n return this.name;\n }\n};\n\n// secara default, kedua properti tersebut akan terdaftar:\nfor (let key in user) alert(key); // name, toString\n```\nJika kita tidak menyukainya, maka kita bisa mengatur menjadi `enumerable:false`. yang kemudian itu tidak akan tampil pada `for..in` loop, seperti pada bawaannya: \n\n\n```js run\nlet user = {\n name: \"John\",\n toString() {\n return this.name;\n }\n};\n\nObject.defineProperty(user, \"toString\", {\n*!*\n enumerable: false\n*/!*\n});\n\n*!*\n// sekarang toString kita tidak akan muncul:\n*/!*\nfor (let key in user) alert(key); // name\n```\n\nProperti non-enumerable juga tidak termasuk dari `Object.keys`:\n\n```js\nalert(Object.keys(user)); // name\n```\n\n## Non-configurable\n\nFlag non-configurable (`configurable:false`) terkadang sudah diatur sebelumnya untuk objek dan properti bawaan.\n\nSebuah properti non-configurable tidak bisa di hapus.\n\nSebagai contoh, `Math.PI` adalah non-writable, non-enumerable and non-configurable:\n\n```js run\nlet descriptor = Object.getOwnPropertyDescriptor(Math, 'PI');\n\nalert( JSON.stringify(descriptor, null, 2 ) );\n/*\n{\n \"value\": 3.141592653589793,\n \"writable\": false,\n \"enumerable\": false,\n \"configurable\": false\n}\n*/\n```\nJadi, seorang programer tidak akan bisa mengganti nilai dari sebuah `Math.PI` atau juga menimpanya.\n\n```js run\nMath.PI = 3; // Error\n\n// menghapus Math.PI juga tidak akan bekerja\n```\nMembuat sebuah properti non-configurable adalah jalan satu arah. kita tidak bisa mengubahnya kembali dengan `defineProperty`.\n\nTepatnya, non-configurable memberlakukan beberapa pembatasan pada `defineProperty`:\n1. tidak bisa mengubah flag `configurable` .\n2. tidak bisa mengubah flag `enumerable` .\n3. tidak bisa mengubah `writable: false` menjadi `true` (kebalikannya masih bisa bekerja).\n4. tidak bisa mengubah `get/set` untuk sebuah properti aksesor (tapi bisa menetapkannya jika kosong).\n\nDisini kita membuat `user.name` menjadi sebuah konstant \"yang selamanya tersegel\":\n\n```js run\nlet user = {\n name: \"John\"\n};\n\nObject.defineProperty(user, \"name\", {\n configurable: false\n});\n\nuser.name = \"Pete\"; // works fine\ndelete user.name; // Error\n```\n\nAnd here we make `user.name` a \"forever sealed\" constant:\n\n```js run\nlet user = {\n name: \"John\"\n};\n\nObject.defineProperty(user, \"name\", {\n writable: false,\n configurable: false\n});\n\n*!*\n// tidak bisa mengubah user.name atau flag nya\n// semua dibawah ini tidak akan bekerja:\n// user.name = \"Pete\"\n// delete user.name\n// Object.defineProperty(user, \"name\", { value: \"Pete\" })\nObject.defineProperty(user, \"name\", {writable: true}); // Error\n*/!*\n```\n\n```smart header=\"\\\"Non-configurable\\\" doesn't mean \\\"non-writable\\\"\"\nCatatan pengecualian: sebuah nilai dari non-configurable, tapi writable properti masih bisa diubah.\n\nIde dari `configurable: false` adalah untuk mencegah perubahan properti flag dan penghapusannya, bukan perubahan dalam nilainya.\n```\n\n## Object.defineProperties\n\nAda sebuah method [Object.defineProperties(obj, descriptors)](mdn:js/Object/defineProperties) yang memperbolehkan untuk mendefinisikan banyak properti pada satu waktu.\n\nSintaksnya adalah:\n\n```js\nObject.defineProperties(obj, {\n prop1: descriptor1,\n prop2: descriptor2\n // ...\n});\n```\n\nSebagai contoh:\n\n```js\nObject.defineProperties(user, {\n name: { value: \"John\", writable: false },\n surname: { value: \"Smith\", writable: false },\n // ...\n});\n```\n\nJadi, kita bisa mengatur banyak properti dalam satu waktu.\n\n## Object.getOwnPropertyDescriptors\n\nUntuk mendapat semua properti deskriptor pada satu waktu, kita dapat menggunakan sebuah method [Object.getOwnPropertyDescriptors(obj)](mdn:js/Object/getOwnPropertyDescriptors).\n\nBersamaan dengan `Object.defineProperties` itu dapat digunakan menjadi cara \"flags-aware\" untuk mengkloning sebuah objek:\n\n```js\nlet clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj));\n```\n\nNormalnya ketika kita mengkloning sebuah objek, kita menggunakan penetapan nilai untuk menyalin propertinya, seperti ini:\n\n```js\nfor (let key in user) {\n clone[key] = user[key]\n}\n```\n...Tapi itu tidak menyalin flagnya. jadi jika kita ingin sesuatu salinan \"yang lebih baik\" maka `Object.defineProperties` lebih disarankan.\n\nPerbedaan lainnya adalah jika `for..in` mengabaikan properti simbolik, tapi `Object.getOwnPropertyDescriptors` mengembalikan *semua* properti deskriptor termasuk properti simboliknya.\n\n## menyegel sebuah objek secara global\n\nProperti deskriptor bekerja pada level invidual propertinya.\n\nDan ada juga method yang memberi batasan akses terkait *keselurhan* objek:\n\n[Object.preventExtensions(obj)](mdn:js/Object/preventExtensions)\n: Melarang penambahan pada properti baru dalam objek.\n\n[Object.seal(obj)](mdn:js/Object/seal)\n: Melarang penambahan/penghapusan dari properti. Menetapkan `configurable: false` untuk semua properti yang ada.\n\n[Object.freeze(obj)](mdn:js/Object/freeze)\n: Melarang penambahan/pengurangan/pengubahan pada properti. Menetapkan `configurable: false, writable: false` untuk semua properti yang ada.\n\nDan ada juga test untuk mereka:\n\n[Object.isExtensible(obj)](mdn:js/Object/isExtensible)\n: Mengembalikan `false` jika menambahkan properti itu dilarang, selain itu `true`.\n\n[Object.isSealed(obj)](mdn:js/Object/isSealed)\n: Mengembalikan `true` jika menambahkan/mengurangi properti itu dilarang, dan semua properti yang ada memiliki `configurable: false`.\n\n[Object.isFrozen(obj)](mdn:js/Object/isFrozen)\n: Mengembalikan `true` jika menambahkan/mengurangi/mengubah properti itu dilarang, dan semua properti yang sekarang memiliki `configurable: false, writable: false`.\n\nMethod diatas biasanya jarang digunakan pada prakteknya.\n" }, { "path": "1-js/07-object-properties/02-property-accessors/article.md", "content": "\n# Properti getter and setter\n\nTerdapat dua jenis properti objek.\n\nYang pertama adalah *properti data*. Kita telah mengetahui bagaimana cara kerja mereka. Semua properti yang kita gunakan sampai sekarang adalah properti data.\n\nYang kedua adalah properti yang bisa dibilang cukup baru. Properti itu adalah *properti aksesor*. Mereka sebenarnya adalah fungsi untuk mendapatkan dan mengatur sebuah nilai, tapi mereka mirip seperti properti biasa pada kode eksternal.\n\n## Getter dan setter\n\nProperti aksesor diwakili dengan method \"getter\" dan \"setter\". Didalam objek literal mereka dilambangkan dengan `get` dan `set`:\n\n```js\nlet obj = {\n *!*get propName()*/!* {\n // getter, kode dijalankan untuk mendapat obj.propName\n },\n\n *!*set propName(value)*/!* {\n // setter, kode dijalankan untuk mengatur obj.propName = value\n }\n};\n```\n\nGetter bekerja ketika `obj.propName` terbaca, sedangkan setter -- ketika variabel itu ditetapkan.\n\nSebagai contoh, kita memiliki sebuah objek `user` dengan `name` dan `surname` (nama variabel): \n\n```js\nlet user = {\n name: \"John\",\n surname: \"Smith\"\n};\n```\n\nSekarang kita ingin untuk menambahkan sebuah properti `fullName`, yang berisi `\"John Smith\"`. kita tidak ingin untuk melakukan penyalinan terhadap informasi yang sudah ada, melainkan kita bisa menerapakan sebuah aksesor:\n\n```js run\nlet user = {\n name: \"John\",\n surname: \"Smith\",\n\n*!*\n get fullName() {\n return `${this.name} ${this.surname}`;\n }\n*/!*\n};\n\n*!*\nalert(user.fullName); // John Smith\n*/!*\n```\n\nDari luar, properti aksesor tampak seperti variabel pada umumnya. Itulah ide dari properti aksesor. Kita tidak *memanggil* `user.fullName` melaui fungsi, Namun kita *membacanya* secara biasa: properti getter berjalan di belakang layar.\n\nSekarang, `fullName` memiliki sebuah properti getter. Jika kita mencoba untuk menetapkan value lain pada `user.fulName=`, maka akan terjadi eror:\n\n```js run\nlet user = {\n get fullName() {\n return `...`;\n }\n};\n\n*!*\nuser.fullName = \"Test\"; // Error (property has only a getter)\n*/!*\n```\n\nMari kita perbaiki dengan menambahkan setter untuk `user.fullName`:\n\n```js run\nlet user = {\n name: \"John\",\n surname: \"Smith\",\n\n get fullName() {\n return `${this.name} ${this.surname}`;\n },\n\n*!*\n set fullName(value) {\n [this.name, this.surname] = value.split(\" \");\n }\n*/!*\n};\n\n// variabel fullName dijalankan dengan value ditetapkan. \nuser.fullName = \"Alice Cooper\";\n\nalert(user.name); // Alice\nalert(user.surname); // Cooper\n```\n\nAlhasil, kita memiliki sebuah properti virtual `fullname`. Yang bisa di baca dan diatur nilainya.\n\n## Deskriptor aksesor \n\nDeskriptor untuk properti aksesor berbeda dengan yang ada di dalam properti data.\n\nUntuk properti aksesor, tidak ada `nilai` atau `pengaturan` dalam properti aksesor, melainkan digantikan dengan fungsi `get` dan `set`. \n\nYang berarti, deskriptor aksesor mungkin memiliki:\n\n- **`get`** -- sebuah fungsi tanpa argument, yang bekerja ketika properti dibaca,\n- **`set`** -- sebuah fungsi dengan satu argumen, yang dipanggil ketika properti itu ditetapkan,\n- **`enumerable`** -- sama seperti pada properti data,\n- **`configurable`** -- sama seperti pada properti data.\n\nSebagai contoh, untuk membuat sebuah aksesor `fullName` dengan `defineProperty`, kita dapat membawa sebuah deskriptor dengan `get` dan `set`:\n\n```js run\nlet user = {\n name: \"John\",\n surname: \"Smith\"\n};\n\n*!*\nObject.defineProperty(user, 'fullName', {\n get() {\n return `${this.name} ${this.surname}`;\n },\n\n set(value) {\n [this.name, this.surname] = value.split(\" \");\n }\n*/!*\n});\n\nalert(user.fullName); // John Smith\n\nfor(let key in user) alert(key); // name, surname\n```\n\nPerlu diperhatikan bahwa sebuah properti bisa jadi adalah sebuah properti aksesor(memiliki method `get/set`) atau sebuah properti data(hanya memiliki sebuah `nilai`), namun tidak keduanya.\n\nJika kita mencoba untuk menyediakan `get` dan `value` pada satu deskriptor yang sama, maka akan terjadi eror.\n\n```js run\n*!*\n// Error: Invalid property descriptor.\n*/!*\nObject.defineProperty({}, 'prop', {\n get() {\n return 1\n },\n\n value: 2\n});\n```\n\n## getter/setter yang lebih baik\n\nGetter/setter dapat digunakan sebagai wrapper pada properti `asli`(bukan aksesor) untuk mendapatkan akses kontrol lebih terkait pengoperasian dengan mereka.\n\nSebagai contoh, jika kita ingin untuk melarang penamaan yang terlalu singkat untuk `user`, kita dapat memiliki sebuah setter `name` dan menjaga nilainya pada properti yang terpisah `_name`:\n\n```js run\nlet user = {\n get name() {\n return this._name;\n },\n\n set name(value) {\n if (value.length < 4) {\n alert(\"Name is too short, need at least 4 characters\");\n return;\n }\n this._name = value;\n }\n};\n\nuser.name = \"Pete\";\nalert(user.name); // Pete\n\nuser.name = \"\"; // Name is too short...\n```\n\nJadi, variabel name tersebut disimpan pada properti `_name`, yang aksesnya dapat melalui getter dan setter.\n\nSecara teknis, kode eksternal bisa aja mengakses variabel nama secara langsung dengan menggunakan `user._name`. Tapi sudah menjadi rahasia umum bahwa properti yang diawali dengan underscore `\"_\"` adalah internal variabel yang seharusnya tidak boleh diakses dari luar.\n\n\n## Penggunaan kompabilitas\n\nSalah satu kegunaan besar properti aksesor adalah mereka memperbolehkan kita untuk mengontrol properti data `biasa` untuk menggantinya pada suatu waktu, dengan sebuah setter dan getter, serta mengubah perilakunya.\n\nBayangkan kita mulai dengan implementasi objek user menggunakan properti `name` dan `age`.\n\n```js\nfunction User(name, age) {\n this.name = name;\n this.age = age;\n}\n\nlet john = new User(\"John\", 25);\n\nalert( john.age ); // 25\n```\n\n...Tapi cepat atau lambat, sesuatu mungkin berubah. Alih-alih menggunakan `age` kita mungkin memutuskan untuk menyimpan `birthday`, karena mungkin itu lebih tepat dan sesuai:\n\n```js\nfunction User(name, birthday) {\n this.name = name;\n this.birthday = birthday;\n}\n\nlet john = new User(\"John\", new Date(1992, 6, 1));\n```\n\nSekarang apa yang akan kita lakukan terhadap kode lama yang masih menggunakan properti`age`?\n\nKita dapat mencoba untuk mencarinya disemua tempat dan memperbaiki nya, tapi itu akan memakan waktu yang lama dan susah jika kode itu digunakan oleh banyak orang. selain itu, properti `age` adalah sesuatu yang bagus dimiliki oleh user, kan ?\n\nTetaplah menjaganya.\n\nMenambahkan sebuah getter pada `age` menyelesaikan permasalahan.\n\n```js run no-beautify\nfunction User(name, birthday) {\n this.name = name;\n this.birthday = birthday;\n\n*!*\n // variabel age dihitung berdasarkan tanggal sekarang dan tanggal lahirnya\n Object.defineProperty(this, \"age\", {\n get() {\n let todayYear = new Date().getFullYear();\n return todayYear - this.birthday.getFullYear();\n }\n });\n*/!*\n}\n\nlet john = new User(\"John\", new Date(1992, 6, 1));\n\nalert( john.birthday ); // properti birthday tersedia \nalert( john.age ); // ...begitu juga dengan age\n```\n\nSekarang kode yang lama bisa bekerja dan kita memiliki tambahan properti yang bagus.\n" }, { "path": "1-js/07-object-properties/index.md", "content": "# Object properties configuration\n\nIn this section we return to objects and study their properties even more in-depth.\n" }, { "path": "1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/solution.md", "content": "\n1. `true`, diambil dari `rabbit`.\n2. `null`, diambil dari `animal`.\n3. `undefined`, propertinya sudah tidak ada.\n" }, { "path": "1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/task.md", "content": "Nilai: 5\n\n---\n\n# Bekerja dengan prototype\n\nIni adalah kode yang membuat sepasang objek, lalu dimodifikasi.\n\nNilai manakan yang akan muncul?\n\n```js\nlet animal = {\n jumps: null\n};\nlet rabbit = {\n __proto__: animal,\n jumps: true\n};\n\nalert( rabbit.jumps ); // ? (1)\n\ndelete rabbit.jumps;\n\nalert( rabbit.jumps ); // ? (2)\n\ndelete animal.jumps;\n\nalert( rabbit.jumps ); // ? (3)\n```\n\nSeharusnya ada 3 jawaban.\n" }, { "path": "1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/solution.md", "content": "\n1. Let's add `__proto__`:\n\n ```js run\n let head = {\n glasses: 1\n };\n\n let table = {\n pen: 3,\n __proto__: head\n };\n\n let bed = {\n sheet: 1,\n pillow: 2,\n __proto__: table\n };\n\n let pockets = {\n money: 2000,\n __proto__: bed\n };\n\n alert( pockets.pen ); // 3\n alert( bed.glasses ); // 1\n alert( table.money ); // undefined\n ```\n\n2. Dalam mesin modern, kinerja yang bagus, tidak ada perbedaan apakan kita mengambil properti dari sebuah objek atau dari *prototype*nya. Mesinnya akan ingat darimana mengambil propertinya dan menggunakannya kembali pada request selanjutnya.\n\n Contoh, untuk `pockets.glasses` mereka ingat dimana `glasses` ditemukan (dalam `head`), dan pencarian selanjutnya akan dicari ditempat yang sama. Mesinnya juga cukup pintar untuk memperbaharui *cache internal* jika sesuatu berubah, jadi optimasinya akan aman.\n" }, { "path": "1-js/08-prototypes/01-prototype-inheritance/2-search-algorithm/task.md", "content": "Nilai: 5\n\n---\n\n# Algoritma pencarian\n\nTugasnya memiliki dua bagian.\n\nDiberikan objek-objek berikut:\n\n```js\nlet head = {\n glasses: 1\n};\n\nlet table = {\n pen: 3\n};\n\nlet bed = {\n sheet: 1,\n pillow: 2\n};\n\nlet pockets = {\n money: 2000\n};\n```\n\n1. Gunakan `__proto__` untuk memasukan *prototype* dengan cara yang mana membuat property yang mencari akan mengikuti *path*: `pockets` -> `bed` -> `table` -> `head`. Contoh, `pockets.pen` haruslah `3` (ditemukan di `table`), dan `bed.glasses` haruslah `1` (ditemukan didalam `head`).\n2. Jawab pertanyaan: mana yang lebih cepat didapatkan `glasses` sebagai `pockets.glasses` atau `head.glasses`? Jika diperlukan gunakanlah *benchmark*.\n" }, { "path": "1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/solution.md", "content": "**Jawabannya: `rabbit`.**\n\nKarena `this` adalah sebuah objek sebelum titik, jadi `rabbit.eat()` memodifikasi `rabbit`.\n\nPencarian properti dan eksekusi adalah dua hal yang berbeda.\n\nThe method `rabbit.eat` is first found in the prototype, then executed with `this=rabbit`.\nMetode `rabbit.eat` adalah yang pertama ditemukan dalam *prototype*, lalu dieksekusi dengan `this=rabbit`.\n" }, { "path": "1-js/08-prototypes/01-prototype-inheritance/3-proto-and-this/task.md", "content": "Nilai: 5\n\n---\n\n# Dimanakah akan tertulis?\n\nKita memiliki `rabbit` mewarisi dari `animal`.\n\nJika kita memanggil `rabbit.eat()`, yang mana objeknya menerima properti `full`: `animal` atau `rabbit`?\n\n```js\nlet animal = {\n eat() {\n this.full = true;\n }\n};\n\nlet rabbit = {\n __proto__: animal\n};\n\nrabbit.eat();\n```\n" }, { "path": "1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/solution.md", "content": "Kita perhatikan baik-baik pada apa yang terjadi dalam pemanggilannya `speedy.eat(\"apple\")`.\n\n1. Metode `speedy.eat` ditemukan dalam prototype (`hamster`), lalu dieksekusi dengan `this=speedy` (objek sebelum titik).\n\n2. Lalu `this.stomach.push()` perlu menemukan properti `stomach` dan panggil `push` didalamnya. Itu akan mencati `stomach` didalam `this` (`=speedy`), tapi tidak menemukan apapun.\n\n3. Lalu akan mengikuti rantai *prototype* dan menemukan `stomach` didalam `hamster`.\n\n4. lalu akan memanggil `push` didalamnya, menambahkan makanan kedalam *stomach dari prototype*.\n\nJadi semua hamster membagi satu *stomach*!\n\nDiantara `lazy.stomach.push(...)` dan `speedy.stomach.push()`. properti `stomach` ditemukan didalam *prototype* (sebagaimana tidak didalam objeknya sendiri) , lalu datanya akan dimasukan.\n\nPerhatikan bahwa hal tersebut tidak akan terjadi pada *assignment* sederhana `this.stomach=`:\n\n```js run\nlet hamster = {\n stomach: [],\n\n eat(food) {\n*!*\n // masukan this.stomach daripada this.stomach.push\n this.stomach = [food];\n*/!*\n }\n};\n\nlet speedy = {\n __proto__: hamster\n};\n\nlet lazy = {\n __proto__: hamster\n};\n\n// Speedy one menemukan makanannya\nspeedy.eat(\"apple\");\nalert( speedy.stomach ); // apple\n\n// Perut Lazy one kosong\nalert( lazy.stomach ); // \n```\n\nSekarang semuanya berjalan dengan baik, karena `this.stomach=` tidak melakukan pencarian `stomach`. Nilainya ditulis langsung kedalam objek `this`.\n\nKita juga bisa benar-benar menghindar dari masalah dengan memastikan bahwa setiak hamster memiliki perut mereka masing-masing:\n\n```js run\nlet hamster = {\n stomach: [],\n\n eat(food) {\n this.stomach.push(food);\n }\n};\n\nlet speedy = {\n __proto__: hamster,\n*!*\n stomach: []\n*/!*\n};\n\nlet lazy = {\n __proto__: hamster,\n*!*\n stomach: []\n*/!*\n};\n\n// Speedy one menemukan makanan\nspeedy.eat(\"apple\");\nalert( speedy.stomach ); // apple\n\n// Perut Lazy one kosong\nalert( lazy.stomach ); // \n```\n\nSebagai solusi umum, seluruh properti yang dideskripsikan dari objek tertentu, seperti `stomach` diatas, seharusnya ditulis kedalam objeknya. Untuk menghindari masalah seperti itu.\n" }, { "path": "1-js/08-prototypes/01-prototype-inheritance/4-hamster-proto/task.md", "content": "Nilai: 5\n\n---\n\n# Kenapa kedua hamster kenyang?\n\nKita memiliki dua hamster: `speedy` dan `lazy` yang mewarisi objek `hamster`.\n\nKetika kita memberi makan salah satunya, yang satunya lagi akan ikut kenyang. Kenapa? Bagaimana cara memperbaikinya?\n\n\n```js run\nlet hamster = {\n stomach: [],\n\n eat(food) {\n this.stomach.push(food);\n }\n};\n\nlet speedy = {\n __proto__: hamster\n};\n\nlet lazy = {\n __proto__: hamster\n};\n\n// Yang satu ini menemukan makanan\nspeedy.eat(\"apple\");\nalert( speedy.stomach ); // apple\n\n// Yang ini juga memilikinya, kenapa? perbaikilah.\nalert( lazy.stomach ); // apple\n```\n\n" }, { "path": "1-js/08-prototypes/01-prototype-inheritance/article.md", "content": "# Pewarisan *Prototype* (*Prototypal Inheritance*)\n\nDalam *programming*, terkadang kita ingin mengambil sesuatu lalu dikembangkan lagi.\n\nContoh, kita memiliki objek `user` lengkap dengan properti dan metodenya, dan kita ingin membuat `admin` dan `guest` sebagai varian yang sedikit diubah dari objek `user`. Kita ingin menggunakan apa yang dimiliki oleh `user`, bukan menyalin ataupun meimplementasikan ulang metode-metodenya, akan tetapi menciptakan objek baru diatasnya.\n\n*Pewarisan Prototype* adalah fitur yang bisa membantu untuk melakukan hal itu.\n\n## [[Prototype]]\n\nDidalam Javascript, objek memiliki properti tersembunyi yang spesial `[[Prototype]]` (seperti yang dinamakan didalam spesifikasinya), yang mana dapat mereferensi pada `null` atau mereferensi pada objek lainnya. Objek itu disebut dengan *prototype*:\n\n![prototype](object-prototype-empty.svg)\n\nSaat kita membaca properti dari `objek`, dan properti itu hilang, JavaScript secara otomatis mengambilnya dari prototipe. Dalam pemrograman, ini disebut \"pewarisan prototipe\". Dan segera kita akan mempelajari banyak contoh pewarisan tersebut, serta fitur bahasa yang lebih keren yang dibangun di atasnya.\n\nProperti yang dimiliki `[[Prototype]]` bersifat internal dan tersembunyi, tapi ada banyak cara untuk melihat properti tersebut.\n\nSalah satunya adalah menggunakan nama spesial `__proto__`, seperti:\n\n```js run\nlet animal = {\n eats: true\n};\nlet rabbit = {\n jumps: true\n};\n\n*!*\nrabbit.__proto__ = animal; // sets rabbit.[[Prototype]] = animal\n*/!*\n```\n\nSekarang jika kita ingin membaca properti dari `rabbit`, dan ternyada tidak ada, Javascript akan mengambilnya dari `animal`.\n\nContoh:\n\n```js\nlet animal = {\n eats: true\n};\nlet rabbit = {\n jumps: true\n};\n\n*!*\nrabbit.__proto__ = animal; // (*)\n*/!*\n\n// sekarang kita bisa menggunakan kedua propertinya didalam *rabbit*:\n*!*\nalert( rabbit.eats ); // true (**)\n*/!*\nalert( rabbit.jumps ); // true\n```\n\nPada baris `(*)` menyetel `animal` untuk menjadi prototype dari `rabbit`.\n\nLalu, ketika `alert` mencoba untuk membaca properti `rabbit.eats` `(**)`, ternyata `rabbit` tidak memiliki propertinya, maka Javascript mengikuti referensi `[[Prototype]]`nya dan menemukan `animal` (mencari dari bawah ke atas):\n\n![](proto-animal-rabbit.svg)\n\nDisini kita bisa berkata bahwa \"`animal` adalah prototype dari `rabbit`\" atau \"`rabbit` secara prototype mewarisi dari `animal`\".\n\nJadi jika `animal` memiliki banyak properti dan metode yang berguna, maka properti dan metode tersebut secara otomatis akan tersedia didalam `rabbit`. Properti tersebut dinamakan \"pewarisan\".\n\nJika kita memiliki metode didalam `animal`, maka metode tersebut dapat dipanggil didalam `rabbit`:\n\n```js run\nlet animal = {\n eats: true,\n*!*\n walk() {\n alert(\"Animal walk\");\n }\n*/!*\n};\n\nlet rabbit = {\n jumps: true,\n __proto__: animal\n};\n\n// walk diambil dari prototype\n*!*\nrabbit.walk(); // Animal walk\n*/!*\n```\n\nMetodenya secara otomatis diambil dari *prototype*nya, seperti:\n\n![](proto-animal-rabbit-walk.svg)\n\nRantai *prototype* bisa lebih panjang:\n\n```js run\nlet animal = {\n eats: true,\n walk() {\n alert(\"Animal walk\");\n }\n};\n\nlet rabbit = {\n jumps: true,\n*!*\n __proto__: animal\n*/!*\n};\n\nlet longEar = {\n earLength: 10,\n*!*\n __proto__: rabbit\n*/!*\n};\n\n// walk diambil dari rantai prototype\nlongEar.walk(); // Animal walk\nalert(longEar.jumps); // true (dari rabbit)\n```\n\n![](proto-animal-rabbit-chain.svg)\n\nSekarang jika kita membaca sesuatu dari `longEar`, dan ternyata tidak ada, Javascript akan mencarinya didalam `rabbit`, dan lalu didalam `animal`.\n\nAkan tetapi terdapat dua batasan:\n\n1. Referensinya tidak bisa berputar (seperti lingkaran atau perulangan tak terhingga). Javascript akan mengembalikan error jika kita mencoba untuk membuat `__proto__` berputar.\n2. Nilai dari `__proto__` bisa antara sebuah objek atau `null`. Tipe lainnya akan diabaikan.\n\nDan juga tentu saja: hanya terdapat satu `[[Prototype]]`. Sebuah objek tidak bisa mewarisi dari dua objek.\n\n\n```smart header=\"`__proto__` adalah asal usul getter/setter untuk `[[Prototype]]`\"\nBiasanya kesalan *developer* pemula adalah tidak mengetahui perbedaan antara keduanya.\n\nPerlu diingat bahwa `__proto__` *tidak sama* dengan properti internal `[[Prototype]]`. Itu hanyalah *getter/setter* untuk `[[Prototype]]`. Nanti kita akan melihat situasi dimana hal itu akan digunakan, untuk sekarang kita hanya perlu tahu, kita akan terus bangun pemahaman kita tentang Javascript.\n\nProperti `__proto__` sedikit ketinggalan jaman. Properti tersebut ada karena alasan lama, pada Javascript terbaru merekomendasikan kita untuk menggunakan fungsi `Object.getPrototypeOf/Object.setPrototypeOf` daripada *prototype* get/set. Kita akan belajar tentang fungsi ini nanti.\n\nDari spesifikasinya, `__proto__` telah didukung oleh banyak *browser*. Faktanya, seluruh lingkungan termasuk dibagian *server* juga mendukung `__proto__`, jadi kita aman untuk menggunakannya.\n\nKarena notasi `__proto__` sedikit lebih jelas, kita akan menggunakannya didalam contoh.\n```\n\n## Menulis tanpa menggunakan *prototype*\n\n*Prototype* hanya digunakan untuk membaca properti.\n\nOperasi menulis / menghapus bekerja secara langsung dengan objeknya.\n\nDidalam contoh dibawah, kita memasukan metode `walk` kedalam `rabbit`:\n\n```js run\nlet animal = {\n eats: true,\n walk() {\n /* metode ini tidak akan digunakan oleh rabbit */\n }\n};\n\nlet rabbit = {\n __proto__: animal\n};\n\n*!*\nrabbit.walk = function() {\n alert(\"Rabbit! Bounce-bounce!\");\n};\n*/!*\n\nrabbit.walk(); // Rabbit! Bounce-bounce!\n```\n\nMulai sekarang, pemanggilan `rabbit.walk()` akan menemukan metodenya secara langsung didalam objek dan langsung dieksekusi tanpa menggunakan *prototype*:\n\n![](proto-animal-rabbit-walk-2.svg)\n\nProperti pengakses adalah pengecualian, sebagaimana memasukan nilai dipegang oleh fungsi *setter*. Jadi menulis properti seperti itu sebenarnya sama dengan memanggil sebuah fungsi.\n\nUntuk alasan itu `admin.fullName` akan bekerja dengan benar pada contoh dibawah:\n\n```js run\nlet user = {\n name: \"John\",\n surname: \"Smith\",\n\n set fullName(value) {\n [this.name, this.surname] = value.split(\" \");\n },\n\n get fullName() {\n return `${this.name} ${this.surname}`;\n }\n};\n\nlet admin = {\n __proto__: user,\n isAdmin: true\n};\n\nalert(admin.fullName); // John Smith (*)\n\n// memicu setter!\nadmin.fullName = \"Alice Cooper\"; // (**)\n\nalert(admin.fullName); // Alice Cooper, state dari admin diubah\nalert(user.fullName); // John Smith, state dari user dilindungi / *protected*\n```\n\nDisini pada baris `(*)` properti `admin.fullName` memiliki *getter* didalam prototype `user`, jadi itu akan dipanggil. Pada baris `(**)` properti memiliki *setter* didalam *prototype*, jadi itu dipanggil.\n\n## Nilai dari \"this\"\n\nSebuah pertanyaan menarik mungkin muncul didalam contoh diatas: apa nilai dari `this` didalam `set fullName(value)`? Dimanakah properti dari `this.name` dan `this.surname` ditulis: kedalam `user` atau `admin`?\n\nJawabannya sederhana: `this` sama sekali tidak terkena efek oleh *prototype*.\n\n**Tidak peduli dimana metodenya ditemukan: didalam objek atau didalam *prototype*nya. Dalam pemanggilan metode, `this` adalah objeknya sebelum titik.**\n\nJadi, pemanggilan *setter* `admin.fullName=` menggunakan `admin` sebagai `this` dan bukan `user`.\n\nItu sebenarnya adalah sebuah hal yang sangat penting, karena kita mungkin memiliki objek yang besar dengan banyak metode, dan memiliki objek yang mewarisinya. Dan ketika pewarisan objek berjalan metode yang diwariskan, mereka hanya akan memodifikasi bagian / *state* mereka sendiri, bukan bagian dari objek besarnya.\n\nContoh, disini `animal` merepresentasikan sebuah \"method storage (penyimpanan metode)\", dan `rabbit` menggunakannya.\n\nPemanggilan `rabbit.sleep()` menyetel `this.isSleeping` didalam objek `rabbit`:\n\n```js run\n// animal memiliki metode\nlet animal = {\n walk() {\n if (!this.isSleeping) {\n alert(`I walk`);\n }\n },\n sleep() {\n this.isSleeping = true;\n }\n};\n\nlet rabbit = {\n name: \"White Rabbit\",\n __proto__: animal\n};\n\n// memodifikasi rabbit.isSleeping\nrabbit.sleep();\n\nalert(rabbit.isSleeping); // true\nalert(animal.isSleeping); // undefined (no such property in the prototype / tidak ada property seperti itu didalam prototype)\n```\n\nHasilnya:\n\n![](proto-animal-rabbit-walk-3.svg)\n\nJika kita memiliki objek lainnya, seperti `bird`, `snake`, dll., Mewarisi dari `animal`, mereka juga akan memiliki kases kepada metode dari `animal`. Tapi `this` didalam setiap pemanggilan metode adalah objeknya itu sendiri, mengevaluasi pada saat pemanggilan (sebelum titik), bukan `animal`. Jadi ketika kita menulis data kedalam `this`, itu akan tersimpan kedalam objeknya.\n\nSebagai hasilnya, metodenya dibagi bersama, tapi *state* dari objeknya tidak.\n\n## Perulangan for..in\n\nPerulangan `for..in` mengiterasi properti yang diwariskan juga.\n\nContoh: \n\n```js run\nlet animal = {\n eats: true\n};\n\nlet rabbit = {\n jumps: true,\n __proto__: animal\n};\n\n*!*\n// Object.keys hanya mengembalikan kunci / keys miliknya sendiri\nalert(Object.keys(rabbit)); // jumps\n*/!*\n\n*!*\n// perulangan for..in mengiterasi kunci milik sendiri dan kunci yang diwariskan\nfor(let prop in rabbit) alert(prop); // jumps, lalu eats\n*/!*\n```\n\nJika itu bukanlah hal yang kita inginkanm dan kita ingin untuk mengecualikan properti warisan, terdapat metode bawaan [obj.hasOwnProperty(key)](mdn:js/Object/hasOwnProperty): yang mengembalikan `true` jika `obj` memiliki properti bernama `key` (bukan properti warisan).\n\nJadi kita bisa memisahkan properti warisan (atau melakukan sesuatu dengan properti warisan itu):\n\n```js run\nlet animal = {\n eats: true\n};\n\nlet rabbit = {\n jumps: true,\n __proto__: animal\n};\n\nfor(let prop in rabbit) {\n let isOwn = rabbit.hasOwnProperty(prop);\n\n if (isOwn) {\n alert(`Our: ${prop}`); // Our: jumps\n } else {\n alert(`Inherited: ${prop}`); // Inherited: eats\n }\n}\n```\n\nDisini kita memiliki rantai pewarisan: `rabbit` mewarisi dari `animal`, pewarisan itu dari `Object.prototype` (karena `animal` adalah objek literal `{...}`, jadi itu terjadi secara otomatis), dan lalu `null` diatasnya:\n\n![](rabbit-animal-object.svg)\n\nCatat bahwa ada satu hal lucu. darimanakah `rabbit.hasOwnProperty` datang? Kita tidak membuatnya. Lihat rantainya dan kita bisa melihat metodenya disediakan oleh `Object.prototype.hasOwnProperty`. Dengan kata lain, itu diwariskan.\n\n...Tapi kenapa `hasOwnProperty` tidak muncul didalam perulangan `for..in` seperti `eats` dan `jumps`, jika `for..in` adalah properti yang diwariskan?\n\nJawabanya sederhana: properti tersebut tidak dapat terhitung(*enumerable*). Sama seperti properti lainnya dari `Object.prototype`, yang mana memiliki tanda `enumerable:false`. Dan `for..in` hanya akan menampilkan properti yang dapat dihitung (*enumerable*). Itulah kenapa properti `Object.prototype`tidak terlihat.\n\n```smart header=\"Hampir semua metode key/value mengabaikan properti warisan\"\nHampir semua metode key/value, seperti `Object.keys`, `Object.values` dan lainnya mengabaikan properti warisan.\n\nMereka hanya akan beroperasi pada objeknya sendiri. Properti dari *prototype* *tidak* akan dihitung.\n```\n\n## Ringkasan\n\n- Dalam Javascript, seluruh objek memiliki `[[Prototype]]` tersembunyi yang mana bisa objek atau `null`.\n- Kita bisa menggunakan `obj.__proto__` untuk mengaksesnya (selain getter/setter, terdapat cara lain, yang mana akan dibahas nanti).\n- Objek yang diferensi oleh `[[Prototype]]` dipanggil dengan sebuah \"prototype\".\n- Jika kita ingin membaca sebuah properti dari `obj` atau memanggil metode, dan ternyata tidak ada maka Javascript akan mencoba mencari didalam *prototype*nya\n- Operasi menulis/menghapus langsung bekerja didalam objeknya, mereka tidak menggunakan *prototype* (asumsikan propertinya adalah data, bukan sebuah *setter*).\n- Jika kita memanggil `obj.method()`, dan `method`nya diambil dari prototype, `this` akan mereferensi `obj`. Jadi metode selalu bekerja dengan objek yang sedang digunakannya bahkan jika objeknya adalah hasil pewarisan.\n- Perulangan `for..in` mengiterasi properti asli dan properti warisan. Semua metode key/value hanya akan bekerja pada objeknya sendiri.\n" }, { "path": "1-js/08-prototypes/02-function-prototype/1-changing-prototype/solution.md", "content": "\nJawaban:\n\n1. `true`. \n\n Memasukan ke `Rabbit.prototype` menyetel `[[Prototype]]` untuk objek baru, tapi itu tidak memberikan efek pada yang sudah ada.\n\n2. `false`. \n\n Objek yang dimasukan dengan menggunakan referensi. Objek dari `Rabbit.prototype` bukanlah di duplikasi, itu masih tetap objek tunggal yang direferensikan dari `Rabbit.prototype` dan dari `[[Prototype]]` dari `rabbit`.\n\n Jadi ketika kita mengubah kontennya melalui satu referensi, itu masih terlihat melalui yang lainnya.\n\n3. `true`.\n\n Semua operasi `delete` diterapkan langsung ke objeknya. Disini `delete rabbit.eats` mencoba untuk menghapus properti `eats` dari `rabbit`, tapi itu tidak memilikinya. Jadi operasinya tidak akan menghasilkan efek apapun.\n\n4. `undefined`.\n\n Properti `eats` dihapus dari *prototype*, itu tidak akan ada lagi.\n" }, { "path": "1-js/08-prototypes/02-function-prototype/1-changing-prototype/task.md", "content": "nilai: 5\n\n---\n\n# Merubah \"prototype\"\n\nDi kode dibawah kita membuat `new Rabbit`, dan mencoba memodifikasi prototypenya.\n\nPada awalnya kita memiliki kode ini:\n\n```js run\nfunction Rabbit() {}\nRabbit.prototype = {\n eats: true\n};\n\nlet rabbit = new Rabbit();\n\nalert( rabbit.eats ); // true\n```\n\n\n1. Kita menambah satu string (ditekankan). What will `alert` show now?\n\n ```js\n function Rabbit() {}\n Rabbit.prototype = {\n eats: true\n };\n\n let rabbit = new Rabbit();\n\n *!*\n Rabbit.prototype = {};\n */!*\n\n alert( rabbit.eats ); // ?\n ```\n\n2. ...Dan jika kodenya seperti ini (diganti satu baris)?\n\n ```js\n function Rabbit() {}\n Rabbit.prototype = {\n eats: true\n };\n\n let rabbit = new Rabbit();\n\n *!*\n Rabbit.prototype.eats = false;\n */!*\n\n alert( rabbit.eats ); // ?\n ```\n\n3. Dan seperti ini (diganti satu baris)?\n\n ```js\n function Rabbit() {}\n Rabbit.prototype = {\n eats: true\n };\n\n let rabbit = new Rabbit();\n\n *!*\n delete rabbit.eats;\n */!*\n\n alert( rabbit.eats ); // ?\n ```\n\n4. varian terakhir:\n\n ```js\n function Rabbit() {}\n Rabbit.prototype = {\n eats: true\n };\n\n let rabbit = new Rabbit();\n\n *!*\n delete Rabbit.prototype.eats;\n */!*\n\n alert( rabbit.eats ); // ?\n ```\n" }, { "path": "1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md", "content": "Kita bisa menggunakan pendekatan jika kita yakin properti `\"constructor\"` memiliki nilai yang benar.\n\nContoh, kita tidak ingin menyentuh `\"prototype\"` bawaan, maka kode ini akan berjalan dengan semestinya:\n\n```js run\nfunction User(name) {\n this.name = name;\n}\n\nlet user = new User('John');\nlet user2 = new user.constructor('Pete');\n\nalert( user2.name ); // Pete (bekerja!)\n```\n\nKode diatas bekerja karena `User.prototype.constructor == User`.\n\nTapi jika seseorang, menimpah `User.prototype` dan lupa untuk membuat ulang `constructor` untuk `User`, maka akan membuat kegagalan.\n\nContoh:\n\n```js run\nfunction User(name) {\n this.name = name;\n}\n*!*\nUser.prototype = {}; // (*)\n*/!*\n\nlet user = new User('John');\nlet user2 = new user.constructor('Pete');\n\nalert( user2.name ); // undefined\n```\n\nKenapa `user2.name` menghasilan `undefined`?\n\nIni bagaimana `new user.constructor('Pete')` bekerja:\n\n1. Pertama, mencari `constructor` di `user`. Tidak ada.\n2. Kemudian mengikuti rantai prototipe. Prototipe `user` adalah `User.prototype`, dan juga tidak memiliki `constructor` (karena kita \"lupa\" untuk menyetelnya dengan benar!).\n3. Lebih jauh ke atas rantai, `User.prototype` adalah objek biasa, prototipenya adalah `Object.prototype` bawaan.\n4. Terakhir, untuk `Object.prototype` bawaan, ada `Object.prototype.constructor == Object` bawaan. Jadi itu digunakan.\n\nAkhirnya, pada akhirnya, kita memiliki `let user2 = new Object('Pete')`.\n\nMungkin, bukan itu yang kita inginkan. Kami ingin membuat `Pengguna baru`, bukan `Objek baru`. Itulah hasil dari `konstruktor` yang hilang.\n\n(Untuk berjaga-jaga jika Anda penasaran, panggilan `new Object(...)` mengubah argumennya menjadi objek. Itu hal teoretis, dalam praktiknya tidak ada yang memanggil `Objek baru` dengan nilai, dan umumnya kami tidak' t gunakan `objek baru` untuk membuat objek sama sekali).\n" }, { "path": "1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/task.md", "content": "nilai: 5\n\n---\n\n# Buat sebuah objek dengan konstruktor yang sama\n\nBayangkan, kita memiliki objek yang berubah-ubah, dibuat dengan menggunakan fungsi konstruktor -- kita tidak tahu yang mana, tapi kita ingin membuat sebuah objek menggunakannya.\n\nBisakah kita melakukannya?\n\n```js\nlet obj2 = new obj.constructor();\n```\n\nBeri sebuah contoh dari menggunakan fungsi konstruktor untuk `obj` yang mana membiarkan kode seperti itu bekerja. Dan sebuah contoh yang mana membuat kodenya menjadi tidak bekerja semestinya.\n" }, { "path": "1-js/08-prototypes/02-function-prototype/article.md", "content": "# F.prototype\n\nIngat ketika objek baru bisa dibuat dengan menggunakan fungsi konstruktor seperti `new F()`.\n\nJika `F.prototype` adalah sebuah objek, maka operator `new` menggunakannya untuk menyetel `[[Prototype]]` untuk objek barunya.\n\n```smart\nJavascript memiliki pewarisan *prototype* dari awal. Itu adalah salah satu fitur utama dari bahasanya.\n\nTapi dimasa lalu, hal itu tidak memiliki akses langsung. Hal yang dapat diandalkan adalah properti `\"prototype\"` dari fungsi konstruktor, yang akan dijelaskan didalam bab ini. Jadi masih banyak skrip yang masih menggunakannya.\n```\n\nCatat bahwa `F.prototype` disini berarti properti biasa yang bernama `\"prototype\"` didalam `F`. Terdengar seperti istilah \"prototype\", tapi disini kita menunjuk properti biasa dengan nama itu.\n\nContohnya:\n\n```js run\nlet animal = {\n eats: true\n};\n\nfunction Rabbit(name) {\n this.name = name;\n}\n\n*!*\nRabbit.prototype = animal;\n*/!*\n\nlet rabbit = new Rabbit(\"White Rabbit\"); // rabbit.__proto__ == animal\n\nalert( rabbit.eats ); // true\n```\n\nMenyetel `Rabbit.prototype = animal` secara literal kita mengartikan: \"Ketika sebuah `new Rabbit` dibuat, itu akan memasukan `[[Prototype]]`nya ke `animal`\".\n\nHasilnya akan seperti gambar dibawah:\n\n![](proto-constructor-animal-rabbit.svg)\n\nDalam gambar, `\"prototype\"` adalah panah *horizontal*, menandakan properti *regular*, dan `[[Prototype]]` adalah panah vertikal, menandakan pewarisan `rabbit` dari `animal`.\n\n```smart header=\"`F.prototype` hanya digunakan pada `new F`\"\nProperti `F.prototype` hanya digunakan ketika `new F` dipanggil, itu memasukan `[[Prototype]]` dari objek barunya.\n\nJika, setelah pembuatan, properti `F.prototype` berubah (`F.prototype = `), maka objek baru yang dibuat menggunakan `new F` akan memiliki objek lain sebagai `[[Prototype]]`, tapi objek yang sudah ada akan menyimpan yang lama.\n```\n\n## F.prototype bawaan, properti konstruktor\n\nSetiap fungsi memiliki properti `\"prototype\"` bahkan jika kita tidak memberikannya.\n\n`\"prototype\"` bawaan adalah sebuah objek dengan properti `constructor` yang menunjuk balik pada fungsinya sendiri.\n\nSeperti:\n\n```js\nfunction Rabbit() {}\n\n/* default prototype\nRabbit.prototype = { constructor: Rabbit };\n*/\n```\n\n![](function-prototype-constructor.svg)\n\nKita bisa periksa:\n\n```js run\nfunction Rabbit() {}\n// secara *default*:\n// Rabbit.prototype = { constructor: Rabbit }\n\nalert( Rabbit.prototype.constructor == Rabbit ); // true\n```\n\nSecara teknis, jika kita tidak melakukan apapun, properti `constructor` akan tersedia untuk semua \"rabbits\" melalui `[[Prototype]]`:\n\n```js run\nfunction Rabbit() {}\n// secara default:\n// Rabbit.prototype = { constructor: Rabbit }\n\nlet rabbit = new Rabbit(); // mewarisi dari {constructor: Rabbit}\n\nalert(rabbit.constructor == Rabbit); // true (from prototype)\n```\n\n![](rabbit-prototype-constructor.svg)\n\nKita bisa menggunakan properti `constructor` untuk membuat objek baru menggunakan konstruktor yang sama seperti yang sudah ada.\n\nSeperti:\n\n```js run\nfunction Rabbit(name) {\n this.name = name;\n alert(name);\n}\n\nlet rabbit = new Rabbit(\"White Rabbit\");\n\n*!*\nlet rabbit2 = new rabbit.constructor(\"Black Rabbit\");\n*/!*\n```\n\nHal itu akan mudak ketika kita memiliki sebuah objek, tidak tahu konstruktor yang mana yang menggunakannya (mis. ketika datang dari *library* pihak ketiga), dan kita butuh membuat satu lagi dengan bentuk yang sama.\n\nTapi mungkin hal yang paling penting tentang `\"constructor\"` adalah...\n\n**...Javascript sendiri tidak yakin dengan nilai `\"constructor\"`.**\n\nYa, terdapat nilai untuk fungsi bawaan `\"prototype\"`, tapi hanya itu. Apa yang terjadi setelahnya -- semuanya bergantung pada kita.\n\nKhususnya, jika kita mengganti seluruh prototype bawaannya, maka disana tidak akan terdapat `\"constructor\"`.\n\nContoh:\n\n```js run\nfunction Rabbit() {}\nRabbit.prototype = {\n jumps: true\n};\n\nlet rabbit = new Rabbit();\n*!*\nalert(rabbit.constructor === Rabbit); // false\n*/!*\n```\n\nJadi, untuk menyimpan `\"constructor\"` dengan benar kita bisa memilih untuk menambahkan/menghapus properti menjadi `\"prototype\"` bawaan daripada menimpahnya dengan yang baru:\n\n```js\nfunction Rabbit() {}\n\n// Tidak menimpah Rabbit.prototype selurunya\n// hanya menambahkan\nRabbit.prototype.jumps = true\n// Rabbit.prototype.constructor bawaan diamankan\n```\n\nAtau, alternatifnya, membuat ulang properti `constructor` secara manual:\n\n```js\nRabbit.prototype = {\n jumps: true,\n*!*\n constructor: Rabbit\n*/!*\n};\n\n// sekarang konstruktor tidak berubah, karena kita menambahkan yang baru\n```\n\n\n## Ringkasan\n\nDidalam chapter ini kita secara jelas mendeskripsikan cara untuk menyetel `[[Prototype]]` untuk objek yang dibuat dengan menggunakan fungsi konstruktor. Nanti kita akan melihat lebih banyak alur *programming* lanjutan yang akan menggunakannya.\n\nSemuanya cukup simpel, hanya tinggal mengingat beberapa langkah untuk membuat lebih jelas:\n\n- Properti `F.prototype` (jangan keliru tentang `[[Prototype]]`) menyetel `[[Prototype]]` dari objek baru ketika `new F()` dipanggil.\n- Nilai dari `F.prototype` harusnya antara sebuah objek atau `null`: nilai lainnya tidak akan bekerja.\n- Properti `\"prototype\"` hanya memiliki efek spesial ketika menyetel fungsi konstruktor, dan dipanggil dengan `new`.\n\nDalam objek biasa `prototype` tidaklah spesial:\n```js\nlet user = {\n name: \"John\",\n prototype: \"Bla-bla\" // tidak ada yang spesial disini\n};\n```\n\nSecara teknis semua fungsi memiliki `F.prototype = { constructor: F }`, jadi kita bisa mendapatkan konstruktor dari sebuah objek dengan mengakses properti `\"constructor\"` miliknya sendiri.\n" }, { "path": "1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/solution.md", "content": "\n\n```js run\nFunction.prototype.defer = function(ms) {\n setTimeout(this, ms);\n};\n\nfunction f() {\n alert(\"Hello!\");\n}\n\nf.defer(1000); // menampilkan \"Hello!\" setelah 1 detik\n```\n" }, { "path": "1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/task.md", "content": "nilai: 5\n\n---\n\n# Menambahkan metode \"f.defer(ms)\" ke fungsi\n\nTambahkan kepada *prototype* dari semua fungsi metode `defer(ms)`, yang menjalankan fungsinya setelah milidetik `ms`.\n\nSetelah kamu melakukannya, kodenya harus berjalan:\n\n```js\nfunction f() {\n alert(\"Hello!\");\n}\n\nf.defer(1000); // menampilkan \"Hello!\" setelah 1 detik\n```\n" }, { "path": "1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/solution.md", "content": "\n\n```js run\nFunction.prototype.defer = function(ms) {\n let f = this;\n return function(...args) {\n setTimeout(() => f.apply(this, args), ms);\n }\n};\n\n// check it\nfunction f(a, b) {\n alert( a + b );\n}\n\nf.defer(1000)(1, 2); // menampilkan 3 setelah 1 detik\n```\n\nIngatlah: kita menggunakan `this` didalam `f.apply` untuk membuat dekorasi kita bekerja untuk metode objek.\n\nJadi jika pembungkus fungsinya dipanggil sebagai metode objek, maka `this` diberikan kepada metode asli `f`.\n\n```js run\nFunction.prototype.defer = function(ms) {\n let f = this;\n return function(...args) {\n setTimeout(() => f.apply(this, args), ms);\n }\n};\n\nlet user = {\n name: \"John\",\n sayHi() {\n alert(this.name);\n }\n}\n\nuser.sayHi = user.sayHi.defer(1000);\n\nuser.sayHi();\n```\n" }, { "path": "1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/task.md", "content": "nilai: 4\n\n---\n\n# Menambah dekorasi \"defer()\" ke fungsi.\n\nTambahkan prototype dari semua fungsi metode` defer(ms)`, yang mengembalikan pembungkus, menunda pemanggilan dengan `ms` milidetik.\n\nContoh:\n\n```js\nfunction f(a, b) {\n alert( a + b );\n}\n\nf.defer(1000)(1, 2); // tampilkan 3 setelah 1 detik\n```\n\nPerhatikan bahwa argumennya harus diberikan ke fungsi aslinya.\n" }, { "path": "1-js/08-prototypes/03-native-prototypes/article.md", "content": "# *Prototype* asli\n\nProperti `\"prototype\"` adalah properti yang banyak digunakan oleh Javascript itu sendiri. Semua konstruktor fungsi menggunakannya.\n\nPertama kita akan melihat lebih lengkapnya dan bagaimana cara menggunakannya untuk menambah kemampuan dari objek-objek bawaan.\n\n## Object.prototype\n\nkatakan kita mengeluarkan sebuah objek kosong:\n\n```js run\nlet obj = {};\nalert( obj ); // \"[object Object]\" ?\n```\n\nDimanakah kode yang menghasilkan *string* `\"[object Object]\"`? Itu adalah metode bawaan `toString`, tapi diamanakah itu berara? `obj` tidak berisi apapun!\n\n...Tapi notasi pendek dari `obj = {}` sama seperti `obj = new Object()`, dimana `Object` adalah fungsi konstruktor objek bawaan, dengan properti `prototype`nya sendiri yang mereferensi sebuah objek besar `toString` dan metode lainnya.\n\nInilah yang terjadi:\n\n![](object-prototype.svg)\n\nKetika `new Object()` dipanggil (atau sebuah objek literal `{...}` dibuat), `[[Prototype]]`nya disetel ke `Object.prototype` mengikuti aturan yang telah kita bahas di bab sebelumnya:\n\n![](object-prototype-1.svg)\n\nJadi ketika `obj.toString()` dipanggil metodenya dibawa dari `Object.prototype`.\n\nKita bisa periksa seperti ini:\n\n```js run\nlet obj = {};\n\nalert(obj.__proto__ === Object.prototype); // true\n\nalert(obj.toString === obj.__proto__.toString); //true\nalert(obj.toString === Object.prototype.toString); //true\n```\n\nIngat bahwa disana sudah tidak ada lagi `[[Prototype]]` didalam rantai diatas `Object.prototype`:\n\n```js run\nalert(Object.prototype.__proto__); // null\n```\n\n## *prototype* bawaan lainnya\n\nObjek bawaan lainnya seperti `Array`, `Date`, `Function` dan lainnya juga tetap menyimpan metode didalam *prototype*.\n\nContoh, ketika kita membuat sebuah *array* `[1, 2, 3]`, konstruktor bawaan `new Array()` digunakan secara internal. Jadi `Array.prototype` menjadi *prototype* miliknya dan menyediakan metode-metode. Itu akan membuatnya menjadi efisien dalam penggunaan memori.\n\nSebagaimana spesifikasinya, semua *prototype* bawaan memiliki `Object.prototype` diatasnya. Itulah kenapa beberapa orang berkata bahwa \"semuanya diwarisi dari objek\".\n\nIni adalah gambar keseluruhan (memasangkan 3 fungsi):\n\n![](native-prototypes-classes.svg)\n\nSekarang kita cek *prototype*nya secara manual:\n\n```js run\nlet arr = [1, 2, 3];\n\n// apakah diwarisi dari Array.prototype?\nalert( arr.__proto__ === Array.prototype ); // true\n\n// maka dari Object.prototype?\nalert( arr.__proto__.__proto__ === Object.prototype ); // true\n\n// dan null diatasnya.\nalert( arr.__proto__.__proto__.__proto__ ); // null\n```\n\nBeberapa metode didalam *prototype* mungkin tumpang tindih, contoh, `Array.prototype` memiliki `toString`nya sendiri yang menyusun elemen yang dipisahkan dengan koma:\n\n```js run\nlet arr = [1, 2, 3]\nalert(arr); // 1,2,3 <-- hasil dari Array.prototype.toString\n```\n\nSeperti yang telah kita lihat, `Object.prototype` memiliki `toString` juga, tapi `Array.prototype` lebih dekat dengan rantainya, jadi varian dari *array* mungkin akan digunakan.\n\n\n![](native-prototypes-array-tostring.svg)\n\n\n\nDialam alat *browser* seperti *Chrome Developer Conolse* juga menunjukan pewarisannya (`console.dir` mungkin butuh untuk digunakan seperti objek bawaan):\n\n![](console_dir_array.png)\n\nObjek bawaan lainnya juga mungkin bekerja mirip seperti itu. Bahkan fungsi -- mereka adalah objek dari konstruktor bawaan `Function`, dan metode mereka (`call`/`apply` dan lainnya) juga diambil dari `Function.prototype`. Fungsi juga memiliki `toString` mereka masing-masing.\n\n```js run\nfunction f() {}\n\nalert(f.__proto__ == Function.prototype); // true\nalert(f.__proto__.__proto__ == Object.prototype); // true, warisan dari objek\n```\n\n## Primitif-primitif\n\nHal yang paling rumit terjadi dengan *string*, *number* dan *boolean*.\n\nSeperti yang kita ingat, mereka bukanlah objek. Tapi jika kita mencoba untuk mengakses propertinya, objek pembungkus sementara menggunakan konstruktor bawaan `String`, `Number` dan `Boolean`. Mereka menyediakan metodenya dan menghilang.\n\nObjek-objek ini dibuat tak terlihat untuk kita dan kebanyakan mesin mengoptimalkan mereka, tapi spesifikasinya menjelaskannya juga seperti itu. Metode dari objek ini juga tinggal didalam *prototype*, tersedia sebagai `String.prototype`, `Number.prototype` dan `Boolean.prototype`.\n\n```warn header=\"Nilai `null` dan `undefined` tidak memiliki objek pembungkus\"\nNilai spesial `null` dan `undefined` memiliki pendiriannya sendiri. Mereka tidak memiliki objek pembungkus, jadi metode dan properti tidak tersedia untuk mereka. Dan juga tidak terdapat prototypenya.\n```\n\n## Changing native prototypes [#native-prototype-change]\n\nPrototipe asli bisa dimodifikasi. Contoh, jika kita menambahkan metode kepada `String.prototype`, itu akan menjadi tersedia untuk selurung *string*.\n\n```js run\nString.prototype.show = function() {\n alert(this);\n};\n\n\"BOOM!\".show(); // BOOM!\n```\n\nSelama proses pembangunan, kita mungkin memiliki ide untuk metode bawaan baru yang kita ingin punya, dan kita mungkin tergoda untuk menambahkannya sebagai *prototype* asli. Tapi itu sebenarnya bukan ide yang bagus.\n\n```warn\nPrototype terlihat di global, jadi akan mudah membuat konflik. Jika dua library menambahkan sebuah metode `String`prototype.show`, maka salah satu dari mereka akan menimpah yang lainnya.\n\nJadi, umumnya, memodifikasi prototype asli bisa dikatakan bukan ide bagus.\n```\n\n**Didalam *programming* modern, terdapat satu kasus dimana memodifikasi *prototype* asli dapat diterima. Disebut dengan *polyfilling*.**\n\n*Polyfilling* adalah sebuah istilah untuk membuat sebuah metode pengganti yang ada didalam spesifikasi Javascript, tapi itu tidak didukung oleh mesin Javascript tertentu.\n\nKita mungkin mengimplementasi manual dan mengisi prototype bawaan dengan itu.\n\nContoh:\n\n```js run\nif (!String.prototype.repeat) { // Jika tidak terdapat metode\n // tambahkan kedalam prototype\n\n String.prototype.repeat = function(n) {\n // ulangi stringnya n kali\n\n // sebenarnya, kodenya haruslah lebih rumit dari itu\n // (algoritma lengkapnya ada didalam spesifikasinya)\n // bahkan sebuah polyfill tidak sempurna kadang bisa dikatakan cukup bagus\n return new Array(n + 1).join(this);\n };\n}\n\nalert( \"La\".repeat(3) ); // LaLaLa\n```\n\n\n## meminjam dari *prototype*\n\nDidalam bab kita berbicara tentang peminjaman metode.\n\nItulah ketika kita mengambil metode dari satu objek dan menyalinnya ke objek lain.\n\nBeberapa metode dari *prototype* asli sering dipinjam.\n\nContoh, jika kita membuat objek yang mirip array, kita mungkin ingin menyalin beberapa metode `Array` darinya.\n\nE.g.\n\n```js run\nlet obj = {\n 0: \"Hello\",\n 1: \"world!\",\n length: 2,\n};\n\n*!*\nobj.join = Array.prototype.join;\n*/!*\n\nalert( obj.join(',') ); // Hello,world!\n```\n\nContoh diatas bekerja karena algoritma internal bawaan `join` yang memperhatikan tentang indeks yang benar dan `length` dari properti. Itu tidak akan memeriksa apakah objeknya adalah array. Beberapa metode bawaan memang seperti itu.\n\nKemungkinan lainnya adalah pewarisan dari `obj.__proto__` ke `Array.prototype`, jadi seluruh metode `Array` secara otomatis tersedia didalam `obj`.\n\nTapi itu menjadi tidak mungkin jika `obj` sudah mewarisi dari objek lainnya. Ingat, kita hanya bisa mewarisi dari satu objek pada satu waktu.\n\nMeminjam metode sebenarnya cukup fleksibel, hal itu memperbolehkan kita untuk mencampur fungsionalitas dari objek yang berbeda-beda jika dibutuhkan.\n\n## Ringkasan\n\n- Seluruh objek bawaan mengikuti alur yang sama:\n - Metode disimpan didalam prototype (`Array.prototype`, `Object.prototype`, `Date.prototype`, etc.)\n - Objeknya sendiri hanya menyimpan data (item array, properti objek, tanggal)\n- Prototype Asli menyimpan metode didalam prototype dari objek pembungkus: `Number.prototype`, `String.prototype` dan `Boolean.prototype`. Only `undefined` dan `null` tidak memiliki objek pembungkus.\n- *Prototype* bawaan bisa dimodifikasi atau diisi ulang dengan metode baru. Tapi tidak direkomendasikan untuk mengubahnya. Hal yang diperbolehkan dalam beberapa kasus mungkun ketika kita menambahkan peraturan baru, tapi itu belum sepenuhnya didukung oleh mesin Javascript.\n" }, { "path": "1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md", "content": "\nPemanggilan metode bisa mengambil semua kunci yang terhitung menggunakan `Object.keys` dan mengeluarkan daftarnya.\n\nUntuk membuat `toString` tidak bisa dihitung, kita bisa mendefinisikannya menggunakan deskriptor properti. Sintaks dari `Object.create` membolehkan kita untuk menyediakan sebuah objek dengan deskriptor properti sebagai argumen kedua.\n\n```js run\n*!*\nlet dictionary = Object.create(null, {\n toString: { // definisikan properti tostring\n value() { // nilainya adalah fungsi\n return Object.keys(this).join();\n }\n }\n});\n*/!*\n\ndictionary.apple = \"Apple\";\ndictionary.__proto__ = \"test\";\n\n// apple dan __proto berada didalam perulangan\nfor(let key in dictionary) {\n alert(key); // \"apple\", lalu \"__proto__\"\n} \n\n// properti dari daftar yang dipisahkan dengan koma oleh toString\nalert(dictionary); // \"apple,__proto__\"\n```\n\nKetika kita membuat sebuah properti menggunakan deskriptor, tandanya akan menjadi `false` secara bawaan. Jadi kode diatas, `dictionary.toString` tidak bisa dihitung.\n\nLihat bab [](info:property-descriptors) untuk review.\n" }, { "path": "1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/task.md", "content": "nilai: 5\n\n---\n\n# Add toString to the dictionary\n\nTerdapat sebuah objek `dictionary`, dibuat sebagai `Object.create(null)`, untuk menyimpan pasangan `key/value`.\n\nTambahkan metode `dictionary.toString()` kedalamnya, yang harus mengembalikan daftar yang dibatasi dengan koma. `toString` milikmu haruslah tidak tampil didalam `for..in` dalam objeknya.\n\nIni adalah contohnya:\n\n```js\nlet dictionary = Object.create(null);\n\n*!*\n// metode yang ditambahkan dictionary.toString\n*/!*\n\n// tambahkan beberapa data\ndictionary.apple = \"Apple\";\ndictionary.__proto__ = \"test\"; // __proto__ adalah kunci properti biasa disini\n\n// hanya apple dan __proto__ yang berada di perulangan\nfor(let key in dictionary) {\n alert(key); // \"apple\", lalu \"__proto__\"\n} \n\n// toString milikmu\nalert(dictionary); // \"apple,__proto__\"\n```\n" }, { "path": "1-js/08-prototypes/04-prototype-methods/3-compare-calls/solution.md", "content": "\nPanggilan pertama memiliki `this == rabbit`, yang lainnya memiliki `this` sama dengan `Rabbit.prototype`, karena itu sebenarnya adalah objek sebelum titiknya.\n\nJadi hanya panggilan pertama yang menampilkan `Rabbit`, lainnya menampilkan `undefined`:\n\n```js run\nfunction Rabbit(name) {\n this.name = name;\n}\nRabbit.prototype.sayHi = function() {\n alert( this.name );\n}\n\nlet rabbit = new Rabbit(\"Rabbit\");\n\nrabbit.sayHi(); // Rabbit\nRabbit.prototype.sayHi(); // undefined\nObject.getPrototypeOf(rabbit).sayHi(); // undefined\nrabbit.__proto__.sayHi(); // undefined\n```\n" }, { "path": "1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md", "content": "nilai: 5\n\n---\n\n# Perbedaan diantara pemanggilan\n\nKita buat sebuah objek `rabbit` baru:\n\n```js\nfunction Rabbit(name) {\n this.name = name;\n}\nRabbit.prototype.sayHi = function() {\n alert(this.name);\n};\n\nlet rabbit = new Rabbit(\"Rabbit\");\n```\n\nApakah panggilan-panggilan dibawah sama atau tidak?\n\n```js\nrabbit.sayHi();\nRabbit.prototype.sayHi();\nObject.getPrototypeOf(rabbit).sayHi();\nrabbit.__proto__.sayHi();\n```\n" }, { "path": "1-js/08-prototypes/04-prototype-methods/article.md", "content": "\n# Prototype methods, objects without __proto__\n\nIn the first chapter of this section, we mentioned that there are modern methods to setup a prototype.\n\nThe `__proto__` is considered outdated and somewhat deprecated (in browser-only part of the JavaScript standard).\n\nThe modern methods are:\n\n- [Object.create(proto, [descriptors])](mdn:js/Object/create) -- creates an empty object with given `proto` as `[[Prototype]]` and optional property descriptors.\n- [Object.getPrototypeOf(obj)](mdn:js/Object/getPrototypeOf) -- returns the `[[Prototype]]` of `obj`.\n- [Object.setPrototypeOf(obj, proto)](mdn:js/Object/setPrototypeOf) -- sets the `[[Prototype]]` of `obj` to `proto`.\n\nThese should be used instead of `__proto__`.\n\nFor instance:\n\n```js run\nlet animal = {\n eats: true\n};\n\n// create a new object with animal as a prototype\n*!*\nlet rabbit = Object.create(animal);\n*/!*\n\nalert(rabbit.eats); // true\n\n*!*\nalert(Object.getPrototypeOf(rabbit) === animal); // true\n*/!*\n\n*!*\nObject.setPrototypeOf(rabbit, {}); // change the prototype of rabbit to {}\n*/!*\n```\n\n`Object.create` has an optional second argument: property descriptors. We can provide additional properties to the new object there, like this:\n\n```js run\nlet animal = {\n eats: true\n};\n\nlet rabbit = Object.create(animal, {\n jumps: {\n value: true\n }\n});\n\nalert(rabbit.jumps); // true\n```\n\nThe descriptors are in the same format as described in the chapter .\n\nWe can use `Object.create` to perform an object cloning more powerful than copying properties in `for..in`:\n\n```js\nlet clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));\n```\n\nThis call makes a truly exact copy of `obj`, including all properties: enumerable and non-enumerable, data properties and setters/getters -- everything, and with the right `[[Prototype]]`.\n\n## Brief history\n\nIf we count all the ways to manage `[[Prototype]]`, there are a lot! Many ways to do the same thing!\n\nWhy?\n\nThat's for historical reasons.\n\n- The `\"prototype\"` property of a constructor function has worked since very ancient times.\n- Later, in the year 2012, `Object.create` appeared in the standard. It gave the ability to create objects with a given prototype, but did not provide the ability to get/set it. So browsers implemented the non-standard `__proto__` accessor that allowed the user to get/set a prototype at any time.\n- Later, in the year 2015, `Object.setPrototypeOf` and `Object.getPrototypeOf` were added to the standard, to perform the same functionality as `__proto__`. As `__proto__` was de-facto implemented everywhere, it was kind-of deprecated and made its way to the Annex B of the standard, that is: optional for non-browser environments.\n\nAs of now we have all these ways at our disposal.\n\nWhy was `__proto__` replaced by the functions `getPrototypeOf/setPrototypeOf`? That's an interesting question, requiring us to understand why `__proto__` is bad. Read on to get the answer.\n\n```warn header=\"Don't change `[[Prototype]]` on existing objects if speed matters\"\nTechnically, we can get/set `[[Prototype]]` at any time. But usually we only set it once at the object creation time and don't modify it anymore: `rabbit` inherits from `animal`, and that is not going to change.\n\nAnd JavaScript engines are highly optimized for this. Changing a prototype \"on-the-fly\" with `Object.setPrototypeOf` or `obj.__proto__=` is a very slow operation as it breaks internal optimizations for object property access operations. So avoid it unless you know what you're doing, or JavaScript speed totally doesn't matter for you.\n```\n\n## \"Very plain\" objects [#very-plain]\n\nAs we know, objects can be used as associative arrays to store key/value pairs.\n\n...But if we try to store *user-provided* keys in it (for instance, a user-entered dictionary), we can see an interesting glitch: all keys work fine except `\"__proto__\"`.\n\nCheck out the example:\n\n```js run\nlet obj = {};\n\nlet key = prompt(\"What's the key?\", \"__proto__\");\nobj[key] = \"some value\";\n\nalert(obj[key]); // [object Object], not \"some value\"!\n```\n\nHere, if the user types in `__proto__`, the assignment is ignored!\n\nThat shouldn't surprise us. The `__proto__` property is special: it must be either an object or `null`. A string can not become a prototype.\n\nBut we didn't *intend* to implement such behavior, right? We want to store key/value pairs, and the key named `\"__proto__\"` was not properly saved. So that's a bug!\n\nHere the consequences are not terrible. But in other cases we may be assigning object values, and then the prototype may indeed be changed. As a result, the execution will go wrong in totally unexpected ways.\n\nWhat's worse -- usually developers do not think about such possibility at all. That makes such bugs hard to notice and even turn them into vulnerabilities, especially when JavaScript is used on server-side.\n\nUnexpected things also may happen when assigning to `toString`, which is a function by default, and to other built-in methods.\n\nHow can we avoid this problem?\n\nFirst, we can just switch to using `Map` for storage instead of plain objects, then everything's fine.\n\nBut `Object` can also serve us well here, because language creators gave thought to that problem long ago.\n\n`__proto__` is not a property of an object, but an accessor property of `Object.prototype`:\n\n![](object-prototype-2.svg)\n\nSo, if `obj.__proto__` is read or set, the corresponding getter/setter is called from its prototype, and it gets/sets `[[Prototype]]`.\n\nAs it was said in the beginning of this tutorial section: `__proto__` is a way to access `[[Prototype]]`, it is not `[[Prototype]]` itself.\n\nNow, if we intend to use an object as an associative array and be free of such problems, we can do it with a little trick:\n\n```js run\n*!*\nlet obj = Object.create(null);\n*/!*\n\nlet key = prompt(\"What's the key?\", \"__proto__\");\nobj[key] = \"some value\";\n\nalert(obj[key]); // \"some value\"\n```\n\n`Object.create(null)` creates an empty object without a prototype (`[[Prototype]]` is `null`):\n\n![](object-prototype-null.svg)\n\nSo, there is no inherited getter/setter for `__proto__`. Now it is processed as a regular data property, so the example above works right.\n\nWe can call such objects \"very plain\" or \"pure dictionary\" objects, because they are even simpler than the regular plain object `{...}`.\n\nA downside is that such objects lack any built-in object methods, e.g. `toString`:\n\n```js run\n*!*\nlet obj = Object.create(null);\n*/!*\n\nalert(obj); // Error (no toString)\n```\n\n...But that's usually fine for associative arrays.\n\nNote that most object-related methods are `Object.something(...)`, like `Object.keys(obj)` -- they are not in the prototype, so they will keep working on such objects:\n\n\n```js run\nlet chineseDictionary = Object.create(null);\nchineseDictionary.hello = \"你好\";\nchineseDictionary.bye = \"再见\";\n\nalert(Object.keys(chineseDictionary)); // hello,bye\n```\n\n## Summary\n\nModern methods to set up and directly access the prototype are:\n\n- [Object.create(proto, [descriptors])](mdn:js/Object/create) -- creates an empty object with a given `proto` as `[[Prototype]]` (can be `null`) and optional property descriptors.\n- [Object.getPrototypeOf(obj)](mdn:js/Object/getPrototypeOf) -- returns the `[[Prototype]]` of `obj` (same as `__proto__` getter).\n- [Object.setPrototypeOf(obj, proto)](mdn:js/Object/setPrototypeOf) -- sets the `[[Prototype]]` of `obj` to `proto` (same as `__proto__` setter).\n\nThe built-in `__proto__` getter/setter is unsafe if we'd want to put user-generated keys into an object. Just because a user may enter `\"__proto__\"` as the key, and there'll be an error, with hopefully light, but generally unpredictable consequences.\n\nSo we can either use `Object.create(null)` to create a \"very plain\" object without `__proto__`, or stick to `Map` objects for that.\n\nAlso, `Object.create` provides an easy way to shallow-copy an object with all descriptors:\n\n```js\nlet clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));\n```\n\nWe also made it clear that `__proto__` is a getter/setter for `[[Prototype]]` and resides in `Object.prototype`, just like other methods.\n\nWe can create an object without a prototype by `Object.create(null)`. Such objects are used as \"pure dictionaries\", they have no issues with `\"__proto__\"` as the key.\n\nOther methods:\n\n- [Object.keys(obj)](mdn:js/Object/keys) / [Object.values(obj)](mdn:js/Object/values) / [Object.entries(obj)](mdn:js/Object/entries) -- returns an array of enumerable own string property names/values/key-value pairs.\n- [Object.getOwnPropertySymbols(obj)](mdn:js/Object/getOwnPropertySymbols) -- returns an array of all own symbolic keys.\n- [Object.getOwnPropertyNames(obj)](mdn:js/Object/getOwnPropertyNames) -- returns an array of all own string keys.\n- [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) -- returns an array of all own keys.\n- [obj.hasOwnProperty(key)](mdn:js/Object/hasOwnProperty): returns `true` if `obj` has its own (not inherited) key named `key`.\n\nAll methods that return object properties (like `Object.keys` and others) -- return \"own\" properties. If we want inherited ones, we can use `for..in`.\n" }, { "path": "1-js/08-prototypes/index.md", "content": "# Prototypes, inheritance\n" }, { "path": "1-js/09-classes/01-class/1-rewrite-to-class/_js.view/solution.js", "content": "class Clock {\n constructor({ template }) {\n this.template = template;\n }\n\n render() {\n let date = new Date();\n\n let hours = date.getHours();\n if (hours < 10) hours = '0' + hours;\n\n let mins = date.getMinutes();\n if (mins < 10) mins = '0' + mins;\n\n let secs = date.getSeconds();\n if (secs < 10) secs = '0' + secs;\n\n let output = this.template\n .replace('h', hours)\n .replace('m', mins)\n .replace('s', secs);\n\n console.log(output);\n }\n\n stop() {\n clearInterval(this.timer);\n }\n\n start() {\n this.render();\n this.timer = setInterval(() => this.render(), 1000);\n }\n}\n\n\nlet clock = new Clock({template: 'h:m:s'});\nclock.start();\n" }, { "path": "1-js/09-classes/01-class/1-rewrite-to-class/_js.view/source.js", "content": "function Clock({ template }) {\n\n let timer;\n\n function render() {\n let date = new Date();\n\n let hours = date.getHours();\n if (hours < 10) hours = '0' + hours;\n\n let mins = date.getMinutes();\n if (mins < 10) mins = '0' + mins;\n\n let secs = date.getSeconds();\n if (secs < 10) secs = '0' + secs;\n\n let output = template\n .replace('h', hours)\n .replace('m', mins)\n .replace('s', secs);\n\n console.log(output);\n }\n\n this.stop = function() {\n clearInterval(timer);\n };\n\n this.start = function() {\n render();\n timer = setInterval(render, 1000);\n };\n\n}\n\nlet clock = new Clock({template: 'h:m:s'});\nclock.start();\n" }, { "path": "1-js/09-classes/01-class/1-rewrite-to-class/solution.md", "content": "" }, { "path": "1-js/09-classes/01-class/1-rewrite-to-class/task.md", "content": "nilai: 5\n\n---\n\n# Menulis ulang ke class\n\nClass `Clock` ditulis dalam gaya fungsional. Tulis ulang dengan menggunakan sintaks \"class\".\n\nP.S Class Clock berdetak pada console, buka untuk melihatnya." }, { "path": "1-js/09-classes/01-class/article.md", "content": "\n# Class basic syntax\n\n```quote author=\"Wikipedia\"\nIn object-oriented programming, a *class* is an extensible program-code-template for creating objects, providing initial values for state (member variables) and implementations of behavior (member functions or methods).\n```\n\nPada kenyataannya, kita sering membutuhkan sesuatu untuk membuat banyak objek yang memiliki kemiripan, seperti user, atau benda-benda lainnya seperti buah-buahan, binatang, kendaraan dan sesuatu yang biasanya bisa dikelompokan.\n\nSeperti yang kita ketahui dari bab , `new function` dapat membantu kita membuatnya.\n\nTapi pada Javascript modern, ada cara pembuatan \"class\" yang lebih lanjut, Yang akan memperkenalkan fitur-fitur yang sangat berguna untuk pemograman berbasis objek / objek oriented.\n\n## Sintaks \"class\"\n\nSintaks dasarnya adalah:\n```js\nclass MyClass {\n // class methods\n constructor() { ... }\n method1() { ... }\n method2() { ... }\n method3() { ... }\n ...\n}\n```\n\nKemudian kita gunakan `new MyClass` untuk menciptakan sebuah objek baru dengan semua method yang sudah didaftarkan.\n\nMethod `constructor()` secara otomatis terpanggil oleh `new`, jadi kita dapat menginisialisasi sebuah objek dengannya.\n\nContohnyya: \n\n```js run\nclass User {\n\n constructor(name) {\n this.name = name;\n }\n\n sayHi() {\n alert(this.name);\n }\n\n}\n\n// Cara penggunaan:\nlet user = new User(\"John\");\nuser.sayHi();\n```\n\nKetika `new user(\"john\")` dijalankan:\n1. Sebuah objek baru terbentuk.\n2. method \"constructor\" berjalan dengan argumen yang dberikan dan menetapkan `this.name` pada nya.\n\n...Lalu kita dapat memanggil method objek, seperti `user.sayHi()`.\n\n```warn header=\"Tidak boleh ada koma diantara method class\"\n\nKesalahan umum bagi pemula biasanya dengan memberikan koma diantara method class, yang nantinya akan menghasilkan sintaks eror.\n\nNotasi disini jangan disamakan dengan objek literal. Dalam class, tidak perlu ada koma.\n```\n\n## Apa itu class?\n\nJadi apa sih sebenarnnya `class` itu ? Itu bukan sebuah istilah baru dalam bahasa pemograman.\n\nMari kita uraikan dan lihat apa sebenarnya class itu. Yang nantinya akan membantu untuk memahami berbagai aspek yang lebih rumit.\n\nDi Javascript, sebuah class itu merupakan sesuatu yang mirip fungsi.\n\nYuk kita lihat disini:\n\n```js run\nclass User {\n constructor(name) { this.name = name; }\n sayHi() { alert(this.name); }\n}\n\n// bukti: User adalah sebuah fungsi\n*!*\nalert(typeof User); // function \n*/!*\n```\n\nApa yang konstruktor `class User {...}` sebenarnya lakukan:\n\n1. Membuat sebuah fungsi bernama `User`, yang akan menjadi hasil dari deklarasi class. Sebuah fungsi kodingan diambil dari method `constructor` (kita asumsikan kosong jika kita tidak menulis sebuah method).\n2. Simpan method-method class didalamnya, seperti `sayHi`, pada `User.prototype`.\n\nSetelah objek `new User` terbentuk, ketika kita panggil method tersebut, itu akan mengambil dari prototypenya, seperti yang dijelaskan pada bab . Sehingga objek tersebut memiliki akses pada method class nya.\n\nKita dapat mengilustrasikan hasil dari deklrasi `class User` seperti berikut:\n\n![](class-user.svg)\n\nMari kita bedah kode tersebut:\n\n```js run\nclass User {\n constructor(name) { this.name = name; }\n sayHi() { alert(this.name); }\n}\n\n// class adalah sebuah fungsi\nalert(typeof User); // function\n\n// ...atau, lebih tepatnya, Method constructor\nalert(User === User.prototype.constructor); // true\n\n// Method tersebut berada pada User.prototype, contoh:\nalert(User.prototype.sayHi); // alert(this.name);\n\n// Didalamnya terdapat dua method pada prototipe\nalert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi\n```\n\n## Bukan hanya sebuah pemanis sintaks belaka\n\nTerkadang orang-orang mengatakan bahwa `class` adalah sebuah `sintaksis sugar` (sintaks yang diciptakan untuk membuat mudah pembacaan, tapi tidak ada sesuatu yang baru didalamnya), karena kita sebenarnya dapat mendeklasikan objek tanpa menggunakan sintaks `class` sama sekali.\n\n```js run\n// menjalankan Class User hanya dengan fungsi\n\n// 1. Membuat fungsi konstruktor\nfunction User(name) {\n this.name = name;\n}\n// sebuah fungsi prototipe memiliki properti \"constructor\" secara bawaannya,\n// jadi kita tidak perlu membuatnya\n\n// 2 menambahkan method pada prototype\nUser.prototype.sayHi = function() {\n alert(this.name);\n};\n\n// Penggunaan:\nlet user = new User(\"John\");\nuser.sayHi();\n```\n\nHasil dari pendefinisian berikut adalah sama. Jadi memang ada alasan mengapa `class` dapat dianggap sebagai pemanis sintaks untuk pendefinisian konstruktor bersamaan dengan method prototipe-nya.\n\nTetap saja, ada perbedaan penting.\n\n1. Pertama, sebuah fungsi yang dibentuk dengan `class` dilabeli oleh properti internal yang khusus `[[FunctionKind]]:\"classConstructor\"`. Jadi tidak sepenuhnya sama dengan membuatnya secara manual.\n\n Javascript sendiri mengecek properti tersebut diberbagai tempat. sebagai contoh, tidak seperti fungsi biasa, itu harus dijalankan dengan sintaks `new`:\n\n ```js run\n class User {\n constructor() {}\n }\n\n alert(typeof User); // function\n User(); // Error: Class constructor User cannot be invoked without 'new'\n ```\n\n Selain itu, representasi string dari konstruktor class di sebagian besar mesin JavaScript dimulai dengan \"class ...\"\n\n ```js run\n class User {\n constructor() {}\n }\n\n alert(User); // class User { ... }\n ```\n Terdapat perbedaan lain, kita akan segera melihatnya.\n\n2. Method Class merupakan non-enumerable(tidak bisa melakukan perhitungan dengan method ini)\n Sebuah pendefinisian class menetapkan flag `enumerable` menjadi `false` untuk semua methods yang ada di `properti` nya.\n\n Itu bagus, karena jika kita melakukan `for..in` pada sebuah objek, kita biasanya tidak menginginkan method bawaan class nya.\n\n3. Class selalu menggunakan `use strict`.(cek apa itu [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode))\n\nSelain itu, sintaks `class` menghadirkan banyak fitur lain yang akan kita bahas nantinya.\n\n## Class Expression\n\nSama seperti fungsi, kelas dapat didefinisikan denga ekspresi lain, diturunkan, dikembalikan, ditetapkan, dll.\n\nBerikut adalah contoh class expression:\n\n```js\nlet User = class {\n sayHi() {\n alert(\"Hello\");\n }\n};\n```\n\nMirip dengan fungsi Expressions yang memiliki nama, class expression juga mungkin memiliki nama.\n\nJika sebuah class expression memiliki nama, itu hanya terlihat di dalam class tersebut:\n\n```js run\n// \"Class Expression yang memiliki nama\"\n// ((tidak ada pembahasan dalam spesifikasinya, tapi itu mirip dengan function expression yang memiliki nama)\nlet User = class *!*MyClass*/!* {\n sayHi() {\n alert(MyClass); // Nama MyClass hanya terlihat di dalam kelas\n }\n};\n\nnew User().sayHi(); //berjalan, menunjukkan definisi dari MyClass\n\nalert(MyClass); // error, Nama MyClass tidak bisa dilihat di luar kelas\n```\n\nKita bahkan dapat membuat kelas secara dinamis \"sesuai permintaan\", seperti berikut:\n\n```js run\nfunction makeClass(phrase) {\n // deklrasikan sebuah class dan kembalikan class trsebut\n return class {\n sayHi() {\n alert(phrase);\n }\n };\n}\n\n// Membuat sebuah class baru\nlet User = makeClass(\"Hello\");\n\nnew User().sayHi(); // Hello\n```\n\n\n## Getter/setter\n\nSama seperti objek literal, class dapat menyertakan getter / setter serta properti yang telah diproses, dll.\n\nBerikut adalah sebuah contoh untuk `user.name` dengan implementasi menggunakan `get/set`: \n\n```js run\nclass User {\n\n constructor(name) {\n // memanggil setternya\n this.name = name;\n }\n\n*!*\n get name() {\n*/!*\n return this._name;\n }\n\n*!*\n set name(value) {\n*/!*\n if (value.length < 4) {\n alert(\"Name is too short.\");\n return;\n }\n this._name = value;\n }\n\n}\n\nlet user = new User(\"John\");\nalert(user.name); // John\n\nuser = new User(\"\"); // Name is too short.\n```\n\nSecara teknis, deklarasi kelas tersebut bekerja dengan membuat getter dan setter didalam `User.prototype`.\n\n## Nama yang telah diproses [...]\n\nBerikut adalah sebuah contoh menggunakan method pada nama yang telah diproses pada bracket`[...]`:\n\n```js run\nclass User {\n\n*!*\n ['say' + 'Hi']() {\n*/!*\n alert(\"Hello\");\n }\n\n}\n\nnew User().sayHi();\n```\n\nFitur seperti itu mudah diingat, karena mirip dengan objek literal.\n\n## Class fields\n\n```warn header=\"Browser lama mungkin membutuhkan polyfill\"\nClass fields adalah tambahan terbaru pada bahasa ini..\n```\n\nSebelumnya, kelas ini hanya memiliki method.\n\n\"Class fields\" adalah sebuah sintaks yang memungkinkan untuk menambahkan properti apa pun.\n\nSebagai contoh, mari kita tambahkan properti `name` pada `class User`:\n\n```js run\nclass User {\n*!*\n name = \"John\";\n*/!*\n\n sayHi() {\n alert(`Hello, ${this.name}!`);\n }\n}\n\nnew User().sayHi(); // Hello, John!\n```\n\nJadi, kita hanya perlu menulis \" = \" pada saat proses deklarasi.\n\nPerbedaan penting pada class field adalah bahwa class field tersebut diatur untuk objek individual, bukan pada `User.prototype`:\n\n```js run\nclass User {\n*!*\n name = \"John\";\n*/!*\n}\n\nlet user = new User();\nalert(user.name); // John\nalert(User.prototype.name); // undefined\n```\n\nKita juga dapat menetapkan nilai menggunakan ekspresi yang lebih kompleks dan memanggil fungsi:\n\n```js run\nclass User {\n*!*\n name = prompt(\"Name, please?\", \"John\");\n*/!*\n}\n\nlet user = new User();\nalert(user.name); // John\n```\n\n### Membuat bound method dengan class field\n\nSeperti yang ditunjukkan pada bab , fungsi di JavaScript memiliki `this` yang dinamis. Itu tergantung pada konteks pemanggilannya.\n\nJadi, jika method objek diteruskan dan dipanggil pada konteks lain, `this` tidak akan menjadi referensi ke objek itu lagi.\n\nSebagai contoh, kode dibawah ini akan menampilkan output `undefined`:\n\n```js run\nclass Button {\n constructor(value) {\n this.value = value;\n }\n\n click() {\n alert(this.value);\n }\n}\n\nlet button = new Button(\"hello\");\n\n*!*\nsetTimeout(button.click, 1000); // undefined\n*/!*\n```\nMasalah itu terjadi karena memanggil `this` pada konteks lain.\n\nTerdapat dua pendekatan cara untuk memperbaikinya, seperti yang telah kita diskusikan pada bab :\n\n1. Meneruskan sebuah fungsi-wrapper, seperti `setTimeout(() => button.click(), 1000)`.\n2. Mengikat method tersebut terhadap objek, seperti pada constructor.\n\nClass field menyediakan sintaks lain yang cukup elegan:\n\n```js run\nclass Button {\n constructor(value) {\n this.value = value;\n }\n*!*\n click = () => {\n alert(this.value);\n }\n*/!*\n}\n\nlet button = new Button(\"hello\");\n\nsetTimeout(button.click, 1000); // hello\n```\n\nClass field ini `click = () => {...}` dibuat pada pada basis tiap objek, ada sebuah fungsi terpisah pada tiap `Button` objek, dengan `this` di dalamnya mereferensikan objek tersebut. Kita dapat meneruskan `button.click` di mana saja, dan nilai` this` akan selalu benar.\n\nItu akan sangat berguna pada lingkungan browser, teruntuk event listener.\n\n## Kesimpulan\n\nSintaks class dasar terlihat seperti ini:\n\n```js\nclass MyClass {\n prop = value; // property\n\n constructor(...) { // constructor\n // ...\n }\n\n method(...) {} // method\n\n get something(...) {} // getter method\n set something(...) {} // setter method\n\n [Symbol.iterator]() {} // method dengan nama yang telah diproses (disini simbol)\n // ...\n}\n```\n\n`MyClass` secara teknis adalah sebuah fungsi (yang kita sediakan sebagai` konstruktor`), sedangkan method, getter, dan setter ditulis ke `MyClass.prototype`.\n\nPada bab selanjutnya kita akan mempelajari lebih lanjut tentang class, termasuk pewarisan dan fitur lainnya.\n" }, { "path": "1-js/09-classes/02-class-inheritance/1-class-constructor-error/solution.md", "content": "Itu karena konstruktor turunan harus memanggil `super()`.\n\nBerikut kode yang benar:\n\n```js run\nclass Animal {\n\n constructor(name) {\n this.name = name;\n }\n\n}\n\nclass Rabbit extends Animal {\n constructor(name) {\n *!*\n super(name);\n */!*\n this.created = Date.now();\n }\n}\n\n*!*\nlet rabbit = new Rabbit(\"White Rabbit\"); // sekarang oke\n*/!*\nalert(rabbit.name); // White Rabbit\n```\n" }, { "path": "1-js/09-classes/02-class-inheritance/1-class-constructor-error/task.md", "content": "importance: 5\n\n---\n\n# Kesalahan saat membuat sebuah _instance_\n\nBerikut kode dengan `Rabbit` _extending_ `Animal`.\n\nSayangnya, objek `Rabbit` tidak dapat dibuat. Apa yang salah? Perbaiki!.\n\n```js run\nclass Animal {\n\n constructor(name) {\n this.name = name;\n }\n\n}\n\nclass Rabbit extends Animal {\n constructor(name) {\n this.name = name;\n this.created = Date.now();\n }\n}\n\n*!*\nlet rabbit = new Rabbit(\"White Rabbit\"); // Error: this is not defined\n*/!*\nalert(rabbit.name);\n```\n" }, { "path": "1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.md", "content": "[js src=\"solution.view/extended-clock.js\"]\n" }, { "path": "1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/clock.js", "content": "class Clock {\n constructor({ template }) {\n this.template = template;\n }\n\n render() {\n let date = new Date();\n\n let hours = date.getHours();\n if (hours < 10) hours = '0' + hours;\n\n let mins = date.getMinutes();\n if (mins < 10) mins = '0' + mins;\n\n let secs = date.getSeconds();\n if (secs < 10) secs = '0' + secs;\n\n let output = this.template\n .replace('h', hours)\n .replace('m', mins)\n .replace('s', secs);\n\n console.log(output);\n }\n\n stop() {\n clearInterval(this.timer);\n }\n\n start() {\n this.render();\n this.timer = setInterval(() => this.render(), 1000);\n }\n}\n" }, { "path": "1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js", "content": "class ExtendedClock extends Clock {\n constructor(options) {\n super(options);\n let { precision = 1000 } = options;\n this.precision = precision;\n }\n\n start() {\n this.render();\n this.timer = setInterval(() => this.render(), this.precision);\n }\n};\n" }, { "path": "1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/index.html", "content": "\n\n\n\n\n" }, { "path": "1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/clock.js", "content": "class Clock {\n constructor({ template }) {\n this.template = template;\n }\n\n render() {\n let date = new Date();\n\n let hours = date.getHours();\n if (hours < 10) hours = '0' + hours;\n\n let mins = date.getMinutes();\n if (mins < 10) mins = '0' + mins;\n\n let secs = date.getSeconds();\n if (secs < 10) secs = '0' + secs;\n\n let output = this.template\n .replace('h', hours)\n .replace('m', mins)\n .replace('s', secs);\n\n console.log(output);\n }\n\n stop() {\n clearInterval(this.timer);\n }\n\n start() {\n this.render();\n this.timer = setInterval(() => this.render(), 1000);\n }\n}\n" }, { "path": "1-js/09-classes/02-class-inheritance/2-clock-class-extended/source.view/index.html", "content": "\n\n\n" }, { "path": "1-js/09-classes/02-class-inheritance/2-clock-class-extended/task.md", "content": "importance: 5\n\n---\n\n# _Extended clock_\n\nKita punya kelas `Clock`. Sampai sekarang, ini mencetak waktu setiap detik.\n\n[js src=\"source.view/clock.js\"]\n\nBuat kelas baru `ExtendedClock` yang diturunkan dari` Clock` dan tambahkan parameter `precision` -- jumlah` ms` antara \"ticks\". Seharusnya `1000` (1 detik) secara _default_.\n\n- Kode kamu harus ada di file `extended-clock.js`\n- Jangan ubah `clock.js`. Perpanjang itu!.\n" }, { "path": "1-js/09-classes/02-class-inheritance/article.md", "content": "# Turunan Kelas\n\nTurunan Kelas adalah cara satu kelas untuk memperluas kelas lainnya.\n\nJadi kita bisa membuat fungsionalitas baru di atas yang sudah ada.\n\n## Kata kunci \"extends\"\n\nKatakanlah kita mempunyai kelas `Animal`:\n\n```js\nclass Animal {\n constructor(name) {\n this.speed = 0;\n this.name = name;\n }\n run(speed) {\n this.speed = speed;\n alert(`${this.name} runs with speed ${this.speed}.`);\n }\n stop() {\n this.speed = 0;\n alert(`${this.name} stands still.`);\n }\n}\n\nlet animal = new Animal('My animal');\n```\n\nInilah cara kita mewakili objek `animal` dan kelas `Animal` secara grafis:\n\n![](rabbit-animal-independent-animal.svg)\n\n...Dan kita akan membuat yang lain `class Rabbit`.\n\nKarena kelinci adalah binatang, kelas `Rabbit` harus didasarkan pada `Animal`, memiliki akses ke metode _animal_, sehingga _rabbits_ dapat melakukan apa yang dapat dilakukan hewan \"pada umumnya\".\n\nSintaks untuk memperluas kelas lain adalah: `class Child extends Parent`.\n\nMari buat `class Rabbit` yang diwarisi dari `Animal`:\n\n```js\n*!*\nclass Rabbit extends Animal {\n*/!*\n hide() {\n alert(`${this.name} hides!`);\n }\n}\n\nlet rabbit = new Rabbit(\"White Rabbit\");\n\nrabbit.run(5); // White Rabbit runs with speed 5.\nrabbit.hide(); // White Rabbit hides!\n```\n\nObjek dari kelas `Rabbit` mempunyai akses kedua metode `Rabbit`, seperti `rabbit.hide()`, dan juga untuk metode `Animal`, seperti `rabbit.run()`.\n\nSecara internal, kata kunci `extends` bekerja menggunakan mekanik prototipe lama yang bagus. Ini mengatur `Rabbit.prototype.[[Prototype]]` untuk `Animal.prototype`. Jadi, jika metode tidak ditemukan di `Rabbit.prototype`, JavaScript mengambilnya dari `Animal.prototype`.\n\n![](animal-rabbit-extends.svg)\n\nMisalnya, untuk menemukan metode `rabbit.run`, mesin mengecek (dari bawah ke atas pada gambar):\n\n1. Objek `rabbit` (tidak punya `run`).\n2. Prototipenya, yaitu `Rabbit.prototype` (mempunyai `hide`, tapi tidak `run`).\n3. Prototipenya, yaitu (disebabkan oleh `extends`) `Animal.prototype`, yang akhirnya mempunyai metode `run`.\n\nSeperti yang bisa kita ingat dari bab , JavaScript sendiri menggunakan pewarisan _prototypal_ untuk objek bawaan. Misalnya. `Date.prototype.[[Prototype]]` adalah `Object.prototype`. Itulah mengapa tanggal memiliki akses ke metode objek umum.\n\n````smart header=\"Ekspresi apa pun diperbolehkan setelah `extends` \"Sintaks kelas memungkinkan untuk menentukan tidak hanya kelas, tetapi ekspresi apa pun setelah `extends`.\n\nMisalnya, panggilan fungsi yang menghasilkan kelas induk:\n\n```js run\nfunction f(phrase) {\n return class {\n sayHi() { alert(phrase); }\n };\n}\n\n*!*\nclass User extends f(\"Hello\") {}\n*/!*\n\nnew User().sayHi(); // Hello\n```\n\nDi sini `class User` mewarisi dari hasil `f(\"Hello\")`.\n\nItu mungkin berguna untuk pola pemrograman tingkat lanjut saat kita menggunakan fungsi untuk menghasilkan kelas bergantung pada banyak kondisi dan dapat mewarisinya.\n\n`````\n\n## Mengganti metode\n\nSekarang mari bergerak maju dan mengganti metode. Secara default, semua metode yang tidak dispesifikasikan dalam `class Rabbit` diambil secara langsung \"sebagaimana adanya\" dari `class Animal`.\n\nTetapi jika kita menentukan metode kita sendiri di `Rabbit`, seperti `stop()` maka itu akan digunakan sebagai gantinya:\n\n```js\nclass Rabbit extends Animal {\n stop() {\n // ...sekarang ini akan digunakan untuk rabbit.stop()\n // Bukan stop() dari kelas Animal\n }\n}\n```\n\nBiasanya kita tidak ingin sepenuhnya mengganti metode induk, melainkan untuk membangun di atasnya untuk mengubah atau memperluas fungsinya. Kita melakukan sesuatu dalam metode kita, tetapi memanggil metode induk sebelum/sesudahnya atau dalam proses.\n\nKelas menyediakan kata kunci `\"super\"` untuk itu.\n\n- `super.method(...)` untuk memanggil metode induk.\n- `super(...)` untuk memanggil konstruktor induk (hanya di dalam konstruktor kita).\n\nMisalnya, biarkan kelinci kita bersembunyi otomatis saat dihentikan:\n\n```js run\nclass Animal {\n\n constructor(name) {\n this.speed = 0;\n this.name = name;\n }\n\n run(speed) {\n this.speed = speed;\n alert(`${this.name} runs with speed ${this.speed}.`);\n }\n\n stop() {\n this.speed = 0;\n alert(`${this.name} stands still.`);\n }\n\n}\n\nclass Rabbit extends Animal {\n hide() {\n alert(`${this.name} hides!`);\n }\n\n*!*\n stop() {\n super.stop(); // memanggil stop induk\n this.hide(); // dan lalu bersembunyi\n }\n*/!*\n}\n\nlet rabbit = new Rabbit(\"White Rabbit\");\n\nrabbit.run(5); // White Rabbit runs with speed 5.\nrabbit.stop(); // White Rabbit stands still. White Rabbit hides!\n```\n\nSekarang `Rabbit` mempunyai metode `stop` yang memanggil induk `super.stop()` di dalam proses.\n\n````smart header=\"_Arrow functions_ tidak mempunyai `super`\"\nSeperti yang disebutkan di bab , _arrow functions_ tidak memiliki `super`.\n\nJika diakses, itu diambil dari fungsi luar. Misalnya:\n```js\nclass Rabbit extends Animal {\n stop() {\n setTimeout(() => super.stop(), 1000); // memanggil stop induk setelah 1 detik\n }\n}\n```\n\n`super` di _arrow function_ sama dengan di `stop()`, jadi berfungsi seperti yang diinginkan. Jika kita menetapkan fungsi \"biasa\" di sini, akan ada kesalahan:\n\n```js\n// Unexpected super\nsetTimeout(function() { super.stop() }, 1000);\n```\n`````\n\n## Mengganti konstruktor\n\nDengan konstruktor, ini menjadi sedikit rumit.\n\nSampai sekarang, `Rabbit` tidak mempunyai `constructor` sendiri.\n\nMenurut [spesifikasi](https://tc39.github.io/ecma262/#sec-runtime-semantics-classdefinitionevaluation), jika sebuah kelas memperluas kelas lain dan tidak memiliki `constructor`, maka `constructor` \"kosong\" berikut akan dibuat:\n\n```js\nclass Rabbit extends Animal {\n // dihasilkan untuk memperluas kelas tanpa konstruktor sendiri\n*!*\n constructor(...args) {\n super(...args);\n }\n*/!*\n}\n```\n\nSeperti yang bisa kita lihat, ini pada dasarnya memanggil `constructor` induk dengan meneruskan semua argumen. Itu terjadi jika kita tidak menulis konstruktor kita sendiri.\n\nSekarang mari tambahkan konstruktor kustom ke `Rabbit`. Ini akan menentukan `earLength` selain `name`:\n\n```js run\nclass Animal {\n constructor(name) {\n this.speed = 0;\n this.name = name;\n }\n // ...\n}\n\nclass Rabbit extends Animal {\n\n*!*\n constructor(name, earLength) {\n this.speed = 0;\n this.name = name;\n this.earLength = earLength;\n }\n*/!*\n\n // ...\n}\n\n*!*\n// Tidak bekerja!\nlet rabbit = new Rabbit(\"White Rabbit\", 10); // Error: this is not defined.\n*/!*\n```\n\nUps! Kita mendapat kesalahan. Sekarang kita tidak bisa membuat _rabbits_. Apa yang salah?\n\nJawaban singkatnya adalah:\n\n- **Konstruktor dalam kelas mewarisi harus memanggil `super(...)`, dan (!) lakukan sebelum menggunakan `this`.**\n\n...Tapi kenapa? Apa yang terjadi di sini? Memang, persyaratannya tampak aneh.\n\nTentu saja ada penjelasannya. Mari kita bahas detailnya, jadi kamu akan benar-benar mengerti apa yang terjadi.\n\nDalam JavaScript, ada perbedaan antara fungsi konstruktor dari kelas yang mewarisi (disebut \"konstruktor turunan\") dan fungsi lainnya. Konstruktor turunan memiliki properti internal khusus `[[ConstructorKind]]:\"turunan\"`. Itu label internal khusus.\n\nLabel itu mempengaruhi perilakunya dengan `new`.\n\n- Saat fungsi reguler dijalankan dengan `new`, itu membuat objek kosong dan menugaskannya ke `this`.\n- Tetapi ketika konstruktor turunan berjalan, ia tidak melakukan ini. Ia mengharapkan konstruktor induk untuk melakukan pekerjaan ini.\n\nJadi, konstruktor turunan harus memanggil `super` untuk menjalankan konstruktor induknya, jika tidak, objek untuk `this` tidak akan dibuat. Dan kita akan mendapatkan kesalahan.\n\nAgar konstruktor `Rabbit` bekerja, ia perlu memanggil`super()`sebelum menggunakan `this`, seperti di sini:\n\n```js run\nclass Animal {\n\n constructor(name) {\n this.speed = 0;\n this.name = name;\n }\n\n // ...\n}\n\nclass Rabbit extends Animal {\n\n constructor(name, earLength) {\n*!*\n super(name);\n*/!*\n this.earLength = earLength;\n }\n\n // ...\n}\n\n*!*\n// sekarang baik-baik saja\nlet rabbit = new Rabbit(\"White Rabbit\", 10);\nalert(rabbit.name); // White Rabbit\nalert(rabbit.earLength); // 10\n*/!*\n```\n\n### Mengganti bidang kelas: catatan rumit\n\n```warn header=\"Advanced note\"\nCatatan ini mengasumsikan kamu memiliki pengalaman tertentu dengan kelas, mungkin dalam bahasa pemrograman lain.\n\nIni memberikan wawasan yang lebih baik tentang bahasa dan juga menjelaskan perilaku yang mungkin menjadi sumber kesalahan (tetapi tidak terlalu sering).\n\nJika kamu merasa kesulitan untuk memahaminya, lanjutkan saja, lanjutkan membaca, kemudian kembali lagi nanti.\n```\n\nKita tidak hanya dapat mengganti metode, tetapi juga bidang kelas.\n\nMeskipun, ada perilaku rumit saat kami mengakses kolom yang diganti di konstruktor induk, sangat berbeda dari kebanyakan bahasa pemrograman lainnya.\n\nPertimbangkan contoh ini:\n\n```js run\nclass Animal {\n name = 'animal';\n\n constructor() {\n alert(this.name); // (*)\n }\n}\n\nclass Rabbit extends Animal {\n name = 'rabbit';\n}\n\nnew Animal(); // animal\n*!*\nnew Rabbit(); // animal\n*/!*\n```\n\nDi sini, kelas `Rabbit` memperluas `Animal` dan mengganti bidang `nama` dengan nilainya sendiri.\n\nTidak ada konstruktor sendiri dalam `Rabbit`, jadi konstruktor `Animal` dipanggil.\n\nYang menarik adalah dalam kedua kasus: `new Animal()` dan `new Rabbit()`, `alert` di baris `(*)` menampilkan `animal`.\n\n**Dengan kata lain, konstruktor induk selalu menggunakan nilai bidangnya sendiri, bukan yang diganti.**\n\nApa yang aneh tentang itu?\n\nJika masih belum jelas silahkan bandingkan dengan metodenya.\n\nBerikut kode yang sama, tetapi alih-alih bidang `this.name` kita memanggil metode `this.showName()`:\n\n```js run\nclass Animal {\n showName() { // sebagai ganti this.name = 'animal'\n alert('animal');\n }\n\n constructor() {\n this.showName(); // sebagai ganti alert(this.name);\n }\n}\n\nclass Rabbit extends Animal {\n showName() {\n alert('rabbit');\n }\n}\n\nnew Animal(); // animal\n*!*\nnew Rabbit(); // rabbit\n*/!*\n```\n\nHarap diperhatikan: sekarang hasilnya berbeda.\n\nDan itulah yang secara natural kita harapkan. Ketika konstruktor induk dipanggil di kelas turunan, ia menggunakan metode yang diganti.\n\n...Tetapi untuk bidang kelas tidak demikian. Seperti yang dikatakan, konstruktor induk selalu menggunakan bidang induk.\n\nMengapa ada bedanya?\n\nNah, alasannya ada di urutan bidang inisialisasi. Bidang kelas diinisialisasi:\n\n- Sebelum konstruktor untuk kelas dasar (yang tidak memperluas apa pun),\n- Langsung setelah `super()` untuk kelas turunan.\n\nDalam kasus kita, `Rabbit` adalah kelas turunannya. Tidak ada `constructor()` di dalamnya. Seperti yang dikatakan sebelumnya, itu sama seperti jika ada konstruktor kosong hanya dengan `super(...args)`.\n\nJadi, `new Rabbit()` memanggil `super()`, sehingga mengeksekusi konstruktor induk, dan (sesuai aturan untuk kelas turunan) hanya setelah bidang kelasnya diinisialisasi. Pada saat eksekusi induk konstruktor, belum ada bidang kelas `Rabbit`, itulah mengapa bidang `Animal` digunakan.\n\nPerbedaan halus antara bidang dan metode ini khusus untuk JavaScript\n\nUntungnya, perilaku ini hanya muncul dengan sendirinya jika bidang yang diganti digunakan di konstruktor induk. Maka mungkin sulit untuk memahami apa yang sedang terjadi, jadi kita menjelaskannya di sini.\n\nJika ini menjadi masalah, seseorang dapat memperbaikinya dengan menggunakan metode atau _getter_/_setter_ sebagai ganti bidang.\n\n## _Super: internals, [[HomeObject]]_\n\n```warn header=\"Advanced information\"\nJika Anda membaca tutorial untuk pertama kali - bagian ini mungkin dilewati.\n\nIni tentang mekanisme internal di balik pewarisan dan `super`.\n```\n\nMari kita selami lebih dalam di balik tudung `super`. Kita akan melihat beberapa hal menarik di sepanjang jalan.\n\nPertama untuk mengatakan, dari semua yang telah kita pelajari sampai sekarang, mustahil bagi `super` untuk bekerja sama sekali!\n\nYa, memang, mari kita tanyakan pada diri kita sendiri, bagaimana seharusnya secara teknis bekerja? Ketika sebuah metode objek dijalankan, ia mendapatkan objek saat ini sebagai `this`. Jika kita memanggil `super.method()` maka, mesin perlu mendapatkan `metode` dari prototipe objek saat ini. Tapi bagaimana caranya?\n\nTugasnya mungkin tampak sederhana, tetapi sebenarnya tidak. Mesin mengetahui objek saat ini `this`, sehingga bisa mendapatkan `metode` induk sebagai `this.__proto__.method`. Sayangnya, solusi \"naif\" seperti itu tidak akan berhasil.\n\nMari kita tunjukkan masalahnya. Tanpa kelas, menggunakan objek biasa demi kesederhanaan.\n\nKamu dapat melewati bagian ini dan melanjutkan ke subbagian `[[HomeObject]]` jika kamu tidak ingin mengetahui detailnya. Itu tidak akan merugikan. Atau baca terus jika kamu tertarik untuk memahami berbagai hal secara mendalam.\n\nPada contoh di bawah, `rabbit.__ proto__ = animal`. Sekarang mari kita coba: di `rabbit.eat()` kita akan memanggil `animal.eat() `, menggunakan` this.__ proto__`:\n\n```js run\nlet animal = {\n name: \"Animal\",\n eat() {\n alert(`${this.name} eats.`);\n }\n};\n\nlet rabbit = {\n __proto__: animal,\n name: \"Rabbit\",\n eat() {\n*!*\n // begitulah kemungkinan super.eat() bisa bekerja\n this.__proto__.eat.call(this); // (*)\n*/!*\n }\n};\n\nrabbit.eat(); // Rabbit eats.\n```\n\nPada baris `(*)` kita mengambil `eat` dari prototipe (`animal`) dan memanggilnya dalam konteks objek saat ini. Harap dicatat bahwa `.call(this)` penting di sini, karena sesimpel `this.__proto__.Eat()` akan mengeksekusi `eat` induk dalam konteks prototipe, bukan objek saat ini.\n\nDan pada kode di atas itu benar-benar berfungsi sebagaimana mestinya: kita memiliki `alert` yang benar.\n\nSekarang mari tambahkan satu objek lagi ke rantai. Kita akan melihat bagaimana hal-hal rusak:\n\n```js run\nlet animal = {\n name: \"Animal\",\n eat() {\n alert(`${this.name} eats.`);\n }\n};\n\nlet rabbit = {\n __proto__: animal,\n eat() {\n // ...melambung di sekitar rabbit-style dan panggil metode induk (animal)\n this.__proto__.eat.call(this); // (*)\n }\n};\n\nlet longEar = {\n __proto__: rabbit,\n eat() {\n // ...lakukan sesuatu dengan long ears dan panggil metode induk (rabbit)\n this.__proto__.eat.call(this); // (**)\n }\n};\n\n*!*\nlongEar.eat(); // Error: Maximum call stack size exceeded\n*/!*\n```\n\nKode tidak berfungsi lagi! Kita dapat melihat kesalahan saat mencoba memanggil `longEar.eat()`.\n\nMungkin tidak begitu jelas, tetapi jika kita melacak panggilan `longEar.eat()`, maka kita bisa melihat alasannya. Di kedua baris `(*)` dan `(**)` nilai `this` adalah objek saat ini (`longEar`). Itu penting: semua metode objek mendapatkan objek saat ini sebagai `this`, bukan prototipe atau semacamnya.\n\nJadi, di kedua baris `(*)` dan `(**)` nilai dari `this.__ proto__` sama persis: `rabbit`. Mereka keduanya memanggil `rabbit.eat` tanpa naik rantai dalam perulangan tak berujung.\n\nBerikut gambaran tentang apa yang terjadi:\n\n![](this-super-loop.svg)\n\n1. Di dalam `longEar.eat()`, baris `(**)` memanggil `rabbit.eat` dengan menyediakan `this=longEar`.\n ```js\n // di dalam longEar.eat() kita punya this = longEar\n this.__proto__.eat.call(this); // (**)\n // menjadi\n longEar.__proto__.eat.call(this);\n // itu adalah\n rabbit.eat.call(this);\n ```\n2. Lalu di baris `(*)` dari `rabbit.eat`, kita ingin meneruskan panggilan lebih tinggi lagi dalam rantai, tapi `this=longEar`, jadi `this.__proto__.eat` lagi-lagi `rabbit.eat`!\n\n ```js\n // di dalam rabbit.eat() kita juga punya this = longEar\n this.__proto__.eat.call(this); // (*)\n // menjadi\n longEar.__proto__.eat.call(this);\n // atau (lagi)\n rabbit.eat.call(this);\n ```\n\n3. ...Jadi `rabbit.eat` menyebut dirinya dalam perulangan tak berujung, karena tidak bisa naik lebih jauh.\n\nMasalahnya tidak dapat diselesaikan hanya dengan menggunakan `this`.\n\n### _`[[HomeObject]]`_\n\nUntuk memberikan solusi, JavaScript menambahkan satu lagi properti internal khusus untuk fungsi: `[[HomeObject]]`.\n\nKetika sebuah fungsi ditetapkan sebagai metode kelas atau objek, properti `[[HomeObject]]` -nya menjadi objek itu.\n\nLalu `super` menggunakannya untuk menyelesaikan prototipe induk dan metodenya.\n\nMari kita lihat cara kerjanya, pertama dengan objek biasa:\n\n```js run\nlet animal = {\n name: \"Animal\",\n eat() { // animal.eat.[[HomeObject]] == animal\n alert(`${this.name} eats.`);\n }\n};\n\nlet rabbit = {\n __proto__: animal,\n name: \"Rabbit\",\n eat() { // rabbit.eat.[[HomeObject]] == rabbit\n super.eat();\n }\n};\n\nlet longEar = {\n __proto__: rabbit,\n name: \"Long Ear\",\n eat() { // longEar.eat.[[HomeObject]] == longEar\n super.eat();\n }\n};\n\n*!*\n// bekerja dengan benar\nlongEar.eat(); // Long Ear eats.\n*/!*\n```\n\nIni berfungsi sebagaimana mestinya, karena mekanisme `[[HomeObject]]`. Metode, seperti `longEar.eat`, tahu itu `[[HomeObject]]` dan mengambil metode induk dari prototipe-nya. Tanpa menggunakan`this`.\n\n### Metode tidak \"gratis\"\n\nSeperti yang kita ketahui sebelumnya, umumnya fungsi adalah \"gratis\", tidak terikat ke objek di JavaScript. Jadi mereka dapat disalin di antara objek dan dipanggil dengan `this` lainnya.\n\nKeberadaan `[[HomeObject]]` melanggar prinsip itu, karena metode mengingat objeknya. `[[HomeObject]]` tidak bisa diubah, jadi ikatan ini selamanya.\n\nSatu-satunya tempat dalam bahasa di mana `[[HomeObject]]` digunakan -- adalah `super`. Jadi, jika suatu metode tidak menggunakan `super`, maka kita masih bisa menganggapnya gratis dan menyalin antar objek. Tetapi dengan `super` mungkin ada yang salah.\n\nBerikut demo hasil `super` yang salah setelah menyalin:\n\n```js run\nlet animal = {\n sayHi() {\n alert(`I'm an animal`);\n }\n};\n\n// rabbit mewarisi dari animal\nlet rabbit = {\n __proto__: animal,\n sayHi() {\n super.sayHi();\n }\n};\n\nlet plant = {\n sayHi() {\n alert(\"I'm a plant\");\n }\n};\n\n// tree mewarisi dari plant\nlet tree = {\n __proto__: plant,\n*!*\n sayHi: rabbit.sayHi // (*)\n*/!*\n};\n\n*!*\ntree.sayHi(); // I'm an animal (?!?)\n*/!*\n```\n\nPanggilan ke `tree.sayHi()` menunjukkan \"I'm an animal\". Benar-benar salah.\n\nAlasannya sederhana:\n\n- Di baris `(*)`, metode `tree.sayHi` telah disalin dari`rabbit`. Mungkin kita hanya ingin menghindari duplikasi kode?\n- `[[HomeObject]]` -nya adalah `rabbit`, seperti yang dibuat di`rabbit`. Tidak ada cara untuk mengubah `[[HomeObject]]`.\n- Kode `tree.sayHi()` memiliki `super.sayHi()` di dalamnya. Ini naik dari `rabbit` dan mengambil metode dari`animal`.\n\nBerikut diagram dari apa yang terjadi:\n\n![](super-homeobject-wrong.svg)\n\n### Metode, bukan properti fungsi\n\n`[[HomeObject]]` didefinisikan untuk metode baik di kelas maupun di objek biasa. Tetapi untuk objek, metode harus ditentukan persis sebagai `method()`, bukan sebagai `\"method: function()\"`.\n\nPerbedaannya mungkin tidak terlalu penting bagi kita, tetapi penting untuk JavaScript.\n\nDalam contoh di bawah ini, sintaks non-metode digunakan untuk perbandingan. Properti `[[HomeObject]]` tidak diatur dan warisan tidak berfungsi:\n\n```js run\nlet animal = {\n eat: function() { // sengaja menulis seperti ini, bukan eat() {...\n // ...\n }\n};\n\nlet rabbit = {\n __proto__: animal,\n eat: function() {\n super.eat();\n }\n};\n\n*!*\nrabbit.eat(); // Kesalahan memanggil super (karena tidak ada [[HomeObject]])\n*/!*\n```\n\n## Ringkasan\n\n1. Untuk memperluas kelas: `class Child extends Parent`:\n - Itu berarti `Child.prototype.__proto__` akan menjadi `Parent.prototype`, jadi metode diwariskan/diturunkan.\n2. Saat mengganti konstruktor:\n - Kita harus memanggil konstruktor induk sebagai `super()` di konstruktor `Child` sebelum menggunakan `this`.\n3. Saat mengganti metode lain:\n - Kita dapat menggunakan `super.method()` di metode `Child` untuk memanggil metode `Parent`.\n4. Internal:\n - Metode mengingat kelas/objek mereka di internal properti `[[HomeObject]]`. Begitulah caranya `super` menyelesaikan metode induk.\n - Jadi tidak aman untuk menyalin metode dengan `super` dari satu objek ke objek lainnya.\n\nJuga:\n\n- _Arrow functions_ tidak memiliki `this` atau `super` sendiri, sehingga secara transparan sesuai dengan konteks sekitarnya.\n" }, { "path": "1-js/09-classes/03-static-properties-methods/3-class-extend-object/solution.md", "content": "Pertama, mari kita lihat mengapa kode terakhir tidak berfungsi.\n\nAlasannya menjadi jelas jika kita mencoba menjalankannya. Konstruktor kelas yang mewarisi harus memanggil `super()`. Jika tidak, `\"this\"` tidak akan \"defined\".\n\nJadi, inilah perbaikannya:\n\n```js run\nclass Rabbit extends Object {\n constructor(name) {\n*!*\n super(); // perlu memanggil konstruktor induk saat mewarisi\n*/!*\n this.name = name;\n }\n}\n\nlet rabbit = new Rabbit(\"Rab\");\n\nalert( rabbit.hasOwnProperty('name') ); // true\n```\n\nTapi itu belum semuanya.\n\nBahkan setelah perbaikan, masih ada perbedaan penting dalam `\"class Rabbit extends Object\"` versus `class Rabbit`.\n\nSeperti yang kita tahu, sintaks \"extends\" menyiapkan dua prototipe:\n\n1. Antara `\"prototype\"` dari fungsi konstruktor (untuk metode).\n2. Antara konstruktor berfungsi sendiri (untuk metode statis).\n\nDalam kasus kita, untuk `class Rabbit extends Object` itu berarti:\n\n```js run\nclass Rabbit extends Object {}\n\nalert(Rabbit.prototype.__proto__ === Object.prototype); // (1) true\nalert(Rabbit.__proto__ === Object); // (2) true\n```\n\nJadi `Rabbit` sekarang menyediakan akses ke metode statis `Object` melalui `Rabbit`, seperti ini:\n\n```js run\nclass Rabbit extends Object {}\n\n*!*\n// biasanya kita sebut Object.getOwnPropertyNames\nalert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // a,b\n*/!*\n```\n\nTetapi jika kita tidak punya `extends Object`, lalu `Rabbit.__proto__` tidak diatur ke `Object`.\n\nBerikut demo nya:\n\n```js run\nclass Rabbit {}\n\nalert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true\nalert( Rabbit.__proto__ === Object ); // (2) false (!)\nalert( Rabbit.__proto__ === Function.prototype ); // sebagai fungsi apa pun secara default\n\n*!*\n// error, tidak ada fungsi seperti itu di Rabbit\nalert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // Error\n*/!*\n```\n\nJadi `Rabbit` tidak menyediakan akses ke metode statis `Object` dalam hal itu.\n\nNgomong-ngomong, `Function.prototype` mempunyai fungsi metode \"generic\", seperti `call`, `bind` dll. Mereka terakhir tersedia dalam kedua kasus, karena untuk konstruktor `Object` bawaan, `Object.__proto__ === Function.prototype`.\n\nBerikut gambarnya:\n\n![](rabbit-extends-object.svg)\n\nJadi, sederhananya, ada dua perbedaan:\n\n| class Rabbit | class Rabbit extends Object |\n| ----------------------------------------- | -------------------------------------- |\n| -- | needs to call `super()` in constructor |\n| `Rabbit.__proto__ === Function.prototype` | `Rabbit.__proto__ === Object` |\n" }, { "path": "1-js/09-classes/03-static-properties-methods/3-class-extend-object/task.md", "content": "importance: 3\n\n---\n\n# _Class extends Object?_\n\nSeperti yang kita ketahui, semua objek biasanya diwarisi dari `Object.prototype` dan mendapatkan akses ke metode objek \"generic\" seperti `hasOwnProperty` dll.\n\nMisalnya:\n\n```js run\nclass Rabbit {\n constructor(name) {\n this.name = name;\n }\n}\n\nlet rabbit = new Rabbit(\"Rab\");\n\n*!*\n// metode hasOwnProperty dari Object.prototype\nalert( rabbit.hasOwnProperty('name') ); // true\n*/!*\n```\n\nTapi jika kita mengejanya secara eksplisit seperti `\"class Rabbit extends Object\"`, maka hasilnya akan berbeda dari `\"class Rabbit\"`?\n\nApa perbedaannya?\n\nBerikut contoh kodenya (tidak berhasil -- mengapa? memperbaikinya?):\n\n```js\nclass Rabbit extends Object {\n constructor(name) {\n this.name = name;\n }\n}\n\nlet rabbit = new Rabbit('Rab');\n\nalert(rabbit.hasOwnProperty('name')); // Error\n```\n" }, { "path": "1-js/09-classes/03-static-properties-methods/article.md", "content": "# Properti dan metode statis\n\nKita juga dapat menetapkan metode ke fungsi kelas itu sendiri, bukan ke `\" prototipe \"`-nya. Metode seperti itu disebut _static_.\n\nDi dalam kelas, mereka ditambahkan oleh kata kunci `static`, seperti ini:\n\n```js run\nclass User {\n*!*\n static staticMethod() {\n*/!*\n alert(this === User);\n }\n}\n\nUser.staticMethod(); // true\n```\n\nItu sebenarnya sama dengan menetapkannya sebagai properti secara langsung:\n\n```js run\nclass User {}\n\nUser.staticMethod = function () {\n alert(this === User);\n};\n\nUser.staticMethod(); // true\n```\n\nNilai `this` dalam panggilan `User.staticMethod()` adalah konstruktor kelas `User` itu sendiri (aturan \"object before dot\").\n\nBiasanya, metode statis digunakan untuk mengimplementasikan fungsi yang dimiliki kelas, tetapi tidak untuk objek tertentu darinya.\n\nMisalnya, kita punya objek `Article` dan membutuhkan sebuah fungsi untuk membandingkan mereka. Solusi natural adalah menambahkan metode `Article.compare`, seperti ini:\n\n```js run\nclass Article {\n constructor(title, date) {\n this.title = title;\n this.date = date;\n }\n\n*!*\n static compare(articleA, articleB) {\n return articleA.date - articleB.date;\n }\n*/!*\n}\n\n// penggunaan\nlet articles = [\n new Article(\"HTML\", new Date(2019, 1, 1)),\n new Article(\"CSS\", new Date(2019, 0, 1)),\n new Article(\"JavaScript\", new Date(2019, 11, 1))\n];\n\n*!*\narticles.sort(Article.compare);\n*/!*\n\nalert( articles[0].title ); // CSS\n```\n\nDi sini `Article.compare` berdiri \"di atas\" _articles_, sebagai alat untuk membandingkannya. Ini bukan metode _article_, melainkan seluruh kelas.\n\nContoh lain adalah apa yang disebut metode \"factory\". Bayangkan, kita butuh beberapa cara untuk membuat _article_:\n\n1. Buat dengan parameter yang diberikan (`title`, `date` dsb).\n2. Buat _article_ kosong dengan tanggal hari ini.\n3. ...atau yang lainnya.\n\nCara pertama dapat diterapkan oleh konstruktor. Dan untuk yang kedua kita bisa membuat metode statis kelas.\n\nSeperti `Article.createTodays()` di sini:\n\n```js run\nclass Article {\n constructor(title, date) {\n this.title = title;\n this.date = date;\n }\n\n*!*\n static createTodays() {\n // ingat, this = Article\n return new this(\"Today's digest\", new Date());\n }\n*/!*\n}\n\nlet article = Article.createTodays();\n\nalert( article.title ); // Today's digest\n```\n\nSekarang setiap kali kita perlu membuat _today's digest_, kita dapat memanggil `Article.createTodays()`. Sekali lagi, itu bukan metode _article_, tapi metode seluruh kelas.\n\nMetode statis juga digunakan dalam kelas terkait basis data untuk mencari/menyimpan/menghapus entri dari basis data, seperti ini:\n\n```js\n// dengan asumsi Article adalah kelas khusus untuk mengelola articles\n// metode statis untuk menghapus article:\nArticle.remove({ id: 12345 });\n```\n\n## Properti Statis\n\n[recent browser=Chrome]\n\nProperti statis juga dimungkinkan, mereka terlihat seperti properti kelas biasa, tetapi diawali dengan `static`:\n\n```js run\nclass Article {\n static publisher = 'Ilya Kantor';\n}\n\nalert(Article.publisher); // Ilya Kantor\n```\n\nItu sama dengan penugasan langsung ke `Article`:\n\n```js\nArticle.publisher = 'Ilya Kantor';\n```\n\n## Pewarisan properti dan metode statis [#statics-and-inheritance]\n\nProperti dan metode statis diwarisi.\n\nMisalnya, `Animal.compare` dan `Animal.planet` dalam kode di bawah ini diwariskan dan dapat diakses sebagai `Rabbit.compare` dan `Rabbit.planet`:\n\n```js run\nclass Animal {\n static planet = \"Earth\";\n\n constructor(name, speed) {\n this.speed = speed;\n this.name = name;\n }\n\n run(speed = 0) {\n this.speed += speed;\n alert(`${this.name} runs with speed ${this.speed}.`);\n }\n\n*!*\n static compare(animalA, animalB) {\n return animalA.speed - animalB.speed;\n }\n*/!*\n\n}\n\n// Mewarisi dari Animal\nclass Rabbit extends Animal {\n hide() {\n alert(`${this.name} hides!`);\n }\n}\n\nlet rabbits = [\n new Rabbit(\"White Rabbit\", 10),\n new Rabbit(\"Black Rabbit\", 5)\n];\n\n*!*\nrabbits.sort(Rabbit.compare);\n*/!*\n\nrabbits[0].run(); // Black Rabbit runs with speed 5.\n\nalert(Rabbit.planet); // Earth\n```\n\nSekarang kita dapat memanggil `Rabbit.compare`, yang diwariskan `Animal.compare` akan dipanggil.\n\nBagaimana cara kerjanya? Sekali lagi, menggunakan prototipe. Seperti yang mungkin sudah kamu duga, `extends` memberi `Rabbit` sebagai `[[Prototype]]` mengacu kepada `Animal`.\n\n![](animal-rabbit-static.svg)\n\nJadi, `Rabbit extends Animal` membuat dua acuan `[[Prototype]]`:\n\n1. `Rabbit` fungsi _prototypally_ mewarisi dari fungsi `Animal`.\n2. `Rabbit.prototype` _prototypally_ mewarisi dari `Animal.prototype`.\n\nHasilnya, pewarisan berfungsi baik untuk metode reguler dan statis.\n\nDi sini, mari kita periksa dengan kode:\n\n```js run\nclass Animal {}\nclass Rabbit extends Animal {}\n\n// untuk statis\nalert(Rabbit.__proto__ === Animal); // true\n\n// untuk metode reguler\nalert(Rabbit.prototype.__proto__ === Animal.prototype); // true\n```\n\n## Ringkasan\n\nMetode statis digunakan untuk fungsionalitas yang termasuk dalam kelas \"secara keseluruhan\". Ini tidak terkait dengan instance kelas konkret.\n\nSebagai contoh, metode perbandingan `Article.compare(article1, article2)` atau metode _factory_ `Article.createTodays()`.\n\nMereka diberi label dengan kata `static` dalam deklarasi kelas.\n\nProperti statis digunakan ketika kita ingin menyimpan data tingkat kelas, juga tidak terikat pada sebuah _instance_.\n\nSintaksnya adalah:\n\n```js\nclass MyClass {\n static property = ...;\n\n static method() {\n ...\n }\n}\n```\n\nSecara teknis, deklarasi statis sama dengan menetapkan ke kelas itu sendiri:\n\n```js\nMyClass.property = ...\nMyClass.method = ...\n```\n\nProperti dan metode statis diwarisi.\n\nUntuk `class B extends A` prototipe dari kelas `B` itu sendiri menunjuk ke `A`: `B.[[Prototype]] = A`. Jadi jika bidang tidak ditemukan di `B`, pencarian dilanjutkan di `A`.\n" }, { "path": "1-js/09-classes/04-private-protected-properties-methods/article.md", "content": "# Properti dan metode _private_ dan _protected_\n\nSalah satu prinsip terpenting dari pemrograman berorientasi objek -- membatasi antarmuka internal dari antarmuka eksternal.\n\nItu adalah praktik yang \"harus\" dilakukan dalam mengembangkan sesuatu yang lebih rumit daripada aplikasi \"hello world\".\n\nUntuk memahami ini, mari kita melepaskan diri dari pengembangan dan mengalihkan pandangan kita ke dunia nyata.\n\nBiasanya, perangkat yang kita gunakan cukup rumit. Tetapi membatasi antarmuka internal dari antarmuka eksternal memungkinkan untuk menggunakannya tanpa masalah.\n\n## Contoh kehidupan nyata\n\nMisalnya, mesin kopi. Simpelnya dari luar: tombol, layar, beberapa lubang ... dan tentunya, hasilnya -- kopi yang enak! :)\n\n![](coffee.jpg)\n\nTetapi di dalamnya... (gambar dari panduan perbaikan)\n\n![](coffee-inside.jpg)\n\nBanyak detail. Tetapi kita bisa menggunakannya tanpa mengetahui apapun.\n\nMesin kopi cukup andal, bukan? Kita dapat menggunakannya selama bertahun-tahun, dan jika hanya terjadi kesalahan -- diperbaiki.\n\nRahasia keandalan dan kesederhanaan mesin kopi -- semua detail diatur dengan baik dan _tersembunyi_ di dalamnya.\n\nJika kita melepas tutup pelindung dari mesin kopi, maka menggunakannya akan jauh lebih rumit (di mana harus menekan?), dan berbahaya (dapat menyetrum).\n\nSeperti yang akan kita lihat, dalam pemrograman objek itu seperti mesin kopi.\n\nTetapi untuk menyembunyikan detail bagian dalam, kita tidak akan menggunakan tutup pelindung, melainkan sintaks khusus bahasa dan konvensi.\n\n## Antarmuka internal dan eksternal\n\nDalam pemrograman berorientasi objek, properti dan metode dibagi menjadi 2 kelompok:\n\n- _Antarmuka internal_ -- metode dan properti, dapat diakses dari metode kelas lainnya, tapi tidak dari luar.\n- _Antarmuka eksternal_ -- metode dan properti, dapat diakses juga dari luar kelas.\n\nJika kita melanjutkan analogi dengan mesin kopi -- apa yang tersembunyi di dalam: tabung, elemen pemanas, dan sebagainya -- adalah antarmuka internalnya.\n\nAntarmuka internal digunakan agar objek berfungsi, detailnya saling menggunakan. Misalnya, tabung dipasang ke elemen pemanas.\n\nTetapi dari luar mesin pembuat kopi ditutup oleh tutup pelindungnya, sehingga tidak ada yang bisa menjangkau itu. Detail disembunyikan dan tidak dapat diakses. Kita dapat menggunakan fitur-fiturnya melalui antarmuka eksternal.\n\nJadi, yang kita butuhkan untuk menggunakan sebuah objek adalah mengetahui antarmuka eksternalnya. Kita mungkin sama sekali tidak menyadari cara kerjanya di dalam, dan itu bagus.\n\nItu adalah perkenalan umum.\n\nDi JavaScript, ada dua jenis bidang objek (properti dan metode):\n\n- _Public_: dapat diakses dari mana saja. Mereka terdiri dari antarmuka eksternal. Sampai sekarang kita hanya menggunakan properti dan metode _public_.\n- _Private_: dapat diakses hanya dari dalam kelas. Ini untuk antarmuka internal.\n\nDi banyak bahasa lain juga ada bidang \"protected\": dapat diakses hanya dari dalam kelas dan mereka yang memperluasnya (seperti _private_, tetapi ditambah akses dari kelas yang diwariskan). Mereka juga berguna untuk antarmuka internal. Mereka dalam arti lebih luas daripada yang _private_, karena kita biasanya ingin mewarisi kelas untuk mendapatkan akses ke sana.\n\nBidang _protected_ tidak diterapkan dalam JavaScript pada tingkat bahasa, tetapi dalam praktiknya mereka(_protected_) sangat nyaman, jadi mereka(_protected_) ditiru.\n\nSekarang kita akan membuat mesin kopi di JavaScript dengan semua jenis properti ini. Mesin kopi memiliki banyak detail, kita tidak akan memodelkannya agar tetap sederhana (meskipun kita bisa).\n\n## Melindungi \"waterAmount\"\n\nMari kita buat kelas mesin kopi sederhana dulu:\n\n```js run\nclass CoffeeMachine {\n waterAmount = 0; // jumlah air di dalamnya\n\n constructor(power) {\n this.power = power;\n alert(`Created a coffee-machine, power: ${power}`);\n }\n}\n\n// membuat mesin kopi\nlet coffeeMachine = new CoffeeMachine(100);\n\n// tambahkan air\ncoffeeMachine.waterAmount = 200;\n```\n\nSekarang properti `waterAmount` dan `power` adalah publik. Kita dapat dengan mudah mendapatkan/mengatur dari luar ke nilai apa pun.\n\nMari ganti properti `waterAmount` menjadi _protected_ untuk lebih mengontrolnya. Misalnya, kita tidak ingin siapa pun mengaturnya di bawah nol.\n\n**Properti _protected_ biasanya diawali dengan garis bawah `_`.**\n\nItu tidak diberlakukan pada level bahasa, tetapi ada konvensi terkenal antara pemrogram bahwa properti dan metode seperti itu tidak boleh diakses dari luar.\n\nJadi properti kita akan dipanggil `_waterAmount`:\n\n```js run\nclass CoffeeMachine {\n _waterAmount = 0;\n\n set waterAmount(value) {\n if (value < 0) {\n value = 0;\n }\n this._waterAmount = value;\n }\n\n get waterAmount() {\n return this._waterAmount;\n }\n\n constructor(power) {\n this._power = power;\n }\n}\n\n// membuat mesin kopi\nlet coffeeMachine = new CoffeeMachine(100);\n\n// tambahkan air\ncoffeeMachine.waterAmount = -10; // Error: Negative water\n```\n\nSekarang aksesnya terkendali, jadi pengaturan air di bawah nol gagal.\n\n## _Read-only_ \"power\"\n\nUntuk properti `power`, mari kita membuatnya menjadi _read-only_. Kadang-kadang terjadi bahwa properti harus diatur hanya pada waktu pembuatan, lalu tidak pernah diubah.\n\nPersis seperti itulah kasus mesin kopi: tenaga tidak pernah berubah.\n\nUntuk melakukannya, kita hanya perlu membuat pengambil(_getter_), bukan pengatur(_setter_):\n\n```js run\nclass CoffeeMachine {\n // ...\n\n constructor(power) {\n this._power = power;\n }\n\n get power() {\n return this._power;\n }\n}\n\n// membuat mesin kopi\nlet coffeeMachine = new CoffeeMachine(100);\n\nalert(`Power is: ${coffeeMachine.power}W`); // Power is: 100W\n\ncoffeeMachine.power = 25; // Error (no setter)\n```\n\n````smart header=\"Getter/setter functions\"\nDi sini kita menggunakan sintaks pengambil/pengatur.\n\nTetapi seringkali fungsi `get.../set...` lebih disukai, seperti ini:\n\n```js\nclass CoffeeMachine {\n _waterAmount = 0;\n\n *!*setWaterAmount(value)*/!* {\n if (value < 0) value = 0;\n this._waterAmount = value;\n }\n\n *!*getWaterAmount()*/!* {\n return this._waterAmount;\n }\n}\n\nnew CoffeeMachine().setWaterAmount(100);\n```\n\nItu terlihat sedikit lebih lama, tetapi fungsinya lebih fleksibel. Mereka dapat menerima banyak argumen (bahkan jika kita tidak membutuhkannya sekarang).\n\nDi sisi lain, sintaks get/set lebih pendek, jadi pada akhirnya tidak ada aturan ketat, terserah kamu yang memutuskan.\n````\n\n```smart header=\"Protected fields are inherited\"\nJika kita mewarisi `class MegaMachine extends CoffeeMachine`, maka tidak ada yang menghalangi kita untuk mengakses` this._waterAmount` atau `this._power` dari metode kelas baru.\n\nJadi bidang yang dilindungi tentu saja dapat diwariskan. Tidak seperti privat yang akan kita lihat di bawah.\n```\n\n## Privat \"#waterLimit\"\n\n[recent browser=none]\n\nAda proposal JavaScript yang sudah selesai, hampir dalam standar, yang memberikan dukungan tingkat bahasa untuk properti dan metode privat.\n\nPrivat harus dimulai dengan `#`. Mereka hanya dapat diakses dari dalam kelas.\n\nMisalnya, ada properti privat `#waterLimit` dan metode privat pemeriksaan air `#checkWater`:\n\n```js run\nclass CoffeeMachine {\n*!*\n #waterLimit = 200;\n*/!*\n\n*!*\n #fixWaterAmount(value) {\n if (value < 0) return 0;\n if (value > this.#waterLimit) return this.#waterLimit;\n }\n*/!*\n\n setWaterAmount(value) {\n this.#waterLimit = this.#fixWaterAmount(value);\n }\n\n}\n\nlet coffeeMachine = new CoffeeMachine();\n\n*!*\n// tidak dapat mengakses privat dari luar kelas\ncoffeeMachine.#fixWaterAmount(123); // Error\ncoffeeMachine.#waterLimit = 1000; // Error\n*/!*\n```\n\nPada level bahasa, `#` adalah tanda khusus bahwa bidang tersebut bersifat privat. Kita tidak dapat mengaksesnya dari luar atau dari kelas yang diwariskan.\n\nBidang privat tidak bertentangan dengan bidang publik. Kita bisa memiliki bidang privat `#waterAmount` dan publik `waterAmount` pada saat yang sama.\n\nMisalnya, mari jadikan `waterAmount` sebagai pengakses untuk `#waterAmount`:\n\n```js run\nclass CoffeeMachine {\n #waterAmount = 0;\n\n get waterAmount() {\n return this.#waterAmount;\n }\n\n set waterAmount(value) {\n if (value < 0) value = 0;\n this.#waterAmount = value;\n }\n}\n\nlet machine = new CoffeeMachine();\n\nmachine.waterAmount = 100;\nalert(machine.#waterAmount); // Error\n```\n\nTidak seperti _protected_, bidang privat diberlakukan oleh bahasa itu sendiri. Itu hal yang bagus.\n\nTetapi jika kita mewarisi dari `CoffeeMachine`, maka kita tidak akan memiliki akses langsung ke`#waterAmount`. Kita harus mengandalkan pengambil/pengatur `waterAmount`:\n\n```js\nclass MegaCoffeeMachine extends CoffeeMachine {\n method() {\n*!*\n alert( this.#waterAmount ); // Error: can only access from CoffeeMachine\n*/!*\n }\n}\n```\n\nDalam banyak skenario, batasan seperti itu terlalu parah. Jika kita memperluas `CoffeeMachine`, kita mungkin memiliki alasan yang sah untuk mengakses internalnya. Itulah mengapa bidang protected lebih sering digunakan, meskipun tidak didukung oleh sintaks bahasa.\n\n````warn header=\"Private fields are not available as this[name]\"\nBidang privat itu istimewa.\n\nSeperti yang kita ketahui, biasanya kita bisa mengakses bidang menggunakan `this[name]`:\n\n```js\nclass User {\n ...\n sayHi() {\n let fieldName = \"name\";\n alert(`Hello, ${*!*this[fieldName]*/!*}`);\n }\n}\n```\n\nDengan bidang privat itu tidak mungkin: `this['#name']` tidak berfungsi. Itu adalah batasan sintaks untuk memastikan privasi.\n````\n\n## Ringkasan\n\nDalam istilah PBO (Pemrograman Berorientasi Objek), membatasi antarmuka internal dari antarmuka eksternal disebut [enkapsulasi]().\n\nItu memberi manfaat sebagai berikut:\n\nPerlindungan bagi pengguna, agar mereka tidak menembak diri sendiri\n: Bayangkan, ada tim pengembang yang menggunakan mesin kopi. Itu dibuat oleh perusahaan \"Mesin Kopi Terbaik\", dan berfungsi dengan baik, tetapi penutup pelindungnya dilepas. Jadi antarmuka internal terekspos.\n\n Semua pengembang sopan -- mereka menggunakan mesin kopi sebagaimana mestinya. Tapi salah satu dari mereka, John, memutuskan bahwa dialah yang paling pintar, dan membuat beberapa perubahan di internal mesin kopi. Jadi mesin kopi mati dua hari kemudian.\n\n Itu jelas bukan salah John, melainkan orang yang melepas penutup pelindung dan membiarkan John melakukan manipulasinya.\n\n Hal yang sama dalam pemrograman. Jika pengguna kelas akan mengubah hal-hal yang tidak dimaksudkan untuk diubah dari luar -- konsekuensinya tidak dapat diprediksi.\n\nDidukung\n: Situasi dalam pemrograman lebih rumit daripada dengan mesin kopi di kehidupan nyata, karena kita tidak hanya membelinya sekali. Kode terus mengalami pengembangan dan peningkatan.\n\n **Jika kita membatasi secara ketat antarmuka internal, maka pengembang kelas dapat dengan bebas mengubah properti dan metode internalnya, bahkan tanpa memberi tahu pengguna.**\n\n Jika kamu adalah pengembang dari kelas seperti itu, senang mengetahui bahwa metode privat dapat diubah namanya dengan aman, parameternya dapat diubah, dan bahkan dihapus, karena tidak ada kode eksternal yang bergantung padanya.\n\n Untuk pengguna, ketika versi baru keluar, itu mungkin perombakan total secara internal, tetapi masih mudah untuk meningkatkan jika antarmuka eksternal sama.\n\nMenyembunyikan kerumitan\n: Orang suka menggunakan hal-hal yang sederhana. Setidaknya dari luar. Apa yang ada di dalamnya adalah hal yang berbeda.\n\n Pemrogram tidak terkecuali.\n\n **Selalu nyaman jika detail implementasi disembunyikan, dan tersedia antarmuka eksternal yang sederhana dan terdokumentasi dengan baik.**\n\nUntuk menyembunyikan antarmuka internal kita menggunakan properti _protected_ atau privat:\n\n- Bidang _protected_ dimulai dengan `_`. Itu konvensi yang terkenal, tidak diberlakukan di tingkat bahasa. Pemrogram hanya boleh mengakses bidang yang dimulai dengan `_` dari kelasnya dan kelas yang mewarisinya.\n- Bidang privat dimulai dengan `#`. JavaScript memastikan kita hanya dapat mengakses mereka dari dalam kelas.\n\nSaat ini, bidang privat tidak didukung dengan baik di antara browser, tetapi dapat di-polyfill.\n" }, { "path": "1-js/09-classes/05-extend-natives/article.md", "content": "# Meng-_extend_ `class` bawaan\n\n`class` bawaan seperti Array, Map dan lainnya juga dapat di-_extend_.\n\nContohnya, `PowerArray` disini mewarisi dari _native_ `Array`:\n\n```js run\n// menambahkan satu method ke dalam `PowerArray` (bisa lebih)\nclass PowerArray extends Array {\n isEmpty() {\n return this.length === 0;\n }\n}\n\nlet arr = new PowerArray(1, 2, 5, 10, 50);\nalert(arr.isEmpty()); // false\n\nlet filteredArr = arr.filter((item) => item >= 10);\nalert(filteredArr); // 10, 50\nalert(filteredArr.isEmpty()); // false\n```\n\nMohon perhatikan hal yang sangat menarik. _Method_ bawaan seperti `filter`, `map`, dan yang lainnya -- mengembalikan objek baru dengan tipe `PowerArray` yang diwariskan. Implementasi didalamnya menggunakan properti `constructor` untuk hal itu.\n\nPada contoh di atas,\n\n```js\narr.constructor === PowerArray;\n```\n\nSaat `arr.filter()` dipanggil, secara internal itu membuat senarai hasil yang baru menggunakan `arr.constructor`, bukan _basic_ `Array`. Itu sebenarnya sangat menakjubkan, karena kita bisa tetap menggunakan `PowerArray` _method_ lebih jauh.\n\nBahkan, kita bisa menyesuaikan perilaku khusus untuk itu.\n\nKita bisa menambahkan _static getter_ `Symbol.species` ke dalam `class`. Jika ada, ia harus mengembalikan `constructor` yang akan JavaScript gunakan secara internal untuk membuat entitas baru di dalam `map`, `filter`, dan seterusnya.\n\nJika kita ingin _method_ bawaan seperti `map` atau `filter` untuk mengembalikan senarai biasa, kita bisa mengembalikannya di dalam `Symbol.species`, seperti contohnya disini:\n\n```js run\nclass PowerArray extends Array {\n isEmpty() {\n return this.length === 0;\n }\n\n // method bawaan menggunakan ini sebagai `constructor`\n static get [Symbol.species]() {\n return Array;\n }\n}\n\nlet arr = new PowerArray(1, 2, 5, 10, 50);\nalert(arr.isEmpty()); // false\n\n// `filter` membuat senarai baru `arr.constructor[Symbol.species]` sebagai `constructor`\nlet filteredArr = arr.filter((item) => item >= 10);\n\n// filteredArr bukan PowerArray, tapi sebuah Array\nalert(filteredArr.isEmpty()); // Error: filteredArr.isEmpty is not a function\n```\n\nSeperti yang anda lihat, sekarang `.filter` mengembalikan `Array`. Jadi _function_ yang di-_extend_ tidak diteruskan.\n\n```smart header=\"Other collections work similarly\"\nKoleksi lain, seperti `Map` dan `Set`, berfungsi sama. Mereka juga menggunakan `Symbol.species`.\n```\n\n## Tidak ada _static inheritance_ pada _built-in_\n\nObjek bawaan memiliki _static method_-nya sendiri, misalnya `Object.keys`, `Array.isArray`, dll.\n\nSeperti yang kita tahu, _native class_ meng-_extend_ satu sama lain. Misalnya, `Array` meng-_extend_ `Object`.\n\nBiasanya, ketika sebuah `class` meng-_extend_ `class` yang lainnya, kedua _method static_ dan _non-static_ akan diwariskan. Itu dijelaskan sepenuhnya dalam artikel [](info:static-properties-methods#statics-and-inheritance).\n\nTapi `class` bawaan adalah pengecualian. Mereka tidak mewarisi satu sama lain.\n\nContohnya, `Array` dan `Date` mewarisi dari `Object`, sehingga _instance_ mereka memiliki _method_ dari `Object.prototype`. Tapi `Array.[[Prototype]]` tidak mereferensikan `Object`, sehingga tidak ada, semisalnya, `Array.keys()` (atau `Date.keys()`) _static method_.\n\nBerikut adalah struktur gambar untuk `Date` dan `Object`:\n\n![](object-date-inheritance.svg)\n\nSeperti yang Anda lihat, tidak ada hubungan antara `Date` dan `Object`. Mereka independen, hanya `Date.prototype` mewarisi dari `Object.prototype`.\n\nItu adalah perbedaan penting dari warisan antara objek bawaan dibandingkan dengan apa yang kita dapat dengan `extends`.\n" }, { "path": "1-js/09-classes/06-instanceof/1-strange-instanceof/solution.md", "content": "Yah, memang terlihat aneh.\n\nTetapi `instanceof` tidak peduli dengan fungsinya, melainkan tentang `prototype`, yang cocok dengan rantai prototipe.\n\nDan di sini `a.__proto__ == B.prototype`, jadi `instanceof` mengembalikan `true`.\n\nJadi, dengan menggunakan logika `instanceof`, `prototype` sebenarnya mendefinisikan tipe, bukan fungsi konstruktor.\n" }, { "path": "1-js/09-classes/06-instanceof/1-strange-instanceof/task.md", "content": "importance: 5\n\n---\n\n# \"instanceof\" Aneh\n\nPada kode dibawah, kenapa `instanceof` mengembalikan `true`? Dengan jelas kita dapat melihat `a` tidak dibuat oleh `B()`.\n\n```js run\nfunction A() {}\nfunction B() {}\n\nA.prototype = B.prototype = {};\n\nlet a = new A();\n\n*!*\nalert( a instanceof B ); // true\n*/!*\n```\n" }, { "path": "1-js/09-classes/06-instanceof/article.md", "content": "# Pengecekan kelas: \"instanceof\"\n\nOperator `instanceof` memungkinkan kita untuk memeriksa apakah suatu _object_ milik _class_ tertentu. `instanceof` juga memperhatikan _inheritance_.\n\nPengecekan seperti itu mungkin diperlukan dalam beberapa kasus. Di sini kita akan menggunakannya untuk membangun fungsi *polymorphic*, yang memperlakukan argumen secara berbeda bergantung pada tipenya.\n\n## Operator instanceof [#ref-instanceof]\n\nSintaksnya adalah:\n```js\nobj instanceof Class\n```\n\nAkan mengembalikan `true` jika `obj` dimiliki oleh `Class` atau kelas turunannya.\n\nMisalnya:\n\n```js run\nclass Rabbit {}\nlet rabbit = new Rabbit();\n\n// apakah ini merupakan object dari kelas Rabbit?\n*!*\nalert( rabbit instanceof Rabbit ); // true\n*/!*\n```\n\nItu juga bekerja dengan fungsi _constructor_:\n\n```js run\n*!*\n// dari pada class\nfunction Rabbit() {}\n*/!*\n\nalert( new Rabbit() instanceof Rabbit ); // true\n```\n\n...Dan kelas bawaan seperti `Array`:\n\n```js run\nlet arr = [1, 2, 3];\nalert( arr instanceof Array ); // true\nalert( arr instanceof Object ); // true\n```\n\nHarap dicatat bahwa `arr` juga termasuk dalam kelas `Object`. Itu karena `Array` secara prototipikal mewarisi dari` Object`.\n\nNormalnya, `instanceof` memeriksa rantai _prototype_ untuk pemeriksaan. Kita juga dapat menyetel _custom logic_ dalam _static method_ `Symbol.hasInstance`.\n\nAlgoritma `obj instanceof Class` bekerja kurang lebih sebgai berikut:\n\n1. Jika terdapat _static method_ `Symbol.hasInstance`, maka panggil saja: `Class[Symbol.hasInstance](obj)`. Itu akan mengembalikan `true` atau `false`, selesai. Begitulah cara kita bisa menyesuaikan perilaku dari `instanceof`.\n\n Sebagai contoh:\n\n ```js run\n // menyiapkan instanceOf yang berasumsi\n // apapun yang memiliki properti canEat adalah binatang\n class Animal {\n static [Symbol.hasInstance](obj) {\n if (obj.canEat) return true;\n }\n }\n\n let obj = { canEat: true };\n\n alert(obj instanceof Animal); // true: Animal[Symbol.hasInstance](obj) dipanggil\n ```\n\n2. Kebanyakan kelas tidak memiliki `Symbol.hasInstance`. Dalam kasus ini, logika standar digunakan: `obj instanceOf Class` Memeriksa apakah `Class.prototype` sama dengan salah satu _prototype_ dalam rantai _prototype_`obj` .\n\n Dengan kata lain, bandingkan satu sama lain:\n ```js\n obj.__proto__ === Class.prototype?\n obj.__proto__.__proto__ === Class.prototype?\n obj.__proto__.__proto__.__proto__ === Class.prototype?\n ...\n // jika jawabannya true, return true\n // jika tidak, jika kita mencapai ujung rantai, return false\n ```\n\n Pada contoh diatas `rabbit.__proto__ === Rabbit.prototype`, sehingga akan memberikan jawaban segera.\n\n Dalam kasus _inheritance_, kesamaan akan berada pada langkah kedua:\n\n ```js run\n class Animal {}\n class Rabbit extends Animal {}\n\n let rabbit = new Rabbit();\n *!*\n alert(rabbit instanceof Animal); // true\n */!*\n\n // rabbit.__proto__ === Rabbit.prototype\n *!*\n // rabbit.__proto__.__proto__ === Animal.prototype (match!)\n */!*\n ```\n\nBerikut ilustrasi tentang perbandingan `rabbit instanceof Animal` dengan `Animal.prototype`:\n\n![](instanceof.svg)\n\nOmong-omong, terdapat juga _method_ [objA.isPrototypeOf(objB)](mdn:js/object/isPrototypeOf), yang mengembalikan `true` jika `objA` berada di suatu tempat dalam rantai _prototypes_ untuk `objB`. Jadi pengujian `obj instanceof Class` bisa dirumuskan sebagai `Class.prototype.isPrototypeOf(obj)`.\n\nIni lucu, tetapi _constructor_ `Class` itu sendiri tidak ikut dalam pemeriksaan! Hanya rangkaian dari _prototype_ dan `Class.prototype` yang penting.\n\nItu bisa menimbulkan konsekuensi yang menarik ketika properti `prototype` diubah setelah objek dibuat.\n\nSeperti:\n\n```js run\nfunction Rabbit() {}\nlet rabbit = new Rabbit();\n\n// mengubah prototype\nRabbit.prototype = {};\n\n// ...bukan kelinci lagi!\n*!*\nalert( rabbit instanceof Rabbit ); // false\n*/!*\n```\n\n## Bonus: Object.prototype.toString untuk tipe\n\nKita tahu bahwa _plain object_ akan diubah menjadi _string_ sebagai `[object Object]`:\n\n```js run\nlet obj = {};\n\nalert(obj); // [object Object]\nalert(obj.toString()); // sama\n```\n\nItulah implementasi dari `toString`. Tetapi ada fitur tersembunyi yang membuat `toString` menjadi lebih _powerful_ dari itu. Kita bisa menggunakannya sebagai perluasan dari `typeof` dan alternatif untuk `instanceof`.\n\nTerdengar aneh? Tentu. Mari kita cari tahu.\n\nDengan [spesifikasi](https://tc39.github.io/ecma262/#sec-object.prototype.tostring), `toString` bawaan dapat diekstrak dari object dan dijalankan dalam konteks nilai lainnya. Dan hasilnya tergantung pada nilai tersebut.\n\n- Untuk angka, akan menjadi `[object Number]`\n- Untuk _boolean_, akan menjadi `[object Boolean]`\n- Untuk `null`: `[object Null]`\n- Untuk `undefined`: `[object Undefined]`\n- Untuk _array_: `[object Array]`\n- ...dll (dapat disesuaikan).\n\nMari kita tunjukkan:\n\n```js run\n// copy toString method kedalam sebuah variabel\nlet objectToString = Object.prototype.toString;\n\n// tipe apa ini?\nlet arr = [];\n\nalert( objectToString.call(arr) ); // [object *!*Array*/!*]\n```\n\nDisini kita gunakan [_call_](mdn:js/function/call) seperti dijelaskan dalam bab [](info:call-apply-decorators) untuk menjalankan fungsi `objectToString` dalam konteks `this=arr`.\n\nSecara internal, algoritme `toString` memeriksa `this` dan mengembalikan hasil yang sesuai. Contoh lainnya:\n\n```js run\nlet s = Object.prototype.toString;\n\nalert( s.call(123) ); // [object Number]\nalert( s.call(null) ); // [object Null]\nalert( s.call(alert) ); // [object Function]\n```\n\n### Symbol.toStringTag\n\nPerilaku object `toString` dapat disesuaikan dengan menggunakan properti objek khusus `Symbol.toStringTag`.\n\nSebagai contoh:\n\n```js run\nlet user = {\n [Symbol.toStringTag]: \"User\"\n};\n\nalert( {}.toString.call(user) ); // [object User]\n```\n\nUntuk sebagian besar objek yang spesifik pada _environment_, terdapat properti seperti itu. Berikut beberapa contoh untuk browser yang spesifik:\n\n```js run\n// toStringTag untuk objek dan kelas yang spesifik pada environtment:\nalert( window[Symbol.toStringTag]); // Window\nalert( XMLHttpRequest.prototype[Symbol.toStringTag] ); // XMLHttpRequest\n\nalert( {}.toString.call(window) ); // [object Window]\nalert( {}.toString.call(new XMLHttpRequest()) ); // [object XMLHttpRequest]\n```\n\nDapat dilihat, hasilnya persis `Symbol.toStringTag` (jika ada), digabungkan ke dalam `[object ...]`.\n\nPada akhirnya kami memiliki _\"typeof on steroids\"_ yang tidak hanya akan berfungsi untuk tipe data primitif, tetapi juga untuk objek bawaan dan bahkan dapat disesuaikan.\n\nKita dapat menggunakan `{}.toString.call` daripada `instanceof` untuk objek bawaan ketika ingin mendapatkan tipe sebagai string daripada hanya untuk diperiksa.\n\n## Ringkasan\n\nMari kita rangkum metode pengecekan tipe yang kita ketahui:\n\n| | bekerja pada | mengembalikan |\n|---------------|-------------|---------------|\n| `typeof` | primitif | string |\n| `{}.toString` | primitif, objek bawaan, objek dengan `Symbol.toStringTag` | string |\n| `instanceof` | objek | true/false |\n\nDapat kita lihat, `{}.toString` secara teknis \"lebih _advanced_\" `typeof`.\n\nDan operator `instanceof` akan lebih berguna ketika kita bekerja dengan hirearki kelas dan ingin memeriksa kelas yang memperhatikan _inheritance_.\n" }, { "path": "1-js/09-classes/07-mixins/article.md", "content": "# _Mixins_\n\nDalam JavaScript kita hanya dapat mewarisi dari satu objek. Hanya ada satu `[[Prototype]]` untuk sebuah objek. Dan sebuah kelas hanya dapat memperluas satu kelas lainnya.\n\nTapi terkadang hal itu terasa membatasi. Misalnya, kita memiliki kelas `StreetSweeper` dan kelas `Bicycle`, dan ingin membuat campurannya: `StreetSweepingBicycle`.\n\nAtau kita memiliki kelas `User` dan kelas `EventEmitter` yang mengimplementasikan pembuatan peristiwa, dan kita ingin menambahkan fungsionalitas `EventEmitter` ke `User`, sehingga pengguna kita dapat memancarkan peristiwa.\n\nAda konsep yang bisa membantu di sini, yang disebut \"mixin\".\n\nSeperti yang didefinisikan di Wikipedia, [_mixin_](https://en.wikipedia.org/wiki/Mixin) adalah kelas yang berisi metode yang dapat digunakan oleh kelas lain tanpa perlu mewarisinya.\n\nDengan kata lain, _mixin_ menyediakan metode yang mengimplementasikan perilaku tertentu, tetapi kami tidak menggunakannya sendiri, kita menggunakannya untuk menambahkan perilaku ke kelas lain.\n\n## Contoh _mixin_\n\nCara termudah untuk mengimplementasikan _mixin_ dalam JavaScript adalah membuat objek dengan metode yang berguna, sehingga kita dapat dengan mudah menggabungkannya menjadi prototipe kelas apa pun.\n\nMisalnya di sini mixin `sayHiMixin` digunakan untuk menambahkan beberapa \"ucapan\" untuk `User`:\n\n```js run\n*!*\n// mixin\n*/!*\nlet sayHiMixin = {\n sayHi() {\n alert(`Hello ${this.name}`);\n },\n sayBye() {\n alert(`Bye ${this.name}`);\n }\n};\n\n*!*\n// penggunaan:\n*/!*\nclass User {\n constructor(name) {\n this.name = name;\n }\n}\n\n// salin metodenya\nObject.assign(User.prototype, sayHiMixin);\n\n// sekarang User dapat berkata hi\nnew User(\"Dude\").sayHi(); // Hello Dude!\n```\n\nTidak ada warisan, tetapi penyalinan metode sederhana. Jadi, `User` dapat mewarisi dari kelas lain dan juga menyertakan _mixin_ untuk \"mencampur\" metode tambahan, seperti ini:\n\n```js\nclass User extends Person {\n // ...\n}\n\nObject.assign(User.prototype, sayHiMixin);\n```\n\n_Mixin_ dapat memanfaatkan warisan di dalam dirinya sendiri.\n\nMisalnya, di sini `sayHiMixin` mewarisi dari `sayMixin`:\n\n```js run\nlet sayMixin = {\n say(phrase) {\n alert(phrase);\n }\n};\n\nlet sayHiMixin = {\n __proto__: sayMixin, // (atau kita bisa gunakan Object.create untuk mengatur prototipe di sini)\n\n sayHi() {\n *!*\n // panggil metode induk\n */!*\n super.say(`Hello ${this.name}`); // (*)\n },\n sayBye() {\n super.say(`Bye ${this.name}`); // (*)\n }\n};\n\nclass User {\n constructor(name) {\n this.name = name;\n }\n}\n\n// salin metodenya\nObject.assign(User.prototype, sayHiMixin);\n\n// sekarang User dapat berkata hi\nnew User(\"Dude\").sayHi(); // Hello Dude!\n```\n\nPerhatikan bahwa panggilan ke metode induk `super.say()` dari `sayHiMixin` (pada baris berlabel `(*)`) mencari metode dalam prototipe _mixin_ tersebut, bukan kelasnya.\n\nBerikut diagramnya (lihat bagian kanan):\n\n![](mixin-inheritance.svg)\n\nItu karena metode `sayHi` dan `sayBye` awalnya dibuat di `sayHiMixin`. Jadi, meskipun disalin, properti internal `[[HomeObject]]` mereferensikan `sayHiMixin`, seperti yang ditunjukkan pada gambar di atas.\n\nKarena `super` mencari metode induk di `[[HomeObject]].[[Prototype]]`, itu berarti mencari `sayHiMixin.[[Prototype]]`, bukan `User.[[Prototype]]`.\n\n## Peristiwa _Mixin_\n\nSekarang mari kita membuat _mixin_ untuk kehidupan nyata.\n\nFitur penting dari banyak objek browser (misalnya) adalah mereka dapat menghasilkan peristiwa. Peristiwa adalah cara terbaik untuk \"menyiarkan informasi\" kepada siapa pun yang menginginkannya. Jadi mari kita membuat _mixin_ yang memungkinkan kita dengan mudah menambahkan fungsi terkait peristiwa ke kelas/objek apa pun.\n\n- _Mixin_ akan menyediakan metode `.trigger(name, [...data])` untuk \"menghasilkan peristiwa\" ketika sesuatu yang penting terjadi padanya. Argumen `name` adalah nama peristiwa, secara opsional diikuti oleh argumen tambahan dengan data peristiwa.\n- Juga metode `.on(name, handler)` yang menambahkan fungsi `handler` sebagai pendengar peristiwa dengan nama yang diberikan. Ini akan dipanggil ketika sebuah peristiwa dengan `name` yang diberikan terpicu, dan mendapatkan argumen dari panggilan `.trigger`.\n- ...Dan metode `.off(name, handler)` yang menghapus pendengar `handler`.\n\nSetelah menambahkan _mixin_, sebuah objek `user` akan dapat membuat peristiwa `\"login\"` saat pengunjung masuk. Dan objek lain, katakanlah, `calendar` mungkin ingin mendengarkan peristiwa seperti itu untuk memuat kalender bagi orang yang masuk.\n\nAtau, `menu` dapat menghasilkan peristiwa `\"select\"` ketika item menu dipilih, dan objek lain dapat menetapkan penangan untuk bereaksi pada peristiwa itu. Dan seterusnya.\n\nBerikut kodenya:\n\n```js run\nlet eventMixin = {\n /**\n * Berlangganan ke peristiwa, menggunakan:\n * menu.on('select', function(item) { ... }\n */\n on(eventName, handler) {\n if (!this._eventHandlers) this._eventHandlers = {};\n if (!this._eventHandlers[eventName]) {\n this._eventHandlers[eventName] = [];\n }\n this._eventHandlers[eventName].push(handler);\n },\n\n /**\n * Membatalkan langganan, menggunakan:\n * menu.off('select', handler)\n */\n off(eventName, handler) {\n let handlers = this._eventHandlers?.[eventName];\n if (!handlers) return;\n for (let i = 0; i < handlers.length; i++) {\n if (handlers[i] === handler) {\n handlers.splice(i--, 1);\n }\n }\n },\n\n /**\n * menghasilkan peristiwa dengan nama dan data yang diberikan\n * this.trigger('select', data1, data2);\n */\n trigger(eventName, ...args) {\n if (!this._eventHandlers?.[eventName]) {\n return; // tidak ada penangan untuk nama peristiwa itu\n }\n\n // panggil penangannya\n this._eventHandlers[eventName].forEach((handler) =>\n handler.apply(this, args)\n );\n },\n};\n```\n\n- `.on(eventName, handler)` -- menetapkan fungsi `handler` untuk dijalankan ketika peristiwa dengan nama itu terjadi. Secara teknis, ada properti `_eventHandlers` yang menyimpan senarai penangan untuk setiap nama peristiwa, dan itu hanya menambahkannya ke daftar.\n- `.off(eventName, handler)` -- menghapus fungsi dari daftar penangan.\n- `.trigger(eventName, ...args)` -- menghasilkan peristiwa: semua penangan dari `_eventHandlers[eventName]` dipanggil, dengan daftar argumen `...args`.\n\nPenggunaan:\n\n```js run\n// Membuat kelas\nclass Menu {\n choose(value) {\n this.trigger(\"select\", value);\n }\n}\n// Tambahkan mixin dengan metode terkait peristiwa\nObject.assign(Menu.prototype, eventMixin);\n\nlet menu = new Menu();\n\n// tambahkan penangan, untuk dipanggil saat seleksi:\n*!*\nmenu.on(\"select\", value => alert(`Value selected: ${value}`));\n*/!*\n\n// memicu peristiwa => penangan di atas berjalan dan menunjukkan:\n// Value selected: 123\nmenu.choose(\"123\");\n```\n\nSekarang, jika kita ingin kode apa pun bereaksi terhadap pilihan menu, kita dapat mendengarkannya dengan `menu.on(...)`.\n\nDan _mixin_ `eventMixin` membuatnya mudah untuk menambahkan perilaku tersebut ke sebanyak mungkin kelas yang kita inginkan, tanpa mengganggu rantai pewarisan.\n\n## Ringkasan\n\n_Mixin_ -- adalah istilah umum pemrograman berorientasi objek: kelas yang berisi metode untuk kelas lain.\n\nBeberapa bahasa lain mengizinkan banyak pewarisan. JavaScript tidak mendukung banyak pewarisan, tetapi _mixin_ dapat diimplementasikan dengan menyalin metode ke dalam prototipe.\n\nKita bisa menggunakan _mixin_ sebagai cara untuk menambah kelas dengan menambahkan beberapa perilaku, seperti penanganan peristiwa seperti yang telah kita lihat di atas.\n\n_Mixin_ dapat menjadi titik konflik jika secara tidak sengaja menimpa metode kelas yang ada. Jadi umumnya orang harus berpikir dengan baik tentang metode penamaan _mixin_, untuk meminimalkan kemungkinan hal itu terjadi.\n" }, { "path": "1-js/09-classes/07-mixins/head.html", "content": "\n" }, { "path": "1-js/09-classes/index.md", "content": "# Kelas\n" }, { "path": "1-js/10-error-handling/1-try-catch/1-finally-or-code-after/solution.md", "content": "Perbedaannya menjadi jelas ketika kita melihat kode di dalam suatu fungsi.\n\nPerilakunya berbeda jika ada lompatan keluar dari `try..catch`.\n\nMisalnya, ketika ada `return` di dalam` try..catch`. Klausa `finally` berfungsi jika *ada* ya keluar dari` try..catch`, bahkan melalui pernyataan `return`: tepat setelah` try..catch` selesai, tetapi sebelum kode pemanggil mendapatkan kontrol.\n\n```js run\nfunction f() {\n try {\n alert('start');\n*!*\n return \"result\";\n*/!*\n } catch (err) {\n /// ...\n } finally {\n alert('cleanup!');\n }\n}\n\nf(); // cleanup!\n```\n\n.. Atau ketika ada `throw`, seperti di sini:\n\n```js run\nfunction f() {\n try {\n alert('start');\n throw new Error(\"an error\");\n } catch (err) {\n // ...\n if(\"can't handle the error\") {\n*!*\n throw err;\n*/!*\n }\n\n } finally {\n alert('cleanup!')\n }\n}\n\nf(); // cleanup!\n```\n\nBagian `finally` yang menjamin proses pembersihan di sini. Jika kita hanya meletakkan kode di akhir `f`, itu tidak akan berjalan dalam situasi ini.\n" }, { "path": "1-js/10-error-handling/1-try-catch/1-finally-or-code-after/task.md", "content": "Nilai Penting: 5\n\n---\n\n# Finally atau hanya kode biasa?\n\nBandingkan dua fragmen kode.\n\n1. Yang pertama menggunakan `finally` untuk mengeksekusi kode setelah` try..catch`:\n\n ```js\n try {\n work work\n } catch (err) {\n handle errors\n } finally {\n *!*\n cleanup the working space\n */!*\n }\n ```\n2. Fragmen kedua melakukan pembersihan tepat setelah `try..catch`:\n\n ```js\n try {\n work work\n } catch (err) {\n handle errors\n }\n\n *!*\n cleanup the working space\n */!*\n ```\n\nKita pasti membutuhkan pembersihan setelah pekerjaan, tidak masalah apakah ada kesalahan atau tidak.\n\nApakah ada keuntungan di sini dalam menggunakan `finally` atau kedua fragmen kode sama? Jika ada keuntungan seperti itu, berikan contoh ketika itu penting.\n" }, { "path": "1-js/10-error-handling/1-try-catch/article.md", "content": "# Penanganan eror, \"try..catch\"\n\n\nTidak peduli seberapa hebatnya kita dalam pemograman, terkadang kodingan kita memiliki banyak eror. Mereka mungkin muncul dikarenakan kesalahan kita, input dari user yang tidak terduga, eror respon dari server, dan juga berbagai macam alasan lainnya.\n\nBiasanya, sebuah kodingan/scrip \"terhenti\" (tiba-tiba berhenti) dikarenakan adanya eror, menampilkan erornya pada console. \n\nTapi terdapat sebuah sintaks `try..catch` yang memperbolehkan kita untuk \"menangkap\" hasil eror sehingga skrip bisa berjalan sesuai dengan arahan kita, dibanding hanya berhenti saja.\n\n## Sintaks \"try..catch\"\n\nSintaks `try..catch` membentuk dua bagian utama: pertama `try`, dan kemudian `catch`:\n\n```js\ntry {\n\n // kodingan disini\n\n} catch (err) {\n\n // Penanganan jika eror\n\n}\n```\n\nMereka akan bekerja seperti ini:\n\n1. Pertama, kodingan pada `try {...}` akan dijalankan.\n2. Jika tidak terdapat eror, maka `catch(err)` akan dihiraukan: prosesnya akan mencapai ujung bagian `try` dan kemudian berlanjut, melewati bagian `catch`.\n3. Jika terdapat eror, maka bagian `try` akan berhenti berjalan, dan alur prosesnya akan berlanjut pada awal bagian `catch(err)`. Variabel `err` (yang mana kita bisa ganti dengan nama apapun) akan mengandung eror objek dengan keterangan eror didalamnya.\n\n![](try-catch-flow.svg)\n\nJadi, sebuah eror didalam bagian `try {…}` tidak akan memberhentikan kodingan tersebut -- kita memiliki sebuah kesempatan untuk menanganinya pada bagian `catch`.\n\nMari kita lihat contoh lainnya.\n\n- Sebuah contoh tanpa eror: menampilkan `alert` `(1)` dan `(2)`:\n\n ```js run\n try {\n\n alert('Start of try runs'); // *!*(1) <--*/!*\n\n // ...tidak ada eror disini\n\n alert('End of try runs'); // *!*(2) <--*/!*\n\n } catch (err) {\n\n alert('Catch is ignored, because there are no errors'); // (3)\n\n }\n ```\n- Sebuah contoh dengan eror: shows `(1)` dan `(3)`:\n\n ```js run\n try {\n\n alert('Start of try runs'); // *!*(1) <--*/!*\n\n *!*\n lalala; // error, variable is not defined!\n */!*\n\n alert('End of try (never reached)'); // (2)\n\n } catch (err) {\n\n alert(`Error has occurred!`); // *!*(3) <--*/!*\n\n }\n ```\n\n\n````warn header=\"`try..catch` hanya akan bekerja pada eror runtime\"\nUntuk `try..catch` agar bekerja, kodingan tersebut harus bisa dijalankan. Dengan artian lain, itu harus dalam bahasa javascript yang valid.\n\nMereka tidak akan bekerja jika kodingan tersebut secara sintaks salah, sebagai contoh jika mereka memiliki kurung kurawal yang tidak sama:\n\n\n```js run\ntry {\n {{{{{{{{{{{{\n} catch (err) {\n alert(\"The engine can't understand this code, it's invalid\");\n}\n```\nMesin Javascript pertama membaca kodingan tersebut, dan menjalankannya. eror yang terjadi pada saat proses pembacaan disebut sebagai eror \"parse-time\" dan tidak dapat dipulihkan (dari dalam kodingan tersebut). Itu dikarenakan mesin javascript tidak mengerti kodingan .\n\nJadi, `try..catch` hanya dapat menangani eror yang terjadi pada kodingan yang valid. eror demikian biasanya dinamakan sebagai \"eror runtime\" atau terkadang, \"exceptions\".\n````\n\n\n````warn header=\"`try..catch` bekerja secara sinkronis\"\nJika sebuah exception terjadi pada kodingan yang \"terjadwal\", seperti pada `setTimeout`, maka `try..catch` tidak akan menangkapnya: \n\n```js run\ntry {\n setTimeout(function() {\n noSuchVariable; // kodingan akan berhenti disini\n }, 1000);\n} catch (err) {\n alert( \"won't work\" );\n}\n```\n\nItu dikarenakan fungsi tersebut dijalankan nanti, ketika mesin javascript telah meninggalkan bagian pada `try..catch`.\n\nUntuk menangkap sebuah exception didalam sebuah fungsi yang terjadwal, `try..catch` harus terjadi didalam fungsi tersebut:\n```js run\nsetTimeout(function() {\n try { \n noSuchVariable; // try..catch menangani eror tersebut!\n } catch {\n alert( \"error is caught here!\" );\n }\n}, 1000);\n```\n````\n\n## Eror Objek\n\nKetika sebuah eror terjadi, Javascript menghasilkan sebuah ojek yang berisikan keterangan terkait eror tersebut. Objek itu kemudian dilewatkan sebagai sebuah argumen pada bagian `catch`:\n\n```js\ntry {\n // ...\n} catch(err) { // <-- \"error object\", bisa menggunakan kata lain selain err\n // ...\n}\n```\n\nUntuk semua eror bawaan, eror objek memiliki dua properti utama:\n\n`name`\n: Nama error. sebagai contoh, untuk variable yang belum terdefinisikan maka itu disebut `\"ReferenceError\"`.\n\n`message`\n: Pesan yang ada didalam eror tersebut.\n\nTerdapat properti non-standard lainnya pada kebanyakan \nAda properti non-standar lain yang tersedia di sebagian besar lingkungan. Salah satu yang paling banyak digunakan dan didukung ialah:\n\n`stack`\n: Call stack saat ini: string dengan informasi tentang urutan panggilan bertingkat yang menyebabkan kesalahan. Digunakan untuk tujuan debugging.\n\nSebagai contoh:\n\n```js run untrusted\ntry {\n*!*\n lalala; // error, variable is not defined!\n*/!*\n} catch (err) {\n alert(err.name); // ReferenceError\n alert(err.message); // lalala is not defined\n alert(err.stack); // ReferenceError: lalala is not defined at (...call stack)\n\n // Can also show an error as a whole\n // The error is converted to string as \"name: message\"\n alert(err); // ReferenceError: lalala is not defined\n}\n```\n\n## \"Catch\" binding Opsional\n\n[recent browser=new]\n\nJika kita tidak butuh detail tentang eror, `catch` mungkin bisa menghilangkannya:\n\n```js\ntry {\n // ...\n} catch { // <-- tanpa (err)\n // ...\n}\n```\n\n## Menggunakan \"try..catch\"\n\nMari kita telusuri contoh penggunaan nyata dari `try..catch`.\n\nSeperti yang telah kita ketahui, Javascript mendukung method [JSON.parse(str)](mdn:js/JSON/parse) yang membaca dari nilai JSON-encoded. \n\nBiasanya digunakan untuk memecahkan kode data yang diterima melalui jaringan, dari server atau sumber lain.\n\nKita menerimanya dan memanggil `JSON.parse` seperti ini:\n\n```js run\nlet json = '{\"name\":\"John\", \"age\": 30}'; // data dari server\n\n*!*\nlet user = JSON.parse(json); // mengonversi representasi teks ke objek JS\n*/!*\n\n// sekarang pengguna adalah objek dengan properti dari string\nalert( user.name ); // John\nalert( user.age ); // 30\n```\n\nKalian dapat menemukan informasi lebih detail tentang JSON di bab .\n\n**Jika format `json` salah,` JSON.parse` menghasilkan error, sehingga skrip \"mati\".**\n\nCukupkah kita puas dengan itu? Tentu saja tidak!\n\nDengan cara ini, jika ada yang salah dengan datanya, pengunjung tidak akan pernah mengetahuinya (kecuali mereka membuka konsol pengembang). Dan orang biasanya tidak suka ketika sesuatu \"berhenti begitu saja\" tanpa ada pesan kesalahan.\n\nMari gunakan `try..catch` untuk menangani kesalahan:\n\n```js run\nlet json = \"{ bad json }\";\n\ntry {\n\n*!*\n let user = JSON.parse(json); // <-- ketika terjadi sebuah eror...\n*/!*\n alert( user.name ); // tidak berjalan\n\n} catch (err) {\n*!*\n // ...proses eksekusinya akan lompat kesini\n alert( \"Our apologies, the data has errors, we'll try to request it one more time.\" );\n alert( err.name );\n alert( err.message );\n*/!*\n}\n```\nDi sini kita menggunakan blok `catch` hanya untuk menampilkan pesan, tetapi kita dapat melakukan lebih banyak lagi: mengirim permintaan jaringan baru, menyarankan alternatif kepada pengunjung, mengirim informasi tentang kesalahan ke fasilitas logging, .... Semuanya jauh lebih baik daripada sekedar mati.\n\n## Melontarkan eror kita sendiri\n\nBagaimana jika `json` secara sintaksis benar, tetapi tidak memiliki properti` name` yang diperlukan?\n\nSeperti ini:\n\n```js run\nlet json = '{ \"age\": 30 }'; // data tidak lengkap\n\ntry {\n\n let user = JSON.parse(json); // <-- tidak ada eror\n*!*\n alert( user.name ); // tidak ada nama!\n*/!*\n\n} catch (err) {\n alert( \"doesn't execute\" );\n}\n```\nDi sini `JSON.parse` berjalan normal, tetapi tidak adanya` nama` sebenarnya merupakan eror bagi kita.\n\nUntuk menyatukan penanganan error, kita akan menggunakan operator `throw`.\n\n### Operator \"Throw\" \n\nOperator `throw` menghasilkan sebuah eror.\n\nSintaksnya adalah:\n\n```js\nthrow \n```\n\nSecara teknis, kita dapat menggunakan apapun sebagai eror objek. \nTechnically, we can use anything as an error object. Itu bahkan mungkin dengan data primitif, seperti angka atau string, lebih disarankan menggunakan objek, dan juga dengan properti `name` dan` message` (agar tetap kompatibel dengan error bawaan).\n\nJavaScript memiliki banyak konstruktor bawaan untuk standar eror: `Error`, `SyntaxError`,` ReferenceError`, `TypeError` dan lain-lain. Kita bisa menggunakannya untuk membuat eror objek juga.\n\nSintaksnya adalah:\n\n```js\nlet error = new Error(message);\n// or\nlet error = new SyntaxError(message);\nlet error = new ReferenceError(message);\n// ...\n```\n\nUntuk eror bawaan (bukan untuk objek lainnya, hanya untuk eror), properti `name` persis dengan nama konstruktornya. Dan `pesan` diambil dari argumennya.\n\nSebagai contoh:\n\n```js run\nlet error = new Error(\"Things happen o_O\");\n\nalert(error.name); // Error\nalert(error.message); // Things happen o_O\n```\n\nMari kita lihat jenis kesalahan apa yang dihasilkan `JSON.parse`:\n\n```js run\ntry {\n JSON.parse(\"{ bad json o_O }\");\n} catch (err) {\n*!*\n alert(err.name); // SyntaxError\n*/!*\n alert(err.message); // Unexpected token b in JSON at position 2\n}\n```\n\nSeperti yang bisa kita lihat, itu adalah `SyntaxError`.\n\nDan dalam kasus ini, tidak adanya `nama` adalah sebuah eror, karena pengguna harus memiliki` nama`.\n\nJadi mari kita tampung pada bagian throw:\n\n```js run\nlet json = '{ \"age\": 30 }'; // data tidak lengkap\n\ntry {\n\n let user = JSON.parse(json); // <-- tidak ada eror\n\n if (!user.name) {\n*!*\n throw new SyntaxError(\"Incomplete data: no name\"); // (*)\n*/!*\n }\n\n alert( user.name );\n\n} catch (err) {\n alert( \"JSON Error: \" + err.message ); // JSON Error: Incomplete data: no name\n}\n```\n\nDi baris `(*)`, operator `throw` menghasilkan` SyntaxError` dengan `message` yang diberikan, sama seperti JavaScript akan menjalankannya sendiri. Proses eksekusi `try ` langsung berhenti dan alur kontrol melompat ke bagian ` catch`. \n\nSekarang `catch` menjadi satu tempat untuk semua penanganan error: baik untuk` JSON.parse` dan kasus lainnya.\n\n## Rethrowing\n\nPada contoh di atas kami menggunakan `try..catch` untuk menangani data yang salah. Tetapi apakah mungkin terjadi kesalahan tak terduga lainnya dalam blok `try {...}`? Seperti kesalahan pemrograman (variabel tidak terdefinisi) atau sesuatu yang lain, bukan hanya hal terkait \"data yang salah \" ini.\n\nSebagai contoh:\n\n```js run\nlet json = '{ \"age\": 30 }'; // data tidak lengkap\n\ntry {\n user = JSON.parse(json); // <-- lupa meletakkan \"let\" sebelum user\n\n // ...\n} catch (err) {\n alert(\"JSON Error: \" + err); // JSON Error: ReferenceError: user is not defined\n // (no JSON Error actually)\n}\n```\n\nTentu saja, semuanya bisa! Pemrogram memang membuat kesalahan. Bahkan dalam projek pembantu pada sumber terbuka(open source) yang digunakan oleh jutaan orang selama beberapa dekade - tiba-tiba bug dapat ditemukan yang mengarah ke peretasan yang mengerikan.\n\nDalam kasus kita, `try..catch` ditempatkan untuk menangkap eror `\"data yang tidak valid \"`. Tetapi pada dasarnya, `catch` mendapatkan *semua* error dari` try`. Di sini ia mendapat eror yang tak terduga, tetapi masih menampilkan pesan `\"JSON Error\"` yang sama. Itu salah dan juga membuat kode lebih sulit untuk di-debug.\n\nUntuk menghindari masalah seperti itu, kita dapat menggunakan teknik \"rethrowing\". Aturannya sederhana:\n\n**Proses throwing hanya akan memproses kesalahan yang diketahui dan \"melempar ulang / rethrowing\" yang lainnya.**\n\nTeknik \"rethrowing\" dapat dijelaskan lebih detail sebagai:\n\n1. Catch mendapatkan semua eror.\n2. Dalam blok `catch (err) {...}` kita menganalisis eror objek `err`.\n3. Jika kita tidak tahu bagaimana menanganinya, kita melakukan `throw err`.\n\nBiasanya, kita dapat memeriksa jenis erornya menggunakan operator `instanceof`:\n\n```js run\ntry {\n user = { /*...*/ };\n} catch (err) {\n*!*\n if (err instanceof ReferenceError) {\n*/!*\n alert('ReferenceError'); // \"ReferenceError\" for accessing an undefined variable\n }\n}\n```\n\nKita juga bisa mendapatkan nama kelas eror dari properti `err.name`. Semua eror bawaan memilikinya. Pilihan lainnya adalah membaca `err.constructor.name`.\n\nPada kode di bawah ini, kita menggunakan teknik rethrowing sehingga `catch` hanya menangani` SyntaxError`:\n\n```js run\nlet json = '{ \"age\": 30 }'; // incomplete data\ntry {\n\n let user = JSON.parse(json);\n\n if (!user.name) {\n throw new SyntaxError(\"Incomplete data: no name\");\n }\n\n*!*\n blabla(); // unexpected error\n*/!*\n\n alert( user.name );\n\n} catch (err) {\n\n*!*\n if (err instanceof SyntaxError) {\n alert( \"JSON Error: \" + err.message );\n } else {\n throw err; // rethrow (*)\n }\n*/!*\n\n}\n```\n\nEror saat yang dilempar pada baris `(*)` dari dalam blok `catch` \"jatuh\" dari` try..catch` dan dapat ditangkap oleh bagian luar `try..catch`(jika ada), atau itu memberhentikan kodingannya.\n\nJadi, blok `catch` sebenarnya hanya menangani error yang tahu cara penanganannya dan \"melewatkan\" semua error lainnya.\n\nContoh di bawah ini menunjukkan bagaimana eror tersebut dapat ditangkap oleh satu level lagi dari blok `try..catch`:\n\n```js run\nfunction readData() {\n let json = '{ \"age\": 30 }';\n\n try {\n // ...\n*!*\n blabla(); // error!\n*/!*\n } catch (err) {\n // ...\n if (!(err instanceof SyntaxError)) {\n*!*\n throw e; // rethrow (tidak tahu bagaimana cara menanganinya)\n*/!*\n }\n }\n}\n\ntry {\n readData();\n} catch (err) {\n*!*\n alert( \"External catch got: \" + e ); // menangkapnya!\n*/!*\n}\n```\n\nDi sini `readData` hanya mengetahui cara menangani` SyntaxError`, sedangkan bagian `try..catch` luar mengetahui cara menangani semuanya.\n\n## try...catch...finally\n\nTunggu, itu belum semuanya.\n\nBlok `try..catch` mungkin memiliki satu klausa kode lagi yaitu:`finally`.\n\nJika ada, maka itu akan berjalan di semua kasus:\n\n- setelah `try`, jika tidak ada eror,\n- setelah `catch`, jika ada error.\n\nContoh sintaks lengkapnya seperti ini:\n\n```js\n*!*try*/!* {\n ... try to execute the code ...\n} *!*catch*/!* (err) {\n ... handle errors ...\n} *!*finally*/!* {\n ... execute always ...\n}\n```\n\nTry running this code:\n\n```js run\ntry {\n alert( 'try' );\n if (confirm('Make an error?')) BAD_CODE();\n} catch (err) {\n alert( 'catch' );\n} finally {\n alert( 'finally' );\n}\n```\n\nKode tersebut memiliki dua cara eksekusi:\n\n1. Jika kalian menjawab \"Ya\" untuk \"Membuat eror?\", maka proses eksekusinya akan jadi seperti ini `try -> catch -> finally`.\n2. Jika kalian mengatakan \"Tidak\", maka proses nya akan seperti ini `try -> finally`.\n\nKlausa `finally` sering digunakan ketika kita mulai melakukan sesuatu dan ingin menyelesaikannya dalam kasus apa pun hasilnya.\n\nMisalnya, kami ingin mengukur waktu yang dibutuhkan oleh fungsi bilangan Fibonacci `fib (n)`. Secara alami, kita dapat mulai mengukur sebelum berlari dan menyelesaikannya setelahnya. Tetapi bagaimana jika ada kesalahan selama pemanggilan fungsi? Secara khusus, implementasi `fib (n)` dalam kode di bawah ini mengembalikan eror untuk bilangan negatif atau non-integer.\n\nKlausa `finally` adalah tempat yang tepat untuk menyelesaikan pengukuran apa pun yang terjadi.\n\nDi sini `finally` menjamin bahwa waktu akan diukur dengan benar dalam kedua situasi - jika eksekusi` fib` berhasil ataupun jika terjadi kesalahan di dalamnya:\n\n```js run\nlet num = +prompt(\"Enter a positive integer number?\", 35)\n\nlet diff, result;\n\nfunction fib(n) {\n if (n < 0 || Math.trunc(n) != n) {\n throw new Error(\"Must not be negative, and also an integer.\");\n }\n return n <= 1 ? n : fib(n - 1) + fib(n - 2);\n}\n\nlet start = Date.now();\n\ntry {\n result = fib(num);\n} catch (err) {\n result = 0;\n*!*\n} finally {\n diff = Date.now() - start;\n}\n*/!*\n\nalert(result || \"error occurred\");\n\nalert( `execution took ${diff}ms` );\n```\n\nKalian dapat memeriksa dengan menjalankan kode dengan memasukkan `35` ke dalam` prompt` - ini dijalankan secara normal, `finally` setelah` try`. Dan kemudian masukkan `-1` - akan ada eror langsung, dan eksekusi akan memakan waktu` 0ms`. Kedua pengukuran tersebut dilakukan dengan benar.\n\nDengan kata lain, fungsi tersebut mungkin diakhiri dengan `return` atau `throw`, itu tidak masalah. Klausa `finally` dijalankan di kedua kasus.\n\n\n```smart header=\"Variables are local inside `try..catch..finally`\"\nTolong diperhatikan bahwa variabel `result` dan `diff` pada kode di atas dideklarasikan *sebelum* `try..catch`.\n\nSebaliknya, jika kita mendeklarasikan `let` di blok` try`, itu hanya akan terlihat di dalamnya.\n```\n\n````smart header=\"`finally` and `return`\"\nKlausa `finally` berfungsi untuk *apa saja* yang keluar dari` try..catch`. Itu termasuk `return` eksplisit.\n\nPada contoh di bawah ini, terdapat `return` dalam `try`. Dalam kasus ini, `finally` dijalankan tepat sebelum kontrol kembali ke kode luar.\n\n```js run\nfunction func() {\n\n try {\n*!*\n return 1;\n*/!*\n\n } catch (err) {\n /* ... */\n } finally {\n*!*\n alert( 'finally' );\n*/!*\n }\n}\n\nalert( func() ); //pertama alert bekerja dari finally, dan kemudian yang satu ini\n```\n````\n\n````smart header=\"`try...finally`\"\n\nBagian `try..finally`, tanpa klausa` catch`, juga berguna. Kita menerapkannya ketika kita tidak ingin menangani eror di sini (biarkan eror itu terjadi), tetapi ingin memastikan bahwa proses yang kita mulai sudah selesai.\n\n```js\nfunction func() {\n // mulai melakukan sesuatu yang perlu diselesaikan (seperti pengukuran)\n try {\n // ...\n } finally {\n // selesaikan itu bahkan jika semuanya berhenti\n }\n}\n```\nPada kode di atas, eror di dalam `try` selalu terjadi, karena tidak ada `catch`. Tapi `finally` berfungsi sebelum aliran eksekusi meninggalkan fungsinya.\n````\n\n## Catch Global\n\n```warn header=\"Environment-specific\"\nInformasi dari bagian ini bukan merupakan bagian dari inti JavaScript.\n```\n\nBayangkan kita mendapatkan eror yang fatal di luar `try..catch`, dan kodingannya mati. Seperti eror pemrograman atau hal buruk lainnya.\n\nAdakah cara untuk bereaksi atas kejadian seperti itu? kita mungkin ingin mencatat kesalahan, menunjukkan sesuatu kepada pengguna (biasanya mereka tidak melihat pesan eror), dll.\n\nTidak ada dalam spesifikasinya, tapi dilingkungan tempat itu bekerja biasanya menyediakannya, karena sangat berguna. Misalnya, Node.js memiliki [`process.on (\" uncaughtException \")`] (https://nodejs.org/api/process.html#process_event_uncaughtexception) untuk itu. Dan pada browser kita dapat menetapkan fungsi ke properti khusus [window.onerror] (mdn: api / GlobalEventHandlers / onerror), yang akan berjalan jika terjadi kesalahan yang tidak tertangkap.\n\nSintaksnya adalah:\n\n```js\nwindow.onerror = function(message, url, line, col, error) {\n // ...\n};\n```\n\n`message`\n: Pesan eror.\n\n`url`\n: URL pada kodingan tempat kesalahan terjadi.\n\n`line`, `col`\n: Nomor baris dan kolom ditempat terjadinya kesalahan.\n\n`error`\n: Eror objek\n\nSebagai contoh:\n\n```html run untrusted refresh height=1\n\n```\n\nPeran dari global handler `window.onerror` biasanya bukan untuk memulihkan eksekusi dari kodingannya - itu biasanya tidak mungkin jika terjadi kesalahan pemrograman, namun tugasnya adalah untuk mengirim pesan eror ke pengembang.\n\nAda juga layanan web yang menyediakan pencatatan eror untuk kasus seperti itu, seperti or .\n\nMereka bekerja seperti ini:\n\n1. Kita mendaftarkannya di layanan dan mendapatkan sepotong JS (atau URL skrip) dari mereka untuk disisipkan di halaman.\n2. Skrip JS itu menyetel fungsi `window.onerror` kustom.\n3. Ketika terjadi kesalahan, itu mengirimkan permintaan jaringan tentangnya pada layanan itu.\n4. Kita dapat masuk ke antarmuka web layanan dan melihat erornya.\n\n## Kesimpulan\n\nBagian `try..catch` memungkinkan untuk menangani error runtime. Secara harfiah memungkinkan untuk \"mencoba\" menjalankan kode dan \"menangkap\" kesalahan yang mungkin terjadi di dalamnya.\n\nSintaksnya adalah:\n\n```js\ntry {\n // Jalankan kode ini\n} catch(err) {\n // jika terjadi kesalahan, lompat ke sini\n // err adalah eror objek \n} finally {\n // lakukan dalam hal apa pun setelah try / catch\n}\n```\n\nMungkin tidak ada bagian `catch` atau `finally`, jadi bagian yang lebih pendek `try..catch` dan` try..finally` juga valid.\n\nEror objek memiliki properti berikut ini:\n\n- `message` -- pesan kesalahan yang bisa dibaca manusia.\n- `name` -- string dengan nama eror (nama konstruktor eror).\n- `stack` (non-standar, tetapi didukung dengan baik) - tumpukan/stack pada saat pembuatan eror.\n\nJika eror objek tidak diperlukan, kita bisa menghilangkannya dengan menggunakan `catch {` daripada `catch (err) {`.\n\nKita juga bisa menghasilkan error kita sendiri menggunakan operator `throw`. Secara teknis, argumen dari `throw` bisa berupa apa saja, tetapi biasanya itu adalah eror objek yang diturunkan dari kelas ʻError` bawaan. Lebih lanjut tentang memperluas eror objek di bab berikutnya.\n\n*Rethrowing* adalah pola yang sangat penting dari penanganan eror: blok `catch` biasanya mengharapkan dan mengetahui bagaimana menangani jenis kesalahan tertentu, jadi blok tersebut harus menampilkan kembali kesalahan yang tidak diketahuinya.\n\nBahkan jika kita tidak memiliki `try..catch`, sebagian besar lingkungan memungkinkan kita menyiapkan penangan eror \"global\" untuk menangkap eror yang \"terjadi\". Di dalam browser, itu adalah `window.onerror`.\n" }, { "path": "1-js/10-error-handling/2-custom-errors/1-format-error/solution.md", "content": "```js run untrusted\nclass FormatError extends SyntaxError {\n constructor(message) {\n super(message);\n this.name = this.constructor.name;\n }\n}\n\nlet err = new FormatError(\"formatting error\");\n\nalert( err.message ); // formatting error\nalert( err.name ); // FormatError\nalert( err.stack ); // stack\n\nalert( err instanceof SyntaxError ); // true\n```\n" }, { "path": "1-js/10-error-handling/2-custom-errors/1-format-error/task.md", "content": "importance: 5\n\n---\n\n# Mewarisi dari SyntaxError\n\nBuat kelas `FormatError` yang diwarisi dari bawaan kelas `SyntaxError`.\n\nIni harus mendukung properti `message`, `name` dan `stack`.\n\nContoh penggunaan:\n\n```js\nlet err = new FormatError('formatting error');\n\nalert(err.message); // formatting error\nalert(err.name); // FormatError\nalert(err.stack); // stack\n\nalert(err instanceof FormatError); // true\nalert(err instanceof SyntaxError); // true (karena mewarisi dari SyntaxError)\n```\n" }, { "path": "1-js/10-error-handling/2-custom-errors/article.md", "content": "# Kesalahan khusus, memperluas Kesalahan\n\nSaat kita mengembangkan sesuatu, kita sering membutuhkan kelas kesalahan kita sendiri untuk mencerminkan hal-hal spesifik yang mungkin salah dalam tugas kita. Untuk kesalahan dalam operasi jaringan kita mungkin memerlukan `HttpError`, untuk operasi basis data `DbError`, untuk operasi pencarian `NotFoundError` dan seterusnya.\n\nKesalahan kita harus mendukung properti kesalahan dasar seperti `message`, `name` dan, sebaiknya, `stack`. Tetapi mereka juga mungkin memiliki properti lain sendiri, misalnya objek `HttpError` mungkin memiliki properti `statusCode` dengan nilai seperti `404` atau `403` atau `500`.\n\nJavaScript memungkinkan untuk menggunakan `throw` dengan argumen apa pun, jadi secara teknis kelas kesalahan khusus kita tidak perlu mewarisi dari `Error`. Tetapi jika kita mewarisi, maka menjadi mungkin untuk menggunakan `obj instanceof Error` untuk mengidentifikasi objek kesalahan. Jadi lebih baik mewarisinya.\n\nSaat aplikasi berkembang, kesalahan kita sendiri secara alami membentuk hierarki. Misalnya, `HttpTimeoutError` mungkin mewarisi dari `HttpError`, dan seterusnya.\n\n## Memperluas Kesalahan\n\nSebagai contoh, mari pertimbangkan fungsi `readUser(json)` yang harus membaca JSON dengan data pengguna.\n\nBerikut adalah contoh tampilan `json` yang valid:\n\n```js\nlet json = `{ \"name\": \"John\", \"age\": 30 }`;\n```\n\nSecara internal, kita akan menggunakan `JSON.parse`. Jika menerima `json` yang salah, maka itu melontarkan `SyntaxError`. Tetapi bahkan jika `json` secara sintaksis benar, itu tidak berarti bahwa itu adalah pengguna yang valid, bukan? Ini mungkin kehilangan data yang diperlukan. Misalnya, mungkin tidak memiliki properti `name` dan `age` yang penting bagi pengguna kita.\n\nFungsi kita `readUser(json)` tidak hanya akan membaca JSON, tetapi juga memeriksa (\"memvalidasi\") data. Jika tidak ada bidang yang wajib diisi, atau formatnya salah, itu adalah kesalahan. Dan itu bukan `SyntaxError`, karena datanya benar secara sintaksis, tetapi jenis kesalahan lain. Kita akan menyebutnya `ValidationError` dan membuat kelas untuk itu. Kesalahan semacam itu juga harus membawa informasi tentang bidang yang melanggar.\n\nKelas `ValidationError` kita harus mewarisi dari kelas `Error` bawaan.\n\nKelas itu sudah ada di dalamnya, tetapi berikut ini kode perkiraannya sehingga kita dapat memahami apa yang kita perluas:\n\n```js\n// \"Kode semu\" untuk kelas Kesalahan bawaan yang ditentukan oleh JavaScript itu sendiri\nclass Error {\n constructor(message) {\n this.message = message;\n this.name = \"Error\"; // (nama yang berbeda untuk kelas kesalahan bawaan yang berbeda)\n this.stack = ; // tidak standar, tetapi sebagian besar lingkungan mendukungnya\n }\n}\n```\n\nSekarang mari kita mewarisi `ValidationError` darinya dan mencobanya dalam tindakan:\n\n```js run untrusted\n*!*\nclass ValidationError extends Error {\n*/!*\n constructor(message) {\n super(message); // (1)\n this.name = \"ValidationError\"; // (2)\n }\n}\n\nfunction test() {\n throw new ValidationError(\"Whoops!\");\n}\n\ntry {\n test();\n} catch(err) {\n alert(err.message); // Whoops!\n alert(err.name); // ValidationError\n alert(err.stack); // daftar panggilan bertingkat dengan masing-masing nomor baris\n}\n```\n\nHarap diperhatikan: pada baris `(1)` kita memanggil konstruktor induk. JavaScript mengharuskan kita memanggil `super` di konstruktor anak, jadi itu wajib. Konstruktor induk mengatur properti `message`.\n\nKonstruktor induk juga menyetel properti `name` menjadi `\"Error\"`, jadi di baris `(2)` kita menyetel ulang ke nilai yang benar.\n\nMari kita coba menggunakannya di `readUser(json)`:\n\n```js run\nclass ValidationError extends Error {\n constructor(message) {\n super(message);\n this.name = \"ValidationError\";\n }\n}\n\n// Penggunaan\nfunction readUser(json) {\n let user = JSON.parse(json);\n\n if (!user.age) {\n throw new ValidationError(\"No field: age\");\n }\n if (!user.name) {\n throw new ValidationError(\"No field: name\");\n }\n\n return user;\n}\n\n// Contoh kerja dengan try..catch\n\ntry {\n let user = readUser('{ \"age\": 25 }');\n} catch (err) {\n if (err instanceof ValidationError) {\n*!*\n alert(\"Invalid data: \" + err.message); // Invalid data: No field: name (Tidak ada bidang: name)\n*/!*\n } else if (err instanceof SyntaxError) { // (*)\n alert(\"JSON Syntax Error: \" + err.message);\n } else {\n throw err; // unknown error (kesalahan yang tidak diketahui), lontarkan kembali (**)\n }\n}\n```\n\nBlok `try..catch` dalam kode di atas menangani baik `ValidationError` dan `SyntaxError` bawaan dari `JSON.parse`.\n\nSilakan lihat bagaimana kita menggunakan `instanceof` untuk memeriksa jenis kesalahan spesifik pada baris `(*)`.\n\nKita juga bisa melihat `err.name`, seperti ini:\n\n```js\n// ...\n// daripada (err instanceof SyntaxError)\n} else if (err.name == \"SyntaxError\") { // (*)\n// ...\n```\n\nVersi `instanceof` jauh lebih baik, karena di masa mendatang kita akan memperluas `ValidationError`, membuat subtipe darinya, seperti `PropertyRequiredError`. Dan pemeriksaan `instanceof` akan terus berfungsi untuk kelas pewaris baru. Jadi itu bukti masa depan.\n\nJuga penting bahwa jika `catch` menemui kesalahan yang tidak diketahui, maka itu akan ditarik kembali di baris `(**)`. Blok `catch` hanya mengetahui cara menangani validasi dan kesalahan sintaksis, jenis lain (karena kesalahan ketik pada kode atau kesalahan lain yang tidak diketahui) akan gagal.\n\n## Warisan lebih lanjut\n\nKelas `ValidationError` sangat umum. Banyak hal mungkin salah. Properti mungkin tidak ada atau mungkin dalam format yang salah (seperti nilai string untuk `age`). Mari kita buat kelas yang lebih konkret `PropertyRequiredError`, tepatnya untuk properti yang tidak ada. Ini akan membawa informasi tambahan tentang properti yang hilang.\n\n```js run\nclass ValidationError extends Error {\n constructor(message) {\n super(message);\n this.name = \"ValidationError\";\n }\n}\n\n*!*\nclass PropertyRequiredError extends ValidationError {\n constructor(property) {\n super(\"No property: \" + property);\n this.name = \"PropertyRequiredError\";\n this.property = property;\n }\n}\n*/!*\n\n// Penggunaan\nfunction readUser(json) {\n let user = JSON.parse(json);\n\n if (!user.age) {\n throw new PropertyRequiredError(\"age\");\n }\n if (!user.name) {\n throw new PropertyRequiredError(\"name\");\n }\n\n return user;\n}\n\n// Contoh kerja dengan try..catch\n\ntry {\n let user = readUser('{ \"age\": 25 }');\n} catch (err) {\n if (err instanceof ValidationError) {\n*!*\n alert(\"Invalid data: \" + err.message); // Invalid data: No property: name (Tidak ada properti: name)\n alert(err.name); // PropertyRequiredError\n alert(err.property); // name\n*/!*\n } else if (err instanceof SyntaxError) {\n alert(\"JSON Syntax Error: \" + err.message);\n } else {\n throw err; // unknown error (kesalahan yang tidak diketahui), lontarkan kembali\n }\n}\n```\n\nKelas baru `PropertyRequiredError` mudah digunakan: kita hanya perlu meneruskan nama properti: `new PropertyRequiredError(property) `. `Pesan` yang dapat dibaca manusia dihasilkan oleh konstruktor.\n\nHarap dicatat bahwa `this.name` dalam konstruktor `PropertyRequiredError` ditetapkan lagi secara manual. Itu mungkin agak membosankan -- untuk menetapkan `this.name = ` di setiap kelas kesalahan kustom. Kita dapat menghindarinya dengan membuat kelas \"kesalahan dasar\" kita sendiri yang menetapkan `this.name = this.constructor.name`. Dan kemudian mewarisi semua kesalahan khusus kita darinya.\n\nSebut saja `MyError`.\n\nBerikut kode dengan `MyError` dan kelas kesalahan khusus lainnya, yang disederhanakan:\n\n```js run\nclass MyError extends Error {\n constructor(message) {\n super(message);\n*!*\n this.name = this.constructor.name;\n*/!*\n }\n}\n\nclass ValidationError extends MyError { }\n\nclass PropertyRequiredError extends ValidationError {\n constructor(property) {\n super(\"No property: \" + property);\n this.property = property;\n }\n}\n\n// name-nya benar\nalert( new PropertyRequiredError(\"field\").name ); // PropertyRequiredError\n```\n\nSekarang kesalahan khusus jauh lebih pendek, terutama `ValidationError`, karena kita menyingkirkan baris `\"this.name = ...\"` di konstruktor.\n\n## Pengecualian pembungkusan\n\nTujuan dari fungsi `readUser` pada kode di atas adalah \"untuk membaca data pengguna\". Mungkin ada berbagai jenis kesalahan dalam prosesnya. Saat ini kita memiliki `SyntaxError` dan `ValidationError`, tetapi di masa mendatang fungsi `readUser` dapat berkembang dan mungkin menghasilkan jenis kesalahan lain.\n\nKode yang memanggil `readUser` harus menangani kesalahan ini. Saat ini ia menggunakan beberapa `if` dalam blok `catch`, yang memeriksa kelas dan menangani kesalahan yang diketahui dan memunculkan kembali yang tidak diketahui.\n\nSkemanya seperti ini:\n\n```js\ntry {\n ...\n readUser() // potensi sumber kesalahan\n ...\n} catch (err) {\n if (err instanceof ValidationError) {\n // menangani kesalahan validasi\n } else if (err instanceof SyntaxError) {\n // menangani kesalahan sintaks\n } else {\n throw err; // unknown error (kesalahan yang tidak diketahui), lontarkan kembali\n }\n}\n```\n\nPada kode di atas kita dapat melihat dua jenis kesalahan, tetapi bisa juga lebih.\n\nJika fungsi `readUser` menghasilkan beberapa jenis kesalahan, maka kita harus bertanya pada diri sendiri: apakah kita benar-benar ingin memeriksa semua jenis kesalahan satu per satu setiap saat?\n\nSeringkali jawabannya adalah \"Tidak\": kita ingin menjadi \"satu tingkat di atas semua itu\". Kita hanya ingin tahu apakah ada \"kesalahan membaca data\" -- mengapa sebenarnya hal itu terjadi seringkali tidak relevan (pesan kesalahan menjelaskannya). Atau, lebih baik lagi, kita ingin mendapatkan cara untuk mendapatkan detail kesalahan, tetapi hanya jika kita perlu.\n\nTeknik yang kita jelaskan di sini disebut \"pengecualian pembungkusan\".\n\n1. Kita akan membuat kelas baru `ReadError` untuk merepresentasikan kesalahan \"membaca data\" yang umum.\n2. Fungsi `readUser` akan menangkap kesalahan pembacaan data yang terjadi di dalamnya, seperti `ValidationError` dan `SyntaxError`, dan sebagai gantinya menghasilkan `ReadError`.\n3. Objek `ReadError` akan menyimpan referensi ke kesalahan asli dalam properti `cause` -nya.\n\nKemudian kode yang memanggil `readUser` hanya perlu memeriksa `ReadError`, bukan untuk setiap jenis kesalahan pembacaan data. Dan jika membutuhkan detail lebih lanjut tentang kesalahan, ia dapat memeriksa properti `cause`-nya.\n\nBerikut kode yang mendefinisikan `ReadError` dan mendemonstrasikan penggunaannya dalam `readUser` dan `try..catch`:\n\n```js run\nclass ReadError extends Error {\n constructor(message, cause) {\n super(message);\n this.cause = cause;\n this.name = 'ReadError';\n }\n}\n\nclass ValidationError extends Error { /*...*/ }\nclass PropertyRequiredError extends ValidationError { /* ... */ }\n\nfunction validateUser(user) {\n if (!user.age) {\n throw new PropertyRequiredError(\"age\");\n }\n\n if (!user.name) {\n throw new PropertyRequiredError(\"name\");\n }\n}\n\nfunction readUser(json) {\n let user;\n\n try {\n user = JSON.parse(json);\n } catch (err) {\n*!*\n if (err instanceof SyntaxError) {\n throw new ReadError(\"Syntax Error\", err);\n } else {\n throw err;\n }\n*/!*\n }\n\n try {\n validateUser(user);\n } catch (err) {\n*!*\n if (err instanceof ValidationError) {\n throw new ReadError(\"Validation Error\", err);\n } else {\n throw err;\n }\n*/!*\n }\n\n}\n\ntry {\n readUser('{bad json}');\n} catch (e) {\n if (e instanceof ReadError) {\n*!*\n alert(e);\n // Original error: SyntaxError: Unexpected token b in JSON at position 1 (Kesalahan sintaks: Token b yang tidak terduga di JSON pada posisi 1)\n alert(\"Original error: \" + e.cause);\n*/!*\n } else {\n throw e;\n }\n}\n```\n\nPada kode di atas, `readUser` bekerja persis seperti yang dijelaskan -- menangkap kesalahan sintaks dan validasi dan melontarkan kesalahan `ReadError` (kesalahan yang tidak diketahui ditampilkan ulang seperti biasa).\n\nJadi kode terluar memeriksa `instanceof ReadError` dan hanya itu. Tidak perlu mencantumkan semua kemungkinan jenis kesalahan.\n\nPendekatan ini disebut \"pembungkusan pengecualian\", karena kita mengambil pengecualian \"tingkat rendah\" dan \"membungkusnya\" menjadi `ReadError` yang lebih abstrak. Ini banyak digunakan dalam pemrograman berorientasi objek.\n\n## Ringkasan\n\n- Kita bisa mewarisi dari `Error` dan kelas kesalahan bawaan lainnya secara normal. Kita hanya perlu menjaga properti `name` dan jangan lupa memanggil `super`.\n- Kita bisa menggunakan `instanceof` untuk memeriksa kesalahan tertentu. Ini juga bekerja dengan warisan. Namun terkadang kita memiliki objek kesalahan yang berasal dari pustaka pihak ketiga dan tidak ada cara mudah untuk mendapatkan kelasnya. Kemudian properti `name` dapat digunakan untuk pemeriksaan semacam itu.\n- Pengecualian pembungkusan adalah teknik yang tersebar luas: fungsi menangani pengecualian tingkat rendah dan membuat kesalahan tingkat lebih tinggi daripada berbagai kesalahan tingkat rendah. Pengecualian tingkat rendah terkadang menjadi properti dari objek tersebut seperti `err.cause` dalam contoh di atas, tetapi itu tidak sepenuhnya diperlukan.\n" }, { "path": "1-js/10-error-handling/index.md", "content": "# Penanganan kesalahan\n" }, { "path": "1-js/11-async/01-callbacks/article.md", "content": "\n\n# Pengenalan: callback\n\n```warn header=\"Disini kita menggunakan method dari browser\"\nUntuk menunjukkan penggunaan callback, promise dan konsep abstract lainnya, kita akan menggunakan beberapa method dari browser; khususnya, memuat script dan melakukan manipulasi dokumen sederhana.\n\nJika kamu belum terbiasa dengan method ini, dan penggunaanya didalam contoh membuat bingung, atau jika kamu hanya ingin mengerti lebih baik lagi,kamu mungkin mau membaca beberapa bab dari [bagian selanjutnya](/dokumen) tutorial ini.\n\nMeski, kita akan mencoba memperjelas situasi ini. Takkan ada yang sebijaksana browser komplex yang rumit.\n```\n\nBanyak action didalam JavaScript yang *asynchronous*. Dengan kata lain, kita inisiasi action tersebut sekarang, tetapi action tersebut selesai-nya nanti.\n\nSebagai contoh, kita bisa atur action tersebut menggunakan `setTimeout`.\n\nContoh-contoh lain dari action asynchronous di kehidupan nyata, misalnya memuat script dan module (kita akan bahas di bab selanjutnya).\n\nCoba lihat pada fungsi `loadScript(src)`, yang memuat sebuah script dengan pemberian `src`:\n\n```js\nfunction loadScript(src) {\n // creates a \n\n\n\n\n" }, { "path": "1-js/11-async/02-promise-basics/03-animate-circle-promise/task.md", "content": "\n# Lingkaran animasi dengan promise\n\nTulis ulang fungsi `showCircle` di dalam solusi tugas sehingga fungsi tersebut mengembalikan sebuah *promise* daripada menerima sebuah *callback*.\n\nPenggunaan baru:\n\n```js\nshowCircle(150, 150, 100).then(div => {\n div.classList.add('message-ball');\n div.append(\"Hello, world!\");\n});\n```\n\nAmbil solusi pada tugas sebagai dasar.\n" }, { "path": "1-js/11-async/02-promise-basics/article.md", "content": "# Promise\n\n\nBayangkan kamu adalah seorang penyanyi top, dan penggemarmu bertanya siang dan malam untuk *single* terbarumu.\n\nUntuk mendapatkan kelegaan, kamu berjanji untuk mengirimkan *single* tersebut kepada mereka ketika diterbitkan. Kamu memberikan sebuah daftar kepada penggemarmu. Mereka dapat mengisi alamat surel mereka, sehingga saat lagu sudah tersedia, semua pihak yang berlangganan langsung menerimanya. Dan bahkan jika ada yang salah, katakanlah, ada kebakaran di dalam studio, sehingga kamu tidak dapat menerbitkan lagu, mereka masih akan diberitahu.\n\nSemua orang senang: kamu, karena orang-orang tidak memadati kamu lagi, dan penggemar, karena mereka tidak ketinggalan *single*nya.\n\n1. \"Kode produksi\" itu melakukan sesuatu dan membutuhkan waktu. Sebagai contoh, sebuah kode yang memuat data melalui jaringan. Itu adalah seorang \"penyanyi\".\n2. \"Kode pengkonsumsi\" yang menginginkan hasil dari \"kode produksi\" setelah siap. Banyak fungsi yang mungkin membutuhkan hasil itu. Ini adalah \"penggemar\".\n3. *Promise* adalah objek Javascript khusus yang menghubungkan \"kode produksi\" dan \"kode pengkonsumi\" secara bersamaan. Dalam analogi kami: ini adalah \"daftar berlangganan\". \"Kode produksi\" membutuhkan waktu berapa pun untuk menghasilkan hasil yang dijanjikan, dan \"*Promise*\" membuat hasil tersebut tersedia untuk semua kode yang berlangganan ketika hasilnya sudah siap.\n\nAnalogi ini tidak terlalu akurat, karena *promise* JavaScript lebih kompleks dari daftar berlangganan sederhana: daftar tersebut memiliki fitur dan batasan tambahan. Tetapi untuk awal tidak apa-apa.\n\n*Syntax constructor* untuk objek *promise* adalah:\n\n```js\nlet promise = new Promise(function(resolve, reject) {\n // eksekutor (kode produksi, \"penyanyi\")\n});\n```\n\nFungsi yang dilewatkan ke `new Promise` disebut sebagai *exekutor*. Ketika `new Promise` dibuat, exekutor tersebut berjalan secara otomatis. Exekutor itu berisi kode produksi, yang pada akhirnya harus memproduksi hasil. Dalam analogi di atas: exekutor adalah \"penyanyi\".\n\nArgumen `resolve` dan `reject` adalah *callback* yang disediakan oleh JavaScript itu sendiri. Kode kita hanya ada di dalam eksekutor.\n\n\nKetika eksekutor mendapatkan hasilnya, baik itu cepat atau lambat - tidak masalah, eksekutor harus memanggil salah satu dari *callback* ini:\n\n- `resolve(value)` — jika pekerjaan selesai dengan sukses, dengan hasil `value`.\n- `reject(error)` — jika terjadi kesalahan, `error` adalah objek kesalahan.\n\n\nJadi untuk meringkas: eksekutor berjalan secara otomatis, eksekutor harus melakukan pekerjaan dan kemudian memanggil salah satu dari `resolve` atau `reject`.\n\nObjek `promise` yang dikembalikan oleh *constructor* `new Promise` memiliki properti internal:\n\n- `state` — pada awalnya `\"pending\"`, kemudian berubah menjadi `\"fulfilled\"` saat `resolve` dipanggil atau `\"rejected\"` ketika `reject` dipanggil.\n- `result` — pada awalnya `undefined`, kemudian berubah menjadi `value` ketika `resolve(value)` dipanggil atau `error` ketika `reject(error)` dipanggil.\n\nJadi eksekutor akhirnya memindahkan `promise` ke salah satu dari kondisi ini:\n\n![](promise-resolve-reject.svg)\n\nNanti kita akan melihat bagaimana \"penggemar\" dapat berlangganan kepada perubahan ini.\n\nBerikut ini contoh *constructor promise* dan fungsi eksekutor sederhana dengan \"kode produksi\" yang membutuhkan waktu (melalui `setTimeout`):\n\n```js run\nlet promise = new Promise(function(resolve, reject) {\n // fungsi tersebut dieksekusi secara otomatis ketika \"promise\" dibangun\n\n // setelah 1 detik menandakan bahwa pekerjaan selesai dengan hasil \"done\"\n setTimeout(() => *!*resolve(\"done\")*/!*, 1000);\n});\n```\n\nKita dapat melihat dua hal dengan menjalankan kode di atas:\n\n1. Exekutor dipanggil secara langsung dan otomatis (oleh `new Promise`).\n2. Exekutor menerima dua argumen: `resolve` dan `reject` — fungsi ini sudah ditentukan sebelumnya oleh mesin JavaScript. Jadi kita tak perlu membuatnya. Kita hanya harus memanggil salah satu dari dua argumen tersebut ketika siap.\n\n Setelah satu detik \"memproses\" eksekutor memanggil `resolve(\"done\")` untuk memproduksi hasilnya. Ini mengubah status objek `promise`:\n\n ![](promise-resolve-1.svg)\n\nItu adalah contoh penyelesaian pekerjaan yang sukses, sebuah \"*promise fulfilled*\".\n\nDan sekarang adalah contoh eksekutor menolak *promise* dengan sebuah *error*:\n\n```js\nlet promise = new Promise(function(resolve, reject) {\n // setelah 1 detik menandakan bahwa pekerjaan selesai dengan sebuah \"error\"\n setTimeout(() => *!*reject(new Error(\"Whoops!\"))*/!*, 1000);\n});\n```\n\nPanggilan untuk `reject(...)` memindahkan objek *promise* ke status `\"rejected\"`:\n\n![](promise-reject-1.svg)\n\nUntuk meringkas, eksekutor harus melakukan pekerjaan (sesuatu yang biasanya membutuhkan waktu) dan kemudian memanggil `resolve` atau `reject` untuk mengubah state objek *promise* yang sesuai.\n\n*Promise* yang diputuskan atau ditolak disebut \"diselesaikan\", sebagai lawan dari *promise* \"pending\" awalnya.\n\n````smart header=\"Hanya ada satu hasil atau sebuah 'error'\"\nEksekutor harus memanggil hanya satu `resolve` atau satu `reject`. Setiap perubahan status adalah final.\n\nSemua panggilan `resolve` dan `reject` lebih lanjut diabaikan:\n\n```js\nlet promise = new Promise(function(resolve, reject) {\n*!*\n resolve(\"done\");\n*/!*\n\n reject(new Error(\"…\")); // diabaikan\n setTimeout(() => resolve(\"…\")); // diabaikan\n});\n```\n\nIdenya adalah bahwa pekerjaan yang dilakukan oleh eksekutor mungkin hanya memiliki satu hasil atau *error*.\n\nJuga, `resolve`/`reject` hanya berharap satu argumen (atau tidak ada) dan akan mengabaikan argumen tambahan.\n````\n\n```smart header=\"Reject dengan objek `Error`\"\nSeandainya terjadi kesalahan, eksekutor harus memanggil `reject`. Itu bisa dilakukan dengan segala jenis argumen (seperti `resolve`). Tetapi direkomendasikan untuk menggunakan objek `Error` (atau objek yang mewarisi dari `Error`). Alasannya akan segera menjadi jelas.\n```\n\n````smart header=\"Memanggil langsung `resolve`/`reject`\"\nDalam praktiknya, eksekutor biasanya melakukan sesuatu secara *asynchronous* dan memanggil `resolve`/`reject` setelah beberapa waktu, tetapi tidak harus. Kita juga bisa memanggil `resolve` atau `reject` secara langsung, seperti ini:\n\n```js\nlet promise = new Promise(function(resolve, reject) {\n // tidak mengambil waktu kita untuk melakukan pekerjaan itu\n resolve(123); // secara langsung memberikan hasil: 123\n});\n```\n\nMisalnya, ini mungkin terjadi ketika kita memulai suatu pekerjaan tetapi kemudian melihat segalanya sudah selesai dan di-*cache*.\n\nTidak apa-apa. Kita segera menyelesaikan *promise*.\n````\n\n```smart header=\"`State` dan `result` bersifat internal\"\nProperti `state` dan `result` objek Promise bersifat internal. Kita tidak bisa mengakses properti tersebut secara langsung. Kita bisa menggunakan *method* `.then`/`.catch`/`.finally` untuk melakukannya. Penjelasan method-method tersebut ada di bawah ini.\n```\n\n## Konsumen: then, catch, finally\n\nObjek *Promise* berfungsi sebagai tautan antara eksekutor (\"kode produksi\" atau \"penyanyi\") dan fungsi konsumsi (\"penggemar\"), yang akan menerima hasil atau *error*. Fungsi konsumsi bisa didaftarkan (berlangganan) menggunakan *method* `.then`, `.catch` and `.finally`.\n\n### then\n\nYang paling penting, yang mendasar adalah `.then`.\n\n*Syntax*nya adalah:\n\n```js\npromise.then(\n function(result) { *!*/* menangani hasil yang sukses */*/!* },\n function(error) { *!*/* menangani sebuah \"error\" */*/!* }\n);\n```\n\nArgumen pertama dari `.then` adalah fungsi yang berjalan ketika *promise* terselesaikan, dan menerima hasil.\n\nArgumen kedua dari `.then` adalah fungsi yang berjalan ketika *promise* ditolak, dan menerima *error*.\n\nSebagai contoh, disini reaksi ketika *promise* berhasil diselesaikan:\n\n```js run\nlet promise = new Promise(function(resolve, reject) {\n setTimeout(() => resolve(\"done!\"), 1000);\n});\n\n// resolve menjalankan fungsi pertama di .then\npromise.then(\n*!*\n result => alert(result), // menampilkan \"done!\" setelah satu detik\n*/!*\n error => alert(error) // tidak dijalankan\n);\n```\n\nFungsi pertama dijalankan.\n\nDan dalam hal penolakan -- yang kedua:\n\n```js run\nlet promise = new Promise(function(resolve, reject) {\n setTimeout(() => reject(new Error(\"Whoops!\")), 1000);\n});\n\n// reject menjalankan fungsi kedua di .then\npromise.then(\n result => alert(result), // tidak dijalankan\n*!*\n error => alert(error) // menampilkan \"Error: Whoops!\" setelah satu detik\n*/!*\n);\n```\n\nJika kita hanya tertarik pada penyelesaian yang berhasil, maka kita hanya dapat menyediakan satu argumen fungsi `.then`:\n\n```js run\nlet promise = new Promise(resolve => {\n setTimeout(() => resolve(\"done!\"), 1000);\n});\n\n*!*\npromise.then(alert); // menampilkan \"done!\" setelah satu detik\n*/!*\n```\n\n### catch\n\nJika kita hanya tertarik pada *error*, maka kita dapat menggunakan `null` sebagai argumen pertama: `.then(null, errorHandlingFunction)`. Atau kita dapat menggunakan `.catch(errorHandlingFunction)`, yang mana keduanya sama persis:\n\n\n```js run\nlet promise = new Promise((resolve, reject) => {\n setTimeout(() => reject(new Error(\"Whoops!\")), 1000);\n});\n\n*!*\n// .catch(f) sama seperti promise.then(null, f)\npromise.catch(alert); // menampilkan \"Error: Whoops!\" setelah satu detik\n*/!*\n```\n\nPanggilan `.catch(f)` adalah analog lengkap dari `.then(null, f)`, itu hanya sebuah singkatan.\n\n### finally\n\nSama seperti ada klausa `finally` dalam `try {...} catch {...}`, ada `finally` dalam *promises*.\n\nPanggilan `.finally(f)` mirip dengan `.then(f, f)` dalam arti bahwa `f` selalu berjalan ketika *promise* diselesaikan: apakah itu *resolve* atau *reject*.\n\n`finally` adalah penanganan yang baik untuk melakukan pembersihan, mis. menghentikan indikator pemuatan kita, karena tidak diperlukan lagi, apa pun hasilnya.\n\nSeperti ini:\n\n```js\nnew Promise((resolve, reject) => {\n /* lakukan sesuatu yang membutuhkan waktu, dan kemudian panggil resolve/reject */\n})\n*!*\n\n // berjalan ketika \"promise\" diselesaikan, tidak peduli sukses atau tidak\n .finally(() => hentikan indikator pemuatan)\n*/!*\n .then(result => munculkan hasil, err => munculkan \"error\")\n```\n\n\nTapi ini bukan alias dari `then(f,f)`. Ada beberapa perbedaan penting:\n\n\n1. *Handler* `finally` tidak memiliki argumen. Didalam `finally` kita tidak tahu apakah *promise* sukses atau tidak. Tidak apa-apa, karena tugas kita biasanya melakukan prosedur penyelesaian \"umum\".\n2. *Handler* `finally` melewatkan hasil dan *error* ke *handler* selanjutnya.\n\n Misalnya, di sini hasilnya dilewatkan melalui `finally` ke `then`:\n ```js run\n new Promise((resolve, reject) => {\n setTimeout(() => resolve(\"result\"), 2000)\n })\n .finally(() => alert(\"Promise ready\"))\n .then(result => alert(result)); // <-- .then menangani hasilnya\n ```\n\n Dan di sini ada *error* di dalam *promise*, dilewatkan melalui `finally` ke `catch`:\n\n ```js run\n new Promise((resolve, reject) => {\n throw new Error(\"error\");\n })\n .finally(() => alert(\"Promise ready\"))\n .catch(err => alert(err)); // <-- .catch menangani objek galat\n ``` \n\n\n Itu sangat nyaman, karena `finally` tidak dimaksudkan untuk memproses hasil dari *promise*. Jadi itu melewatinya.\n\n Kita akan berbicara lebih banyak tentang *chaining promise* dan *passing-result* antara *handler* di bab selanjutnya.\n\n3. Terakhir, namun tidak kalah pentingnya, *syntax* `.finally(f)` lebih nyaman daripada `.then(f, f)`: tidak perlu menduplikasi fungsi `f`.\n\n````smart header=\"Dengan promise yang sudah ditentukan handler segera menjalankannya\"\n Jika *promise* tertunda, *handler* `.then/catch/finally` akan menunggu *promise* tersebut. Jika tidak, jika *promise* sudah selesai, handler langsung menjalankan:\n\n```js run\n// \"promise\" diselesaikan segera setelah dibuat\nlet promise = new Promise(resolve => resolve(\"done!\"));\n\npromise.then(alert); // done! (muncul sekarang)\n```\nPerhatikan bahwa ini membuat Promise lebih efektif daripada skenario \"daftar berlangganan\" di kehidupan nyata. Jika penyanyi sudah merilis lagu mereka dan kemudian seseorang mendaftar di daftar berlangganan, mereka mungkin tidak akan menerima lagu itu. Berlangganan dalam kehidupan nyata harus dilakukan sebelum acara tersebut.\n\nPromise lebih fleksibel. Kita bisa menambahkan handlers kapan saja: jika hasilnya sudah ada, mereka langsung mengeksekusi.\n````\n\nSelanjutnya, mari kita lihat contoh-contoh yang lebih praktis tentang bagaimana *promise* dapat membantu kita menulis kode *asynchronous*.\n\n## Contoh: loadScript [#loadscript]\n\nKita punya fungsi `loadScript` untuk memuat skrip dari bab sebelumnya.\n\nInilah varian berbasis *callback*, hanya untuk mengingatkan kita tentang itu:\n\n```js\nfunction loadScript(src, callback) {\n let script = document.createElement('script');\n script.src = src;\n\n script.onload = () => callback(null, script);\n script.onerror = () => callback(new Error(`Script load error for ${src}`));\n\n document.head.append(script);\n}\n```\n\nMari tulis ulang menggunakan *Promise*.\n\nFungsi baru `loadScript` tidak akan memerlukan *callback*. Sebagai gantinya, fungsi tersebut akan membuat dan mengembalikkan sebuah objek *Promise* yang diselesaikan ketika pemuatan sudah selesai. Kode yang paling luar dapat menambah *handler* (fungsi berlangganan) dengan menggunakan `.then`:\n\n```js run\nfunction loadScript(src) {\n return new Promise(function(resolve, reject) {\n let script = document.createElement('script');\n script.src = src;\n\n script.onload = () => resolve(script);\n script.onerror = () => reject(new Error(`Script load error for ${src}`));\n\n document.head.append(script);\n });\n}\n```\n\nPemakaian:\n\n```js run\nlet promise = loadScript(\"https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js\");\n\npromise.then(\n script => alert(`${script.src} is loaded!`),\n error => alert(`Error: ${error.message}`)\n);\n\npromise.then(script => alert('Another handler...'));\n```\n\nKita dapat segera melihat beberapa manfaat melalui pola berbasis *callback*:\n\n\n| Promise | Callback |\n|----------|-----------|\n| *Promise* memungkinkan kita melakukan hal-hal dalam urutan alami. Pertama, kita menjalankan `loadScript(script)`, dan `.then` kita menulis apa yang harus dilakukan dengan hasilnya. | Kita harus punya fungsi `callback` yang kita miliki saat memanggil `loadScript(script, callback)`. Dengan kata lain, kita harus tau apa yang harus dilakukan dengan hasil *sebelum* `loadScript` dipanggil. |\n| Kita dapat memanggil `.then` pada *Promise* sebanyak yang kita inginkan. Setiap kali, kita tambahkan \"fan\" baru, fungsi berlangganan baru, ke \"daftar berlangganan\". Lebih lanjut tentang ini di bab selanjutnya: [](info:promise-chaining). | Hanya ada satu *callback*. |\n\nJadi *promise* memberikan kita aliran kode dan fleksibilitas yang lebih baik. Tetapi masih ada lagi. Kita akan melihatnya di bab-bab selanjutnya.\n" }, { "path": "1-js/11-async/02-promise-basics/head.html", "content": "\n" }, { "path": "1-js/11-async/03-promise-chaining/01-then-vs-catch/solution.md", "content": "Jawaban singkatnya adalah: **tidak, mereka tidak sama**:\n\nPerbedaannya adalah bahwa jika terjadi sebuah _error_ di dalam `f1`, kemudian ditangani oleh `.catch` disini:\n\n```js run\npromise.then(f1).catch(f2);\n```\n\n...Tetapi bukan disini:\n\n```js run\npromise.then(f1, f2);\n```\n\nItulah kenapa sebuah _error_ diturunkan ke _chain_, dan didalam bagian kode kedua disana tidak ada _chain_ dibawah `f1`.\n\n\nDengan kata lain, `.then` meneruskan _result_/_error_ ke `.then/catch` selanjutnya. Jadi pada contoh pertama, ada sebuah `catch` di bawah, dan yang kedua -- disana tidak ada, jadi _error_ tidak ditangani.\n" }, { "path": "1-js/11-async/03-promise-chaining/01-then-vs-catch/task.md", "content": "# Promise: then versus catch\n\nApakah potongan kode ini sama? Dengan kata lain, apakah mereka berperilaku sama dalam situasai apapun, untuk setiap _handler functions_?\n\n```js\npromise.then(f1).catch(f2);\n```\n\nVersus:\n\n```js\npromise.then(f1, f2);\n```\n" }, { "path": "1-js/11-async/03-promise-chaining/article.md", "content": "# Promises chaining\n\n\nMari kembali ke masalah yang disebutkan di dalam bab : kita memiliki sebuah urutan tugas _asynchronous_ untuk dilakukan satu demi satu. Sebagai contoh, memuat _scripts_. Bagaimana kita bisa membuat kodenya dengan baik?\n\nPromises menyediakan beberapa resep untuk melakukannya.\n\nDi bab ini kita melibatkan _promise chaining_.\n\nItu terlihat seperti ini:\n\n```js run\nnew Promise(function (resolve, reject) {\n setTimeout(() => resolve(1), 1000); // (*)\n})\n .then(function (result) {\n // (**)\n\n alert(result); // 1\n return result * 2;\n })\n .then(function (result) {\n // (***)\n\n alert(result); // 2\n return result * 2;\n })\n .then(function (result) {\n alert(result); // 4\n return result * 2;\n });\n```\n\nIdenya adalah bahwa **result** diteruskan melalui rantai _handlers_ `.then`.\n\nIni alurnya:\n\n1. Promise pertama selesai dalam 1 detik `(*)`,\n2. Kemudian _handler_ `.then` dipanggil `(**)`.\n3. Nilai yang dikembalikan diteruskan ke handler `.then` selanjutnya `(***)`\n4. ...dan seterusnya.\n\nSelama **result** diteruskan di sepanjang rantai _handlers_, kita bisa melihat urutan pemanggilan `alert`: `1` -> `2` -> `4`.\n\n![](promise-then-chain.svg)\n\nSeluruhnya bekerja, karena pemanggilan ke `promise.then` mengembalikan sebuah _promise_, jadi kita bisa memanggil `.then` selanjutnya.\n\nKetika sebuah _handler_ mengembalikan nilai, _handler_ tersebut menjadi hasil dari promise, jadi `.then` selanjutnya dipanggil dengan itu.\n\n**Kesalahan klasik pemula: secara teknis kita juga dapat menambahkan banyak `.then` ke satu promise. Ini bukan chaining.**\n\nSebagai contoh:\n\n```js run\nlet promise = new Promise(function (resolve, reject) {\n setTimeout(() => resolve(1), 1000);\n});\n\npromise.then(function (result) {\n alert(result); // 1\n return result * 2;\n});\n\npromise.then(function (result) {\n alert(result); // 1\n return result * 2;\n});\n\npromise.then(function (result) {\n alert(result); // 1\n return result * 2;\n});\n```\n\nApa yang kita lakukan di sini hanya beberapa _handlers_ untuk satu _promise_. _Handlers_ tersebut tidak meneruskan result ke satu sama lain, melainkan memprosesnya masing-masing.\n\nIni gambarnya (bandingkan dengan _chaining_ di atas):\n\n![](promise-then-many.svg)\n\nSemua `.then` pada _promise_ yang sama mendapatkan _result_ yang sama -- _result_ dari _promise_. Jadi di dalam kode di atas semua `alert` menunjukkan yang sama: `1`.\n\nDalam prakteknya kita jarang membutuhkan banyak _handlers_ untuk satu _promise_. Chaining lebih sering digunakan.\n\n## Mengembalikan promises\n\nSebuah _handler_, yang digunakan di dalam `.then(handler)` dapat membuat dan mengambalikan sebuah _promise_.\n\nDalam hal ini _handlers_ selanjutnya menunggu sampai mengendap, dan kemudian mendapatkan hasilnya.\n\nSebagai contoh:\n\n```js run\nnew Promise(function(resolve, reject) {\n\n setTimeout(() => resolve(1), 1000);\n\n}).then(function(result) {\n\n alert(result); // 1\n\n*!*\n return new Promise((resolve, reject) => { // (*)\n setTimeout(() => resolve(result * 2), 1000);\n });\n*/!*\n\n}).then(function(result) { // (**)\n\n alert(result); // 2\n\n return new Promise((resolve, reject) => {\n setTimeout(() => resolve(result * 2), 1000);\n });\n\n}).then(function(result) {\n\n alert(result); // 4\n\n});\n```\n\nDi sini `.then` pertama menunjukan `1` dan mengembalikan `new Promise(…)` pada baris `(*)`. Setelah satu detik selesai, dan hasil (argument `resolve`, di sini `result * 2`) diteruskan ke _handler_ `.then` kedua. Handler pada baris `(**)`, menunjukan `2` dan melakukan hal yang sama.\n\nJadi keluarannya sama dengan contoh sebelumnya: 1 -> 2 -> 4, tetapi sekarang dengan menunda 1 detik antara pemanggilan `alert`.\n\nMengembalikan _promises_ memperbolehkan kita untuk membangun rantai aksi _asynchronous_.\n\n## Contoh: loadScript\n\nMari menggunakan fitur ini dengan _promisified_ `loadScript`, didefinisikan di [bab sebelumnya](info:promise-basics#loadscript), untuk memuat _scripts_ satu demi satu, secara berurutan:\n\n```js run\nloadScript(\"/article/promise-chaining/one.js\")\n .then(function (script) {\n return loadScript(\"/article/promise-chaining/two.js\");\n })\n .then(function (script) {\n return loadScript(\"/article/promise-chaining/three.js\");\n })\n .then(function (script) {\n // gunakan functions yang dideklarasikan di dalam scripts\n // untuk menunjukkan bahwa functions memang dimuat\n one();\n two();\n three();\n });\n```\n\nKode ini bisa lebih ringkas dengan _arrow functions_:\n\n```js run\nloadScript(\"/article/promise-chaining/one.js\")\n .then((script) => loadScript(\"/article/promise-chaining/two.js\"))\n .then((script) => loadScript(\"/article/promise-chaining/three.js\"))\n .then((script) => {\n // scripts dimuat, kita dapat menggunakan functions yang dideklarasikan di sini\n one();\n two();\n three();\n });\n```\n\nDi sini setiap pemanggilan `loadScript` mengembalikkan sebuah _promise_, dan `.then` selanjutnya berjalan ketika _promise_ selesai. Kemudian memulai pemuatan _script_ selanjutnya. Jadi _scripts_ dimuat satu setelah yang lain.\n\n\nKita dapat menambahkan lagi aksi asynchronous ke rantainya. Harap catat bahwa kodenya masih \"flat\", kodenya tumbuh ke bawah bukan ke kanan. Tidak ada tanda-tanda \"pyramid of doom\".\n\nSecara teknis, kita dapat menambahkan `.then` secara langsung ke setiap `loadScript`, seperti ini:\n\n```js run\nloadScript(\"/article/promise-chaining/one.js\").then((script1) => {\n loadScript(\"/article/promise-chaining/two.js\").then((script2) => {\n loadScript(\"/article/promise-chaining/three.js\").then((script3) => {\n // this function has access to variables script1, script2 and script3\n one();\n two();\n three();\n });\n });\n});\n```\n\nKode ini melakukan hal yang sama: muat 3 _scripts_ berurutan. Tetapi \"tumbuh ke kanan\". Jadi kita punya masalah yang sama dengan _callbacks_.\n\nOrang yang baru memulai untuk menggunakan _promises_ kadang-kadang tidak tahu tentang _chaining_, jadi mereka menulisnya dengan cara ini. Umumnya, _chaining_ lebih disukai.\n\nTerkadang ok untuk menulis `.then` secara langsung, karena _function_ bersarang memiliki akses ke luar _scope_. Pada contoh di atas _callback_ paling bertingkat memiliki akses ke semua variabel `script1`, `script2`, `script3`. Tetapi itu pengecualian bukan aturan.\n\n````smart header=\"Thenables\"\n\nTepatnya, sebuah handler mungkin tidak mengembalikkan sebuah promise, tetapi dipanggil objek \"thenable\" - sebuah objek sewenang-wenang yang memiliki method `.then`, dan diperlakukan sama seperti sebuah promise.\n\nIdenya adalah bahwa pustaka 3rd-party dapat menerapkan objek \"promise-compatible\" mereka sendiri. Mereka dapat memiliki serangkaian methods yang luas, tetapi juga kompatibel dengan promises asli, karena mereka menerapkan `.then`.\n\n\nIni contoh dari objek thenable:\n\n```js run\nclass Thenable {\n constructor(num) {\n this.num = num;\n }\n then(resolve, reject) {\n alert(resolve); // function() { native code }\n // selesai dengan this.num*2 setelah 1 detik\n setTimeout(() => resolve(this.num * 2), 1000); // (**)\n }\n}\n\nnew Promise(resolve => resolve(1))\n .then(result => {\n*!*\n return new Thenable(result); // (*)\n*/!*\n })\n .then(alert); // menunjukkan 2 setelah 1000ms\n```\n\n\nJavaScript memeriksa objek yang dikembalikkan oleh handler `.then` di baris `(*)`: jika ada method callable yang bernama `then`, kemudian method tersebut memanggil method yang menyediakan functions `resolve`, `reject` asli sebagai arguments (mirip ke eksekutor) dan menunggu sampai satu dari mereka dipanggil. Pada contoh di atas `resolve(2)` dipanggil setelah 1 detik `(**)`. Kemudian result diteruskan ke bawah chain.\n\n\nFitur ini memperbolehkan kita untuk untuk mengintegrasikan objek kustom dengan promise chains tanpa memiliki pewarisan dari `Promise`.\n````\n\n## Contoh Terbesar: fetch\n\nDi dalam pemrograman frontend promises sering digunakan untuk permintaan jaringan. Jadi mari lihat contoh yang lebih luas dari itu.\n\nKita akan menggunakan methos [fetch](info:fetch) untuk memuat informasi tentang pengguna dari server jarak jauh. Banyak sekali pilihan parameter yang dilibatkan di dalam [bab terpisah](info:fetch), tetapi sintaksis dasar cukup sederhana:\n\n```js\nlet promise = fetch(url);\n```\n\nIni membuat permintaan jaringan ke `url` dan mengembalikkan sebuah _promise_. Promise selesai dengan objek `response` ketika server jarak jauh merespon dengan header, tetapi _sebelum response penuh diunduh_.\n\n\nUntuk membaca response penuh, kita harus memanggil sebuah method `response.text()`: method tersebut mengembalikkan sebuah promise yang selesai ketika teks penuh ull telah diunduh dari server jarak jauh, dengan teks tersebut sebagai hasilnya.\n\nKode di bawah ini membuat permintaan ke `user.json` dan memuat teks dari server:\n\n```js run\nfetch(\"/article/promise-chaining/user.json\")\n // .then di bawah berjalan ketika server jarak jauh merespon\n .then(function (response) {\n // response.text() mengembalikkan sebuah promise baru yang selesai dengan response teks penuh\n // ketika dimuat\n return response.text();\n })\n\n .then(function (text) {\n // ...dan di sini isi dari file remote\n alert(text); // {\"name\": \"iliakan\", isAdmin: true}\n });\n```\n\nDi sana juga ada method `response.json()` yang membaca data remote dan parsing sebagai JSON. Pada kasus kita lebih sesuai, jadi mari ganti dengan itu.\n\n .then(function(text) {\n // ...and here's the content of the remote file\n alert(text); // {\"name\": \"iliakan\", \"isAdmin\": true}\n });\n```\n\nKita juga akan menggunakan arrow functions untuk keringkasan:\n\n```js run\n// sama seperti di atas, tetapi response.json() parsing konten remote sebagai JSON\nfetch(\"/article/promise-chaining/user.json\")\n .then((response) => response.json())\n .then((user) => alert(user.name)); // iliakan, mendapatkan user name\n```\n\nSekarang mari lakukan sesuatu dengan memuat pengguna.\n\nSebagai contoh, kita dapat membuat satu atau lebih permintaan ke GitHub, muat profil pengguna dan tunjukkan avatarnya:\n\n```js run\n// Buat permintaan ke user.json\nfetch(\"/article/promise-chaining/user.json\")\n // Muat sebagai json\n .then((response) => response.json())\n // Buat permintaan ke GitHub\n .then((user) => fetch(`https://api.github.com/users/${user.name}`))\n // Muat response sebagai json\n .then((response) => response.json())\n // Tunjukkan gambar avatar (githubUser.avatar_url) untuk 3 detik (mungkin hidupkan itu)\n .then((githubUser) => {\n let img = document.createElement(\"img\");\n img.src = githubUser.avatar_url;\n img.className = \"promise-avatar-example\";\n document.body.append(img);\n\n setTimeout(() => img.remove(), 3000); // (*)\n });\n```\n\nKodenya bekerja, lihat komentar tentang detail. Meskipun, di sana ada potensi masalah di dalamnya, kesalahan umum dari mereka yang mulai menggunakan promise.\n\nLihat pada baris `(*)`: bagaimana kita dapat melakukan sesuatu _setelah_ avatar telah muncul dan dihapus? sebagai contoh, kita ingin menunjukkan form untuk mengubah pengguna atau sesuatu yang lain. Sampai sekarang, tidak mungkin.\n\nUntuk membuat chain bisa diperpanjang, kita butuh untuk mengembalikkan sebuah promise yang selesai ketika avatar selesai muncul.\n\nSeperti ini:\n\n```js run\nfetch('/article/promise-chaining/user.json')\n .then(response => response.json())\n .then(user => fetch(`https://api.github.com/users/${user.name}`))\n .then(response => response.json())\n*!*\n .then(githubUser => new Promise(function(resolve, reject) { // (*)\n*/!*\n let img = document.createElement('img');\n img.src = githubUser.avatar_url;\n img.className = \"promise-avatar-example\";\n document.body.append(img);\n\n setTimeout(() => {\n img.remove();\n*!*\n resolve(githubUser); // (**)\n*/!*\n }, 3000);\n }))\n // terpicu setelah 3 detik\n .then(githubUser => alert(`Finished showing ${githubUser.name}`));\n```\n\nItu adalah, _handler_ `.then` pada baris `(*)` sekarang mengembalikkan `new Promise`, yang menjadi mengendap hanya setelah pemanggilan `resolve(githubUser)` dalam `setTimeout` `(**)`.\n\n`.then` selanjutnya di dalam _chain_ akan menunggu untuk itu.\n\nSeperti peraturan yang bagus, sebuah aksi _asynchronous_ harus selalu mengembalikkan sebuah promise.\n\nItu membuat kemungkinan untuk rencana aksi setelahnya. Bahkan jika kita tidak berencana memperpanjang _chain_ sekarang, kita mungkin membutuhkannya nanti.\n\nAkhinya, kita dapat memecah kodenya ke dalam _function_ yang dapat digunakan kembali:\n\n```js run\nfunction loadJson(url) {\n return fetch(url).then((response) => response.json());\n}\n\nfunction loadGithubUser(name) {\n return fetch(`https://api.github.com/users/${name}`).then((response) =>\n response.json()\n );\n}\n\nfunction showAvatar(githubUser) {\n return new Promise(function (resolve, reject) {\n let img = document.createElement(\"img\");\n img.src = githubUser.avatar_url;\n img.className = \"promise-avatar-example\";\n document.body.append(img);\n\n setTimeout(() => {\n img.remove();\n resolve(githubUser);\n }, 3000);\n });\n}\n\n// Gunakan mereka:\nloadJson(\"/article/promise-chaining/user.json\")\n .then((user) => loadGithubUser(user.name))\n .then(showAvatar)\n .then((githubUser) => alert(`Finished showing ${githubUser.name}`));\n// ...\n```\n\n## Ringkasan\n\nJika ada _handler_ `.then` (atau `catch/finally`, tidak masalah) mengembalikkan sebuah _promise_, _chain_ sisanya akan menunggu sampai mengendap. Saat itu terjadi, hasilnya (atau error) diteruskan lebih jauh.\n\nDi sini gambar penuhnya:\n\n![](promise-handler-variants.svg)\n" }, { "path": "1-js/11-async/03-promise-chaining/getMessage.js", "content": "function getMessage() {\n return \"Hello, world!\";\n}\n" }, { "path": "1-js/11-async/03-promise-chaining/head.html", "content": "\n\n\n" }, { "path": "1-js/11-async/03-promise-chaining/one.js", "content": "function one() {\n alert(1);\n}\n" }, { "path": "1-js/11-async/03-promise-chaining/three.js", "content": "function three() {\n alert(3);\n}\n" }, { "path": "1-js/11-async/03-promise-chaining/two.js", "content": "function two() {\n alert(2);\n}\n" }, { "path": "1-js/11-async/03-promise-chaining/user.json", "content": "{\n \"name\": \"iliakan\",\n \"isAdmin\": true\n}\n" }, { "path": "1-js/11-async/04-promise-error-handling/01-error-async/solution.md", "content": "Jawabannya adalah: **tidak, tidak terpicu**:\n\n```js run\nnew Promise(function (resolve, reject) {\n setTimeout(() => {\n throw new Error(\"Whoops!\");\n }, 1000);\n}).catch(alert);\n```\n\nSeperti yang dikatakan di bab, ada sebuah \"`try..catch` implisit\" di sekitar kode function. jadi semua error synchronous ditangani.\n\nTetapi di sini error tersebut tidak dihasilkan saat eksekutornya berjalan, tapi nanti. Jadi promise tidak dapat menanganinya.\n" }, { "path": "1-js/11-async/04-promise-error-handling/01-error-async/task.md", "content": "# Error di dalam setTimeout\n\nApa yang anda pikirkan? Akankan `.catch` terpicu? Jelaskan jawaban anda.\n\n```js\nnew Promise(function (resolve, reject) {\n setTimeout(() => {\n throw new Error(\"Whoops!\");\n }, 1000);\n}).catch(alert);\n```\n" }, { "path": "1-js/11-async/04-promise-error-handling/article.md", "content": "# Penanganan error dengan promise\n\nChain promise bagus dalam penanganan _error_. ketika sebuah promise me-reject, kontrolnya melompat ke handler rejection terdekat. Itu sangat nyaman dalam praktiknya.\n\nSebagai contoh, kode di bawah sebuah URL ke `fetch` itu salah (tidak ada situs seperti itu) dan `.catch` menangani error tersebut:\n\n```js run\n*!*\nfetch('https://no-such-server.blabla') // reject\n*/!*\n .then(response => response.json())\n .catch(err => alert(err)) // TypeError: failed to fetch (gagal mengambil resourse, error yang dihasilkan mungkin berbeda)\n```\n\nSeperti yang anda lihat, `.catch` tidak harus segera. `.catch` mungkin muncul setelah satu atau mungkin beberapa `.then`.\n\nAtau, mungkin, semuanya baik-baik saja dengan situs tersebut, tetapi response-nya bukan JSON yang valid. Cara termudah untuk catch semua _error_ adalah menambahkan `.catch` pada akhiran chain:\n\n```js run\nfetch('/article/promise-chaining/user.json')\n .then(response => response.json())\n .then(user => fetch(`https://api.github.com/users/${user.name}`))\n .then(response => response.json())\n .then(githubUser => new Promise((resolve, reject) => {\n let img = document.createElement('img');\n img.src = githubUser.avatar_url;\n img.className = \"promise-avatar-example\";\n document.body.append(img);\n\n setTimeout(() => {\n img.remove();\n resolve(githubUser);\n }, 3000);\n }))\n*!*\n .catch(error => alert(error.message));\n*/!*\n```\n\nBiasanya, `.catch` semacam itu tidak memicu sama sekali. Tetapi jika salah satu promise di atas me-reject (sebuah masalah jaringan atau json yang tidak valid atau apapun itu), maka promise tersebut akan meng-catch-nya.\n\n## try..catch implisit\n\nKode dari sebuah eksekutor promise dan handler promise memiliki \"`try..catch` yang tak terlihat\" di sekitarnya. Jika terjadi pengecualian, maka pengecualian itu tertangkap dan diperlakukan sebagai rejection.\n\nSebagai contoh, kode ini:\n\n```js run\nnew Promise((resolve, reject) => {\n*!*\n throw new Error(\"Whoops!\");\n*/!*\n}).catch(alert); // Error: Whoops!\n```\n\n...Bekerja persis sama seperti ini:\n\n```js run\nnew Promise((resolve, reject) => {\n*!*\n reject(new Error(\"Whoops!\"));\n*/!*\n}).catch(alert); // Error: Whoops!\n```\n\n\"`try..catch` yang tak terlihat\" di sekitar eksekutor secara otomatis menangkap _error_ dan mengubahnya menjadi promise yang direject.\n\nIni terjadi bukan hanya di dalam function eksekutor saja, tetapi di handler-nya juga. Jika kita `throw` dalam handler `.then`, itu artinya sebuah promise yang direject, jadi kontrolnya melompat ke handler error terdekat.\n\nIni contohnya:\n\n```js run\nnew Promise((resolve, reject) => {\n resolve(\"ok\");\n}).then((result) => {\n*!*\n throw new Error(\"Whoops!\"); // reject promise tersebut\n*/!*\n}).catch(alert); // Error: Whoops!\n```\n\nIni terjadi pada semua _error_, tidak hanya disebabkan oleh pernyataan `throw`. Sebagai contoh, sebuah _error_ pemrograman:\n\n```js run\nnew Promise((resolve, reject) => {\n resolve(\"ok\");\n}).then((result) => {\n*!*\n blabla(); // tidak ada fungsi seperti ini\n*/!*\n}).catch(alert); // ReferenceError: blabla is not defined (blabla tidak terdefinisi)\n```\n\n`.catch` terakhir tidak hanya meng-catch rejection secara ekplisit, tetapi juga sesekali _error_ dalam handler di atas.\n\n## Melempar kembali\n\nSeperti yang sudah kita perhatikan, `.catch` di akhir chain mirip dengan `try..catch`. Kita bisa saja memiliki sebanyak mungkin handler `.then` seperti yang kita inginkan, dan kemudian menggunakan satu `.catch` di akhir untuk menangani _error_ di semuanya.\n\nDi dalam `try..catch` biasa kita dapat menganalisis _error_ nya dan mungkin melemparkannya kembali jika tidak bisa ditangani. Hal yang sama mungkin untuk promise.\n\nJika kita `throw` di dalam `.catch`, kemudian kontrolnya mengarah ke handler _error_ terdekat selanjutnya. Dan jika kita menangani _error_ dan selesai dengan normal, kemudian berlanjut ke handler `.then` sukses terdekat berikutnya.\n\nPada contoh di bawah ini `.catch` sukses menangani _error_:\n\n```js run\n// eksekusi: catch -> then\nnew Promise((resolve, reject) => {\n throw new Error(\"Whoops!\");\n})\n .catch(function (error) {\n alert(\"The error is handled, continue normally\");\n })\n .then(() => alert(\"Next successful handler runs\"));\n```\n\nDisini blok `.catch` selesai secara normal. Jadi handler `.then` yang sukses selanjutnya dipanggil.\n\nPada contoh di bawah ini kita lihat situasi lain dengan `.catch`. Handler `(*)` menangkap _error_ dan tidak bisa mengatasinya (misalnya hanya tahu bagaimana menangani `URIError`), jadi _error_-nya dilempar lagi:\n\n```js run\n// eksekusi: catch -> catch -> then\nnew Promise((resolve, reject) => {\n\n throw new Error(\"Whoops!\");\n\n}).catch(function(error) { // (*)\n\n if (error instanceof URIError) {\n // tangani di sini\n } else {\n alert(\"Can't handle such error\");\n\n*!*\n throw error; // lemparkan ini atau error lain melompat ke catch selanjutnya\n*/!*\n }\n\n}).then(function() {\n /* tidak berjalan di sini */\n}).catch(error => { // (**)\n\n alert(`The unknown error has occurred: ${error}`);\n // tidak mengembalikkan apapun => eksekusi berjalan normal\n\n});\n```\n\nEksekusi tersebut melompat dari `.catch` `(*)` pertama ke yang selanjutnya `(**)` menuruni chain.\n\n## Rejection yang tidak tertangani\n\nApa yang terjadi ketika sebuah _error_ tidak ditangani? Sebagai contoh, kita lupa untuk menambahkan `.catch` ke akhir chain, seperti ini:\n\n```js untrusted run refresh\nnew Promise(function () {\n noSuchFunction(); // Error di sini (tidak ada function seperti itu)\n}).then(() => {\n // handler promise yang sukses, satu atau lebih\n}); // tanpa .catch di akhir!\n```\n\nJika terjadi _error_, promise jadi direject, dan eksekusi harus melompat ke handler penolakan terdekat. Tapi tidak ada. Jadi _error_-nya \"stuck\". Tidak ada kode untuk menangani-nya.\n\nDalam prakteknya, seperti _error_ biasa yang tidak tertangani dalam kode, itu berarti ada sesuatu yang tidak beres.\n\nApa yang terjadi ketika sebuah _error_ biasa muncul dan tidak tertangkap oleh `try..catch`? script-nya mati dengan sebuah pesan di console. Sesuatu yang mirip terjadi dengan rejection promise yang tidak tertangani.\n\nMesin JavaScript melacak rejection tersebut dan menghasilkan _error_ global dalam kasus itu. Anda dapat melihatnya di console jika anda menjalankan contoh di atas.\n\nDi dalam peramban kita dapat meng-catch kesalahan tersebut menggunakan event `unhandledrejection`:\n\n```js run\n*!*\nwindow.addEventListener('unhandledrejection', function(event) {\n // object event tersebut memiliki dua properti spesial:\n alert(event.promise); // [object Promise] - promise yang menghasilkan error\n alert(event.reason); // Error: Whoops! - object error yang tidak tertangani\n});\n*/!*\n\nnew Promise(function() {\n throw new Error(\"Whoops!\");\n}); // tidak ada catch untuk menangani error\n```\n\nEvent tersebut adalah bagian dari [standar HTML](https://html.spec.whatwg.org/multipage/webappapis.html#unhandled-promise-rejections).\n\nJika sebuah _error_ muncul, dan di sana tidak ada `.catch`, handler `unhandledrejection` terpicu, dan mendapatkan object `event` dengan informasi tentang _error_, jadi kita dapat melakukan sesuatu.\n\nBiasanya _error_ seperti itu tidak dapat dipulihkan, jadi jalan keluar terbaik kita adalah memberi tahu pengguna tentang masalah dan mungkin melaporkan insiden tersebut ke server.\n\nDi dalam lingkungan non-peramban seperti Node.js di sana ada cara lain untuk melacak _error_ yang tak tertangani.\n\n## Ringkasan\n\n- `.catch` menangani _error_ di segala macam promise: baik itu panggilan `reject()`, atau sebuah _error_ yang dilemparkan di dalam handler.\n- Kita harus meletakkan `.catch` tepat di tempat dimana kita ingin menangani _error_ dan tahu bagaimana untuk menangani _error-error_ tersebut. Handler harus menganalisa _error_ (bantuan class _error_ khusus) dan melemparkan kembali yang tidak diketahui (mungkin itu adalah kesalahan pemrograman).\n- Ok untuk tidak menggunakan `.catch` sama sekali, jika tidak ada cara untuk memulihkan dari kesalahan.\n- Bagaimanapun kita harus memiliki handler event `unhandledrejection` (untuk peramban,dan analog untuk lingkungan lainnya), untuk melacak _error_ yang tak tertangani dan memberi tahu pengguna (dan mungkin server kita) tentang _error-error_ tersebut, jadi aplikasi kita tidak pernah \"mati begitu saja\".\n" }, { "path": "1-js/11-async/04-promise-error-handling/getMessage.js", "content": "function getMessage() {\n return \"Hello, world!\";\n}\n" }, { "path": "1-js/11-async/04-promise-error-handling/head.html", "content": "\n\n\n" }, { "path": "1-js/11-async/04-promise-error-handling/one.js", "content": "function one() {\n alert(1);\n}\n" }, { "path": "1-js/11-async/04-promise-error-handling/three.js", "content": "function three() {\n alert(3);\n}\n" }, { "path": "1-js/11-async/04-promise-error-handling/two.js", "content": "function two() {\n alert(2);\n}\n" }, { "path": "1-js/11-async/04-promise-error-handling/user.json", "content": "{\n \"name\": \"iliakan\",\n \"isAdmin\": true\n}\n" }, { "path": "1-js/11-async/05-promise-api/article.md", "content": "# API Promise\n\nAda 6 method static di dalam class `Promise`. Kita akan segera membahas kasus penggunaan method-method tersebut di sini.\n\n## Promise.all\n\nKatakanlah kita ingin menjalankan banyak promise untuk dieksekusi secara paralel, dan menunggu sampai semua promise tersebut siap.\n\nSebagai contoh, unduh beberapa URL secara paralel dan proses isinya ketika semuanya selesai.\n\nItulah gunanya `Promise.all`.\n\nSintaksis nya adalah:\n\n```js\nlet promise = Promise.all([...promises...]);\n```\n\n`Promise.all` mengambil sebuah array promise (secara teknis bisa menjadi iterable, tetapi biasanya sebuah array) dan mengembalikkan promise baru.\n\nPromise baru resolve ketika semua promise yang terdaftar diselesaikan dan array dari hasil promise menjadi hasilnya itu sendiri.\n\nSebagai contoh, `Promise.all` di bawah selesai setelah 3 detik, dan kemudian hasilnya adalah sebuah array `[1, 2, 3]`:\n\n```js run\nPromise.all([\n new Promise((resolve) => setTimeout(() => resolve(1), 3000)), // 1\n new Promise((resolve) => setTimeout(() => resolve(2), 2000)), // 2\n new Promise((resolve) => setTimeout(() => resolve(3), 1000)), // 3\n]).then(alert); // 1,2,3 ketika promise sudah siap: setiap promise menyumbangkan sebuah member array\n```\n\nHarap dicatat bahwa urutan member array yang dihasilkan adalah sama dengan sumber promise. Meskipun promise pertama membutuhkan waktu yang lama untuk resolve, promise tersebut masih yang pertama di dalam hasil array.\n\nSebuah trik umum adalah untuk memetakan sebuah array dari data pekerjaan kedalam array promise, dan kemudian membungkusnya kedalam `Promise.all`.\n\nSebagai contoh, jika kita memiliki array URL, kita dapat mengambil array-array tersebut seperti ini:\n\n```js run\nlet urls = [\n \"https://api.github.com/users/iliakan\",\n \"https://api.github.com/users/remy\",\n \"https://api.github.com/users/jeresig\",\n];\n\n// memetakan setiap url ke pengambilan promise\nlet requests = urls.map((url) => fetch(url));\n\n// Promise.all menunggu sampai semua pekerjaan telah diresolve\nPromise.all(requests).then((responses) =>\n responses.forEach((response) => alert(`${response.url}: ${response.status}`))\n);\n```\n\n\nContoh terbesar dengan mengambil informasi pengguna untuk sebuah array pengguna GitHub dengan nama mereka (kita dapat mengambil array dengan id mereka, logika nya sama):\n\n```js run\nlet names = [\"iliakan\", \"remy\", \"jeresig\"];\n\nlet requests = names.map((name) =>\n fetch(`https://api.github.com/users/${name}`)\n);\n\nPromise.all(requests)\n .then((responses) => {\n // semua response telah sukses diresolve\n for (let response of responses) {\n alert(`${response.url}: ${response.status}`); // menunjukkan 200 untuk setiap url\n }\n\n return responses;\n })\n\n // memetakan array response kedalam array response.json() untuk membaca isinya\n .then((responses) => Promise.all(responses.map((r) => r.json())))\n // semua jawaban JSON diuraikan: \"users\" adalah array dari jawaban tersebut\n .then((users) => users.forEach((user) => alert(user.name)));\n```\n\n**Jika ada promise yang direject, promise tersebut dikembalikkan oleh `Promise.all` secara langsung me-reject nya dengan error itu.**\n\nSebagai contoh:\n\n```js run\nPromise.all([\n new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),\n*!*\n new Promise((resolve, reject) => setTimeout(() => reject(new Error(\"Whoops!\")), 2000)),\n*/!*\n new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))\n]).catch(alert); // Error: Whoops!\n```\n\n\nDisini promise kedua reject dalam dua detik. Itu langsung mengarah pada rejection `Promise.all`, jadi eksekusi `.catch`: error rejection menjadi hasil keseluruhan `Promise.all`.\n\n\n```warn header=\"Jika terjadi sebuah error, promise lain diabaikan\"\nJika satu promise reject, `Promise.all` langsung reject, benar-benar melupakan yang lainnya yang ada di dalam daftar. Hasil dari promise-promise tersebut diabaikan.\n\nSebagai contoh, jika disana ada banyak pemanggilan `fetch`, seperti contoh di atas, dan satu gagal, yang lainnya akan terus mengeksekusi, tetapi `Promise.all` tidak akan memperhatikan promise-promisenya lagi. Promise-promise tersebut mungkin selesai, tetapi hasilnya akan diabaikan.\n\n`Promise.all` tidak melakukan apapun untuk membatalkan promise-promise tersebut, karena tidak ada konsep \"pembatalan\" di dalam promise. Di [bab lainnya](info:fetch-abort) kita akan membahas `AbortController` yang bisa membantu, tetapi `AbortController` tersebut bukan bagian dari API Promise.\n```\n\n````smart header=\"`Promise.all(iterable)`memungkinkan nilai \\\"regular\\\" non-promise di dalam `iterable`\" Secara normal, `Promise.all(...)` menerima sebuah promise iterable (dalam banyak kasus sebuah array). Tetapi jika salah satu objek bukan promise, objek tersebut diteruskan ke array yang dihasilkan \"sebagaimana adanya\".\n\nSebagai contoh, berikut hasilnya `[1, 2, 3]`:\n\n```js run\nPromise.all([\n new Promise((resolve, reject) => {\n setTimeout(() => resolve(1), 1000);\n }),\n 2,\n 3,\n]).then(alert); // 1, 2, 3\n```\n\nJadi kita dapat meneruskan nilai yang sudah siap ke `Promise.all` jika nyaman.\n\n````\n\n## Promise.allSettled\n\n[recent browser=\"new\"]\n\n`Promise.all` reject seluruhnya jika ada promise yang reject. Itu bagus untuk kasus \"semua atau tidak sama sekali\", ketika kita membutuhkan *semua* hasil untuk melanjutkan:\n\n```js\nPromise.all([\n fetch('/template.html'),\n fetch('/style.css'),\n fetch('/data.json')\n]).then(render); // method render butuh hasil dari semua pengambilan\n````\n\n\n`Promise.allSettled` menunggu semua promise selesai. Array yang dihasilkan memiliki:\n\n- `{status:\"fulfilled\", value:result}` untuk response sukses,\n- `{status:\"rejected\", reason:error}` untuk error.\n\nSebagai contoh, kita ingin mengambil informasi tentang banyak pengguna. Bahkan jika satu request gagal, kita masih tertarik pada yang request yang lain.\n\nMari gunakan `Promise.allSettled`:\n\n```js run\nlet urls = [\n \"https://api.github.com/users/iliakan\",\n \"https://api.github.com/users/remy\",\n \"https://no-such-url\",\n];\n\nPromise.allSettled(urls.map((url) => fetch(url))).then((results) => {\n // (*)\n results.forEach((result, num) => {\n if (result.status == \"fulfilled\") {\n alert(`${urls[num]}: ${result.value.status}`);\n }\n if (result.status == \"rejected\") {\n alert(`${urls[num]}: ${result.reason}`);\n }\n });\n});\n```\n\n`results` pada baris `(*)` di atas akan:\n\n```js\n[\n {status: 'fulfilled', value: ...response...},\n {status: 'fulfilled', value: ...response...},\n {status: 'rejected', reason: ...error object...}\n]\n```\n\nJadi, untuk setiap promise kita mendapatkan status-nya dan `value/error`.\n\n### Polyfill\n\nJika peramban tidak mendukung `Promise.allSettled`, mudah untuk melakukan polyfill:\n\n```js\nif (!Promise.allSettled) {\n const rejectHandler = reason => ({ status: 'rejected', reason });\n\n const resolveHandler = value => ({ status: 'fulfilled', value });\n\n Promise.allSettled = function (promises) {\n const convertedPromises = promises.map(p => Promise.resolve(p).then(resolveHandler, rejectHandler));\n return Promise.all(convertedPromises);\n };\n}\n```\n\nDalam kode ini, `promises.map` mengambil nilai input, berubah menjadi promises (untuk berjaga-jaga jika non-promise yang diteruskan) dengan `p => Promise.resolve(p)`, dan kemudian menambahkan handler `.then` handler ke semuanya.\n\nHandler tersebut mengubah hasil `v` yang sukses menjadi `{state:'fulfilled', value:v}`, dan sebuah error `r` menjadi `{state:'rejected', reason:r}`. Itu persis dengan format `Promise.allSettled`.\n\nKita bisa menggunakan `Promise.allSettled` untuk mendapatkan hasilnya atau _semua_ promise diberikan, bahkan jika beberapa dari promise itu reject.\n\n## Promise.race\n\nMirip dengan `Promise.all`, tetapi hanya menunggu promise pertama diselesaikan, dan mendapatkan hasilnya (atau error).\n\nSintaksisnya adalah:\n\n```js\nlet promise = Promise.race(iterable);\n```\n\nSebagai contoh, hasil di sini akan menjadi `1`:\n\n```js run\nPromise.race([\n new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),\n new Promise((resolve, reject) =>\n setTimeout(() => reject(new Error(\"Whoops!\")), 2000)\n ),\n new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)),\n]).then(alert); // 1\n```\n\nPromise pertama di sini adalah yang tercepat, jadi promise tersebut menjadi hasilnya. Setelah promise pertama yang selesai \"memenangkan balapan\", semua hasil/errors lebih lanjut akan diabaikan.\n\n## Promise.any\n\nSimilar to `Promise.race`, but waits only for the first fulfilled promise and gets its result. If all of the given promises are rejected, then the returned promise is rejected with [`AggregateError`](mdn:js/AggregateError) - a special error object that stores all promise errors in its `errors` property.\n\nThe syntax is:\n\n```js\nlet promise = Promise.any(iterable);\n```\n\nFor instance, here the result will be `1`:\n\n```js run\nPromise.any([\n new Promise((resolve, reject) => setTimeout(() => reject(new Error(\"Whoops!\")), 1000)),\n new Promise((resolve, reject) => setTimeout(() => resolve(1), 2000)),\n new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))\n]).then(alert); // 1\n```\n\nThe first promise here was fastest, but it was rejected, so the second promise became the result. After the first fulfilled promise \"wins the race\", all further results are ignored.\n\nHere's an example when all promises fail:\n\n```js run\nPromise.any([\n new Promise((resolve, reject) => setTimeout(() => reject(new Error(\"Ouch!\")), 1000)),\n new Promise((resolve, reject) => setTimeout(() => reject(new Error(\"Error!\")), 2000))\n]).catch(error => {\n console.log(error.constructor.name); // AggregateError\n console.log(error.errors[0]); // Error: Ouch!\n console.log(error.errors[1]); // Error: Error\n});\n```\n\nAs you can see, error objects for failed promises are available in the `errors` property of the `AggregateError` object.\n\n## Promise.resolve/reject\n\nMethod `Promise.resolve` dan `Promise.reject` jarang dibutuhkan dalam kode modern, karena sintaksis `async/await` (kita akan membahasnya [nanti](info:async-await)) membuat method-method tersebut usang.\n\nKita membahas method-method tersebut di sini sebagai pelengkap, dan bagi mereka yang tidak bisa menggunakan `async/await` untuk beberapa alasan.\n\n- `Promise.resolve(value)` membuat promise yang diresolve dengan hasil `value`.\n\nSama dengan:\n\n```js\nlet promise = new Promise((resolve) => resolve(value));\n```\n\nMethod ini digunakan untuk kompatibilitas, ketika function diharapkan untuk mengembalikkan promise.\n\nSebagai contoh, function `loadCached` di bawah mengambil URL dan mengingat (cache) isinya. Untuk panggilan di masa mendatang dengan URL yang sama itu segera mendapatkan isi sebelumnya dari cache, tetapi menggunakan `Promise.resolve` untuk membuat promise tentang itu, jadi hasil yang dikembalikkan selalu sebuah promise:\n\n```js\nlet cache = new Map();\n\nfunction loadCached(url) {\n if (cache.has(url)) {\n*!*\n return Promise.resolve(cache.get(url)); // (*)\n*/!*\n }\n\n return fetch(url)\n .then(response => response.text())\n .then(text => {\n cache.set(url,text);\n return text;\n });\n}\n```\n\nKita dapat menulis `loadCached(url).then(…)`, karena function tersebut dijamin untuk mengembalikan promise. Kita selalu dapat menggunakan `.then` setelah `loadCached`. Itulah tujuan dari `Promise.resolve` pada baris `(*)`.\n\n### Promise.reject\n\n- `Promise.reject(error)` membuat promise yang direjecet dengan `error`.\n\nSama dengan:\n\n```js\nlet promise = new Promise((resolve, reject) => reject(error));\n```\n\nDalam praktiknya, method ini hampir tidak pernah digunakan.\n\n## Ringkasan\n\nAda 6 method static dari class `Promise`:\n\n1. `Promise.all(promises)` -- menunggu semua promise selesai dan mengambalikan sebuah array sebagai hasilnya. Jika salah satu promises yang diberikan reject, maka menjadi error of `Promise.all`, dan semua hasil lainnya akan diabaikan.\n2. `Promise.allSettled(promises)` (method yang baru ditambahkan) -- menunggu semua promise selesai dan mengembalikan hasilnya sebagai objek array dengan:\n - `state`: `\"fulfilled\"` or `\"rejected\"`\n - `value` (jika fulfilled) atau `reason` (jika rejected).\n3. `Promise.race(promises)` -- menunggu promise pertama selesai, dan hasil/error menjadi hasilnya.\n4. `Promise.any(promises)` (metode baru yang ditambahkan) - menunggu promise pertama terpenuhi, dan hasilnya menjadi hasil keseluruhan. Jika semua janji yang diberikan ditolak, [`AggregateError`] (mdn: js / AggregateError) menjadi eror`Promise.any`.\n5. `Promise.resolve(value)` -- membuat promise yang resolved dengan nilai yang diberikan.\n6. `Promise.reject(error)` -- membuat promise rejected dengan error yang diberikan.\n\n\nDari semua ini, `Promise.all` mungkin yang paling umum dalam praktiknya.\n\n```\n\n```\n" }, { "path": "1-js/11-async/05-promise-api/head.html", "content": "\n" }, { "path": "1-js/11-async/05-promise-api/iliakan.json", "content": "{\n \"name\": \"iliakan\",\n \"isAdmin\": true\n}\n" }, { "path": "1-js/11-async/05-promise-api/one.js", "content": "function one() {\n alert(1);\n}\n" }, { "path": "1-js/11-async/05-promise-api/two.js", "content": "function two() {\n alert(2);\n}\n" }, { "path": "1-js/11-async/06-promisify/article.md", "content": "# Promisifikasi\n\nPromisifikasi -- adalah kata yang panjang untuk transformasi sederhana. Ini adalah konversi dari function yang menerima sebuah callback menjadi function yang mengembalikkan sebuah promise.\n\nTransformasi seperti itu sering kali dibutuhkan dalam kehidupan nyata sebanyak function dan pustaka berbasis callback. Tetapi promise lebih nyaman. Jadi masuk akal untuk melakukan promisify ini.\n\nUntuk pemahaman yang lebih baik, mari kita lihat contoh.\n\nMisalnya, kita memiliki `loadScript (src, callback)` dari bab .\n\n```js run\nfunction loadScript(src, callback) {\n let script = document.createElement(\"script\");\n script.src = src;\n\n script.onload = () => callback(null, script);\n script.onerror = () => callback(new Error(`Script load error for ${src}`));\n\n document.head.append(script);\n}\n\n// penggunaan:\n// loadScript('path/script.js', (err, script) => {...})\n```\n\nFungsi memuat script dengan `src` yang diberikan, dan kemudian memanggil` callback (err) `jika terjadi kesalahan, atau` callback (null, script) `jika pemuatan berhasil. Itu adalah kesepakatan untuk menggunakan callback, kita telah melihat itu sebelumnya.\n\nMari kita jadikan promise.\n\nKita akan membuat fungsi baru `loadScriptPromise (src)`, yang melakukan hal yang sama (memuat skrip), tetapi mengembalikan sebuah promise daripada menggunakan callback.\n\nDengan kata lain, kita hanya meneruskan `src` (tanpa` callback`) dan mendapatkan janji sebagai gantinya, yang menyelesaikan dengan `script` ketika pemuatan berhasil, dan menolak dengan kesalahan sebaliknya.\n\nHere it is:\n```js\nlet loadScriptPromise = function (src) {\n return new Promise((resolve, reject) => {\n loadScript(src, (err, script) => {\n if (err) reject(err);\n else resolve(script);\n });\n });\n};\n\n// penggunaan:\n// loadScriptPromise('path/script.js').then(...)\n```\n\nSeperti yang bisa kita lihat, fungsi baru adalah pembungkus di sekitar fungsi `loadScript` asli. Ia menyebutnya menyediakan callback sendiri yang diterjemahkan menjadi janji `menyelesaikan / menolak`.\n\nSekarang `loadScriptPromise` cocok dengan kode berbasis promise. Jika kita lebih menyukai promise daripada callback (dan segera kita akan melihat lebih banyak alasan untuk itu), maka kita akan menggunakannya.\n\nDalam praktiknya kita mungkin perlu menjanjikan lebih dari satu fungsi, jadi masuk akal untuk menggunakan helper.\n\nKita akan menyebutnya `promisify (f)`: ia menerima fungsi to-promisify `f` dan mengembalikan fungsi pembungkus.\n\n```js\nfunction promisify(f) {\n return function (...args) { // return a wrapper-function (*)\n return new Promise((resolve, reject) => {\n function callback(err, result) { // our custom callback for f (**)\n if (err) {\n reject(err);\n } else {\n resolve(result);\n }\n }\n\n args.push(callback); // tambahkan callback khusus kita ke akhir argumen f\n\n f.call(this, ...args); // panggil fungsi aslinya\n });\n };\n}\n\n// penggunaan:\nlet loadScriptPromise = promisify(loadScript);\nloadScriptPromise(...).then(...);\n```\n\n\nKode mungkin terlihat agak rumit, tetapi pada dasarnya sama dengan yang kita tulis di atas, sambil menjanjikan fungsi `loadScript`.\n\nPanggilan ke `promisify (f)` mengembalikan pembungkus di sekitar `f`` (*) `. Wrapper tersebut mengembalikan sebuah promise dan meneruskan panggilan ke `f` asli, melacak hasilnya di callback kustom` (**) `.\n\nDi sini, `promisify` mengasumsikan bahwa fungsi asli mengharapkan callback dengan tepat dua argumen` (err, result) `. Itulah yang paling sering kita temui. Maka callback khusus kita berada dalam format yang benar-benar tepat, dan `promisify` berfungsi dengan baik untuk kasus seperti itu.\n\n\nTetapi bagaimana jika `f` asli mengharapkan callback dengan lebih banyak argumen` callback (err, res1, res2, ...) `?\n\nKami dapat meningkatkan penolong kami. Mari buat versi lanjutan dari `promisify`.\n\n- Ketika dipanggil sebagai `promisify (f)` seharusnya berfungsi seperti versi di atas.\n- Ketika dipanggil sebagai `promisify (f, true)`, itu harus mengembalikan promise yang diselesaikan dengan array hasil callback. Itu persis untuk callback dengan banyak argumen.\n\n```js\n// promisify(f, true) dapatkan array dari hasil\nfunction promisify(f, manyArgs = false) {\n return function (...args) {\n return new Promise((resolve, reject) => {\n function *!*callback(err, ...results*/!*) { // callback khusus kita untuk f\n if (err) {\n reject(err);\n } else {\n // resolve dengan semua hasil callback jika manyArgs ditentukan\n *!*resolve(manyArgs ? results : results[0]);*/!*\n }\n }\n\n args.push(callback);\n\n f.call(this, ...args);\n });\n };\n}\n\n// penggunaan:\nf = promisify(f, true);\nf(...).then(arrayOfResults => ..., err => ...);\n```\n\nSeperti yang Anda lihat, ini pada dasarnya sama seperti di atas, tetapi `menyelesaikan` dipanggil dengan hanya satu atau semua argumen bergantung pada apakah` manyArgs` benar.\n\nUntuk format callback yang lebih eksotis, seperti yang tidak memiliki `err` sama sekali:` callback (result) `, kita bisa memastikan fungsi tersebut secara manual tanpa menggunakan helper.\n\nAda juga module dengan function promisifikasi yang sedikit lebih fleksibel, misalnya [es6-promisify](https://github.com/digitaldesignlabs/es6-promisify). Di Node.js, ada function `util.promisify` bawaan untuk itu.\n\n```smart\nPromisifikasi adalah pendekatan yang bagus, khususnya ketika anda menggunakan `async/await` (lihat bab selanjutnya), tapi bukan pengganti callback secara total.\n\nIngat, sebuah promise mungkin hanya memiliki satu hasil, tetapi callback mungkin secara teknis dipanggil berkali-kali.\n\nJadi promisifikasi hanya dimaksudkan untuk function yang memanggil callback sekali. Panggilan selanjutnya akan diabaikan.\n```\n" }, { "path": "1-js/11-async/07-microtask-queue/article.md", "content": "# Microtasks\n\nHandler-handler promise `.then`/`.catch`/`.finally` selalu asynchronous.\n\nBahkan ketika sebuah promise diresolve, kode pada baris _di bawah_ `.then`/`.catch`/`.finally` masih akan dieksekusi sebelum handler-handler ini.\n\nBerikut demo-nya:\n\n```js run\nlet promise = Promise.resolve();\n\npromise.then(() => alert(\"promise done!\"));\n\nalert(\"code finished\"); // alert ini muncul lebih dahulu\n```\n\nJika anda menjalankannya, anda melihat `code finished` lebih dahulu, dan kemudian `promise done!`.\n\nItu aneh, karena promise pasti _done_ dari awal.\n\nMengapa `.then` terpicu setelahnya? Apa yang sedang terjadi?\n\n## Antrean Microtasks\n\n\nTask asynchronous membutuhkan manajemen yang tepat. Untuk itu, standar menentukan antrean internal `PromiseJobs`, lebih sering disebut sebagai \"antrean microtask\" (istilah v8).\n\nSeperti yang dikatakan di [spesifikasi](https://tc39.github.io/ecma262/#sec-jobs-and-job-queues):\n\n- Antrean adalah yang pertama masuk-pertama keluar: tasks yang diantrekan pertama dijalankan terlebih dahulu.\n- Eksekusi dari task dimulai jika hanya tidak ada yang berjalan.\n\n\nAtau, untuk mengatakannya secara sederhana, ketika promise sudah siap, handler-handler `.then/catch/finally` ini dimasukkan kedalam antrean. Handler-handler tersebut belum dieksekusi. Mesin JavaScript mengambil tugas dari antrean dan menjalankannya.\n\nItulah kenapa \"code finished\" pada contoh di atas muncul lebih dahulu.\n\n![](promiseQueue.svg)\n\n\nHandler-handler promise selalu melalui antrean internal.\n\nJika ada chain dengan banyak `.then/catch/finally`, maka masing-masing dieksekusi secara asynchronous. Artinya, itu pertama kali masuk ke antrean, dan dieksekusi ketika kode saat ini sudah selesai dan antrean handler-handler sebelumnya sudah selesai.\n\n**Bagaimana jika urutan penting untuk kita? Bagaimana kita membuat `code finished` berjalan setelah `promise done`?**\n\n\nMudah, letakkan saja di dalam antrean dengan `.then`:\n\n```js run\nPromise.resolve()\n .then(() => alert(\"promise done!\"))\n .then(() => alert(\"code finished\"));\n```\n\nSekarang urutannya seperti yang diinginkan.\n\n## Rejection yang tidak tertangani\n\nIngat event `unhandledrejection` dari bab ?\n\nSekarang kita bisa melihat bagaimana sebenarnya JavaScript menemukan bahwa ada rejection yang tidak tertangani.\n\n**\"Rejection yang tidak tertangani\" muncul ketika error promise tidak ditangani di akhir antrean microtask.**\n\nBiasanya, jika kita mengharapkan error, kita menambahkan `.catch` ke chain promise untuk menangani error tersebut:\n\n```js run\nlet promise = Promise.reject(new Error(\"Promise Failed!\"));\n*!*\npromise.catch(err => alert('caught'));\n*/!*\n\n// tidak berjalan: error ditangani\nwindow.addEventListener('unhandledrejection', event => alert(event.reason));\n```\n\n\n...Tetapi jika kita lupa menambah `.catch`, kemudian, setelah antrean microtask sudah kosong, mesin memicu event:\n\n\n```js run\nlet promise = Promise.reject(new Error(\"Promise Failed!\"));\n\n// Promise Gagal!\nwindow.addEventListener(\"unhandledrejection\", (event) => alert(event.reason));\n```\n\nBagaimana jika kita menangani error tersebut nanti? Seperti ini:\n\n```js run\nlet promise = Promise.reject(new Error(\"Promise Failed!\"));\n*!*\nsetTimeout(() => promise.catch(err => alert('caught')), 1000);\n*/!*\n\n// Error: Promise Gagal!\nwindow.addEventListener('unhandledrejection', event => alert(event.reason));\n```\n\n\nSekarang, jika anda menjalankannya, kita akan melihat pesan `Promise Failed!` terlebih dahulu, dan kemudian `caught`.\n\nJika kita tidak tahu tentang antrean microtasks, kita bisa bertanya-tanya: \"Mengapa handler `unhandledrejection` berjalan? Kita menangkap error!\".\n\nTetapi sekarang kita mengerti bahwa `unhandledrejection` dihasilkan saat antrean microtask selesai: mesin memeriksa promise dan, jika ada promise yang berada di state \"rejected\", maka event akan dipicu.\n\nPada contoh di atas, `.catch` ditambahkan oleh `setTimeout` juga pemicu, tetapi kemudian, setelah `unhandledrejection` telah terjadi, jadi itu tidak mengubah apapun.\n\n\n## Ringkasan\n\nPenanganan promise selalu asynchronous, karena semua aksi promise melewati antrean internal \"promise jobs\", juga dipanggil \"antrean microtask\" (istilah v8).\n\nJadi, handler-handler `.then/catch/finally` selalu dipanggil setelah kode saat ini selesai.\n\nJika kita butuh untuk menjamin kalau potongan kode dieksekusi setelah `.then/catch/finally`, kita bisa menambahnya kedalam panggilan chain `.then`.\n\n\nDi sebagian besar mesin Javascript, termasuk peramban dan Node.js, konsep microtasks terkait erat dengan \"event loop\" dan \"macrotasks\". Karena ini tidak berhubungan langsung dengan promise, konsep-konsep tersebut akan dibahas di bagian lain pada tutorial, dalam bab .\n" }, { "path": "1-js/11-async/08-async-await/01-rewrite-async/solution.md", "content": "Catatannya ada di bawah kode:\n\n```js run\nasync function loadJson(url) {\n // (1)\n let response = await fetch(url); // (2)\n\n if (response.status == 200) {\n let json = await response.json(); // (3)\n return json;\n }\n\n throw new Error(response.status);\n}\n\nloadJson(\"no-such-user.json\").catch(alert); // Error: 404 (4)\n```\n\nCatatan:\n\n1. Function `loadJson` menjadi `async`.\n2. Semua `.then` di dalamnya di ganti dengan `await`.\n3. Kita dapat `return response.json()` daripada menunggu untuk itu, seperti ini:\n\n ```js\n if (response.status == 200) {\n return response.json(); // (3)\n }\n ```\n\n Lalu kode terluar harus `await` untuk promise tersebut resolve. Dalam kasus kita, itu tidak masalah.\n\n4. Error yang dilempar dari `loadJson` ditangani oleh `.catch`. Kita tidak bisa menggunakan `await loadJson(…)` di sana, karena kita tidak berada di dalam function `async`.\n" }, { "path": "1-js/11-async/08-async-await/01-rewrite-async/task.md", "content": "# Menulis ulang menggunakan async/await\n\nTulis ulang salah satu contoh di bab ini menggunakan `async/await` daripada `.then/catch`:\n\n```js run\nfunction loadJson(url) {\n return fetch(url)\n .then(response => {\n if (response.status == 200) {\n return response.json();\n } else {\n throw new Error(response.status);\n }\n });\n}\n\nloadJson('no-such-user.json')\n .catch(alert); // Error: 404\n```\n" }, { "path": "1-js/11-async/08-async-await/02-rewrite-async-2/solution.md", "content": "Tidak ada trik di sini. Hanya mengganti `.catch` dengan `try...catch` di dalam `demoGithubUser` dan menambahkan `async/await` ketika dibutuhkan:\n\n```js run\nclass HttpError extends Error {\n constructor(response) {\n super(`${response.status} for ${response.url}`);\n this.name = \"HttpError\";\n this.response = response;\n }\n}\n\nasync function loadJson(url) {\n let response = await fetch(url);\n if (response.status == 200) {\n return response.json();\n } else {\n throw new HttpError(response);\n }\n}\n\n// Tanya nama pengguna sampai github mengembalikkan pengguna yang valid\nasync function demoGithubUser() {\n let user;\n while (true) {\n let name = prompt(\"Enter a name?\", \"iliakan\");\n\n try {\n user = await loadJson(`https://api.github.com/users/${name}`);\n break; // tidak ada error, keluar dari loop\n } catch (err) {\n if (err instanceof HttpError && err.response.status == 404) {\n // loop dilanjutkan setelah alert\n alert(\"No such user, please reenter.\");\n } else {\n // error yang tidak diketahui, rethrow\n throw err;\n }\n }\n }\n\n alert(`Full name: ${user.name}.`);\n return user;\n}\n\ndemoGithubUser();\n```\n" }, { "path": "1-js/11-async/08-async-await/02-rewrite-async-2/task.md", "content": "# Menulis ulang \"rethrow\" dengan async/await\n\nDi bawah anda dapat menemukan contoh \"rethrow\" dari bab . Tulis ulang menggunakan `async/await` daripada `.then/catch`.\n\nDan singkirkan rekursi yang mendukung masuk loop dalam `demoGithubUser`: dengan `async/await` itu menjadi mudah untuk dilakukan.\n\n```js run\nclass HttpError extends Error {\n constructor(response) {\n super(`${response.status} for ${response.url}`);\n this.name = \"HttpError\";\n this.response = response;\n }\n}\n\nfunction loadJson(url) {\n return fetch(url).then((response) => {\n if (response.status == 200) {\n return response.json();\n } else {\n throw new HttpError(response);\n }\n });\n}\n\n// Tanya nama pengguna sampai github mengembalikkan user yang valid\nfunction demoGithubUser() {\n let name = prompt(\"Enter a name?\", \"iliakan\");\n\n return loadJson(`https://api.github.com/users/${name}`)\n .then((user) => {\n alert(`Full name: ${user.name}.`);\n return user;\n })\n .catch((err) => {\n if (err instanceof HttpError && err.response.status == 404) {\n alert(\"No such user, please reenter.\");\n return demoGithubUser();\n } else {\n throw err;\n }\n });\n}\n\ndemoGithubUser();\n```\n" }, { "path": "1-js/11-async/08-async-await/03-async-from-regular/solution.md", "content": "Itulah yang terjadi ketika mengetahui cara kerjanya di dalam sangat membantu.\n\nHanya perlakukan pemanggilan `async` sebagai promise dan lampirkan `.then` ke dalamnya:\n\n```js run\nasync function wait() {\n await new Promise(resolve => setTimeout(resolve, 1000));\n\n return 10;\n}\n\nfunction f() {\n // menunjukkan 10 setelah 1 detik\n*!*\n wait().then(result => alert(result));\n*/!*\n}\n\nf();\n```\n" }, { "path": "1-js/11-async/08-async-await/03-async-from-regular/task.md", "content": "# Panggil async dari non-async\n\nKita punya function \"reguler\". Bagaimana memanggil `async`dari function tersebut dan menggunakan hasilnya?\n\n```js\nasync function wait() {\n await new Promise((resolve) => setTimeout(resolve, 1000));\n\n return 10;\n}\n\nfunction f() {\n // ...apa yang ditulis di sini?\n // kita harus memanggil async wait() dan tunggu sampai mendapatkan 10\n // ingat, kita tidak bisa menggunakan \"await\"\n}\n```\n\nP.S. Task ini secara teknis sangat mudah, tetapi pertanyaan ini cukup umum bagi developer yang baru mengenal async/await.\n" }, { "path": "1-js/11-async/08-async-await/article.md", "content": "# Async/await\n\nAda sintaksis spesial untuk bekerja dengan promise dengan cara yang lebih nyaman, dipanggil \"async/await\". Ini sangat mudah dipahami dan digunakan.\n\n## Fungsi Async\n\nMari mulai dengan keyword `async`. keyword ini dapat ditempatkan sebelum fungsi, seperti ini:\n\n```js\nasync function f() {\n return 1;\n}\n```\n\nKata \"async\" sebelum fungsi berarti satu hal sederhana: fungsi tersebut selalu mengembalikkan promise. Value lain dibungkus didalam promise yang resolve secara otomatis.\n\nSebagai contoh, fungsi ini mengembalikkan promise yang resolve dengan hasil `1`, mari kita uji:\n\n```js run\nasync function f() {\n return 1;\n}\n\nf().then(alert); // 1\n```\n\n...Kita secara eksplisit dapat mengembalikkan promise, itu akan sama dengan:\n\n```js run\nasync function f() {\n return Promise.resolve(1);\n}\n\nf().then(alert); // 1\n```\n\nJadi, `async` memastikan bahwa fungsi mengembalikkan promise, dan membungkus non-promise di dalamnya. Cukup mudah, bukan? Tapi tidak hanya itu. Ada keyword lain, `await`, yang hanya bekerja di dalam fungsi `async`, dan itu cukup keren.\n\n## Await\n\nSintaksis:\n\n```js\n// bekerja hanya di dalam fungsi async\nlet value = await promise;\n```\n\nKeyword `await` membuat JavaScript menunggu sampai promise tersebut selesai dan mengembalikkan hasilnya.\n\nIni contoh dengan promise yang selesai dalam 1 detik:\n\n```js run\nasync function f() {\n\n let promise = new Promise((resolve, reject) => {\n setTimeout(() => resolve(\"done!\"), 1000)\n });\n\n*!*\n let result = await promise; // tunggu sampai promise selesai (*)\n*/!*\n\n alert(result); // \"done!\"\n}\n\nf();\n```\n\nEksekusi fungsi tersebut \"dipause\" pada baris `(*)` dan dilanjutkan ketika promise selesai, dengan `result` menjadi hasilnya. Jadi kode di atas menunjukkan \"done!\" dalam satu detik.\n\nMari kita tekankan: `await` benar-benar membuat JavaScript menunggu sampai promise selesai, lalu lanjutkan dengan hasilnya. Hal tersebut tidak membebani _resource_ CPU apapun, karena mesin dapat melakukan pekerjaan lain sementara itu: eksekusi script lain, menangani event dan lain-lain.\n\nIni hanya sintaksis yang lebih elegan untuk mendapatkan hasil dari promise daripada `promise.then`, mudah untuk dibaca dan ditulis.\n\n````warn header=\"Tidak dapat menggunakan `await`di dalam fungsi biasa\" Jika kita coba untuk menggunakan`await` di dalam fungsi non-async, akan ada error sintaksis:\n\n```js run\nfunction f() {\n let promise = Promise.resolve(1);\n*!*\n let result = await promise; // Error sintaksis\n*/!*\n}\n```\n\nKita akan mendapatkan error ini jika kita tidak meletakkan `async` sebelum fungsi. Seperti yang dikatakan, `await` hanya bekerja di dalam sebuah `fungsi async`.\n\n`````\nMari kita ambil contoh `showAvatar()` dari bab dan menulisnya ulang menggunakan `async/await`:\n\n1. Kita harus mengganti call `.then` dengan `await`.\n2. Juga kita harus membuat fungsi `async` agar mereka bekerja.\n\n```js run\nasync function showAvatar() {\n\n // baca JSON kita\n let response = await fetch('/article/promise-chaining/user.json');\n let user = await response.json();\n\n // baca pengguna github\n let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);\n let githubUser = await githubResponse.json();\n\n // memunculkan avatar\n let img = document.createElement('img');\n img.src = githubUser.avatar_url;\n img.className = \"promise-avatar-example\";\n document.body.append(img);\n\n // tunnggu 3 detik\n await new Promise((resolve, reject) => setTimeout(resolve, 3000));\n\n img.remove();\n\n return githubUser;\n}\n\nshowAvatar();\n```\n\nCukup bersih dan mudah dibaca, bukan? Jauh lebih baik dari sebelumnya.\n\n````smart header=\"`await` tidak bekerja pada top-level code\"\nOrang yang baru mulai menggunakan `await` cenderung lupa faktanya bahwa kita tidak bisa menggunakan `await` pada top-level code. Sebagai contoh, ini tidak akan bekerja:\n\n```js run\n// error sintaksis pada top-level code\nlet response = await fetch('/article/promise-chaining/user.json');\nlet user = await response.json();\n```\n\nKita dapat membungkusnya kedalam fungsi async anonymous, seperti ini:\n\n```js\n(async () => {\n let response = await fetch('/article/promise-chaining/user.json');\n let user = await response.json();\n ...\n})();\n```\n\nP.S. Fitur baru: mulai dari mesin V8 versi 8.9+, tingkat atas menunggu bekerja di [modul](info: modul).\n````\n\n`````\n\n````smart header=\"`await`menerima \\\"thenables\\\"\" Seperti`promise.then`, `await`memperbolehkan kita menggunakan objek thenable (mereka dengan method`then`callable). Idenya adalah objek 3rd-party mungkin bukan promise, tetapi promise-compatible: jika objek tersebut mendukung`.then`, itu cukup digunakan dengan `await`.\n\nDisini demo class `Thenable`, `await` di bawah menerima instances dari class:\n\n```js run\nclass Thenable {\n constructor(num) {\n this.num = num;\n }\n then(resolve, reject) {\n alert(resolve);\n // resolve dengan this.num*2 setelah 1000ms\n setTimeout(() => resolve(this.num * 2), 1000); // (*)\n }\n}\n\nasync function f() {\n // tunggu selama 1 detik, kemudian result-nya menjadi 2\n let result = await new Thenable(1);\n alert(result);\n}\n\nf();\n```\n\nJika `await` mendapatkan objek non-promise dengan `.then`, objek itu memanggil method yang menyediakan fungsi asli `resolve`, `reject` sebagai argumen. Kemudian `await` menunggu sampai salah satu argumen tersebut dipanggil (pada contoh di atas hal tersebut terjadi pada baris `(*)`) dan kemudian melanjutkan dengan hasilnya.\n\n`````\n\n````smart header=\"Method class async \"\nUntuk mendeklarasikan sebuah method class async, cukup tambahkan saja `async`:\n\n```js run\nclass Waiter {\n*!*\n async wait() {\n*/!*\n return await Promise.resolve(1);\n }\n}\n\nnew Waiter()\n .wait()\n .then(alert); // 1 (this is the same as (result => alert(result)))\n```\nArtinya sama saja: itu memastikan bahwa value yang dikembalikkan adalah promise dan memungkinkan `await`.\n\n`````\n\n## Penanganan error\n\nJika sebuah promise resolve secara normal, kemudian `await promise` mengembalikkan result. Tetapi dalam kasus rejection, `await promise` melempar error, seolah olah ada pernyataan `throw` pada baris tersebut.\n\nKode ini:\n\n```js\nasync function f() {\n*!*\n await Promise.reject(new Error(\"Whoops!\"));\n*/!*\n}\n```\n\n...Sama dengan ini:\n\n```js\nasync function f() {\n*!*\n throw new Error(\"Whoops!\");\n*/!*\n}\n```\n\nDi dalam situasi yang nyata, promise mungkin butuh waktu sebelum reject. Dalam hal ini akan terjadi penundaan sebelum `await` melemparkan sebuah error.\n\nKita dapat catch error itu menggunakan `try..catch`, dengan cara yang sama seperti `throw` biasa:\n\n```js run\nasync function f() {\n\n try {\n let response = await fetch('http://no-such-url');\n } catch(err) {\n*!*\n alert(err); // TypeError: failed to fetch (gagal mengambil resource)\n*/!*\n }\n}\n\nf();\n```\n\nDalam kasus error, kontrolnya meloncat ke blok `catch`. kita juga dapat membungkus banyak baris:\n\n```js run\nasync function f() {\n try {\n let response = await fetch(\"/no-user-here\");\n let user = await response.json();\n } catch (err) {\n // catch error baik di fetch dan response.json\n alert(err);\n }\n}\n\nf();\n```\n\nJika kita tidak punya `try..catch`, maka promise yang dihasilkan oleh pemanggilan fungsi async `f()` menjadi direject. Kita dapat menambahkan `.catch` untuk menanganinya:\n\n```js run\nasync function f() {\n let response = await fetch('http://no-such-url');\n}\n\n// f() menjadi sebuah promise yang direject\n*!*\nf().catch(alert); // TypeError: failed to fetch (gagal mengambil resource) // (*)\n*/!*\n```\n\nJika kita lupa menambahkan `.catch` di sana, maka kita mendapatkan sebuah error promise yang tak tertangani (dapat dilihat di console). Kita dapat catch errors seperti itu menggunakan handler event global seperti yang dijelaskan di bab .\n\n```smart header=\"`async/await`dan`promise.then/catch`\" Ketika kita menggunakan `async/await`, kita jarang membutuhkan `.then`, karena `await`menangani waiting tersebut untuk kita. Dan kita dapat menggunakan sebuah `try..catch` biasa dibandingkan`.catch`. Itu biasanya (tidak selalu) lebih nyaman.\n\nTetapi pada *top-level code*, saat kita berada di luar fungsi `async`, kita secara sintaks tidak dapat menggunakan `await`, jadi itu sebuah latihan normal untuk menambah `.then/catch` untuk menangani hasil akhir atau jika terjadi error.\n\nSeperti baris `(*)` contoh di atas.\n\n`````\n\n````smart header=\"`async/await` bekerja baik dengan `Promise.all`\"\nKetika kita perlu menunggu banyak promise, kita dapat membungkusnya di dalam `Promise.all` dan kemudian `await`:\n\n```js\n// tunggu untuk result dalam array\nlet results = await Promise.all([\n fetch(url1),\n fetch(url2),\n ...\n]);\n`````\n\nPada kasus error, itu menyebar seperti biasa: dari promise yang gagal ke `Promise.all`, dan kemudian menjadi sebuah pengecualian yang bisa kita catch menggunakan `try..catch` di sekitar pemanggilan.\n\n```\n\n## Ringkasan\n\nKeyword `async` sebelum fungsi memiliki dua efek:\n\n1. Membuatnya selalu mengembalikkan sebuah promise.\n2. Memperbolehkan kita untuk menggunakan `await` di dalamnya.\n\nKeyword `await` sebelum promise membuat JavaScript menunggu sampai promise itu selesai, dan kemudian:\n\n1. Jika ada error, pengecualian dihasilkan, sama seperti jika `throw error` dipanggil di tempat itu.\n2. Sebaliknya, menghasilkan result.\n\nBersama mereka menyediakan kerangka kerja yang bagus untuk menulis kode asynchronous yang mudah baik membaca dan menulis.\n\nDengan `async/await` kita jarang menulis `promise.then/catch`, tetapi kita tetap tidak boleh lupa bahwa `async/await` berdasarkan promise, karena terkadang (misalnya di scope terluar) kita harus menggunakan method ini. Juga `Promise.all` adalah sesuatu yang bagus untuk menunggu banyak task secara bersamaan.\n```\n" }, { "path": "1-js/11-async/08-async-await/head.html", "content": "\n" }, { "path": "1-js/11-async/index.md", "content": "\n# Promises, async/await\n" }, { "path": "1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/_js.view/solution.js", "content": "function* pseudoRandom(seed) {\n let value = seed;\n\n while(true) {\n value = value * 16807 % 2147483647\n yield value;\n }\n\n};\n" }, { "path": "1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/_js.view/test.js", "content": "describe(\"pseudoRandom\", function() {\n\n it(\"follows the formula\", function() {\n let generator = pseudoRandom(1);\n\n assert.equal(generator.next().value, 16807);\n assert.equal(generator.next().value, 282475249);\n assert.equal(generator.next().value, 1622650073);\n });\n\n\n it(\"returns same value for the same seed\", function() {\n let generator1 = pseudoRandom(123);\n let generator2 = pseudoRandom(123);\n\n assert.deepEqual(generator1.next(), generator2.next());\n assert.deepEqual(generator1.next(), generator2.next());\n assert.deepEqual(generator1.next(), generator2.next());\n });\n\n});\n" }, { "path": "1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/solution.md", "content": "```js run demo\nfunction* pseudoRandom(seed) {\n let value = seed;\n\n while(true) {\n value = value * 16807 % 2147483647\n yield value;\n }\n\n};\n\nlet generator = pseudoRandom(1);\n\nalert(generator.next().value); // 16807\nalert(generator.next().value); // 282475249\nalert(generator.next().value); // 1622650073\n```\n\nPlease note, the same can be done with a regular function, like this:\n\n```js run\nfunction pseudoRandom(seed) {\n let value = seed;\n\n return function() {\n value = value * 16807 % 2147483647;\n return value;\n }\n}\n\nlet generator = pseudoRandom(1);\n\nalert(generator()); // 16807\nalert(generator()); // 282475249\nalert(generator()); // 1622650073\n```\n\nThat also works. But then we lose ability to iterate with `for..of` and to use generator composition, that may be useful elsewhere.\n" }, { "path": "1-js/12-generators-iterators/1-generators/01-pseudo-random-generator/task.md", "content": "\n# Pseudo-random generator\n\nThere are many areas where we need random data.\n\nOne of them is testing. We may need random data: text, numbers, etc. to test things out well.\n\nIn JavaScript, we could use `Math.random()`. But if something goes wrong, we'd like to be able to repeat the test, using exactly the same data.\n\nFor that, so called \"seeded pseudo-random generators\" are used. They take a \"seed\", the first value, and then generate the next ones using a formula so that the same seed yields the same sequence, and hence the whole flow is easily reproducible. We only need to remember the seed to repeat it.\n\nAn example of such formula, that generates somewhat uniformly distributed values:\n\n```\nnext = previous * 16807 % 2147483647\n```\n\nIf we use `1` as the seed, the values will be:\n1. `16807`\n2. `282475249`\n3. `1622650073`\n4. ...and so on...\n\nThe task is to create a generator function `pseudoRandom(seed)` that takes `seed` and creates the generator with this formula.\n\nUsage example:\n\n```js\nlet generator = pseudoRandom(1);\n\nalert(generator.next().value); // 16807\nalert(generator.next().value); // 282475249\nalert(generator.next().value); // 1622650073\n```\n" }, { "path": "1-js/12-generators-iterators/1-generators/article.md", "content": "# Generators\n\nRegular functions return only one, single value (or nothing).\n\nGenerators can return (\"yield\") multiple values, one after another, on-demand. They work great with [iterables](info:iterable), allowing to create data streams with ease.\n\n## Generator functions\n\nTo create a generator, we need a special syntax construct: `function*`, so-called \"generator function\".\n\nIt looks like this:\n\n```js\nfunction* generateSequence() {\n yield 1;\n yield 2;\n return 3;\n}\n```\n\nGenerator functions behave differently from regular ones. When such function is called, it doesn't run its code. Instead it returns a special object, called \"generator object\", to manage the execution.\n\nHere, take a look:\n\n```js run\nfunction* generateSequence() {\n yield 1;\n yield 2;\n return 3;\n}\n\n// \"generator function\" creates \"generator object\"\nlet generator = generateSequence();\n*!*\nalert(generator); // [object Generator]\n*/!*\n```\n\nThe function code execution hasn't started yet:\n\n![](generateSequence-1.svg)\n\nThe main method of a generator is `next()`. When called, it runs the execution until the nearest `yield ` statement (`value` can be omitted, then it's `undefined`). Then the function execution pauses, and the yielded `value` is returned to the outer code.\n\nThe result of `next()` is always an object with two properties:\n- `value`: the yielded value.\n- `done`: `true` if the function code has finished, otherwise `false`.\n\nFor instance, here we create the generator and get its first yielded value:\n\n```js run\nfunction* generateSequence() {\n yield 1;\n yield 2;\n return 3;\n}\n\nlet generator = generateSequence();\n\n*!*\nlet one = generator.next();\n*/!*\n\nalert(JSON.stringify(one)); // {value: 1, done: false}\n```\n\nAs of now, we got the first value only, and the function execution is on the second line:\n\n![](generateSequence-2.svg)\n\nLet's call `generator.next()` again. It resumes the code execution and returns the next `yield`:\n\n```js\nlet two = generator.next();\n\nalert(JSON.stringify(two)); // {value: 2, done: false}\n```\n\n![](generateSequence-3.svg)\n\nAnd, if we call it a third time, the execution reaches the `return` statement that finishes the function:\n\n```js\nlet three = generator.next();\n\nalert(JSON.stringify(three)); // {value: 3, *!*done: true*/!*}\n```\n\n![](generateSequence-4.svg)\n\nNow the generator is done. We should see it from `done:true` and process `value:3` as the final result.\n\nNew calls to `generator.next()` don't make sense any more. If we do them, they return the same object: `{done: true}`.\n\n```smart header=\"`function* f(…)` or `function *f(…)`?\"\nBoth syntaxes are correct.\n\nBut usually the first syntax is preferred, as the star `*` denotes that it's a generator function, it describes the kind, not the name, so it should stick with the `function` keyword.\n```\n\n## Generators are iterable\n\nAs you probably already guessed looking at the `next()` method, generators are [iterable](info:iterable).\n\nWe can loop over their values using `for..of`:\n\n```js run\nfunction* generateSequence() {\n yield 1;\n yield 2;\n return 3;\n}\n\nlet generator = generateSequence();\n\nfor(let value of generator) {\n alert(value); // 1, then 2\n}\n```\n\nLooks a lot nicer than calling `.next().value`, right?\n\n...But please note: the example above shows `1`, then `2`, and that's all. It doesn't show `3`!\n\nIt's because `for..of` iteration ignores the last `value`, when `done: true`. So, if we want all results to be shown by `for..of`, we must return them with `yield`:\n\n```js run\nfunction* generateSequence() {\n yield 1;\n yield 2;\n*!*\n yield 3;\n*/!*\n}\n\nlet generator = generateSequence();\n\nfor(let value of generator) {\n alert(value); // 1, then 2, then 3\n}\n```\n\nAs generators are iterable, we can call all related functionality, e.g. the spread syntax `...`:\n\n```js run\nfunction* generateSequence() {\n yield 1;\n yield 2;\n yield 3;\n}\n\nlet sequence = [0, ...generateSequence()];\n\nalert(sequence); // 0, 1, 2, 3\n```\n\nIn the code above, `...generateSequence()` turns the iterable generator object into an array of items (read more about the spread syntax in the chapter [](info:rest-parameters-spread#spread-syntax))\n\n## Using generators for iterables\n\nSome time ago, in the chapter [](info:iterable) we created an iterable `range` object that returns values `from..to`.\n\nHere, let's remember the code:\n\n```js run\nlet range = {\n from: 1,\n to: 5,\n\n // for..of range calls this method once in the very beginning\n [Symbol.iterator]() {\n // ...it returns the iterator object:\n // onward, for..of works only with that object, asking it for next values\n return {\n current: this.from,\n last: this.to,\n\n // next() is called on each iteration by the for..of loop\n next() {\n // it should return the value as an object {done:.., value :...}\n if (this.current <= this.last) {\n return { done: false, value: this.current++ };\n } else {\n return { done: true };\n }\n }\n };\n }\n};\n\n// iteration over range returns numbers from range.from to range.to\nalert([...range]); // 1,2,3,4,5\n```\n\nWe can use a generator function for iteration by providing it as `Symbol.iterator`.\n\nHere's the same `range`, but much more compact:\n\n```js run\nlet range = {\n from: 1,\n to: 5,\n\n *[Symbol.iterator]() { // a shorthand for [Symbol.iterator]: function*()\n for(let value = this.from; value <= this.to; value++) {\n yield value;\n }\n }\n};\n\nalert( [...range] ); // 1,2,3,4,5\n```\n\nThat works, because `range[Symbol.iterator]()` now returns a generator, and generator methods are exactly what `for..of` expects:\n- it has a `.next()` method\n- that returns values in the form `{value: ..., done: true/false}`\n\nThat's not a coincidence, of course. Generators were added to JavaScript language with iterators in mind, to implement them easily.\n\nThe variant with a generator is much more concise than the original iterable code of `range`, and keeps the same functionality.\n\n```smart header=\"Generators may generate values forever\"\nIn the examples above we generated finite sequences, but we can also make a generator that yields values forever. For instance, an unending sequence of pseudo-random numbers.\n\nThat surely would require a `break` (or `return`) in `for..of` over such generator. Otherwise, the loop would repeat forever and hang.\n```\n\n## Generator composition\n\nGenerator composition is a special feature of generators that allows to transparently \"embed\" generators in each other.\n\nFor instance, we have a function that generates a sequence of numbers:\n\n```js\nfunction* generateSequence(start, end) {\n for (let i = start; i <= end; i++) yield i;\n}\n```\n\nNow we'd like to reuse it to generate a more complex sequence:\n- first, digits `0..9` (with character codes 48..57),\n- followed by uppercase alphabet letters `A..Z` (character codes 65..90)\n- followed by lowercase alphabet letters `a..z` (character codes 97..122)\n\nWe can use this sequence e.g. to create passwords by selecting characters from it (could add syntax characters as well), but let's generate it first.\n\nIn a regular function, to combine results from multiple other functions, we call them, store the results, and then join at the end.\n\nFor generators, there's a special `yield*` syntax to \"embed\" (compose) one generator into another.\n\nThe composed generator:\n\n```js run\nfunction* generateSequence(start, end) {\n for (let i = start; i <= end; i++) yield i;\n}\n\nfunction* generatePasswordCodes() {\n\n*!*\n // 0..9\n yield* generateSequence(48, 57);\n\n // A..Z\n yield* generateSequence(65, 90);\n\n // a..z\n yield* generateSequence(97, 122);\n*/!*\n\n}\n\nlet str = '';\n\nfor(let code of generatePasswordCodes()) {\n str += String.fromCharCode(code);\n}\n\nalert(str); // 0..9A..Za..z\n```\n\nThe `yield*` directive *delegates* the execution to another generator. This term means that `yield* gen` iterates over the generator `gen` and transparently forwards its yields outside. As if the values were yielded by the outer generator.\n\nThe result is the same as if we inlined the code from nested generators:\n\n```js run\nfunction* generateSequence(start, end) {\n for (let i = start; i <= end; i++) yield i;\n}\n\nfunction* generateAlphaNum() {\n\n*!*\n // yield* generateSequence(48, 57);\n for (let i = 48; i <= 57; i++) yield i;\n\n // yield* generateSequence(65, 90);\n for (let i = 65; i <= 90; i++) yield i;\n\n // yield* generateSequence(97, 122);\n for (let i = 97; i <= 122; i++) yield i;\n*/!*\n\n}\n\nlet str = '';\n\nfor(let code of generateAlphaNum()) {\n str += String.fromCharCode(code);\n}\n\nalert(str); // 0..9A..Za..z\n```\n\nA generator composition is a natural way to insert a flow of one generator into another. It doesn't use extra memory to store intermediate results.\n\n## \"yield\" is a two-way street\n\nUntil this moment, generators were similar to iterable objects, with a special syntax to generate values. But in fact they are much more powerful and flexible.\n\nThat's because `yield` is a two-way street: it not only returns the result to the outside, but also can pass the value inside the generator.\n\nTo do so, we should call `generator.next(arg)`, with an argument. That argument becomes the result of `yield`.\n\nLet's see an example:\n\n```js run\nfunction* gen() {\n*!*\n // Pass a question to the outer code and wait for an answer\n let result = yield \"2 + 2 = ?\"; // (*)\n*/!*\n\n alert(result);\n}\n\nlet generator = gen();\n\nlet question = generator.next().value; // <-- yield returns the value\n\ngenerator.next(4); // --> pass the result into the generator \n```\n\n![](genYield2.svg)\n\n1. The first call `generator.next()` should be always made without an argument (the argument is ignored if passed). It starts the execution and returns the result of the first `yield \"2+2=?\"`. At this point the generator pauses the execution, while staying on the line `(*)`.\n2. Then, as shown at the picture above, the result of `yield` gets into the `question` variable in the calling code.\n3. On `generator.next(4)`, the generator resumes, and `4` gets in as the result: `let result = 4`.\n\nPlease note, the outer code does not have to immediately call `next(4)`. It may take time. That's not a problem: the generator will wait.\n\nFor instance:\n\n```js\n// resume the generator after some time\nsetTimeout(() => generator.next(4), 1000);\n```\n\nAs we can see, unlike regular functions, a generator and the calling code can exchange results by passing values in `next/yield`.\n\nTo make things more obvious, here's another example, with more calls:\n\n```js run\nfunction* gen() {\n let ask1 = yield \"2 + 2 = ?\";\n\n alert(ask1); // 4\n\n let ask2 = yield \"3 * 3 = ?\"\n\n alert(ask2); // 9\n}\n\nlet generator = gen();\n\nalert( generator.next().value ); // \"2 + 2 = ?\"\n\nalert( generator.next(4).value ); // \"3 * 3 = ?\"\n\nalert( generator.next(9).done ); // true\n```\n\nThe execution picture:\n\n![](genYield2-2.svg)\n\n1. The first `.next()` starts the execution... It reaches the first `yield`.\n2. The result is returned to the outer code.\n3. The second `.next(4)` passes `4` back to the generator as the result of the first `yield`, and resumes the execution.\n4. ...It reaches the second `yield`, that becomes the result of the generator call.\n5. The third `next(9)` passes `9` into the generator as the result of the second `yield` and resumes the execution that reaches the end of the function, so `done: true`.\n\nIt's like a \"ping-pong\" game. Each `next(value)` (excluding the first one) passes a value into the generator, that becomes the result of the current `yield`, and then gets back the result of the next `yield`.\n\n## generator.throw\n\nAs we observed in the examples above, the outer code may pass a value into the generator, as the result of `yield`.\n\n...But it can also initiate (throw) an error there. That's natural, as an error is a kind of result.\n\nTo pass an error into a `yield`, we should call `generator.throw(err)`. In that case, the `err` is thrown in the line with that `yield`.\n\nFor instance, here the yield of `\"2 + 2 = ?\"` leads to an error:\n\n```js run\nfunction* gen() {\n try {\n let result = yield \"2 + 2 = ?\"; // (1)\n\n alert(\"The execution does not reach here, because the exception is thrown above\");\n } catch(e) {\n alert(e); // shows the error\n }\n}\n\nlet generator = gen();\n\nlet question = generator.next().value;\n\n*!*\ngenerator.throw(new Error(\"The answer is not found in my database\")); // (2)\n*/!*\n```\n\nThe error, thrown into the generator at line `(2)` leads to an exception in line `(1)` with `yield`. In the example above, `try..catch` catches it and shows it.\n\nIf we don't catch it, then just like any exception, it \"falls out\" the generator into the calling code.\n\nThe current line of the calling code is the line with `generator.throw`, labelled as `(2)`. So we can catch it here, like this:\n\n```js run\nfunction* generate() {\n let result = yield \"2 + 2 = ?\"; // Error in this line\n}\n\nlet generator = generate();\n\nlet question = generator.next().value;\n\n*!*\ntry {\n generator.throw(new Error(\"The answer is not found in my database\"));\n} catch(e) {\n alert(e); // shows the error\n}\n*/!*\n```\n\nIf we don't catch the error there, then, as usual, it falls through to the outer calling code (if any) and, if uncaught, kills the script.\n\n## Summary\n\n- Generators are created by generator functions `function* f(…) {…}`.\n- Inside generators (only) there exists a `yield` operator.\n- The outer code and the generator may exchange results via `next/yield` calls.\n\nIn modern JavaScript, generators are rarely used. But sometimes they come in handy, because the ability of a function to exchange data with the calling code during the execution is quite unique. And, surely, they are great for making iterable objects.\n\nAlso, in the next chapter we'll learn async generators, which are used to read streams of asynchronously generated data (e.g paginated fetches over a network) in `for await ... of` loops.\n\nIn web-programming we often work with streamed data, so that's another very important use case.\n" }, { "path": "1-js/12-generators-iterators/2-async-iterators-generators/article.md", "content": "# Iterasi dan generator asinkron\n\nIterasi asinkron memungkinkan kita melakukan iterasi atas data yang datang secara asinkron, sesuai permintaan. Seperti, misalnya, ketika kita mengunduh sesuatu yang sepotong demi sepotong melalui jaringan. Dan generator asinkron membuatnya lebih nyaman.\n\nMari kita lihat contoh sederhana terlebih dahulu, untuk memahami sintaksnya, lalu meninjau kasus penggunaan kehidupan nyata.\n\n## Ingat _iterable_\n\nMari kita ingat topik tentang _iterable_.\n\nIdenya adalah kita memiliki objek, seperti `range` di sini:\n\n```js\nlet range = {\n from: 1,\n to: 5,\n};\n```\n\n...Dan kita ingin menggunakan perulangan `for..of` di atasnya, seperti `for(value of range)`, untuk mendapatkan nilai dari `1` hingga `5`.\n\nDengan kata lain, kita ingin menambahkan kemampuan iterasi ke objek.\n\nItu bisa diimplementasikan menggunakan metode khusus dengan nama `Symbol.iterator`:\n\n- Metode ini dipanggil oleh konstruksi `for..of` ketika perulangan dimulai, dan harus mengembalikan objek dengan metode `next`.\n- Untuk setiap iterasi, metode `next()` dipanggil untuk nilai berikutnya.\n- `next()` harus mengembalikan nilai dalam bentuk `{done: true/false, value:}`, di mana `done:true` berarti akhir dari perulangan.\n\nBerikut implementasi untuk `range` _iterable_:\n\n```js run\nlet range = {\n from: 1,\n to: 5,\n\n*!*\n [Symbol.iterator]() { // dipanggil sekali, di awal for..of\n*/!*\n return {\n current: this.from,\n last: this.to,\n\n*!*\n next() { // memanggil setiap iterasi, untuk mendapatkan nilai berikutnya\n*/!*\n if (this.current <= this.last) {\n return { done: false, value: this.current++ };\n } else {\n return { done: true };\n }\n }\n };\n }\n};\n\nfor(let value of range) {\n alert(value); // 1 lalu 2, lalu 3, lalu 4, lalu 5\n}\n```\n\nJika ada yang tidak jelas, silakan kunjungi bab [](info:iterable), ini memberikan semua detail tentang iterable biasa.\n\n## _Iterable_ asinkron\n\nIterasi asinkron diperlukan jika nilai muncul secara asinkron: setelah `setTimeout` atau jenis penundaan lainnya.\n\nKasus yang paling umum adalah objek perlu membuat permintaan jaringan untuk memberikan nilai berikutnya, kita akan melihat contoh kehidupan nyata nanti.\n\nUntuk membuat sebuah objek dapat diulang secara asinkron:\n\n1. Gunakan `Symbol.asyncIterator` sebagai ganti `Symbol.iterator`.\n2. Metode `next()` harus mengembalikan sebuah _promise_ (untuk dipenuhi dengan nilai berikutnya).\n - Kata kunci `async` menanganinya, kita cukup membuat `async next() `.\n3. Untuk melakukan iterasi pada objek seperti itu, kita harus menggunakan perulangan `for await (let item of iterable)`.\n - Perhatikan kata `await`.\n\nSebagai contoh awal, mari kita buat objek `range` yang dapat diulang, serupa seperti sebelumnya, tetapi sekarang akan mengembalikan nilai secara asinkron, satu per detik.\n\nYang perlu kita lakukan adalah melakukan beberapa penggantian pada kode di atas:\n\n```js run\nlet range = {\n from: 1,\n to: 5,\n\n*!*\n [Symbol.asyncIterator]() { // (1)\n*/!*\n return {\n current: this.from,\n last: this.to,\n\n*!*\n async next() { // (2)\n*/!*\n\n*!*\n // catatan: kita bisa menggunakan \"await\" di dalam async next:\n await new Promise(resolve => setTimeout(resolve, 1000)); // (3)\n*/!*\n\n if (this.current <= this.last) {\n return { done: false, value: this.current++ };\n } else {\n return { done: true };\n }\n }\n };\n }\n};\n\n(async () => {\n\n*!*\n for await (let value of range) { // (4)\n alert(value); // 1,2,3,4,5\n }\n*/!*\n\n})()\n```\n\nSeperti yang bisa kita lihat, strukturnya mirip dengan iterator biasa:\n\n1. Untuk membuat sebuah objek asinkron _iterable_, itu harus memiliki metode `Symbol.asyncIterator` `(1)`.\n2. Metode ini harus mengembalikan objek dengan metode `next()` mengembalikan _promise_ `(2)`.\n3. Metode `next()` tidak harus menjadi `async`, ini mungkin metode biasa yang mengembalikan sebuah _promise_, tetapi `async` memungkinkan kita untuk menggunakan `await`, jadi itu mudah. Disini kita hanya menunda sebentar `(3)`.\n4. Untuk iterasi, kita menggunakan `for await(let value of range)` `(4)`, yaitu menambahkan \"await\" setelah \"for\". Ini memanggil `range[Symbol.asyncIterator]()` sekali, dan kemudian `next()` untuk nilai.\n\nBerikut tabel kecil dengan perbedaannya:\n\n| | Iterator | Iterator Asinkron |\n| --------------------------------------- | ----------------- | ---------------------- |\n| Metode objek untuk menyediakan iterator | `Symbol.iterator` | `Symbol.asyncIterator` |\n| Nilai kembali `next()` adalah | nilai apapun | `Promise` |\n| Untuk mengulang, gunakan | `for..of` | `for await..of` |\n\n````warn header=\"Sintaks _spread_ `...` tidak bekerja secara asinkron\"\nFitur yang membutuhkan iterator sinkron dan reguler, tidak berfungsi dengan yang asinkron.\n\nMisalnya, sintaks _spread_ tidak akan berfungsi:\n\n```js\nalert([...range]); // Error, no Symbol.iterator (tidak ada Symbol.iterator)\n```\n\nItu wajar, karena mengharapkan untuk menemukan `Symbol.iterator`, bukan `Symbol.asyncIterator`.\n\nIni juga kasus untuk `for..of`: sintaks tanpa `await` membutuhkan` Symbol.iterator`.\n\n`````\n\n## Ingat generator\n\nSekarang mari kita ingat generator, karena memungkinkan untuk membuat kode iterasi jauh lebih pendek. Seringkali, ketika kita ingin membuat _iterable_, kita akan menggunakan generator.\n\nUntuk kesederhanaan semata, menghilangkan beberapa hal penting, mereka adalah \"fungsi yang menghasilkan nilai\". Mereka dijelaskan secara rinci di bab [] (info:generators).\n\nGenerator diberi label dengan `function*` (catat permulaannya) dan gunakan `yield` untuk menghasilkan nilai, kemudian kita dapat menggunakan `for..of` untuk mengulanginya.\n\nContoh ini menghasilkan urutan nilai dari `start` hingga `end`:\n\n```js run\nfunction* generateSequence(start, end) {\n for (let i = start; i <= end; i++) {\n yield i;\n }\n}\n\nfor(let value of generateSequence(1, 5)) {\n alert(value); // 1, lalu 2, lalu 3, lalu 4, lalu 5\n}\n```\n\nSeperti yang telah kita ketahui, untuk membuat sebuah objek menjadi _iterable_, kita harus menambahkan `Symbol.iterator` padanya.\n\n```js\nlet range = {\n from: 1,\n to: 5,\n*!*\n [Symbol.iterator]() {\n return \n }\n*/!*\n}\n```\n\nPraktik umum untuk `Symbol.iterator` adalah mengembalikan generator, ini membuat kode lebih pendek, seperti yang kamu lihat:\n\n```js run\nlet range = {\n from: 1,\n to: 5,\n\n *[Symbol.iterator]() { // singkatan untuk [Symbol.iterator]: function*()\n for(let value = this.from; value <= this.to; value++) {\n yield value;\n }\n }\n};\n\nfor(let value of range) {\n alert(value); // 1, lalu 2, lalu 3, lalu 4, lalu 5\n}\n```\n\nSilakan lihat bab [](info:generators) jika kamu ingin lebih jelasnya.\n\nDi generator biasa kita tidak bisa menggunakan `await`. Semua nilai harus datang secara sinkron, seperti yang diharuskan oleh konstruksi `for..of`.\n\nBagaimana jika kita ingin menghasilkan nilai secara asinkron? Dari permintaan jaringan, misalnya.\n\nMari beralih ke generator asinkron untuk memungkinkannya.\n\n## Generator asinkron (akhirnya)\n\nUntuk sebagian besar aplikasi praktis, ketika kita ingin membuat objek yang menghasilkan urutan nilai secara asinkron, kita dapat menggunakan generator asinkron.\n\nSintaksnya sederhana: tambahkan `function*` dengan `async`. Itu membuat generator asinkron.\n\nDan kemudian gunakan `for await (...)` untuk mengulanginya, seperti ini:\n\n```js run\n*!*async*/!* function* generateSequence(start, end) {\n\n for (let i = start; i <= end; i++) {\n\n*!*\n // Wow, can use await!\n await new Promise(resolve => setTimeout(resolve, 1000));\n*/!*\n\n yield i;\n }\n\n}\n\n(async () => {\n\n let generator = generateSequence(1, 5);\n for *!*await*/!* (let value of generator) {\n alert(value); // 1, lalu 2, lalu 3, lalu 4, lalu 5 (dengan penundaan antaranya)\n }\n\n})();\n```\n\nKarena generatornya asinkron, kita bisa menggunakan `await` di dalamnya, mengandalkan _promise_, melakukan permintaan jaringan, dan sebagainya.\n\n````smart header=\"Perbedaan didalamnya\"\nSecara teknis, jika kamu adalah pembaca tingkat lanjut yang mengingat detail tentang generator, ada perbedaan internal.\n\nUntuk generator asinkron, metode `generator.next()` adalah asinkron, yang mengembalikan _promise_.\n\nDalam generator biasa kita akan menggunakan `result = generator.next()` untuk mendapatkan nilai. Dalam generator asinkron, kita harus menambahkan `await`, seperti ini:\n\n```js\nresult = await generator.next(); // result = {value: ..., done: true/false}\n```\nItulah mengapa generator asinkron bekerja dengan `for await...of`.\n`````\n\n### Rentang _iterable_ asinkron\n\nGenerator biasa dapat digunakan sebagai `Symbol.iterator` untuk mempersingkat kode iterasi.\n\nSerupa dengan itu, generator asinkron dapat digunakan sebagai `Symbol.asyncIterator` untuk mengimplementasikan iterasi asinkron.\n\nMisalnya, kita dapat membuat objek `range` menghasilkan nilai secara asinkron, sekali per detik, dengan mengganti `Symbol.iterator` sinkron dengan `Symbol.asyncIterator` asinkron:\n\n```js run\nlet range = {\n from: 1,\n to: 5,\n\n // baris ini sama dengan [Symbol.asyncIterator]: async function*() {\n*!*\n async *[Symbol.asyncIterator]() {\n*/!*\n for(let value = this.from; value <= this.to; value++) {\n\n // buat jeda di antara value, tunggu sesuatu\n await new Promise(resolve => setTimeout(resolve, 1000));\n\n yield value;\n }\n }\n};\n\n(async () => {\n\n for *!*await*/!* (let value of range) {\n alert(value); // 1, lalu 2, lalu 3, lalu 4, lalu 5\n }\n\n})();\n```\n\nSekarang _value_ datang dengan jeda 1 detik di antara mereka.\n\n```smart\nSecara teknis, kita bisa menambahkan `Symbol.iterator` dan `Symbol.asyncIterator` ke objek, jadi keduanya secara sinkron (`for..of`) dan asinkron (`for await..of`) _iterable_.\n\nNamun dalam praktiknya, itu akan menjadi hal yang aneh untuk dilakukan.\n```\n\n## Contoh kehidupan nyata: _paginated_ data\n\nSejauh ini kita telah melihat contoh-contoh dasar, untuk mendapatkan pemahaman. Sekarang mari kita tinjau kasus penggunaan kehidupan nyata.\n\nAda banyak layanan daring yang memberikan _paginated_ data. Misalnya, saat kita membutuhkan daftar pengguna, permintaan mengembalikan jumlah yang telah ditentukan sebelumnya (misalnya 100 pengguna) - \"satu halaman\", dan memberikan URL ke halaman berikutnya.\n\nPola ini sangat umum. Ini bukan tentang pengguna, tetapi tentang apa saja.\n\nMisalnya, GitHub memungkinkan kita untuk mengambil _commits_ dengan cara yang sama, _paginated_:\n\n- Kita harus membuat permintaan untuk `fetch` dalam formulir `https://api.github.com/repos//commits`.\n- Ini merespons dengan JSON 30 _commits_, dan juga menyediakan tautan ke halaman berikutnya di tajuk `Link`.\n- Lalu kita bisa menggunakan tautan itu untuk permintaan berikutnya, untuk mendapatkan lebih banyak _commits_, dan seterusnya.\n\nUntuk kode kita, kita ingin memiliki cara yang lebih sederhana untuk mendapatkan _commits_.\n\nMari buat fungsi `fetchCommits(repo)` yang mendapatkan _commits_ untuk kita, membuat permintaan kapan pun diperlukan. Dan biarkan peduli tentang semua hal penomoran halaman. Bagi kita ini akan menjadi iterasi asinkron sederhana `for await..of`.\n\nJadi penggunaannya akan seperti ini:\n\n```js\nfor await (let commit of fetchCommits('username/repository')) {\n // proses commit\n}\n```\n\nBerikut fungsi tersebut, diimplementasikan sebagai generator asinkron:\n\n```js\nasync function* fetchCommits(repo) {\n let url = `https://api.github.com/repos/${repo}/commits`;\n\n while (url) {\n const response = await fetch(url, {\n // (1)\n headers: { 'User-Agent': 'Our script' }, // github membutuhkan header user-agent\n });\n\n const body = await response.json(); // (2) respon adalah JSON (senarai commits)\n\n // (3) URL halaman berikutnya ada di header, ekstrak itu\n let nextPage = response.headers.get('Link').match(/<(.*?)>; rel=\"next\"/);\n nextPage = nextPage?.[1];\n\n url = nextPage;\n\n for (let commit of body) {\n // (4) menghasilkan commit satu per satu, sampai halaman berakhir\n yield commit;\n }\n }\n}\n```\n\nPenjelasan lebih lanjut tentang cara kerjanya:\n\n1. Kita menggunakan metode peramban [fetch](info:fetch) untuk mengunduh _commits_.\n\n - URL awalnya adalah `https://api.github.com/repos//commits`, dan halaman berikutnya akan berada di `Link` header tanggapan.\n - Metode `fetch` memungkinkan kita untuk memberikan otorisasi dan tajuk lainnya jika diperlukan -- di sini GitHub memerlukan `User-Agent`.\n\n2. _commits_ dikembalikan dalam format JSON.\n3. Kita harus mendapatkan URL halaman berikutnya dari tajuk `Link` dari respon. Ini memiliki format khusus, jadi kita menggunakan ekspresi reguler untuk itu.\n - URL halaman berikutnya mungkin terlihat seperti ini `https://api.github.com/repositories/93253246/commits?page=2`. Ini dihasilkan oleh GitHub itu sendiri.\n4. Kemudian kita menghasilkan _commits_ yang diterima satu per satu, dan ketika mereka selesai, iterasi `while(url)` berikutnya akan terpicu, membuat satu permintaan lagi.\n\nContoh penggunaan (menunjukkan penulis _commit_ di konsol):\n\n```js run\n(async () => {\n let count = 0;\n\n for await (const commit of fetchCommits(\n 'javascript-tutorial/en.javascript.info'\n )) {\n console.log(commit.author.login);\n\n if (++count == 100) {\n // mari berhenti di 100 commits\n break;\n }\n }\n})();\n\n// Note: If you are running this in an external sandbox, you'll need to paste here the function fetchCommits described above \n```\n\nItulah yang kita inginkan.\n\nMekanisme internal permintaan _paginated_ tidak terlihat dari luar. Bagi kita, ini hanyalah generator asinkron yang mengembalikan _commits_.\n\n## Ringkasan\n\nIterator dan generator reguler berfungsi dengan baik dengan data yang tidak membutuhkan waktu untuk dibuat.\n\nSaat kita mengharapkan data datang secara asinkron, dengan penundaan, pasangan asinkronnya dapat digunakan, dan `for await..of` daripada `for..of`.\n\nPerbedaan sintaks antara asinkron dan iterator biasa:\n\n| | _Iterable_ | Asinkron _Iterable_ |\n| --------------------------------- | ----------------------------- | ------------------------------------------------------------- |\n| Metode untuk menyediakan iterator | `Symbol.iterator` | `Symbol.asyncIterator` |\n| Nilai kembali `next()` adalah | `{value:…, done: true/false}` | `Promise` yang memutuskan untuk `{value:…, done: true/false}` |\n\nPerbedaan sintaks antara generator asinkron dan biasa:\n\n| | Generator | Generator asinkron |\n| ----------------------------- | ----------------------------- | ------------------------------------------------------------- |\n| Deklarasi | `function*` | `async function*` |\n| Nilai kembali `next()` adalah | `{value:…, done: true/false}` | `Promise` yang memutuskan untuk `{value:…, done: true/false}` |\n\nDalam pengembangan web, kita sering menemui aliran data, ketika mengalir potongan demi potongan. Misalnya, mengunduh atau mengunggah file besar.\n\nKita dapat menggunakan generator asinkron untuk memproses data tersebut. Perlu juga dicatat bahwa di beberapa lingkungan, seperti di peramban, ada juga Antarmuka Pemrograman Aplikasi (APA) lain yang disebut _Streams_, yang menyediakan antarmuka khusus untuk bekerja dengan aliran semacam itu, untuk mengubah data dan meneruskannya dari satu aliran ke aliran lain (misalnya mengunduh dari satu tempat dan segera kirim ke tempat lain).\n" }, { "path": "1-js/12-generators-iterators/2-async-iterators-generators/head.html", "content": "\n" }, { "path": "1-js/12-generators-iterators/index.md", "content": "# Generator, iterasi lanjutan\n" }, { "path": "1-js/13-modules/01-modules-intro/article.md", "content": "\n# Modul, Pengenalan\n\nSaat aplikasi kita berkembang menjadi lebih besar, kita ingin membaginya menjadi banyak file, yang disebut modul. Sebuah modul bisa berisi kelas atau fungsi *library* untuk tujuan spesifik. \n\nUntuk waktu yang lama, Javascript ada tanpa sintaks modul tingkat-bahasa. Hal ini tidak menjadi masalah, karena awalnya kode skrip lebih kecil dan simpel, jadi modul tidak diperlukan.\n\nTetapi akhirnya kode skrip menjadi lebih kompleks, jadi komunitas membuat berbagai cara untuk mengatur kode menjadi modul, *library* khusus untuk memuat modul sesuai permintaan.\n\nDisebut beberapa dengan nama (Untuk alasan sejarah):\n\n- [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) -- satu dari sistem modul yang paling kuno, awalnya diimplementasikan oleh [require.js](http://requirejs.org/).\n- [CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1) -- Sistem modul yang dibuat untuk *server* Node.js.\n- [UMD](https://github.com/umdjs/umd) -- ada satu lagi sistem modul, disarankan untuk menjadi modul universal, karena cocok dengan AMD dan CommonJS.\n\nSekarang semua ini perlahan menjadi bagian dari sejarah, tetapi kita masih bisa menemukannya di kode skrip lama. \n\nSistem modul tingkat-bahasa muncul di tahun 2015, berevolusi secara bertahap sejak saat itu, dan sekarang di dukung oleh semua browser utama dan Node.js. Jadi sekarang kita akan mulai mempelajari modul Javascript modern.\n\n## Apa itu modul?\n\nModul hanya sebuah file. Satu kode skrip adalah satu modul. Sangat simpel bukan.\n\nModul bisa memuat satu sama lain dan menggunakan pengarah khusus `export` dan `import` untuk fungsi pertukaran, memanggil fungsi dari satu modul ke modul lainnya.\n\n- `export` kata kunci variabel label dan fungsi yang bisa diakses diluar modul saat ini.\n- `import` memperbolehkan impor fungsi dari modul lain.\nMisalnya, jika kita memiliki file `sayHi.js` ekspor fungsi:\n\n```js\n// 📁 sayHi.js\nexport function sayHi(user) {\n alert(`Hello, ${user}!`);\n}\n```\n\n...Lalu file lain bisa di impor dan menggunakannya:\n\n```js\n// 📁 main.js\nimport {sayHi} from './sayHi.js';\n\nalert(sayHi); // function...\nsayHi('John'); // Hello, John!\n```\n\n`import` akan diarahkan untuk memuat modul dari *path* `sayHi.js` yang relatif dengan file saat ini, dan menetapkan fungsi yang diekspor `sayHi` pada variabel yang sesuai.\n\nMari kita jalankan contoh ini di browser.\n\nKarena modul didukung oleh kata kunci dan fitur khusus, kita harus memberi tahu browser bahwa kode skrip harus diperlakukan sebagai modul, dengan menggunakan attribut `\n```\n\n### Batasan level-modul\n\nSetiap modul memiliki batasan level-tinggi sendiri. Dengan kata lain, variabel level-tinggi dan fungsi dari modul tidak bisa dilihat di kode skrip lainnya.\n\nContoh dibawah ini, dua kode skrip di impor, dan `hello.js` mencoba untuk menggunakan variabel `user` yang dideklarasikan di `user.js`, maka akan gagal:\n\n[codetabs src=\"scopes\" height=\"140\" current=\"index.html\"]\n\nModul diharapkan untuk `export` yang ingin bisa diakses dari luar `import` yang dibutuhkan.\n\nJadi kita harus impor `user.js` pada `hello.js` untuk mendapatkan fungsi yang dibutuhkan dari `user.js` daripada mengandalkan variabel global.\n\nIni variasi yang benar:\n\n[codetabs src=\"scopes-working\" height=\"140\" current=\"hello.js\"]\n\nPada browser, batasan level-tinggi independen juga ada untuk setiap `\n\n\n```\n\nJika kita benar-benar perlu untuk membuat variabel global tingkat *window*, kita akan menetapkan secara eksplisit pada `window` dan mengaksesnya sebagai `window.user`. Tetapi itu adalah pengecualian yang membutukan alasan bagus. \n\n### Kode modul dievaluasi saat pertama kali saat di impor\n\nJika modul yang sama di impor di banyak tempat yang lain, kode yang akan dijalankan hanya yang pertama saja, lalu ekspor akan di berikan pada semua modul impor.\n\nHal ini memiliki konsekuensi yang penting. Mari kita lihat dengan contoh:\n\nPertama, jika kode modul dijalankan akan memberikan efek samping, seperti menampilkan pesan, maka mengimpornya berkali-kali hanya akan memicu pesan satu kali saja: \n\n```js\n// 📁 alert.js\nalert(\"Module is evaluated!\");\n```\n\n```js\n// Import the same module from different files(impor modul yang sama dari file yang berbeda)\n\n// 📁 1.js\nimport `./alert.js`; // Module is evaluated!(modul dievaluasi)\n\n// 📁 2.js\nimport `./alert.js`; // (shows nothing)(menampilkan kosong)\n```\n\nPada praktek, modul level-tinggi banyak di gunakan untuk inisialisasi, membuat struktur data internal, dan jika kita ingin membuat sesuatu bisa digunakan kembali -- ekspor saja.\n\nSekarang, contoh yang lebih lanjut.\n\nKatakanlah, modul mengekspor sebuah objek:\n\n```js\n// 📁 admin.js\nexport let admin = {\n name: \"John\"\n};\n```\n\nJika modul ini diimpor dari banyak file, modul hanya akan dievalusi pertama kali saja, lalu objek `admin` dibuat, dan akan diteruskan kepada semua file impor lebih lanjut lainnya.\n\nSemua file impor akan mendapatkan persis satu hanya objek `admin`:\n\n```js\n// 📁 1.js\nimport {admin} from './admin.js';\nadmin.name = \"Pete\";\n\n// 📁 2.js\nimport {admin} from './admin.js';\nalert(admin.name); // Pete\n\n*!*\n// Both 1.js and 2.js imported the same object(1.js dan 2.js mengimpor objek yang sama)\n// Changes made in 1.js are visible in 2.js(perubahan di buat di 1.js terlihat di 2.js)\n*/!*\n```\n\nJadi, mari kita ulangi -- modul hanya dijalankan satu kali, ekspor akan dihasilkan, dan kemudian dibagikan diantara impor, jadi jika sesuatu merubah objek `admin`, modul lainnya bisa melihat hal tersebut. \n\nPerilaku seperti itu mengizinkan kita untuk bisa *mengkonfigurasi* modul di impor pertama. Kita bisa mengatur properti satu kali, dan file impor lebih lanjut sudah siap.\n\nMisalnya, modul `admin.js` mungkin menyediakan fungsi tertentu, tetapi ingin mendapatkan kredensial pada objek `admin` dari luar:\n\n```js\n// 📁 admin.js\nexport let config = { };\n\nexport function sayHi() {\n alert(`Ready to serve, ${config.user}!`);\n}\n```\n\nPada `init.js`, kode skrip pertama dari aplikasi, kita mengatur `admin.name`. Kemudian semua orang akan melihatnya, termasuk pemanggilan yang dibuat di dalam `admin.js` itu sendiri:\n\n```js\n// 📁 init.js\nimport {config} from './admin.js';\nconfig.user = \"Pete\";\n```\n\n...Sekarang modul `admin.js` telah dikonfigurasi.\n\nImportir lebih lanjut dapat memanggilnya, dan itu menunjukkan dengan benar pengguna saat ini:\n\n```js\n// 📁 another.js\nimport {sayHi} from './admin.js';\n\nsayHi(); // Ready to serve, *!*Pete*/!*!\n```\n\n\n### import.meta\n\nObjek `import.meta` berisi informasi tentang modul saat ini.\n\nKontennya tergantung dengan lingkungannya. Pada browser, berisi *url* dari kode skrip, atau *url* halaman web saat ini di dalam HTML:\n\n```html run height=0\n\n```\n\n### Dalam modul, \"this\" tidak didefinisikan\n\nIni semacam fitur yang kecil , tetapi untuk lebih lengkap kita harus menyebutkannya.\n\nDalam modul, level-tinggi `this` tidak didefinisikan.\n\nDibedakan dengan kode skrip tidak modul, dimana `this` adalah objek global:\n\n```html run height=0\n\n\n\n```\n\n## Fitur spesifik browser\n\nAda juga beberapa perbedaan spesifik browser skrip dengan `type=\"module\"` dibandingkan dengan yang biasa.\n\nKamu mungkin ingin melewati bagian ini jika kamu baru membacanya pertama kali, atau jika kamu tidak menggunakan Javascript pada browser.\n\n### Kode skrip modul di tangguhkan\n\nKode skrip modul selalu ditangguhkan, sama dengan efek attribut `defer` (dideskripsikan di bab [](info:script-async-defer)), untuk kode skrip diluar dan di dalam baris.\n\nDalam kata lain:\n- mengunggah kode skrip eksternal `\n\nBandingkan dengan kode skrip dibawah:\n\n\n\n\n```\n\nPerlu dicatat: Kode skrip kedua sebenarnya berjalan sebelum yang pertama! Jadi kita akan melihat `undefined` dahulu, baru kemudian `object`.\n\nItu karena modul ditangguhkan, jadi kita akan menunggu dokumen untuk diproses. Kode skrip biasa berjalan secara langsung, jadi kita akan melihat keluarannya dahulu.\n\nSaat menggunakan modul, kita harus sadar bahwa halaman HTML menampilkan apa yang di muat, dan modul Javascript berjalan setelah itu, jadi pengguna mungkin akan melihat halaman sebelum aplikasi Javascript siap. Beberapa fungsi mungkin belum bisa berjalan. Kita harus menambahkan \"indikator memuat\", atau jika tidak pastikan pengunjung tidak bingung dengan itu.\n\n### *Async* bekerja pada kode skrip satu baris\n\nUntuk kode skrip bukan modul, attribut `async` hanya bekerja pada kode skrip eksternal. Kode skrip async berjalan langsung saat sudah siap, independen dari kode skrip lain atau dokumen HTML.\n\nUntuk skrip modul, akan berjalan pada kode skrip satu baris.\n\nContoh, kode skrip satu baris dibawah ini memiliki `async`, jadi tidak perlu menunggu sesuatu.\n\nIni melakukan import (fetch `./analytics.js`) dan berjalan saat sudah siap, meski saat dokumen HTML belum siap, atau jika ada kode skrip lain yang masih tertunda.\n\nItu adalah fungsi yang bagus yang tidak bergantung pada sesuatu, seperti perhitungan, iklan, level-dokumen *event listener*.\n\n```html\n\n\n\n```\n\n### Kode skrip eksternal\n\nKode eksternal yang memiliki `type=\"module\"` memiliki perbedaan pada dua aspek:\n\n1. Kode skrip eksternal dengan 'src' yang sama hanya berjalan satu kali:\n ```html\n \n \n \n ```\n\n2. Kode skrip eksternal hanya diambil dari *origin* lain (contoh situs lain) membutuhkan *header* [CORS](mdn:Web/HTTP/CORS), akan dideskripsikan pada bab . Dengan kata lain, jika kode skrip modul diambil dari *origin* lain, maka *server remote* harus ... hader `Access-Control-Allow-Origin` mengizinkan untuk mengambil data.\n ```html\n \n \n \n ```\n\n Ini memastikan kemanan yang baik secara default.\n\n### Modul \"kosong\" tidak diizinkan\n\nPada Browser, `import` harus mendapatkan relatif atau *URL* mutlak. Modul tanpa *path* disebut dengan modul \"kosong\". Modul seperti ini tidak diizinkan pada `import`.\n\nMisalnya, `import` ini tidak valid:\n```js\nimport {sayHi} from 'sayHi'; // Error, \"bare\" module\n// the module must have a *path*, e.g. './sayHi.js' or wherever the module is\n```\n\nPada lingkungan tertentu, seperti Node.js atau alat pembungkus mengizinkan modul kosong, tanpa ada *path*, karena mereka memiliki cara tersendiri untuk menemukan modul dan pengait untuk menyesuaikannya. Tetapi browser masih belum mendukung modul kosong.\n\n### Kompabilitas, \"nomodule\"\n\nBrowser lama tidak mengerti `type=\"module\"`. Kode skrip dari tipe yang tidak diketahui akan diabaikan. Untuk itu, ada kemungkinan untuk menyediakan *fallback* menggunakan attribut `nomodule`:\n\n```html run\n\n\n\n```\n\n## Alat Pembangun\n\nDi dunia nyata, modul browser jarang digunakan dalam bentuk \"mentah\". Biasanya, kita membungkusnya bersama dengan alat khusus seperti [Webpack](https://webpack.js.org/) dan di *deploy* di *server* produksi.\n\nSalah satu keuntungan menggunakan pembungkus -- mereka memberikan lebih banyak kontrol bagaimana modul diselesaikan, mengizinkan modul kosong dan yang lainnya, seperti CSS/modul HTML.\n\nAlat pembangun melakukan langkah seperti ini:\n\n1. Modul \"main\", salah satu yang dimaksud untuk ditambahkan `\n```\n\nMeskipun demikian, modul asli juga dapat digunakan. Jadi kita tidak akan menggunakan webpack disini: kamu bisa mengkonfigurasinya nanti.\n\n## Ringkasan\n\nSecara ringkas, konsep intinya adalah:\n\n1. Modul adalah file. Untuk membuat `import/export` bekerja, browser membutuhkan `\n" }, { "path": "1-js/13-modules/01-modules-intro/say.view/say.js", "content": "export function sayHi(user) {\n return `Hello, ${user}!`;\n}\n" }, { "path": "1-js/13-modules/01-modules-intro/scopes-working.view/hello.js", "content": "import {user} from './user.js';\n\ndocument.body.innerHTML = user; // John\n" }, { "path": "1-js/13-modules/01-modules-intro/scopes-working.view/index.html", "content": "\n\n" }, { "path": "1-js/13-modules/01-modules-intro/scopes-working.view/user.js", "content": "export let user = \"John\";\n" }, { "path": "1-js/13-modules/01-modules-intro/scopes.view/hello.js", "content": "alert(user); // no such variable (each module has independent variables)\n" }, { "path": "1-js/13-modules/01-modules-intro/scopes.view/index.html", "content": "\n\n\n" }, { "path": "1-js/13-modules/01-modules-intro/scopes.view/user.js", "content": "let user = \"John\";\n" }, { "path": "1-js/13-modules/02-import-export/article.md", "content": "# Export dan Import\n\nPerintah export dan import memiliki beberapa varian sintaks.\n\nPada artikel sebelumnya kita melihat cara penggunaan yang sederhana, sekarang mari telusuri lebih banyak contoh.\n\n## Export sebelum deklarasi\n\nKita dapat memberi label deklarasi apapus untuk diekspor dengan menempatkan `export` sebelumnya, baik itu variabel, fungsi atau kelas.\n\nMisalnya, dibawah ini semua export valid:\n\n```js\n// export sebuah array\n*!*export*/!* let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n\n// export sebuah konstanta\n*!*export*/!* const MODULES_BECAME_STANDARD_YEAR = 2015;\n\n// export a class\n*!*export*/!* class User {\n constructor(name) {\n this.name = name;\n }\n}\n```\n\n````smart header=\"Tidak ada titik koma setelah perintah export kelas/fungsi\"\nMohon diperhatikan bahwa `export` sebelum sebuah kelas atau fungsi tidak menjadikannya sebagai [ekspresi fungsi](info:function-expressions). Ini masih sebuah deklarasi fungsi meskipun sudah diekspor.\n\nKebanyakan panduan gaya penulisan Javascript tidak merekomendasikan titik koma setelah deklarasi fungsi dan kelas.\n\nItu mengapa tidak perlu menambahkan titik koma di akhir `export class` dan `export function`:\n\n```js\nexport function sayHi(user) {\n alert(`Hello, ${user}!`);\n} *!* // tidak ada ; diakhir */!*\n```\n\n````\n\n## Export selain dari deklarasi\n\nKita juga dapat meletakkan perintah `export` secara terpisah.\n\nDi bawah ini kita mendeklarasikan terlebih dahulu, lalu kemudian melakukan ekspor:\n\n```js\n// 📁 say.js\nfunction sayHi(user) {\n alert(`Hello, ${user}!`);\n}\n\nfunction sayBye(user) {\n alert(`Bye, ${user}!`);\n}\n\n*!*\nexport {sayHi, sayBye}; // daftar variabel yang diekspor\n*/!*\n```\n\n...Atau, secara teknis kita dapat meletakkan `export` diatas fungsi juga.\n\n## Import \\*\n\nBiasanya, kita membuat daftar apa yang akan kita impor di dalam kurung kurawal `import {...}`, seperti ini:\n\n```js\n// 📁 main.js\n*!*\nimport {sayHi, sayBye} from './say.js';\n*/!*\n\nsayHi('John'); // Halo, John!\nsayBye('John'); // Selamat tinggal, John!\n```\n\nTetapi jika ada banyak yang harus diimpor, kita dapat melakukan impor semuanya sebagai sebuah objek menggunakan `import * as `. Sebagai contoh:\n\n```js\n// 📁 main.js\n*!*\nimport * as say from './say.js';\n*/!*\n\nsay.sayHi('John');\nsay.sayBye('John');\n```\n\nKesan pertama terkait \"impor semuanya\" adalah terdengar seperti sesuatu yang keren dan singkat ketika ditulis. Mengapa kita harus secara eksplisit membuat daftar apa yang perlu kita impor?\n\nJadi, ini adalah beberapa alasannya.\n\n1. Perkakas penggabung yang modern ([webpack](http://webpack.github.io) dan lainnya) menggabungkan semua modul sekaligus dan mengoptimalkannya untuk mempercepat proses pemuatan dan menghapus modul yang tidak digunakan.\n\n Katakanlah kita menambahkan sebuah pustaka pihak ketiga `say.js` ke dalam proyek dengan banyak fungsi:\n\n ```js\n // 📁 say.js\n export function sayHi() { ... }\n export function sayBye() { ... }\n export function becomeSilent() { ... }\n ```\n\n Sekarang jika kita hanya menggunakan salah satu dari fungsi `say.js` di proyek kita:\n\n ```js\n // 📁 main.js\n import { sayHi } from './say.js';\n ```\n\n ...Maka kemudian ketika proses pengoptimalan berjalan akan melihatnya dan menghapus fungsi lainnya (yang tidak digunakan) dari kode yang digabungkan, ini membuat kode hasil penggabungan lebih kecil. Itulah yang disebut _\"tree-shaking\"_\n\n2. Mendaftarkan secara eksplisit apa yang akan diimpor dengan nama yang lebih pendek: `sayHi()` sebagai ganti dari `say.sayHi()`.\n3. Daftar import eksplisit memberikan gambaran yang lebih baik tentang struktur kode: apa yang digunakan dan dimana. Itu membuat dukungan kode dan proses refactoring lebih mudah.\n\n## Import \"as\"\n\nKita juga dapat menggunakan `as` untuk mengimpor dengan nama yang berbeda.\n\nSebagai contoh, cobalah impor `sayHi` ke dalam variabel lokal `hi` agar lebih singkat, dan impor `sayBye` sebagai `bye`:\n\n```js\n// 📁 main.js\n*!*\nimport {sayHi as hi, sayBye as bye} from './say.js';\n*/!*\n\nhi('John'); // Halo, John!\nbye('John'); // Selamat Tinggal, John!\n```\n\n## Export \"as\"\n\nSintaks serupa berlaku juga untuk `export`\n\nMari ekspor fungsi sebagai `hi` dan `bye`:\n\n```js\n// 📁 say.js\n...\nexport {sayHi as hi, sayBye as bye};\n```\n\nSekarang `hi` dan `bye` adalah nama resmi yang diekspor dan kemudian dapat digunakan dalam impor:\n\n```js\n// 📁 main.js\nimport * as say from './say.js';\n\nsay.*!*hi*/!*('John'); // Halo, John!\nsay.*!*bye*/!*('John'); // Selamat Tinggal, John!\n```\n\n## Export default\n\nDalam praktiknya, terdapat dua jenis modul.\n\n1. Modul yang berisi pustaka, paket fungsi, seperti `say.js` diatas.\n2. Modul yang mendeklarasikan sebuah entitas, misalnya modul `user.js` hanya mengekspor `class User`.\n\nKebanyakan pendekatan kedua yang lebih disukai, jadi untuk setiap `benda` berada dalam modulnya sendiri.\n\nTentu itu membutuhkan banyak berkas, karena semuanya menginginkan modulnya sendiri. Tetapi itu tidak menjadi masalah sama sekali. Sebenarnya, navigasi kode menjadi lebih mudah jika berkas diberi nama dengan baik dan terstruktur didalam direktori.\n\nModul menyediakan perintah khusus `export default` (\"ekspor bawaan\") untuk membuat cara \"satu hal per modul\" terlihat lebih baik.\n\nTambahkan `export default` sebelum entitas yang akan diekspor:\n\n```js\n// 📁 user.js\nexport *!*default*/!* class User { // tambahkan saja \"default\"\n constructor(name) {\n this.name = name;\n }\n}\n```\n\nMungkin hanya ada satu `export default` dalam setiap berkas:\n\n...Dan kemudian impor tanpa menggunakan kurung kurawal:\n\n```js\n// 📁 main.js\nimport *!*User*/!* from './user.js'; // Bukan {User}, Hanya User\n\nnew User('John');\n```\n\nImpor tanpa kurung kurawal terlihat bagus. Kesalahan umum ketika memulai menggunakan modul adalah ketika sepenuhnya melupakan kurung kurawal. Jadi, ingat `import` memerlukan kurung kurawal untuk ekspor bernama dan tidak memerlukannya untuk ekspor bawaan.\n\n| Ekspor bernama | Ekspor bawaan |\n| ------------------------- | --------------------------------- |\n| `export class User {...}` | `export default class User {...}` |\n| `import {User} from ...` | `import User from ...` |\n\nSecara teknis, kita dapat memiliki keduanya (ekspor bawaan dan ekspor bernama) dalam satu modul yang sama, tetapi pada praktiknya, orang tidak mencampurnya. Sebuah modul memiliki antara ekspor bernama atau ekspor bawaan.\n\nKarena mungkin hanya ada paling banyak satu ekspor bawaan tiap berkas, entitas yang diekspor mungkin tidak memiliki nama.\n\nMisalnya, dibawah ini adalah ekspor bawaan yang benar-benar valid:\n\n```js\nexport default class { // tidak ada nama kelas\n constructor() { ... }\n}\n```\n\n```js\nexport default function (user) {\n // tidak ada nama fungsi\n alert(`Hello, ${user}!`);\n}\n```\n\n```js\n// ekspor nilai tunggal tanpa membuat variabel\nexport default ['Jan', 'Feb', 'Mar', 'Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n```\n\nTidak memberikan nama tidak masalah, karena hanya ada satu `export default` setiap berkas, jadi `import` tanpa tanda kurung kurawal tahu apa yang perlu diimpor.\n\nTanpa `default`, ekspor seperti itu akan memberikan sebuh _error_:\n\n```js\nexport class { // Error! (selain 'default export' memerlukan sebuah nama)\n constructor() {}\n}\n```\n\n### Penamaan \"default\"\n\nPada situasi tertentu kata kunci `default` digunakan untuk mereferensikan ekspor bawaan.\n\nMisalnya, untuk mengekspor fungsi yang terpisah dari tempat deklarasinya:\n\n```js\nfunction sayHi(user) {\n alert(`Hello, ${user}!`);\n}\n\n// sama seperti jika menambahkan \"export default\" sebelum fungsi\nexport { sayHi as default };\n```\n\nAtau pada situasi yang lainnya, katakanlah sebuah modul `user.js` mengekspor satu hal utama \"bawaan\", dan beberapa yang dinamai (jarang terjadi, tetapi bisa saja terjadi):\n\n```js\n// 📁 user.js\nexport default class User {\n constructor(name) {\n this.name = name;\n }\n}\n\nexport function sayHi(user) {\n alert(`Hello, ${user}!`);\n}\n```\n\nBerikut cara mengimpor ekspor bawaan bersama dengan yang ekspor bernama:\n\n```js\n// 📁 main.js\nimport {*!*default as User*/!*, sayHi} from './user.js';\n\nnew User('John');\n```\n\nDan terakhir, jika mengimpor semua `*` sebagai sebuah objek, maka properti `default` sama persis dengan ekspor bawaan:\n\n```js\n// 📁 main.js\nimport * as user from './user.js';\n\nlet User = user.default; // ekspor bawaan\nnew User('John');\n```\n\n### Sebuah kata yang menentang ekspor bawaan\n\nEkspor bernama eksplisit. Mereka secara persis menyebutkan apa yang mereka impor, jadi kita bisa mendapatkan informasi itu dari mereka; itu adalah sesuatu yang bagus.\n\nEkspor bernama memaksa kita untuk menggunakan nama yang tepat untuk melakukan impor:\n\n```js\nimport { User } from './user.js';\n// impor {MyUser} tidak akan berfungsi, penamaannya haruss {User}\n```\n\n...Sedangkan untuk ekspor bawaan, kita selalu dapat memilih nama ketika mengimpor:\n\n```js\nimport User from './user.js'; // berfungsi\nimport MyUser from './user.js'; // berfungsi juga\n// Dapat melakukan impor apa saja... dan itu tetap berfungsi\n```\n\nKemungkinan anggota tim menggunakan penamaan yang berbeda untuk mengimpor hal yang sama, dan itu tidak baik.\n\nBiasanya, untuk menghindari hal tersebut dan menjaga konsistensi kode terdapat aturan bahwa variabel yang di impor harus sesuai dengan nama berkas, misalnya:\n\n```js\nimport User from './user.js';\nimport LoginForm from './loginForm.js';\nimport func from '/path/to/func.js';\n...\n```\n\nNamun, beberapa tim menganggapnya sebagai kelemahan serius dari ekspor default. Jadi, mereka lebih selalu suka menggunakan ekspor bernama. Meskipun hanya satu hal yang diekspor, itu masih diekspor dengan nama, tanpa `default`.\n\nItu juga membuat ekspor ulang (lihat di bawah) sedikit lebih mudah.\n\n## Ekspor Ulang\n\n\"Ekspor ulang\" sintaks `export ... from ...` memperbolehkann untuk mengimpor sesuatu dan segera mengekspornya kembali (memungkinkan dengan nama yang berbeda) seperti ini:\n\n```js\nexport { sayHi } from './say.js'; // ekspor ulang sayHi\n\nexport { default as User } from './user.js'; // ekspor ulang bawaan\n```\n\nKenapa hal tersebut diperlukan? mari lihat praktik penggunaannya.\n\nBayangkan kita menulis sebuah \"paket\": sebuah direktori dengan banyak modul, dengan beberapa fungsi yang diekpor ke luar (perkakas seperti NPM memungkinkan kita untuk menerbitkan dan mendistribusikan paket seperti itu), dan kebanyakan modul hanyalah \"pembantu\" untuk penggunaan internal di paket modul lainnya.\n\nStruktur berkas bisa seperti ini:\n\n```\nauth/\n index.js\n user.js\n helpers.js\n tests/\n login.js\n providers/\n github.js\n facebook.js\n ...\n```\n\nKita ingin menunjukkan fungsionalitas paket melalui satu titik masuk, \"Berkas utama\" `auth/index.js` dapat digunakan seperti ini.\n\n```js\nimport { login, logout } from 'auth/index.js';\n```\n\nIdenya adalah bahwa orang luar (pengembang) yang menggunakan paket kita tidak boleh ikut campur dengan struktur internalnya, serta mencari berkas didalam direktori paket kita. Kita hanya mengekspor apa yang penting di dalam `auth/index.js` dan menyembunyikan sisaya dari pengintaian.\n\nKarena fungsionalitas yang diekspor sebenarnya tersebar diantara paket, kita dapat mengimpornya ke dalam `auth/index.js` dan kemudian kembali mengekspornya:\n\n```js\n// 📁 auth/index.js\n\n// impor login/logout dan kemudian segera mengekspornya kembali\nimport {login, logout} from './helpers.js';\nexport {login, logout};\n\n// impor default sebagai User kemudian mengekspornya\nimport User from './user.js';\nexport {User};\n...\n```\n\nSekarang pengguna dari paket kita dapat `import { login }` dari `\"auth/index.js\"`.\n\nSintaks `export ... from ...` hanyalah notasi pendek untuk proses impor-ekspor.\n\n```js\n// 📁 auth/index.js\n// impor login/logout dan kemudian segera mengekspornya kembali\nexport {login, logout} from './helpers.js';\n\n// impor default sebagai User kemudian mengekspornya\nexport {default as User} from './user.js';\n...\n```\n\n### Ekspor ulang ekspor bawaan\n\nEkspor bawaan memerlukan penanganan terpisah ketika melakukan ekspor ulang.\n\nMisalnya kita memiliki `user.js` dan kita ingin melakukan ekspor ulang kelas `User` tersebut:\n\n```js\n// 📁 user.js\nexport default class User {\n // ...\n}\n```\n\n1. `export User form './user.js'` tidak dapat digunakan. Apa yang salah?... Ini adalah kesalahan sintaks!\n\n Untuk melakukan ekspor ulang ekspor bawaan, kita harus menuliskan `export { default as User }` seperti contoh diatas.\n\n2. `export * from './user.js'` mengekspor ulang hanya ekspor bernama, tetapi mengabaikan ekspor bawaan.\n\n Jika kita ingin melakukan ekspor ulang keduanya (ekspor bernama dan ekspor bawaan), maka diperlukan dua pernyataan seperti berikut:\n\n ```js\n export * from './user.js'; // ekspor ulang ekspor bernama\n export { default } from './user.js'; // ekspor ulang ekspor bawaan\n ```\n\nKeanehan dari proses mengekspor ulang ekspor bawaan adalah salah satu alasan mengapa beberapa pengembang tidak menyukainya.\n\n## Ringkasan\n\nBerikut merupakan semua jenis `export` yang kita bahas di artikel ini dan sebelumnya.\n\nKamu dapat mengeceknya secara mandiri dengan membacanya dan mengingat apa maksudnya:\n\nEkspor:\n\n- Sebelum deklarasi dari sebuah kelas/fungsi/..:\n - `export [default] class/function/variable ...`\n- Ekspor mandiri:\n - `export { x [as y], ... } from \"module\"`\n- Ekspor ulang:\n - `export {x [as y], ...} from \"module\"`\n - `export * from \"module\"` (tidak mengekspor ulang bawaan).\n - `export {default [as y]} from \"module\"` (ekspor ulang bawaan).\n\nImpor:\n\n- Ekspor bernama dari modul:\n - `import {x [as y], ...} from \"module\"`\n- Ekspor bawaan:\n - `import x from \"module\"`\n - `import {default as x} from \"module\"`\n- Semuanya:\n - `import * as obj from \"module\"`\n- Impor modul (ini menjalankan kode), tetapi tidak disimpan kedalam variabel:\n - `import \"module\"`\n\nKita dapat meletakkan pernyataan `import/export` di bagian atas atau bawah dari skrip, itu tidak masalah.\n\nJadi secara teknis kode ini tidak dipermasalahkan:\n\n```js\nsayHi();\n\n// ...\n\nimport { sayHi } from './say.js'; // impor dibagian bawah berkas\n```\n\nDalam praktiknya, impor biasanya dilakukan pada awal sebuah berkas, tetapi itu hanya untuk memberikan kenyamanan lebih.\n\n**Harap diperhatikan bahwa pernyataan import/export tidak dapat digunakan jika didalam `{...}`.**\n\nSebuah impor bersyarat seperti ini tidak akan dapat berfungsi:\n\n```js\nif (something) {\n import { sayHi } from './say.js'; // Error: import must be at top level (impor harus diluar pernyataan if dann { ... } sehingga kode tersebut tidak akan bekerja)\n}\n```\n\n...Tetapi bagaimana jika kita benar-benar perlu menhimpor sesuatu dengan syarat tertentu? atau pada waktu yang tepat? Seperti memuat modul berdasarkan permintaan, pada saat itu benar-benar dibutuhkan?\n\nOleh karena itu, kita akan mempelajari impor dinamis di artikel selanjutnya.\n" }, { "path": "1-js/13-modules/03-modules-dynamic-imports/article.md", "content": "# Impor dinamis\n\nPernyataan ekspor dan impor yang kita bahas di bab sebelumnya disebut \"statis\". Sintaksnya sangat sederhana dan bersifat _strict_.\n\nPertama, kita tidak bisa membuat parameter `import` secara dinamis.\n\nJalur modul harus berupa _string_, tidak boleh berupa _function_ panggilan. Berikut contoh yang tidak akan berhasil:\n\n```js\nimport ... from *!*getModuleName()*/!*; // Error, hanya \"string\" yang diperbolehkan\n```\n\nKedua, kita tidak bisa meng-impor secara kondisional atau pada saat _run-time_:\n\n```js\nif(...) {\n import ...; // Error, tidak diperbolehkan!\n}\n\n{\n import ...; // Error, kita tidak bisa meng-impor di dalam block-scope\n}\n```\n\nItu karena `import`/`export` bertujuan untuk menyediakan tulang punggung untuk struktur kode. Itu hal yang baik, karena struktur kode dapat dianalisa, modul dapat dikumpulkan dan digabungkan menjadi satu _file_ dengan alat khusus, ekspor yang tidak digunakan dapat dihapus (\"tree-shaken\"). Itu memungkinkan hanya karena struktur dari impor/ekspor sederhana dan tetap.\n\nTetapi bagaimana kita bisa meng-impor modul secara dinamis, sesuai permintaan?\n\n## Ekspresi `import()`\n\nEkspresi `import(modul)` memuat modul dan mengembalikan sebuah _promise_ yang diselesaikan menjadi objek modul yang berisi semua ekspornya. Itu dapat dipanggil dari mana saja dalam kode.\n\nKita bisa menggunakannya secara dinamis di sembarang tempat kode, misalnya:\n\n```js\nlet modulePath = prompt(\"Modul mana yang ingin dimuat?\");\n\nimport(modulePath)\n .then(obj => )\n .catch(err => )\n```\n\nAtau, kita bisa menggunakan `let module = await import(modulePath)` jika di dalam _async function_.\n\nMisalnya, jika kita memiliki modul berikut `say.js`:\n\n```js\n// 📁 say.js\nexport function hi() {\n alert(`Halo`);\n}\n\nexport function bye() {\n alert(`Selamat tinggal`);\n}\n```\n\n...Kemudian impor dinamisnya bisa seperti ini:\n\n```js\nlet { hi, bye } = await import(\"./say.js\");\n\nhi();\nbye();\n```\n\nAtau, kalau `say.js` mempunyai ekspor _default_:\n\n```js\n// 📁 say.js\nexport default function () {\n alert(\"Modul dimuat (ekspor default)!\");\n}\n```\n\n...Kemudian, untuk mengaksesnya, kita bisa menggunakan properti `default` dari objek modul:\n\n```js\nlet obj = await import(\"./say.js\");\nlet say = obj.default;\n// jika dalam satu baris: let {default: say} = await import('./say.js');\n\nsay();\n```\n\nBerikut contoh lengkapnya:\n\n[codetabs src=\"say\" current=\"index.html\"]\n\n```smart\nImpor dinamis berfungsi dalam skrip biasa, mereka tidak memerlukan `script type=\"module\"`.\n```\n\n```smart\nMeskipun `import()` terlihat seperti pemanggilan sebuah function, akan tetapi itu adalah sintaks khusus yang kebetulan menggunakan tanda kurung (mirip dengan `super()`).\n\nJadi, kita tidak bisa menyalin `import` ke dalam variabel atau menggunakan `call/apply` dengannya. `import` bukan sebuah function.\n```\n" }, { "path": "1-js/13-modules/03-modules-dynamic-imports/say.view/index.html", "content": "\n\n\n" }, { "path": "1-js/13-modules/03-modules-dynamic-imports/say.view/say.js", "content": "export function hi() {\n alert(`Halo`);\n}\n\nexport function bye() {\n alert(`Selamat tinggal`);\n}\n\nexport default function () {\n alert(\"Modul dimuat (ekspor default)!\");\n}\n" }, { "path": "1-js/13-modules/index.md", "content": "\n# Modules\n" }, { "path": "1-js/99-js-misc/01-proxy/01-error-nonexisting/solution.md", "content": "\n```js run\nlet user = {\n name: \"John\"\n};\n\nfunction wrap(target) {\n return new Proxy(target, {\n get(target, prop, receiver) {\n if (prop in target) {\n return Reflect.get(target, prop, receiver);\n } else {\n throw new ReferenceError(`Property doesn't exist: \"${prop}\"`)\n }\n }\n });\n}\n\nuser = wrap(user);\n\nalert(user.name); // John\nalert(user.age); // ReferenceError: Property doesn't exist: \"age\"\n```\n" }, { "path": "1-js/99-js-misc/01-proxy/01-error-nonexisting/task.md", "content": "# Error on reading non-existent property\n\nUsually, an attempt to read a non-existent property returns `undefined`.\n\nCreate a proxy that throws an error for an attempt to read of a non-existent property instead.\n\nThat can help to detect programming mistakes early.\n\nWrite a function `wrap(target)` that takes an object `target` and return a proxy that adds this functionality aspect.\n\nThat's how it should work:\n\n```js\nlet user = {\n name: \"John\"\n};\n\nfunction wrap(target) {\n return new Proxy(target, {\n*!*\n /* your code */\n*/!*\n });\n}\n\nuser = wrap(user);\n\nalert(user.name); // John\n*!*\nalert(user.age); // ReferenceError: Property doesn't exist: \"age\"\n*/!*\n```\n" }, { "path": "1-js/99-js-misc/01-proxy/02-array-negative/solution.md", "content": "\n```js run\nlet array = [1, 2, 3];\n\narray = new Proxy(array, {\n get(target, prop, receiver) {\n if (prop < 0) {\n // even if we access it like arr[1]\n // prop is a string, so need to convert it to number\n prop = +prop + target.length;\n }\n return Reflect.get(target, prop, receiver);\n }\n});\n\n\nalert(array[-1]); // 3\nalert(array[-2]); // 2\n```\n" }, { "path": "1-js/99-js-misc/01-proxy/02-array-negative/task.md", "content": "\n# Accessing array[-1]\n\nIn some programming languages, we can access array elements using negative indexes, counted from the end.\n\nLike this:\n\n```js\nlet array = [1, 2, 3];\n\narray[-1]; // 3, the last element\narray[-2]; // 2, one step from the end\narray[-3]; // 1, two steps from the end\n```\n\nIn other words, `array[-N]` is the same as `array[array.length - N]`.\n\nCreate a proxy to implement that behavior.\n\nThat's how it should work:\n\n```js\nlet array = [1, 2, 3];\n\narray = new Proxy(array, {\n /* your code */\n});\n\nalert( array[-1] ); // 3\nalert( array[-2] ); // 2\n\n// Other array functionality should be kept \"as is\"\n```\n" }, { "path": "1-js/99-js-misc/01-proxy/03-observable/solution.md", "content": "The solution consists of two parts:\n\n1. Whenever `.observe(handler)` is called, we need to remember the handler somewhere, to be able to call it later. We can store handlers right in the object, using our symbol as the property key.\n2. We need a proxy with `set` trap to call handlers in case of any change.\n\n```js run\nlet handlers = Symbol('handlers');\n\nfunction makeObservable(target) {\n // 1. Initialize handlers store\n target[handlers] = [];\n\n // Store the handler function in array for future calls\n target.observe = function(handler) {\n this[handlers].push(handler);\n };\n\n // 2. Create a proxy to handle changes\n return new Proxy(target, {\n set(target, property, value, receiver) {\n let success = Reflect.set(...arguments); // forward the operation to object\n if (success) { // if there were no error while setting the property\n // call all handlers\n target[handlers].forEach(handler => handler(property, value));\n }\n return success;\n }\n });\n}\n\nlet user = {};\n\nuser = makeObservable(user);\n\nuser.observe((key, value) => {\n alert(`SET ${key}=${value}`);\n});\n\nuser.name = \"John\";\n```\n" }, { "path": "1-js/99-js-misc/01-proxy/03-observable/task.md", "content": "\n# Observable\n\nCreate a function `makeObservable(target)` that \"makes the object observable\" by returning a proxy.\n\nHere's how it should work:\n\n```js run\nfunction makeObservable(target) {\n /* your code */\n}\n\nlet user = {};\nuser = makeObservable(user);\n\nuser.observe((key, value) => {\n alert(`SET ${key}=${value}`);\n});\n\nuser.name = \"John\"; // alerts: SET name=John\n```\n\nIn other words, an object returned by `makeObservable` is just like the original one, but also has the method `observe(handler)` that sets `handler` function to be called on any property change.\n\nWhenever a property changes, `handler(key, value)` is called with the name and value of the property.\n\nP.S. In this task, please only take care about writing to a property. Other operations can be implemented in a similar way.\n" }, { "path": "1-js/99-js-misc/01-proxy/article.md", "content": "# Proxy and Reflect\n\nA `Proxy` object wraps another object and intercepts operations, like reading/writing properties and others, optionally handling them on its own, or transparently allowing the object to handle them.\n\nProxies are used in many libraries and some browser frameworks. We'll see many practical applications in this article.\n\n## Proxy\n\nThe syntax:\n\n```js\nlet proxy = new Proxy(target, handler)\n```\n\n- `target` -- is an object to wrap, can be anything, including functions.\n- `handler` -- proxy configuration: an object with \"traps\", methods that intercept operations. - e.g. `get` trap for reading a property of `target`, `set` trap for writing a property into `target`, and so on.\n\nFor operations on `proxy`, if there's a corresponding trap in `handler`, then it runs, and the proxy has a chance to handle it, otherwise the operation is performed on `target`.\n\nAs a starting example, let's create a proxy without any traps:\n\n```js run\nlet target = {};\nlet proxy = new Proxy(target, {}); // empty handler\n\nproxy.test = 5; // writing to proxy (1)\nalert(target.test); // 5, the property appeared in target!\n\nalert(proxy.test); // 5, we can read it from proxy too (2)\n\nfor(let key in proxy) alert(key); // test, iteration works (3)\n```\n\nAs there are no traps, all operations on `proxy` are forwarded to `target`.\n\n1. A writing operation `proxy.test=` sets the value on `target`.\n2. A reading operation `proxy.test` returns the value from `target`.\n3. Iteration over `proxy` returns values from `target`.\n\nAs we can see, without any traps, `proxy` is a transparent wrapper around `target`.\n\n![](proxy.svg)\n\n`Proxy` is a special \"exotic object\". It doesn't have own properties. With an empty `handler` it transparently forwards operations to `target`.\n\nTo activate more capabilities, let's add traps.\n\nWhat can we intercept with them?\n\nFor most operations on objects, there's a so-called \"internal method\" in the JavaScript specification that describes how it works at the lowest level. For instance `[[Get]]`, the internal method to read a property, `[[Set]]`, the internal method to write a property, and so on. These methods are only used in the specification, we can't call them directly by name.\n\nProxy traps intercept invocations of these methods. They are listed in the [Proxy specification](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots) and in the table below.\n\nFor every internal method, there's a trap in this table: the name of the method that we can add to the `handler` parameter of `new Proxy` to intercept the operation:\n\n| Internal Method | Handler Method | Triggers when... |\n|-----------------|----------------|-------------|\n| `[[Get]]` | `get` | reading a property |\n| `[[Set]]` | `set` | writing to a property |\n| `[[HasProperty]]` | `has` | `in` operator |\n| `[[Delete]]` | `deleteProperty` | `delete` operator |\n| `[[Call]]` | `apply` | function call |\n| `[[Construct]]` | `construct` | `new` operator |\n| `[[GetPrototypeOf]]` | `getPrototypeOf` | [Object.getPrototypeOf](mdn:/JavaScript/Reference/Global_Objects/Object/getPrototypeOf) |\n| `[[SetPrototypeOf]]` | `setPrototypeOf` | [Object.setPrototypeOf](mdn:/JavaScript/Reference/Global_Objects/Object/setPrototypeOf) |\n| `[[IsExtensible]]` | `isExtensible` | [Object.isExtensible](mdn:/JavaScript/Reference/Global_Objects/Object/isExtensible) |\n| `[[PreventExtensions]]` | `preventExtensions` | [Object.preventExtensions](mdn:/JavaScript/Reference/Global_Objects/Object/preventExtensions) |\n| `[[DefineOwnProperty]]` | `defineProperty` | [Object.defineProperty](mdn:/JavaScript/Reference/Global_Objects/Object/defineProperty), [Object.defineProperties](mdn:/JavaScript/Reference/Global_Objects/Object/defineProperties) |\n| `[[GetOwnProperty]]` | `getOwnPropertyDescriptor` | [Object.getOwnPropertyDescriptor](mdn:/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor), `for..in`, `Object.keys/values/entries` |\n| `[[OwnPropertyKeys]]` | `ownKeys` | [Object.getOwnPropertyNames](mdn:/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames), [Object.getOwnPropertySymbols](mdn:/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols), `for..in`, `Object.keys/values/entries` |\n\n```warn header=\"Invariants\"\nJavaScript enforces some invariants -- conditions that must be fulfilled by internal methods and traps.\n\nMost of them are for return values:\n- `[[Set]]` must return `true` if the value was written successfully, otherwise `false`.\n- `[[Delete]]` must return `true` if the value was deleted successfully, otherwise `false`.\n- ...and so on, we'll see more in examples below.\n\nThere are some other invariants, like:\n- `[[GetPrototypeOf]]`, applied to the proxy object must return the same value as `[[GetPrototypeOf]]` applied to the proxy object's target object. In other words, reading prototype of a proxy must always return the prototype of the target object.\n\nTraps can intercept these operations, but they must follow these rules.\n\nInvariants ensure correct and consistent behavior of language features. The full invariants list is in [the specification](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots). You probably won't violate them if you're not doing something weird.\n```\n\nLet's see how that works in practical examples.\n\n## Default value with \"get\" trap\n\nThe most common traps are for reading/writing properties.\n\nTo intercept reading, the `handler` should have a method `get(target, property, receiver)`.\n\nIt triggers when a property is read, with following arguments:\n\n- `target` -- is the target object, the one passed as the first argument to `new Proxy`,\n- `property` -- property name,\n- `receiver` -- if the target property is a getter, then `receiver` is the object that's going to be used as `this` in its call. Usually that's the `proxy` object itself (or an object that inherits from it, if we inherit from proxy). Right now we don't need this argument, so it will be explained in more detail later.\n\nLet's use `get` to implement default values for an object.\n\nWe'll make a numeric array that returns `0` for nonexistent values.\n\nUsually when one tries to get a non-existing array item, they get `undefined`, but we'll wrap a regular array into the proxy that traps reading and returns `0` if there's no such property:\n\n```js run\nlet numbers = [0, 1, 2];\n\nnumbers = new Proxy(numbers, {\n get(target, prop) {\n if (prop in target) {\n return target[prop];\n } else {\n return 0; // default value\n }\n }\n});\n\n*!*\nalert( numbers[1] ); // 1\nalert( numbers[123] ); // 0 (no such item)\n*/!*\n```\n\nAs we can see, it's quite easy to do with a `get` trap.\n\nWe can use `Proxy` to implement any logic for \"default\" values.\n\nImagine we have a dictionary, with phrases and their translations:\n\n```js run\nlet dictionary = {\n 'Hello': 'Hola',\n 'Bye': 'Adiós'\n};\n\nalert( dictionary['Hello'] ); // Hola\nalert( dictionary['Welcome'] ); // undefined\n```\n\nRight now, if there's no phrase, reading from `dictionary` returns `undefined`. But in practice, leaving a phrase untranslated is usually better than `undefined`. So let's make it return an untranslated phrase in that case instead of `undefined`.\n\nTo achieve that, we'll wrap `dictionary` in a proxy that intercepts reading operations:\n\n```js run\nlet dictionary = {\n 'Hello': 'Hola',\n 'Bye': 'Adiós'\n};\n\ndictionary = new Proxy(dictionary, {\n*!*\n get(target, phrase) { // intercept reading a property from dictionary\n*/!*\n if (phrase in target) { // if we have it in the dictionary\n return target[phrase]; // return the translation\n } else {\n // otherwise, return the non-translated phrase\n return phrase;\n }\n }\n});\n\n// Look up arbitrary phrases in the dictionary!\n// At worst, they're not translated.\nalert( dictionary['Hello'] ); // Hola\n*!*\nalert( dictionary['Welcome to Proxy']); // Welcome to Proxy (no translation)\n*/!*\n```\n\n````smart\nPlease note how the proxy overwrites the variable:\n\n```js\ndictionary = new Proxy(dictionary, ...);\n```\n\nThe proxy should totally replace the target object everywhere. No one should ever reference the target object after it got proxied. Otherwise it's easy to mess up.\n````\n\n## Validation with \"set\" trap\n\nLet's say we want an array exclusively for numbers. If a value of another type is added, there should be an error.\n\nThe `set` trap triggers when a property is written.\n\n`set(target, property, value, receiver)`:\n\n- `target` -- is the target object, the one passed as the first argument to `new Proxy`,\n- `property` -- property name,\n- `value` -- property value,\n- `receiver` -- similar to `get` trap, matters only for setter properties.\n\nThe `set` trap should return `true` if setting is successful, and `false` otherwise (triggers `TypeError`).\n\nLet's use it to validate new values:\n\n```js run\nlet numbers = [];\n\nnumbers = new Proxy(numbers, { // (*)\n*!*\n set(target, prop, val) { // to intercept property writing\n*/!*\n if (typeof val == 'number') {\n target[prop] = val;\n return true;\n } else {\n return false;\n }\n }\n});\n\nnumbers.push(1); // added successfully\nnumbers.push(2); // added successfully\nalert(\"Length is: \" + numbers.length); // 2\n\n*!*\nnumbers.push(\"test\"); // TypeError ('set' on proxy returned false)\n*/!*\n\nalert(\"This line is never reached (error in the line above)\");\n```\n\nPlease note: the built-in functionality of arrays is still working! Values are added by `push`. The `length` property auto-increases when values are added. Our proxy doesn't break anything.\n\nWe don't have to override value-adding array methods like `push` and `unshift`, and so on, to add checks in there, because internally they use the `[[Set]]` operation that's intercepted by the proxy.\n\nSo the code is clean and concise.\n\n```warn header=\"Don't forget to return `true`\"\nAs said above, there are invariants to be held.\n\nFor `set`, it must return `true` for a successful write.\n\nIf we forget to do it or return any falsy value, the operation triggers `TypeError`.\n```\n\n## Iteration with \"ownKeys\" and \"getOwnPropertyDescriptor\"\n\n`Object.keys`, `for..in` loop and most other methods that iterate over object properties use `[[OwnPropertyKeys]]` internal method (intercepted by `ownKeys` trap) to get a list of properties.\n\nSuch methods differ in details:\n- `Object.getOwnPropertyNames(obj)` returns non-symbol keys.\n- `Object.getOwnPropertySymbols(obj)` returns symbol keys.\n- `Object.keys/values()` returns non-symbol keys/values with `enumerable` flag (property flags were explained in the article ).\n- `for..in` loops over non-symbol keys with `enumerable` flag, and also prototype keys.\n\n...But all of them start with that list.\n\nIn the example below we use `ownKeys` trap to make `for..in` loop over `user`, and also `Object.keys` and `Object.values`, to skip properties starting with an underscore `_`:\n\n```js run\nlet user = {\n name: \"John\",\n age: 30,\n _password: \"***\"\n};\n\nuser = new Proxy(user, {\n*!*\n ownKeys(target) {\n*/!*\n return Object.keys(target).filter(key => !key.startsWith('_'));\n }\n});\n\n// \"ownKeys\" filters out _password\nfor(let key in user) alert(key); // name, then: age\n\n// same effect on these methods:\nalert( Object.keys(user) ); // name,age\nalert( Object.values(user) ); // John,30\n```\n\nSo far, it works.\n\nAlthough, if we return a key that doesn't exist in the object, `Object.keys` won't list it:\n\n```js run\nlet user = { };\n\nuser = new Proxy(user, {\n*!*\n ownKeys(target) {\n*/!*\n return ['a', 'b', 'c'];\n }\n});\n\nalert( Object.keys(user) ); // \n```\n\nWhy? The reason is simple: `Object.keys` returns only properties with the `enumerable` flag. To check for it, it calls the internal method `[[GetOwnProperty]]` for every property to get [its descriptor](info:property-descriptors). And here, as there's no property, its descriptor is empty, no `enumerable` flag, so it's skipped.\n\nFor `Object.keys` to return a property, we need it to either exist in the object, with the `enumerable` flag, or we can intercept calls to `[[GetOwnProperty]]` (the trap `getOwnPropertyDescriptor` does it), and return a descriptor with `enumerable: true`.\n\nHere's an example of that:\n\n```js run\nlet user = { };\n\nuser = new Proxy(user, {\n ownKeys(target) { // called once to get a list of properties\n return ['a', 'b', 'c'];\n },\n\n getOwnPropertyDescriptor(target, prop) { // called for every property\n return {\n enumerable: true,\n configurable: true\n /* ...other flags, probable \"value:...\" */\n };\n }\n\n});\n\nalert( Object.keys(user) ); // a, b, c\n```\n\nLet's note once again: we only need to intercept `[[GetOwnProperty]]` if the property is absent in the object.\n\n## Protected properties with \"deleteProperty\" and other traps\n\nThere's a widespread convention that properties and methods prefixed by an underscore `_` are internal. They shouldn't be accessed from outside the object.\n\nTechnically that's possible though:\n\n```js run\nlet user = {\n name: \"John\",\n _password: \"secret\"\n};\n\nalert(user._password); // secret\n```\n\nLet's use proxies to prevent any access to properties starting with `_`.\n\nWe'll need the traps:\n- `get` to throw an error when reading such property,\n- `set` to throw an error when writing,\n- `deleteProperty` to throw an error when deleting,\n- `ownKeys` to exclude properties starting with `_` from `for..in` and methods like `Object.keys`.\n\nHere's the code:\n\n```js run\nlet user = {\n name: \"John\",\n _password: \"***\"\n};\n\nuser = new Proxy(user, {\n*!*\n get(target, prop) {\n*/!*\n if (prop.startsWith('_')) {\n throw new Error(\"Access denied\");\n }\n let value = target[prop];\n return (typeof value === 'function') ? value.bind(target) : value; // (*)\n },\n*!*\n set(target, prop, val) { // to intercept property writing\n*/!*\n if (prop.startsWith('_')) {\n throw new Error(\"Access denied\");\n } else {\n target[prop] = val;\n return true;\n }\n },\n*!*\n deleteProperty(target, prop) { // to intercept property deletion\n*/!*\n if (prop.startsWith('_')) {\n throw new Error(\"Access denied\");\n } else {\n delete target[prop];\n return true;\n }\n },\n*!*\n ownKeys(target) { // to intercept property list\n*/!*\n return Object.keys(target).filter(key => !key.startsWith('_'));\n }\n});\n\n// \"get\" doesn't allow to read _password\ntry {\n alert(user._password); // Error: Access denied\n} catch(e) { alert(e.message); }\n\n// \"set\" doesn't allow to write _password\ntry {\n user._password = \"test\"; // Error: Access denied\n} catch(e) { alert(e.message); }\n\n// \"deleteProperty\" doesn't allow to delete _password\ntry {\n delete user._password; // Error: Access denied\n} catch(e) { alert(e.message); }\n\n// \"ownKeys\" filters out _password\nfor(let key in user) alert(key); // name\n```\n\nPlease note the important detail in the `get` trap, in the line `(*)`:\n\n```js\nget(target, prop) {\n // ...\n let value = target[prop];\n*!*\n return (typeof value === 'function') ? value.bind(target) : value; // (*)\n*/!*\n}\n```\n\nWhy do we need a function to call `value.bind(target)`?\n\nThe reason is that object methods, such as `user.checkPassword()`, must be able to access `_password`:\n\n```js\nuser = {\n // ...\n checkPassword(value) {\n // object method must be able to read _password\n return value === this._password;\n }\n}\n```\n\n\nA call to `user.checkPassword()` gets proxied `user` as `this` (the object before dot becomes `this`), so when it tries to access `this._password`, the `get` trap activates (it triggers on any property read) and throws an error.\n\nSo we bind the context of object methods to the original object, `target`, in the line `(*)`. Then their future calls will use `target` as `this`, without any traps.\n\nThat solution usually works, but isn't ideal, as a method may pass the unproxied object somewhere else, and then we'll get messed up: where's the original object, and where's the proxied one?\n\nBesides, an object may be proxied multiple times (multiple proxies may add different \"tweaks\" to the object), and if we pass an unwrapped object to a method, there may be unexpected consequences.\n\nSo, such a proxy shouldn't be used everywhere.\n\n```smart header=\"Private properties of a class\"\nModern JavaScript engines natively support private properties in classes, prefixed with `#`. They are described in the article . No proxies required.\n\nSuch properties have their own issues though. In particular, they are not inherited.\n```\n\n## \"In range\" with \"has\" trap\n\nLet's see more examples.\n\nWe have a range object:\n\n```js\nlet range = {\n start: 1,\n end: 10\n};\n```\n\nWe'd like to use the `in` operator to check that a number is in `range`.\n\nThe `has` trap intercepts `in` calls.\n\n`has(target, property)`\n\n- `target` -- is the target object, passed as the first argument to `new Proxy`,\n- `property` -- property name\n\nHere's the demo:\n\n```js run\nlet range = {\n start: 1,\n end: 10\n};\n\nrange = new Proxy(range, {\n*!*\n has(target, prop) {\n*/!*\n return prop >= target.start && prop <= target.end;\n }\n});\n\n*!*\nalert(5 in range); // true\nalert(50 in range); // false\n*/!*\n```\n\nNice syntactic sugar, isn't it? And very simple to implement.\n\n## Wrapping functions: \"apply\" [#proxy-apply]\n\nWe can wrap a proxy around a function as well.\n\nThe `apply(target, thisArg, args)` trap handles calling a proxy as function:\n\n- `target` is the target object (function is an object in JavaScript),\n- `thisArg` is the value of `this`.\n- `args` is a list of arguments.\n\nFor example, let's recall `delay(f, ms)` decorator, that we did in the article .\n\nIn that article we did it without proxies. A call to `delay(f, ms)` returned a function that forwards all calls to `f` after `ms` milliseconds.\n\nHere's the previous, function-based implementation:\n\n```js run\nfunction delay(f, ms) {\n // return a wrapper that passes the call to f after the timeout\n return function() { // (*)\n setTimeout(() => f.apply(this, arguments), ms);\n };\n}\n\nfunction sayHi(user) {\n alert(`Hello, ${user}!`);\n}\n\n// after this wrapping, calls to sayHi will be delayed for 3 seconds\nsayHi = delay(sayHi, 3000);\n\nsayHi(\"John\"); // Hello, John! (after 3 seconds)\n```\n\nAs we've seen already, that mostly works. The wrapper function `(*)` performs the call after the timeout.\n\nBut a wrapper function does not forward property read/write operations or anything else. After the wrapping, the access is lost to properties of the original functions, such as `name`, `length` and others:\n\n```js run\nfunction delay(f, ms) {\n return function() {\n setTimeout(() => f.apply(this, arguments), ms);\n };\n}\n\nfunction sayHi(user) {\n alert(`Hello, ${user}!`);\n}\n\n*!*\nalert(sayHi.length); // 1 (function length is the arguments count in its declaration)\n*/!*\n\nsayHi = delay(sayHi, 3000);\n\n*!*\nalert(sayHi.length); // 0 (in the wrapper declaration, there are zero arguments)\n*/!*\n```\n\n`Proxy` is much more powerful, as it forwards everything to the target object.\n\nLet's use `Proxy` instead of a wrapping function:\n\n```js run\nfunction delay(f, ms) {\n return new Proxy(f, {\n apply(target, thisArg, args) {\n setTimeout(() => target.apply(thisArg, args), ms);\n }\n });\n}\n\nfunction sayHi(user) {\n alert(`Hello, ${user}!`);\n}\n\nsayHi = delay(sayHi, 3000);\n\n*!*\nalert(sayHi.length); // 1 (*) proxy forwards \"get length\" operation to the target\n*/!*\n\nsayHi(\"John\"); // Hello, John! (after 3 seconds)\n```\n\nThe result is the same, but now not only calls, but all operations on the proxy are forwarded to the original function. So `sayHi.length` is returned correctly after the wrapping in the line `(*)`.\n\nWe've got a \"richer\" wrapper.\n\nOther traps exist: the full list is in the beginning of this article. Their usage pattern is similar to the above.\n\n## Reflect\n\n`Reflect` is a built-in object that simplifies creation of `Proxy`.\n\nIt was said previously that internal methods, such as `[[Get]]`, `[[Set]]` and others are specification-only, they can't be called directly.\n\nThe `Reflect` object makes that somewhat possible. Its methods are minimal wrappers around the internal methods.\n\nHere are examples of operations and `Reflect` calls that do the same:\n\n| Operation | `Reflect` call | Internal method |\n|-----------------|----------------|-------------|\n| `obj[prop]` | `Reflect.get(obj, prop)` | `[[Get]]` |\n| `obj[prop] = value` | `Reflect.set(obj, prop, value)` | `[[Set]]` |\n| `delete obj[prop]` | `Reflect.deleteProperty(obj, prop)` | `[[Delete]]` |\n| `new F(value)` | `Reflect.construct(F, value)` | `[[Construct]]` |\n| ... | ... | ... |\n\nFor example:\n\n```js run\nlet user = {};\n\nReflect.set(user, 'name', 'John');\n\nalert(user.name); // John\n```\n\nIn particular, `Reflect` allows us to call operators (`new`, `delete`...) as functions (`Reflect.construct`, `Reflect.deleteProperty`, ...). That's an interesting capability, but here another thing is important.\n\n**For every internal method, trappable by `Proxy`, there's a corresponding method in `Reflect`, with the same name and arguments as the `Proxy` trap.**\n\nSo we can use `Reflect` to forward an operation to the original object.\n\nIn this example, both traps `get` and `set` transparently (as if they didn't exist) forward reading/writing operations to the object, showing a message:\n\n```js run\nlet user = {\n name: \"John\",\n};\n\nuser = new Proxy(user, {\n get(target, prop, receiver) {\n alert(`GET ${prop}`);\n*!*\n return Reflect.get(target, prop, receiver); // (1)\n*/!*\n },\n set(target, prop, val, receiver) {\n alert(`SET ${prop}=${val}`);\n*!*\n return Reflect.set(target, prop, val, receiver); // (2)\n*/!*\n }\n});\n\nlet name = user.name; // shows \"GET name\"\nuser.name = \"Pete\"; // shows \"SET name=Pete\"\n```\n\nHere:\n\n- `Reflect.get` reads an object property.\n- `Reflect.set` writes an object property and returns `true` if successful, `false` otherwise.\n\nThat is, everything's simple: if a trap wants to forward the call to the object, it's enough to call `Reflect.` with the same arguments.\n\nIn most cases we can do the same without `Reflect`, for instance, reading a property `Reflect.get(target, prop, receiver)` can be replaced by `target[prop]`. There are important nuances though.\n\n### Proxying a getter\n\nLet's see an example that demonstrates why `Reflect.get` is better. And we'll also see why `get/set` have the third argument `receiver`, that we didn't use before.\n\nWe have an object `user` with `_name` property and a getter for it.\n\nHere's a proxy around it:\n\n```js run\nlet user = {\n _name: \"Guest\",\n get name() {\n return this._name;\n }\n};\n\n*!*\nlet userProxy = new Proxy(user, {\n get(target, prop, receiver) {\n return target[prop];\n }\n});\n*/!*\n\nalert(userProxy.name); // Guest\n```\n\nThe `get` trap is \"transparent\" here, it returns the original property, and doesn't do anything else. That's enough for our example.\n\nEverything seems to be all right. But let's make the example a little bit more complex.\n\nAfter inheriting another object `admin` from `user`, we can observe the incorrect behavior:\n\n```js run\nlet user = {\n _name: \"Guest\",\n get name() {\n return this._name;\n }\n};\n\nlet userProxy = new Proxy(user, {\n get(target, prop, receiver) {\n return target[prop]; // (*) target = user\n }\n});\n\n*!*\nlet admin = {\n __proto__: userProxy,\n _name: \"Admin\"\n};\n\n// Expected: Admin\nalert(admin.name); // outputs: Guest (?!?)\n*/!*\n```\n\nReading `admin.name` should return `\"Admin\"`, not `\"Guest\"`!\n\nWhat's the matter? Maybe we did something wrong with the inheritance?\n\nBut if we remove the proxy, then everything will work as expected.\n\nThe problem is actually in the proxy, in the line `(*)`.\n\n1. When we read `admin.name`, as `admin` object doesn't have such own property, the search goes to its prototype.\n2. The prototype is `userProxy`.\n3. When reading `name` property from the proxy, its `get` trap triggers and returns it from the original object as `target[prop]` in the line `(*)`.\n\n A call to `target[prop]`, when `prop` is a getter, runs its code in the context `this=target`. So the result is `this._name` from the original object `target`, that is: from `user`.\n\nTo fix such situations, we need `receiver`, the third argument of `get` trap. It keeps the correct `this` to be passed to a getter. In our case that's `admin`.\n\nHow to pass the context for a getter? For a regular function we could use `call/apply`, but that's a getter, it's not \"called\", just accessed.\n\n`Reflect.get` can do that. Everything will work right if we use it.\n\nHere's the corrected variant:\n\n```js run\nlet user = {\n _name: \"Guest\",\n get name() {\n return this._name;\n }\n};\n\nlet userProxy = new Proxy(user, {\n get(target, prop, receiver) { // receiver = admin\n*!*\n return Reflect.get(target, prop, receiver); // (*)\n*/!*\n }\n});\n\n\nlet admin = {\n __proto__: userProxy,\n _name: \"Admin\"\n};\n\n*!*\nalert(admin.name); // Admin\n*/!*\n```\n\nNow `receiver` that keeps a reference to the correct `this` (that is `admin`), is passed to the getter using `Reflect.get` in the line `(*)`.\n\nWe can rewrite the trap even shorter:\n\n```js\nget(target, prop, receiver) {\n return Reflect.get(*!*...arguments*/!*);\n}\n```\n\n\n`Reflect` calls are named exactly the same way as traps and accept the same arguments. They were specifically designed this way.\n\nSo, `return Reflect...` provides a safe no-brainer to forward the operation and make sure we don't forget anything related to that.\n\n## Proxy limitations\n\nProxies provide a unique way to alter or tweak the behavior of the existing objects at the lowest level. Still, it's not perfect. There are limitations.\n\n### Built-in objects: Internal slots\n\nMany built-in objects, for example `Map`, `Set`, `Date`, `Promise` and others make use of so-called \"internal slots\".\n\nThese are like properties, but reserved for internal, specification-only purposes. For instance, `Map` stores items in the internal slot `[[MapData]]`. Built-in methods access them directly, not via `[[Get]]/[[Set]]` internal methods. So `Proxy` can't intercept that.\n\nWhy care? They're internal anyway!\n\nWell, here's the issue. After a built-in object like that gets proxied, the proxy doesn't have these internal slots, so built-in methods will fail.\n\nFor example:\n\n```js run\nlet map = new Map();\n\nlet proxy = new Proxy(map, {});\n\n*!*\nproxy.set('test', 1); // Error\n*/!*\n```\n\nInternally, a `Map` stores all data in its `[[MapData]]` internal slot. The proxy doesn't have such a slot. The [built-in method `Map.prototype.set`](https://tc39.es/ecma262/#sec-map.prototype.set) method tries to access the internal property `this.[[MapData]]`, but because `this=proxy`, can't find it in `proxy` and just fails.\n\nFortunately, there's a way to fix it:\n\n```js run\nlet map = new Map();\n\nlet proxy = new Proxy(map, {\n get(target, prop, receiver) {\n let value = Reflect.get(...arguments);\n*!*\n return typeof value == 'function' ? value.bind(target) : value;\n*/!*\n }\n});\n\nproxy.set('test', 1);\nalert(proxy.get('test')); // 1 (works!)\n```\n\nNow it works fine, because `get` trap binds function properties, such as `map.set`, to the target object (`map`) itself.\n\nUnlike the previous example, the value of `this` inside `proxy.set(...)` will be not `proxy`, but the original `map`. So when the internal implementation of `set` tries to access `this.[[MapData]]` internal slot, it succeeds.\n\n```smart header=\"`Array` has no internal slots\"\nA notable exception: built-in `Array` doesn't use internal slots. That's for historical reasons, as it appeared so long ago.\n\nSo there's no such problem when proxying an array.\n```\n\n### Private fields\n\nA similar thing happens with private class fields.\n\nFor example, `getName()` method accesses the private `#name` property and breaks after proxying:\n\n```js run\nclass User {\n #name = \"Guest\";\n\n getName() {\n return this.#name;\n }\n}\n\nlet user = new User();\n\nuser = new Proxy(user, {});\n\n*!*\nalert(user.getName()); // Error\n*/!*\n```\n\nThe reason is that private fields are implemented using internal slots. JavaScript does not use `[[Get]]/[[Set]]` when accessing them.\n\nIn the call `getName()` the value of `this` is the proxied `user`, and it doesn't have the slot with private fields.\n\nOnce again, the solution with binding the method makes it work:\n\n```js run\nclass User {\n #name = \"Guest\";\n\n getName() {\n return this.#name;\n }\n}\n\nlet user = new User();\n\nuser = new Proxy(user, {\n get(target, prop, receiver) {\n let value = Reflect.get(...arguments);\n return typeof value == 'function' ? value.bind(target) : value;\n }\n});\n\nalert(user.getName()); // Guest\n```\n\nThat said, the solution has drawbacks, as explained previously: it exposes the original object to the method, potentially allowing it to be passed further and breaking other proxied functionality.\n\n### Proxy != target\n\nThe proxy and the original object are different objects. That's natural, right?\n\nSo if we use the original object as a key, and then proxy it, then the proxy can't be found:\n\n```js run\nlet allUsers = new Set();\n\nclass User {\n constructor(name) {\n this.name = name;\n allUsers.add(this);\n }\n}\n\nlet user = new User(\"John\");\n\nalert(allUsers.has(user)); // true\n\nuser = new Proxy(user, {});\n\n*!*\nalert(allUsers.has(user)); // false\n*/!*\n```\n\nAs we can see, after proxying we can't find `user` in the set `allUsers`, because the proxy is a different object.\n\n```warn header=\"Proxies can't intercept a strict equality test `===`\"\nProxies can intercept many operators, such as `new` (with `construct`), `in` (with `has`), `delete` (with `deleteProperty`) and so on.\n\nBut there's no way to intercept a strict equality test for objects. An object is strictly equal to itself only, and no other value.\n\nSo all operations and built-in classes that compare objects for equality will differentiate between the object and the proxy. No transparent replacement here.\n```\n\n## Revocable proxies\n\nA *revocable* proxy is a proxy that can be disabled.\n\nLet's say we have a resource, and would like to close access to it any moment.\n\nWhat we can do is to wrap it into a revocable proxy, without any traps. Such a proxy will forward operations to object, and we can disable it at any moment.\n\nThe syntax is:\n\n```js\nlet {proxy, revoke} = Proxy.revocable(target, handler)\n```\n\nThe call returns an object with the `proxy` and `revoke` function to disable it.\n\nHere's an example:\n\n```js run\nlet object = {\n data: \"Valuable data\"\n};\n\nlet {proxy, revoke} = Proxy.revocable(object, {});\n\n// pass the proxy somewhere instead of object...\nalert(proxy.data); // Valuable data\n\n// later in our code\nrevoke();\n\n// the proxy isn't working any more (revoked)\nalert(proxy.data); // Error\n```\n\nA call to `revoke()` removes all internal references to the target object from the proxy, so they are no longer connected. \n\nInitially, `revoke` is separate from `proxy`, so that we can pass `proxy` around while leaving `revoke` in the current scope.\n\nWe can also bind `revoke` method to proxy by setting `proxy.revoke = revoke`.\n\nAnother option is to create a `WeakMap` that has `proxy` as the key and the corresponding `revoke` as the value, that allows to easily find `revoke` for a proxy:\n\n```js run\n*!*\nlet revokes = new WeakMap();\n*/!*\n\nlet object = {\n data: \"Valuable data\"\n};\n\nlet {proxy, revoke} = Proxy.revocable(object, {});\n\nrevokes.set(proxy, revoke);\n\n// ..somewhere else in our code..\nrevoke = revokes.get(proxy);\nrevoke();\n\nalert(proxy.data); // Error (revoked)\n```\n\nWe use `WeakMap` instead of `Map` here because it won't block garbage collection. If a proxy object becomes \"unreachable\" (e.g. no variable references it any more), `WeakMap` allows it to be wiped from memory together with its `revoke` that we won't need any more.\n\n## References\n\n- Specification: [Proxy](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots).\n- MDN: [Proxy](mdn:/JavaScript/Reference/Global_Objects/Proxy).\n\n## Summary\n\n`Proxy` is a wrapper around an object, that forwards operations on it to the object, optionally trapping some of them.\n\nIt can wrap any kind of object, including classes and functions.\n\nThe syntax is:\n\n```js\nlet proxy = new Proxy(target, {\n /* traps */\n});\n```\n\n...Then we should use `proxy` everywhere instead of `target`. A proxy doesn't have its own properties or methods. It traps an operation if the trap is provided, otherwise forwards it to `target` object.\n\nWe can trap:\n- Reading (`get`), writing (`set`), deleting (`deleteProperty`) a property (even a non-existing one).\n- Calling a function (`apply` trap).\n- The `new` operator (`construct` trap).\n- Many other operations (the full list is at the beginning of the article and in the [docs](mdn:/JavaScript/Reference/Global_Objects/Proxy)).\n\nThat allows us to create \"virtual\" properties and methods, implement default values, observable objects, function decorators and so much more.\n\nWe can also wrap an object multiple times in different proxies, decorating it with various aspects of functionality.\n\nThe [Reflect](mdn:/JavaScript/Reference/Global_Objects/Reflect) API is designed to complement [Proxy](mdn:/JavaScript/Reference/Global_Objects/Proxy). For any `Proxy` trap, there's a `Reflect` call with same arguments. We should use those to forward calls to target objects.\n\nProxies have some limitations:\n\n- Built-in objects have \"internal slots\", access to those can't be proxied. See the workaround above.\n- The same holds true for private class fields, as they are internally implemented using slots. So proxied method calls must have the target object as `this` to access them.\n- Object equality tests `===` can't be intercepted.\n- Performance: benchmarks depend on an engine, but generally accessing a property using a simplest proxy takes a few times longer. In practice that only matters for some \"bottleneck\" objects though.\n" }, { "path": "1-js/99-js-misc/02-eval/1-eval-calculator/solution.md", "content": "Mari gunakan `eval` untuk menghitung rumus matematika:\n\n```js demo run\nlet expr = prompt(\"Type an arithmetic expression?\", '2*3+2');\n\nalert( eval(expr) );\n```\n\nPengguna dapat memasukkan teks atau kode apa pun.\n\nUntuk membuat semuanya aman dan membatasinya hanya untuk operasi aritmatika, kita dapat memeriksa `expr` menggunakan [_regular expression_](info:regular-expressions), sehingga hanya dapat berisi angka dan operator.\n" }, { "path": "1-js/99-js-misc/02-eval/1-eval-calculator/task.md", "content": "importance: 4\n\n---\n\n# Kalkulator-_eval_\n\nBuatlah kalkulator yang meminta operasi aritmatika dan mengembalikan hasilnya.\n\nTidak perlu memeriksa kebenaran operasi dalam tugas ini. Cukup evaluasi dan kembalikan hasilnya.\n\n[demo]\n" }, { "path": "1-js/99-js-misc/02-eval/article.md", "content": "# Eval: menjalankan kode dari _string_\n\nFungsi bawaan `eval` memungkinkan kita untuk menjalankan kode dari sebuah _string_.\n\nSintaksnya adalah:\n\n```js\nlet result = eval(code);\n```\n\nSebagai contoh:\n\n```js run\nlet code = 'alert(\"Halo\")';\neval(code); // Halo\n```\n\nSebuah kode yang berupa _string_ bisa panjang, berupa deklarasi fungsi, variabel dan lain-lain.\n\nHasil dari `eval` adalah hasil dari peryataan terakhir.\n\nSebagai contoh:\n```js run\nlet value = eval('1+1');\nalert(value); // 2\n```\n\n```js run\nlet value = eval('let i = 0; ++i');\nalert(value); // 1\n```\nKode yang dievaluasi akan dieksekusi di lingkungan leksikal saat ini, sehingga dapat melihat variabel luar:\n\n```js run no-beautify\nlet a = 1;\n\nfunction f() {\n let a = 2;\n\n*!*\n eval('alert(a)'); // 2\n*/!*\n}\n\nf();\n```\n\nItu juga dapat mengubah variabel luar:\n\n```js untrusted refresh run\nlet x = 5;\neval(\"x = 10\");\nalert(x); // 10, nilai diubah\n```\n\nDalam mode ketat, `eval` memiliki lingkungan leksikal sendiri. Jadi, fungsi dan variabel yang dideklarasikan di dalam eval, tidak akan terlihat di luar:\n\n```js untrusted refresh run\n// pengingat: dalam contoh yang dijalankan 'use strict' diaktifkan secara bawaan\n\neval(\"let x = 5; function f() {}\");\n\nalert(typeof x); // undefined (tidak ada variabel)\n// fungsi f juga tidak terlihat\n```\n\nTanpa `use strict`, `eval` tidak memiliki lingkungan leksikal sendiri, jadi kita akan melihat `x` dan `f` di luar.\n\n## Menggunakan \"eval\"\n\nDalam pemrograman modern `eval` jarang digunakan. Sering dikatakan bahwa \"_eval is evil_\" atau \"`eval` itu jahat\".\n\nAlasannya sederhana: dulu JavaScript adalah bahasa yang jauh lebih lemah, banyak hal yang hanya bisa dilakukan dengan `eval`. Tapi waktu itu telah berlalu satu dekade yang lalu.\n\nSekarang, hampir tidak ada alasan untuk menggunakan `eval`. Jika seseorang menggunakannya, ada kemungkinan mereka dapat menggantinya dengan konstruksi bahasa modern atau [JavaScript Module](info:modules).\n\nHarap dicatat bahwa kemampuannya untuk mengakses variabel luar memiliki efek samping.\n\n_Code minifiers_ (alat yang digunakan sebelum JS masuk ke produksi, untuk mengkompresnya) mengubah nama variabel lokal menjadi lebih pendek (seperti `a`, `b` dll) untuk membuat kode menjadi lebih kecil. Biasanya itu aman, tetapi tidak jika `eval` digunakan, karena variabel lokal dapat diakses dari kode yang dievaluasi dari _string_. Jadi _minifiers_ tidak melakukan itu untuk mengganti nama semua variabel yang terlihat dari `eval`. Itu berdampak negatif pada rasio kompresi kode.\n\nMenggunakan variabel lokal luar di dalam `eval` juga dianggap sebagai praktik pemrograman yang buruk, karena membuat kode lebih sulit dipertahankan.\n\nAda dua cara untuk terhindar dan aman dari masalah seperti itu.\n\n**Jika kode yang dievaluasi tidak menggunakan variabel luar, panggil `eval` sebagai `window.eval(...)`:**\n\nDengan cara ini, kode akan dijalankan dalam lingkup global:\n\n```js untrusted refresh run\nlet x = 1;\n{\n let x = 5;\n window.eval('alert(x)'); // 1 (variabel global)\n}\n```\n\n**Jika kode yang dievaluasi membutuhkan variabel lokal, ubah `eval` menjadi `new Function` dan teruskan sebagai argumen:**\n\n```js run\nlet f = new Function('a', 'alert(a)');\n\nf(5); // 5\n```\n\nKonstruksi `new Function` dijelaskan dalam bab . Itu membuat fungsi baru dari sebuah _string_ dan juga dalam lingkup global. Jadi tidak bisa melihat variabel lokal. Tetapi jauh lebih jelas jika meneruskannya sebagai argumen secara eksplisit, seperti pada contoh di atas.\n\n## Ringkasan\n\nPemanggilan `eval(code)` menjalankan kode dari sebuah _string_ dan mengembalikan hasil dari pernyataan terakhir.\n- Jarang digunakan dalam JavaScript modern, karena biasanya tidak diperlukan.\n- Dapat mengakses variabel lokal luar. Itu dianggap praktik yang buruk.\n- Sebaga gantinya, untuk `eval` sebuah kode dalam lingkup global, gunakan `window.eval(code)`.\n- Atau, jika kode Anda memerlukan beberapa data dari cakupan luar, gunakan `new Function` dan teruskan sebagai argumen.\n" }, { "path": "1-js/99-js-misc/03-currying-partials/article.md", "content": "libs:\n - lodash\n\n---\n\n# _Currying_\n\n[_Currying_](https://en.wikipedia.org/wiki/Currying) adalah teknik lanjutan dalam mengerjakan sebuah fungsi. _Currying_ tidak hanya digunakan di JavaScript tetapi dalam bahasa lain juga.\n\n_Currying_ adalah transformasi fungsi yang mengubah fungsi yang dipanggil sebagai `f(a, b, c)` menjadi `f(a)(b)(c)`.\n\n_Currying_ tidak memanggil suatu fungsi melainkan hanya mengubahnya.\n\nMari kita lihat contoh terlebih dahulu untuk memahami apa yang akan kita bicarakan lalu kemudian mempraktikkannya.\n\nKita akan membuat fungsi pembantu `curry(f)` yang melakukan _currying_ untuk dua argumen `f`. Dengan kata lain, `curry(f)` untuk dua argumen `f(a, b)` diubah menjadi fungsi yang dijalankan sebagai `f(a)(b)`:\n\n```js run\n*!*\nfunction curry(f) { // curry(f) melakukan currying\n return function(a) {\n return function(b) {\n return f(a, b);\n };\n };\n}\n*/!*\n\n// penggunan\nfunction sum(a, b) {\n return a + b;\n}\n\nlet curriedSum = curry(sum);\n\nalert( curriedSum(1)(2) ); // 3\n```\n\nSeperti yang Anda lihat, implementasinya cukup mudah: hanya membutuhkan dua pembungkus.\n\n- Hasil dari `curry(func)` adalah pembungkus `function(a)`.\n- Ketika dipanggil `curriedSum(1)`, argumen disimpan di lingkungan leksikal, dan pembungkus baru dikembalikan `function(b)`.\n- Kemudian pembungkus ini dipanggil dengan `2` sebagai argumen, dan ini meneruskan panggilan ke fungsi `sum` yang asli.\n\nImplementasi currying yang lebih lanjut, seperti [_.curry](https://lodash.com/docs#curry) dari _library_ lodash, mengembalikan pembungkus yang memungkinkan fungsi dipanggil secara normal maupun parsial:\n\n```js run\nfunction sum(a, b) {\n return a + b;\n}\n\nlet curriedSum = _.curry(sum); // menggunakan _.curry dari library lodash \n\nalert( curriedSum(1, 2) ); // 3, tetap bisa dijalankan secara normal\nalert( curriedSum(1)(2) ); // 3, secara parsial\n```\n\n## _Currying_? Untuk apa?\n\nUntuk memahami manfaatnya kita membutuhkan contoh implementasi di dunia nyata.\n\nSebaga contoh, kita memiliki fungsi pencatatan `log(date, importance, message)` yang memformat dan mengeluarkan informasi. Dalam proyek yang sebenarnya, fungsi seperti itu memiliki banyak fitur yang berguna seperti mengirim log melalui jaringan, disini kita akan menggunakan `alert`:\n\n```js\nfunction log(date, importance, message) {\n alert(`[${date.getHours()}:${date.getMinutes()}] [${importance}] ${message}`);\n}\n```\n\nMari lakukan _currying_!\n\n```js\nlog = _.curry(log);\n```\n\nSetelah itu `log` berjalan normal:\n\n```js\nlog(new Date(), \"DEBUG\", \"some debug\"); // log(a, b, c)\n```\n\n...Tetapi juga bekerja dalam bentuk _currying_:\n\n```js\nlog(new Date())(\"DEBUG\")(\"some debug\"); // log(a)(b)(c)\n```\n\nSekarang kita dapat dengan mudah membuat fungsi untuk log saat ini:\n\n```js\n// logNow akan menjadi bagian dari log dengan argumen pertama tetap\nlet logNow = log(new Date());\n\n// gunakan\nlogNow(\"INFO\", \"pesan\"); // [HH:mm] INFO pesan\n```\n\nSekarang `logNow` adalah `log` dengan argumen pertama yang sudah ditentukan, dengan kata lain \"fungsi yang diterapkan sebagian\" atau singkatnya \"parsial\".\n\nKita bisa melanjutkannya dan membuat fungsi untuk log _debug_ saat ini:\n\n```js\nlet debugNow = logNow(\"DEBUG\");\n\ndebugNow(\"pesan\"); // [HH:mm] DEBUG pesan\n```\n\nJadi:\n1. Kita tidak kehilangan apapun setelah melakukan _currying_: `log` tetap bisa dipanggil secara normal.\n2. Kita dapat dengan mudah membuat fungsi parsial seperti \"log untuk hari ini\".\n\n## Implementasi _currying_ lanjutan\n\nJika Anda ingin mengetahui lebih detail, berikut implementasi _currying_ \"lanjutan\" untuk fungsi multi-argumen yang dapat kita gunakan di atas.\n\nItu cukup pendek:\n\n```js\nfunction curry(func) {\n\n return function curried(...args) {\n if (args.length >= func.length) {\n return func.apply(this, args);\n } else {\n return function(...args2) {\n return curried.apply(this, args.concat(args2));\n }\n }\n };\n\n}\n```\n\nContoh penggunaan:\n\n```js\nfunction sum(a, b, c) {\n return a + b + c;\n}\n\nlet curriedSum = curry(sum);\n\nalert( curriedSum(1, 2, 3) ); // 6, tetap bisa dijalankan secara normal\nalert( curriedSum(1)(2,3) ); // 6, currying argumen pertama\nalert( curriedSum(1)(2)(3) ); // 6, currying secara penuh\n```\n\nFungsi `curry` yang baru mungkin terlihat rumit, tetapi sebenarnya cukup mudah dipahami.\n\nHasil dari pemanggilan `curry(func)` adalah pembungkus `curried` yang terlihat seperti ini:\n\n```js\n// func adalah fungsi untuk di transformasi\nfunction curried(...args) {\n if (args.length >= func.length) { // (1)\n return func.apply(this, args);\n } else {\n return function(...args2) { // (2)\n return curried.apply(this, args.concat(args2));\n }\n }\n};\n```\n\nKetika kita menjalankannya, ada dua cabang eksekusi `if`:\n\n1. Jika lewat `args` count adalah sama atau lebih dari fungsi asli memiliki definisi (` func.length`), maka cukup teruskan panggilan menggunakan `func.apply`.\n2. Jika tidak, dapatkan sebagian: kita belum memanggil `func`. Sebagai gantinya, pembungkus lain dikembalikan, yang akan menerapkan kembali `curried` yang memberikan argumen sebelumnya bersama dengan yang baru.\n\nKemudian, jika kita menyebutnya, sekali lagi, kita akan mendapatkan parsial baru (jika tidak cukup argumen) atau, akhirnya, hasilnya.\n\n```smart header=\"Fixed-length functions only\"\nCurrying membutuhkan fungsi untuk memiliki sejumlah argumen tetap.\n\nFungsi yang menggunakan sisa parameter, seperti `f(...args)`, tidak bisa di currying dengan cara ini.\n```\n\n```smart header=\"A little more than currying\"\nMenurut definisi, currying harus mengubah `sum(a, b, c)` menjadi `sum(a)(b)(c)`.\n\nNamun sebagian besar implementasi currying di JavaScript bersifat lanjutan, seperti yang dijelaskan: implementasi tersebut juga membuat fungsi dapat dipanggil dalam bentuk multi-argumen.\n```\n\n## Ringkasan\n\n*Currying* adalah transformasi yang membuat `f(a,b,c)` dapat dipanggil sebagai `f(a)(b)(c)`. Implementasi JavaScript biasanya membuat fungsi dapat dipanggil secara normal dan mengembalikan dalam bentuk parsial jika jumlah argumen tidak cukup.\n\n_Currying_ memungkinkan kita untuk mendapatkan sebuah bagian. Seperti yang kita lihat di contoh logging, setelah _currying_ tiga argumen dari fungsi universal `log(date, importance, message)` akan memberikan kita fungsi parsial ketika dipanggil dengan satu argumen (seperti `log(date)`) atau dua argumen (seperti `log(date, importance)`). \n" }, { "path": "1-js/99-js-misc/04-reference-type/2-check-syntax/solution.md", "content": "**Error**!\n\nCoba ini:\n\n```js run\nlet user = {\n name: \"John\",\n go: function() { alert(this.name) }\n}\n\n(user.go)() // error!\n```\n\nPesan error pada kebanyakan peramban tidak memberitahukan kita cukup petunjuk tentang hal apa yang salah.\n\n**Error muncul karena tidak adanya sebuah titik koma setelah `user = {...}`.**\n\nJavaScript tidak secara otomatis menyisipkan sebuah tanda titik koma setelah tanda kurung kurawa `(user.go)()`, jadi JavaScript membaca kode seperti ini:\n\n```js no-beautify\nlet user = { go:... }(user.go)()\n```\n\nLalu kita juga bisa melihat bahwa ekspresi gabungan semacam itu adalah sebuah panggilan objek `{ go: ... }` secara sintaks yang juga sebagai sebuah fungsi dengan argumen `(user.go)`. Dan hal tersebut juga terjadi pada baris yang sama dengan `let user`, jadi objek `user` belum didefinisikan, oleh karena itu terjadi error.\n\nJika kita menyisipkan tanda titik koma, semuanya akan baik-baik saja:\n\n```js run\nlet user = {\n name: \"John\",\n go: function() { alert(this.name) }\n}*!*;*/!*\n\n(user.go)() // John\n```\n\nTolong ingat bahwa tanda kurung kurawa yang merangkap `(user.go)` tidak melakukan apapun di sini. Biasanya Biasanya tanda kurung kurawa mengatur urutan operasi, tapi di sini tanda titik-lah (`.`) yang berjalan terlebih dulu, jadi tidak ada pengaruh apapun. Hanya tanda titik koma yang berpengaruh.\n" }, { "path": "1-js/99-js-misc/04-reference-type/2-check-syntax/task.md", "content": "importance: 2\n\n---\n\n# Cek sintaks\n\nApa hasil dari kode berikut ini?\n\n\n```js no-beautify\nlet user = {\n name: \"John\",\n go: function() { alert(this.name) }\n}\n\n(user.go)()\n```\n\nP.S. Ada jebakannya :)\n" }, { "path": "1-js/99-js-misc/04-reference-type/3-why-this/solution.md", "content": "\nIni dia penjelasannya.\n\n1. Itu adalah sebuah panggilan metode objek biasa.\n\n2. Sama halnya, tanda kurung kurawa tidak merubah urutan operasi di sini, lagi pula tanda titik lah yang pertama di urutan operasi.\n\n3. Di sini kita memiliki sebuah panggilan yang lebih kompleks lagi yakni `(expression).method()`. Pagnggilan tersebut bekerja sebagaimana jika panggilan itu dipisah menjadi dua baris kode:\n\n ```js no-beautify\n f = obj.go; // mengkalkulasi ekspresi\n f(); // memanggil apa yang kita punya \n ```\n\n Di sini `f()` dieksekusi sebagai sebuah fungsi, tanpa `this`.\n\n4. Hal serupa pada panggilan `(3)`, di sebelah kiri tanda titik `.` kita memiliki sebuah ekspresi.\n\nUntuk menjelaskan perilaku panggilan `(3)` dan `(4)` kita perlu memanggil ulang, yang mana properti pengakses (tanda titik atau tanda kurung siku) mengembalikan sebuah nilai dari tipe referensi (*Reference Type*). \n\nOperasi apapun kecuali sebuah panggilan metode (seperti penugasan `=` atau `||`) membuat membuat ekspresi tersebut menjadi sebuah nilai biasa, yang tidak membawa informasi yang memungkinkan untuk menentukan `this`.\n" }, { "path": "1-js/99-js-misc/04-reference-type/3-why-this/task.md", "content": "importance: 3\n\n---\n\n# Jelaskan nilai dari \"this\"\n\nDalam kode di bawah ini kita bermaksud untuk memanggil metode `obj.go()` sebanyak 4 kali sekaligus.\n\nTapi panggilan `(1)` dan `(2)` bekerja berbeda dibanding dengan `(3)` dan `(4)`. Mengapa demikian?\n\n```js run no-beautify\nlet obj, method;\n\nobj = {\n go: function() { alert(this); }\n};\n\nobj.go(); // (1) [objek Object]\n\n(obj.go)(); // (2) [objek Object]\n\n(method = obj.go)(); // (3) undefined\n\n(obj.go || obj.stop)(); // (4) undefined\n```\n\n" }, { "path": "1-js/99-js-misc/04-reference-type/article.md", "content": "\n# Reference Type\n\n```warn header=\"In-depth language feature\"\nThis article covers an advanced topic, to understand certain edge-cases better.\n\nIt's not important. Many experienced developers live fine without knowing it. Read on if you want to know how things work under the hood.\n```\n\nA dynamically evaluated method call can lose `this`.\n\nFor instance:\n\n```js run\nlet user = {\n name: \"John\",\n hi() { alert(this.name); },\n bye() { alert(\"Bye\"); }\n};\n\nuser.hi(); // works\n\n// now let's call user.hi or user.bye depending on the name\n*!*\n(user.name == \"John\" ? user.hi : user.bye)(); // Error!\n*/!*\n```\n\nOn the last line there is a conditional operator that chooses either `user.hi` or `user.bye`. In this case the result is `user.hi`.\n\nThen the method is immediately called with parentheses `()`. But it doesn't work correctly!\n\nAs you can see, the call results in an error, because the value of `\"this\"` inside the call becomes `undefined`.\n\nThis works (object dot method):\n```js\nuser.hi();\n```\n\nThis doesn't (evaluated method):\n```js\n(user.name == \"John\" ? user.hi : user.bye)(); // Error!\n```\n\nWhy? If we want to understand why it happens, let's get under the hood of how `obj.method()` call works.\n\n## Reference type explained\n\nLooking closely, we may notice two operations in `obj.method()` statement:\n\n1. First, the dot `'.'` retrieves the property `obj.method`.\n2. Then parentheses `()` execute it.\n\nSo, how does the information about `this` get passed from the first part to the second one?\n\nIf we put these operations on separate lines, then `this` will be lost for sure:\n\n```js run\nlet user = {\n name: \"John\",\n hi() { alert(this.name); }\n}\n\n*!*\n// split getting and calling the method in two lines\nlet hi = user.hi;\nhi(); // Error, because this is undefined\n*/!*\n```\n\nHere `hi = user.hi` puts the function into the variable, and then on the last line it is completely standalone, and so there's no `this`.\n\n**To make `user.hi()` calls work, JavaScript uses a trick -- the dot `'.'` returns not a function, but a value of the special [Reference Type](https://tc39.github.io/ecma262/#sec-reference-specification-type).**\n\nThe Reference Type is a \"specification type\". We can't explicitly use it, but it is used internally by the language.\n\nThe value of Reference Type is a three-value combination `(base, name, strict)`, where:\n\n- `base` is the object.\n- `name` is the property name.\n- `strict` is true if `use strict` is in effect.\n\nThe result of a property access `user.hi` is not a function, but a value of Reference Type. For `user.hi` in strict mode it is:\n\n```js\n// Reference Type value\n(user, \"hi\", true)\n```\n\nWhen parentheses `()` are called on the Reference Type, they receive the full information about the object and its method, and can set the right `this` (`=user` in this case).\n\nReference type is a special \"intermediary\" internal type, with the purpose to pass information from dot `.` to calling parentheses `()`.\n\nAny other operation like assignment `hi = user.hi` discards the reference type as a whole, takes the value of `user.hi` (a function) and passes it on. So any further operation \"loses\" `this`.\n\nSo, as the result, the value of `this` is only passed the right way if the function is called directly using a dot `obj.method()` or square brackets `obj['method']()` syntax (they do the same here). There are various ways to solve this problem such as [func.bind()](/bind#solution-2-bind).\n\n## Summary\n\nReference Type is an internal type of the language.\n\nReading a property, such as with dot `.` in `obj.method()` returns not exactly the property value, but a special \"reference type\" value that stores both the property value and the object it was taken from.\n\nThat's for the subsequent method call `()` to get the object and set `this` to it.\n\nFor all other operations, the reference type automatically becomes the property value (a function in our case).\n\nThe whole mechanics is hidden from our eyes. It only matters in subtle cases, such as when a method is obtained dynamically from the object, using an expression.\n" }, { "path": "1-js/99-js-misc/05-bigint/article.md", "content": "# BigInt\n\n[recent caniuse=\"bigint\"]\n\n`BigInt` is a special numeric type that provides support for integers of arbitrary length.\n\nA bigint is created by appending `n` to the end of an integer literal or by calling the function `BigInt` that creates bigints from strings, numbers etc.\n\n```js\nconst bigint = 1234567890123456789012345678901234567890n;\n\nconst sameBigint = BigInt(\"1234567890123456789012345678901234567890\");\n\nconst bigintFromNumber = BigInt(10); // same as 10n\n```\n\n## Math operators\n\n`BigInt` can mostly be used like a regular number, for example:\n\n```js run\nalert(1n + 2n); // 3\n\nalert(5n / 2n); // 2\n```\n\nPlease note: the division `5/2` returns the result rounded towards zero, without the decimal part. All operations on bigints return bigints.\n\nWe can't mix bigints and regular numbers:\n\n```js run\nalert(1n + 2); // Error: Cannot mix BigInt and other types\n```\n\nWe should explicitly convert them if needed: using either `BigInt()` or `Number()`, like this:\n\n```js run\nlet bigint = 1n;\nlet number = 2;\n\n// number to bigint\nalert(bigint + BigInt(number)); // 3\n\n// bigint to number\nalert(Number(bigint) + number); // 3\n```\n\nThe conversion operations are always silent, never give errors, but if the bigint is too huge and won't fit the number type, then extra bits will be cut off, so we should be careful doing such conversion.\n\n````smart header=\"The unary plus is not supported on bigints\"\nThe unary plus operator `+value` is a well-known way to convert `value` to a number.\n\nIn order to avoid confusion, it's not supported on bigints:\n```js run\nlet bigint = 1n;\n\nalert( +bigint ); // error\n```\nSo we should use `Number()` to convert a bigint to a number.\n````\n\n## Comparisons\n\nComparisons, such as `<`, `>` work with bigints and numbers just fine:\n\n```js run\nalert( 2n > 1n ); // true\n\nalert( 2n > 1 ); // true\n```\n\nPlease note though, as numbers and bigints belong to different types, they can be equal `==`, but not strictly equal `===`:\n\n```js run\nalert( 1 == 1n ); // true\n\nalert( 1 === 1n ); // false\n```\n\n## Boolean operations\n\nWhen inside `if` or other boolean operations, bigints behave like numbers.\n\nFor instance, in `if`, bigint `0n` is falsy, other values are truthy:\n\n```js run\nif (0n) {\n // never executes\n}\n```\n\nBoolean operators, such as `||`, `&&` and others also work with bigints similar to numbers:\n\n```js run\nalert( 1n || 2 ); // 1 (1n is considered truthy)\n\nalert( 0n || 2 ); // 2 (0n is considered falsy)\n```\n\n## Polyfills\n\nPolyfilling bigints is tricky. The reason is that many JavaScript operators, such as `+`, `-` and so on behave differently with bigints compared to regular numbers.\n\nFor example, division of bigints always returns a bigint (rounded if necessary).\n\nTo emulate such behavior, a polyfill would need to analyze the code and replace all such operators with its functions. But doing so is cumbersome and would cost a lot of performance.\n\nSo, there's no well-known good polyfill.\n\nAlthough, the other way around is proposed by the developers of [JSBI](https://github.com/GoogleChromeLabs/jsbi) library.\n\nThis library implements big numbers using its own methods. We can use them instead of native bigints:\n\n| Operation | native `BigInt` | JSBI |\n|-----------|-----------------|------|\n| Creation from Number | `a = BigInt(789)` | `a = JSBI.BigInt(789)` |\n| Addition | `c = a + b` | `c = JSBI.add(a, b)` |\n| Subtraction\t| `c = a - b` | `c = JSBI.subtract(a, b)` |\n| ... | ... | ... |\n\n...And then use the polyfill (Babel plugin) to convert JSBI calls to native bigints for those browsers that support them.\n\nIn other words, this approach suggests that we write code in JSBI instead of native bigints. But JSBI works with numbers as with bigints internally, emulates them closely following the specification, so the code will be \"bigint-ready\".\n\nWe can use such JSBI code \"as is\" for engines that don't support bigints and for those that do support - the polyfill will convert the calls to native bigints.\n\n## References\n\n- [MDN docs on BigInt](mdn:/JavaScript/Reference/Global_Objects/BigInt).\n- [Specification](https://tc39.es/ecma262/#sec-bigint-objects).\n" }, { "path": "1-js/99-js-misc/index.md", "content": "\n# Miscellaneous\n" }, { "path": "1-js/index.md", "content": "# Bahasa JavaScript\n\nDi sini kita belajar JavaScript, mulai dari nol dan lanjut terus hingga konsep yang mutakhir macam OOP.\n\nKonsentrasi kita di sini tertuju ke bahasanya itu sendiri, dengan catatan lingkungan tertentu se-minimum mungkin." }, { "path": "2-ui/1-document/01-browser-environment/article.md", "content": "\n# Browser environment, specs\nBahasa JavaScript awal mulanya dibuat untuk web browser. Sejak saat itu terus berevolusi dan menjadi sebuah bahasa dengan banyak pengguna dan platform.\n\nSebuah platform bisa menjadi browser, atau sebuah web-server ataupun *host* yang lain, sampai sebuah mesin kopi yang \"cerdas\", jika itu bisa menjalankan JavaScript. Masing-masing darinya menyediakan fungsionalitas platform yang spesifik. Spesifik JavaScript menyebut itu sebagai sebuah *host environment*.\n\nSebuah host environment menyediakan objek-objek tersendiri dan fungsi-fungsi tambahan ke pusat bahasa. Web browser memberikan sebuah sarana untuk mengontrol halaman-halaman web.\n\nBerikut adalah sebuah pandangan luas tentang apa yang kita punya ketika JavaScript berjalan di sebuah web browser:\n\n![](windowObjects.svg)\n\nAda sebuah \"root\" objek yang dinamakan `window`. Mempunyai 2 peranan:\n\n1. Pertama, ini adalah sebuah global objek untuk kode JavaScript, dideskripsikan di bab .\n2. Kedua, ini mempresentasikan dari \"browser window\" dan menyediakan metode-metode untuk mengontrolnya.\n\nMisalnya, disini kita akan menggunakannya sebagai sebuah global objek:\n\n```js berjalan\nfunction sayHi() {\n alert(\"Hello\");\n}\n\n// fungsi-fungsi global adalah metode objek global:\n\nwindow.sayHi();\n```\n\nDan sekarang kita menggunakannya sebagai jendela browser, untuk melihat tinggi jendela:\n\n```js berjalan\nalert(window.innerHeight); // tinggi jendela bagian dalam\n```\n\nBerikut lebih banyak metode dan properti window-specific, kita akan membahasnya nanti.\n\n## DOM (Document Object Model)\nDocument Object Model, atau disingkat DOM, mempresentasikan semua konten halaman sebagai objek yang bisa dimodifikasi.\n\nObjek `document` adalah \"pintu masuk\" utama dari halaman. Kita bisa mengubahnya atau membuat apapun untuk dipakai halaman tersebut.\n\nSebagai contoh:\n```js run\n// ubah warna latar belakang menjadi merah\ndocument.body.style.background = \"red\";\n\n// ubah kembali setelah 1 detik\nsetTimeout(() => document.body.style.background = \"\", 1000);\n```\n\nDisini kita menggunakan `document.body.style`, tapi ada lebih banyak, banyak lagi. Properti dan metode-metode dideskripsikan di spesifikasi: [DOM Living Standard](https://dom.spec.whatwg.org).\n\n```smart header=\"DOM is not only for browsers\"\nSpesifikasi DOM menjelaskan struktur dari sebuah dokumen dan penyedia objek untuk memanipulasinya. Ada instrumen dari non-browser yang menggunakan DOM juga.\n\nSebagai contoh, skrip server-side yang mengunduh halaman-halaman HTML dan memprosesnya juga menggunakan DOM. Mereka mungkin hanya mendukung sebagian dari spesifikasi tersebut.\n```\n\n```smart header=\"CSSOM for styling\"\nAda juga spesifikasi terpisah, [CSS Object Model (CSSOM)](https://www.w3.org/TR/cssom-1/) untuk aturan dan stylesheets CSS, yang menjelaskan bagaimana mereka di representasilan sebagai objek, dan bagaimana mereka membaca dan menulisnya.\n\nCSSOM digunakan bersamaan dengan DOM ketika kita memodifikasi style aturan untuk dokumen. Di prakteknya sekalipun, CSSOM jarang dibutuhkan, karena kita jarang untuk memodifikasi aturan CSS dari JavaScript (biasanya kita hanya menambah/menghapus class dari CSS, tidak memodifikasi aturan dari CSS-nya), tapi itu juga memungkinkan.\n```\n\n## BOM (Browser Object Model)\n\nBrowser Object Model (BOM) mempresentasikan tambahan dari objek-objek yang disediakan oleh browser (browser environment) untuk dikerjakan oleh apapun kecuali oleh dokumen.\n\nSebagai contoh:\n\n- Objek [navigator](mdn:api/Window/navigator) menyediakan informasi di latar belakang tentang browser dan operasi sistem. Disitu banyak sekali properti, tapi ada 2 yang sudah banyak diketahui yaitu: `navigator.userAgent` -- tentang browser sekarang, dan `navigator.platform` -- tentang platform (yang bisa membantu untuk membedakan antara Windows/Linux/Mac dan sebagainya).\n- Objek [location](mdn:api/Window/location) memungkinkan kita untuk membaca URL sekarang yang akan mengarahkan browser ke satu yang baru.\n\nBerikut adalah bagaimana kita bisa menggunakan objek `location`:\n\n```js run\nalert(location.href); // tampilkan URL sekarang\nif (confirm(\"Pergi ke Wikipedia?\")) {\n location.href = \"https://wikipedia.org\"; // mengarahkan browser ke URL yang lain\n}\n```\n\nFungsi `alert/confirm/prompt` juga bagian dari BOM: mereka tidak berhubungan secara langsung dengan dokumen, tapi mempresentasikan metode komunikasi dengan pengguna pada browser asli.\n\n```smart header=\"Specifications\"\nBOM adalah bagian dari [spesifikasi HTML](https://html.spec.whatwg.org) pada umumnya.\n\nYa, yang kamu dengar benar. Spesifikasi HTML pada bukanlah satu-satunya tentang \"bahasa HTML\" (tags, attributes), tapi juga mencakup banyak objek, metode-metode dan spesifikasi-browser ekstensi DOM. Itu adalah \"HTML dalam istilah yang luas\". Juga, beberapa bagian-bagian punya tambahan spesifikasi yang terdaftar di .\n```\n\n## Ringkasan\n\nBerbicara tentang standard, kita mempunyai:\n\nSpesifikasi DOM\n: Mendeskripsikan struktur dokumen, manipulasi dan events, lihat .\n\nSpesifikasi CSSOM\n: Mendeskripsikan stylesheets dan aturan gaya, manipulasi dengannya dan perbandingannya dengan dokumen, lihat .\n\nSpesifikasi HTML\n: Menjelaskan bahasa HTML (contoh. tags) dan juga BOM (browser object model) -- macam-macam fungsi browser: `setTimeout`, `alert`, `location` dan banyak lagi, lihat . Dengan itu bisa mengambil spesifikasi DOM dan meluaskannya dengan banyak properti dan metode.\n\nSelain itu, beberapa class telah dideskripsikan terpisah di .\n\nMohon catat tautan ini, karena ada begitu banyak hal untuk dipelajari dan mustahil untuk mencakup dan mengingat semuanya.\n\nKetika anda ingin untuk membaca tentang sebua properti atau sebuah metode, Mozilla manual di juga sebuah bahan yang bagus, tapi kesesuaian spesifikasi mungkin lebih baik: ada yang lebih kompleks dan bacaan yang panjang, tapi akan membuat dasar pengetahuan anda bersuara dan lengkap.\n\nUntuk menemukan sesuatu, akan semakin nyaman memakai pencarian internet \"WHATWG [term]\" atau \"MDN [term]\", contoh , .\n\nSekarang kita akan turun untuk mempelajari DOM, karena dokumen memiliki peranan pusat dalam UI.\n" }, { "path": "2-ui/1-document/02-dom-nodes/article.md", "content": "libs:\n - d3\n - domtree\n\n---\n\n# DOM tree\n\nTulang punggung dari dokumen HTML adalah tag.\n\nBerdasarkan Document Object Model (DOM), setiap tag HTML merupakan sebuah objek. Tag berlapis adalah \"anak\" dari tag yang melampirkan. Teks di dalam sebuah tag merupakan sebuah objek juga.\n\nSemua objek ini dapat diakses menggunakan JavaScript, dan kita bisa menggunakannya untuk memodifikasi halaman.\n\nMisalnya, `document.body` merupakan objek yang merepresentasikan tag ``.\n\nMenjalankan kode ini akan membuat `` menjadi merah selama 3 detik.\n\n```js run\ndocument.body.style.background = 'red'; // buat background menjadi merah\n\nsetTimeout(() => document.body.style.background = '', 3000); // kembalikan seperti semula\n```\n\nDisini kita menggunakan `style.background` untuk mengubah warna background `document.body`, tetapi ada banyak properti lain, seperti:\n\n- `innerHTML` -- Konten-konten HTML dari node.\n- `offsetWidth` -- lebar node (dalam piksel)\n- ...dan seterusnya.\n\nKita akan segera mempelajari lebih banyak cara untuk memanipulasi DOM, tetapi pertama-tama kita perlu mengetahui tentang strukturnya.\n\n## Contoh dari DOM\n\nMari kita mulai dengan dokumen sederhana berikut:\n\n```html run no-beautify\n\n\n\n About elk\n\n\n The truth about elk.\n\n\n```\n\nDOM menggambarkan HTML seperti struktur pohon pada tag. Begini tampilannya:\n\n

\n\n\n\n```online\nPada gambar di atas, Anda dapat mengklik node elemen dan anaknya akan membuka/menutup.\n```\n\nSetiap node pohon merupakan sebuah objek.\n\nTag-tag merupakan *node elemen* (atau hanya elemen) dan membentuk struktur pohon: `` merupakan root, kemudian `` dan `` adalah anak-anaknya, dll.\n\nTeks di dalam elemen-elemen membentuk *node teks*, dilabeli sebagai `#text`. Sebuah node teks hanya berisi string. Ia mungkin tidak memiliki anak dan selalu menjadi daun pohon.\n\nMisalnya, tag `` memiliki teks `\"About elk\"`\n\nHarap perhatikan karakter khusus dalam node teks:\n\n- baris baru: `↵` (di dalam JavaScript seperti `\\n`)\n- spasi: `␣`\n\nSpasi dan baris baru adalah karakter yang benar-benar valid, seperti huruf-huruf dan angka-angka. Mereka membentuk node teks dan menjadi bagian dari DOM. Jadi, misalnya, pada contoh di atas, tag `<head>` berisi beberapa spasi sebelum `<title>`, dan teks tersebut menjadi node `#teks` (ini berisi baris baru dan beberapa spasi).\n\nHanya ada dua pengecualian top-level:\n1. Spasi dan baris baru sebelum `<head>` diabaikan karena alasan historis.\n2. Jika kita meletakkan sesuatu setelah `</body>`, maka secara otomatis dipindahkan ke dalam `body`, di bagian bawah, karena spesifikasi HTML mengharuskan semua konten harus berada di dalam `<body>`. Jadi tidak boleh ada spasi setelah `</body>`.\n\nDalam kasus lain semuanya mudah -- Jika ada spasi-spasi (seperti karakter lainnya) di dalam dokumen, maka mereka menjadi node teks di DOM tersebut, dan jika kita menghapusnya, maka akan hilang.\n\nBerikut tidak ada node teks khusus spasi:\n\n```html no-beautify\n<!DOCTYPE HTML>\n<html><head><title>About elkThe truth about elk.\n```\n\n
\n\n\n\n```smart header=\"Spasi di awal/akhir string dan node teks khusus spasi biasanya disembunyikan di alat\"\nAlat browser (akan segera dibahas) yang bekerja dengan DOM biasanya tidak menampilkan spasi di awal/akhir teks dan node teks kosong (jeda baris) di antara tag.\n\nAlat pengembang menghemat ruang layar dengan cara ini.\n\nPada gambar DOM lebih lanjut, kita terkadang mengabaikannya saat mereka tidak relevan. Spasi seperti itu biasanya tidak mempengaruhi bagaimana dokumen ditampilkan.\n```\n\n## Autocorrection\n\nJika browser menemukan HTML yang salah format, browser akan memperbaikinya secara otomatis saat membuat DOM.\n\nMisalnya, tag yang paling atas selalu ``. Bahkan jika itu tidak ada di dalam dokumen, ia akan ada ada sendiri di dalam DOM, karena browser tersebut akan membuatnya. Hal yang sama berlaku untuk ``.\n\nContoh, jika file HTML kata tunggal `\"Hello\"`, browser akan membungkusnya ke dalam `` dan ``, dan menambahkan `` yang diperlukan, dan DOM akan menjadi seperti ini:\n\n
\n\n\n\nSelagi sedang menghasilkan DOM, browser secara otomatis memproses kesalahan-kesalahan di dalam dokumen, tag penutup, dan sebagainya.\n\ndokumen dengan tag yang tidak ditutup:\n\n```html no-beautify\n

Hello\n

  • Mom\n
  • and\n
  • Dad\n```\n\n...Akan menjadi DOM normal saat browser membaca tag dan memulihkan bagian yang hilang:\n\n
    \n\n\n\n````warn header=\"Tabel selalu memiliki ``\"\n“Kasus khusus” yang menarik adalah tabel. Berdasarkan spesifikasi DOM, mereka harus memiliki tag , tetapi teks HTML dapat menghilangkannya. Kemudian browser membuat di DOM secara otomatis.\n\nUntuk HTML:\n\n```html no-beautify\n
    1
    \n```\n\nStruktur DOM akan seperti ini:\n
    \n\n\n\nAnda lihat? `` muncul entah dari mana. Kita harus mengingat ini saat bekerja dengan tabel untuk menghindari kejutan.\n\n\n## Jenis-jenis node lain\n\nAda beberapa jenis-jenis node lain selain node elemen dan teks.\n\nContoh, komentar:\n\n```html\n\n\n\n The truth about elk.\n
      \n
    1. An elk is a smart
      2. \n*!*\n \n*/!*\n
    2. ...and cunning animal!
      3. \n
    \n\n\n```\n\n
    \n\n\n\nKita bisa lihat disini sebuah jenis node pohon baru -- *comment node*, yang dilabeli sebagai `#comment`, diantar dua node teks.\n\nKita mungkin berpikir -- kenapa komentar ditambahkan ke DOM? komentar tersebut tidak mempengaruhi representasi visual dengan cara apa pun. Tapi ada sebuah aturan -- jika sesuatu ada di dalam HTML, maka ia juga harus di dalam pohon DOM.\n\n**Semuanya di dalam HTML, bahkan komentar, akan menjadi bagian dari DOM.**\n\nBahkan direktif `` di awal HTML juga merupakan node DOM. Letaknya di pohon DOM tepat sebelum ``. Kita tidak akan menyentuh node itu, Kita bahkan tidak menggambarnya pada diagram karena alasan itu, tetapi node itu ada.\n\nObjek `document` yang mewakili seluruh dokumen, secara formal, juga merupakan node DOM.\n\nAda [12 jenis-jenis node](https://dom.spec.whatwg.org/#node). Dalam praktiknya kita biasanya bekerja dengan 4 di antaranya:\n\n1. `document` -- \"titik masuk\" ke DOM.\n2. node elemen -- tag-tag HTML, blok bangunan pohon.\n3. node teks -- berisi teks.\n4. komentar -- terkadang kita meletakkan informasi disini, ia tidak akan ditampilkan, tetapi JS bisa membacanya dari DOM.\n\n## Melihatnya untuk kita sendiri\n\nUntuk melihat struktur DOM secara real-time, coba [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Cukup ketikkan dokumen, dan itu akan muncul sebagai DOM dalam sekejap.\n\nCara lain untuk menjelajahi DOM gunakan alat pengembang browser. Sebenarnya itulah yang kita gunakan saat mengembangkan.\n\nUntuk melakukannya, buka halaman web [elk.html](elk.html), aktifkan alat pengembang browser dan beralih ke tab Elemen.\n\nSeharusnya tampil seperti ini:\n\n![](elk.svg)\n\nAnda bisa melihat DOM tersebut, klik pada elemen-elemen, melihat detailnya, dan sebagainya.\n\nHarap perhatikan bahwa struktur DOM di alat pengembang disederhanakan. Node teks ditampilkan hanya sebagai teks. Dan tidak ada samak sekali node teks \"kosong\" (hanya spasi). Tidak apa-apa, karena sebagian besar waktu kita berkepentingan pada node elemen.\n\nMengklik tombol di pojok kiri atas memungkinkan kita memilih node dari halaman web menggunakan mouse (atau perangkat penunjuk lain) dan \"memeriksanya\" (gulir ke sana di tab Elemen). Ini berfungsi dengan baik ketika kita memiliki halaman HTML besar (dan DOM besar yang sesuai) dan ingin melihat tempat elemen tertentu di dalamnya.\n\nCara lain untuk melakukannya adalah dengan mengklik kanan pada halaman web dan memilih \"Inspect\" di menu konteks.\n\n![](inspect.svg)\n\nDi bagian kanan alat ada subtabs berikut:\n- **Styles** -- kita bisa melihat CSS diterapkan ke elemen saat ini aturan demi aturan, termasuk aturan bawaan (abu-abu). Hampir semuanya dapat diedit di tempat, termasuk dimensi/margin/padding kotak di bawah ini.\n- **Computed** -- untuk melihat CSS diterapkan ke elemen berdasarkan properti: untuk setiap properti kita dapat melihat aturan yang memberikannya (termasuk pewarisan CSS dan semacamnya).\n- **Event Listeners** -- untuk melihat event listener yang dilampirkan ke elemen DOM (kita akan membahasnya di bagian selanjutnya dari tutorial).\n- ...dan seterusnya.\n\nCara terbaik untuk mempelajarinya adalah dengan mengklik. Sebagian besar nilai dapat diedit di tempat.\n\n## Interaksi dengan konsol\n\nSaat kami mengerjakan DOM, kita juga mungkin ingin menerapkan JavaScript padanya. Seperti: mendapatkan node dan jalankan beberapa kode untuk memodifikasinya, Berikut beberapa tip untuk berpindah antara tab Elemen dan konsol.\n\nSebagai permulaan:\n\n1. Pilih `
  • ` pertama di dalam tab Elements.\n2. Tekan `key:Esc` -- itu akan membuka konsol tepat di bawah tab Elements.\n\nSekarang elemen yang dipilih terakhir tersedia sebagai `$0`, yang dipilih sebelumnya adalah `$1` dll.\n\nKita bisa menjalankan perintah pada mereka. Misalnya , `$0.style.background = 'red'` membuat item list yang dipilih bewarna merah, seperti ini:\n\n![](domconsole0.svg)\n\nBegitulah cara mendapatkan node dari Elements di Console.\n\nAda juga jalan kembali. Jika ada variabel yang mereferensikan node DOM, maka kita dapat menggunakan perintah `inspect (node)` di Console untuk melihatnya di panel Elements.\n\nAtau kita bisa mengeluarkan simpul DOM di konsol dan menjelajahi \"di tempat\", seperti `document.body` di bawah ini:\n\n![](domconsole1.svg)\n\nItu tentu saja untuk tujuan debugging. Dari bab selanjutnya kita akan mengakses dan memodifikasi DOM menggunakan JavaScript.\n\nAlat pengembang browser sangat membantu dalam pengembangan: kita dapat menjelajahi DOM, mencoba berbagai hal dan melihat apa yang salah.\n\n## Summary\n\nDokumen HTML/XML direpresentasikan di dalam browser sebagai pohon DOM.\n\n- Tag menjadi node elemen dan membentuk struktur.\n- Teks menjadi node teks.\n- ...dll, semuanya di dalam HTML mempunyai tempatnya di dalam DOM, bahkan komentar.\n\nKita dapat menggunakan alat pengembang untuk memeriksa DOM dan memodifikasinya secara manual.\n\nDi sini kami membahas dasar-dasar, tindakan yang paling sering digunakan dan penting untuk memulai. Ada dokumentasi lengkap tentang Alat Pengembang Chrome di . Cara terbaik untuk mempelajari alat ini adalah dengan mengklik di sana-sini, membaca menu: sebagian besar opsi sudah jelas. Nanti, jika Anda mengenal mereka secara umum, bacalah dokumennya dan pelajari sisanya.\n\nNode DOM memiliki properti dan method yang memungkinkan kita untuk melakukan perjalanan di antara mereka, memodifikasinya, memindahkan halaman, dan banyak lagi. Kami akan membahasnya di bab berikutnya.\n" }, { "path": "2-ui/1-document/02-dom-nodes/elk.html", "content": "\n\n\n The truth about elk.\n
      \n
    1. An elk is a smart
      2. \n \n
    2. ...and cunning animal!
      3. \n
    \n\n\n" }, { "path": "2-ui/1-document/02-dom-nodes/head.html", "content": "\n" }, { "path": "2-ui/1-document/03-dom-navigation/1-dom-children/solution.md", "content": "There are many ways, for instance:\n\n\nThe `
    ` DOM node:\n\n```js\ndocument.body.firstElementChild\n// or\ndocument.body.children[0]\n// or (the first node is space, so we take 2nd)\ndocument.body.childNodes[1]\n```\n\nThe `