31 Januari 2021

Spesial JavaScript

Bab ini secara singkat merekap fitur JavaScript yang sudah kita pelajari sekarang, membayar perhatian khusus ke momen-momen halus.

Struktur kode

Pernyataan didelimisi dengan semicolon:

alert('Hello'); alert('World');

Biasanya, line-break juga diperlakukan sebagai delimiter, jadi itu juga akan bekerja:

alert('Hello')
alert('World')

Itu disebut “penyisipan semicolon otomatis”. Kadang ia tidak bekerja, misalnya:

alert("There will be an error after this message")

[1, 2].forEach(alert)

Kebanyakan panduan codestyle setuju bahwa kita sebaiknya menaruh semicolon di tiap akhir pernyataan.

Semicolon tak dibutuhkan setelah blok kode {...} dan konstruksi syntax dengan mereka yang seperti loop:

function f() {
  // semicolon tak dibutuhkan setelah deklarasi fungsi
}

for(;;) {
  // semicolon tak dibutuhkan setelah loop
}

…Tapi meskipun kita taruh semicolon “extra” di suatu tempat, itu bukan galat. Ia akan diabaikan.

Lebih lanjut di: Struktur kode.

Mode ketat

Untuk mengaktifkan penuh semua fitur modern JavaScript, kita sebaiknya mulai script dengan "use strict".

'use strict';

...

Directive ini harus ada di paling atas script atau di awal badan fungsi.

Tanpa "use strict", apapun akan bekerja, tapi beberapa fitur bersikap dengan cara kuno, “kompatibel”. Secara umum kita akan pilih sikap modern.

Beberapa fitur modern bahasa ini (seperti kelas yang akan kita pelajari di kemudian) mengaktifkan mode ketat secara implisit.

Lebih lanjut di: The modern mode, "use strict".

Variabel

Bisa dideklarasi menggunakan:

  • let
  • const (konstan, tak bisa berubah)
  • var (kuno, akan lihat kemudian)

Nama variabel bisa mengandung:

  • Huruf dan digit, tapi karakter pertama bisa tak boleh digit.
  • Karakter $ dan _ itu normal, setara dengan huruf.
  • Alfabet non-latin dan hieroglyph juga boleh, tapi jarang dipakai.

Variabel adalah tipe dinamis. Mereka bisa menyimpan nilai apapun:

let x = 5;
x = "John";

Terdapat 8 tipe data:

  • number untuk floating-point(bilangan pecahan) dan integer,
  • bigint untuk integer yang sangat panjang,
  • string untuk string,
  • boolean untuk nilai logik: true/false,
  • null tipe data dengan nilai tunggal null, yang sama dengan “empty/kosong” atau “does not exist/tidak ada nilai”,
  • undefined – tipe data dengan nilai tunggal undefined, yang sama dengan “not assigned/belum didefinisikan”,
  • object dan symbol – untuk struktur data yang kompleks dan identifier unik, sampai saat ini kita belum belajar ini.

Operator typeof mengembalikan tipe untuk satu nilai, dengan dua pengecualian:

typeof null == "object" // galat di bahasa
typeof function(){} == "function" // fungsi diperlakukan spesial

Lebih lanjut di: Variabel and Tipe data.

Interaksi

Kita menggunakan peramban sebagai lingkungan kerja, jadi fungsi UI dasar akan menjadi:

prompt(question, [default])
Menanyakan question, dan mengembalikan apa yang pengunjung isikan atau null jika mereka mengklik “cancel”.
confirm(question)
Menanyakan question dan menyarakan memilih antara Ok dan Cancel. Pilihannya dikembalikan sebagai true/false.
alert(message)
Menampilkan a message.

Semua fungsi ini adalah modal, mereka menyela exekusi kode dan mencegah pengunjung dari berinteraksi dengan laman hingga mereka menjawab.

Misalnya:

let userName = prompt("Your name?", "Alice");
let isTeaWanted = confirm("Do you want some tea?");

alert( "Visitor: " + userName ); // Alice
alert( "Tea wanted: " + isTeaWanted ); // true

Lebih lanjut di: Interaksi: alert, prompt, confirm.

Operator

JavaScript mendukung operator berikut:

Arithmatika

Regular: * + - /, juga % untuk remainder dan ** untuk pangkat bilangan.

Operator biner plus + menggabungkan string. Dan juka ada operan yang string, maka yang lainnya akan diubah menjadi string juga:

alert( '1' + 2 ); // '12', string
alert( 1 + '2' ); // '12', string
Penetapan

Ada penetapan simpel: a = b dan penetapan kombinasi seperti a *= 2.

Bitwise

Operator bitwise bekerja dengan integer 32-bit di bit-level paling kecil: lihat docs ketika mereka dibutuhkan.

Kondisional

