Belajar Javascript Dasar 2

Conditional Ternary Operator

Materi ini memiliki 1 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.

Pada video ini, kita akan membicarakan mengenai Conditional Ternary Operator. Ternary Operator adalah operator yang menggunakan 3 operand. Dan kebetulan di Javascript hanya ada 1 buah ternary operator, yaitu Conditional Ternary Operator. Conditional berarti operator ini kita gunakan untuk membuat percabangan, sama seperti kata kunci if yang telah kita pelajari pada video sebelumnya.

Conditional Ternary Operator menggunakan 2 buah simbol, yaitu ? dan :. Sintaksnya dapat kita lihat di layar. Pertama kita menuliskan kode kondisi, setelah itu diikuti dengan simbol ?. Lalu kita menuliskan ekspresi yang akan dijalankan apabila kondisi bernilai benar. Setelah itu kita tuliskan lagi simbol :. Dan terakhir kita tuliskan ekspresi yang akan dijalankan apabila kondisi bernilai salah. Mari kita lihat prakteknya.

Oke, kita buka kembali source code dari video sebelumnya yang sudah saya modifikasi sedikit. Bisa dilihat di layar, kita melakukan perulangan sebanyak 5 kali. Dan di dalam setiap perulangan terdapat percabangan dengan menggunakan kata kunci if. Kita memeriksa kondisi apakah i habis dibagi 2? Apabila benar, maka kita tulis i adalah genap. Dan apabila salah, maka kita tulis i adalah ganjil.

Kita jalankan kode ini di browser. Lalu kita buka console. Maka kita mendapatkan tulisan mulai dari 0 adalah Genap. Hingga 4 adalah Genap.

Kita kembali ke source code. Nah, kita bisa menuliskan ulang kode if seperti ini dengan menggunakan Conditional Ternary Operator. Dan hasilnya nantinya menjadi lebih ringkas, karena menjadi satu baris saja. Bagaimana caranya?

Pertama perhatikan kode pada ekpresi benar dan salah. Keduanya sama-sama memanggil console.log. Yang berbeda hanya satunya Genap dan satunya lagi Ganjil. Jadi kode yang sama ini, kita tulis ulang di bawahnya.

console.log(i + " adalah ");

Nah, di bagian akhir string kita mesti menambahkan diantara kata Genap atau Ganjil, tergantung dari kondisi apakah i habis dibagi 2. Jadi pertama kita tambahkan dahulu kondisinya.

+ (i % 2 == 0)

Kemudian kita beri simbol ?. Dan kita tuliskan nilai apabila benar. Artinya string “Genap” ya. Lalu kita beri lagi simbol : dan diikuti oleh nilai bila salah, yaitu string “Ganjil”.

Selesai. Kita simpan dan jalankan di browser. Oke, masih error ya. Ternyata semua yang menggunakan ternary operator hasilnya adalah Genap.

Kita kembali ke kode. Kesalahan ini terjadi karena semua kode yang berada di sebelah kiri simbol tanda tanya dijalankan terlebih dahulu karena dianggap sebagai kondisi. Untuk memperbaikinya, kita taruh semua yang merupakan bagian dari ternary operator ini di dalam tanda kurung. Jadi kita memastikan agar browser menjalankan dahulu ternary operator, setelah itu barulah menjalankan operator penambahan string. Kita simpan dan jalankan lagi di browser.

Sekarang di setiap perulangan, kita mendapatkan 2 hasil yang sama persis ya. Baris pertamanya adalah yang menggunakan if, sedangkan baris keduanya adalah yang menggunakan conditional ternary operator.

Kita lihat kembali ke kodenya ya. Kalau kita menggunakan kata kunci if, maka kode kita mesti terpisah menjadi 3 baris, diluar jumlah baris untuk kurung kurawalnya. Sementara kalau kita menggunakan Conditional Ternary Operator, kode yang sama bisa kita tuliskan kembali hanya menggunakan satu baris. Sekilas memang kodenya menjadi lebih membingungkan. Namun nanti kalau sudah terbiasa, mungkin teman-teman akan lebih suka menggunakan Conditional Ternary Operator ya. Karena jauh lebih ringkas.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.
Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.