Merge pull request #53 from hexatester/indonesian-translation
Add indonesian translations (2-js-basics)pull/146/head
Jen Looper
4 years ago
committed by
GitHub
commit
3e60e46353
@ -0,0 +1,18 @@
|
|||||||
|
*Complete this quiz after the lesson by checking one answer per question.*
|
||||||
|
|
||||||
|
1. Konstanta sama dengan `let` dan `var` untuk mendeklarasikan variabel kecuali
|
||||||
|
|
||||||
|
- [ ] Konstanta harus diinisialisasi
|
||||||
|
- [ ] Konstanta dapat diubah
|
||||||
|
- [ ] Konstanta dapat ditetapkan kembali
|
||||||
|
|
||||||
|
2. Numbers dan ____ adalah primitif JavaScript yang menangani data numerik
|
||||||
|
|
||||||
|
- [ ] bigint
|
||||||
|
- [ ] boolean
|
||||||
|
- [ ] star
|
||||||
|
|
||||||
|
3. String dapat berada di antara tanda kutip tunggal dan ganda
|
||||||
|
|
||||||
|
- [ ] benar
|
||||||
|
- [ ] salah
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
*Selesaikan kuis ini di kelas*
|
||||||
|
|
||||||
|
1. Boolean adalah tipe data yang dapat Anda gunakan untuk menguji panjang string
|
||||||
|
|
||||||
|
- [ ] benar
|
||||||
|
- [ ] salah
|
||||||
|
|
||||||
|
2. Berikut ini adalah operasi yang dapat Anda lakukan pada string
|
||||||
|
|
||||||
|
- [ ] concatenation
|
||||||
|
- [ ] appending
|
||||||
|
- [ ] splicing
|
||||||
|
|
||||||
|
3. `==` dan `===` dapat dipertukarkan
|
||||||
|
|
||||||
|
- [ ] benar
|
||||||
|
- [ ] salah
|
||||||
@ -0,0 +1,199 @@
|
|||||||
|
# Dasar-dasar JavaScript: Tipe Data
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## Kuis Pra-Kuliah
|
||||||
|
|
||||||
|
[Kuis pra-Kuliah](.github/pre-lecture-quiz.id.md)
|
||||||
|
|
||||||
|
Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web.
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Jenis data di JavaScript")
|
||||||
|
|
||||||
|
Mari kita mulai dengan variabel dan tipe data yang mengisinya!
|
||||||
|
|
||||||
|
## Variabel
|
||||||
|
|
||||||
|
Variabel menyimpan nilai yang dapat digunakan dan diubah di seluruh kode Anda.
|
||||||
|
|
||||||
|
Membuat dan **mendeklarasikan** variabel memiliki sintaks berikut **[kata kunci] [nama]**. Itu terdiri dari dua bagian:
|
||||||
|
|
||||||
|
- **Kata kunci (Keywords)**. Kata kunci bisa `let` atau `var`.
|
||||||
|
|
||||||
|
> Catatan, Mereka kata kunci `let` diperkenalkan di ES6 dan memberi variabel Anda apa yang disebut _block scope_. Anda disarankan untuk menggunakan `let` di atas `var`. Kita akan membahas cakupan blok lebih mendalam di bagian mendatang.
|
||||||
|
|
||||||
|
- **Nama variabel**, ini adalah nama yang Anda pilih sendiri.
|
||||||
|
|
||||||
|
### Tugas - bekerja dengan variabel
|
||||||
|
|
||||||
|
1. **Deklarasikan variabel**. Mari kita deklarasikan variabel menggunakan kata kunci `let`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let variabelSaya;
|
||||||
|
```
|
||||||
|
|
||||||
|
`variabelSaya` sekarang telah dideklarasikan menggunakan kata kunci `let`. Saat ini tidak memiliki nilai.
|
||||||
|
|
||||||
|
1. **Tetapkan nilai**. Simpan nilai dalam variabel dengan operator `=`, diikuti dengan nilai yang diharapkan.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
variabelSaya = 123;
|
||||||
|
```
|
||||||
|
|
||||||
|
> Catatan: penggunaan `=` dalam pelajaran ini berarti kita menggunakan "operator penugasan (assignment operator)", yang digunakan untuk menetapkan nilai ke variabel. Itu _tidak menunjukkan kesetaraan_.
|
||||||
|
|
||||||
|
`variabelSaya` sekarang telah _diinisialisasi (initialized)_ dengan nilai 123.
|
||||||
|
|
||||||
|
1. **Refaktor**. Ganti kode Anda dengan pernyataan berikut.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let variabelSaya = 123;
|
||||||
|
```
|
||||||
|
|
||||||
|
Di atas disebut inisialisasi _explisit_ saat variabel dideklarasikan dan diberi nilai pada saat yang sama.
|
||||||
|
|
||||||
|
1. **Ubah nilai variabel**. Ubah nilai variabel dengan cara berikut:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
variabelSaya = 321;
|
||||||
|
```
|
||||||
|
|
||||||
|
Setelah variabel dideklarasikan, Anda dapat mengubah nilainya di titik mana pun dalam kode Anda dengan operator `=` dan nilai baru.
|
||||||
|
|
||||||
|
✅ Cobalah! Anda dapat menulis JavaScript langsung di browser Anda. Buka jendela browser dan arahkan ke Alat Pengembang. Di konsol, Anda akan menemukan prompt; ketik `let variabelSaya = 123`, tekan enter, lalu ketik `variabelSaya`. Apa yang terjadi? Catatan, Anda akan mempelajari lebih lanjut tentang konsep ini di pelajaran berikutnya.
|
||||||
|
|
||||||
|
## Konstanta (Constants)
|
||||||
|
|
||||||
|
Deklarasi dan inisialisasi konstanta mengikuti konsep yang sama sebagai variabel, dengan pengecualian kata kunci `const`. Konstanta biasanya dideklarasikan dengan semua huruf besar.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const VARIABEL_SAYA = 123;
|
||||||
|
```
|
||||||
|
|
||||||
|
Konstanta mirip dengan variabel, dengan dua pengecualian:
|
||||||
|
|
||||||
|
- **Harus punya nilai**. Konstanta harus diinisialisasi, atau kesalahan akan terjadi saat menjalankan kode.
|
||||||
|
- **Referensi tidak dapat diubah**. Referensi konstanta tidak dapat diubah setelah diinisialisasi, atau kesalahan akan terjadi saat menjalankan kode. Mari kita lihat dua contoh:
|
||||||
|
|
||||||
|
- **Nilai sederhana**. Berikut ini TIDAK diperbolehkan:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const PI = 3;
|
||||||
|
PI = 4; // tidak diperbolehkan
|
||||||
|
```
|
||||||
|
|
||||||
|
- **Referensi objek dilindungi**. Berikut ini TIDAK diperbolehkan.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const obj = { a: 3 };
|
||||||
|
obj = { b: 5 }; // tidak diperbolehkan
|
||||||
|
```
|
||||||
|
|
||||||
|
- **Nilai objek tidak dilindungi**. Berikut diperbolehkan:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const obj = { a: 3 };
|
||||||
|
obj.a = 5; // diperbolehkan
|
||||||
|
```
|
||||||
|
|
||||||
|
Di atas Anda mengubah nilai objek tetapi bukan referensi itu sendiri, yang membuatnya diizinkan.
|
||||||
|
|
||||||
|
> Catatan, `const` berarti referensi dilindungi dari penugasan ulang. Nilainya tidak _immutable_ dan bisa berubah, terutama jika itu adalah konstruksi kompleks seperti sebuah objek.
|
||||||
|
|
||||||
|
## Tipe Data
|
||||||
|
|
||||||
|
Variabel dapat menyimpan berbagai jenis nilai, seperti angka dan teks. Berbagai jenis nilai ini dikenal sebagai **tipe data**. Tipe data adalah bagian penting dari pengembangan perangkat lunak karena membantu pengembang membuat keputusan tentang bagaimana kode harus ditulis dan bagaimana perangkat lunak harus dijalankan. Selain itu, beberapa tipe data memiliki fitur unik yang membantu mengubah atau mengekstrak informasi tambahan dalam sebuah nilai.
|
||||||
|
|
||||||
|
✅ Tipe Data juga disebut sebagai data primitif JavaScript, karena mereka adalah tipe data tingkat terendah yang disediakan oleh bahasa. Ada 6 tipe data primitif: string, number, bigint, boolean, undefined, dan symbol. Luangkan waktu sebentar untuk memvisualisasikan apa yang mungkin diwakili oleh masing-masing primitif ini. Apa itu `zebra`? Bagaimana dengan `0`? `true`?
|
||||||
|
|
||||||
|
### Angka (Numbers)
|
||||||
|
|
||||||
|
Pada bagian sebelumnya nilai `variabelSaya` adalah tipe data angka.
|
||||||
|
|
||||||
|
`let variabelSaya = 123;`
|
||||||
|
|
||||||
|
Variabel dapat menyimpan semua jenis angka, termasuk desimal atau angka negatif. Angka juga dapat digunakan dengan operator aritmatika, yang dibahas di [bagian selanjutnya](#Operator-Aritmatika).
|
||||||
|
|
||||||
|
### Operator Aritmatika
|
||||||
|
|
||||||
|
Ada beberapa jenis operator untuk digunakan saat menjalankan fungsi aritmatika, dan beberapa di antaranya tercantum di sini:
|
||||||
|
|
||||||
|
| Simbol | Deskripsi | Contoh |
|
||||||
|
| ------ | --------------------------------------------------- | ------------------------------------------ |
|
||||||
|
| `+` | **Penjumlahan**: Menghitung jumlah dari dua angka | `1 + 2 //hasil yang diharapkan adalah 3` |
|
||||||
|
| `-` | **Pengurangan**: Menghitung selisih dua angka | `1 - 2 //hasil yang diharapkan adalah -1` |
|
||||||
|
| `*` | **Perkalian**: Menghitung hasil kali dua angka | `1 * 2 //hasil yang diharapkan adalah 2` |
|
||||||
|
| `/` | **Pembagian**: Menghitung hasil bagi dari dua angka | `1 / 2 //hasil yang diharapkan adalah 0.5` |
|
||||||
|
| `%` | **Sisa**: Menghitung sisa dari pembagian dua angka | `3 % 2 //hasil yang diharapkan adalah 1` |
|
||||||
|
|
||||||
|
✅ Cobalah! Coba operasi aritmatika di konsol browser Anda. Apakah hasilnya mengejutkan Anda?
|
||||||
|
|
||||||
|
### String
|
||||||
|
|
||||||
|
String adalah kumpulan karakter yang berada di antara tanda kutip tunggal atau ganda.
|
||||||
|
|
||||||
|
- `'Ini string'`
|
||||||
|
- `"Ini juga string"`
|
||||||
|
- `let myString = 'Ini adalah nilai string yang disimpan dalam variabel';`
|
||||||
|
|
||||||
|
Ingatlah untuk menggunakan tanda kutip saat menulis string, atau JavaScript akan menganggapnya sebagai nama variabel.
|
||||||
|
|
||||||
|
### Memformat String
|
||||||
|
|
||||||
|
String bersifat tekstual, dan akan membutuhkan pemformatan dari waktu ke waktu.
|
||||||
|
|
||||||
|
Untuk **menggabungkan (concatenate)** dua string atau lebih, atau menggabungkannya, gunakan operator `+`.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let myString1 = "Hello";
|
||||||
|
let myString2 = "World";
|
||||||
|
|
||||||
|
myString1 + myString2 + "!"; //HelloWorld!
|
||||||
|
myString1 + " " + myString2 + "!"; //Hello World!
|
||||||
|
myString1 + ", " + myString2 + "!"; //Hello, World!
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Mengapa `1 + 1 = 2` di JavaScript, tetapi`'1' + '1' = 11?`Pikirkanlah. Bagaimana dengan `'1' + 1`?
|
||||||
|
|
||||||
|
**Template literals** adalah cara lain untuk memformat string, kecuali sebagai pengganti tanda kutip, digunakan backtick. Apa pun yang bukan teks biasa harus ditempatkan di dalam placeholder `${ }`. Ini termasuk variabel apa pun yang mungkin berupa string.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let myString1 = "Hello";
|
||||||
|
let myString2 = "World";
|
||||||
|
|
||||||
|
`${myString1} ${myString2}!` //Hello World!
|
||||||
|
`${myString1}, ${myString2}!`; //Hello World!
|
||||||
|
```
|
||||||
|
|
||||||
|
Anda dapat mencapai tujuan pemformatan Anda dengan salah satu metode, tetapi template literal akan menghormati spasi dan jeda baris apa pun.
|
||||||
|
|
||||||
|
✅ Kapan Anda akan menggunakan template literal dibanding string biasa?
|
||||||
|
|
||||||
|
### Boolean
|
||||||
|
|
||||||
|
Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean dapat membantu membuat keputusan tentang baris kode mana yang harus dijalankan ketika kondisi tertentu terpenuhi. Dalam banyak kasus, [operator](#operator) membantu pengaturan nilai Boolean dan Anda akan sering melihat dan menulis variabel yang diinisialisasi atau nilainya diperbarui dengan operator.
|
||||||
|
|
||||||
|
- `let myTrueBool = true`
|
||||||
|
- `let myFalseBool = false`
|
||||||
|
|
||||||
|
✅ Variabel dapat dianggap 'benar (truthy)' jika dievaluasi ke boolean `true`. Menariknya, di JavaScript, [semua nilai adalah benar (truthy) kecuali jika didefinisikan sebagai salah](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Tantangan
|
||||||
|
|
||||||
|
JavaScript terkenal karena cara yang mengejutkan dalam menangani tipe data pada kesempatan tertentu. Lakukan sedikit riset tentang 'kejutaan' ini. Misalnya: sensitivitas kasus bisa menggigit! Coba ini di konsol Anda: `let usia = 1; let Usia = 2; usia == Usia` (meghasilkan `false` - kenapa?). Kejutan lain apa yang bisa kamu temukan?
|
||||||
|
|
||||||
|
## Kuis Pasca-Kuliah
|
||||||
|
|
||||||
|
[Kuis pasca-kuliah](.github/post-lecture-quiz.id.md)
|
||||||
|
|
||||||
|
## Review & Belajar Mandiri
|
||||||
|
|
||||||
|
Lihat [daftar latihan JavaScript ini](https://css-tricks.com/snippets/javascript/) dan coba salah satunya. Apa yang kamu pelajari?
|
||||||
|
|
||||||
|
## Tugas
|
||||||
|
|
||||||
|
[Praktek Tipe Data](assignment.id.md)
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Praktek Tipe Data
|
||||||
|
|
||||||
|
## Instruksi
|
||||||
|
|
||||||
|
Bayangkan Anda sedang membuat keranjang belanja. Tulislah beberapa dokumentasi tentang tipe data yang Anda perlukan untuk melengkapi pengalaman berbelanja Anda. Bagaimana Anda sampai pada pilihan Anda?
|
||||||
|
|
||||||
|
## Rubrik
|
||||||
|
|
||||||
|
| Kriteria | Contoh | Memenuhi Syarat | Perlu Perbaikan |
|
||||||
|
|----------|----------------------------------------------------------------------------------------|------------------------------|----------------------------|
|
||||||
|
| | Enam tipe data didaftar dan dieksplorasi secara rinci, mendokumentasikan penggunaannya | Empat tipe data dieksplorasi | Dua tipe data dieksplorasi |
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.*
|
||||||
|
|
||||||
|
1. Argumen harus disediakan untuk semua parameter dalam suatu fungsi
|
||||||
|
|
||||||
|
- [ ] benar
|
||||||
|
- [ ] salah
|
||||||
|
|
||||||
|
2. Apa fungsi nilai default?
|
||||||
|
|
||||||
|
- [ ] Menetapkan nilai yang benar
|
||||||
|
- [ ] Memberikan nilai awal untuk parameter sehingga kode Anda tetap berfungsi jika Anda menghilangkan argumen untuk itu
|
||||||
|
- [ ] Tidak memiliki utilitas
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
*Selesaikan kuis ini di kelas*
|
||||||
|
|
||||||
|
1. Apa itu argumen?
|
||||||
|
|
||||||
|
- [ ] Itu adalah sesuatu yang Anda deklarasikan dalam definisi fungsi
|
||||||
|
- [ ] Itu adalah sesuatu yang Anda berikan ke suatu fungsi pada waktu pemanggilan
|
||||||
|
- [ ] Itu adalah sesuatu yang Anda miliki dengan orang yang Anda kenal
|
||||||
|
|
||||||
|
2. Benar atau salah: suatu fungsi harus mengembalikan sesuatu
|
||||||
|
|
||||||
|
- [ ] benar
|
||||||
|
- [ ] salah
|
||||||
@ -0,0 +1,194 @@
|
|||||||
|
# Dasar-dasar JavaScript: Metode dan Fungsi
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## Kuis Pra-Kuliah
|
||||||
|
|
||||||
|
[Kuis pra-Kuliah](./.github/pre-lecture-quiz.id.md)
|
||||||
|
|
||||||
|
Ketika kita berpikir tentang menulis kode, kita selalu ingin memastikan kode kita dapat dibaca. Meskipun ini terdengar berlawanan dengan intuisi, kode dibaca lebih banyak kali daripada yang tertulis. Salah satu alat inti dalam kotak alat pengembang untuk memastikan kode yang dapat dipelihara adalah **function (fungsi)**.
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Metode dan Fungsi")
|
||||||
|
|
||||||
|
## Fungsi
|
||||||
|
|
||||||
|
Pada intinya, fungsi adalah sekumpulan kode yang dapat kita jalankan sesuai permintaan. Ini sempurna untuk skenario di mana kita perlu melakukan tugas yang sama beberapa kali; daripada menduplikasi logika di beberapa lokasi (yang akan menyulitkan pembaruan saat waktunya tiba), kita dapat memusatkannya di satu lokasi, dan memanggilnya kapan pun kita membutuhkan operasi dilakukan - Anda bahkan dapat memanggil fungsi dari fungsi lain!.
|
||||||
|
|
||||||
|
Sama pentingnya adalah kemampuan untuk menamai suatu fungsi. Meskipun ini mungkin tampak sepele, nama tersebut memberikan cara cepat untuk mendokumentasikan bagian kode. Anda bisa menganggap ini sebagai label pada sebuah tombol. Jika saya mengklik tombol yang bertuliskan "Batalkan pengatur waktu", saya tahu itu akan berhenti menjalankan jam.
|
||||||
|
|
||||||
|
## Membuat dan memanggil suatu fungsi
|
||||||
|
|
||||||
|
Sintaks untuk suatu fungsi terlihat seperti berikut:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function nameOfFunction() {
|
||||||
|
// definisi fungsi
|
||||||
|
// definisi fungsi/tubuh
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Jika saya ingin membuat fungsi untuk menampilkan salam, mungkin akan terlihat seperti ini:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function tampilkanSapaan() {
|
||||||
|
console.log("Hello, world!");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Kapanpun kita ingin memanggil (atau memanggil) fungsi kita, kita menggunakan nama fungsi yang diikuti dengan `()`. Perlu diperhatikan fakta bahwa fungsi kita dapat didefinisikan sebelum atau sesudah kita memutuskan untuk memanggilnya; kompilator JavaScript (JavaScript compiler) akan menemukannya untuk Anda.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// memanggil fungsi kita
|
||||||
|
tampilkanSapaan();
|
||||||
|
```
|
||||||
|
|
||||||
|
> **CATATAN:** Ada jenis fungsi khusus yang dikenal sebagai **method**, yang telah Anda gunakan! Faktanya, kita melihat ini di demo kita di atas ketika kita menggunakan `console.log`. Apa yang membuat metode berbeda dari fungsi adalah metode dilampirkan ke objek (`konsol` dalam contoh kita), sementara fungsi mengambang bebas. Anda akan mendengar banyak pengembang menggunakan istilah ini secara bergantian.
|
||||||
|
|
||||||
|
### Praktik terbaik fungsi
|
||||||
|
|
||||||
|
Ada beberapa praktik terbaik yang perlu diperhatikan saat membuat fungsi
|
||||||
|
|
||||||
|
- Seperti biasa, gunakan nama deskriptif agar Anda tahu fungsinya
|
||||||
|
- Gunakan **camelCasing** untuk menggabungkan kata-kata
|
||||||
|
- Jaga agar fungsi Anda tetap fokus pada tugas tertentu
|
||||||
|
|
||||||
|
## Memasukkan informasi ke suatu fungsi
|
||||||
|
|
||||||
|
Agar suatu fungsi lebih dapat digunakan kembali, Anda sering kali ingin menyampaikan informasi ke dalamnya. Jika kita mempertimbangkan contoh `tampilkanSapaan` di atas, itu hanya akan menampilkan **Halo, dunia!**. Bukan fungsi paling berguna yang bisa dibuat seseorang. Jika kita ingin membuatnya sedikit lebih fleksibel, seperti mengizinkan seseorang untuk menentukan nama orang yang akan disapa, kita dapat menambahkan **parameter**. Parameter (juga terkadang disebut **argumen**), adalah informasi tambahan yang dikirim ke suatu fungsi.
|
||||||
|
|
||||||
|
Parameter dicantumkan di bagian definisi dalam tanda kurung dan dipisahkan dengan koma seperti ini:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function nama(param, param2, param3) {}
|
||||||
|
```
|
||||||
|
|
||||||
|
Kita dapat memperbarui `tampilkanSapaan` kita untuk menerima sebuah nama dan menampilkannya.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function tampilkanSapaan(nama) {
|
||||||
|
const pesan = `Hello, ${nama}!`;
|
||||||
|
console.log(pesan);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Ketika kita ingin memanggil fungsi kita dan memasukkan parameternya, kita tentukan di dalam tanda kurung.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
tampilkanSapaan("Christopher");
|
||||||
|
// Menampilkan "Hello, Christopher!" ketika dijalankan
|
||||||
|
```
|
||||||
|
|
||||||
|
## Nilai dasar (Nilai Default)
|
||||||
|
|
||||||
|
Kita dapat membuat fungsi kita lebih fleksibel dengan menambahkan lebih banyak parameter. Tetapi bagaimana jika kita tidak ingin setiap nilai ditentukan? Sesuai dengan contoh sapaan kita, kita bisa membiarkan nama sesuai kebutuhan (kita perlu tahu siapa yang kita sapa), tapi kita ingin membiarkan sapaan itu sendiri disesuaikan sesuai keinginan. Jika seseorang tidak ingin menyesuaikannya, kita memberikan nilai default sebagai gantinya. Untuk memberikan nilai default ke parameter, kita menyetelnya dengan cara yang sama seperti kita menyetel nilai untuk variabel - `namaParameter = 'nilaiDefault'`. Berikut contoh lengkapnya:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function tampilkanSapaan(nama, salam = "Hello") {
|
||||||
|
console.log(`${salam}, ${nama}`);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Ketika kita memanggil fungsi tersebut, kita kemudian dapat memutuskan apakah kita ingin menetapkan nilai dari `salam`.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
tampilkanSapaan("Christopher");
|
||||||
|
// menampilkan "Hello, Christopher"
|
||||||
|
|
||||||
|
tampilkanSapaan("Christopher", "Hi");
|
||||||
|
// menampilkan "Hi, Christopher"
|
||||||
|
```
|
||||||
|
|
||||||
|
## Nilai Kembali (Return values)
|
||||||
|
|
||||||
|
Hingga saat ini fungsi yang kita buat akan selalu menghasilkan [konsol](https://developer.mozilla.org/en-US/docs/Web/API/console). Terkadang ini persis seperti yang kita cari, terutama saat kita membuat fungsi yang akan memanggil layanan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan kalkulasi dan memberikan nilai kembali sehingga saya dapat menggunakannya di tempat lain?
|
||||||
|
|
||||||
|
Kita bisa melakukan ini dengan menggunakan **nilai kembali (return value)**. Nilai kembali dikembalikan oleh fungsi, dan dapat disimpan dalam variabel sama seperti kita dapat menyimpan nilai literal seperti string atau angka.
|
||||||
|
|
||||||
|
Jika suatu fungsi mengembalikan sesuatu maka kata kunci `return` digunakan. Kata kunci `return` mengharapkan nilai atau referensi dari apa yang dikembalikan seperti:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
return variabelSaya;
|
||||||
|
```
|
||||||
|
|
||||||
|
Kita bisa membuat fungsi untuk membuat pesan ucapan dan mengembalikan nilainya ke pemanggil
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function buatPesanSapaan(nama) {
|
||||||
|
const pesan = `Hello, ${nama}`;
|
||||||
|
return pesan;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Saat memanggil fungsi ini, kita akan menyimpan nilai dalam variabel. Ini hampir sama dengan cara kita menetapkan variabel ke nilai statis (seperti `const nama = 'Christopher'`).
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const pesanSapaan = buatPesanSapaan("Christopher");
|
||||||
|
```
|
||||||
|
|
||||||
|
## Fungsi sebagai parameter untuk fungsi
|
||||||
|
|
||||||
|
Saat Anda maju dalam karir pemrograman Anda, Anda akan menemukan fungsi yang menerima fungsi sebagai parameter. Trik rapi ini biasanya digunakan ketika kita tidak tahu kapan sesuatu akan terjadi atau selesai, tetapi kita tahu kita perlu melakukan operasi sebagai tanggapan.
|
||||||
|
|
||||||
|
Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulai timer dan akan mengeksekusi kode setelah selesai. Kita perlu memberi tahu kode apa yang ingin kita jalankan. Kedengarannya seperti pekerjaan yang sempurna untuk suatu fungsi!
|
||||||
|
|
||||||
|
Jika Anda menjalankan kode di bawah ini, setelah 3 detik Anda akan melihat pesan **3 detik telah berlalu**.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function tampilkanSelesai() {
|
||||||
|
console.log("3 detik telah berlalu");
|
||||||
|
}
|
||||||
|
// nilai timer dalam milidetik
|
||||||
|
setTimeout(3000, tampilkanSelesai);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Fungsi anonim
|
||||||
|
|
||||||
|
Mari kita lihat lagi apa yang telah kita bangun. Kita membuat fungsi dengan nama yang akan digunakan satu kali. Saat aplikasi kita menjadi lebih kompleks, kita dapat melihat diri kita sendiri membuat banyak fungsi yang hanya akan dipanggil sekali. Ini tidak ideal. Ternyata, kita tidak selalu perlu memberi nama!
|
||||||
|
|
||||||
|
Saat kita mengirimkan fungsi sebagai parameter, kita dapat mengabaikan pembuatannya terlebih dahulu dan sebagai gantinya membuatnya sebagai bagian dari parameter. Kita menggunakan kata kunci `function` yang sama, tetapi kita membuatnya sebagai parameter.
|
||||||
|
|
||||||
|
Mari tulis ulang kode di atas untuk menggunakan fungsi anonim:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
setTimeout(3000, function () {
|
||||||
|
console.log("3 detik telah berlalu");
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Jika Anda menjalankan kode baru kita, Anda akan melihat kita mendapatkan hasil yang sama. Kita telah membuat fungsi, tetapi tidak harus memberinya nama!
|
||||||
|
|
||||||
|
### Fungsi panah gemuk
|
||||||
|
|
||||||
|
Satu pintasan yang umum di banyak bahasa pemrograman (termasuk JavaScript) adalah kemampuan untuk menggunakan apa yang disebut fungsi **panah (arrow)** atau **panah gemuk (fat arrow)**. Ini menggunakan indikator khusus `=>`, yang terlihat seperti panah - demikian namanya! Dengan menggunakan `=>`, kita dapat melewati kata kunci `function`.
|
||||||
|
|
||||||
|
Mari kita tulis ulang kode kita sekali lagi untuk menggunakan fungsi panah gemuk:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
setTimeout(3000, () => {
|
||||||
|
console.log("3 detik telah berlalu");
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Kapan menggunakan setiap strategi
|
||||||
|
|
||||||
|
Anda sekarang telah melihat bahwa kita memiliki tiga cara untuk meneruskan fungsi sebagai parameter dan mungkin bertanya-tanya kapan harus menggunakannya. Jika Anda tahu Anda akan menggunakan fungsi tersebut lebih dari sekali, buatlah seperti biasa. Jika Anda akan menggunakannya hanya untuk satu lokasi, biasanya yang terbaik adalah menggunakan fungsi anonim. Apakah Anda menggunakan fungsi panah gemuk atau tidak atau sintaks `function` yang lebih tradisional terserah Anda, tetapi Anda akan melihat sebagian besar pengembang modern lebih memilih`=>`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Tantangan
|
||||||
|
|
||||||
|
Bisakah Anda mengartikulasikan dalam satu kalimat perbedaan antara fungsi dan metode? Cobalah!
|
||||||
|
|
||||||
|
## Kuis Pasca-Kuliah
|
||||||
|
|
||||||
|
[Kuis pasca-kuliah](./.github/post-lecture-quiz.id.md)
|
||||||
|
|
||||||
|
## Review & Belajar Mandiri
|
||||||
|
|
||||||
|
Layak [membaca lebih banyak tentang fungsi panah](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), karena semakin sering digunakan dalam basis kode. Berlatihlah menulis fungsi, lalu menulis ulang dengan sintaks ini.
|
||||||
|
|
||||||
|
## Tugas
|
||||||
|
|
||||||
|
[Bersenang-senang dengan Fungsi](./assignment.id.md)
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# Bersenang-senang dengan Fungsi
|
||||||
|
|
||||||
|
## Instruksi
|
||||||
|
|
||||||
|
Buat fungsi yang berbeda, baik fungsi yang mengembalikan sesuatu maupun fungsi yang tidak mengembalikan apa pun.
|
||||||
|
|
||||||
|
Lihat apakah Anda dapat membuat fungsi yang memiliki campuran parameter dan parameter dengan nilai default.
|
||||||
|
|
||||||
|
## Rubrik
|
||||||
|
|
||||||
|
| Kriteria | Contoh | Memenuhi Syarat | Perlu Perbaikan |
|
||||||
|
|----------|---------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|---------------------|
|
||||||
|
| | Solusi ditawarkan dengan dua atau lebih fungsi yang berkinerja baik dengan parameter yang beragam | Solusi kerja ditawarkan dengan satu fungsi dan beberapa parameter | Solusi memiliki bug |
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.*
|
||||||
|
|
||||||
|
1. Apa yang akan dikembalikan kode berikut: `'1' == 1`
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. Pilih operator yang benar untuk mengekspresikan logika _or_
|
||||||
|
|
||||||
|
- [] `a | b`
|
||||||
|
- [] `a || b`
|
||||||
|
- [] `a atau b`
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
*Selesaikan kuis ini di kelas*
|
||||||
|
|
||||||
|
1. Operator berikut `==` dipanggil
|
||||||
|
|
||||||
|
- [ ] Kesetaraan
|
||||||
|
- [ ] Kesetaraan yang ketat
|
||||||
|
- [ ] Penugasan
|
||||||
|
|
||||||
|
2. Perbandingan dalam JavaScript mengembalikan tipe apa?
|
||||||
|
|
||||||
|
- [ ] boolean
|
||||||
|
- [ ] null
|
||||||
|
- [ ] string
|
||||||
@ -0,0 +1,175 @@
|
|||||||
|
# Dasar-dasar JavaScript: Membuat Keputusan
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## Kuis Pra-Kuliah
|
||||||
|
|
||||||
|
[Kuis pra-Kuliah](./.github/pre-lecture-quiz.id.md)
|
||||||
|
|
||||||
|
Membuat keputusan dan mengontrol urutan kode Anda berjalan membuat kode Anda dapat digunakan kembali dan kuat. Bagian ini membahas sintaks untuk mengontrol aliran data di JavaScript dan signifikansinya saat digunakan dengan tipe data Boolean.
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=SxTp8j-fMMY "Membuat keputusan")
|
||||||
|
|
||||||
|
## Rekap Singkat tentang Boolean
|
||||||
|
|
||||||
|
Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean membantu membuat keputusan tentang baris kode mana yang harus dijalankan ketika kondisi tertentu terpenuhi.
|
||||||
|
|
||||||
|
Setel boolean Anda menjadi true atau false seperti ini:
|
||||||
|
|
||||||
|
`let myTrueBool = true`
|
||||||
|
`let myFalseBool = false`
|
||||||
|
|
||||||
|
✅ Nama Boolean diambil dari ahli matematika, filsuf, dan ahli logika Inggris George Boole (1815-1864).
|
||||||
|
|
||||||
|
## Operator Perbandingan dan Boolean
|
||||||
|
|
||||||
|
Operator digunakan untuk mengevaluasi kondisi dengan membuat perbandingan yang akan menghasilkan nilai Boolean. Berikut ini adalah daftar operator yang sering digunakan.
|
||||||
|
|
||||||
|
| Simbol | Deskripsi | Contoh |
|
||||||
|
| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
|
||||||
|
| `<` | **Kurang dari**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri kurang dari kanan | `5 < 6 // true` |
|
||||||
|
| `<=` | **Kurang dari atau sama dengan**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri kurang dari atau sama dengan kanan | `5 <= 6 // true` |
|
||||||
|
| `>` | **Lebih besar dari**: Membandingkan dua nilai dan mengembalikan tipe data Boolean `true` jika nilai di sisi kiri lebih besar dari kanan | `5 > 6 // false` |
|
||||||
|
| `>=` | **Lebih besar dari atau sama dengan**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri lebih besar dari atau sama dengan kanan | `5 >= 6 // false` |
|
||||||
|
| `===` | **Kesetaraan ketat**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di kanan dan kiri sama DAN merupakan jenis data yang sama. | `5 === 6 // false` |
|
||||||
|
| `!==` | **Ketidaksamaan**: Membandingkan dua nilai dan mengembalikan nilai Boolean yang berlawanan dari yang akan dikembalikan oleh operator persamaan ketat | `5 !== 6 // true` |
|
||||||
|
|
||||||
|
✅ Uji pengetahuan Anda dengan menulis beberapa perbandingan di konsol browser Anda. Apakah data yang dikembalikan mengejutkan Anda?
|
||||||
|
|
||||||
|
## Pernyataan If
|
||||||
|
|
||||||
|
Pernyataan if akan menjalankan kode di antara bloknya jika kondisinya benar.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
if (kondisi) {
|
||||||
|
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Operator logika sering digunakan untuk membentuk kondisi tersebut.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let uangSekarang;
|
||||||
|
let hargaLaptop;
|
||||||
|
|
||||||
|
if (uangSekarang >= hargaLaptop) {
|
||||||
|
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||||
|
console.log("Mendapatkan laptop baru!");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Pernyataan IF..Else
|
||||||
|
|
||||||
|
Pernyataan `else` akan menjalankan kode di antara bloknya jika kondisinya salah. Ini opsional dengan pernyataan `if`, jadi tidak semua `if` harus diikuti dengan pernyataan `else`.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let uangSekarang;
|
||||||
|
let hargaLaptop;
|
||||||
|
|
||||||
|
if (uangSekarang >= hargaLaptop) {
|
||||||
|
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||||
|
console.log("Mendapatkan laptop baru!");
|
||||||
|
} else {
|
||||||
|
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||||
|
console.log("Belum bisa membeli laptop baru!");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Uji pemahaman Anda tentang kode ini dan kode berikut dengan menjalankannya di konsol browser. Ubah nilai variabel uangSekarang dan hargaLaptop untuk mengubah `console.log()` yang dikembalikan.
|
||||||
|
|
||||||
|
## Operator Logis dan Boolean
|
||||||
|
|
||||||
|
Keputusan mungkin memerlukan lebih dari satu perbandingan, dan dapat digabungkan dengan operator logika untuk menghasilkan nilai Boolean.
|
||||||
|
|
||||||
|
| Simbol | Deskripsi | Contoh |
|
||||||
|
| ------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
||||||
|
| `&&` | **Logical AND**: Membandingkan dua ekspresi Boolean. Mengembalikan nilai benar **hanya** jika kedua sisi benar | `(5 > 6) && (5 < 6 ) //Satu sisi salah, sisi lainnya benar. Mengembalikan nilai salah` |
|
||||||
|
| `\|\|` | **Logical OR**: Membandingkan dua ekspresi Boolean. Mengembalikan nilai benar jika setidaknya satu sisi benar | `(5 > 6) \|\| (5 < 6) //Satu sisi salah, sisi lainnya benar. Mengembalikan nilai true` |
|
||||||
|
| `!` | **Logical NOT**: Menampilkan nilai kebalikan dari ekspresi Boolean | `!(5 > 6) // 5 tidak lebih besar dari 6, tapi "!" akan kembali benar` |
|
||||||
|
|
||||||
|
## Kondisi dan Keputusan dengan Operator Logis
|
||||||
|
|
||||||
|
Operator logika dapat digunakan untuk membentuk kondisi dalam pernyataan if..else.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let uangSekarang;
|
||||||
|
let hargaLaptop;
|
||||||
|
let hargaDiskonLaptop = hargaLaptop - hargaLaptop * 0.2; //Harga laptop diskon 20 persen
|
||||||
|
|
||||||
|
if (uangSekarang >= hargaLaptop || uangSekarang >= hargaDiskonLaptop) {
|
||||||
|
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||||
|
console.log("Mendapatkan laptop baru!");
|
||||||
|
} else {
|
||||||
|
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||||
|
console.log("Belum bisa membeli laptop baru!");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Operator Negasi
|
||||||
|
|
||||||
|
Anda telah melihat sejauh ini bagaimana jika Anda bisa menggunakan pernyataan `if ... else` untuk membuat logika kondisional. Apa pun yang menjadi `jika` perlu dievaluasi menjadi benar / salah. Dengan menggunakan operator `!` Anda dapat _negate_ ekspresi. Ini akan terlihat seperti ini:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
if (!kondisi) {
|
||||||
|
// berjalan jika kondisinya false
|
||||||
|
} else {
|
||||||
|
// berjalan jika kondisinya true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Ekspresi Terner
|
||||||
|
|
||||||
|
`if ... else` bukanlah satu-satunya cara untuk mengekspresikan logika keputusan. Anda juga dapat menggunakan sesuatu yang disebut operator terner (ternary operator). Sintaksnya terlihat seperti ini:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let variable = kondisi ? <kembalikan ini jika benar> : <kembalikan ini jika salah>`
|
||||||
|
```
|
||||||
|
|
||||||
|
Di bawah ini adalah contoh yang lebih nyata:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let nomorPertama = 20;
|
||||||
|
let nomorKedua = 10;
|
||||||
|
let nomorTerbesar = nomorPertama > nomorKedua ? nomorPertama : nomorKedua;
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Luangkan waktu sebentar untuk membaca kode ini beberapa kali. Apakah Anda memahami cara kerja operator ini?
|
||||||
|
|
||||||
|
Di atas menyatakan bahwa
|
||||||
|
|
||||||
|
- jika `nomorPertama` lebih besar dari `nomorKedua`
|
||||||
|
- tetapkan `nomorPertama` ke `nomorTerbesar`
|
||||||
|
- jika tidak tetapkan `nomorKedua`.
|
||||||
|
|
||||||
|
Ekspresi terner hanyalah cara ringkas untuk menulis kode di bawah ini:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let nomorTerbesar;
|
||||||
|
if (nomorPertama > nomorKedua) {
|
||||||
|
nomorTerbesar = nomorPertama;
|
||||||
|
} else {
|
||||||
|
nomorTerbesar = nomorKedua;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Tantangan
|
||||||
|
|
||||||
|
Buat program yang ditulis pertama kali dengan operator logika, lalu tulis ulang menggunakan ekspresi terner. Apa sintaks pilihan Anda?
|
||||||
|
|
||||||
|
## Kuis Pasca-Kuliah
|
||||||
|
|
||||||
|
[Kuis pasca-kuliah](.github/post-lecture-quiz.md)
|
||||||
|
|
||||||
|
## Review & Belajar Mandiri
|
||||||
|
|
||||||
|
Baca lebih lanjut tentang banyak operator yang tersedia untuk pengguna [di MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators).
|
||||||
|
|
||||||
|
Lihat [pencarian operator](https://joshwcomeau.com/operator-lookup/) oleh Josh Comeau yang luar biasa!
|
||||||
|
|
||||||
|
## Tugas
|
||||||
|
|
||||||
|
[Operator](./assignment.id.md)
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
# Operator
|
||||||
|
|
||||||
|
## Instruksi
|
||||||
|
|
||||||
|
Bermain-main dengan operator. Berikut adalah saran untuk program yang dapat Anda terapkan:
|
||||||
|
|
||||||
|
Anda memiliki satu set siswa dari dua sistem penilaian yang berbeda.
|
||||||
|
|
||||||
|
### Sistem Layanan pertama
|
||||||
|
|
||||||
|
Satu sistem didefinisikan sebagai nilai dari 1-5 di mana 3 ke atas berarti Anda lulus kursus.
|
||||||
|
|
||||||
|
### Sistem Produk kedua
|
||||||
|
|
||||||
|
Sistem nilai lain memiliki nilai berikut `A, A-, B, B-, C, C-` di mana `A` adalah nilai tertinggi dan `C` adalah nilai kelulusan terendah.
|
||||||
|
|
||||||
|
### Tugas
|
||||||
|
|
||||||
|
Diberikan array `semuaPelajar` yang mewakili semua siswa dan nilai, buat array baru `pelajarYangLulus` yang berisi semua siswa yang lulus.
|
||||||
|
|
||||||
|
> TIPS, gunakan for-loop dan if ... else dan operator perbandingan:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let semuaPelajar = [
|
||||||
|
'A',
|
||||||
|
'B-'
|
||||||
|
1,
|
||||||
|
4
|
||||||
|
5,
|
||||||
|
2
|
||||||
|
]
|
||||||
|
|
||||||
|
let pelajarYangLulus = [];
|
||||||
|
```
|
||||||
|
|
||||||
|
## Rubrik
|
||||||
|
|
||||||
|
| Kriteria | Contoh | Memenuhi | Perlu Perbaikan |
|
||||||
|
| -------- | ------------------------ | ------------------------------ | --------------------------- |
|
||||||
|
| | Solusi lengkap disajikan | Solusi tidak lengkap disajikan | Solusi dengan bug disajikan |
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.*
|
||||||
|
|
||||||
|
1. Bagian for-loop manakah yang perlu Anda modifikasi untuk menambah iterasinya sebesar 5
|
||||||
|
|
||||||
|
- [ ] kondisi
|
||||||
|
- [ ] counter
|
||||||
|
- [ ] ekspresi-iterasi
|
||||||
|
|
||||||
|
2. Apa perbedaan antara `while` dan `for-loop`
|
||||||
|
|
||||||
|
- [ ] Sebuah `for-loop` memiliki penghitung dan ekspresi-iterasi, di mana `while` hanya memiliki kondisi
|
||||||
|
- [ ] A `while` memiliki penghitung dan ekspresi-iterasi di mana `for-loop` hanya memiliki kondisi
|
||||||
|
- [ ] Mereka sama, hanya alias untuk satu sama lain
|
||||||
|
|
||||||
|
3. Diberikan kode `for (let i = 1; i <5; i ++)`, berapa banyak iterasi yang akan dilakukan?
|
||||||
|
|
||||||
|
- [ ] 5
|
||||||
|
- [ ] 4
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
*Selesaikan kuis ini di kelas*
|
||||||
|
|
||||||
|
1. Untuk merujuk ke item tertentu dalam sebuah array, Anda akan menggunakan a
|
||||||
|
|
||||||
|
- [ ] kurung siku `[]`
|
||||||
|
- [ ] indeks
|
||||||
|
- [ ] kurung kurawal `{}`
|
||||||
|
|
||||||
|
2. Bagaimana Anda mendapatkan jumlah item dalam sebuah array
|
||||||
|
|
||||||
|
- [ ] Metode `len(array)`
|
||||||
|
- [ ] Properti `size` pada array
|
||||||
|
- [ ] Properti `length` pada array
|
||||||
@ -0,0 +1,141 @@
|
|||||||
|
# Dasar-dasar JavaScript: Array dan Loop
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## Kuis Pra-Kuliah
|
||||||
|
|
||||||
|
[Kuis pra-Kuliah](./.github/pre-lecture-quiz.id.md)
|
||||||
|
|
||||||
|
Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web. Dalam pelajaran ini, Anda akan belajar tentang array dan loop, yang digunakan untuk memanipulasi data.
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=Q_CRM2lXXBg "Array dan Loop")
|
||||||
|
|
||||||
|
## Array
|
||||||
|
|
||||||
|
Bekerja dengan data adalah tugas umum untuk bahasa apa pun, dan ini jauh lebih mudah saat data diatur dalam format struktural, seperti array. Dengan array, data disimpan dalam struktur yang mirip dengan daftar. Salah satu manfaat utama dari array adalah Anda dapat menyimpan berbagai jenis data dalam satu array.
|
||||||
|
|
||||||
|
✅ Array ada di sekitar kita! Dapatkah Anda memikirkan contoh array dalam kehidupan nyata, seperti array panel surya?
|
||||||
|
|
||||||
|
Sintaks untuk array adalah sepasang tanda kurung siku.
|
||||||
|
|
||||||
|
`let arrayKu = [];`
|
||||||
|
|
||||||
|
Ini adalah array kosong, tetapi array dapat dideklarasikan sudah diisi dengan data. Beberapa nilai dalam array dipisahkan dengan koma.
|
||||||
|
|
||||||
|
`let rasaRasaEsKrim = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
|
||||||
|
|
||||||
|
Nilai array diberi nilai unik yang disebut **indeks**, bilangan bulat yang ditetapkan berdasarkan jaraknya dari awal array. Dalam contoh di atas, nilai string "Chocolate" memiliki indeks 0, dan indeks "Rocky Road" adalah 4. Gunakan indeks dengan tanda kurung siku untuk mengambil, mengubah, atau menyisipkan nilai array.
|
||||||
|
|
||||||
|
✅ Apakah Anda terkejut bahwa array mulai dari indeks nol? Dalam beberapa bahasa pemrograman, indeks dimulai dari 1. Ada sejarah menarik seputar ini, yang dapat Anda [baca di Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let rasaRasaEsKrim = [
|
||||||
|
"Chocolate",
|
||||||
|
"Strawberry",
|
||||||
|
"Vanilla",
|
||||||
|
"Pistachio",
|
||||||
|
"Rocky Road",
|
||||||
|
];
|
||||||
|
rasaRasaEsKrim[2]; //"Vanilla"
|
||||||
|
```
|
||||||
|
|
||||||
|
Anda dapat memanfaatkan indeks untuk mengubah nilai, seperti ini:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
rasaRasaEsKrim[4] = "Butter Pecan"; //Mengubah "Rocky Road" menjadi "Butter Pecan"
|
||||||
|
```
|
||||||
|
|
||||||
|
Dan Anda dapat memasukkan nilai baru pada indeks tertentu seperti ini:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
rasaRasaEsKrim[5] = "Cookie Dough"; //Ditambahkan "Cookie Dough"
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Cara yang lebih umum untuk mendorong nilai ke array adalah dengan menggunakan operator array seperti array.push()
|
||||||
|
|
||||||
|
Untuk mengetahui berapa banyak item dalam sebuah array, gunakan properti `length`.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let rasaRasaEsKrim = [
|
||||||
|
"Chocolate",
|
||||||
|
"Strawberry",
|
||||||
|
"Vanilla",
|
||||||
|
"Pistachio",
|
||||||
|
"Rocky Road",
|
||||||
|
];
|
||||||
|
rasaRasaEsKrim.length; //5
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Cobalah sendiri! Gunakan konsol browser Anda untuk membuat dan memanipulasi array kreasi Anda sendiri.
|
||||||
|
|
||||||
|
## Loop
|
||||||
|
|
||||||
|
Pengulangan memungkinkan untuk tugas berulang atau **iterative**, dan dapat menghemat banyak waktu dan kode. Setiap iterasi dapat bervariasi dalam variabel, nilai, dan kondisinya. Ada berbagai jenis loop dalam JavaScript, dan mereka memiliki perbedaan kecil, tetapi pada dasarnya melakukan hal yang sama: loop di atas data.
|
||||||
|
|
||||||
|
### For Loop
|
||||||
|
|
||||||
|
Perulangan `for` membutuhkan 3 bagian untuk melakukan iterasi: - `counter` Variabel yang biasanya diinisialisasi dengan angka yang menghitung jumlah iterasi. - `condition` Expression yang menggunakan operator perbandingan untuk menyebabkan loop berhenti ketika `true`. - `iteration-expression` Berjalan di akhir setiap iterasi, biasanya digunakan untuk mengubah nilai penghitung.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
//Menghitung hingga 10
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
console.log(i);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Jalankan kode ini di konsol browser. Apa yang terjadi jika Anda membuat perubahan kecil pada penghitung, kondisi, atau ekspresi iterasi? Bisakah Anda membuatnya berjalan mundur, membuat hitungan mundur?
|
||||||
|
|
||||||
|
### While loop
|
||||||
|
|
||||||
|
Tidak seperti sintaks untuk pengulangan `for`, pengulangan `while` hanya membutuhkan kondisi yang akan menghentikan pengulangan jika `true`. Kondisi dalam pengulangan biasanya mengandalkan nilai lain seperti penghitung, dan harus dikelola selama pengulangan. Nilai awal untuk pencacah harus dibuat di luar perulangan, dan ekspresi apa pun untuk memenuhi suatu kondisi, termasuk mengubah penghitung harus dipertahankan di dalam perulangan.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
//Menghitung hingga 10
|
||||||
|
let i = 0;
|
||||||
|
while (i < 10) {
|
||||||
|
console.log(i);
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Mengapa Anda memilih for loop vs. a while loop? Sebanyak 17 ribu penonton memiliki pertanyaan yang sama tentang StackOverflow, dan beberapa opini [mungkin menarik bagi Anda](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
|
||||||
|
|
||||||
|
## Loop dan Array
|
||||||
|
|
||||||
|
Array sering digunakan dengan loop karena sebagian besar kondisi memerlukan panjang array untuk menghentikan loop, dan indeks juga bisa menjadi nilai counter.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let rasaRasaEsKrim = [
|
||||||
|
"Chocolate",
|
||||||
|
"Strawberry",
|
||||||
|
"Vanilla",
|
||||||
|
"Pistachio",
|
||||||
|
"Rocky Road",
|
||||||
|
];
|
||||||
|
|
||||||
|
for (let i = 0; i < rasaRasaEsKrim.length; i++) {
|
||||||
|
console.log(rasaRasaEsKrim[i]);
|
||||||
|
} //Berakhir saat semua rasa dicetak
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Bereksperimenlah dengan melakukan perulangan pada array buatan Anda sendiri di konsol browser Anda.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Tantangan
|
||||||
|
|
||||||
|
Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan while. Ada [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis ulang loop array Anda menggunakan salah satu dari teknik ini.
|
||||||
|
|
||||||
|
## Kuis Pasca-Kuliah
|
||||||
|
|
||||||
|
[Kuis pasca-kuliah](./.github/post-lecture-quiz.id.md)
|
||||||
|
|
||||||
|
## Review & Belajar Mandiri
|
||||||
|
|
||||||
|
Array dalam JavaScript memiliki banyak metode yang menyertainya, sangat berguna untuk manipulasi data. [Bacalah tentang metode ini](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) dan coba beberapa di antaranya (seperti push, pop, slice dan splice) pada array kreasi Anda.
|
||||||
|
|
||||||
|
## Tugas
|
||||||
|
|
||||||
|
[Loop sebuah Array](./assignment.id.md)
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# Loop sebuah Array
|
||||||
|
|
||||||
|
## Instruksi
|
||||||
|
|
||||||
|
Buat program yang mencantumkan setiap nomor ke-3 antara 1-20 dan mencetaknya ke konsol.
|
||||||
|
|
||||||
|
> TIPS: gunakan for-loop dan ubah ekspresi iterasi
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Kriteria | Contoh | Memenuhi | Perlu Perbaikan |
|
||||||
|
| -------- | ------------------------------------------------- | ----------------------------- | ------------------------------------- |
|
||||||
|
| | Program berjalan dengan benar dan diberi komentar | Program tidak diberi komentar | Program tidak lengkap atau bermasalah |
|
||||||
Loading…
Reference in new issue