Ads by Yasya El Hakim

Operator pada JavaScript

Mungkin, kita banyak mengenal tentang operator dari sekolah dan yang paling sering kita pelajari adalah seperti penambahan "+", perkalian "*", pengurangan "-", dan lain sebagainya.

Pada artikel kali ini, kita akan fokus pada beberapa aspek operator yang (mungkin) belum kita pelajari di sekolah.



Mengenal Istilah unary, binary, dan operand

Sebelum masuk lebih dalam, mari kita bahas beberapa terminologi umumnya:
Operand - merupakan salah satu tujuan dari operator. Misalnya, pada perkalian 5 * 2 terdapat dua operand: operand sebelah kiri adalah angka 5 dan operand sebelah kanan adalah 2. Terkadang juga terdapat beberapa orang yang menamai istilah operand sebagai argumen.
Unary - merupakan operand tunggal. Contoh, unary negasi "-" membalikkan angka. Perhatikan contoh kode berikut:

let x = 1;

x = -1;
alert(x); // -1, Unary negatif telah diterapkan


Binary - merupakan unary jika memiki dua operand tunggal. Minus yang sama juga ada dalam bentuk binary. Perhatikan contoh berikut:

let x = 1, y = 3;
alert(y-x); // 2, binary dikurai nilai


Umumnya, contoh kode diatas memiliki dua operator berbeda yang membagikan simbol yang sama: operator negasi, operator unary yang membalikkan nilai, dan operator pengurangan.

Rangkaian (Concatenation) String, binary + pada JavaScript

Sekarang, mari kita lihat fitur spesial dari operator JavaScript yang belum pernah kita pelajari di sekolah.

Biasanya, operator tambah "+" berfungsi untuk menjumlahkan angka. Tetapi, jika binary "+" diterapkan pada string, maka binary tersebut akan menggabungkan/menyatukan keduanya. Perhatikanlah contoh berikut:

let a = "string" + "ku";
alert(s); // stringku


Perhatikan bahwa jika salah satu operand adalah string, maka yang lainnya juga akan di konversi menjadi string. Contoh:

alert('1' + 2); // "12"
alert(2 + '1'); // "21"


Lihatlah hasil dari kode diatas, tidak terdapat masalah jika operand pertama dan kedua adalah string. Aturannya sangat sederhana: Jika salah satu operand adalah string, maka yang lainnya juga akan di ubah menjadi string.

Namun, perlu dicatat bahwa operasi tersebut berjalan dari kiri ke kanan. Jika terdapat dua angka yang diikuti string, maka angka tersebut akan di tambahkan sebelum di konversi ke string. Contoh:

alert(2 + 2 + '1'); // "41" bukan "221"


Rangkaian String (Concatenation) dan konversi adalah fitur khusus dari binary tambah "+". Operator aritmatika lain hanya bekerja dengan menggunakan angka dan hanya akan mengubah operand ke angka.

Perhatikan contoh pengurangan dan pembagian berikut:

alert(2 - '1'); // 1
alert('6' / '2'); // 3


Konversi Angka, unary + pada JavaScript

Tanda tambah "+" memiliki dua bentuk: bentuk binary seperti contoh diatas, dan bentuk unary.

Tanda tambah "+" unary atau dengan kata lain operator tanda tambah dapat di terapkan pada nilai tunggal dan tidak melakukan apapun kedalam angka. Tetapi jika operand bukanlah sebuah angka, maka unary tanda tambah akan mengubahnya kedalam angka. Contoh:

// Tidak berdampak pada angka
let x = 1;
alert(+x); // 1

let y = -2;
alert(+y); // -2

// Mengubah non-angka
alert(+true); // 1
alert(+"");   // 0


Contoh kode diatas sebenarnya melakukan hal yang sama dengan Number(...), tetapi lebih di persingkat.

