JavaScript Academy · Pelajaran

Menggabungkan ?. dan ??

Padukan akses aman dengan nilai bawaan yang sesuai.

Menggabungkan ?. dan ?? adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Dua Alat Bersama

Perantaian opsional ?. membaca nilai yang mungkin tidak ada dengan aman, sedangkan penggabungan nilai null atau undefined ?? menyediakan nilai bawaan. Jika digabungkan, keduanya dapat membaca data bertingkat dan menggunakan nilai cadangan dengan rapi.

const user = {};
console.log(user.profile?.name ?? "Anonymous");

Pola Umum

Idiom a?.b ?? fallback membaca dengan aman dan menggunakan nilai bawaan jika hasilnya bernilai null atau undefined. Pola ini menggantikan rangkaian pemeriksaan yang panjang.

const data = { settings: { theme: "dark" } };
const theme = data.settings?.theme ?? "light";
console.log(theme); // "dark"

Menggunakan Nilai Cadangan Saat Tidak Ada

Jika ada tautan yang bernilai null atau undefined, ?. menghasilkan undefined, yang kemudian diganti oleh ?? dengan nilai bawaan.

const data = {};
const theme = data.settings?.theme ?? "light";
console.log(theme); // "light"

Penumpukan yang Mendalam

Pola ini dapat digunakan pada struktur yang sangat bertingkat sambil tetap mempertahankan satu nilai cadangan di bagian akhir.

const res = { data: { user: { city: "Berlin" } } };
const city = res.data?.user?.city ?? "Unknown";
console.log(city); // "Berlin"

Mempertahankan Nilai Valid yang Dianggap False

Karena ?? hanya menggunakan nilai bawaan untuk nilai null atau undefined, nilai 0 yang sebenarnya dari rangkaian tersebut tetap dipertahankan.

const cart = { items: [], count: 0 };
const count = cart?.count ?? 5;
console.log(count); // 0

Dibandingkan dengan Perangkap && / ||

Penulisan a && a.b || fallback akan keliru mengganti nilai 0 atau "" yang sah. Kombinasi ?. + ?? menghindari masalah tersebut.

const cfg = { volume: 0 };
console.log(cfg && cfg.volume || 50); // 50, wrong
console.log(cfg?.volume ?? 50);      // 0, correct

Dengan Hasil Fungsi

Anda juga dapat memberikan nilai bawaan pada hasil pemanggilan opsional, dengan menggabungkan kedua operator di sekitar pemanggilan metode.

const api = { fetchName: () => null };
const name = api.fetchName?.() ?? "default";
console.log(name); // "default"

Memberikan Nilai Bawaan pada Akses Larik

Pola ini dapat digunakan dengan akses menggunakan tanda kurung siku untuk larik atau kunci dinamis.

const state = { list: ["a"] };
const first = state.list?.[0] ?? "empty";
console.log(first); // "a"

Menyusun String Tampilan

Salah satu penggunaan praktisnya adalah menghasilkan teks tampilan yang aman dari data yang tidak pasti.

function label(order) {
  return "Total: " + (order?.total ?? 0);
}
console.log(label(undefined)); // "Total: 0"

Catatan tentang Prioritas Operator

?. memiliki prioritas lebih tinggi daripada ??, sehingga a?.b ?? c dibaca sebagai (a?.b) ?? c, persis seperti yang Anda perlukan.

const u = { age: null };
console.log(u?.age ?? 18); // 18

Idiom yang Rapi

Bersama-sama, operator ini menggantikan kode defensif yang panjang dengan satu baris yang mudah dibaca, sehingga maksudnya menjadi jelas.

const profile = null;
console.log(profile?.bio?.length ?? 0); // 0

Pemeriksaan Singkat

Prediksikan hasilnya.

Ringkasan

Idiom obj?.deep?.prop ?? fallback membaca nilai bertingkat yang mungkin tidak ada dan menyediakan nilai bawaan hanya ketika hasilnya adalah null atau undefined. Idiom ini mempertahankan nilai valid yang dianggap false seperti 0 dan "", berbeda dari pendekatan &&/||. ?. memiliki prioritas lebih tinggi daripada ??, sehingga pengelompokannya secara alami sudah benar.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menggabungkan ?. dan ??” gratis?

Ya — teks lengkap “Menggabungkan ?. dan ??” 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 “Menggabungkan ?. dan ??”?

Padukan akses aman dengan nilai bawaan yang sesuai. 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 3 dari 4.

Berapa lama pelajaran “Menggabungkan ?. dan ??” 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