Frontend Academy · Pelajaran

Template Literal dan Optional Chaining

Sisipkan expression ke dalam string dengan template literal, akses properti bertingkat dengan aman menggunakan ?., dan lakukan short-circuit dengan operator nullish coalescing ??.

Pelajaran 3 dari 413 langkah

Template Literal dan Optional Chaining adalah pelajaran Frontend 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Literal Templat: String Backtick

Literal templat (string backtick) mendukung string multibaris dan ekspresi yang disisipkan. Literal ini menggantikan penggabungan string dengan + dan memperjelas maksud kode.

// String concatenation (old way):
const msg = 'Hello, ' + name + '! You have ' + count + ' messages.';

// Template literal (modern):
const msg2 = `Hello, ${name}! You have ${count} messages.`;

Literal Templat Multibaris

Literal templat mempertahankan baris baru dan indentasi. Anda tidak perlu lagi menggunakan \n atau melakukan penggabungan string di beberapa baris.

const html = `
  <div class="card">
    <h2>${title}</h2>
    <p>${body}</p>
  </div>
`;

const sql = `
  SELECT *
  FROM users
  WHERE age > ${minAge}
  ORDER BY name
`;

Ekspresi dalam Literal Templat

Ekspresi JavaScript apa pun dapat ditempatkan di dalam ${}: ekspresi ternari, pemanggilan fungsi, aritmetika, dan pemanggilan metode.

const tax = 0.2;
const price = 50;
const receipt = `
  Subtotal: $${price}
  Tax (${tax * 100}%): $${price * tax}
  Total: $${price * (1 + tax)}
  ${isPaid ? 'PAID' : 'UNPAID'}
`;

Literal Templat Bertag

Templat bertag memanggil suatu fungsi dengan bagian-bagian string dan nilai yang diinterpolasikan sebagai argumen. Fitur ini digunakan oleh pustaka seperti styled-components, GraphQL (gql``), dan sql`` untuk membangun kueri yang aman.

function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) =>
    acc + str + (values[i] !== undefined ? `<mark>${values[i]}</mark>` : ''), '');
}
const msg = highlight`Hello ${name}, you have ${count} messages.`;

Rangkaian Opsional: ?.

Operator rangkaian opsional ?. berhenti dan menghasilkan undefined, alih-alih menimbulkan TypeError, jika sisi kiri bernilai null atau undefined. Operator ini menghilangkan pemeriksaan null defensif.

const user = null;

// Without optional chaining (throws TypeError):
// user.profile.avatar

// With optional chaining (returns undefined):
const avatar = user?.profile?.avatar;
console.log(avatar); // undefined — no error

Pemanggilan Metode Opsional

obj?.method() memanggil metode hanya jika obj tidak bernilai null/undefined. Jika obj bernilai null, operator ini mengembalikan undefined tanpa menimbulkan error.

const timer = getTimer(); // might return null
timer?.start(); // only calls start() if timer exists

// Also works on array access:
const firstItem = arr?.[0]; // undefined if arr is null

Penggabungan Nullish: ??

Operator penggabungan nullish ?? mengembalikan sisi kanan hanya jika sisi kiri bernilai null atau undefined (bukan sekadar falsy). Berbeda dari ||, operator ini tidak menganggap 0 atau '' sebagai nullish.

const port = config.port ?? 3000;  // 3000 only if port is null/undefined
const name = user.name ?? 'Anonymous';

// Compare with ||:
console.log(0 ?? 'default');   // 0 (not nullish)
console.log(0 || 'default');   // 'default' (falsy!)

Penugasan Nullish: ??=

a ??= b menetapkan b ke a hanya jika a bernilai null atau undefined. Ini merupakan bentuk singkat dari a = a ?? b. Berguna untuk menginisialisasi properti objek secara kondisional.

let cache = {};
function getUser(id) {
  cache[id] ??= fetchUser(id); // only fetch if not cached
  return cache[id];
}

Operator Penugasan Logis

&&= menetapkan nilai hanya jika sisi kiri bernilai truthy. ||= menetapkan nilai hanya jika sisi kiri bernilai falsy. Bersama dengan ??=, operator-operator ini membuat penugasan kondisional menjadi ringkas.

user.name ||= 'Anonymous';  // set if falsy
user.role &&= user.role.toLowerCase(); // transform if exists

Menggabungkan ?. dan ??

Gabungkan rangkaian opsional dan penggabungan nullish untuk mengakses properti dengan aman menggunakan nilai bawaan.

const city = user?.address?.city ?? 'Unknown';
const total = cart?.items?.length ?? 0;

Metode String yang Perlu Anda Ketahui

Metode string umum: trim(), trimStart(), trimEnd(), padStart(), padEnd(), startsWith(), endsWith(), includes(), replaceAll(), at().

const str = '  Hello World  ';
str.trim();           // 'Hello World'
str.includes('World'); // true
'5'.padStart(3, '0'); // '005'
'abc'.at(-1);         // 'c'
'aabbcc'.replaceAll('b', 'x'); // 'aaxxcc'

Pemeriksaan Singkat

Apa yang dikembalikan oleh const val = obj?.foo?.bar ?? 'default' jika obj bernilai null?

Jawab di pelajaran interaktif

Ringkasan: Literal Templat dan Rangkaian Opsional

String backtick mendukung ekspresi dan baris ganda. Templat bertag memungkinkan DSL. ?. mengakses properti dengan aman tanpa pemeriksaan null. ?? memberikan nilai bawaan ketika nilainya null/undefined (bukan hanya falsy). Gabungkan keduanya untuk mengakses data dengan aman, mudah dibaca, dan memiliki nilai bawaan.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Template Literal dan Optional Chaining” gratis?

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

Apa yang akan aku pelajari di “Template Literal dan Optional Chaining”?

Sisipkan expression ke dalam string dengan template literal, akses properti bertingkat dengan aman menggunakan ?., dan lakukan short-circuit dengan operator nullish coalescing ??. Kamu berlatih Frontend 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 Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend 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 “Template Literal dan Optional Chaining” 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 Frontend Academy ini?

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