Kebutuhan untuk mengubah string menjadi angka dapat terjadi sangat sering. Misalnya, jika kita mendapatkan suatu nilai dari form HTML yang biasanya berupa string. Bagaimana jika kita ingin menjumlahkannya?

Binary tanda tambah (plus) dapat menambahkannya sebagai string:

let apel = "2";
let jeruk = "3";

alert(apel + jeruk); // "23", Binary ditambah rangkaian string


Jika kita ingin memperlakukannya sebagai angka, kita harus mengubah dan menjumlahkannya:

let apel = "2";
let jeruk = "3";

// Kedua nilai telah diubah kedalam angka sebelum binary plus
alert(+apel + +jeruk); // 5

// Model lama
// alert(Number(apel) + Number(jeruk)); // 5


Dari sudut pandang guru atau ahli matematika, tanda tambah (plus) tersebut mungkin akan terlihat aneh. Tapi dari sudut pandang seorang programmer, hal itu biasa saja. Unary plus diterapkan terlebih dahulu, kemudian mengubah string menjadi angka, lalu binary plus dapat menjumlahkannya.

Lalu, mengapa unary plus ditetapkan pada nilai sebelum biner? Seperti yang telah kita lihat diatas, hal tersebut dapat terjadi karena mereka lebih diutamakan.

Operator yang Diutamakan pada JavaScript

Jika suatu ekspresi memiliki nilai lebih dari satu operator, maka urutan ketika dijalankan akan ditentukan oleh prioritasnya, atau dengan kata lain, urutan prioritas dari operator default.

Di sekolah, kita pasti tahu bahwa penghitungan dalam ekspresi 1 + 2 * 2 harus dihitung perkaliannya terlebih dahulu kemudian baru penambanhannya. Itulah salah satu hal yang di utamakan. Perkalian sangat diutamakan dari pada penambahan.

Jika kita tidak ingin dengan urutan penghitungan tersebut, kita dapat menggunakan tanda dalam kurung agar dapat di prioritaskan/diutamakan. Contoh, (1 + 2) * 2.

Terdapat banyak operator lain di JavaScript. Setiap operator juga memiliki prioritasnya masing-masing. Angka lebih besar akan diutamakan terlebih dahulu. Jika angkanya sama, maka urutan penghitungannya adalah dari kiri ke kanan.

Assignment pada JavaScript

Mari kita catat bahwa assignment seperti tanda sama dengan "=" juga merupakan sebuah operator, tetapi memiliki prioritas yang rendah.

Itulah salah satu alasannya, ketika kita ingin menetapkan sebuah variabel seperti x = 2 * 2 + 1, maka akan dihitung jika kita memberikan operator sama dengan "=" dan menyimpan nilai dari x. Perhatikan contoh berikut:

let x = 2 * 2 + 1;

alert(x); // 5


Sangatlah mungkin untuk menggunakan beberapa operator assignment:

let a, b, c;

a = b = c = 2 + 2;

alert(a); // 4
alert(b); // 4
alert(c); // 4


Contoh kode diatas akan di evaluasi dari kanan ke kiri. Pertama, ekspresi yang ada di sebelah kanan 2 + 2 akan segera di evaluasi, kemudian akan ditetapkan ke dalam variabel sebelah kiri c, b, a. Terakhir, semua variabel memiliki nilai tunggal yang sama.

Remainder % pada JavaScript

Walaupun operator remainder "%" menggunakan simbol yang sama seperti tanda persen. Tetapi, tidak ada kaitannya sama sekali dengan persen.

Hasil dari a % b adalah sisa dari pembagian integer a dari b, contoh:

alert( 5 % 2 ); // 1 adalah sisa dari 5 jika dibagi dengan 2
alert( 8 % 3 ); // 2 adalah sisa dari 8 jika dibagi dengan 3
alert( 6 % 3 ); // 0 adalah sisa dari 6 jika dibagi dengan 3


Exponentiation ** pada JavaScript

Operator exponentiation "**" adalah tambahan baru pada JavaScript.

