Tingkatan Operator (Precedence) di JavaScript – JavaScript Dasar #7

Tingkatan Operator (Precedence) di JavaScript

Pada bagian sebelumnya kita sudah belajar tentang jenis-jenis operator yang ada pada JavaScript dan bagaimana cara menggunakannya. Seperti yang sudah dijanjikan, pada bagian ini kita akan belajar tentang operator precedence yang ada di JavaScript.

Sebelum membahas lebih dalam tentang apa itu operator precedence di JavaScript, coba lebih dulu cermati potongan kode sederhana berikut:

var x = 10 + 20 / 2 + 3;

Bagaimana JavaScript akan melakukan operasi pada contoh potongan kode tersebut? Mungkin jika kita harus mengerjakan ini secara manual, secara tidak sadar bisa saja kita akan melakukan penjumlahan seperti biasa.

Mungkin kita akan pertama kita akan menjumlahkan “10” dengan “20” sehingga mendapat nilai “30” (10 + 20 = 30) , agar mudah kemudian kita akan menambahkan “2” dengan “3” terlebih dahulu sehingga mendapatkan hasil “5” (2 + 3 = 5), baru kemudian membagikan nilai “30” dengan “5” sehingga mendapat hasil “6” (30 / 5 = 6).

Mungkin juga kita akan melakukan penjumlahan secara berurutan.

Namun pada kenyataannya yang akan JavaScript engine lakukan berbeda. JavaScript akan membagi “20” dengan “2” sehingga mendapatkan nilai “10” (20 / 2 = 10), kemudian baru menjumlahkan “10” dengan “10” dan “3” sehingga mendapatkan hasil “23” (10 + 10 + 3 = 23).

Untuk memastikannya, kamu bisa coba menjalankan potongan kode tersebut pada tab console di browser dan lihat hasil dari proses pada potongan kode tersebut, hasilnya adalah “23”, hal itu disebabkan oleh operator precedence.

Operator Precedence dalam Pemrograman dan Matematika

Pada pemrograman dan matematika secara umum, operator precedence adalah kumpulan peraturan yang mengatur tentang operasi mana yang akan dilakukan lebih dahulu terhadap sebuah ekspresi yang ada.

Jika kamu masih ingat pada pelajaran matematika dasar, ada operasi yang akan dilakukan lebih dulu dibandingkan dengan operasi yang lain jika terdapat beberapa beberapa operasi bersamaan dalam sebuah ekspresi.

Misalnya pada contoh di atas, terdapat beberapa operasi yaitu 2 buah operasi penjumlahan dan 1 buah operasi pembagian, dan 1 buah operasi penugasan (operasi penugasan juga merupakan sebuah operasi).

Dalam operator precedence, jika terdapat operasi penjumlahan dan pembagian dalam satu buah ekspresi, operasi yang harus dilakukan terlebih dahulu adalah operasi pembagian karena pembagian memiliki precedence yang lebih tinggi, itulah kenapa operasi diatas hasilnya adalah “23”.

Ada banyak operator yang ada pada JavaScript, seperti yang sudah kita pelajari sebelumnya (masih ada banyak operator lain namun jarang digunakan dalam pemrograman secara umum, kecuali pada kasus tertentu).

Masing-masing operator tersebut memiliki tingkat kepentingannya sendiri dalam operator precedence, sehingga jika terdapat beberapa operasi dalam satu ekspresi, ada operator yang akan dilakukan terlebih dahulu sebelum operasi yang lain.

Untuk itu penting bagi kita untuk mengetahui tentang operator precedence agar tidak terjadi kesalahan dalam operasi ataupun logika program yang sedang kita buat.

Berikut adalah daftar operator lengkap operator yang ada pada JavaScript beserta dengan precendence, operator yang memiliki nilai precedence yang lebih tinggi memiliki urutan eksekusi lebih dahulu.

Daftar Operator dan Nilai Precedence-nya di JavaScript

Menangani Masalah Banyaknya Operator dalam Satu Baris Ekspresi JavaScript

Pada awal bagian tutorial ini kita membahas sebuah permasalahan ekspresi sederhana:

var x = 10 + 20 / 2 + 3;

Seperti yang sudah kita ketahui, JavaScript akan melakukan operasi pembagian terlebih dahulu yaitu (20 / 2 = 10), kemudian baru menjumlahkan hasil tersebut yaitu “10” dengan nilai “10” yang di belakang dan nilai “3” yang ada di depannya, sehingga mendapatkan hasil “23” (10 + 10 + 3 = 23).

Bagaimana jika karena kondisi tertentu atau logika program mengharuskan kita untuk melakukan penjumlahan “10” dengan “20” (10 + 20) dan penjumlahan “2” dengan “3” (2 + 3) terlebih dahulu? Baru kemudian melakukan pembagian dari kedua hasil tersebut.

Untuk menangani masalah atau kebutuhan tersebut, kita bisa membungkus operasi yang ingin dikerjakan terlebih dahulu tersebut dengan tanda kurung, sehingga potongan kode sebelumnnya menjadi seperti berikut:

var x = (10 + 20) / (2 + 3);

Seperti pada tabel diatas sebelumnya, tanda kurung (parentheses) memiliki precedence yang paling tinggi diantara semua operator yang ada. Untuk itu jika kita ingin sebuah operasi dilakukan terlebih dahulu, kita dapat membungkus operasi tersebut dalam tanda kurung seperti contoh diatas.

Pada contoh diatas, operasi (10 + 20) dan operasi (2 + 3) akan dilakukan terlebih dahulu sesuai dengan kondisi atau kebutuhan logika program yang kita inginkan, sehingga operasi tersebut akan mendapatkan hasil “6” sesuai yang diharapkan.

Untuk memastikannya kamu dapat mencobanya sendiri dan lihat hasil yang didapatkan.

Itu dia konsep dan bagaimana operator precedence bekerja pada JavaScript. Operator precedence adalah konsep yang penting dan harus kamu ketahui. Kamu tidak perlu menghafal seluruh nilai-nilai precedence seluruh operator tersebut.

Kamu hanya perlu mengetahui precedence dasar serta bagaimana konsep dan cara kerja operator precedence, nanti pada saat kamu butuh melihat precedence secara lengkap kamu dapat kembali ke halaman ini untuk memastikannya.