Short Circuitting Operator - JavaScript

Short Circuitting Operator adalah operator singkat yang ada pada JavaScript. JavaScript banyak mempunyai operator-operator singkat yang bertujuan untuk meringkas kode program. Dalam pemakaiannya kita harus paham fungsi dan dimana penempatannya dalam program, beberapa short circuitting operator akan kita bahas.

OR ditulis dengan simbol ‘||’

OR mencari nilai true yang pertama kali ditemukan, nilai yang lain tidak akan dievaluasi.

console.log(3 || 'Boy') // output: 3
console.log('' || 'Boy') // output: Boy
console.log(true || 0) // output: true
console.log(undefined || 0 || '' || 'Boy' || 23 || null); // output: Boy

Or dapat digunakan untuk logical assignment.

const obj1 = {
 name: 'Boy',
 id: 0
};
const obj2 = {
 name: 'Sandra',
 address: 'Malang'
};

obj1.id = obj1.id || 10; // output: 10 karena obj1.id bernilai 0 dianggap false
obj1.id ||= 10; // bisa ditulis seperti ini hasilnya sama yaitu 10
console.log(obj1);

obj2.id = obj2.id || 10; // output: 10 karena tidak ada property obj2.id jadi dianggap false
obj2.id ||= 10; // bisa ditulis seperti ini hasilnya sama yaitu 10
console.log(obj2);

AND ditulis dengan simbol '&&'

Aturan AND sebagai berikut:

Jika nilai false ditemukan, maka nilai yang lain tidak akan dievaluasi.
Jika nilai true ditemukan, maka nilai true terakhir yang akan ditampilkan
AND mengevaluasi seluruh nilai yang diberikan

console.log(0 && 'Boy'); // output: 0
console.log(10 && 'Boy'); // output: Boy (aturan nomor 2)
console.log('Boy' && 23 && null && 'Hello'); // output: null (aturan nomor 1)

AND untuk logical assignment.

obj1.address = obj1.address && 'No address'; // output: 'undefined' karena tidak ada property obj1.address
obj1.address &&= 'No address'; // bisa ditulis seperti ini
console.log(obj1);

obj2.address = obj2.address && 'No address'; // output: 'No address' karena merupakan nilai true terakhir
obj2.address &&= 'No address'; // bisa ditulis seperti ini
console.log(obj2);

NULLISH COALESCING ditulis dengan simbol '??'

NULLISH adalah nilai ‘null’ atau ‘undefined’ pada suatu variabel. Null adalah nilai yang diberikan pada suatu variabel, sedangkan undefined adalah kondisi variabel yang tidak memiliki nilai.

let variable1 = null; // memberi nilai null ke varaible1
let variable2; // variable2 dibuat tapi tidak diberi nilai

console.log(variable1); // output: null
console.log(variable2); // output: undefined

console.log(typeof variable1); // output: object
console.log(typeof variable2); // output: undefined

console.log(variable1 === undefined); // output: false
console.log(variable2 === undefined); // output: true

console.log(variable1 === null); // output: true
console.log(variable2 === null); // output: false

Contoh penggunaan nullish coalescing:

obj1.id ??= 10; // outpout: 0, cara membaca: apakah obj1.id bernilai null atau undefined ? jika iya maka diganti dengan nilai 10, jika tidak maka nilainya tetap

obj2.id ??= 10; // output: 10

OPTIONAL CHAINING ditulis dengan simbol ‘?.’

Optional chaining adalah cara untuk mengakses nested object yang mana nilai propertinya dimungkinkan berupa null atau undefined. Jika menggunaka cara biasa tanpa optional chaining akan menghasilkan error.

const obj3 = {
  name: 'Harry Potter',
  idNumber: '112233',
  address: {
    street: 'Cherry Street 40B',
    city: 'Manchester'
  }
};

// Tanpa optional chaining
console.log(obj3.address.postalCode); // output: error

// Dengan optional chaining
console.log(obj3.address?.postalCode); // output: undefined

CONDITIONAL OPERATOR ditulis dengan simbol ‘?’

Conditional operator bisa digunakan sebagai pengganti if statement. Cara penulisannya adalah sebagai berikut:

// (statement block) ? 'result if true' : 'result if false'

const ax = 2;
const ay = 3;
console.log(
  ax > ay ? 'ax lebih besar daripada ay' : 'ax lebih kecil daripada ay'
); // output: ax lebih kecil daripada ay

Blog

Short Circuitting Operator - JavaScript

boibolang

Join Our Newsletter. No Spam, Only the good stuff.

Related