Untuk bilangan angka b, hasil dari a**b adalah perkalian b sendiri. Contoh:

alert(2**2); // 4 , (2 * 2)
alert(2 ** 3); // 8, (2 * 2 * 2)
alert(2 ** 4); // 16, (2 * 2 * 2 * 2)


Operator tersebut juga dapat bekerja untuk angka non-integer. Contoh:

alert (4 ** (1/2)); // 2 (1/2 sama dengan akar kuadrat)
alert(8 ** (1/3)); // 2 (1/3 sama dengan akar kubik)


Penambahan/Pengurangan (Increment/decrement) pada JavaScript

Menambahkan atau mengurangi angka satu persatu adalah salah satu operasi angka yang umum digunakan.

Jadi, terdapat operator spesial untuk penambahan dan pengurangan.

Increment ++

Menambahkan sebuah variabel dengan angka 1:

let hitung = 2;
hitung++;     // Cara kerjanya sama seperti hitung = hitung + 1, tetapi lebih singkat
alert(hitung); // 3


Decrement --

Mengurangi sebuah variabel dengan angka 1:

let hitung = 2;
hitung--;     // Cara kerjanya sama seperti hitung = hitung - 1, tetapi lebih singkat
alert(hitung); // 1


Catatan: Increment/Decrement hanya dapat diterapkan pada variabel. Jika kalian menggunakannya pada angka seperti 5++, maka yang terjadi adalah error.

Operator ++ dan -- dapat diletakkan pada sebelum atau sesudah variabel.
  • Ketika operatornya ada pada sesudah variabel, maka akan berada dalam bentuk postfix: hitung++.
  • Bentuk prefix adalah ketika operatornya ada pada sebelum variabel: ++hitung.

Cara kerja dari kedua statement diatas itu sama: menambahkan hitung dengan 1.

Apakah terdapat perbedaan? Ya, tetapi kita hanya dapat melihatnya jika kita menggunakan nilai yang dihasilkan dari ++/--.

Mari kita perjelas lagi. Seperti yang sudah kita ketahui, semua operator akan menghasilkan suatu nilai. Increment/Decrement tidak memiliki pengecualian. Bentuk prefix akan mengembalikan nilai baru sedangkan postfix akan mengembalikan nilai lama.

Untuk melihat perbedaannya, perhatikanlah contoh berikut:

let hitung = 1;
let a = ++hitung; // (*)

alert(a); // 2


Pada baris (*), bentuk prefix ++hitung akan menambahkan hitung dan mengembalikan nilai baru 2.  Jadi, alert akan menampilkan 2.

Sekarang, mari kita gunakan bentuk postfix:

let hitung = 1;
let a = hitung++; // (*) mengubah ++hitung menjadi hitung++

alert(a); // 1


Pada baris (*), bentuk postfix hitung++ juga menambahkan hitung tetapi mengembalikan nilai lama. Jadi, alert akan menampilkan 1.

Kesimpulannya:
Jika hasil dari Increment/Decrement tidak digunakan, maka tidak ada perbedaan tentang bentuk mana yang digunakan. Contoh:

let hitung = 0;
hitung++;
++hitung;
alert(hitung); // 2, baris diatas melakukan hal yang sama


Jika kita ingin menambahkan sebuah nilai dan ingin langsung menggunakan hasil dari operator, kita membutuhkan bentuk prefix. Contoh:

let hitung = 0;
alert(++hitung); // 1


Jika kita ingin menambahkan sebuah nilai tetapi ingin menggunakan nilai sebelumnya, kita membutuhkan bentuk postfix. Contoh:

let hitung = 0;
alert(hitung++); // 1


Increment/Decrement diantara Operator Lain

Operator ++/-- juga dapat digunakan didalam ekspresi dan sangat diutamakan daripada operator lainnya. Contoh:

let hitung = 1;
alert(2 * ++hitung); // 4


Bandingkan dengan:

