Belajar JavaScript Untuk Pemula : Operator JavaScript Part 2


Halo sobat lautan, semoga sehat selalu ya. 
Kembali lagi dengan artikel terbaru yang membahas pemrograman website. Kali ini kita akan mempelajari JavaScript. Pada artikel sebelumnya dalam bagian JavaScript, kita telah membahas tentang operator JavaScript. Namun, hanya sedikit yang saat itu bahas. Ya, belajar itu pelan-pelan dulu ya. Gak bisa langsung joosh gitu.


Kali ini kita akan membahas operator string, bitwise, assigment, dan spread. Jooom, cekidot

Operator String 

Operator ini digunakan untuk penyambungan string, dan menggunakan karakter tambah + untuk menyambungkannya. Jika data yang disambung bukan tipe string, akan di konversi menjadi string secara otomatis. Berikut contoh penggunaanya

var foo, bar, baz;

foo = "Sedang " + "Belajar " + "JavaScript";
console.log(foo); // Sedang Belajar JavaScript

foo = "Belajar " + "ECMAScript " + 7;
console.log(foo); // Belajar ECMAScript 7

foo = 'Selamat ';
bar = "Malam ";
baz = `Indonesia`;
hasil = foo + bar + baz;
console.log(hasil); // Selamat Malam Indonesia

Dari script diatas, terlihat jelas bahwa lautan menyambungkan string yang dibuat langsung dan string yang berada di dalam variabel. Pada baris terakhir, tidak ada perbedaan string yang dibuat dengan tanda kutip satu, kutip dua, ataupun backtick. Operator + disini, berpera untuk menyambungkan string dengan sebuah variabel. Contoh ;

var foo, bar, baz;
var siswa = ["Andri", "Joko", "Sukma", "Rina", "Sari"];

foo = siswa[1] + " mendapat penghargaan sebagai siswa teladan";
console.log(foo);
// Joko mendapat penghargaan sebagai siswa teladan

bar = siswa[3] + ' dan ' + siswa[4] + ' adalah teman akrab';
console.log(bar);
// Rina dan Sari adalah teman akrab

baz = "Dalam ujian kemaren, " + siswa[0] + ' mendapat nilai ' + 4*20;
console.log(baz);
// Dalam ujian kemaren, Andri mendapat nilai 80

Terdapat 5 array yang berisi 5 element. Untuk membuat string yang didalamnya terdapat array, kita bisa menggunakan operator plus + untuk dua fungsi, yakni untuk keluar dan masuk dari string. Contoh 

bar = siswa[3] + ' dan ' + siswa[4] + ' adalah teman akrab';

Untuk menampilkan isi element array dari siswa ke-4 (dengan index = 3), maka diperlukan perangkaian variabel bar dengan menulis siswa[3]. Ini adalah perintah JavaScript untuk akses element array. Perintah harus ditulis di luar string, karena jika didalam, akan menjadi 'siswa[3]' ,bukan Rina yang ada di array siswa.

Kemudian sambungan siswa[3] dengan atau beruju pada string ' dan '. Karena, ini merupakan string, jadi harus disambung menggunakan operator +. Setelah itu lautan keluar lagi dari string dan mengakses siswa[4]. Terakhir kembali di sambung dengan string ' adalah teman akrab'. Hasilnya, Rina dan Sari adalah teman akrab.

Teknik seperti ini, sering dilakukan oleh banyak programmer. Kuncinya, adalah pemahaman perangkaian string tersebut, jika kode itu adalah kode JavaScript layaknya variabel, harus di tulis di luar string. Kita tidak bisa menulisnya seperti dibawah ini

bar = 'siswa[3] dan siswa[4] adalah teman akrab';

Karna siswa[3[ dan siswa[4] akan diproses sebagai bagian dari string, bukan kode JavaScript untuk akses element array siswa. Dengan adanya fitur template string dari ECMAScript 6, kita bisa menulis semuanya dalam string, seperti contoh dibawah ini

var foo, bar, baz;
var siswa = ["Andri", "Joko", "Sukma", "Rina", "Sari"];

foo = `${siswa[1]} mendapat penghargaan sebagai siswa teladan`;
console.log(foo);
// Joko mendapat penghargaan sebagai siswa teladan

bar = `${siswa[3]} dan ${siswa[4]} adalah teman akrab`;
console.log(bar);
// Rina dan Sari adalah teman akrab

baz = `Dalam ujian kemaren ${siswa[0]} mendapat nilai + {4*20}`;
console.log(baz);
// Dalam ujian kemaren, Andri mendapat nilai 80


Penyambungan String atau Penambahan Angka

Dalam JavaScript, operator penyambungan string dan penambahan angka (aritmatika) sama-sama menggunakan tanda plus. Karna sifat JavaScript yang bisa mengubah tipe data otomatis, hal ini bisa menjebak anda saat mulai belajar. Contoh ;

var foo;

foo = 10 + 10 + 9;
console.log(foo); // 29

foo = '10' + 10 + 9;
console.log(foo); // 10109

foo = 10 + '10' + 9;
console.log(foo); // 10109

foo = 10 + 10 + '9';
console.log(foo); // 209

Contoh pertama, mungkin tidak akan aneh, karena foo = 10 + 10 + 9 adalah tipe data yang sama yakni number. Di contoh kedua, lautan membuat foo = '10' + 10 + 9. Angka pertama bukanlah tipe data number, melainkan sebuah string dengan isi angka 10. Hasilnnya adalah 10109. Artinya, JavaScript mengonversi number 10 dan 9 menjadi string. Efek yang sama juga berlaku untuk contoh ketiga.
Contoh keempat, yakni foo = 10 + 10 + '9', hasilnya adalah 209. Ini terjadi karena string terletak di akhir. 

Operator Bitwise

Operator khusus untuk penanganan operasi logika berbasis bilangan biner, yang terdiri hanya dari dua angka yakni 0 dan 1. Contohnya 1100 dan 1110 0110. Opeator ini jarang digunakan dan tergolong cukup rumit. 6 Operator bitwise adalah 


Contoh penggunaan

var a = 0b10101010; // desimal 170
var b = 0b11011110; // desimal 222

console.log(a); // 170
console.log(b); // 222

var foo;

foo = a & b;
console.log(foo); // 138 desimal = 1000 1010 biner

foo = a | b;
console.log(foo); // 254 desimal = 1111 1110 biner

foo = a ^ b;
console.log(foo); // 116 desimal = 0111 0100 biner

foo = ~a;
console.log(foo); // -171 desimal

foo = a >> 2;
console.log(foo); // 42 desimal = 0010 1010 biner

foo = a << 3;
console.log(foo); // 1360 desimal = 0101 0101 0000 biner

Di awal script terlihat, ada dua variabel a dan b. Keduanya di isi angka biner. Variabel a berisi 10101010, sedangkan b berisi 11011110. Seluruh operator bitwise beroperasi dalam bit. Operator and (&) akan menghasilkan angka 1 jika nilai bit dari kedua variabel bernilai 1. Jika tidak akan menjadi nol. Berikut cara perhitungannya

a = 10101010
b = 11011110
--------
a & b = 10001010 = 138 (desimal)

Operator or (|) akan menghasilkan angka 1 jika salah satu nilai bit dari kedua variabel bernilai 1. Jika tidak, akan menjadi nol. Berikut cara perhitunganya

a = 10101010
b = 11011110
--------
a | b = 11111110 = 254 (desimal)

Operator xor (^) akan menghasilkan angka 1 jika salah satu dari kedua variabel bernilai 1, jika tidak jika keduanya sama sama 1 atau sama-sama 0 Berikut cara perhitungannya

a = 10101010
b = 11011110
--------
a ^ b = 01110100 = 116 (desimal)

Operasi not (~) akan membalikkan nilai bit dari 0 menjadi 1, dan dari 1 menjadi 0. Namun perhitungan operasi ini menjadi rumit karena menggunakan metode two complement. Berikut cara perhitungannya

a              = 00000000000000000000000010101010 (32 bit)
--------------------------------
~a           = 11111111111111111111111110101010 (32 bit negative)
Flip & -1  = 00000000000000000000000010101010 - 1
~a           = 00000000000000000000000010101011 = -171 (desimal)

Operator shift right (>>) akan menggeser seluruh bit yang ada ke kanan sebanyak beberapa tempat. Jika di tulis a >> 2, artinya bit-bit penyusun variabel a akan di geser 2 kali ke kanan. Berikut prosesnya

$a = 10101010 = 170(desimal)
$a >> 1 = 01010101 = 85 (desimal)
$a >> 2 = 00101010 = 42 (desimal)

Karena digeser ke kanan, otomatis bit paling kanan akan hilang, dan di sisi kiri akan diisi dengan angka 0. Setiap pergeseran 1 tempat ke kanan akan membagi 2 nilai asal. Dalam contoh hasilnya adalah 170/2 = 85, dan 85/2 = 42 dibulatkan. 

Operator shift left (<<), sama seperti operator sebelumnya, hanya saja arahnya yang ke kiri. Berikut prosesnya

$a = 10101010 = 170 (desimal)
$a << 1 = 101010100 = 340 (desimal)
$a << 2 = 1010101000 = 680 (desimal)
$a << 3 = 10101010000 = 1360 (desimal)

Karena digeser ke kiri, bit paling kiri akan pindah ke tempat yang lebih tinggi, kemudian disisi kanan diisi dengan angka 0. Setiap pergeseran 1 tempat ke kanan akan menggali 2 nilai asal. Contoh hasilnya adalah 170*2 = 340, 340*2 = 680, 680*2 = 1360.

Operator Assigment

Operator yang digunakan untuk memasukkan nilai ke dalam sebuah variabel. Tandanya adalah tanda sama dengan =. Berikut contoh penggunaannya

var a = 12;
var b = "Belajar";

a = a + 10;
a = a + a + 5;

b = b + " JavaScript";
b = b + " dari website lautan-it";

console.log(a); // 49
console.log(b); // Belajar JavaScript dari website lautan-it

Variabel a dan b diisi dengan nilai 12 dan Belajar. Kemudian ada perintah a = a + 10, yang artinya variabel a di tambah 10, baru kemudian disimpan kembali dalam variabel a, hasilnya variabel a sekarang berisi angka 12 + 10 = 22. Konsep ini sangat mudah dipahami. Pada perintah a = a + 10 yang diproses terlebih dahulu adalah operasi disisi kanan tanda sama dengan. Dengan kata lain, bisa ditulis seperti ini : a = (a +10). Di baris selanjutnya ada, a = a + a + 5, yang artinya 22 + 22 + 5 = 49, untuk a

Contoh berikutnya, adalah operasi assigment untuk tipe data string. Konsepnya sama seperti variabel a tadi, dimana sisi kanan tanda sama dengan akan diproses terlebih dahulu. Operasi = b + "JavaScript", diproses sebagai b = "Belajar" + "JavaScript", menjadi b = "Belajar JavaScript". Dan terakhir menjadi "Belajar JavaScript dari website lautan-it".


Operator Gabungan Assigment

 
Berikut contoh penggunaannya

var a = 12;
var b = "Belajar";

a += 10;
a += a + 5;
console.log(a); // 49

b += " JavaScript";
b += " dari buku JavaScript Uncover";
console.log(b); // Belajar JavaScript dari buku JavaScript Uncover

a /= 7;

console.log(a); // 7

a -= 5;
console.log(a); // 2

Operator Spread

Digunakan untuk berbagai keperluan yang berhubungan dengan array, dan salah satunya adalah menggabungkan array, menggunakan tanda titik tiga kali kemudian diikuti dengan nama variabel. Berikut contoh penggunaannya

var nilai1 = ["a", "b", "c", "d"];
console.log(nilai1);
// Array [ "a", "b", "c", "d" ]

var nilai2 = [1, 2, 3, 4];
console.log(nilai2);
// Array [ 1, 2, 3, 4 ]

var nilai3 = [...nilai1,"e", "f"];
console.log(nilai3);
// Array [ "a", "b", "c", "d", "e", "f" ]

var nilai4 = [0, ...nilai2, 5, 6];
console.log(nilai4);
// Array [ 0, 1, 2, 3, 4, 5, 6 ]

var nilai5 = [...nilai2, ...nilai3];
console.log(nilai5);
// Array [ 1, 2, 3, 4, "a", "b", "c", "d", "e", "f" ]

Di awal script, ada 2 buah array, yakni array nilai1 yang berisi 4 karakter huruf, dan array nilai2 yang berisi 4 angka. Saat proses pengisian array nilai 3, lautan menulis var nilai3 = [...nilai1,"e", "f"]. Tanda ... nilai1 adalah penulisan operator spread, yang tujuannya untuk mengakses seluruh element dari array nilai1. Dengan kata lain, lautan ingin membuat array nilai3 yang isinya terdiri dari seluruh array nilai1 ditambah 2 karakter lagi, yakni 'e' dan 'f'.

Proses pembuatan array nilai4, kurang lebih sama, dimana var nilai4 = [0, ...nilai2, 5, 6]. Artinya variabel array nilai4 terdiri dari angka 0, seluruh element dari array2, dan ditambah 2 angka baru, yakni 5 dan 6. Terakhir nilai5, elementnya berasal dari array nilai2 dan nilai3. 


Urutan Operator dalam JavaScript



Semoga bermanfaat :)

Post a Comment

0 Comments