Ahmad Muhardian · 30 Dec 2016

Belajar Javascript #6: Enam Jenis Operator yang Wajib Kamu Ketahui di Javascript

Setelah kamu belajar tentang Variabel dan Tipe data pada Javascript, materi selanjutnya yang harus dipelajari adalah tentang operator.

Operator merupakan hal dasar yang harus dipahami dalam pemrograman.

Karena kita akan banyak menggunakannya untuk melakukan berbagai macam operasi di dalam program.

Apa itu operator?

Ada operator apa saja di Javascript?

dan bagaimana cara menggunakannya?

Mari kita pelajar…

Misalkan kita punya dua variabel seperti ini:

var a = 3;
var b = 4;

Bagaimana cara menjumlahkan variabel a dan b?

Jawabannya: menggunakan tanda plus (+).

var c = a + b;

Hasil penjumlahannya akan disimpan di dalam variabel c.

Tanda plus + adalah sebuah operator.

Jadi…

Apa itu Operator?

Operator adalah simbol yang digunakan untuk melakukan operasi pada suatu nilai dan variabel.

Operator dalam pemrograman terbagi dalam 6 jenis:

Operator aritmatika;
Operator Penugasan (Assignment);
Operator relasi atau perbandingan;
Operator Logika;
Operator Bitwise;
Operator Ternary;

Operator wajib ada di setiap bahasa pemrograman. Ke 6 jenis operator di atas harus kamu pahami.

Mari kita bahas satu-persatu…

1. Operator Aritmatika pada Javascript

Operator aritmatika merupakan operator untuk melakukan operasi aritmatika seperti penjumlahan, pengurangan, pembagian, perkalian, dsb.

Operator aritmatika terdiri dari:

Nama Operator	Simbol
Penjumlahan	+
Pengurangan	-
Perkalian	*
Pemangkatan	**
Pembagian	/
Sisa Bagi	%

Untuk melakukan operasi perkalian, kita menggunakan simbol asterik *.

Jangan gunakan x, karena simbol x bukan termasuk dalam operator di dalam pemrograman.

Lalu untuk pemangkatan kita menggunakan asterik ganda **.

Untuk pembagian, kita gunakan simbol garis miring /.

Mari kita coba…

Contoh:

var a = 5;
var b = 3;

// menggunakan operator penjumlahan
var c = a + b;
console.log(c);

Hasilnya:

Coba juga untuk operator yang lainnya:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Operator Aritmatika</title>
</head>

<body>

    <script>
        var a = 15;
        var b = 4;
        var c = 0;

        // pengurangan
        c = a - b;
        document.write(`${a} - ${b} = ${c}<br/>`);

        // Perkalian
        c = a * b;
        document.write(`${a} * ${b} = ${c}<br/>`);

        // pemangkatan
        c = a ** b;
        document.write(`${a} ** ${b} = ${c}<br/>`);

        // Pembagian
        c = a / b;
        document.write(`${a} / ${b} = ${c}<br/>`);

        // Modulo
        c = a % b;
        document.write(`${a} % ${b} = ${c}<br/>`);
    </script>
</body>

</html>

Hasilnya:

Coba perhatikan operator modulo (%) dan operator penjumlahan (+).

Operator modulo adalah operator untuk menghitung sisa bagi.

Misal 3 dibagi 2, maka sisanya adalah 1.

3 % 2 = 1

Operator Penggabungan Teks

Mohon perhatikan!

Jangan sampai salah.

Pada Javascript, apabila kita akan melakukan operasi terhadap tipe data string atau teks menggunakan penjumlahan (+), maka yang akan terjadi adalah penggabungan; Bukan penjumlahan.

Contoh:

var a = "10" + "2";

Maka hasilnya akan:

Kenapa tidak 12?

Karena kedua angka tersebut merupakan string—perhatikan, dia diapit dengan tanda petik.

Untuk operasi yang lainnya, silakan dicoba-coba melalui console.

2. Operator Penugasan pada Javascript

Operator penugasan adalah operator yang digunakan untuk memberikan tugas kepada variabel. Biasanya digunakan untuk mengisi variabel.

Contoh:

var a = 19;

Variabel a kita berikan tugas untuk menyimpan nilai 19.

Operator penugasan terdiri dari:

Nama Operator	Sombol
Pengisian Nilai	=
Pengisian dan Penambahan	+=
Pengisian dan Pengurangan	-=
Pengisian dan Perkalian	*=
Pengisian dan Pemangkatan	**=
Pengisian dan Pembagian	/=
Pengisian dan Sisa bagi	%=

Operator penugasan sama seperti operator aritmatika. Ia juga digunakan untuk melakukan operasi aritmatika.

Contoh:

var jumlahView = 12;

// menggunakan operator penugasan penjumlahan
// untuk menambah nilai
jumlahView += 1;

Hasilnya:

Variabel jumlahView akan bertambah satu.

Maksud dari jumlahView += 1 adalah seperti ini:

jumlahView = jumlahView + 1;

Bisa dibaca:

Isi variabel jumlahView dengan penjumlahan dari nilai jumlahView sebelumnya dengan 1.

Khusus untuk operator penugasan yang dijumlahkan dan dikurangi dengan satu, bisa disingkat dengan ++ dan -- untuk pengurangan.

Contoh:

var a = 2;
a++;

Maka nilai dari variabel a akan menjadi 3.

Lalu pertanyaannya:

Apa bedanya dengan operator penugasan dengan operator aritmatika?

Operator aritmatika hanya melakukan operasi aritmatika saja, sedangkan operator penugasan… ia melakukan operasi aritmatika dan juga pengisian.

Berikut ini contoh operator penugasan:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Operator Penugasan</title>
</head>

<body>

    <script>
        document.write("Mula-mula nilai score...<br>");
        // pengisian nilai
        var score = 100;
        document.write("score = "+ score + "<br/>");

        // pengisian dan menjumlahan dengan 5
        score += 5;
        document.write("score = "+ score + "<br/>");

        // pengisian dan pengurangan dengan 2
        score -= 2;
        document.write("score = "+ score + "<br/>");

        // pengisian dan perkalian dengan 2
        score *= 2;
        document.write("score = "+ score + "<br/>");

        // pengisian dan pembagian dengan 4
        score /= 4;
        document.write("score = "+ score + "<br/>");

        // pengisian dan pemangkatan dengan 2
        score **= 2;
        document.write("score = "+ score + "<br/>");

        // pengisian dan modulo dengan 3;
        score %= 3;
        document.write("score = "+ score + "<br/>");
    </script>
</body>

</html>

Hasilnya:

Contoh operator penugasan pada Javascript

3. Operator Perbandingan pada Javascript

Operator relasi atau perbandingan adalah operator yang digunakan untuk membandingkan dua nilai.

Operator perbandingan akan menghasilkan sebuah nilai boolean true dan false.

Operator perbandingan terdiri dari:

Nama Operator	Simbol
Lebih Besar	>
Lebih Kecil	<
Sama Dengan	== atau ===
Tidak Sama dengan	!= atau !==
Lebih Besar Sama dengan	>=
Lebih Kecil Sama dengan	<=

Contoh:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Operator Perbandingan</title>
</head>

<body>

    <script>
        var aku = 20;
        var kamu = 19;

        // sama dengan
        var hasil = aku == kamu;
        document.write(`${aku} == ${kamu} = ${hasil}<br/>`);
        
        // lebih besar
        var hasil = aku > kamu;
        document.write(`${aku} > ${kamu} = ${hasil}<br/>`);
        
        // lebih besar sama dengan
        var hasil = aku >= kamu;
        document.write(`${aku} >= ${kamu} = ${hasil}<br/>`);
        
        // lebih kecil
        var hasil = aku < kamu;
        document.write(`${aku} < ${kamu} = ${hasil}<br/>`);
        
        // lebih kecil sama dengan
        var hasil = aku <= kamu;
        document.write(`${aku} <= ${kamu} = ${hasil}<br/>`);
        
        // tidak sama dengan
        var hasil = aku != kamu;
        document.write(`${aku} != ${kamu} = ${hasil}<br/>`);
    </script>
</body>

</html>

Hasilnya:

Pertanyaannya:

Apa perbedaan == (dua simbol sama dengan) dengan === (tiga simbol sama dengan)?

Perbandingan dengan menggunakan simbol == hanya akan membandingkan nilai saja. Sedangkan yang menggunakan === akan membandingkan dengan tipe data juga.

Contoh:

// ini akan bernilai true
var a = "4" == 4; //-> true

// sedangkan ini akan bernilai false
var b = "4" === 4; //-> false

Mengapa nilai b bernilai false?

Karena "4" (string) dan 4 (integer). Tipe datanya berbeda.

4. Operator Logika pada Javascript

Operator logika digunakan untuk melakukan operasi terhadap dua nilai boolean.

Operator ini terdiri dari:

Nama Operator	Simbol
Logika AND	&&
Logika OR	\|\|
Negasi/kebalikan	!

Contoh:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Operator Logika</title>
</head>

<body>

    <script>
        var aku = 20;
        var kamu = 19;

        var benar = aku > kamu;
        var salah = aku < kamu;

        // operator && (and)
        var hasil = benar && salah;
        document.write(`${benar} && ${salah} = ${hasil}<br/>`);
        
        // operator || (or)
        var hasil = benar || salah;
        document.write(`${benar} || ${salah} = ${hasil}<br/>`);
        
        // operator ! (not)
        var hasil = !benar
        document.write(`!${benar} = ${hasil}<br/>`);

    </script>
</body>

</html>

Hasilnya:

5. Operator Bitwise pada Javascript

Operator bitwise merupakan operator yang digunakan untuk operasi berdasarkan bit (biner).

Operator ini terdiri dari:

Nama	Simbol di Java
AND	&
OR	\|
XOR	^
Negasi/kebalikan	~
Left Shift	«
Right Shift	»
Left Shift (unsigned)	«<
Right Shift (unsigned)	»>

Operator ini berlaku untuk tipe data int, long, short, char, dan byte.

Operator ini akan menghitung dari bit-ke-bit.

Misalnya, kita punya variabel a = 60 dan b = 13.

Bila dibuat dalam bentuk biner, akan menjadi seperti ini:

a = 00111100
b = 00001101

(perhatikan bilangan binernya, angka 0 dan 1)

Kemudian, dilakukan operasi bitwise

Operasi AND

a     = 00111100
b     = 00001101
a & b = 00001100

Operasi OR

a     = 00111100
b     = 00001101
a | b = 00111101

Operasi XOR

a     = 00111100
b     = 00001101
a ^ b = 00110001

Operasi NOT (Negasi/kebalikan)

a   = 00111100
~a  = 11000011

Konsepnya memang hampir sama dengan operator Logika. Bedanya, Bitwise digunakan untuk biner.

Untuk lebih jelasnya…

Mari kita coba lihat contohnya:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Operator Bitwise</title>
</head>

<body>

    <script>
        var x = 4;
        var y = 3;

        // operator bitwise and
        var hasil = x & y;
        document.write(`${x} & ${y} = ${hasil}<br/>`);

        // operator bitwise or
        var hasil = x | y;
        document.write(`${x} | ${y} = ${hasil}<br/>`);

        // operator bitwise xor
        var hasil = x ^ y;
        document.write(`${x} ^ ${y} = ${hasil}<br/>`);

        // operator negasi
        var hasil = ~x;
        document.write(`~${x} = ${hasil}<br/>`);
        
        // operator bitwise right shift >>
        var hasil = x >> y;
        document.write(`${x} >> ${y} = ${hasil}<br/>`);

        // operator bitwise right shift <<
        var hasil = x << y;
        document.write(`${x} << ${y} = ${hasil}<br/>`);

        // operator bitwise right shift (unsigned) >>>
        var hasil = x >>> y;
        document.write(`${x} >>> ${y} = ${hasil}<br/>`);

    </script>
</body>

</html>

Hasilnya:

Contoh operator bitwise dalam Javascript

6. Operator Ternary pada Javascript

Terakhir ada operator Ternary…

Operator ternary merupakan operator yang terdiri dari tiga bagian.

Operator-operator sebelumnya hanya dua bagian saja, yaitu: bagian kiri dan kanan. Ini disebut operator binary.

Sementara operator trinary ada bagian kiri, tengah, dan kanan.

bagian kiri <operator> bagian tengah <operator> bagian kanan

Operator ternary pada Javascript, biasanya digunakan untuk membuat sebuah percabangan if/else.

Simbol operator ternary terdiri dari tanda tanya dan titik dua (?:).

Bentuknya seperti ini:

<kondisi> ? "benar" : "salah"

Perhatikan! <kondisi> dapat kita isi dengan ekspresi yang menghasilkan nilai true dan false.

Apabila kondisi bernilai true, maka "benar" yang akan dipilih dan sebaliknya—apabila false—maka "salah" yang akan dipilih.

Operator ini unik, seperti membuat pertanyaan.

Pada contoh di atas, “Kamu suka aku” adalah pertanyaan atau kondisi yang akan diperiksa.

Kalau jawabannya benar, maka iya. Sebaliknya akan tidak.

Lebih jelasnya, mari kita coba contohnya.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Operator Ternary</title>
</head>

<body>

    <script>
        var pertanyaan = confirm("Apakah kamu berumur di atas 18 tahun?")

        var hasil = pertanyaan ? "Selamat datang" : "Kamu tidak boleh di sini";
        document.write(hasil);
    </script>
</body>

</html>

Hasilnya:

Apa Selanjutnya?

Itulah 6 macam operator yang harus dipahami dalam pemrograman Javascript.

Contoh-contoh di atas, tentu masih belum cukup.

Karena itu, silakan dicoba-coba sendiri melakukan beberapa operasi melalui console maupun membuat program Javascript.

Silakan coba melakukan operasi untuk tipe data float, boolean, objek, array, dan tipe data lainnya.

Setelah merasa bosan dan paham…

Silakan lanjutkan ke:

Selamat belajar…

Apa itu Operator?

1. Operator Aritmatika pada Javascript

Operator Penggabungan Teks

2. Operator Penugasan pada Javascript

3. Operator Perbandingan pada Javascript

4. Operator Logika pada Javascript

5. Operator Bitwise pada Javascript

6. Operator Ternary pada Javascript

Apa Selanjutnya?

Daftar isi tutorial