JavaScript Academy · Pelajaran

Pemanggilan Opsional dan Akses Indeks

Gunakan optional chaining pada pemanggilan dan tanda kurung siku.

Pemanggilan Opsional dan Akses Indeks adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Selain Membaca Properti

Perantaian opsional juga memiliki bentuk untuk memanggil fungsi serta mengakses elemen larik atau kunci dinamis dengan aman.

const obj = { greet: () => "hi" };
console.log(obj.greet?.()); // "hi"

Panggilan Metode Opsional

Bentuk ?.() memanggil fungsi hanya jika fungsi tersebut ada. Jika metode bernilai null atau undefined, bentuk ini mengembalikan undefined alih-alih menghasilkan kesalahan.

const obj = {};
console.log(obj.greet?.()); // undefined, no error

Mengapa Ini Penting

Tanpa bentuk ini, pemanggilan metode yang tidak ada akan menghasilkan kesalahan. Bentuk panggilan opsional melindungi panggilan balik opsional dengan rapi.

function run(onDone) {
  onDone?.(); // safe whether or not onDone is provided
}
run();
run(() => console.log("done"));

Hanya Nilai null atau undefined yang Melewati Panggilan

?.() hanya melewati pemanggilan ketika nilainya adalah null atau undefined. Jika nilainya bukan fungsi, Anda tetap mendapatkan TypeError saat memanggilnya.

const obj = { greet: 42 };
try {
  obj.greet?.();
} catch (e) {
  console.log("not a function");
}

Akses Indeks Opsional

Bentuk ?.[ ] membaca elemen hanya jika nilai dasarnya bukan null atau undefined, sehingga berguna untuk larik dan kunci hasil perhitungan.

const arr = ["a", "b"];
console.log(arr?.[1]); // "b"
const none = null;
console.log(none?.[0]); // undefined

Kunci Dinamis

Akses menggunakan tanda kurung siku bersama ?. menangani nama properti dinamis dengan aman.

const data = { user: { name: "Mia" } };
const key = "name";
console.log(data.user?.[key]); // "Mia"

Larik Bersarang

Anda dapat merangkai akses indeks opsional melalui larik atau objek yang bersarang.

const grid = [[1, 2], [3, 4]];
console.log(grid?.[1]?.[0]); // 3
console.log(grid?.[5]?.[0]); // undefined

Panggilan Opsional pada Nilai yang Dikembalikan

Anda dapat mencampur berbagai bentuk: membaca nilai secara opsional, lalu memanggilnya secara opsional.

const handlers = { click: () => "clicked" };
console.log(handlers.click?.()); // "clicked"
console.log(handlers.hover?.()); // undefined

Menggabungkan dengan Nilai Bawaan

Padukan bentuk-bentuk ini dengan ?? untuk memberikan nilai cadangan pada hasilnya.

const config = {};
const port = config.get?.() ?? 3000;
console.log(port); // 3000

Memanggil Metode Larik dengan Aman

Perantaian opsional memungkinkan Anda memanggil metode pada larik yang mungkin tidak ada tanpa pemeriksaan keberadaan terpisah.

const state = { tags: null };
console.log(state.tags?.join(", ") ?? "none"); // "none"

Gunakan Saat Nilai Memang Opsional

Bentuk-bentuk ini sangat berguna untuk panggilan balik opsional dan struktur data yang tidak pasti. Hindari penggunaannya ketika suatu nilai seharusnya selalu ada, agar kesalahan yang sebenarnya tetap terlihat.

const events = { onSave: null };
events.onSave?.("payload"); // silently does nothing
console.log("continued");

Pemeriksaan Singkat

Pilih bentuk panggilan yang aman.

Ringkasan

Perantaian opsional mencakup ?.() untuk pemanggilan metode yang aman dan ?.[ ] untuk akses indeks atau kunci dinamis yang aman. Keduanya mengembalikan undefined ketika nilai dasarnya bernilai null atau undefined, tetapi tetap menghasilkan kesalahan jika nilai yang bukan fungsi dipanggil. Gabungkan keduanya dengan ?? untuk memberikan nilai bawaan, dan gunakan hanya untuk nilai yang memang opsional.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pemanggilan Opsional dan Akses Indeks” gratis?

Ya — teks lengkap “Pemanggilan Opsional dan Akses Indeks” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pemanggilan Opsional dan Akses Indeks”?

Gunakan optional chaining pada pemanggilan dan tanda kurung siku. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Pemanggilan Opsional dan Akses Indeks” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy