Short Circuitting Operator - JavaScript
Published: 2024-01-20 08:59:45

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.

```javascript
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.

```javascript
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:

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

```javascript
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.

```javascript
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.

```javascript
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:

```javascript
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.

```javascript
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:

```javascript
// (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
```