TypeScript Academy · Pelajaran

Koalesensi Nullish dengan ??

Berikan nilai cadangan hanya untuk null dan undefined, bukan untuk semua nilai falsy.

Koalesensi Nullish dengan ?? adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Operator Penggabungan Nilai Kosong

Operator ?? mengembalikan sisi kanannya hanya ketika sisi kirinya adalah null atau undefined. Jika tidak, operator ini mengembalikan nilai di sisi kiri. Inilah cara yang tepat untuk menyediakan nilai bawaan.

const name: string | null = null;
const display = name ?? 'Guest';
console.log(display); // 'Guest'

Hanya Nilai Kosong yang Memicu Nilai Cadangan

Kata kuncinya adalah nilai kosong: hanya null dan undefined yang menyebabkan sisi kanan digunakan. Semua nilai lain—termasuk nilai yang bernilai salah—diteruskan tanpa perubahan.

console.log(0 ?? 99);       // 0
console.log('' ?? 'x');     // ''
console.log(false ?? true); // false
console.log(null ?? 'def'); // 'def'

Masalah dengan ||

OR logis || menggunakan nilai cadangan untuk setiap nilai yang bernilai salah: 0, '', false, NaN, selain nilai kosong. Hal ini sering menimbulkan kesalahan ketika 0 atau string kosong merupakan masukan yang valid.

const count = 0;
console.log(count || 10); // 10 — wrong! 0 is a valid count
console.log(count ?? 10); // 0  — correct

Nilai Bawaan yang Tepat

Gunakan ?? ketika nol, string kosong, atau false merupakan nilai sah yang ingin Anda pertahankan. Gunakan || hanya jika setiap nilai yang bernilai salah memang harus diganti dengan nilai cadangan.

function volume(v: number | undefined): number {
  return v ?? 50; // 0 stays 0, undefined becomes 50
}
console.log(volume(0), volume(undefined));

?? dengan Parameter Fungsi

Pola yang umum adalah menyediakan nilai bawaan untuk parameter opsional ketika undefined diberikan, sambil mempertahankan masukan bernilai salah yang bermakna.

function greet(name?: string): string {
  return 'Hello, ' + (name ?? 'friend');
}
console.log(greet('Ada'), greet());

Tipe Hasil ??

Tipe a ?? b menghapus null | undefined dari tipe a dan menggabungkannya dengan tipe b. Jika a adalah string | null dan b adalah string, hasilnya adalah string.

const maybe: string | null = null;
const sure: string = maybe ?? 'default';
console.log(sure.toUpperCase());

Merangkai Nilai Bawaan

Anda dapat merangkai ?? untuk mencoba beberapa sumber secara berurutan, lalu beralih ke sumber berikutnya ketika suatu nilai kosong. Nilai pertama yang tidak kosong akan digunakan.

const fromEnv: string | undefined = undefined;
const fromConfig: string | null = null;
const value = fromEnv ?? fromConfig ?? 'hardcoded';
console.log(value);

?? dan Prioritas Operator

Anda tidak dapat mencampur ?? dengan || atau && tanpa tanda kurung—TypeScript mewajibkan tanda kurung untuk menghindari kerancuan. Selalu kelompokkan ekspresi secara eksplisit.

const a: number | null = null;
const b = true;
// const x = a ?? 5 || 10; // Error without parens
const x = (a ?? 5) || 10;
console.log(x);

Membedakan Nol dari Nilai yang Tidak Ada

Kebutuhan yang sering muncul di dunia nyata: suhu, skor, atau saldo sebesar 0 adalah data yang valid, sedangkan undefined berarti tidak diberikan. ?? mempertahankan perbedaan ini; || menyamakan keduanya.

function format(temp: number | undefined): string {
  return (temp ?? 'N/A') + ' degrees';
}
console.log(format(0), format(undefined));

?? dengan Properti Objek

Membaca properti opsional lalu memberikan nilai bawaan adalah penggunaan ?? sehari-hari. Operator ini berpadu secara alami dengan perangkaian opsional, yang akan Anda gabungkan pada pelajaran berikutnya.

type Opts = { retries?: number };
function run(o: Opts): number {
  return o.retries ?? 3;
}
console.log(run({ retries: 0 }), run({}));

Kapan Memilih yang Mana

Aturan keputusan: jika 0, '', atau false adalah nilai valid yang harus dipertahankan, gunakan ??. Jika Anda benar-benar ingin mengganti setiap nilai yang bernilai salah, gunakan ||. Kesalahan nilai bawaan hampir selalu terjadi karena menggunakan || berdasarkan kebiasaan.

const username = '';
console.log(username || 'anon'); // 'anon' — empty replaced
console.log(username ?? 'anon'); // '' — empty kept

Pemeriksaan Singkat

Uji pemahaman Anda tentang penggabungan nilai kosong.

Ringkasan: Penggabungan Nilai Kosong

Anda telah mempelajari bahwa ??:

Mengembalikan nilai cadangan hanya jika sisi kiri adalah null atau undefined.
Mempertahankan nilai valid yang dianggap salah seperti 0, '', dan false—tidak seperti ||.
Menghapus null | undefined dari tipe hasil.
Memerlukan tanda kurung ketika dicampur dengan || atau &&.

Selanjutnya, kita menggabungkan ?. dan ??.

function port(v: number | undefined): number {
  return v ?? 8080;
}
console.log(port(0), port(undefined));

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Koalesensi Nullish dengan ??” gratis?

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

Apa yang akan aku pelajari di “Koalesensi Nullish dengan ??”?

Berikan nilai cadangan hanya untuk null dan undefined, bukan untuk semua nilai falsy. Kamu berlatih TypeScript 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 TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript 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 2 dari 4.

Berapa lama pelajaran “Koalesensi Nullish dengan ??” 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 TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript 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 TypeScript Academy