Variabel (let/const), tipe, dan operator

Idenya

JavaScript adalah bahasa pemrograman browser. Setiap hal interaktif yang pernah kamu klik di sebuah situs, dari tombol "like" sampai total keranjang belanja, adalah JavaScript yang bereaksi terhadapmu. JavaScript juga berjalan di server, tetapi track ini berfokus pada browser, tanpa framework.

Seperti setiap bahasa, JavaScript dimulai dengan variabel: nama yang menyimpan nilai supaya bisa kamu pakai nanti. Kalau kamu sudah mengikuti track Python, banyak hal di sini akan terasa familiar. Tetapi perhatikan perbedaannya, karena JavaScript punya beberapa jebakan yang tidak dimiliki Python.

const dan let

Toko online harus mengingat berbagai hal selama halamannya terbuka: nama toko, berapa barang di keranjang, total sejauh ini. Sebagian tidak pernah berubah (nama toko) dan sebagian terus berubah (jumlah barang di keranjang). JavaScript punya keyword untuk masing-masing jenis:

const shopName = "Toko Kita";
let cartCount = 0;

cartCount = cartCount + 1;
console.log(shopName, cartCount);

Toko Kita 1

• const membuat variabel yang tidak pernah bisa di-assign ulang. Pakai ini secara default.
• let membuat variabel yang bisa di-assign ulang nanti. Pakai hanya saat nilainya memang berubah, seperti sebuah penghitung.
• console.log() mencetak nilai, seperti print() di Python. Di situs ini output-nya muncul di tab Console. Di browser sungguhan, output-nya muncul di developer tools (tekan F12).
• Statement diakhiri titik koma ;. JavaScript sering bisa menebak di mana tempatnya, tetapi menuliskannya sendiri mencegah kejutan.

Coba assign ulang sebuah const dan lihat apa yang terjadi:

const vat = 0.11;
vat = 0.12;

TypeError: Assignment to constant variable.

Error itu adalah fitur. Saat kamu membaca kode yang bertuliskan const, kamu tahu nilainya tidak pernah berubah, yang membuat kodenya jauh lebih mudah dipahami.

Penamaan

Nama di JavaScript memakai camelCase: mulai dengan huruf kecil, lalu kapitalkan setiap kata baru, seperti cartCount, totalPrice dan isLoggedIn. Nama peka huruf besar-kecil, jadi total dan Total adalah dua variabel berbeda. Pilih nama yang menyatakan arti nilainya: priceWithTax selalu lebih baik daripada p2.

Tipe-tipe dasar

Setiap nilai punya tipe. Inilah tipe-tipe yang akan kamu pakai setiap hari:

const name = "Ayu";          // string: text, in quotes
const price = 95000;          // number: whole or decimal, there's only one number type
const inStock = true;         // boolean: true or false
let discount = null;          // null: "deliberately empty"
let coupon;                   // undefined: "no value assigned yet"

console.log(typeof name, typeof price, typeof inStock);

string number boolean

• String bisa memakai tanda kutip "ganda", 'tunggal' atau `backtick` . Backtick itu istimewa dan mendapat modulnya sendiri nanti.
• Number mencakup 3 maupun 3.5. Tidak seperti Python, tidak ada tipe integer terpisah.
• Boolean adalah true dan false, dalam huruf kecil (Python memakai True dan False).
• null dan undefined sama-sama berarti "tidak ada", dengan perbedaan halus: null adalah sesuatu yang kamu atur dengan sengaja, undefined adalah yang diberikan JavaScript saat tidak ada yang diatur.
• typeof memberitahumu tipe sebuah nilai sebagai string.

Operator

Toko melakukan banyak hitungan: harga kali jumlah, membagi tagihan, menghitung diskon. Operator matematika bekerja persis seperti yang kamu harapkan dari Python atau kalkulator:

const price = 95000;
const qty = 3;
console.log(price * qty);      // 285000
console.log(10 / 4);           // 2.5
console.log(10 % 4);           // 2, the remainder
console.log(2 ** 3);           // 8, "to the power of"

Ada juga singkatan untuk memperbarui variabel: count += 1 berarti count = count + 1, dan count++ juga menambah satu. Singkatan yang sama ada untuk operator lain: -=, *= dan /=.

Jebakan +

+ punya dua tugas. Dengan angka ia menjumlahkan, tetapi kalau salah satu sisinya string, ia menempelkannya sebagai teks:

console.log(2 + 3);        // 5
console.log("2" + 3);      // "23"
console.log("Total: " + 5 + 5);   // "Total: 55"

Yang terakhir mengejutkan semua orang. JavaScript bekerja dari kiri ke kanan: "Total: " + 5 menghasilkan string "Total: 5", lalu menambahkan 5 ke string menempelkannya lagi. Gunakan tanda kurung untuk menghitung lebih dulu: "Total: " + (5 + 5).

Ini penting karena nilai dari halaman web, seperti apa yang diketik pengguna di sebuah kotak, selalu datang sebagai string. Konversi lebih dulu:

const typed = "3";              // pretend this came from an input box
const quantity = Number(typed); // now it's the number 3
console.log(quantity + 2);      // 5
console.log(Number("abc"));     // NaN, "Not a Number"

NaN adalah yang kamu dapat saat konversi gagal. Secara teknis tipenya number, yang membingungkan tetapi layak diketahui.

Membandingkan nilai: selalu ===

Untuk membandingkan nilai, gunakan === (sama dengan) dan !== (tidak sama dengan). Keduanya membandingkan nilai sekaligus tipe:

console.log(5 === 5);     // true
console.log(5 === "5");   // false: a number isn't a string
console.log(5 !== 3);     // true
console.log(7 > 3, 7 <= 3);  // true false

JavaScript juga punya == dan !=, yang diam-diam mengonversi tipe sebelum membandingkan. 5 == "5" bernilai true, begitu juga 0 == "". Konversi-konversi itu menimbulkan bug sungguhan, jadi kebiasaan profesionalnya sederhana: selalu gunakan === dan !==.

Kamu bisa menggabungkan perbandingan dengan && (dan), || (atau) dan ! (tidak):

const age = 25;
const hasTicket = true;
console.log(age >= 18 && hasTicket);   // true
console.log(!hasTicket);               // false

Mengapa ini penting untuk kode yang bersih

const secara default, nama camelCase yang jelas, perbandingan ketat ===, dan konversi eksplisit Number() semuanya melakukan hal yang sama: membuat kodemu menyatakan persis apa maksudnya. Saat seseorang membaca const, mereka tahu nilainya tidak akan berubah. Saat mereka membaca ===, mereka tahu tidak ada konversi tersembunyi. Lebih sedikit kejutan berarti lebih sedikit bug.

Rangkuman

• const untuk nilai yang tidak pernah di-assign ulang (default), let untuk nilai yang berubah. Hindari var.
• Tipe dasar: string, number, boolean, null dan undefined. Cek dengan typeof.
• + menjumlahkan angka tetapi menempelkan string. Konversi input dengan Number() lebih dulu.
• Bandingkan dengan === dan !==, jangan pernah ==.
• console.log() mencetak nilai supaya kamu bisa melihat apa yang dilakukan kodemu.