Logical Assignment Operators di Javascript
Tags: javascript
Published: 2020-11-14 05:53:41

Ada beberapa operator baru yang sangat praktis digunakan untuk mempersingkat kodingan Javascript kamu. [Proposal](https://github.com/tc39/proposal-logical-assignment)nya sudah sampai tahap stage 4 yang artinya akan dimasukkan pada versi ECMAScript berikutnya (ES2021). Ini juga berarti sekarang sudah bisa digunakan karena sudah support oleh browser-browser modern versi terupdate tanpa menggunakan transpiler. Tapi tentu saja untuk kompatibilitas yang lebih tinggi disarankan kamu tetap menggunakan transpiler seperti [Babel](https://babeljs.io/) atau menggunakan [Typescript](https://www.typescriptlang.org/).

Ada 3 operator yang masuk dalam [proposal logical assignment](https://github.com/tc39/proposal-logical-assignment) ini:

- Logical OR assignment **`||=`**
- Logical AND assignment **`&&=`**
- Logical nullish assignment **`??=`**



## Logical OR assignment **`||=`**

Operator ini berguna untuk case mengganti value sebuah variable jika valuenya adalah *falsy*.

Misal untuk mengganti value variable `a` jika value sebelumnya adalah *falsy*, tanpa logical OR assignment kamu melakukannya lebih kurang dengan cara-cara seperti ini:

```javascript
// cara 1
if (!a) {
  a = 'new value';
}

// cara 2
a = a || 'new value';
```

Dengan logical OR assignment menjadi lebih singkat:

```javascript
a ||= 'new value';
```

Kode diatas akan ditranspilasi oleh [Babel](https://babeljs.io/repl#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=IYAgPmC8IEQHYFMDuIBuwA2BXBMg&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=false&presets=env&prettier=false&targets=&version=7.12.3&externalPlugins=) menjadi:

```javascript
a || (a = 'value');
```



## Logical AND assignment **`&&=`**

Operator ini adalah kebalikan dari operator sebelumnya. Yaitu untuk case mengganti value sebuah variable jika valuenya adalah *truthy*.

Tanpa logical AND assignment, untuk mengganti value variable `a` jika value sebelumnya adalah *truthy* kamu melakukannya lebih kurang dengan cara-cara seperti ini:

```javascript
// cara 1
if (a) {
  a = 'new value';
}

// cara 2
a = a && 'new value';
```

Syntax diatas bisa dipersingkat dengan menggunakan logical AND assignment:

```javascript
a &&= 'new value';
```

Hasil transpilasinya oleh [Babel](https://babeljs.io/repl#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=IYAgZGC8IEQHYFMDuIBuwA2BXBMg&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=false&presets=env&prettier=false&targets=&version=7.12.3&externalPlugins=) menjadi:

```javascript
a && (a = 'new value');
```



## Logical nullish assignment **`??=`**

Kalau sebelumnya operator logical OR assignment berguna untuk mengecek nilai falsy yang di dalamnya termasuk `null` dan `undefined`, operator ini spesifik untuk case value `null` atau `undefined` saja.

Tanpa menggunakan logical nullish assignment, untuk mengecek value `null` atau `undefined` dan menggantinya dengan value baru, kamu melakukannya lebih kurang dengan cara-cara berikut ini:

```javascript
// cara 1
if (a == null || a == undefined) {
  a = 'new value';
}

// cara 2
a = a ?? 'new value';
```

Akan menjadi lebih singkat dengan menggunakan logical nullish assignment:

```javascript
a ??= 'new value';
```

Kode diatas akan ditranspilasi oleh [Babel](https://babeljs.io/repl#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=IYAg_GC8IEQHYFMDuIBuwA2BXBMg&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=false&presets=env&prettier=false&targets=&version=7.12.3&externalPlugins=) menjadi:

```javascript
var _a;

(_a = a) !== null && _a !== void 0 ? _a : (a = 'new value');
```



##### Referensi:

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment