Belajar JavaScript Untuk Pemula : Operator Javascript


Halo sobat Lautan, semoga sehat selalu ya. 
Kali ini, kita akan belajar bahasa pemrograman JavaScript. Sebuah bahasa pemrograman yang ditujukan untuk memberikan interaksi pada struktur HTML. 
Pada artikel sebelumnya dalam kategori ini, kita telah membahas tentang tipe data. 

kita ketahui bersama, bahwa tipe data terbagi dalam 2 bagian besar, yakni tipe data primtif dan tipe data object. Untuk dapat memahaminya kembali, silahkan klik link dibawah ini


Nah, kali ini kita akan belajar mengenai operator JavaScript. 

Operator di perlukan untuk memproses data yang sudah diinput ke dalam JavaScript. Berikut adalah daftar operator yang akan kita pelajari, yakni ;
  • Operator Aritmatika
  • Operator Increment dan Decrement
  • Operator Perbandingan
  • Operator Logika
  • Operator String 
  • Operator Bitwise
  • Operator Assigment
  • Operator Spread
Karena pembahasan mengenai operator JavaScript panjang sekali, Lautan akan membaginya dalam dua bagian. 
Pada artikel kali ini, Lautan akan membahas 4 operator, terlebih dahulu, yakni operator aritmatika, Increment dan Decrement, perbandingan, dan logika. 


Operator Aritmatika

Operator ini sering kita gunakan untuk melakukan perhitungan dengan angka, seperti penambahan, pengurangan, perkalian, dan pembagian. 
Didalam JavaScript sendiri juga memiliki operator modulus atau sisa hasil bagi. 

Berikut adalah tabel operator aritmatika :


Berikut adalah contoh penggunaannnya dalam JavaScript,

var foo;

foo = +100;
console.log (foo);   // 100

foo = -22;
console.log(foo);  // -12 

foo = 30 + 5;
console.log(foo); // 35

foo = 3.33 + 9.02;
console.log(foo); // 12.35

foo = 9 * 7;

console.log(foo); // 63

foo = 6 + 8 / 2 + 6;

console.log(foo); // 16

foo = 30 % 7;
console.log(foo); // 2


Operator modulus digunakan untuk mencari sisa hasil bagi. Sebagai contoh, 10 % 3 = 1, karena 3 * 3 = 9 (sisa 1). Contoh lain, 30 % 7 = 2, karena 7 * 3 = 28 (sisa 2). 

Operator jenis ini sering disingkat menjadi mod, dan cukup sering digunakan dalam pemrograman, semisal membedakan antara angka bulat dengan ganjil. Jika sebuah angka di mod kan dengan 2 hasilnya 0, maka itu adalah angka bulat, jika tidak nol, maka itu pasti angka ganjil.

Dalam urutan kekuatan, operator perkalian dan pembagian lebih kuat ketimbang operator penjumlahan dan pengurangan. Contoh 

var foo;

foo = 4 + 6 / 5 - 3 * 2 + 3;
console.log(foo); // 2.2

foo = (4 + 6) / (5 - 3) * 2 + 3;
console.log(foo); // 13

Angka dan operator yang digunakan dalam kedua contoh adalah sama, namun hasilnya berbeda. Ini terjadi karena contoh pertama yang dijalankan adalah (4 + (6 / 5) - (3 * 2) + 3), dimana operator daripada pembagian dan perkalian akan diproses terlebih dahulu sebelum penambahan dan pengurangan.

Operator Increment dan Decrement

Operator increment adalah sebutan untuk penulisan seperti i++. 
Perintah ini digunakan untuk menaikan nilai variabel i sebanyak satu angka. Penulisan i++ adalah penulisan singkat daripada i = i + 1. 

Sedangkan operator decrement adalah sebutan untuk penulisan seperti i--. Perintah ini digunakan untuk menurunkan nilai variabel i sebanyak satu angka. Penulisan i-- adalah penulisan singkat dari i = i - 1

Posisi daripada peletakan tanda ++ dan -- bisa ditaruh diawal mapun diakhir variabel. Contoh seperti ++i maupun i++. Keduanya memiliki fungsi yang sama, tapi dengan cara eksekusi yang berbeda. Berikut adalah tabel perangkuman perbedaannya.


Berikut adalah penggunaanya, untuk membedakan pre dan post increment serta decrement

var foo;

foo = 7;
console.log(++foo); // 8
console.log(foo); // 8

foo = 7;
console.log(foo++); // 7
console.log(foo); // 8

 foo = 7;
console.log(--foo); // 6
console.log(foo); // 6

foo = 7;
console.log(foo--); // 7

console.log(foo); // 6

Pre-increment, yakni ++foo artinya naikkan nilai variabel daripada foo sebanyak 1 angka, lalu tampilkan angka yang sudah dinaikkan ini. Dengan begitu, perintah console.log(++foo) dengan console.log(foo) akan menghasilkan nilai yang sama, karena variabel foo sama-sama berisi angka 8 (angka setelah di-increment-kan)

Berbeda dengan Pre-increment, Post-increment dari perintah foo++ akan menampilkan nilai foo saat ini, lalu menaikkan nilainya. Maksudnya tampilkan dulu, baru ditambahkan. Pada perintah console.log(foo+) diproses, akan tampil angka 7. Inilah yang disebut efek, tampilkan lebih dulu. Dan setelah perintah dijalankan, variabel foo sudah naik menjadi 8, dari hasil console.log(foo)

Baik operator increment dan decrement, sering digunakan untuk struktur kondisi perulangan


Operator Perbandingan

Operator ini berfungsi untuk memeriksa bagaimana hubungan suatu nilai dengan nilai lain, apakah itu sama besar, lebih besar atau lebih kecil. 

Semisal variabel a > dari variabel b ? Hasil akhir dari perbandingan ini adalah tipe data boolean, yakni True atau False

Berikut adalah tabel operator perbandingan didalam JavaScript 


Untuk lebih jelasnya, silahkan praktekkan script dibawah ini


var foo;



foo = 9 < 12;

console.log(foo); // true

foo = 5 < 5;
console.log(foo); // false

foo = 5 <= 5;
console.log(foo); // true

foo = 8 != 12;
console.log(foo); // true

foo = 15 == 12;
console.log(foo); // false

foo = 15 === 15;
console.log(foo); // true

foo = 0.3 === 3e-1;
console.log(foo); // true

Untuk tambahan, operator ini juga bisa digunakan untuk tipe data string, contoh ;

var foo;

foo = 'a' < 'b';
console.log(foo); // true

foo = 'a' < 'A';
console.log(foo); // false

foo = 'reva' < 'revika';
console.log(foo); // true

foo = false < true;
console.log(foo); // true

foo = 'joni' == 12;
console.log(foo); // false

JavaScript akan menggunakan nomor urut karakter ASCII untuk bisa menentukan huruf mana yang lebih besar. Sebagai contoh, huruf "a" memiliki kode ASCII 97 desimal, sedangkan b adalah 98, dengan demikian operasi 'a' < 'b' bernilai True karena 'a' lebih kecil dari 'b'

Apabila yang dibandingkan adalah string kata atau kalimat, maka perbandingan akan dilakukan huruf per huruf

Perbandingan == dengan ===

Didalam operator perbandingan kita akan mempelajari bedanya antara == dengan ===. Operator 3 buah sama dikenal juga dengan "identik dengan", dan hanya menghasilkan true jika nilai yang dibandingkan memiliki tipe data yang sama. 

Berikut adalah contoh perbedaannya

var foo;

foo = 9 == '9';
console.log(foo); // true

foo = 9 === '9';
console.log(foo); // false

foo = true == 1;
console.log(foo); // true

foo = true === 1;
console.log(foo); // false

foo = false == 0;
console.log(foo); // true

foo = false === 0;
console.log(foo); // false

Untuk operator sama dengan (==), jika didalamnya terdapat dua tipe data berbeda, maka JavaScript akan terlebih dahulu mengkonversi tipe data tersebut ke tipe data yang lain, lalu setelahnya dibandingkan 

Seperti perbandingan 9 == '9' , true == 1, dan false == 0

Ini bisa terjadi karena string '9' dianggap sama dengan tipe data number '9', hal yang sama juga berlaku untuk angka 1 dan angka 0.

Untuk operator identik dengan (===), akan mengecek apakah tipe data yang dibandingkan itu juga berbeda tipe data. Jika jawabannya, iya, hasilnya akan false. Operator ini hanya akan menghasil true, apabila kedua data bernilai sama dan memiliki tipe data yang sama
Secara umum, operator (===) lebih aman bila dibandingkan operator (==). 

Mengapa demikian ?

Karena kita bisa mengeliminasi kemungkinan daripada error yang disebabkan oleh konversi tipe data saat operasi perbandingan

Falsy dan Truthy Value

Didalam JavaScript, sebuah tipe data dapat berubah menjadi tipe data lain, tergantung dari operator yang digunakan. Untuk operator perbandingan, tipe data akan dikonversi menjadi boolean, apakah itu true atau false

Nilai yang hasil konversinya menjadi false dikenal dengan istillah falsy value, sedangkan yang dikonversi menjadi true, dikenal dengan istillah truthy value

Daftar falsy value
  • False
  • null
  • undefined
  • 0
  • NaN
  • ' ' (string kosong)
  • " " (string kosong)
Daftar truthy value
  • true
  • { } (object kosong)
  • [ ] (array kosong)
  • 42 (sembarang angka, termasuk angka negatif dan pecahan, selain angka 0)
  • "foo" (sembarang string, selama bukan string kosong)
  • infinity (termasuk-infinity)
Contoh dalam skrip ;

var foo;

foo = '' == '0';
console.log(foo); // false

foo = 0 == '' ;
console.log(foo); // true

foo = 0 == '0';
console.log(foo); // true

foo = false == 'false';
console.log(foo); // false

foo = false == '0';
console.log(foo); // true

foo = false == undefined;
console.log(foo); // false

foo = false == null ;
console.log(foo); // false

foo = null == undefined ;
console.log(foo); // true

foo = ' \t\r\n ' == 0 ;
console.log(foo); // true

Penggunaan operator 'identik dengan' (===) lebih dianjurkan daripada operator 'sama dengan' (==), guna menghindari hasil yang aneh.

Operator Logika

Operator ini digunakan untuk membandingkan 2 kondisi logika, yakni true dan false, dan nilai yang dibandingkan haruslah bertipe boolean. Jika tidak bertipe boolean, JavaScript akan secara otomatis mengkonversinya berdasarkan falsy dan truthy value


Contoh dalam skrip ;

var foo;

foo = true && false;
console.log(foo); // false

foo = true || false;
console.log(foo); // true

foo = !false;

console.log(foo); // true

foo = true || true && false;
console.log(foo); // true

foo = false && true || true;
console.log(foo); // true

Dalam JavaScript, untuk dapat menggunakan logika and, maka digunakan operator (&&), sedangkan untuk logika or, digunakan operator (||). Operator && memiliki kekuatan yang lebih tinggi bila dibandingkan dengan ||. Contohnya, var foo = true || true && false akan dijalankan sebagai var foo = true || (true && false), sehingga hasilnya adalah true.

Konsep Short-circuit Evaluation

Apa itu Short-circuit Evaluation ?.

Short-circuit Evaluation adalah mekanisme pemeriksaan 1 nilai hasil operasi yang berdampak penuh pada nilai-nilai yang lain. Contoh seperti script dibawah ini

var foo;

foo = true || false || true;
console.log(foo); // true

foo = false && true && true;
console.log(foo); // false

JavaScript akan menjalankan perintah diatas dari kiri ke kanan, terkecuali disana terdapat operator && dan || dalam 1 operasi, maka operasi && akan dijalankan terlebih dahulu

JavaScript akan memproses dari kondisi true, kemudian ditemukan operator ||. Disini, apapun nilai disisi kanan operator ||, hasilnya adalah true. Program akan berhenti sampai disana dan variabel foo akan bernilai true

Begitu juga dengan operasi kedua. JavaScript akan melihat "false &&", proses akan langsung berhenti karena sudah bisa dipastikan hasilnya adalah false. Karena operator &&, jika salah satu saja nilainya terdapat false, maka hasilnya adalah false.

Dan yang terjadi ketika nilai pertama true, operator && tidak akan bisa menyimpulkan hasilnya, operator akan memeriksa nilai setelah operator &&.

Fitur ini sering digunakan untuk kode program lanjutan.

Operasi Logika non Boolean

Jika operasi logika dijalankan untuk data non boolean, hasil akhir dari operasi ini juga bukan berupa boolean, melainkan nilai terakhir dari pemroresan tersebut. Contoh ;

