BREAKING NEWS

Tutorial Javascript #6 : Operator yang Wajib diketahui dalam JavaScript

JavaScript, Tutorial Javascript, Website |13 October 2022 |by Agus Suratna |0

Setelah 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.

Misalkan kita punya dua variabel seperti ini :

var a = 3;
var b = 4;

Kita akan menjumlahkan variabel a dan b, caranya dengan menggunakan tanda plus (+).

var c = a + b;

Hasil penjumlahannya akan disimpan di dalam variabel c. Tanda plus (+) adalah sebuah operator.

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

Operator dalam pemrograman terbagi dalam 6 jenis:

  1. Operator aritmatika;
  2. Operator Penugasan (Assignment);
  3. Opeartor relasi atau perbandingan;
  4. Operator Logika;
  5. Operator Bitwise;
  6. Operator Ternary;

Operator wajib ada di setiap bahasa pemrograman, 6 jenis operator di atas harus kita pahami.

 

1. Operator Aritmatika pada JavaScript

Operator aritmatika merupakan operator untuk melakukan operasi aritmatika seperti penjumlahan, pengurangan, pembagian, perkalian, sisa bagi dan sebagainya.

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 /.

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 pertikan operator modulo (%) dan operator penjumlahan (+). Operator modulo adalah operator untuk menghitung sisa bagi. Misal 17 dibagi 3, maka sisanya adalah 2.

17 % 3 = 2

 

Operator Penggabungan Teks

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 :

102

Hasilnya bukan 12, karena kedua angka tersebut merupakan string, perhatikan kedua angka tersebut diapit dengan tanda petik dua yang berarti bukan bilangan tetapi string.

Baca Juga  Tutorial Laravel 11 : #16 Relasi Database dengan Eloquent

 

2. Operator Penugasan (assignment) pada JavaScript

Operator penugasan adalah operator yang digunakan untuk memberikan tugas kepada variabel. Biasanya digunakan untuk mengisi nilai pada variabel (assignment/inisialisasi).

Contoh :

var a = 19;

Variabel a kita berikan tugas untuk menyimpan nilai 19.

Operator penugasan terdiri dari:

Nama Operator Simbol
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, 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.

Perbedaan operator aritmatika dengan operator penugasan ialah, pada operator aritmatika hanya melakukan operasi aritmatika saja, sedangkan operator penugasan 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:

 

 

 

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 samadengan
            var hasil = aku >= kamu;
            document.write(`${aku} >= ${kamu} = ${hasil}<br/>`);

            // lebih kecil
            var hasil = aku < kamu;
            document.write(`${aku} < ${kamu} = ${hasil}<br/>`);

            // lebih kecil samadengan
            var hasil = aku <= kamu;
            document.write(`${aku} <= ${kamu} = ${hasil}<br/>`);

            // tidak samadengan
            var hasil = aku != kamu;
            document.write(`${aku} != ${kamu} = ${hasil}<br/>`);
        </script>
    </body>
</html>

Hasilnya :

Baca Juga  Tutorial Laravel 10 dan Reactjs #1 : Cara Install dan Menjalankan React dengan Vite

Perbedaan simbol == (dua simbol sama dengan) dengan === (tiga simbol samadengan) ialah 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 merupkan operator yang digunakan untuk operasi berdasarkan bit (biner).

Operator ini terdiri dari :

Nama Simbol di JavaScript
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

Opearsi NOT (Negasi/kebalikan)

a   = 00111100
~a  = 11000011

Konsepnya memang hampir sama dengan opeartor Logika. Bedanya, bitwise digunakan untuk biner. Berikut 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 :

Baca Juga  Format Mata Uang dengan Directive Custom pada Laravel Blade

 

 

 

6. Operator Ternary pada Javascript

Operator Ternary atau bisa disebut sebagai “Conditional Ternary Operator” merupakan salah satu dari tiga sifat Operator, operator yang akan melibatkan 3 buah operand dalam satu operasi. Operator ternary berfungsi untuk mengevaluasi ekspresi dan menentukan hasil berdasarkan kondisi, jika kondisi tersebut 1 ( true ) maka akan memilih pilihan ke satu, jika 0 ( false ) maka akan memilih pilihan ke dua. Opertor ternary pada Javascript, biasanya digunakan untuk membuat sebuah percabangan if/else.

Bentuk Penulisan :

Ekspresi ? nilaiJikaTrue : nilaiJikaFalse;

Di atas melibatkan 3 operand yaitu sebagai ekspresi, nilaiSatu dan nilaiDua. Diletakan tanda ‘?’ di antara ekspresi dan pilihan nilai dan tanda ‘:’ di antara dua pilihan true atau false.

    • Eksepresi : merupakan tempat dimana kita dapat menuliskan sebuah ekspresi sebagai kondisi yang akan dievaluasi.operasi ini akan memecahkan masalah berdasarkan kondisi ekspresi dengan memilih dua pilihan “nilaiSatu” dan “nilaiDua” sebagai hasil operasi.
    • nilaiJikaTrue : merupakan tempat untuk menempatkan nilai yang akan dipilih sebagai hasil akhir dari operasi ternary, tempat ini bersifat 1 (true). Dengan arti jika hasil operasi mempunyai kondisi 1 (true) maka otomatis operasi akan menghasilkan nilai yang ada pada pilihan ke satu (nilaiJikaTrue).
    • nilaiJikaFalse : merupakan tempat untuk menempatkan nilai yang akan dipilih sebagai hasil akhir dari operasi ternary, tempat ini bersifat 0 (false). Dengan arti jika hasil operasi mempunyai kondisi 0 (false) maka otomatis operasi akan menghasilkan nilai yang ada pada pilihan ke dua (nilaiJikaFalse).

Contoh :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Operator Ternary</title>
    </head>

    <body>
        <script>
            var pertanyaan = confirm("Apakah anda berumur diatas 18 tahun?")
            var hasil = pertanyaan ? "Selamat datang" : "Kamu tidak boleh di sini";
            document.write(hasil);
        </script>
    </body>
</html>

Hasilnya :

 

Demikian tutorial tentang 6 macam operator yang harus dipahami dalam pemrograman Javascript. Semoga bermanfaat.

Related Post

Be the first to comment

Leave a Reply

Your email address will not be published.


*


error: Ga bisa dicopy