Operator Penugasan Logika JavaScript

Pada tutorial ini, Anda akan mempelajari tentang operator penugasan logika JavaScript, termasuk operator penugasan OR logika (||=), operator penugasan AND logika (&&=), dan operator penugasan nullish (??=).

ES2021 memperkenalkan tiga operator penugasan logika, yaitu:

• Operator penugasan OR logika (||=)
• Operator penugasan AND logika (&&=)
• Operator penugasan nullish coalescing (??=)

Tabel berikut menunjukkan ekivalen dari operator penugasan logika:

Operator Penugasan Logika	Operator Logika
x
x &&= y	x && (x = y)
x ??= y	x ?? (x = y)

Operator Penugasan OR Logika

Operator penugasan OR logika (||=) menerima dua operand dan menugaskan operand kanan ke operand kiri jika operand kiri bernilai falsy:

x ||= y;

Dalam sintaks ini, operator ||= hanya menugaskan nilai y ke x jika x bernilai falsy. Contohnya:

let title;
title ||= 'tanpa judul';

console.log(title);

Output:

tanpa judul

Pada contoh ini, variabel title tidak terdefinisi, oleh karena itu, nilainya adalah falsy. Karena title falsy, operator ||= menugaskan ‘tanpa judul’ ke title. Output menunjukkan ‘tanpa judul’ seperti yang diharapkan. Contoh lain:

let title = 'JavaScript Keren';
title ||= 'tanpa judul';

console.log(title);

Output:

JavaScript Keren

Pada contoh ini, title adalah ‘JavaScript Keren’, sehingga bernilai truthy. Oleh karena itu, operator penugasan OR logika (||=) tidak menugaskan string ‘tanpa judul’ ke variabel title.

Operator penugasan OR logika:

x ||= y;

setara dengan pernyataan berikut yang menggunakan operator OR logika:

x || (x = y);

Seperti halnya operator OR logika, operator penugasan OR logika juga menggunakan short-circuiting. Ini berarti operator penugasan OR logika hanya melakukan penugasan ketika x bernilai falsy. Contoh berikut menggunakan operator penugasan logika untuk menampilkan pesan default jika elemen hasil pencarian kosong:

document.querySelector('.search-result').textContent ||= 'Maaf! Tidak ada hasil ditemukan';

Operator Penugasan AND Logika

Operator penugasan AND logika hanya menugaskan nilai y ke x jika x bernilai truthy:

x &&= y;

Operator penugasan AND logika juga menggunakan short-circuiting. Artinya,

x &&= y;

setara dengan:

x && (x = y);

Contoh berikut menggunakan operator penugasan AND logika untuk mengubah nama belakang pada objek orang jika nama belakang tersebut truthy:

let person = {
    firstName: 'Jane',
    lastName: 'Doe',
};

person.lastName &&= 'Smith';

console.log(person);

Output:

{firstName: 'Jane', lastName: 'Smith'}

Operator Penugasan Nullish Coalescing

Operator penugasan nullish coalescing hanya menugaskan nilai y ke x jika x bernilai null atau undefined:

x ??= y;

Setara dengan pernyataan berikut yang menggunakan operator nullish coalescing:

x ?? (x = y);

Contoh berikut menggunakan operator penugasan nullish coalescing untuk menambahkan properti yang hilang pada objek:

let user = {
    username: 'Satoshi'
};
user.nickname ??= 'anonim';

console.log(user);

Output:

{username: 'Satoshi', nickname:'anonim'}

Ringkasan

Pada contoh ini, user.nickname tidak terdefinisi, oleh karena itu, nilainya nullish. Operator penugasan nullish coalescing menugaskan string ‘anonim’ ke properti user.nickname.

• Operator penugasan OR logika (x ||= y) hanya menugaskan y ke x jika x bernilai falsy.
• Operator penugasan AND logika (x &&= y) hanya menugaskan y ke x jika x bernilai truthy.
• Operator penugasan nullish coalescing (x ??= y) hanya menugaskan y ke x jika x bernilai nullish.