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

harshboricha98 profile image

Cloud Computing Beyond Containers: How Cloudflare’s Isolates Are Changing the Game

Harsh boricha -

usluer profile image

Building a High-Performance Cache Manager in Node.js with TypeScript and ioredis

... -

ayusharpcoder profile image

ReactJS Best Practices: Writing Clean and Maintainable Code

Ayush Kumar Vishwakarma -

arindam_1729 profile image

Building a Kanban Board with Next.js,Vercel AI and Tolgee

Arindam Majumder -