DEV Community

Armedi
Armedi

Posted on

Logical Assignment Operators di Javascript

#javascript

Ada beberapa operator baru yang sangat praktis digunakan untuk mempersingkat kodingan Javascript kamu. Proposalnya 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 atau menggunakan Typescript.

Ada 3 operator yang masuk dalam 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:

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

// cara 2
a = a || 'new value';
Enter fullscreen mode Exit fullscreen mode

Dengan logical OR assignment menjadi lebih singkat:

a ||= 'new value';
Enter fullscreen mode Exit fullscreen mode

Kode diatas akan ditranspilasi oleh Babel menjadi:

a || (a = 'value');
Enter fullscreen mode Exit fullscreen mode

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:

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

// cara 2
a = a && 'new value';
Enter fullscreen mode Exit fullscreen mode

Syntax diatas bisa dipersingkat dengan menggunakan logical AND assignment:

a &&= 'new value';
Enter fullscreen mode Exit fullscreen mode

Hasil transpilasinya oleh Babel menjadi:

a && (a = 'new value');
Enter fullscreen mode Exit fullscreen mode

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:

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

// cara 2
a = a ?? 'new value';
Enter fullscreen mode Exit fullscreen mode

Akan menjadi lebih singkat dengan menggunakan logical nullish assignment:

a ??= 'new value';
Enter fullscreen mode Exit fullscreen mode

Kode diatas akan ditranspilasi oleh Babel menjadi:

var _a;

(_a = a) !== null && _a !== void 0 ? _a : (a = 'new value');
Enter fullscreen mode Exit fullscreen mode
Referensi:

Top comments (0)

Read next

mattbrailsford profile image

Creating your own UI extension points in Umbraco v14 - Part 1: The Basics

Matt Brailsford -

rahulisversatile profile image

Coder's Journey

Rahul Sharma -

prathamdupare profile image

API Routes in Next.js - Part 4

Pratham Dupare -

steeve profile image

Tabs Component with RiotJS (Material Design)

Steeve -