├── manuscript ├── .DS_Store ├── images │ ├── .DS_Store │ ├── chapter04-02.png │ ├── chapter05-02.png │ ├── chapter06-01.png │ ├── chapter06-02.png │ ├── chapter06-03.png │ ├── chapter06-04.png │ ├── chapter06-05.png │ ├── chapter06-07.png │ ├── chapter06-08.png │ ├── chapter06-09.png │ ├── chapter06-10.png │ ├── chapter07-01.png │ ├── chapter10-01.png │ ├── chrome-devtools.png │ ├── execution-flow.png │ ├── kondisi-bersarang.png │ └── waktunya-koding-3-1.png ├── intro03.md ├── intro04.md ├── intro01.md ├── chapter04.md ├── chapter01.md ├── chapter05.md ├── chapter03.md ├── chapter09.md ├── intro02.md ├── chapter08.md ├── chapter07.md ├── chapter02.md ├── chapter06.md └── chapter10.md ├── README.md └── LICENSE /manuscript/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/.DS_Store -------------------------------------------------------------------------------- /manuscript/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/.DS_Store -------------------------------------------------------------------------------- /manuscript/images/chapter04-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/chapter04-02.png -------------------------------------------------------------------------------- /manuscript/images/chapter05-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/chapter05-02.png -------------------------------------------------------------------------------- /manuscript/images/chapter06-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/chapter06-01.png -------------------------------------------------------------------------------- /manuscript/images/chapter06-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/chapter06-02.png -------------------------------------------------------------------------------- /manuscript/images/chapter06-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/chapter06-03.png -------------------------------------------------------------------------------- /manuscript/images/chapter06-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/chapter06-04.png -------------------------------------------------------------------------------- /manuscript/images/chapter06-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/chapter06-05.png -------------------------------------------------------------------------------- /manuscript/images/chapter06-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/chapter06-07.png -------------------------------------------------------------------------------- /manuscript/images/chapter06-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/chapter06-08.png -------------------------------------------------------------------------------- /manuscript/images/chapter06-09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/chapter06-09.png -------------------------------------------------------------------------------- /manuscript/images/chapter06-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/chapter06-10.png -------------------------------------------------------------------------------- /manuscript/images/chapter07-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/chapter07-01.png -------------------------------------------------------------------------------- /manuscript/images/chapter10-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/chapter10-01.png -------------------------------------------------------------------------------- /manuscript/images/chrome-devtools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/chrome-devtools.png -------------------------------------------------------------------------------- /manuscript/images/execution-flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/execution-flow.png -------------------------------------------------------------------------------- /manuscript/images/kondisi-bersarang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/kondisi-bersarang.png -------------------------------------------------------------------------------- /manuscript/images/waktunya-koding-3-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wayanjimmy/thejsway_id/HEAD/manuscript/images/waktunya-koding-3-1.png -------------------------------------------------------------------------------- /manuscript/intro03.md: -------------------------------------------------------------------------------- 1 | # Perkenalan Javascript 2 | 3 | * Awalnya dibuat untuk membuat animasi pada halaman web, Sekarang javascript dapat ditemukan dimana-mana, seperti peladen (server), aplikasi mobile bahkan dalam jam tangan pintar. 4 | * Javascript penting bagi banyak pengembang perangkat lunak dan pilihan yang baik sebagai bahasa pertama untuk belajar pemrograman. 5 | * Telah distandarisasi oleh **ECMAScript**, dan secara berlanjut terus dikembangkan hingga sekarang. 6 | * Javascript yang akan digunakan untuk workshop ini adalah versi **ES2015** atau yang dikenal dengan **ES6** -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Buku JavaScript Way 2 | 3 | A modern introduction to an essential language. 4 | 5 | Copyright © 2017 [Baptiste Pesquet](http://bpesquet.com). Translation provided by the community. 6 | 7 | [![License: CC BY-NC-SA 4.0](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-blue.svg)](LICENSE) 8 | 9 | ## Daftar Isi 10 | 11 | * Perkenalan 12 | * [Tentang buku ini](manuscript/intro01.md) 13 | * [Selamat datang di programming](manuscript/intro02.md) 14 | * [Perkenalan Javascript](manuscript/intro03.md) 15 | * [Memulai Koding](manuscript/intro04.md) 16 | * Bagian I: Belajar menulis program 17 | * [3, 2, 1... Koding!](manuscript/chapter01.md) 18 | * [Bermain dengan variabel](manuscript/chapter02.md) 19 | * [Menambahkan kondisi](manuscript/chapter03.md) 20 | * [Perulangan](manuscript/chapter04.md) 21 | * [Fungsi](manuscript/chapter05.md) 22 | * [Object](manuscript/chapter06.md) 23 | * [Menyimpan data di array](manuscript/chapter07.md) 24 | * [String](manuscript/chapter08.md) 25 | * [Pemrograman Berorientasi Objek](manuscript/chapter09.md) 26 | * [Pemrograman Fungsional](manuscript/chapter10.md) 27 | * [Projek: Aplikasi berita](manuscript/chapter11.md) -------------------------------------------------------------------------------- /manuscript/intro04.md: -------------------------------------------------------------------------------- 1 | # Persiapan Lingkungan Pengembangan 2 | 3 | ## Prasyarat: Browser Modern 4 | Karena versi javascript yang akan dipelajari adalah versi **ES6**, disarankan menggunakan Google Chrome, Mozilla Firefox, Opera, Edge maupun Safari. Dalam panduan ini akan digunakan Google Chrome. 5 | 6 | ## Pilihan A: Koding Lokal (Offline) 7 | Disarankan menggunakan beberapa editor berikut. 8 | - [Sublime Text](https://www.sublimetext.com/ "Unduh di sini."), gratis dan kode sumber terbuka. Anda akan mendapat _popup_ setelah beberapa kali menyimpan berkas, jika Anda menggunakan versi gratisnya. 9 | - [Atom](https://atom.io/ "Unduh Atom di sini."), gratis dan kode sumber terbuka. Tidak ada versi berbayar. 10 | - [Code](https://code.visualstudio.com/), gratis dan kode sumber terbuka. Tidak ada versi berbayar. 11 | 12 | ## Pilihan B: Koding Daring (Online) 13 | Pilihan ini digunakan jika Anda malas melakukan konfigurasi di mesin anda. Sangat beruntung ekosistem javascript memiliki banyak perkakas yang memungkinkan untuk koding secara daring tentunya syaratnya anda harus Daring (Online). 14 | - [Codepen](https://codepen.io/) 15 | - [Codesandbox](https://codesandbox.io/) 16 | - [Glitch](http://glitch.com/) 17 | - [Repl.it](https://repl.it/) 18 | 19 | ### Menggunakan browser dev tools 20 | Modern browser dilengkapi dengan dev tools untuk membantu proses pengembangan web. Setiap browser memiliki dev tools yang berbeda namun semuanya hampir sama. 21 | 22 | Di dalam dev tools terdapat **Javascript console** (Untuk menulis perintah dan menampilkan output kode Javascript), **Page inspector** (untuk menampikan struktur halaman web). 23 | 24 | ![Chrome JavaScript console](images/chrome-devtools.png) -------------------------------------------------------------------------------- /manuscript/intro01.md: -------------------------------------------------------------------------------- 1 | # Mengenai Buku Ini 2 | 3 | Pertama-tama: terimakasih telah memilih buku ini. Saya berharap dengan membacanya akan bermanfaat dan menyenangkan bagi Anda. 4 | 5 | ## Untuk siapa buku ini ? 6 | 7 | Buku ini diutamakan untuk pemula. Telah mengajar dasar pemrograman kepada ratusan murid, Saya mencoba untuk menulisnya dalam bentuk yang bersahabat dan mudah didapatkan. Tujuan saya adalah agar apapun latar belakang seseorang, semua orang yang tertarik dalam dunia pemrograman bisa mengikuti isi buku ini tanpa kesulitan. 8 | 9 | Namun, buku ini juga berguna bagi orang yang memiliki pengalaman dalam dunia pemrograman. Bahasa javascript adalah jenis bahasa yang seperti hewan aneh. Terdapat kesamaan dengan beberapa bahasa pemrograman lain seperti Java dan C#. Disisi lain Javascript memiliki banyak keunikan yang patut untuk dipelajari. Buku ini mencakup wilayah tersebut. Dengan demikian, ini akan menarik bagi orang yang tertarik mendalami Javascript atau menyegarkan kembali tentang evolusi yang terjadi pada bahasa ini. 10 | 11 | ## Gambaran 12 | 13 | Buku ini dibagi menjadi 3 bagian. Bagian pertama mengajarkan dasar pemrograman Javascript. Bagian kedua menjelaskan cara menggunakan Javascript untuk membuat halaman web interaktif. Bagian ketiga berisi pembuatan aplikasi baik dari sisi *client* maupun *server*. Tiap bagian bergantung dengan bagian sebelumnya, namun tidak ada prasyarat untuk membacanya. 14 | 15 | Setiap *chapter* terdiri atas paragraf **TL;DR** yang berisikan rangkuman, jadi Anda bisa melewati sekiranya bahasan pada *chapter* tersebut telah Anda kuasai. 16 | 17 | Pada bagian akhir *chapter*, terdapat beberapa latihan kecil yang untuk melatih keahlian baru Anda. Setiap akhir bagian menuntun dalam pembuatan sebuah aplikasi web berita sosial. 18 | 19 | ## Mengikuti 20 | 21 | Ada 2 cara untuk mengikuti, tergantung dari kenyamanan Anda. 22 | 23 | - Koding Daring, menggunakan alat seperti [Codepen](https://codepen.io/) atau [Glitch](http://glitch.com/) 24 | - Membuat lingkungan pengembangan ada mesin Anda sendiri 25 | 26 | Pilihan yang pertama adalah yang paling mudah, Namun yang kedua lebih bermanfaat karena Anda akan belajar menyiapkan sendiri lingkungan pengembangan di mesin Anda, yang nantinya akan berguna untuk masa depan Anda. 27 | 28 | Saya mengharapkan perjalanan Anda belajar Javascript menyenangkan. 29 | -------------------------------------------------------------------------------- /manuscript/chapter04.md: -------------------------------------------------------------------------------- 1 | # Perulangan 2 | 3 | ## Rangkuman 4 | 5 | * **Perulangan** digunakan untuk mengulang statement. Setiap pengulangan disebut **iterasi**. Block kode yang diasosiasikan dengan perulangan disebut **body**. 6 | 7 | * Perulangan dengan `while` mengulang statement selama kondisi terpenuhi. Perulangan `for` memberikan kendali untuk mengatur apa yang terjadi sesaat sebelum dan setelah iterasi terjadi. 8 | 9 | ```js 10 | // Perulangan while 11 | while (kondisi) { 12 | // Kode yang dieksekusi selama kondisi true 13 | } 14 | 15 | for (inisialisasi; kondisi; ekspresi akhir) { 16 | // Kode yang dieksekusi selama kondisi true 17 | } 18 | ``` 19 | 20 | * Variabel yang mengatur perulangan disebut dengan **counter** sering dinamankan dengan `i`. 21 | 22 | ## Pengenalan 23 | 24 | Jika Anda menulis program yang menampilkan angka 1 sampai 5, Anda dapat menulis seperti ini. 25 | 26 | ```js 27 | console.log(1); 28 | console.log(2); 29 | console.log(3); 30 | console.log(4); 31 | console.log(5); 32 | ``` 33 | 34 | akan melelahkan dan rumit untuk menulis program yang menampilkan angka antara 1 dan 1000, misalnya. Bagaimana Anda bisa membuat hal yang sama dengan lebih mudah? 35 | 36 | JavaScript memungkinkan Anda menulis kode di dalam **perulangan** yang berulang kali dijalankan hingga berhenti. Setiap kali kode berjalan, itu disebut **iterasi**. 37 | 38 | ## Perulangan `while` 39 | 40 | ### Contoh 41 | 42 | ```js 43 | let number = 1; 44 | while (number <= 5) { 45 | console.log(number); 46 | number++; 47 | } 48 | ``` 49 | 50 | ![Hasil eksekusi](images/chapter04-02.png) 51 | 52 | ## Perulangan `for` 53 | 54 | ### Contoh 55 | 56 | ```js 57 | let number; 58 | for (number = 1; number <= 5; number++) { 59 | console.log(number); 60 | } 61 | ``` 62 | 63 | ## Kesalahan umum 64 | 65 | Risiko utama menggunakan perulangan `while` loops adalah menghasilkan **infinite loops** (perulangan tiada akhir), yang berarti kondisi selalu benar, dan kode berjalan selamanya. 66 | 67 | ```js 68 | let number = 1; 69 | while (number <= 5) { 70 | console.log(number); 71 | // Variable number tidak berubah nilainya menyebabkan kondisi selalu true dan tidak berubah 72 | } 73 | ``` 74 | 75 | ## Waktunya Koding! 76 | 77 | ### Validasi input 78 | 79 | Tulis program yang akan terus meminta input, sampai input yang dimasukan adalah angka yang kurang dari sama dengan 100. Jika sudah coba ubah kondisi menjadi angka diantara 50 sampai 100. 80 | 81 | ### Tabel perkalian 82 | 83 | Tulis program yang meminta input angka dan menampilkan tabel perkalian angka tersebut. Jika sudah buat program Anda hanya menerima input angka antara 2 dan 9. 84 | 85 | ### FizzBuzz 86 | 87 | Tulis program yang menampilkan angka antara 1 sampai 100 dengan pengecualian. 88 | 89 | * Menampilkan `"Fizz"` jika angka habis dibagi 3 90 | * Menampilkan `"Buzz"` jika angka habis dibagi 5 dan tidak habis jika dibagi 3 91 | 92 | Jika sudah coba tambahkan kondisi menampilkan `"FizzBuzz"` jika angka habis dibagi 3 dan 5. 93 | -------------------------------------------------------------------------------- /manuscript/chapter01.md: -------------------------------------------------------------------------------- 1 | # 3, 2, 1... Koding! 2 | 3 | Ayo mulai!, Bab ini akan memperkenalkanmu dasar dari pemrograman yang terdiri dari *value*, jenis data dan struktur program. 4 | 5 | ## Rangkuman 6 | 7 | * Perintah Javascript `console.log()` menampilkan pesan dalam **console** yang merupakan wilayah informasi yang tersedia di lingkungan Javascript. 8 | 9 | * *Value* adalah potongan informasi. Jenis dari *value* tersebut mendefinisikan peranan dan operasi yang dapat dilakukan terhadapnya. 10 | 11 | * Bahasa Javascript menggunakan jenis data **number** untuk menyimpan *value* numerik (dengan dan tanpa desimal) dan **string** untuk menyimpan teks. 12 | 13 | * *Value* string di apit di antara sepasang tanda kutip tunggal (`'...'`) atau sepasang tanda kutip ganda (`"..."`). 14 | 15 | * Operasi aritmatik antara angka dapat dilakukan dengan tanda `+`, `-`, `*` dan `/`. Jika digunakan pada jenis data **string** maka akan digabungkan. Operasi ini disebut dengan **concatenation**. 16 | 17 | * Sebuah program komputer terdiri atas beberapa baris kode yang dibaca secara berurutan saat proses eksekusi. 18 | 19 | * Komentar (`// ...` atau `/* ... */`) adalah bagian kode yang tidak dieksekusi. Berguna untuk dokumentasi. 20 | 21 | ## Program Pertama 22 | Ini adalah program pertama kita. 23 | ```js 24 | console.log("Halo dari Javascript!"); 25 | ``` 26 | 27 | ## Value dan Jenis data 28 | Sebuah **value** adalah potongan informasi yang disimpan dalam program. Setiap value disimpan dalam bentuk yang berbeda disebut Tipedata. Tipedata-lah yang menentukan nilai yang bisa disimpan dalam **value** dan operasi yang bisa dilakukan terhadap **value** tersebut. 29 | 30 | Setiap bahasa pemrograman memiliki **value** dan tipedata masing-masing. Berikut adalah tipedata dalam Javascript. 31 | 32 | ### Number 33 | Number adalah numerikal **value**, Seperti dalam matematika Anda dapat menggunakan bilangan bulat (0, 1, 2, 3, ...) atau bilangan desimal untuk akurasi yang lebih baik. 34 | 35 | Number banyak digunakan untuk proses perhitungan. Operasi yang dapat dilakukan untuk tipedata Number adalah. 36 | 37 | |Operator|Kegunaan| 38 | |---------|----| 39 | |`+`|Penambahan| 40 | |`-`|Pengurangan| 41 | |`*`|Perkalian| 42 | |`/`|Pembagian| 43 | 44 | ### String 45 | String dalam Javascript adalah text yang diapit oleh tanda kutip, misal `"Ini sebuah string."`. 46 | 47 | Anda juga dapat mendefinisikan string dengan tanda kutip satu, misal, `'Ini sebuah string.'`. Kapan menggunakan kutip dua dan kutip satu? Pilihlah salah satu, jika sudah menentukan pilihan cobalah untuk konsisten untuk terus menggunakannya dalam satu program. 48 | 49 | > Ingatlah selalu menutup string dengan tanda yang Anda gunakan untuk memulai string tersebut. 50 | 51 | Anda tidak dapat menambah dan mengurangi string seperti yang dapat dilakukan pada tipedata Number. Namun dengan menggunakan operator `+` diantara 2 String akan menggabungkan value kedua string tersebut. Misal, `"Java" + "script"` akan menghasilkan `"Javascript"`. 52 | 53 | 54 | ## Struktur Program 55 | 56 | ### Statement 57 | Setiap instruksi dalam program disebut statement. Statement dalam Javascript biasanya diakhiri dengan titik koma (sebenarnya tidak wajib). Sebuah program akan terdiri dari kumpulan statement. 58 | 59 | > Statement biasanya hanya terdiri dari 1 baris. 60 | 61 | ### Execution Flow 62 | Saat program dieksekusi, statement biasanya saling tergantung satu sama lain. Kombinasi ini yang akan menghasilkan/mengerjakan sesuatu. 63 | 64 | Berikut adalah contoh kumpulan dari beberapa statement, disertai dengan hasilnya. 65 | ```js 66 | console.log("Halo dari Javascript"); 67 | console.log("Ayo belajar Javascript"); 68 | console.log(4 + 7); 69 | console.log(12 / 0); 70 | console.log("Sampai Jumpa!"); 71 | ``` 72 | 73 | ![Execution Flow](images/execution-flow.png) 74 | 75 | ### Komentar 76 | Statement yang diawali dengan tanda `//` akan dianggap sebagai komentar dan tidak akan dieksekusi. 77 | ```js 78 | console.log("Halo dari Javascript"); 79 | // console.log("Ayo belajar Javascript"); 80 | console.log(4 + 7); 81 | // console.log(12 / 0); 82 | console.log("Sampai Jumpa!"); 83 | ``` 84 | 85 | ## Waktunya Koding! 86 | 87 | Sekarang saatnya mempraktekan ilmu diatas. 88 | 89 | ### Presentasi 90 | 91 | Tulislah program yang memunculkan nama dan umur Anda. Berikut adalah hasil output program saya. 92 | 93 | ![Waktunya Koding](images/waktunya-koding-3-1.png) 94 | 95 | ### Kalkulator Minimalis 96 | Tulislah program yang menjumlahkan, mengurangi, kali, dan bagi angka 6 dengan 3. 97 | 98 | ### Prediksi Output 99 | Apakah output yang dihasilkan dari program dibawah. 100 | ```js 101 | console.log(4 + 5); 102 | console.log("4 + 5"); 103 | console.log("4" + "5"); 104 | ``` 105 | 106 | Pastikan jawaban Anda dengan mengeksekusi program tersebut. -------------------------------------------------------------------------------- /manuscript/chapter05.md: -------------------------------------------------------------------------------- 1 | # Fungsi 2 | 3 | ## Pengenalan 4 | 5 | Berikut adalah algoritma memasak mie instant. 6 | 7 | ```text 8 | Begin 9 | Siapkan 1 bungkus mie instant, 2 gelas air, panci, mangkok dan garpu 10 | Masukan 2 gelas air kedalam panci 11 | Tunggu hingga mendidih 12 | Masukan mie ke dalam panci 13 | Tunggu dan aduk selama 3 menit 14 | Jika mie matang 15 | Masukan bumbu 16 | Aduk hingga rata 17 | End 18 | ``` 19 | 20 | Berikut adalah algoritma yang sama namun ditulis dengan cara yang berbeda. 21 | 22 | ```text 23 | Begin 24 | Masak air 25 | Masak mie 26 | End 27 | ``` 28 | 29 | Cara pertama menjelaskan secara detil masing-masing langkah. Cara kedua memecah beberapa langkah menjadi cara yang umum dan memperkenalkan konsep re-useable dalam hal ini adalah Masak (Masak air & Masak mie). 30 | 31 | ## Mengenal fungsi lebih dalam 32 | 33 | **Fungsi** adalah kumpulan beberapa statement yang mengerjakan sesuatu. 34 | 35 | Ini adalah sebuah contoh fungsi. 36 | 37 | ```js 38 | function menyapa() { 39 | console.log("Halo"); 40 | } 41 | 42 | console.log("Program dimulai"); 43 | menyapa(); 44 | console.log("Program selesai"); 45 | ``` 46 | 47 | ### Deklarasi fungsi 48 | 49 | ### Memanggil fungsi 50 | 51 | Fungsi harus dipanggil untuk dijalankan. Berikut adalah bagian kedua dari contoh program. 52 | 53 | ```js 54 | console.log("Program dimulai"); 55 | menyapa(); 56 | console.log("Program selesai"); 57 | ``` 58 | 59 | Baris pertama dan terakhir menampilkan pesan di layar. Baris kedua melakukan pemanggilan fungsi `menyapa()`. 60 | 61 | Anda dapat memanggil fungsi dengan menuliskan nama fungsi diikuti sepasang tanda kurung. 62 | 63 | ```js 64 | // ... 65 | sebuahFungsi(); // Memanggil fungsi bernama sebuahFungsi 66 | // ... 67 | ``` 68 | 69 | ![Mekanisme pemanggilan fungsi](images/chapter05-02.png) 70 | 71 | ### Manfaat menggunakan fungsi 72 | 73 | Masalah yang kompleks umumnya lebih mudah ditangani ketika dipecah menjadi beberapa masalah yang lebih sederhana. Program komputer, ditulis sebagai kombinasi dari beberapa fungsi singkat dan terfokus, program akan lebih mudah dipahami dan diperbarui daripada yang monolitik. Sebagai bonus tambahan, beberapa fungsi dapat digunakan kembali di program lain! 74 | 75 | Membuat fungsi juga bisa menjadi solusi untuk masalah duplikasi kode, Daripada kode diduplikasi di beberapa tempat, sepotong kode yang dijadikan fungsi dapat dipanggil dari mana saja ketika diperlukan. 76 | 77 | ## Isi Fungsi 78 | 79 | ### Nilai kembali 80 | 81 | Berikut adalah variasi dari program diatas. 82 | 83 | ```js 84 | function menyapa() { 85 | return 'Halo'; 86 | } 87 | 88 | console.log("Program dimulai"); 89 | const pesan = menyapa(); // Simpan nilai kembali dari fungsi di sebuah variabel 90 | console.log(pesan); // Tampilkan nilai kembali 91 | console.log("Program selesai"); 92 | ``` 93 | 94 | Jalankan kode diatas dan hasilnya akan sama saja. 95 | 96 | Dalam contoh ini isi dari fungsi `menyapa` berbeda yang awalnya menggunakan `console.log('Halo');` diubah menjadi `return 'Halo';`. 97 | 98 | Kata kunci `return` digunakan agar fungsi mengirim nilai kembali. Nilai kembali yang dikirim diletakan disetelah kata `return`. 99 | 100 | ```js 101 | // Deklarasi sebuahFungsi 102 | function sebuahFungsi() { 103 | let nilaiKembali; 104 | // Kalkulasi nilai kembali 105 | // nilaiKembali = ... 106 | return nilaiKembali; 107 | } 108 | 109 | // Mendapatkan nilai kembali dari memanggil sebuahFungsi 110 | const hasil = sebuahFungsi(); 111 | // ... 112 | ``` 113 | 114 | Nilai kembali bisa bernilai apa saja (number, string, dll). Namun sebuah fungsi hanya bisa mengembalikan 1 nilai. 115 | 116 | Jika Anda mencoba mengambil nilai kembali dari fungsi yang tidak mengembalikan nilai, makanya nilai yang didapat adalah `undefined` 117 | 118 | ```js 119 | function fungsiSaya() { 120 | // ... 121 | // Tidak ada nilai kembali 122 | } 123 | 124 | const hasil = fungsiSaya(); 125 | console.log(hasil); // undefined 126 | ``` 127 | 128 | > Sebuah fungsi berhenti setelah statement return di eksekusi, baris kode dibawah return tidak akan dieksekusi 129 | 130 | ### Variabel lokal 131 | 132 | Anda dapet mendeklarasi variabel dalam fungsi 133 | 134 | ```js 135 | function menyapa() { 136 | const pesan = "Halo!"; 137 | return pesan; 138 | } 139 | 140 | console.log(menyapa()); // "Halo!" 141 | ``` 142 | 143 | Fungsi `menyapa()` mendeklarasikan variabel bernama `pesan` dan mengembalikan nilainya dengan `return`. 144 | 145 | Variabel yang berada didalam fungsi dinamakan variabel lokal, karena scope variabel tersebut hanya didalam fungsi. Diluar fungsi Anda tidak dapat mengaksesnya. 146 | 147 | ```js 148 | function menyapa() { 149 | const pesan = "Halo!"; 150 | return pesan; 151 | } 152 | 153 | console.log(menyapa()); // "Halo!" 154 | console.log(pesan); // Error 155 | ``` 156 | 157 | Tidak dapat menggunakan variabel lokal diluar fungsi bukanlah hal yang buruk, justru hal yang bagus. Ini akan mencegah konflik penamaan, dan memungkinkan menggunakan nama variabel yang sama di fungsi yang berbeda. 158 | 159 | ### Passing Parameter 160 | 161 | **Parameter** adalah informasi yang diperlukan oleh sebuah fungsi untuk bekerja. Parameter didefinisikan di antara tanda kurung `(...)` setelah nama fungsi. Parameter itu kemudian dapat digunakan didalam fungsi. 162 | 163 | ```js 164 | function menyapa(nama) { 165 | console.log(`Halo ${nama}`); 166 | } 167 | 168 | console.log(menyapa("Satya")); // Halo Satya 169 | console.log(menyapa("Angga")); // Halo Angga 170 | ``` 171 | 172 | Deklarasi fungsi `menyapa` kini terdapat parameter `nama`. 173 | 174 | Dalam contoh ini pemanggilan pertama fungsi `menyapa` dilakukan dengan argument `Satya`, dan yang kedua `Angga`. Pada pemanggilan pertama parameternya adalah `Satya` sedangkan kedua `Angga`. 175 | 176 | Berikut contoh syntax deklarasi fungsi dengan lebih dari 1 parameter, banyaknya parameter tidak dibatasi namun fungsi dengan parameter lebih dari 3 atau 4 jarang ditemukan. 177 | 178 | ```js 179 | // Deklarasi fungsiSaya dengan beberapa parameter 180 | function fungsiSaya(param1, param2, ...) { 181 | // Gunakan param1, param2, ... disini 182 | } 183 | 184 | // Pemanggilan fungsi 185 | // nilai param1 diiisi dengan arg1, param2 diisi arg2, ... 186 | fungsiSaya(arg1, arg2, ...); 187 | ``` 188 | -------------------------------------------------------------------------------- /manuscript/chapter03.md: -------------------------------------------------------------------------------- 1 | # Kondisi 2 | 3 | # Rangkuman 4 | 5 | * Kata kunci `if` mendefinisikan kondisional. Kode block yang ada didalam `if` hanya akan dijalankan jika kondisi memenuhi (mengembalikan nilai `true`). 6 | 7 | ```js 8 | if (kondisi) { 9 | // Kode yang dijalankan jika kondisi mengembalikan nilai true 10 | } 11 | ``` 12 | 13 | * Kode block didalam `if` di diapit dengan tanda kurung kurawal (`{...}`). Untuk mempermudah pembacaan kode block ditambahkan indentasi. 14 | 15 | * Operator pembanding seperti `===`, `!==`, `<=`, `>=`, `>` dan `<` didalam kondisi semua operator tersebut mengembalikan nilai boolean. 16 | 17 | * `if` dapat berisikan (opsional) statement `else` untuk menambahkan kode yang perlu dieksekusi jika kondisi mengembalikan nilai `false` 18 | 19 | ```js 20 | if (kondisi) { 21 | // Kode yang dijalankan jika kondisi mengembalikan nilai true 22 | } else { 23 | // Kode yang dijalankan jika kondisi mengembalikan nilai false 24 | } 25 | ``` 26 | 27 | ### Apa itu Kondisi ? 28 | 29 | Bayangkan jika kita akan membuat program yang menerima sebuah input angka kemudian menampilkan pesan jika angka positif. 30 | 31 | ``` 32 | Masukan sebuah angka 33 | Jika angka positif 34 | Tampilkan sebuah pesan 35 | ``` 36 | 37 | ### Statement `if` 38 | 39 | Berikut adalah program diatas yang ditulis dalam Javascript. 40 | ```js 41 | const number = Number(prompt("Masukan sebuah angka:")); 42 | if (number > 0) { 43 | console.log(`${number} adalah positif`); 44 | } 45 | ``` 46 | 47 | ### Kondisi 48 | 49 | Sebuah kondisi adalah ekspresi yang mengevaluasi sebuah nilai apakah bernilai `true` atau `false`, nilai ini disebuat Boolean. Jika kondisi mengembalikan nilai `true` maka kondisi tersebut terpenuhi. 50 | 51 | Sebelumnya sudah kita pelajari tipedata String dan Number, Boolean ada tipedata yang lainnya. 52 | 53 | ```js 54 | if (true) { 55 | // Kondisi ini selalu true 56 | // Kode block didalamnya akan selalu dieksekusi 57 | } 58 | if (false) { 59 | // Kondisi ini selalu false 60 | // Kode block didalamnya tidak akan pernah dieksekusi 61 | } 62 | ``` 63 | 64 | Ekspresi yang mengembalikan nilai Boolean dapat dilakukan dengan operator berikut. 65 | 66 | |Operator|Kegunaan| 67 | |---------|----| 68 | |`===`|Nilainya sama| 69 | |`!==`|Nilainya tidak sama| 70 | |`<`|Kurang dari| 71 | |`<=`|Kurang dari sama dengan| 72 | |`>`|Lebih dari| 73 | |`>=`|Lebih dari sama dengan| 74 | 75 | Sekarang coba untuk mengubah kode diatas menjadi seperti ini. 76 | ```js 77 | const number = Number(prompt("Masukan sebuah angka:")); 78 | if (number >= 0) { 79 | console.log(`${number} adalah positif atau nol`); 80 | } 81 | ``` 82 | 83 | ## Kondisi alternatif 84 | 85 | ### Statement `else` 86 | 87 | Tambahkan kode diatas dengan statement `else` 88 | 89 | ```js 90 | const number = Number(prompt("Masukan sebuah angka:")); 91 | if (number > 0) { 92 | console.log(`${number} adalah positif atau nol`); 93 | } else { 94 | console.log(`${number} adalah negatif atau nol`); 95 | } 96 | ``` 97 | 98 | ### Kondisi yang bersarang 99 | 100 | ```js 101 | const number = Number(prompt("Masukan sebuah angka:")); 102 | if (number > 0) { 103 | console.log(`${number} adalah positif`); 104 | } else { 105 | // number <= 0 106 | if (number < 0) { 107 | console.log(`${number} adalah negatif`); 108 | } else { 109 | // number === 0 110 | console.log(`${number} adalah nol`); 111 | } 112 | } 113 | ``` 114 | 115 | Kondisi bersarang diatas dapat digambarkan berupa flow diagram seperti dibawah. 116 | 117 | ![Kondisi bersarang](images/kondisi-bersarang.png) 118 | 119 | ## Menambahkan Logika tambahan 120 | 121 | ### Operator "And" 122 | 123 | ```js 124 | if ((number >= 0) && (number <= 100)) { 125 | console.log(`${number} diantara 0 dan 100`); 126 | } 127 | ``` 128 | 129 | ### Operator "Or" 130 | 131 | ```js 132 | if ((number < 0) || (number > 100)) { 133 | console.log(`${number} tidak diantara 0 dan 100`); 134 | } 135 | ``` 136 | 137 | Dengan operator `||` salah satu nilai bernilai `true`, maka hasilnya akan `true` 138 | 139 | ```js 140 | console.log(true || true); // true 141 | console.log(true || false); // true 142 | console.log(false || true); // true 143 | console.log(false || false); // false 144 | ``` 145 | 146 | ### Operator "Not" 147 | 148 | ```js 149 | if (!(number > 100)) { 150 | console.log(`${number} kurang dari atau sama dengan 100`); 151 | } 152 | ``` 153 | 154 | Tabel kebenaran dari operator `!`. 155 | 156 | ```js 157 | console.log(!true); // false 158 | console.log(!false); // true 159 | ``` 160 | 161 | ## Kondisi yang beragam 162 | 163 | Berikut contoh kode seseorang yang menentukan pakaian yang digunakan berdasarkan cuaca hari ini. 164 | 165 | ```js 166 | const weather = prompt("Bagaimanakah cuaca hari ini ?"); 167 | if (weather === "cerah") { 168 | console.log("T-shirt!"); 169 | } else if (weather === "berangin") { 170 | console.log("Pakai jaket!"); 171 | } else if (weather === "hujan") { 172 | console.log("Bawa payung!"); 173 | } else { 174 | console.log("Cuaca tidak valid"); 175 | } 176 | ``` 177 | 178 | Alternatif kode diatas adalah menggunakan kata kunci `switch` 179 | 180 | ```js 181 | const weather = prompt("Bagaimanakah cuaca hari ini ?"); 182 | switch (weather) { 183 | case "cerah": 184 | console.log("T-shirt!"); 185 | break; 186 | case "berangin": 187 | console.log("Pakai jaket!"); 188 | break; 189 | case "hujan": 190 | console.log("Bawa payung!"); 191 | break; 192 | default: 193 | console.log("Cuaca tidak valid"); 194 | } 195 | ``` 196 | 197 | ## Waktunya Koding! 198 | 199 | ### Hari esok 200 | 201 | Tulislah sebuah program yang menerima input Hari ini dan mengeluarkan output nama hari esok. 202 | 203 | ### Membandingkan angka 204 | 205 | Tulislah sebuah program yang menerima 2 input angka, dan mengeluarkan output hasil perbandingannya. 206 | 207 | ### Hasil akhir 208 | 209 | Perhatikan kode dibawah. 210 | 211 | ```js 212 | let nb1 = Number(prompt("Masukan nb1:")); 213 | let nb2 = Number(prompt("Masukan nb2:")); 214 | let nb3 = Number(prompt("Masukan nb3:")); 215 | 216 | if (nb1 > nb2) { 217 | nb1 = nb3 * 2; 218 | } else { 219 | nb1++; 220 | if (nb2 > nb3) { 221 | nb1 += nb3 * 3; 222 | } else { 223 | nb1 = 0; 224 | nb3 = nb3 * 2 + nb2; 225 | } 226 | } 227 | console.log(nb1, nb2, nb3); 228 | ``` 229 | 230 | Sebelum menjalankan kode diatas, cobalah untuk menebak nilai dari `nb1`, `nb2` dan `nb3` tergantung dari nilai awalnya. 231 | 232 | |Nilai awal|Nilai akhir `nb1`|Nilai akhir `nb2`|Nilai akhir `nb3`| 233 | |---------------------|------------------|-----------------|-----------------| 234 | |`nb1=nb2=nb3=4` | | | | 235 | |`nb1=4,nb2=3,nb3=2` | | | | 236 | |`nb1=2,nb2=4,nb3=0` | | | | 237 | 238 | ### Banyak hari dalam 1 bulan 239 | 240 | Tulislah sebuah program yang menerima masukan berupa angka (1-12), kemudian menampilkan banyak hari dalam bulan tersebut. Masukan hasus divalidasi. 241 | 242 | -------------------------------------------------------------------------------- /manuscript/chapter09.md: -------------------------------------------------------------------------------- 1 | # Mengenali Pemrograman Berorientasi Obyek 2 | 3 | Beberapa bab sebelumnya Anda telah belajar bagaimana membuat object di Javascript. Sekarang saatnya mengenalinya dengan lebih baik. 4 | 5 | ## Rangkuman 6 | 7 | * **Pemrograman Berorientasi Objek** atau OOP adalah [paradigma pemrograman](https://en.wikipedia.org/wiki/Programming_paradigm) yang menggunakan Objek yang berisikan **data** dan **kelakuan** untuk membuat program. 8 | 9 | * **Class** adalah sebuah abstraksi konsep atau ide dalam pemrograman berorientasi objek. Konsep ini menawarkan syntax yang nyaman dalam merepresentasikan objek. 10 | 11 | * Dalam Javascript class didefinisikan dengan kata kunci `class`. Class hanya dapat berisikan **method**. Method `constructor()` yang dipanggil ketika object dibuat, digunakan untuk melakukan inisialisasi objek, biasanya digunakan untuk mengisikan properi pada objek. Didalam method, kata kunci `this` merepresentasikan **object dimana method itu dipanggil**. 12 | 13 | ```js 14 | class SebuahClass { 15 | constructor(param1, param2, ...) { 16 | this.property1 = param1; 17 | this.property2 = param2; 18 | } 19 | method(/* ... */) { 20 | // ... 21 | } 22 | method2(/* ... */) { 23 | // ... 24 | } 25 | // ... 26 | } 27 | ``` 28 | 29 | * Object dibuat dari class dengan menggunakan operator `new`. Ini akan memanggil construct dalam class atau inisialisasi object yang dibuat. 30 | 31 | ```js 32 | const objekSaya = new SebuahClass(arg1, arg2, ...); 33 | // ... 34 | ``` 35 | 36 | * Model OOP dalam Javacscript berdasarkan **prototype**. Setiap objek javascript memiliki internal property yang menghubungkan ke object lain yang disebut prototype. Prototype digunakan untuk berbagi propery dan menurunkan kelakuan antar objek. 37 | 38 | * Ketika mencoba untuk mengakses property yang tidak ada dalam objek, Javascript mencoba untuk mencari property ini di dalam **rantai prototype** yang ada dalam objek, pertama mencari dalam prototypenya kemudian prototype dari prototype dan seterusnya. 39 | 40 | * Ada beberapa cara untuk membuat dan menghubungkan object melalui prototype. Salah satunya menggunakan method `Object.create()` 41 | 42 | ```js 43 | // Membuat object yang terhubungan dengan sebuahPrototype 44 | const objekSaya = Object.create(sebuahPrototype); 45 | ``` 46 | 47 | * Syntax `class` pada javascript adalah cara yang nyaman untuk membuat hubungan antar objek. Dengan syntax ni OOP pada javacript menjadi mirip seperti OOP bahasa lain seperti C++, Java atau C#. Namun perlu diingat syntax ini hanya **syntactic sugar** yang dibuat diatas Javascript prototype. 48 | 49 | ## Konteks: Game RPG multiplayer 50 | 51 | Sebagai pengingat, berikut adalah kode RPG minimal dari bab sebelumnya. Kode ini membuat objek literal yang bernama `aurora` dengan 4 properti (`name`, `health`, `strength`, `xp`) dan sebuah method `describe()`. 52 | 53 | ```js 54 | const aurora = { 55 | name: "Aurora", 56 | health: 150, 57 | strength: 25, 58 | xp: 0, 59 | 60 | // Mengembalikan deskripsi karakter 61 | describe() { 62 | return `${this.name} memiliki ${this.health} health point, kekuatan ${this.strength} dan pengalaman ${this.xp}`; 63 | } 64 | } 65 | 66 | // Aurora terkena serangan panah 67 | aurora.health -= 20; 68 | 69 | // Aurora mendapat kekuatan dari kalung 70 | aurora.strength += 10; 71 | 72 | // Aurora belajar keahlian baru 73 | aurora.xp += 15; 74 | 75 | console.log(aurora.describe()); 76 | ``` 77 | 78 | Untuk membuat permainan menjadi lebih menarik kita akan menambah sebuah karakter. Muncullah karakter Glacius, pengikut dari Aurora. 79 | 80 | ```js 81 | const glacius = { 82 | name: "Glacius", 83 | health: 130, 84 | strength: 30, 85 | xp: 0, 86 | 87 | // Mengembalikan deskripsi karakter 88 | describe() { 89 | return `${this.name} memiliki ${this.health} health point, kekuatan ${this.strength} dan pengalaman ${this.xp}`; 90 | } 91 | }; 92 | ``` 93 | 94 | Kedua karakter tersebut memiliki kesamaan. Properti yang digunakan sama hanya nilainya saja yang berbeda. 95 | 96 | Anda harus mengetahui bahwa duplikasi kode lebih baik untuk dihindari. Jadi kita harus mencari cara agar kedua objek tersebut bisa saling berbagi properti yang sama. 97 | 98 | ## Class di Javascript 99 | 100 | Sebagian besar bahasa pemrograman yang mendukung orientasi objek menggunakan class sebagai **abstraksi** yang akan dimanipulasi oleh program. Class digunakan untuk membuat objek dan merepresentasikan konsep. Hal ini menawarkan syntax yang nyaman ketika memberikan **data** dan **kelakuan** pada objek tersebut. 101 | 102 | Bukan pengecualian untuk Javascript yang mana javascript memberikan dukungan pemrograman menggunakan class (Namun dengan sedikit keanehan, akan dijelaskan nanti). 103 | 104 | ### Membuat Class 105 | 106 | Contoh kode RPG diatas berurusan dengan karakter, jadi mari membuat sebuah class `Character` yang akan digunakan untuk menekspresikan apa itu sebuah karakter. 107 | 108 | ```js 109 | class Character { 110 | constructor(name, health, strength) { 111 | this.name = name; 112 | this.health = health; 113 | this.strength = strength; 114 | } 115 | 116 | // Mengembalikan deskripsi karakter 117 | describe() { 118 | return `${this.name} memiliki ${this.health} health point, kekuatan ${this.strength} dan pengalaman ${this.xp}`; 119 | } 120 | } 121 | ``` 122 | 123 | Contoh ini mendemonstrasikan beberapa fakta tentang class di javascript: 124 | 125 | * Class dibuat dengan kata kunci `class` diikuti dengan nama class (biasanya diawali dengan huruf besar). 126 | * Class hanya bisa berisikan **method**, bukan properti data. 127 | * Seperti object literal, kata kunci `this` merujuk pada objek dimana method tersebut dipanggil 128 | * Method khusus `constructor()` dapat ditambahkan ke definisi sebuah class. Akan dipanggil ketika objek tersebut dibuat dan biasanya digunakan untuk memberikan properti data. 129 | 130 | ### Menggunakan Class 131 | 132 | Setelah class didefinisikan, Anda dapat membuat objek. Perhatikan program berikut ini. 133 | 134 | ```js 135 | const auroroa = new Character("Aurora", 150, 25); 136 | const glacious = new Character("Glacius", 130, 30); 137 | 138 | // Aurora diserang dengan panah 139 | aurora.health -= 20; 140 | 141 | // Aurora mendapatkan kekuatan dari kalung 142 | aurora.strength += 10; 143 | 144 | // Aurora mempelajari keahlian baru 145 | aurora.xp += 15; 146 | 147 | console.log(aurora.describe()): 148 | console.log(glacius.describe()): 149 | ``` 150 | 151 | ![Execution result](images/chapter09-01.png) 152 | 153 | Objek `aurora` dan `glacius` dibuat sebagai character dengan operator `new`. Pernyataan ini akan memanggil constructor dari class dan menginisialisasi sebuah objek. Setelah objek dibuat, objek memiliki akses untuk property yang ada didalamnya. 154 | 155 | Berikut adalah syntax pembuatan objek dengan class. 156 | 157 | ```js 158 | class MyClass { 159 | constructor(param1, param2, ...) { 160 | this.property1 = param1; 161 | this.property2 = param2; 162 | // ... 163 | } 164 | 165 | method(/* ... */) { 166 | // ... 167 | } 168 | 169 | method2(/* ... */) { 170 | // ... 171 | } 172 | 173 | // ... 174 | } 175 | 176 | const myObject = new MyClass(arg1, arg2, ...); 177 | myObject.method1(/* ... */); 178 | // ... 179 | ``` 180 | -------------------------------------------------------------------------------- /manuscript/intro02.md: -------------------------------------------------------------------------------- 1 | # Selamat datang di dunia Pemrograman 2 | 3 | ## TL;DR 4 | 5 | * **Komputer** adalah mesin yang bertugas menjalankan perintah-perintah yang diinstruksikan kepadanya dengan cepat. 6 | 7 | * **Program** adalah senarai dari perintah yang diberikan ke sebuah komputer. Perintah ini berbentuk perintah teks. Semua perintah yang diinstruksikan akan membentuk **kode sumber** dari sebuah program. 8 | 9 | * The **programmer**'s task is to create programs. To accomplish this goal, he can use different programming languages. 10 | 11 | * Before writing code, one must think ahead and decompose the problem to be addressed in a series of elementary operations forming an **algorithm**. 12 | 13 | ## What's a program? 14 | 15 | ![Evolution (?)](images/intro02-01.jpg) 16 | 17 | Since their invention in the 1950s, **computers** have revolutionized our daily lives. Calculating a route from a website or a GPS, booking a train or plane ticket, or seeing and chatting with friends on the other side of the world: all these actions are possible thanks to computers. 18 | 19 | I> Let's take the term "computer" in its broadest sense, meaning a machine that can perform arithmetic and logical operations. It could mean either a desktop or laptop computer (PC, Mac), a computing server, or a mobile device like a tablet or smartphone. 20 | 21 | Nonetheless, a computer can only perform a series of simple operations when instructed to do so. They normally have no ability to learn, judge, or improvise. They simply do what they're told to do! Their value comes from how they can quickly handle and process huge amounts of information. 22 | 23 | A computer often requires human intervention. That's where programmers and developers come in! They write programs that result in instructions to a computer. 24 | 25 | A **computer program** (also called an application or software) is usually comprised of one or more text files containing commands in the form of code. This is why developers are also called coders. 26 | 27 | A **programming language** is a way to give orders to a computer. It's a bit like a human language! Each programming language has vocabulary (keywords that each play a specific role) and grammar (rules defining how to write programs in that language). 28 | 29 | ## How do you create programs? 30 | 31 | ### Closest to the hardware: assembly language 32 | 33 | The only programming language directly understandable by a computer is machine language. A more human-readable representation of machine language is **assembly language**. It is a set of very primitive operations linked to a specific family of processors (the computer's "brain") and manipulating its memory. 34 | 35 | Here's an example of a basic program written in assembly language. It displays `"Hello"` to the user. 36 | 37 | ```assembly 38 | str: 39 | .ascii "Hello\n" 40 | .global _start 41 | 42 | _start: 43 | movl $4, %eax 44 | movl $1, %ebx 45 | movl $str, %ecx 46 | movl $8, %edx 47 | int $0x80 48 | movl $1, %eax 49 | movl $0, %ebx 50 | int $0x80 51 | ``` 52 | 53 | Pretty scary, isn't it? Fortunately, other programming languages are much simpler and convenient to use than assembly language. 54 | 55 | ### The family of programming languages 56 | 57 | There are a large number of programming languages, each adapted to different uses and with its own syntax. However, there are similarities between the most popular programming languages. For example, here's a simple program written in Python: 58 | 59 | ```python 60 | print("Hello") 61 | ``` 62 | 63 | You can also write the same thing in PHP: 64 | 65 | ```php 66 | 69 | ``` 70 | 71 | Or even C#! 72 | 73 | ```csharp 74 | class Program { 75 | static void Main(string[] args) { 76 | Console.WriteLine("Hello"); 77 | } 78 | } 79 | ``` 80 | 81 | What about Java? 82 | 83 | ```java 84 | public class Program { 85 | public static void main(String[] args) { 86 | System.out.println("Hello"); 87 | } 88 | } 89 | ``` 90 | 91 | All these programs display `"Hello"` through a different set of instructions. 92 | 93 | ### Program execution 94 | 95 | The fact of asking a computer to process the orders contained in a program is called **execution**. Regardless of which programming language is used, a program must be translated into assembly code in order to be executed. The translation process depends on the language used. 96 | 97 | With some languages, the translation into assembly code happens line by line in real time. In this case, the program is executed like a human reads a book, starting at the top and working down line-by-line. These languages are said to be **interpreted**. Python and PHP are examples of interpreted languages. 98 | 99 | Another possibility is to read and check for errors throughout the whole source code before execution. If no errors are detected, an executable targeting one specific hardware platform is generated. The intermediate step is called **compilation**, and the programming languages which use it are said to be **compiled**. 100 | 101 | Lastly, some languages are pseudo-compiled in order to be executed on different hardware platforms. This is the case for the Java language and also for those of the Microsoft .NET family (VB.NET, C#, etc). 102 | 103 | ## Learn to code 104 | 105 | ### Introduction to algorithms 106 | 107 | Except in very simple cases, you don't create programs by writing source code directly. You'll first need to think about the instructions you'll want to convey. 108 | 109 | Take a concrete example from everyday life: I want to make a burrito. What are the steps that will enable me to achieve my goal? 110 | 111 | ```text 112 | Begin 113 | Get out the rice cooker 114 | Fill it with rice 115 | Fill it with water 116 | Cook the rice 117 | Chop the vegetables 118 | Stir-fry the vegetables 119 | Taste-test the vegetables 120 | If the veggies are good 121 | Remove them from the stove 122 | If the veggies aren't good 123 | Add more pepper and spices 124 | If the veggies aren't cooked enough 125 | Keep stir-frying the veggies 126 | Heat the tortilla 127 | Add rice to tortilla 128 | Add vegetables to tortilla 129 | Roll tortilla 130 | End 131 | ``` 132 | 133 | ![Mmmmmm!](images/intro02-02.jpg) 134 | 135 | You reach your goal by combining a set of actions in a specific order. There are different types of actions: 136 | 137 | * Simple actions ("get out the rice cooker") 138 | * Conditional actions ("if the veggies are good") 139 | * Actions that are repeated ("keep stir-frying the veggies") 140 | 141 | We used a simple writing style, not a specific programming language. In fact, we just wrote what is called an **algorithm**. We can define an algorithm as an ordered sequence of operations for solving a given problem. An algorithm breaks down a complex problem into a series of simple operations. 142 | 143 | ### The role of the programmer 144 | 145 | Writing programs that can reliably perform expected tasks is a programmer's goal. A beginner can learn to quickly create simple programs. Things get more complicated when the program evolves and becomes more complex. It takes experience and a lot of practice before you feel like you'll control this complexity! Once you have the foundation, the only limit is your imagination! 146 | 147 | > "The computer programmer is a creator of universes for which he alone is the lawgiver. No playwright, no stage director, no emperor, however powerful, has ever exercised such absolute authority to arrange a stage or field of battle and to command such unswervingly dutiful actors or troops." (Joseph Weizenbaum) 148 | -------------------------------------------------------------------------------- /manuscript/chapter08.md: -------------------------------------------------------------------------------- 1 | # Bekerja dengan String 2 | 3 | ## Rangkuman 4 | 5 | * Walaupun string adalah tipe primitif di Javascript, tapi ada beberapa **properti** dan **method** yang bisa diterapkan. 6 | 7 | * Properti `length` mengembalikan banyak karakter dalam string tersebut. 8 | 9 | * String di Javascript bersifat **[immutable]( https://en.wikipedia.org/wiki/Immutable_object )**: ketika dibuat, nilai string tidak akan berubah. Method dalam object string tidak akan pernah mengubah nilai awalnya namun akan selalu mengembalikan nilai baru. 10 | 11 | * Method `toLowerCase()` dan `toUpperCase()` mengembalikan nilai baru string berupa huruf kecil dan huruf besar. 12 | 13 | * String dapat dilihat sebagai array yang terdiri dari karakter. Dengan indeks pertama adalah 0. 14 | 15 | * Anda bisa melakukan iterasi terhadap string dengan `for` atau `for-of`. 16 | 17 | * Menggunakan method `Array.from()` Anda bisa mengubah string menjadi array yang terdiri atas karakter baru setelahnya anda dapat menggunakan `forEach()` untuk mengiterasikannya. 18 | 19 | * Melakukan pencarian didalam string dapat menggunakan method `indexOf()`, `startsWith()` dan `endsWith()`. 20 | 21 | * Method `split()` dapat digunakan untuk memecah string berdasarkan sebuah karakter pemisah. 22 | 23 | ## Pengenalan String 24 | 25 | Mari ulas lagi apa yang telah dipelajari tentang String: 26 | 27 | * Nilai string merepresentasikan teks. 28 | 29 | * Di javascript, string didefinisikan dalam teks yang diapit oleh kutip satu (`'Saya string'`) atau kutip dua (`"Saya string"`). 30 | 31 | * Karakter khusus dalam string diawali dengan (`\`) diikuti dengan karakter khusus tersebut. Contoh `\n` adalah karakter khusus untuk menambahkan baris baru. 32 | 33 | * Operator tambah `+` digunakan untuk menggabungkan dua atau lebih string. 34 | 35 | ## Mendapatkan panjang string 36 | 37 | Untuk mendapatkan panjang sebuah string, tinggal menambahkan `.length`. Panjang string akan dikembalikan dalam bentuk bilangan bulat. 38 | 39 | ```js 40 | console.log("ABC".length); // 3 41 | const str = "Saya string"; 42 | const len = str.length; 43 | console.log(len); // 11 44 | ``` 45 | 46 | Walaupun string termasuk dalam tipedata primitif, beberapa properti dan method dapat diaplikasikan seperti halnya object, salah satunya adalah properti `.length`. 47 | 48 | ## Mengubah case string 49 | 50 | Untuk mengubah string menjadi huruf kecil dapat digunakan method `toLowerCase()`, sedangkan `toUpperCase()` digunakan untuk mengubah jadi huruf besar. 51 | 52 | ```js 53 | const kata = "Bora-bora"; 54 | 55 | const kataDalamHurufKecil = kata.toLowerCase(); 56 | console.log(kataDalamHurufKecil); // "bora-bora" 57 | 58 | const kataDalamHurufBesar = kata.toUpperCase(); 59 | console.log(kataDalamHurufBesar); // "BORA-BORA" 60 | ``` 61 | 62 | `toLowerCase()` dan `toUpperCase()` adalah method string. Seperti setiap method keduanya tidak mengubah nilai awal dan akan mengembalikan nilai yang baru. 63 | 64 | T> Penting untuk diketahui bahwa ketika sebuah string dibuat nilainya tidak akan berubah. String dalam javascript adalah **immutable**. 65 | 66 | ## Membandingkan nilai string 67 | 68 | Untuk membandingkan string dapat digunakan operator `===`. Operasi pembandingan akan mengembalikan nilai boolean `true` jika string sama dan `false` jika tidak sama. 69 | 70 | ```js 71 | const kata = "koala"; 72 | console.log(kata === "koala"); // true 73 | console.log(kata === "jerapah"); // false 74 | ``` 75 | 76 | W> Pembandingan string adalah case sensitive. Artinya nilai huruf kecil dan huruf besar dianggap berbeda. 77 | 78 | ```js 79 | console.log("Qwerty" === "qwerty"); // false 80 | console.log("Qwerty".toLowerCase() === "qwerty"); // true 81 | ``` 82 | 83 | ## String adalah kumpulan beberapa karakter 84 | 85 | ### Mengidentifikasi sebuah karakter 86 | 87 | Anda dapat membayangkan string sebagai sebuah array dari karakter. Setiap karakter dapat diakses melalui index, seperti halnya array, dengan ketentuan sebagai berikut. 88 | 89 | * Index yang pertama adalah 0, bukan 1. 90 | * Index karakter yang terakhir adalah panjang string - 1; 91 | 92 | ## Mengakses karakter dalam string 93 | 94 | Untuk mengakses karakter dalam string dapat digunakan tanda kurung siku `[]` dengan index yang ditempatkan diantara keduanya. 95 | 96 | W> Jika mencoba mengakses karakter yang diluar panjang string maka nilai `undefined` yang akan didapatkan. 97 | 98 | ```js 99 | const olahraga = "bola basket"; 100 | console.log(olahraga[0]); // "o" 101 | console.log(olahraga[6]); // "a" 102 | console.log(olahraga[20]); // undefined: karakter terakhir berada pada index 10 103 | ``` 104 | 105 | ## Perulangan pada string 106 | 107 | Bagaimana jika Anda ingin mengakses semua karakter dalam string satu per satu ? Anda dapat mengakses masing-masing karakter seperti cara dibawah. 108 | 109 | ```js 110 | const nama = "Sarah"; 111 | console.log(name[0]); // "S" 112 | console.log(name[1]); // "a" 113 | console.log(name[2]); // "r" 114 | console.log(name[3]); // "a" 115 | console.log(name[4]); // "h" 116 | ``` 117 | 118 | Namun cara diatas kurang praktis. Anda perlu solusi yang lebih baik dengan melakukan perulangan dalam mengakses masing-masing karakter. Konsep perulangan dapat kita terapkan untuk masalah ini. 119 | 120 | Anda dapat menggunakan perulangan untuk mengakses masing-masing karakter dalam string. `for` adalah pilihan yang lebih baik dari `while`, karena kita sudah mengetahui berapa banyak karakter dalam string. 121 | 122 | ```js 123 | for (let i = 0; i < sebuahString.length; i++) { 124 | // Gunakan sebuahString[i] untuk mengakses karakter dalam string satu per satu 125 | } 126 | ``` 127 | 128 | Dalam perulangan diatas `i` adalah indikator yang menunjukan index karakter yang sedang diakses. Ketika nilai `i` bernilai sama dengan panjang string dikurangi 1 maka perulangan akan terhenti. 129 | 130 | Kode dibawah akan menghasilkan output yang sama dengan contoh sebelumnya. 131 | 132 | ```js 133 | const nama = "Sarah"; 134 | for (let i = 0; i < nama.length; i++) { 135 | console.log(nama[i]); 136 | } 137 | ``` 138 | 139 | ## Mengubah string menjadi array 140 | 141 | Di javascript method `Array.from()` dapat digunakan untuk mengubah string menjadi array. Array tersebut kemudian dapat diproses lagi menggunakan method `forEach()`. Seperti contoh sebelumnya kode dibawah menampilkan karakter dari sebuah string satu per satu. 142 | 143 | ```js 144 | const nama = "Sarah"; 145 | const namaArray = Array.from(nama); 146 | namaArray.forEach(huruf => { 147 | console.log(huruf); 148 | }); 149 | ``` 150 | 151 | ## Pencarian dalam string 152 | 153 | Melakukan pencarian dalam sebuah string adalah hal yang lumrah. 154 | 155 | Method `indexOf()` memerlukan sebuah parameter yang berisikan nilai yang dicari. Jika nilai tersebut ditemukan akan mengembalikan index pertama dimana nilai tersebut ditemukan, sebaliknya akan mengembalikan nilai -1 jika tidak ditemukan. 156 | 157 | ```js 158 | const lagu = "Hongky Tonk Women"; 159 | console.log(song.indexOf("onk")); // 1 160 | console.log(song.indexOf("Onk")); // -1 karena tidak ditemukan 161 | ``` 162 | 163 | Saat mencari nilai yang ada di awal atau akhir string dapat digunakan method `startsWith()` dan `endsWith()`. Kedua method tersebut mengembalikan nilai `true` atau `false`, tergantung dari nilai tersebut ditemukan atau tidak. Perlu diperhatikan method ini case sensitive. 164 | 165 | ```js 166 | const song = "Honky Tonk Women"; 167 | 168 | console.log(song.startsWith("Honk")); // true 169 | console.log(song.startsWith("honk")); // false 170 | console.log(song.startsWith("Tonk")); // false 171 | 172 | console.log(song.endsWith("men")); // true 173 | console.log(song.endsWith("Men")); // false 174 | console.log(song.endsWith("Tonk")); // false 175 | ``` 176 | 177 | ## Memecah string 178 | 179 | Kadang string terdiri dari beberapa bagian yangn dipisahkan oleh sebuah karakter tertentu. Pada kasus ini untuk mendapatkan masing-masing bagian dapat menggunakan method `split()`. Method ini mengambil parameter berupa karakter pemisah dan mengembalikan array yang terdiiri dari bagian-bagiannya. 180 | 181 | ```js 182 | const semuaBulan = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"; 183 | const bulan = semuaBulan.split(","); 184 | console.log(bulan[0]); // "Jan" 185 | console.log(bulan[11]); // "Dec" 186 | ``` 187 | 188 | ## Waktunya Koding 189 | 190 | ### Info kata 191 | 192 | Tulislah sebuah program yang meminta input kata dan menunjukan panjangnya, dalam huruf kecil dan besar. 193 | 194 | ### Palindrome 195 | 196 | Tingkatkat program sebelumnya untuk melakukan pengecekan apakah kata tersebut palindrome atau bukan. Palindrome adalah kata yang jika dibalik akan tetap sama. Abaikan tanda, huruf kecil/besar dan spasi. 197 | 198 | > Sebagai contoh `"radar"` adalah palindrome begitu juga dengan `"Radar"` 199 | -------------------------------------------------------------------------------- /manuscript/chapter07.md: -------------------------------------------------------------------------------- 1 | # Menyimpan data dalam array 2 | 3 | Pada bab ini Anda akan diperkenalkan tentang [arrays]( https://en.wikipedia.org/wiki/Array_data_type ), sebuah tipe data dalam variable yang digunakan oleh program komputer untuk menyimpan data. 4 | 5 | ## TL;DR 6 | 7 | * Sebuah array merepresentasikan daftar element. Sebuah array JavaScript adalah object yang memiliki property yang spesial, seperti `length` untuk mengakses ukurannya (jumlah elemen). 8 | 9 | * Anda dapat mengandaikan array adalah sebuah kardus, di dalam kardus berisi nilai yang spesifik dan berasosiasi dengan angka yang disebut dengan **index**. Elemen pertama dari sebuah array berupa index dengan angka 0 - bukan 1. 10 | 11 | * Anda dapat mengakses beberapa elemen melalui index dengan tanda **kurung kotak** `[]`. 12 | 13 | * Untuk melakukan perulangan pada array (mencari elemen per elemen), Anda dapat menggunakan perulangan `for`, method `forEach()` atau perulangan `for-of`. 14 | 15 | ```js 16 | for (let i = 0; i < myArray.length; i++) { 17 | // Gunakan myArray[i] untuk mengakses setiap elemen dari array satu per satu 18 | } 19 | 20 | myArray.forEach(myElement => { 21 | // Gunakan myElement untuk mengakses elemen dari array satu per satu 22 | }); 23 | 24 | for (const myElement of myArray) { 25 | // Gunakan myElement untuk mengakses elemen dari array satu per satu 26 | } 27 | ``` 28 | 29 | * Method `push()` untuk menambahkan sebuah elemen pada akhir sebuah array. Method `unshift()` menambahkan elemen di awal sebuah array. 30 | 31 | * Method `pop()` dan `splice()` digunakan untuk menghapus elemen dari array. 32 | 33 | ## Pengenalan array 34 | 35 | Bayangkan Anda ingin membuat sebuah daftar yang berisi semua film yang telah anda lihat di tahun ini. 36 | 37 | Satu solusi akan digunakan untuk menambahkan beberapa variabel: 38 | 39 | ```js 40 | const movie1 = "The Wolf of Wall Street"; 41 | const movie2 = "Zootopia"; 42 | const movie3 = "Babysitting"; 43 | // ... 44 | ``` 45 | 46 | Jika Anda seorang penggemar film, Anda mungkin akan menemukan diri anda menggunakan banyak variable di program Anda. Bagian terburuk adalah variabel-variabel ini benar-benar independen satu sama lain. 47 | 48 | Kemungkinan lain adalah menambahkan daftar film ke dalam object. 49 | 50 | ```js 51 | const movies = { 52 | movie1: "The Wolf of Wall Street", 53 | movie2: "Zootopia", 54 | movie3: "Babysitting", 55 | // ... 56 | }; 57 | ``` 58 | 59 | Kali ini, data terpusat dalam sebuah object `movies`. Nama dari property nya (`movie1`, `movie2`, `movie3`...), bagaimanapun, tidak perlu dan berulang - ulang. 60 | 61 | Anda membutuhkan sebuah solusi untuk menyimpan banyak hal bersamaan tanpa memberi nama secara manual! 62 | 63 | Untungnya, ada sebuah solusi: menggunakan sebuah array. Sebuah **array** adalah tipe data untuk menyimpan daftar elemen. 64 | 65 | ## Manipulasi array di JavaScript 66 | 67 | Di JavaScript, sebuah array adalah object yang memiliki property yang khusus. 68 | 69 | ### Membuat array 70 | 71 | Berikut adalah cara membuat daftar film kita dalam bentuk array. 72 | 73 | ```js 74 | const movies = ["The Wolf of Wall Street", "Zootopia", "Babysitting"]; 75 | ``` 76 | 77 | Sebuah array dibuat menggunakan sepasang kurung siku `[]`. Semua dengan tanda kurung siku membuat array. 78 | 79 | Anda dapat menyimpan beberapa tipe yang berbeda dengan sebuah array, termasuk string, number, boolean bahkan object. 80 | 81 | ```js 82 | const elements = ["Hello", 7, { message: "Hi mom" }, true]; 83 | ``` 84 | 85 | > Sejak array mungkin memiliki banyak elemen, sebaiknya berikan nama array yang jamak (contoh, `movies`). 86 | 87 | ### Memperoleh ukuruan array 88 | 89 | Jumlah elemen yang disimpan di dalam array disebut dengan **size**. Berikut adalah cara mengaksesnya. 90 | 91 | ```js 92 | const movies = ["The Wolf of Wall Street", "Zootopia", "Babysitting"]; 93 | console.log(movies.length); // 3 94 | ``` 95 | 96 | Anda mengakses ukuran pada sebuah array melalui property `length`, menggunakan notasi dot. 97 | 98 | Tentunya, property `length` mengembalikan nilai 0 jika array tersebut kosong. 99 | 100 | ```js 101 | const emptyArray = []; // Membuat array kosong 102 | console.log(emptyArray.length); // 0 103 | ``` 104 | 105 | ### Mengakses sebuah elemen pada array 106 | 107 | Setiap hal pada array diidentifikasikan berdasarkan angka yang disebut dengan **index** - sebuah pointer integer yang mengidentifikasi sebuah elemen pada array. 108 | The index of the last array element would be the array's size minus 1. 109 | Anda dapat mengandaikan array adalah sebuah kardus, di dalam kardus berisi nilai yang spesifik dan berasosiasi dengan index. Trik: Elemen pertama dari sebuah array berupa index dengan angka 0 - bukan 1, elemen kedua adalah index dengan angka 1, dan seterusnya. 110 | Index dari elemen terakhir array akan menjadi ukuran array dikurangi 1. 111 | 112 | ![Representasi array movies](images/chapter07-01.png) 113 | 114 | Anda dapat mengakses sebuah elemen tertentu dengan memberikan index nya menggunakan **kurung siku** `[]`: 115 | 116 | ```js 117 | const movies = ["The Wolf of Wall Street", "Zootopia", "Babysitting"]; 118 | console.log(movies[0]); // "The Wolf of Wall Street" 119 | console.log(movies[1]); // "Zootopia" 120 | console.log(movies[2]); // "Babysitting" 121 | ``` 122 | 123 | Menggunakan index yang invalid untuk mengakses elemen array JavaScript akan mengembalikan nilai `undefined`. 124 | 125 | ```js 126 | const movies = ["The Wolf of Wall Street", "Zootopia", "Babysitting"]; 127 | console.log(movies[3]); // undefined: elemen terakhir adalah pada index 2 128 | ``` 129 | 130 | ## Perulangan melalui array 131 | 132 | Terdapat beberapa cara untuk mencari elemen sebuah array. 133 | 134 | Pertama adalah menggunakan perulangan for seperti yang disampaikan sebelumnya. 135 | 136 | ```js 137 | const movies = ["The Wolf of Wall Street", "Zootopia", "Babysitting"]; 138 | for (let i = 0; i < movies.length; i++) { 139 | console.log(movies[i]); 140 | } 141 | ``` 142 | 143 | Perulangan `for` menjalankan setiap elemen pada array dimulai dari index 0 sampai dengan ukuran array dikurangi 1, yang mana itu adalah elemen terakhir. 144 | 145 | Cara lain adalah menggunakan method `forEach()` method pada array. Ia mengambil sebuah parameter **function** yang akan diterapkan di setiap elemen array. 146 | 147 | ```js 148 | myArray.forEach(myElement => { 149 | // Gunakan myElement untuk mengakses elemen dari array satu per satu 150 | }); 151 | ``` 152 | 153 | Berikut adalah contoh sebelumnya, ditulis ulang dengan method ini dan sebuah fungsi fat arrow `=>`. 154 | 155 | ```js 156 | const movies = ["The Wolf of Wall Street", "Zootopia", "Babysitting"]; 157 | movies.forEach(movie => { 158 | console.log(movie); 159 | }); 160 | ``` 161 | 162 | Selama eksekusi, setiap elemen array dilewati sebagai parameter (diberi nama `movie` pada contoh ini) pada fungsi yang berasosiasi pada `forEach()`. 163 | 164 | Terakhir, Anda dapat penggunakan perulangan `for-of` loop, sebuah jenis khusus untuk perulangan object [iterable objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable) seperti array. Ini adalah sintaksnya. 165 | 166 | ```js 167 | for (const myElement of myArray) { 168 | // Gunakan myElement untuk mengakses elemen dari array satu per satu 169 | } 170 | ``` 171 | 172 | Perhatikan contoh yang telah ditulis ulang dengan perulangan `for-of`. 173 | 174 | ```js 175 | const movies = ["The Wolf of Wall Street", "Zootopia", "Babysitting"]; 176 | for (const movie of movies) { 177 | console.log(movie); 178 | } 179 | ``` 180 | 181 | ## Mengubah isi sebuah array 182 | 183 | ### Menambahkan elemen pada array 184 | 185 | Jangan berbohong pada saya: Anda baru saha menonton Ghostbusters namun di lain waktu. Mari tambahkan ke dalam daftar movies. Berikut cara Anda melakukannya. 186 | 187 | ```js 188 | const movies = ["The Wolf of Wall Street", "Zootopia", "Babysitting"]; 189 | movies.push("Ghostbusters"); 190 | console.log(movies[3]); // "Ghostbusters" 191 | ``` 192 | 193 | Anda menambahkan sebuah hal baru ke dalam array menggunakan method `push()`. Elemen baru yang akan ditambahkan dilewatkan sebagai parameter ke method. Hal tersebut ditambahkan ke dalam akhir array. 194 | 195 | Untuk menambahkan elemen di awal array, gunakan method `unshift()` daripada `push()`. 196 | 197 | ```js 198 | const movies = ["The Wolf of Wall Street", "Zootopia", "Babysitting"]; 199 | movies.unshift("Pacific Rim"); 200 | console.log(movies[0]); // "Pacific Rim" 201 | ``` 202 | 203 | ### Menghapus elemen pada array 204 | 205 | Anda dapat menghapus elemen akhir pada sebuah array menggunakan method `pop()`. 206 | 207 | ```js 208 | const movies = ["The Wolf of Wall Street", "Zootopia", "Babysitting"]; 209 | movies.pop(); // Menghapus elemen terakhir array 210 | console.log(movies.length); // 2 211 | console.log(movies[2]); // undefined 212 | ``` 213 | 214 | Sebagai alternatif, Anda dapat menggunakan method `splice()` dengan dua parameter: pertama adalah index darimana mulai menghapus, kedua adalah jumlah elemen yang dihapus. 215 | 216 | ```js 217 | const movies = ["The Wolf of Wall Street", "Zootopia", "Babysitting"]; 218 | movies.splice(0, 1); // Menghapus 1 elemen dimulai pada index 0 219 | console.log(movies.length); // 2 220 | console.log(movies[0]); // "Zootopia" 221 | console.log(movies[1]); // "Babysitting" 222 | ``` 223 | 224 | ## Waktunya Koding! 225 | 226 | Buatlah semua program ini dengan mode umum: Semua keluaran program sebaiknya mencerminkan pembaharuan apa pun dalam array. 227 | 228 | ### Musketeers 229 | 230 | Buatlah sebuah program yang: 231 | 232 | * Membuat array bernama `musketeers` berisi nilai "Athos", "Porthos" and "Aramis". 233 | * Menampilkan setiap elemen array menggunakan perulangan `for`. 234 | * Menambahkan nilai "D'Artagnan" ke dalam array. 235 | * Menampilkan setiap elemen array menggunakan method `forEach()`. 236 | * Menghapus nilai Aramis. 237 | * Menampilkan setiap elemen array menggunakan perulangan `for-of`. 238 | 239 | ### Menjumlahkan nilai 240 | 241 | Tulis sebuah program berdasarkan array di bawah, kemudian tampilkan total jumlah dari nilai tersebut (hasilnya adalah 42). 242 | 243 | ```js 244 | const values = [3, 11, 7, 2, 9, 10]; 245 | ``` 246 | 247 | ### Array maksimum 248 | 249 | Tulis sebuah program berdasarkan array di bawah, kemudian tampilkan nilai maksimum dari array tersebut. 250 | 251 | ```js 252 | const values = [3, 11, 7, 2, 9, 10]; 253 | ``` 254 | 255 | ### Daftar kata 256 | 257 | Tulislah sebuah program yang meminta user untuk menginputkan sebuah kata sampai user mengetik kata "stop". Kemudian program tersebut menampilkan setiap kata kecuali kata "stop". -------------------------------------------------------------------------------- /manuscript/chapter02.md: -------------------------------------------------------------------------------- 1 | # Bermain dengan Variabel 2 | 3 | ## Rangkuman 4 | 5 | * **Variabel** adalah media penyimpanan informasi. Setiap **variabel** memiliki nama, nilai dan tipedata. Dalam javascript tipedata tidak perlu dituliskan saat deklarasi variabel, karena Javascript adalah bahasa dengan tipe dinamis. 6 | 7 | * **Variabel** di deklarasi dengan kata kunci `let` diikuti dengan nama variabel. Untuk mendeklarasi konstanta (variabel yang nilai awalnya tidak akan berubah) digunakan kata kunci `const`. 8 | 9 | * Untuk memberi nilai variabel, digunakan tanda sama dengan `=`. Pada tipedata Number operator `+=` dan `++` dapat digunakan untuk menambah value variabel tersebut. 10 | 11 | * **Scope** dari variabel adalah ruang lingkup dimana variabel tersebut dapat diakses. Variabel yang di deklarasi dengan `let` atau `const` adalah block scoped. Code block ditentukan dari kode yang diapit dengan tanda kurawal `{...}` 12 | 13 | ## Variabel 14 | 15 | ### Peran variabel 16 | 17 | Program komputer menyimpan data menggunakan variabel. **Variabel** bisa dibayangkan sebagai sebuah kotak yang kita bisa isi benda didalamnya. 18 | 19 | ### Properti variabel 20 | 21 | **Variabel** memiliki 3 properti utama. 22 | * nama, Nama varibel dapat berisikan huruf kecil atau besar, angka (tidak diawal) dan karakter seperti (`$`) atau underscore (`_`) 23 | * nilai, nilai atau informasi yang disimpan dalam variabel 24 | * tipedata, menentukan peranan dan aksi yang dapat dilakukan ke variabel. 25 | 26 | ### Deklarasi Variabel 27 | 28 | Sebelum Anda dapat menyimpan sebuah informasi di variabel, variabel harus dibuat dulu. Proses membuat variabel disebut dengan deklarasi variabel. Deklarasi variabel berarti komputer akan memesan memori sebagai tempat menampung variabel. Program kemudian dapat membaca dan menulis data ke memori melalui variabel. 29 | 30 | ```js 31 | let a; 32 | console.log(a); 33 | ``` 34 | 35 | Dalam JavaScript, Anda mendeklarasikan variabel dengan kata kunci kelanjutan diikuti oleh nama variabel. Dalam contoh ini, variabel yang dibuat disebut a. 36 | 37 | Dalam versi bahasa sebelumnya, variabel dideklarasikan menggunakan kata kunci var. 38 | 39 | Inilah hasil eksekusi untuk program ini. 40 | 41 | ![](https://github.com/bpesquet/thejsway/raw/master/manuscript/images/chapter02-01.png) 42 | 43 | Perhatikan bahwa hasilnya “undefined”. Ini adalah jenis JavaScript khusus yang menunjukkan tidak ada nilai. Saya menyatakan variabel, menyebutnya, tetapi tidak memberikan nilai! 44 | 45 | Mengisikan nilai ke variabel 46 | 47 | Saat program berjalan, nilai yang disimpan dalam variabel dapat berubah. Untuk memberikan nilai baru ke variabel, gunakan operator = yang disebut operator penugasan. Lihat contoh di bawah ini: 48 | 49 | ```js 50 | let a; 51 | a = 3.14; 52 | console.log(a); 53 | ``` 54 | ![Mengisikan nilai ke variabel](https://github.com/bpesquet/thejsway/raw/master/manuscript/images/chapter02-02.png) 55 | 56 | Kami memodifikasi variabel dengan mengisikan nilai `a` = 3.14 dibaca sebagai "a menerima nilai 3.14". 57 | 58 | Berhati-hatilah agar tidak membingungkan operator penugasan = dengan persamaan matematis! Anda akan segera melihat bagaimana mengekspresikan kesetaraan dalam JavaScript. 59 | 60 | Anda juga dapat menggabungkan mendeklarasikan variabel dan menetapkan nilai dalam satu baris. Ketahuilah bahwa, dalam garis ini, Anda melakukan dua hal yang berbeda sekaligus: 61 | 62 | ```js 63 | let a = 3.14; 64 | console.log(a); 65 | ``` 66 | 67 | ## Mendeklarasikan variabel konstan 68 | 69 | Jika nilai awal variabel tidak akan pernah berubah selama sisa eksekusi program, variabel ini disebut konstanta. Keteguhan ini dapat ditegakkan dengan menggunakan kata kunci const bukannya membiarkan untuk menyatakannya. Dengan demikian, program ini lebih ekspresif dan upaya lebih lanjut untuk memodifikasi variabel dapat dideteksi sebagai kesalahan. 70 | 71 | ```js 72 | const a = 3.14; // Nilai variabel a tidak dapat diubah 73 | a = 6.28; // Tidak bisa! 74 | ``` 75 | 76 | ![](https://github.com/bpesquet/thejsway/raw/master/manuscript/images/chapter02-03.png) 77 | 78 | ## Menambah jumlah variable 79 | 80 | Anda juga dapat meningkatkan nilai angka dengan `+=` dan `++`. Yang terakhir disebut operator kenaikan, karena memungkinkan peningkatan (peningkatan sebesar 1) dari nilai variabel. 81 | 82 | Dalam contoh berikut, baris 2 dan 3 masing-masing meningkatkan nilai variabel `b` sebesar 1. 83 | 84 | ```js 85 | let b = 0; // b bernilai 0 86 | b += 1; // nilai b ditambahkan dengan 1 87 | b++; // b bernilai 2 88 | console.log(b); // 2 89 | ``` 90 | 91 | ## Ruang lingkup variabel (Variable Scope) 92 | 93 | Ruang lingkup variabel adalah bagian dari program di mana variabel terlihat dan dapat digunakan. Variabel yang dideklarasikan dengan let atau const adalah blok-cakupan: visibilitas mereka terbatas pada blok di mana mereka dideklarasikan (dan setiap sub-blok, jika ada). Dalam JavaScript dan banyak bahasa pemrograman lainnya, blok kode adalah bagian dari program yang dibatasi oleh sepasang tanda kurung buka dan tutup. Secara default, program JavaScript membentuk satu blok kode. 94 | 95 | ```js 96 | let num1 = 0; 97 | { 98 | num1 = 1; // OK : karena num1 dideklarasi diatas block 99 | const num2 = 0; 100 | } 101 | console.log(num1); // OK : num1 di deklarasi di block yang sama 102 | console.log(num2); // Error! num2 tidak dapat diakses karena deklarasinya di dalam scope yang berbeda 103 | ``` 104 | 105 | ## Ekspresi 106 | 107 | Ekspresi adalah bagian kode yang menghasilkan nilai. Ekspresi dibuat dengan menggabungkan variabel, nilai, dan operator. Setiap ekspresi memiliki nilai dan tipe. Menghitung nilai ekspresi disebut evaluasi. Selama evaluasi, variabel diganti oleh nilainya. 108 | 109 | ```js 110 | // 3 adalah sebuah ekspresi yang menghasilkan nilai 3 111 | const c = 3; 112 | // c adalah ekspresi yang nilainya c (3) 113 | let d = c; 114 | // (d + 1) adalah ekspresi yang menambahkan nilai d dengan 1 (4) 115 | d = d + 1; // d sekarang bernilai 4 116 | console.log(d); // 4 117 | ``` 118 | 119 | Prioritas operator di dalam ekspresi sama seperti dalam matematika. Namun, ekspresi dapat mengintegrasikan tanda kurung yang mengubah prioritas ini. 120 | 121 | ```js 122 | let e = 3 + 2 * 4; // e bernilai 11 (3 + 8) 123 | e = (3 + 2) * 4; // e bernilai 20 (5 * 4) 124 | ``` 125 | 126 | Adalah mungkin untuk memasukkan ekspresi dalam string dengan menggunakan backticks (`) untuk membatasi string. String seperti itu disebut template literal. Di dalam literal template, ekspresi diidentifikasi oleh sintaks $ {expression}. Ini sering digunakan untuk membuat string yang mengandung nilai beberapa variabel. 127 | 128 | ```js 129 | const country = "Indonesia"; 130 | console.log(`Saya tinggal di ${country}`); // Menampilkan "Saya tinggal di Indonesia" 131 | const x = 3; 132 | const y = 7; 133 | console.log(`${x} + ${y} = ${x + y}`); // Menampilkan "3 + 7 = 10" 134 | ``` 135 | 136 | ## Tipe konversi 137 | 138 | Evaluasi ekspresi dapat menghasilkan konversi jenis. Ini disebut konversi implisit, karena terjadi secara otomatis tanpa campur tangan programmer. Sebagai contoh, menggunakan operator + antara string dan nomor menyebabkan penggabungan dari dua nilai menjadi hasil string. 139 | 140 | ```js 141 | const f = 100; 142 | // Menampilkan "Variabel f bernilai 100" 143 | console.log("Variabel f bernilai " + f); 144 | ``` 145 | 146 | JavaScript sangat toleran dalam hal konversi jenis. Namun, terkadang konversi tidak dimungkinkan. Jika nilai gagal diubah menjadi angka, Anda akan mendapatkan hasil NaN (Bukan Nomor). 147 | 148 | ```js 149 | const g = "lima" * 2; 150 | console.log(g); // Show NaN 151 | ``` 152 | 153 | Sometimes you'll wish to convert the value of another type. This is called explicit conversion. JavaScript has the Number() and String() commands that convert the value between the parenthesis to a number or a string. 154 | 155 | Kadang kita perlu mengubah tipedata dari satu ke lain secara eksplisit. Javascript memiliki perintah `Number()` dan `String()` yang bisa kita gunakan. 156 | 157 | ```js 158 | const h = "5"; 159 | console.log(h + 1); // Concatenation: show the string "51" 160 | const i = Number("5"); 161 | console.log(i + 1); // Numerical addition: show the number 6 162 | ``` 163 | 164 | # Interaksi pengguna 165 | 166 | ## Memasukkan informasi 167 | 168 | Setelah Anda mulai menggunakan variabel, Anda dapat menulis program yang bertukar informasi dengan pengguna. 169 | 170 | ```js 171 | const name = prompt("Enter your first name:"); 172 | alert(`Hello, ${name}`); 173 | ``` 174 | 175 | Selama eksekusi, kotak dialog muncul, menanyakan nama Anda. 176 | 177 | ![](https://github.com/bpesquet/thejsway/raw/master/manuscript/images/chapter02-04.png) 178 | 179 | Ini adalah hasil dari command prompt JavaScript ("Masukkan nama depan Anda:"). Ketikkan nama Anda dan klik OK. Anda akan mendapat sambutan pribadi. 180 | 181 | ![](https://github.com/bpesquet/thejsway/raw/master/manuscript/images/chapter02-05.png) 182 | 183 | Nilai yang Anda masukkan di kotak dialog pertama telah disimpan sebagai string dalam nama variabel. Peringatan perintah JavaScript () kemudian memicu tampilan kotak kedua, yang berisi hasil penggabungan string "Halo," dengan nilai variabel nama. 184 | 185 | ## Menampilkan informasi 186 | 187 | Baik console.log () (ditemui di bab sebelumnya) dan alert () dapat digunakan untuk menampilkan informasi kepada pengguna. Tidak seperti alert (), console.log () tidak menghentikan eksekusi program dan seringkali merupakan pilihan yang lebih baik. console.log () juga dapat menampilkan beberapa nilai yang dipisahkan koma sekaligus. 188 | 189 | ```js 190 | const temp1 = 36.9; 191 | const temp2 = 37.6; 192 | const temp3 = 37.1; 193 | console.log(temp1, temp2, temp3); // Show "36.9 37.6 37.1" 194 | ``` 195 | 196 | ## Memasukkan angka 197 | 198 | Terlepas dari data yang dimasukkan, perintah prompt () selalu mengembalikan nilai string. Jika nilai ini akan digunakan dalam ekspresi numerik, maka harus diubah menjadi angka dengan perintah Number (). 199 | 200 | ```js 201 | const input = prompt("Enter a number:"); // input's type is string 202 | const nb = Number(input); // nb's type is number 203 | ``` 204 | 205 | Kedua operasi dapat digabungkan dalam satu baris untuk hasil yang sama. 206 | 207 | ```js 208 | const nb = Number(prompt("Enter a number:")); // nb's type is number 209 | ``` 210 | 211 | Dalam contoh ini, input pengguna secara langsung dikonversi dalam nilai angka dengan perintah `Number()` dan disimpan dalam variabel nb. 212 | 213 | Penamaan variable 214 | 215 | Untuk menutup bab ini, mari kita bahas penamaan variabel. Komputer tidak peduli dengan nama variabel. Anda dapat menamai variabel Anda menggunakan contoh klasik dari satu huruf (a, b, c ...) atau pilih nama yang tidak masuk akal seperti burrito atau puppieskittens90210. 216 | 217 | Meskipun demikian, menamai variabel dengan baik dapat membuat kode Anda lebih mudah dibaca. Lihat dua contoh berikut: 218 | 219 | ```js 220 | const a = 5.5; 221 | 222 | const b = 3.14; 223 | 224 | const c = 2 * a * b; 225 | 226 | console.log(c); 227 | 228 | const radius = 5.5; 229 | 230 | const pi = 3.14; 231 | 232 | const perimeter = 2 * pi * radius; 233 | 234 | console.log(perimeter); 235 | ``` 236 | 237 | Mereka berfungsi dengan cara yang sama, tetapi versi kedua jauh lebih mudah dimengerti. 238 | 239 | Menamai sesuatu adalah bagian penting dari pekerjaan programmer. Lihat apendiks untuk beberapa saran yang bermanfaat. 240 | 241 | Waktu coding! Bangun kebiasaan memilih nama variabel yang bagus di semua latihan, dimulai dengan yang ini. 242 | 243 | Halo yang ditingkatkan Tulis sebuah program yang meminta pengguna untuk nama depannya dan nama belakangnya. 244 | 245 | Program kemudian menampilkannya dalam satu kalimat. Nilai akhir Amati program berikut dan coba untuk memprediksi nilai akhir dari variabel-variabelnya. 246 | 247 | 248 | ```js 249 | let a = 2; 250 | a -= 1; 251 | a++; 252 | 253 | let b = 8; 254 | b += 2; 255 | 256 | const c = a + b * b; 257 | const d = a * b + b; 258 | const e = a * (b + b); 259 | const f = a * b / a; 260 | const g = b / a * a; 261 | 262 | console.log(a, b, c, d, e, f, g); 263 | ``` 264 | 265 | Periksa prediksi Anda dengan mengeksekusinya. 266 | 267 | Perhitungan PPN Tulis sebuah program yang meminta pengguna untuk harga mentah. Setelah itu, menghitung harga akhir yang terkait menggunakan tarif PPN 20,6%. 268 | 269 | Dari Celsius ke derajat Fahrenheit Tulis program yang meminta suhu dalam derajat Celcius, lalu tampilkan dalam derajat Fahrenheit. 270 | 271 | Konversi antara skala diberikan oleh rumus: [° F] = [° C] x 9/5 + 32. 272 | 273 | 274 | ## Variabel swapping 275 | 276 | Perhatikan program berikut. 277 | 278 | ```js 279 | let number1 = 5; 280 | let number2 = 3; 281 | 282 | // TODO: type your code here (and nowhere else!) 283 | console.log(number1); // Should show 3 284 | console.log(number2); // Should show 5 285 | ``` 286 | 287 | Tambahkan kode yang diperlukan untuk menukar nilai variabel nomor1 dan angka2. 288 | 289 | Latihan ini memiliki beberapa solusi yang valid. Anda dapat menggunakan lebih dari dua variabel untuk menyelesaikannya. -------------------------------------------------------------------------------- /manuscript/chapter06.md: -------------------------------------------------------------------------------- 1 | # Membuat object pertama anda 2 | 3 | Pada bab ini akan dikenalkan object dan cara mereka dibuat dan digunakan dalam JavaScript. 4 | 5 | ## TL;DR 6 | 7 | * Object di JavaScript adalah entitas yang memiliki property. Setiap property adalah sepasang key/value. Key adalah nama property. 8 | 9 | * Nilai dari property dapat berupa bagian informasi (number, string, dan lain-lain) atau fungsi. 10 | Dalam kasus tertentu, property bisa dianggap sebagai **method**. 11 | 12 | * JavaScript **object literal** dibuat menggunakan tanda kurung kurawal `{}`. 13 | 14 | ```js 15 | const myObject = { 16 | property1: value1, 17 | property2: value2, 18 | // ... , 19 | method1(/* ... */) { 20 | // ... 21 | }, 22 | method2(/* ... */) { 23 | // ... 24 | } 25 | // ... 26 | }; 27 | 28 | myObject.property1 = newValue; // Memasang nilai baru pada property1 pada myObject 29 | console.log(myObject.property1); // Menampilkan nilai pada property1 pada myObject 30 | myObject.method1(...); // Memanggil method1 pada myObject 31 | ``` 32 | 33 | * Di dalam sebuah method, kata kunci `this` mewakili object terhadap method yang dipanggil. 34 | 35 | * JavaScript telah menyediakan beberapa object yang berguna seperti `console` or `Math`. 36 | 37 | ## Pengenalan 38 | 39 | ### Apa itu object? 40 | 41 | Mari kita bayangkan object dalam dunia non programming, contohnya pulpen. Sebuah pulpen memiliki warna tinta yang berbeda, diproduksi oleh orang yang berbeda, memiliki ujung pena yang berbeda, dan banyak property lainnya. 42 | 43 | Demikian pula, sebuah **object** dalam programming adalah **entitas yang memiliki banyak property**. Setiap property mendefinisikan karakteristik object. Sebuah property dapat berupa potongan informasi yang diasosiasikan dengan object 44 | (warna pulpen) atau sebuah aksi (kemampuan pulpen untuk menulis). 45 | 46 | ### Apa hubungannya dengan menulis kode? 47 | 48 | **pemrograman berbasis objek** (PBO) adalah cara menulis program menggunakan object. Ketika menggunakan PBO, Anda menulis, membuat dan modifikasi object, dan object menyusun program Anda. 49 | 50 | PBO mengubah cara sebuah program ditulis dan diorganisir. Sejauh ini, Anda telah menulis code berbasis fungsi, kadang disebut dengan [procedural programming](https://en.wikipedia.org/wiki/Procedural_programming). Sekarang mari kita coba cara menulis kode berbasis object. 51 | 52 | ## JavaScript dan objects 53 | 54 | Seperti bahasa lainnya, JavaScript mendukung programming dengan object. JavaScript menyediakan sejumlah objek yang telah ditentukan sementara juga memungkinkan Anda membuat sendiri. 55 | 56 | ### Membuat sebuah object object 57 | 58 | Ini adalah JavaScript gambaran pulpen merk Bic dengan warna biru. 59 | 60 | ```js 61 | const pen = { 62 | type: "ballpoint", 63 | color: "blue", 64 | brand: "Bic" 65 | }; 66 | ``` 67 | 68 | Seperti yang dijelaskan sebelumnya, sebuah object di JavaScript dapat dibuat property nya dengan menggunakan kurung kurawal `{...}`. 69 | Setiap property berisi sepasang key/value. Ini disebut dengan **object literal**. 70 | 71 | > Tanda titik koma setelah tutup kurung kurawal bersifat opsional, tapi tidak masalah jika tidak ditambahkan. 72 | 73 | Kode diatas di definisikan dalam sebuah variable bernama `pen` yang mana nilainya adalah object: Anda bisa mengatakan `pen` adalah object. 74 | Object ini memiliki tiga property: `type`, `color` dan `brand`. Setiap property memiliki sebuah nama dan sebuah nilai yang diikuti dengan tanda koma setelahnya (kecuali yang terakhir). 75 | 76 | ### Mengakses sebuah property object 77 | 78 | Setelah membuat sebuah object, Anda dapat mengakses nilai dari properti tersebut dengan menggunakan **dot notation** seperti `myObject.myProperty`. 79 | 80 | ```js 81 | const pen = { 82 | type: "ballpoint", 83 | color: "blue", 84 | brand: "Bic" 85 | }; 86 | 87 | console.log(pen.type); // "ballpoint" 88 | console.log(pen.color); // "blue" 89 | console.log(pen.brand); // "Bic" 90 | ``` 91 | 92 | Mengakses sebuah object property adalah sebuah **expression** untuk menghasilkan nilai. Ekspresi semacam itu dapat dimasukkan ke dalam yang lebih kompleks. 93 | Sebagai contoh, berikut adalah cara untuk menampilkan property pen dalam satu baris. 94 | 95 | ```js 96 | const pen = { 97 | type: "ballpoint", 98 | color: "blue", 99 | brand: "Bic" 100 | }; 101 | 102 | console.log(`I write with a ${pen.color} ${pen.brand} ${pen.type} pen`); 103 | ``` 104 | 105 | ![Hasil eksekusi](images/chapter06-01.png) 106 | 107 | ### Memodifikasi sebuah object 108 | 109 | Ketika object dibuat, Anda dapat mengubah nilai dari property tersebut dengan sintaks `myObject.myProperty = newValue`. 110 | 111 | ```js 112 | const pen = { 113 | type: "ballpoint", 114 | color: "blue", 115 | brand: "Bic" 116 | }; 117 | 118 | pen.color = "red"; // Memodifikasi property warna pulpen 119 | 120 | console.log(`I write with a ${pen.color} ${pen.brand} ${pen.type} pen`); 121 | ``` 122 | 123 | ![Hasil eksekusi](images/chapter06-02.png) 124 | 125 | Bahkan JavaScript menawarkan kemampuan untuk menambahkan sebuah property baru terhadap object yang sudah dibuat secara dinamis. 126 | 127 | ```js 128 | const pen = { 129 | type: "ballpoint", 130 | color: "blue", 131 | brand: "Bic" 132 | }; 133 | 134 | pen.price = "2.5"; // Memasang properti harga pulpen 135 | 136 | console.log(`My pen costs ${pen.price}`); 137 | ``` 138 | 139 | ![Hasil eksekusi](images/chapter06-03.png) 140 | 141 | ## Programming dengan object 142 | 143 | Banyak puku dan kursus mengajarkan pemrograman berbasis objek melalui banyak contoh seperti hewan, mobil atau rekening bank. Mari kita coba sesuatu yang keren dan membuat mini-role playing game (RPG) menggunakan object. 144 | 145 | Dalam role-playing game, setiap karakter didefinisikan dengan banyak atribut seperti kekuatan, stamina, atau kecerdasan. Berikut adalah karakter layar RPG online yang sangat populer. 146 | 147 | ![Bukan, bukan milik saya!](images/chapter06-04.png) 148 | 149 | Dalam contoh sederhana kami, karakter akan memiliki tiga atribut: 150 | 151 | * name, 152 | * health (angka poin nyawa), 153 | * strength. 154 | 155 | ### Sebuah contoh sederhana 156 | 157 | Mari saya kenalkan Aurora kepada Anda, karakter pertama RPG kita. 158 | 159 | ```js 160 | const aurora = { 161 | name: "Aurora", 162 | health: 150, 163 | strength: 25 164 | }; 165 | ``` 166 | 167 | Object `aurora` memiliki tiga property: `name`, `health` and `strength`. 168 | 169 | > Seperti yang Anda lihat, Anda dapat memberikan number, string bahkan object lainnya ke dalam properties! 170 | 171 | Aurora akan memulai seri petualangan besar, kita harus mengubah atributnya. Lihat contoh di bawah. 172 | 173 | ```js 174 | const aurora = { 175 | name: "Aurora", 176 | health: 150, 177 | strength: 25 178 | }; 179 | 180 | console.log(`${aurora.name} has ${aurora.health} health points and ${aurora.strength} as strength`); 181 | 182 | // Aurora diserang dengan panah 183 | aurora.health -= 20; 184 | 185 | // Aurora memasang kalung keuatan 186 | aurora.strength += 10; 187 | 188 | console.log(`${aurora.name} has ${aurora.health} health points and ${aurora.strength} as strength`); 189 | ``` 190 | 191 | ![Hasil eksekusi](images/chapter06-05.png) 192 | 193 | ### Pengenalan method 194 | 195 | Pada kode di atas, kita menulis sebuah pernyataan yang panjang dengan `console.log` setiap kali menampilkan keadaan karakter. Terdapat cara cerdas untuk menyelesaikan ini. 196 | 197 | #### Menambahkan method ke dalam object 198 | 199 | Amati contoh di bawah. 200 | 201 | ```js 202 | const aurora = { 203 | name: "Aurora", 204 | health: 150, 205 | strength: 25 206 | }; 207 | 208 | // Mengembalikan deskripsi karakter 209 | function describe(character) { 210 | return `${character.name} has ${character.health} health points and ${character.strength} as strength`; 211 | } 212 | 213 | console.log(describe(aurora)); 214 | ``` 215 | 216 | ![Hasil eksekusi](images/chapter06-07.png) 217 | 218 | Fungsi `describe()` mengambil sebuah object sebagai parameter. Ia mengakses property object untuk membuat string deskripsi. 219 | 220 | Di bawah ini adalah pendekatan alternatif, menggunakan property `describe()` di dalam object. 221 | 222 | ```js 223 | const aurora = { 224 | name: "Aurora", 225 | health: 150, 226 | strength: 25, 227 | 228 | // Mengembalikan deskripsi karakter 229 | describe() { 230 | return `${this.name} has ${this.health} health points and ${this 231 | .strength} as strength`; 232 | } 233 | }; 234 | 235 | console.log(aurora.describe()); 236 | ``` 237 | 238 | ![Hasil eksekusi](images/chapter06-07.png) 239 | 240 | Sekarang object kita memiliki property baru bernama `describe()`. Nilai dari property ini adalah sebuah fungsi untuk mengembalikan deskripsi dari object tadi. Hasil eksekusi sama persis dengan sebelumnya. 241 | 242 | Sebuah property object yang memiliki value berupa fungsi disebut dengan **method**. Method digunakan untuk mendefinisikan **actions** pada sebuah object. Sebuah method memiliki beberapa **behavior** pada sebuah object. 243 | 244 | #### Memanggil method pada sebuah object 245 | 246 | Mari kita lihat baris terakhir pada contoh sebelumnya. 247 | 248 | ```js 249 | console.log(aurora.describe()); 250 | ``` 251 | 252 | Untuk menampilkan deskripsi karakter, kita gunakan ekspresi `aurora.describe()` daripada `describe(aurora)`. Hal ini membuat perbedaan yang *besar*: 253 | 254 | * `describe(aurora)` memanggil fungsi `describe()` dengan object `aurora` sebagai argument. Fungsi tersebut di luar dari object. Ini adalah contoh dari programming prosedural. 255 | 256 | * `aurora.describe()` memanggil fungsi `describe()` pada object `aurora`. Fungsi tersebut adalah salah satu dari object properties: sebuah method. Ini adalah contoh dari pemrograman berbasis objek. 257 | 258 | Untuk memanggil sebuah method bernama `myMethod()` pada object `myObject`, sintaksnya adalah `myObject.myMethod()`. 259 | 260 | > Ingatlah tanda kurung `()` bahkan jika kosong ketika memanggil method! 261 | 262 | ### Kata kunci `this` 263 | 264 | Sekarang lihat lebih dekat isi method `describe()` pada object kita. 265 | 266 | ```js 267 | const aurora = { 268 | name: "Aurora", 269 | health: 150, 270 | strength: 25, 271 | 272 | // Mengembalikan deskripsi karakter 273 | describe() { 274 | return `${this.name} has ${this.health} health points and ${this 275 | .strength} as strength`; 276 | } 277 | }; 278 | ``` 279 | 280 | Anda melihat keyword baru: `this`. `This` secara otomatis dipasang oleh JavaScript di dalam sebuah method dan mewakili **object yang mana method nya dipanggil**. 281 | 282 | Method `describe()` tidak mengambil parameter apapun. Ia menggunakan `this` untuk mengakses property sebuah object yang dipanggil. 283 | 284 | ## Object standar JavaScript 285 | 286 | Bahasa JavaScript memiliki banyak object standar yang digunakan untuk kepentingan yang beragam. Kita sudah menggunakan beberapa diantaranya: 287 | 288 | * Object `console` memberikan akses pada lingkungan console. `console.log()` sebenarnya adalah method pemanggil. 289 | 290 | * Object `Math` berisi banyak property matematis. Contoh, `Math.PI` mengembalikan perkiraan nilai pada angka π (Pi) dan fungsi `Math.random()` mengembalikan nilai acak antara 0 dan 1. 291 | 292 | ## Waktunya Koding! 293 | 294 | ### Menambahkan pengalaman karakter 295 | 296 | Improvisasi contoh program RPG untuk menambahkan sebuah property pengalaman dengan nama `xp` pada karakter. Ia diinisialisasi dengan nilai 0. Pengalaman harus muncul pada deskripsi karakter. 297 | 298 | ```js 299 | // TODO: Buat object character di sini 300 | 301 | // Aurora is harmed by an arrow 302 | aurora.health -= 20; 303 | 304 | // Aurora diserang dengan panah 305 | aurora.strength += 10; 306 | 307 | // Aurora belajar kemampuan baru 308 | aurora.xp += 15; 309 | 310 | console.log(aurora.describe()); 311 | ``` 312 | 313 | ![Hasil eksekusi](images/chapter06-08.png) 314 | 315 | ### Memodelkan seekor anjing 316 | 317 | Lengkapi program di bawah untuk menambahkan object seekor `anjing`. 318 | 319 | ```js 320 | // TODO: Membuat object anjing di sini 321 | 322 | console.log(`${anjing.name} adalah spesies ${anjing.species} anjing dengan ukuran ${anjing.size}`); 323 | console.log(`Lihat, seekor kucing! ${anjing.name} mengonggong: ${anjing.bark()}`); 324 | ``` 325 | 326 | ![Hasil eksekusi](images/chapter06-09.png) 327 | 328 | ### Memodelkan sebuah lingkaran 329 | 330 | Lengkapi program di bawah untuk menambahkan object sebuah `lingkaran`. Nilai jari-jari diinputkan oleh pengguna. 331 | 332 | ```js 333 | const r = Number(prompt("Masukkan jari-jari lingkaran:")); 334 | 335 | // TODO: Membuat object lingkaran di sini 336 | 337 | console.log(`Jari-jarinya adalah ${circle.circumference()}`); 338 | console.log(`Luasnya adalah ${circle.area()}`); 339 | ``` 340 | 341 | ### Memodelkan sebuah akun bank 342 | 343 | Tulislah sebuah program yang membuat sebuah object `account` dengan karakteristik berikut: 344 | 345 | * Property `name` dipasang "Alex". 346 | * Property `balance` dipasang 0. 347 | * Method `credit` menambahkan nilai (positif atau negatif) sebagai argument pada account balance. 348 | * Method `describe` mengembalikan deskripsi account. 349 | 350 | Gunakan object ini untuk menampilkan deskripsi, kredit 250, debit 80, kemudian tampilkan lagi. 351 | 352 | ![Hasil eksekusi](images/chapter06-10.png) -------------------------------------------------------------------------------- /manuscript/chapter10.md: -------------------------------------------------------------------------------- 1 | # Mengenali pemrograman fungsional 2 | 3 | Pemrograman berorientasi obyek, meskipun cukup populer, bukan satu-satunya cara untuk membuat untuk membuat program. Bab ini akan memperkenalkan paradigma penting yang lain; pemrograman fungsional 4 | 5 | 6 | 7 | ## TL;DR 8 | 9 | - **Pemrograman fungsional** (*functional programming*) adalah tentang menulis program dengan mengkombinasikan / menggabungkan fungsi-fungsi yang mengekpresikan apa yang seharusnyadilakukan oleh program, daripada bagaimana melakukannya (yang merupakan cara penting). 10 | - **Keadaan suatu** program adalah nilai dari **variabel globalnya** pada waktu tertentu. Tujuan 11 | dari pemrograman fungsional adalah untuk meminimalkan mutasi keadaan (perubahan) yang membuat kode lebih sulit untuk dipahami. Beberapa solusi yang mungkin mendeklarasikan variabel dengan `const` daripada `let`, membagi kode menjadi fungsi, dan mendukung variabel lokal di 12 | atas variabel global. 13 | - **Fungsi murni** (*pure function*) hanya bergantung pada inputnya untuk menghitung outputnya dan **tidak memiliki efek samping**. Fungsi murni (*pure function*) lebih mudah dipahami, digabungkan bersama, dan debug. Pemrograman fungsional mendukung penggunaan fungsi murni jika memungkinkan. 14 | - Metode `map()`, `filter()` dan `reduce()` dapat mengganti loop untuk array dan membiarkan program dengan array secara fungsional. 15 | - Fungsi JavaScript dapat dibagikan seperti halnya nilai lainnya: mereka disebut dengan **first-class citizens**, yang memungkinkan pemrograman fungsional. Fungsi yang beroperasi pada fungsi lain (mengambilnya sebagai parameter atau mengembalikannya) disebut **higher-order function**. 16 | - JavaScript adalah bahasa **multi-paradigma**: menulis program menggunakan 17 | gaya pemrograman imperatif, berorientasi objek atau fungsional. 18 | 19 | 20 | 21 | ## Konteks: daftar film 22 | 23 | Pada bab ini, di mulai dengan contoh program dan memperbaikinya sedikit demi sedikit, tanpa menambahkan fungsi baru apa pun. Tugas pemrograman penting ini disebut refactoring. 24 | 25 | Program awal ini adalah tentang film Batman terbaru. Data tersebut datang dalam bentuk array objek, dengan masing-masing objek menggambarkan film. 26 | 27 | ```js 28 | const daftarFilm = [ 29 | { 30 | judul: "Batman", 31 | tahun: 1989, 32 | direktur: "Tim Burton", 33 | peringkatImb: 7.6 34 | }, 35 | { 36 | judul: "Batman Returns", 37 | tahun: 1992, 38 | direktur: "Tim Burton", 39 | peringkatImb: 7.0 40 | }, 41 | { 42 | judul: "Batman Forever", 43 | tahun: 1995, 44 | direktur: "Joel Schumacher", 45 | peringkatImb: 5.4 46 | }, 47 | { 48 | judul: "Batman & Robin", 49 | tahun: 1997, 50 | direktur: "Joel Schumacher", 51 | peringkatImb: 3.7 52 | }, 53 | { 54 | judul: "Batman Begins", 55 | tahun: 2005, 56 | direktur: "Christopher Nolan", 57 | peringkatImb: 8.3 58 | }, 59 | { 60 | judul: "The Dark Knight", 61 | tahun: 2008, 62 | direktur: "Christopher Nolan", 63 | peringkatImb: 9.0 64 | }, 65 | { 66 | judul: "The Dark Knight Rises", 67 | tahun: 2012, 68 | direktur: "Christopher Nolan", 69 | peringkatImb: 8.5 70 | } 71 | ]; 72 | ``` 73 | 74 | Dan inilah sisa program yang digunakannya, itu seharusnya sudah cukup jelas. 75 | 76 | ```javascript 77 | // Dapatkan judul film 78 | const judulJudul = []; 79 | for (const film of daftarFilm) { 80 | judulJudul.push(film.judul); 81 | } 82 | console.log(judulJudul); 83 | 84 | // Hitung film berdasarkan Christopher Nolan 85 | const daftarFilmNolan = []; 86 | for (const film of daftarFilm) { 87 | if (film.direktur === "Christopher Nolan") { 88 | daftarFilmNolan.push(film); 89 | } 90 | } 91 | console.log(daftarFilmNolan.length); 92 | 93 | // Dapaktkan judul-judul film dengan peringkat IMDB lebih atau sama dengan 7.5 94 | const judulJudulTerbaik = []; 95 | for (const film of daftarFilm) { 96 | if (film.peringkatImb >= 7.5) { 97 | judulJudulTerbaik.push(film.judul); 98 | } 99 | } 100 | console.log(judulJudulTerbaik); 101 | 102 | // Hitung rata-rata peringkat film yang di buat oleh Christopher Nolan 103 | let peringkat = 0; 104 | let peringkatRataRata = 0; 105 | for (const film of daftarFilmNolan) { 106 | peringkat += film.peringkatImb; 107 | } 108 | peringkatRataRata = peringkat / daftarFilmNolan.length; 109 | console.log(peringkatRataRata); 110 | ``` 111 | 112 | ![](/home/hello/Projects/Contributes/thejsway_id/manuscript/images/chapter10-01.png) 113 | 114 | 115 | 116 | ## Keadaan program (Program state) 117 | 118 | Program sebelumnya adalah contoh dari apa yang disebut **pemrograman imperatif**. Dalam paradigma ini, programmer memberi perintah kepada komputer melalui serangkaian pernyataan yang mengubah status program. Pemrograman imperatif berfokus pada menggambarkan bagaimana suatu program beroperasi. 119 | 120 | Konsep keadaan (*state*) adalah yang penting. **Keadaan** (*state*) suatu program adalah nilai dari v**ariabel globalnya** (variabel dapat diakses di mana saja dalam kode) pada waktu tertentu. Dalam contoh ini, nilai-nilai `daftarFilm`, `judul`, `daftarFilmNolan`, `judulJudulTerbaik`, `peringkat` dan `peringkatRataRata` bentuk status program. Setiap penugasan ke salah satu variabel ini adalah perubahan status, sering isebut **mutation**. 121 | 122 | Dalam pemrograman imperatif, suatu *state* dapat dimodifikasi di mana saja dalam kode sumber. Ini nyaman, tetapi juga dapat menyebabkan bug jahat dan sakit kepala. Sebagai program yang tumbuh dalam ukuran dan kompleksitas, menjadi lebih mudah bagi programmer untuk bermutasi bagian dari *state* oleh kesalahan dan lebih sulit untuk memantau modifikasi *state*. 123 | 124 | 125 | 126 | ## Membatasi *mutation* dengan variabel `const` 127 | 128 | Untuk mengurangi risiko *state mutation* disengaja, langkah pertama adalah 129 | memilih `const` daripada `let` kapanpun berlaku untuk deklarasi variabel. Variabel yang dideklarasikan dengan kata kunci `const` tidak dapat ditugasi lebih lanjut. Array dan *object content* masih bisa dimutasi. Periksa kode berikut untuk detailnya. 130 | 131 | ```javascript 132 | const n = 10; 133 | const buah = "Pisang"; 134 | const obj = { 135 | propSaya: 2 136 | }; 137 | const binatangBinatang = ["Gajah", "Anjing"]; 138 | 139 | obj.propSaya = 3; // Mutation properti akan baik-baik saja walaupun untuk objek const 140 | 141 | obj.propSayaYangLain = "abc"; // Menambah sebuah properti baru akan baik-baik saja walaupun untuk objek const 142 | binatangBinatang.push("Monyet"); // Memperbarui konten akan baik-baik saja walaupun untuk objek const 143 | 144 | n++; // Ilegal 145 | buah = "orange"; // Ilegal 146 | obj = {}; // Ilegal 147 | binatangBinatang = ["Beruang"]; // Ilegal 148 | ``` 149 | 150 | 151 | 152 | ## Membagi program menjadi beberapa fungsi 153 | 154 | Solusi lain adalah membagi kode ke dalam sub rutin yang disebut ***procedures*** atau ***functions***. Hal ini disebut ***procedural programming*** dan memiliki manfaat mengubah 155 | beberapa variabel menjadi ***local variables***, yang hanya terlihat dalam kode 156 | sub rutin. 157 | 158 | Mari mencoba memperkenalkan beberapa fungsi dalam kode ini 159 | 160 | ```javascript 161 | // Dapatkan judul film 162 | const judulJudul = () => { 163 | const judulJudul = []; 164 | for (const film of daftarFilm) { 165 | judulJudul.push(film.judul); 166 | } 167 | return judulJudul; 168 | }; 169 | 170 | const daftarFilmNolan = []; 171 | 172 | // Dapatkan Film dari Christopher Nolan 173 | const filmFilmNolan = () => { 174 | for (const film of daftarFilm) { 175 | if (film.direktur === "Christopher Nolan") { 176 | daftarFilmNolan.push(film); 177 | } 178 | } 179 | }; 180 | 181 | // Dapaktkan judul-judul film dengan peringkat IMDB lebih atau sama dengan 7.5 182 | const judulJudulTerbaik = () => { 183 | const judulJudulTerbaik = []; 184 | for (const film of daftarFilm) { 185 | if (film.peringkatImb >= 7.5) { 186 | judulJudulTerbaik.push(film.judul); 187 | } 188 | } 189 | return judulJudulTerbaik; 190 | }; 191 | 192 | // Hitung rata-rata peringkat film yang di buat oleh Christopher Nolan 193 | const peringkatRataRataNolan = () => { 194 | let peringkat = 0; 195 | for (const film of daftarFilmNolan) { 196 | peringkat += film.peringkatImb; 197 | } 198 | return peringkat / daftarFilmNolan.length; 199 | }; 200 | 201 | console.log(judulJudul()); 202 | filmFilmNolan(); 203 | console.log(daftarFilmNolan.length); 204 | console.log(judulJudulTerbaik()); 205 | console.log(peringkatRataRataNolan()); 206 | ``` 207 | 208 | *State* dari program tersebut sekarang terbatas pada dua variabel: `daftarFilm` dan `daftarFilmNolan` (yang terakhir diperlukan dalam fungsi `filmFilmNolan()` dan `peringkatRataRataNolan ()`). Variabel lain sekarang lokal untuk fungsi yang digunakan, yang membatasi kemungkinan *state mutation* disengaja. Juga, versi program ini lebih mudah dipahami daripada versi sebelumnya. Fungsi dengan nama yang sesuai membantu menggambarkan perilaku suatu program. Komentar sekarang kurang diperlukan dari sebelumnya. 209 | 210 | 211 | 212 | ## Fungsi murni *(pure functions)* 213 | 214 | Hanya memperkenalkan beberapa fungsi dalam suatu program tidak cukup untuk mengikuti paradigma pemrograman fungsional. Kapan pun memungkinkan, kita juga perlu menggunakan fungsi murni. 215 | 216 | Fungsi murni ***pure functions*** adalah fungsi yang memiliki karakteristik sebagai berikut: 217 | 218 | - Hasilnya hanya bergantung pada inputnya. 219 | - Tidak mempunyai efek samping (*side effect*) 220 | 221 | Efek samping (*side effect*) adalah perubahan dalam status program atau interaksi dengan dunia luar. Akses *database* atau pernyataan `console.log ()` adalah contoh efek samping. 222 | 223 | Dengan data yang sama, fungsi murni akan selalu menghasilkan hasil yang sama. Dengan desain, fungsi murni adalah independen dari keadaan program dan tidak boleh mengaksesnya. Fungsi seperti itu harus menerima ***parameters*** untuk melakukan sesuatu yang bermanfaat. Satu-satunya cara untuk fungsi tanpa parameter menjadi murni adalah mengembalikan nilai konstan. 224 | 225 | Fungsi-fungsi murni lebih mudah dipahami, digabungkan bersama, dan debug: tidak perlu melihat keluar dari tubuh fungsi untuk memikirkannya. Namun, sejumlah efek samping diperlukan dalam program apa pun, seperti menampilkan *output* kepada pengguna atau memperbarui *database*. Dalam pemrograman fungsional, nama *game* ini adalah untuk menciptakan efek samping itu hanya di beberapa bagian program yang dikhususkan dan diidentifikasi dengan jelas. Sisa dari kode harus ditulis sebagai fungsi murni. 226 | 227 | Mari refactor kode contoh kami untuk memperkenalkan fungsi murni. 228 | 229 | ```javascript 230 | // Dapatkan judul film 231 | const judulJudul = filmFilm => { 232 | const judulJudul = []; 233 | for (const film of filmFilm) { 234 | judulJudul.push(film.judul); 235 | } 236 | return judulJudul; 237 | }; 238 | 239 | // Dapatkan Film dari Christopher Nolan 240 | const filmFilmNolan = filmFilm => { 241 | const filmFilmNolan = []; 242 | for (const film of filmFilm) { 243 | if (film.direktur === "Christopher Nolan") { 244 | filmFilmNolan.push(film); 245 | } 246 | } 247 | return filmFilmNolan; 248 | }; 249 | 250 | // Dapaktkan judul-judul film dengan peringkat IMDB lebih atau sama dengan 7.5 251 | const judulJudulTerbaik = filmFilm => { 252 | const judulJudulTerbaik = []; 253 | for (const film of filmFilm) { 254 | if (film.peringkatImb >= 7.5) { 255 | judulJudulTerbaik.push(film.judul); 256 | } 257 | } 258 | return judulJudulTerbaik; 259 | }; 260 | 261 | // Hitung rata-rata peringkat film yang di buat oleh Christopher Nolan 262 | const peringkatRataRata = filmFilm => { 263 | let peringkat = 0; 264 | for (const film of filmFilm) { 265 | peringkat += film.peringkatImb; 266 | } 267 | return peringkat / filmFilm.length; 268 | }; 269 | 270 | console.log(judulJudul(daftarFilm)); 271 | const daftarFilmNolan = filmFilmNolan(daftarFilm); 272 | console.log(daftarFilmNolan.length); 273 | console.log(judulJudulTerbaik(daftarFilm)); 274 | console.log(peringkatRataRata(daftarFilmNolan)); 275 | ``` 276 | 277 | 278 | 279 | ## Operasi array *(Array operations)* 280 | 281 | Pemrograman fungsional adalah tentang menulis program dengan menggabungkan fungsi-fungsi yang mengekspresikan *apa* yang seharusnya dilakukan oleh program, daripada *bagaimana* melakukannya. JavaScript menawarkan beberapa metode terkait array yang mendukung gaya pemrograman fungsional. 282 | 283 | ### Metode `map()` 284 | 285 | Metode `map()` mengambil array sebagai parameter dan membuat array baru dengan hasil memanggil fungsi yang disediakan pada setiap elemen dalam array ini. Penggunaan `map()` yang khas adalah untuk mengganti loop untuk array. 286 | 287 | ```javascript 288 | const numbers = [1, 5, 10, 15]; 289 | // membuat fungsi untuk setiap array akan di kali 2 290 | const doubles = numbers.map(x => x * 2); 291 | 292 | console.log(numbers); // [1, 5, 10, 15] (tidak ada perubahan) 293 | console.log(doubles); // [2, 10, 20, 30] 294 | ``` 295 | 296 | Beginilah `judulJudul()` bisa ditulis ulang menggunakan `map()`. Lihatlah bagaimana kode fungsi sekarang lebih ringkas dan ekspresif. 297 | 298 | ```javascript 299 | // Dapatkan judul film 300 | const judulJudul = filmFilm => { 301 | /* Kode sebelumnya 302 | const judulJudul = []; 303 | for (const film of filmFilm) { 304 | judulJudul.push(film.judul); 305 | } 306 | return judulJudul; 307 | */ 308 | 309 | // Return a new array containing only movie titles 310 | return filmFilm.map(film => film.judul); 311 | }; 312 | ``` 313 | 314 | 315 | 316 | ### Metode `filter()` 317 | 318 | Metode `filter()` menawarkan cara untuk menguji setiap elemen array terhadap fungsi yang disediakan. Hanya elemen yang lulus tes ini ditambahkan ke array yang dikembalikan. 319 | 320 | ```javascript 321 | const numbers = [1, 5, 10, 15]; 322 | // Simpan ke dalam array jika number lebih dari atau sama dengan 10 323 | const bigOnes = numbers.filter(x => x >= 10); 324 | 325 | console.log(numbers); // [1, 5, 10, 15] (tidak ada perubahan) 326 | console.log(bigOnes); // [10, 15] 327 | ``` 328 | 329 | Gunakan metode ini untuk fungsi `filmFilmNolan()` 330 | 331 | ```javascript 332 | // Dapatkan Film dari Christopher Nolan 333 | const filmFilmNolan = filmFilm => { 334 | /* Kode sebelumnya 335 | const filmFilmNolan = []; 336 | for (const film of filmFilm) { 337 | if (film.direktur === "Christopher Nolan") { 338 | filmFilmNolan.push(film); 339 | } 340 | } 341 | return filmFilmNolan; 342 | */ 343 | 344 | // Return a new array containing only movies by Christopher Nolan 345 | return filmFilm.filter(film => film.direktur === "Christopher Nolan"); 346 | }; 347 | ``` 348 | 349 | Metode `map()` dan `filter()` dapat digunakan bersama untuk mendapatkan efek yang kuat. mari gunakan pada `judulJudulTerbaik()` 350 | 351 | ```javascript 352 | // Dapaktkan judul-judul film dengan peringkat IMDB lebih atau sama dengan 7.5 353 | const judulJudulTerbaik = filmFilm => { 354 | /* Kode sebelumnya 355 | const judulJudulTerbaik = []; 356 | for (const film of filmFilm) { 357 | if (film.peringkatImb >= 7.5) { 358 | judulJudulTerbaik.push(film.judul); 359 | } 360 | } 361 | return judulJudulTerbaik; 362 | */ 363 | 364 | return filmFilm.filter(film => film.peringkatImb >= 7.5).map(film => film.judul); 365 | }; 366 | ``` 367 | 368 | 369 | 370 | ### Metode `reduce()` 371 | 372 | Metode `reduce()` menerapkan fungsi yang disediakan ke setiap elemen array untuk menguranginya menjadi satu nilai. Metode ini biasanya digunakan untuk melakukan perhitungan pada suatu array. 373 | 374 | ```javascript 375 | const numbers = [1, 5, 10, 15]; 376 | // Hitung hasil jumlah dari elemen array 377 | const sum = numbers.reduce((acc, value) => acc + value, 0); 378 | 379 | console.log(numbers); // [1, 5, 10, 15] (tidak ada perubahan) 380 | console.log(sum); // 31 381 | ``` 382 | 383 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International 2 | Public License 3 | 4 | By exercising the Licensed Rights (defined below), You accept and agree 5 | to be bound by the terms and conditions of this Creative Commons 6 | Attribution-NonCommercial-ShareAlike 4.0 International Public License 7 | ("Public License"). To the extent this Public License may be 8 | interpreted as a contract, You are granted the Licensed Rights in 9 | consideration of Your acceptance of these terms and conditions, and the 10 | Licensor grants You such rights in consideration of benefits the 11 | Licensor receives from making the Licensed Material available under 12 | these terms and conditions. 13 | 14 | 15 | Section 1 -- Definitions. 16 | 17 | a. Adapted Material means material subject to Copyright and Similar 18 | Rights that is derived from or based upon the Licensed Material 19 | and in which the Licensed Material is translated, altered, 20 | arranged, transformed, or otherwise modified in a manner requiring 21 | permission under the Copyright and Similar Rights held by the 22 | Licensor. For purposes of this Public License, where the Licensed 23 | Material is a musical work, performance, or sound recording, 24 | Adapted Material is always produced where the Licensed Material is 25 | synched in timed relation with a moving image. 26 | 27 | b. Adapter's License means the license You apply to Your Copyright 28 | and Similar Rights in Your contributions to Adapted Material in 29 | accordance with the terms and conditions of this Public License. 30 | 31 | c. BY-NC-SA Compatible License means a license listed at 32 | creativecommons.org/compatiblelicenses, approved by Creative 33 | Commons as essentially the equivalent of this Public License. 34 | 35 | d. Copyright and Similar Rights means copyright and/or similar rights 36 | closely related to copyright including, without limitation, 37 | performance, broadcast, sound recording, and Sui Generis Database 38 | Rights, without regard to how the rights are labeled or 39 | categorized. For purposes of this Public License, the rights 40 | specified in Section 2(b)(1)-(2) are not Copyright and Similar 41 | Rights. 42 | 43 | e. Effective Technological Measures means those measures that, in the 44 | absence of proper authority, may not be circumvented under laws 45 | fulfilling obligations under Article 11 of the WIPO Copyright 46 | Treaty adopted on December 20, 1996, and/or similar international 47 | agreements. 48 | 49 | f. Exceptions and Limitations means fair use, fair dealing, and/or 50 | any other exception or limitation to Copyright and Similar Rights 51 | that applies to Your use of the Licensed Material. 52 | 53 | g. License Elements means the license attributes listed in the name 54 | of a Creative Commons Public License. The License Elements of this 55 | Public License are Attribution, NonCommercial, and ShareAlike. 56 | 57 | h. Licensed Material means the artistic or literary work, database, 58 | or other material to which the Licensor applied this Public 59 | License. 60 | 61 | i. Licensed Rights means the rights granted to You subject to the 62 | terms and conditions of this Public License, which are limited to 63 | all Copyright and Similar Rights that apply to Your use of the 64 | Licensed Material and that the Licensor has authority to license. 65 | 66 | j. Licensor means the individual(s) or entity(ies) granting rights 67 | under this Public License. 68 | 69 | k. NonCommercial means not primarily intended for or directed towards 70 | commercial advantage or monetary compensation. For purposes of 71 | this Public License, the exchange of the Licensed Material for 72 | other material subject to Copyright and Similar Rights by digital 73 | file-sharing or similar means is NonCommercial provided there is 74 | no payment of monetary compensation in connection with the 75 | exchange. 76 | 77 | l. Share means to provide material to the public by any means or 78 | process that requires permission under the Licensed Rights, such 79 | as reproduction, public display, public performance, distribution, 80 | dissemination, communication, or importation, and to make material 81 | available to the public including in ways that members of the 82 | public may access the material from a place and at a time 83 | individually chosen by them. 84 | 85 | m. Sui Generis Database Rights means rights other than copyright 86 | resulting from Directive 96/9/EC of the European Parliament and of 87 | the Council of 11 March 1996 on the legal protection of databases, 88 | as amended and/or succeeded, as well as other essentially 89 | equivalent rights anywhere in the world. 90 | 91 | n. You means the individual or entity exercising the Licensed Rights 92 | under this Public License. Your has a corresponding meaning. 93 | 94 | 95 | Section 2 -- Scope. 96 | 97 | a. License grant. 98 | 99 | 1. Subject to the terms and conditions of this Public License, 100 | the Licensor hereby grants You a worldwide, royalty-free, 101 | non-sublicensable, non-exclusive, irrevocable license to 102 | exercise the Licensed Rights in the Licensed Material to: 103 | 104 | a. reproduce and Share the Licensed Material, in whole or 105 | in part, for NonCommercial purposes only; and 106 | 107 | b. produce, reproduce, and Share Adapted Material for 108 | NonCommercial purposes only. 109 | 110 | 2. Exceptions and Limitations. For the avoidance of doubt, where 111 | Exceptions and Limitations apply to Your use, this Public 112 | License does not apply, and You do not need to comply with 113 | its terms and conditions. 114 | 115 | 3. Term. The term of this Public License is specified in Section 116 | 6(a). 117 | 118 | 4. Media and formats; technical modifications allowed. The 119 | Licensor authorizes You to exercise the Licensed Rights in 120 | all media and formats whether now known or hereafter created, 121 | and to make technical modifications necessary to do so. The 122 | Licensor waives and/or agrees not to assert any right or 123 | authority to forbid You from making technical modifications 124 | necessary to exercise the Licensed Rights, including 125 | technical modifications necessary to circumvent Effective 126 | Technological Measures. For purposes of this Public License, 127 | simply making modifications authorized by this Section 2(a) 128 | (4) never produces Adapted Material. 129 | 130 | 5. Downstream recipients. 131 | 132 | a. Offer from the Licensor -- Licensed Material. Every 133 | recipient of the Licensed Material automatically 134 | receives an offer from the Licensor to exercise the 135 | Licensed Rights under the terms and conditions of this 136 | Public License. 137 | 138 | b. Additional offer from the Licensor -- Adapted Material. 139 | Every recipient of Adapted Material from You 140 | automatically receives an offer from the Licensor to 141 | exercise the Licensed Rights in the Adapted Material 142 | under the conditions of the Adapter's License You apply. 143 | 144 | c. No downstream restrictions. You may not offer or impose 145 | any additional or different terms or conditions on, or 146 | apply any Effective Technological Measures to, the 147 | Licensed Material if doing so restricts exercise of the 148 | Licensed Rights by any recipient of the Licensed 149 | Material. 150 | 151 | 6. No endorsement. Nothing in this Public License constitutes or 152 | may be construed as permission to assert or imply that You 153 | are, or that Your use of the Licensed Material is, connected 154 | with, or sponsored, endorsed, or granted official status by, 155 | the Licensor or others designated to receive attribution as 156 | provided in Section 3(a)(1)(A)(i). 157 | 158 | b. Other rights. 159 | 160 | 1. Moral rights, such as the right of integrity, are not 161 | licensed under this Public License, nor are publicity, 162 | privacy, and/or other similar personality rights; however, to 163 | the extent possible, the Licensor waives and/or agrees not to 164 | assert any such rights held by the Licensor to the limited 165 | extent necessary to allow You to exercise the Licensed 166 | Rights, but not otherwise. 167 | 168 | 2. Patent and trademark rights are not licensed under this 169 | Public License. 170 | 171 | 3. To the extent possible, the Licensor waives any right to 172 | collect royalties from You for the exercise of the Licensed 173 | Rights, whether directly or through a collecting society 174 | under any voluntary or waivable statutory or compulsory 175 | licensing scheme. In all other cases the Licensor expressly 176 | reserves any right to collect such royalties, including when 177 | the Licensed Material is used other than for NonCommercial 178 | purposes. 179 | 180 | 181 | Section 3 -- License Conditions. 182 | 183 | Your exercise of the Licensed Rights is expressly made subject to the 184 | following conditions. 185 | 186 | a. Attribution. 187 | 188 | 1. If You Share the Licensed Material (including in modified 189 | form), You must: 190 | 191 | a. retain the following if it is supplied by the Licensor 192 | with the Licensed Material: 193 | 194 | i. identification of the creator(s) of the Licensed 195 | Material and any others designated to receive 196 | attribution, in any reasonable manner requested by 197 | the Licensor (including by pseudonym if 198 | designated); 199 | 200 | ii. a copyright notice; 201 | 202 | iii. a notice that refers to this Public License; 203 | 204 | iv. a notice that refers to the disclaimer of 205 | warranties; 206 | 207 | v. a URI or hyperlink to the Licensed Material to the 208 | extent reasonably practicable; 209 | 210 | b. indicate if You modified the Licensed Material and 211 | retain an indication of any previous modifications; and 212 | 213 | c. indicate the Licensed Material is licensed under this 214 | Public License, and include the text of, or the URI or 215 | hyperlink to, this Public License. 216 | 217 | 2. You may satisfy the conditions in Section 3(a)(1) in any 218 | reasonable manner based on the medium, means, and context in 219 | which You Share the Licensed Material. For example, it may be 220 | reasonable to satisfy the conditions by providing a URI or 221 | hyperlink to a resource that includes the required 222 | information. 223 | 3. If requested by the Licensor, You must remove any of the 224 | information required by Section 3(a)(1)(A) to the extent 225 | reasonably practicable. 226 | 227 | b. ShareAlike. 228 | 229 | In addition to the conditions in Section 3(a), if You Share 230 | Adapted Material You produce, the following conditions also apply. 231 | 232 | 1. The Adapter's License You apply must be a Creative Commons 233 | license with the same License Elements, this version or 234 | later, or a BY-NC-SA Compatible License. 235 | 236 | 2. You must include the text of, or the URI or hyperlink to, the 237 | Adapter's License You apply. You may satisfy this condition 238 | in any reasonable manner based on the medium, means, and 239 | context in which You Share Adapted Material. 240 | 241 | 3. You may not offer or impose any additional or different terms 242 | or conditions on, or apply any Effective Technological 243 | Measures to, Adapted Material that restrict exercise of the 244 | rights granted under the Adapter's License You apply. 245 | 246 | 247 | Section 4 -- Sui Generis Database Rights. 248 | 249 | Where the Licensed Rights include Sui Generis Database Rights that 250 | apply to Your use of the Licensed Material: 251 | 252 | a. for the avoidance of doubt, Section 2(a)(1) grants You the right 253 | to extract, reuse, reproduce, and Share all or a substantial 254 | portion of the contents of the database for NonCommercial purposes 255 | only; 256 | 257 | b. if You include all or a substantial portion of the database 258 | contents in a database in which You have Sui Generis Database 259 | Rights, then the database in which You have Sui Generis Database 260 | Rights (but not its individual contents) is Adapted Material, 261 | including for purposes of Section 3(b); and 262 | 263 | c. You must comply with the conditions in Section 3(a) if You Share 264 | all or a substantial portion of the contents of the database. 265 | 266 | For the avoidance of doubt, this Section 4 supplements and does not 267 | replace Your obligations under this Public License where the Licensed 268 | Rights include other Copyright and Similar Rights. 269 | 270 | 271 | Section 5 -- Disclaimer of Warranties and Limitation of Liability. 272 | 273 | a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE 274 | EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS 275 | AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF 276 | ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS, 277 | IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION, 278 | WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR 279 | PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS, 280 | ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT 281 | KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT 282 | ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU. 283 | 284 | b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE 285 | TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, 286 | NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT, 287 | INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES, 288 | COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR 289 | USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN 290 | ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR 291 | DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR 292 | IN PART, THIS LIMITATION MAY NOT APPLY TO YOU. 293 | 294 | c. The disclaimer of warranties and limitation of liability provided 295 | above shall be interpreted in a manner that, to the extent 296 | possible, most closely approximates an absolute disclaimer and 297 | waiver of all liability. 298 | 299 | 300 | Section 6 -- Term and Termination. 301 | 302 | a. This Public License applies for the term of the Copyright and 303 | Similar Rights licensed here. However, if You fail to comply with 304 | this Public License, then Your rights under this Public License 305 | terminate automatically. 306 | 307 | b. Where Your right to use the Licensed Material has terminated under 308 | Section 6(a), it reinstates: 309 | 310 | 1. automatically as of the date the violation is cured, provided 311 | it is cured within 30 days of Your discovery of the 312 | violation; or 313 | 314 | 2. upon express reinstatement by the Licensor. 315 | 316 | For the avoidance of doubt, this Section 6(b) does not affect any 317 | right the Licensor may have to seek remedies for Your violations 318 | of this Public License. 319 | 320 | c. For the avoidance of doubt, the Licensor may also offer the 321 | Licensed Material under separate terms or conditions or stop 322 | distributing the Licensed Material at any time; however, doing so 323 | will not terminate this Public License. 324 | 325 | d. Sections 1, 5, 6, 7, and 8 survive termination of this Public 326 | License. 327 | 328 | 329 | Section 7 -- Other Terms and Conditions. 330 | 331 | a. The Licensor shall not be bound by any additional or different 332 | terms or conditions communicated by You unless expressly agreed. 333 | 334 | b. Any arrangements, understandings, or agreements regarding the 335 | Licensed Material not stated herein are separate from and 336 | independent of the terms and conditions of this Public License. 337 | 338 | 339 | Section 8 -- Interpretation. 340 | 341 | a. For the avoidance of doubt, this Public License does not, and 342 | shall not be interpreted to, reduce, limit, restrict, or impose 343 | conditions on any use of the Licensed Material that could lawfully 344 | be made without permission under this Public License. 345 | 346 | b. To the extent possible, if any provision of this Public License is 347 | deemed unenforceable, it shall be automatically reformed to the 348 | minimum extent necessary to make it enforceable. If the provision 349 | cannot be reformed, it shall be severed from this Public License 350 | without affecting the enforceability of the remaining terms and 351 | conditions. 352 | 353 | c. No term or condition of this Public License will be waived and no 354 | failure to comply consented to unless expressly agreed to by the 355 | Licensor. 356 | 357 | d. Nothing in this Public License constitutes or may be interpreted 358 | as a limitation upon, or waiver of, any privileges and immunities 359 | that apply to the Licensor or You, including from the legal 360 | processes of any jurisdiction or authority. 361 | --------------------------------------------------------------------------------