var foo = "LautanIT" || "JavaScript";
console.log(foo); // LautanIT

var foo = "LautanIT" && "JavaScript";
console.log(foo); // JavaScript

var foo = true || "JavaScript";
console.log(foo); // true

var foo = false || "JavaScript";
console.log(foo); // JavaScript

var foo = "JavaScript" && false;
console.log(foo); // false

var foo = false && "JavaScript";
console.log(foo); // false

var foo = false || false && true || "JavaScript";
console.log(foo); // JavaScript

var foo = true || false && true || "JavaScript";
console.log(foo); // true

Lautan akan membahas operasi diatas satu per satu. Operasi pertama yaitu ;

var foo = "LautanIT" || "JavaScript";

Hasilnya berupa string "LautanIT"

Ketika baris tersebut diproses, JavaScript melihat nilai pertama berupa string "LautanIT", ini dipahami sebagai nilai true. Setelahnya operator || ditemukan. Sesuai dengan prinsip short circuit, proses akan berhenti karena apapun nilai setelah ||, tidak akan mempengaruhi hasil akhir dari operator or, yakni true.

Nilai true adalah nilai yang seharusnya dikembalikan dalam variabel foo, tetapi karena tipe data asal adalah string "LautanIT", nilai string inilah yang dikembalikan ke dalam foo.

Operasi kedua

var foo = "LautanIT" && "JavaScript";

JavaScript akan melihat nilai pertama yakni string "LautanIT" dan diketahui sebagai nilai true. Setelahnya terdapat operator &&. Konsep short-circuit tidak bisa dijalankan, sampai saat ini. Jika nilai berikutnya adalah false, hasil operasi ini adalah false, jika true, hasil akhirnya adalah true.

JavaScript akan melihat nilai kedua, dan ternyata nilai kedua adalah string "JavaScript", yang artinya juga true. Nilai true-lah yang seharusnya ada dalam variabel foo, namun karena tipe data asal adalah string "JavaScript", nilai inilah yang dikembalikan dalam foo.

Mengapa hasilnya bukan "LautanIT" ?,
karena dalam konsep lain dari operasi ini adalah, JavaScript akan mengembalikan nilai dari posisi terakhir yang di periksa

Operasi ketiga

var foo = true || "JavaScript";

Disini, karena yang diproses adalah true dan bertemu operator ||, maka konsep short-circuit akan berjalan, dan nilai true dikembalikan ke variabel foo

Operasi keempat

var foo = false || "JavaScript";

Konsep short-circuit tidak bisa dijalankan, karena yang diproses pertama kali adalah false dan ketemu dengan operator ||. JavaScript akan melihat nilai berikutnya, yakni string "JavaScript". Hasil akhir adalah true, dengan tipe data string berupa "JavaScript".

Operasi kelima

var foo = "JavaScript" && false;

Konsep short circuit tidak bisa dijalankan, sebab nilai pertama yang diperoleh adalah string "JavaScript" (true), sehingga harus dilihat nilai berikutnya. Dan ternyata nilai kedua adalah boolean false, nilai inilah yang dikembalikan ke variabel foo

Operasi keenam

var foo = false && "JavaScript";

Karena nilai false bertemu dengan operator &&, proses akan langsung berhenti dan mengembalikan nilai false, short circuit terjadi disini

Operasi ketujuh

var foo = false || false && true || "JavaScript";

Kode diatas akan dijalankan dari kiri ke kanan untuk memeriksa apakah terdapat short circuit. Karena operator && memiliki kekuatan yang lebih tinggi, maka operasi &&-lah yang akan diproses terlebih dahulu

Dengan demikian, operasi ini dijalankan sebagai berikut :

var foo = false || (false && true) || "JavaScript";

menjadi

var foo = false || false || "JavaScript";

Operasi akan diproses dari kiri ke kanan, sehingga yang terakhir diperiksa adalah string "JavaScript".

Operasi kedelapan

var foo = true || false && true || "JavaScript";

Ya dapat dipahami bersama bahwa kode diatas mengalami short-circuit.

Cukup sampai disini dulu pembahasanya, artikel berikutnya akan membahas tentang 4 operator JavaScript lainnya. So, pantengin terus LautanIT ya ;D. 

Post a Comment

0 Comments