Satu-satunya operator dengan tiga parameter: cond ? resultA : resultB. Jika cond truthy, mengembalikan resultA, jika tidak resultB.

Operator logika

Logika AND && dan OR || menyajikan evaluasi sirkuit-pendek dan mengembalikan nilai di mana ia berhenti. Logika NOT ! mengkonversi operand ke tipe boolean dan mengembalikan nilai kebalikannya.

Nullish coalescing operator/Operator penggabung nullish

Operator ?? menyediakan cara untuk memilih nilai yang terdefinisikan dari sebuah daftar variabel. Hasil dari a ?? b adalah a kecuali jika nilainya null/undefined, lalu b.

Perbandingan

Persamaan nilai == dari type yang berbeda akan mengubahnya menjadi angka (kecuali null dan undefined yang sama dengan nilai itu sendiri), jadi contoh dibawah adalah sama:

alert( 0 == false ); // true
alert( 0 == '' ); // true

Pembandingan lainnya tentu saja mengubah nilainya menjadi angka.

Operator pembanding === tidak melakukan perubahan tipe: untuk operator pembanding ini, berbeda tipe sama dengan berbeda nilai.

Nilai null dan undefined adalah spesial: mereka sama == satu sama lainnya dan tidak sama dengan nilai lain manapun.

Pembanding lebih/kurang dari membandingkan string karakter-demi-karakter, tipe lain akan diubah menjadi angka.

Operator lainnya

Ada beberapa operator lainnya, seperti operator koma.

Lebih lanjut di: Operator dasar, maths, Perbandingan, Operator logika, Operator penggabungan nullish '??'.

Loop

  • Kita meliput 3 tipe loop:

    // 1
    while (condition) {
      ...
    }
    
    // 2
    do {
      ...
    } while (condition);
    
    // 3
    for(let i = 0; i < 10; i++) {
      ...
    }
  • Variabel yang dideklarasi di loop for(let...) terlihat cuma di dalam loop. Tapi kita juga bisa membuang let dan memakai kembali variabel yang sudah eksis.

  • Directive break/continue membolehkan untuk keluar iterasi loop/current. Guakan label untuk menghancurkan loop bersarang.

Detil di: Perulangan: while dan for.

Nanti kita akan pelajari tipe loop lainnya untuk berhadapan dengan object.

Konstruksi “switch”

Konstruksi “switch” bisa mengganti pengecekan ganda if. Ia memakai === (ekualitas ketat) untuk pembandingan.

Misalnya:

let age = prompt('Your age?', 18);

switch (age) {
  case 18:
    alert("Won't work"); // hasil dari prompt adalah string, bukan angka
    break;

  case "18":
    alert("This works!");
    break;

  default:
    alert("Any value not equal to one above");
}

Detal di: Pernyataan "switch".

Fungsi

Kita meliput tiga cara membuat fungsi di JavaScript:

  1. Deklarasi Fungsi: fungsi di aliran kode utama

    function sum(a, b) {
      let result = a + b;
    
      return result;
    }
  2. Expresi Fungsi: fungsi di dalam kontex expresi

    let sum = function(a, b) {
      let result = a + b;
    
      return result;
    };
  3. Fungsi panah:

    // expresi di sisi kanan
    let sum = (a, b) => a + b;
    
    // atau syntax baris-ganda dengan { ... }, butuh kembalian di sini:
    let sum = (a, b) => {
      // ...
      return a + b;
    }
    
    // tanpa argumen
    let sayHi = () => alert("Hello");
    
    // dengan argumen tunggal
    let double = n => n * 2;
  • Fungsi bisa punya variabel lokal: mereka yang dideklarasi dalam badannya. Variabel macam itu cuma terlihat di dalam fungsi.
  • Parameter bisa punya nilai default: function sum(a = 1, b = 2) {...}.
  • Fungsi selalu mengembalikan sesuatu. Jika tak ada pernyataan return, maka kembaliannya undefined.

Detil: lihat Fungsi, Dasar-dasar fungsi Arrow.

Lebih banyak yang akan datang

Ini daftar ringkas fitur JavaScript. Untuk sekarang kita belajar hanya dasar. Kemudian di tutorial nanti kamu akan menemui fitur JavaScript yang lebih canggih dan spesial.

Peta tutorial

komentar

baca ini sebelum berkomentar…
  • Jika Anda memiliki saran apa yang harus ditingkatkan - silakan kunjungi kirimkan Github issue atau pull request sebagai gantinya berkomentar.
  • Jika Anda tidak dapat memahami sesuatu dalam artikel – harap jelaskan.
  • Untuk menyisipkan beberapa kata kode, gunakan tag <code>, untuk beberapa baris – bungkus dengan tag <pre>, untuk lebih dari 10 baris – gunakan sandbox (plnkr, jsbin, < a href='http://codepen.io'>codepen…)