let hitung = 1;
alert(2 * hitung++); // 2, karena hitung++ akan mengembalikan nilai lama


Meskipun baik secara teknis, notasi seperti diatas biasanya dapat membuat kode sulit untuk di baca. Solusinya bisa seperti berikut:

let hitung = 1;
alert(2 * hitung);
hitung++;


Operator Bitwise pada JavaScript

Operator Bitwise dapat mempelakukan argumen sebagai angka integer 32-bit dan dapat bekerja pada tingkat representasi binernya.

Operator Bitwise tidaklah spesifik pada JavaScript tetapi sangat di dukung pada beberapa bahasa pemrograman.

Berikut adalah daftar operator Bitwise:
  • AND (&)
  • OR (|)
  • XOR (^)
  • NOT (~)
  • LEFT SHIFT (<<)
  • RIGHT SHIFT (>>)
  • ZERO-FILL RIGHT SHIFT (>>>)

Daftar operator diatas sangatlah jarang untuk digunakan. Untuk memahaminya, kita harus masuk kedalam tingkat angka yang lebih rendah dan jika kita pelajari pada artikel ini, menurut saya tidaklah optimal.

Pengeditan Kode

Mungkin kita juga akan sering menerapkan sebuah operator kedalam variabel dan menyimpan hasil baru kedalam variabel yang sama. Contoh:

let n = 2;
n = n + 5;
n = n * 2;


Notasi diatas dapat di persingkat dengan menggunakan operator += dan *=:

let n = 2;
n += 5; // akan menjadi n = 7 (sama seperti n = n + 5)
n *= 2; // akan menjadi n = 14 (sama seperti n = n * 2)

alert(n); // 14


Pengeditan operator secara singkat dapat di gunakan pada semua operator aritmatika dan bitwise seperti: /=, -=, dll.

Operator tersebut memiliki prioritas yang sama dengan assignment normal sehingga mereka dapat dijalankan setelah penghitungan lainnya:

let n = 2;

n *= 3 + 5;

alert(n); // 16 (bagian kanan akan dievaluasi terlebih dahulu, sama seperti n *= 8)


Tanda Koma pada JavaScript

Operator koma "," adalah salah satu operator yang jarang digunakan. Terkadang, operator tersebut digunakan untuk menulis kode secara singkat, jadi kita harus mengetahuinya.

Operator koma dapat kita gunakan untuk mengevaluasi beberapa ekspresi, membaginya dengan tanda koma ",". Masing-masingnya akan di evaluasi tetapi hanya hasil akhirnya yang dikembalikan. Contoh:

let a = (1 + 2, 3 + 4);

alert(a); // 7 (hasil dari 3 + 4)


Prioritas Tanda Koma

Silahkan diingat bahwa operator tanda koma memiliki prioritas yang rendah, lebih rendah dari =, jadi pada contoh diatas, tanda dalam kurung memiliki prioritas yang lebih tinggi.

Tanpa menggunakan tanda dalam kurung: yang akan dievaluasi terlebih dahulu pada a = (1 + 2, 3 + 4); adalah "+", menjumlahkan angka kedalam a = 3, 7, kemudian menetapkan operator "=", dan yang lain akan diabaikan. Sama seperti (a = 1 + 2), 3 + 4.

Mengapa kita membutuhkan operator yang dapat mengabaikan segalanya kecuali ekspresi terakhir? Terkadang, banyak orang menggunakannya dalam konstruksi yang lebih kompleks untuk menempatkan tindakan dalam satu baris. Contoh:         

// tiga operasi dalam satu baris
for (a = 1, b = 3, c = a * b; a < 10; a++) {
 ...
}


Trik seperti kode diatas sering digunakan dalam JavaScript Framework. Itulah mengapa kita harus mengetahuinya. Tetapi biasanya contoh kode seperti diatas tidak akan membuat kode mudah dibaca sehingga kita harus berfikir sebelum menggunakannya.

0Komentar

Sebelumnya Selanjutnya