skip to Main Content
Tutorial Javascript Dasar #06 – 6 Operator JavaScript Yang Wajib Diketahui

Tutorial Javascript Dasar #06 – 6 Operator JavaScript yang Wajib Diketahui

6 Operator JavaScript yang Wajib Diketahui

Pada pembahasan sebelumnya yaitu “Tutorial Javascript Dasar #05” kita telah mempelajari tentang nilai truthy dan falsy di JavaScript. Selanjutnya pada artikel kali ini kita akan belajar mengenai jenis-jenis operator di JavaScript. 

Dalam JavaScript sendiri, ada beberapa operator yang bisa digunakan dalam membuat aplikasi tetapi kali ini kita hanya akan membahas operator-operator yang paling sering digunakan seperti operator aritmatika, logika, pembanding, ternary dan type of.

Apa itu Operator?

Sebelum membahas lebih detil mengenai operator yang disebutkan di atas, mari kita berkenalan dahulu dengan definisi operator. Operator adalah sebuah simbol yang dapat digunakan untuk melakukan operasi, baik itu untuk operasi hitungan maupun operasi logika. 

Berikut ini contoh bagaimana kita dapat menggunakan fungsi operator dalam JavaScript.

Misalnya kita mempunyai dua buah variabel, var x dan var y kemudian bagaimana cara kita bisa menjumlahkan kedua variabel tersebut? Berikut ini contohnya:

var x = 5; 
var y = 10;

Cara untuk menjumlahkan kedua variabel tersebut adalah dengan menggunakan operator tambah (+) atau tanda tambah (+) sebagai berikut:

console.log(x+y);

Untuk hasil dari penjumlahan dari operator yang kita buat adalah

Bagaimana apakah kalian mulai tertarik untuk mencoba operator-operator JavaScript yang lainnya? Selanjutnya mari kita mulai belajar menggunakan operator JavaScript seperti operator aritmatika, logika, pembanding, ternary dan type of.

1. Operator Aritmatika

Operator aritmatika ini biasanya digunakan untuk melakukan operasi matematika seperti penjumlahan, pengurangan, pembagian, perkalian, modulus (sisa bagi) dan lainnya. Berikut ini tabel dari operator JavaScript:

OperatorDeskripsi

+

Penjumlahan

-

Pengurangan

*

Perkalian

/

Pembagian

%

Modulus (Sisa Bagi)

**

Eksponensial (Pemangkatan)

++

Increment

--

Decrement

Berikut ini contoh penggunaannya:

// operator penjumlahan
let penjumlahan = 2 + 8;
console.log(penjumlahan); // 10
 
// operator pengurangan
let pengurangan = 8 - 3;
console.log(pengurangan); // 5
 
// operator perkalian
let perkalian = 2 * 5;
console.log(perkalian); // 10
 
// operator pembagian
let pembagian = 5 / 2;
console.log(pembagian); // 10
 
// operator modulus
let modulus = 20 % 3;
console.log(modulus); // 2 - karena 20 dibagi 3 sisanya 2
// operator eksponensial
let eksponensial = 5 ** 3; // 5 pangkat 3
console.log(eksponensial); // 125
 
// operator increment
let increment = 5;
increment++; // 5 + 1
console.log(increment); // 6
 
// operator decrement
let decrement = 5;
decrement--; // 5 - 1
console.log(decrement); // 4

Khusus untuk simbol plus (+) kita juga bisa menggunakannya untuk tipe data string yaitu penggabungan bukan saja untuk penjumlahan. Berikut ini contohnya:

let a = "2";
let b = "11";
console.log(a+b);// 211 - karena keduanya adalah string
let c = 2
let d = "2"
console.log(c+b);// 22 - karena d adalah string maka menghasilkan string

Dari contoh di atas dapat kita lihat a+b bukan 13 melainkan 211 karena tipe data keduanya adalah string. Selain itu, jika number + string maka akan menghasilkan string juga seperti contoh c+d di atas.

2. Operator Penugasan

Operator penugasan (assignment) adalah operator yang digunakan untuk memberikan tugas kepada variabel. Salah satu operator penugasan di JavaScript yang paling sering digunakan adalah operator sama dengan (=), dimana operator ini biasanya digunakan untuk memasukkan nilai ke dalam variabel. Operator penugasan ini dapat digabungkan dengan operator lain seperti pada tabel dibawah ini:

OperatorContohSama seperti

=

x = yx = y

+=

x += yx = x + y

-=

x -= yx = x - y

*=

x *= yx = x * y

/=

x /= yx = x / y

%=

x %= yx = x % y

**=

x **= yx = x ** y

Berikut ini contoh penggunaannya:

// =
let a = 2;
a = 4; // a = 4
console.log(a); // 4
 
// +=
let b = 6;
b += 4; // b = 6 + 4
console.log(b); // 10
 
// -=
let c = 5;
c -= 2; // c = 5 - 2
console.log(c); // 3
 
// *=
let d = 5;
d *= 2; // d = 5 * 2
console.log(d); // 10
 
// /=
let e = 5;
e /= 2; // e = 5 / 2
console.log(e); // 2.5
 
// %=
let f = 5;
f %= 2; // f = 5 % 2
console.log(f); // 1
 
// **=
let g = 5;
g **= 2; // g = 5 ** 2
console.log(g); // 25

Khusus untuk simbol plus sama dengan  (+=), kita bisa gunakan untuk tipe data string, maka yang terjadi bukanlah pertambahan melainkan penggabungan. Berikut ini contohnya:

let hello = 'hello';
hello += ' world'; // hello = 'hello' + ' world'
console.log(hello); // hello world

3. Operator Perbandingan

Operator perbandingan adalah tanda atau simbol untuk memberitahu interpreter bahwa kita ingin melakukan perbandingan, sebagai contoh dari operator ini adalah simbol lebih besar dari (>). Dimana operator ini memberitahu interpreter bahwa kita ingin melakukan perbandingan apakah suatu nilai lebih besar dari nilai lain. Hasil dari operator perbandingan ini selalu mengembalikan nilai bertipe Boolean (true atau false). Berikut ini contoh penggunaan operator perbandingan ini:

Sintaks:

(Nilai yang dibandingkan 1) > (Nilai yang dibandingkan 2);

Contoh penerapan sintaks:

10 > 2; //true

Cara membaca contoh di atas adalah “Apakah 10 lebih besar dari 2” dan jawabannya adalah “True” yang artinya benar bahwa 10 lebih besar dari 2. 

Berikut ini daftar operator-operator perbandingan yang tersedia di JavaScript:

OperatorDeskripsi

==

Nilai Sama dengan

===

Nilai dan tipe data sama dengan

!=

Tidak sama dengan

!==

Nilai dan tipe data tidak sama dengan

>

Lebih besar dari

<

Lebih kecil dari

>=

Lebih besar dari atau sama dengan

<=

Lebih kecil dari atau sama dengan

Berikut ini contoh penerapannya:

console.log(2 == '2'); // true
console.log(2 == 2); // true
console.log('hai' == 'hai'); // true
//Operator == (nilai sama dengan) atau juga dikenal operator kesetaraan
//membandingkan nilai apakah sama atau tidak, tidak peduli tipe data.
//kode diatas, kita membandingkan string '2' dan angka 2
//hasilnya dianggap sama jika menggunakan operator ==.
//------------------------------------------------------------------------//
console.log(2 === '2'); // false
console.log(2 === 2); // true
console.log('hi' === 'hi'); // true
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
console.log(arr1 === arr2); // false
const arr3 = arr1;
console.log(arr3 === arr1); // true
//strict equality operator (===)
//tidak hanya membandingkan nilai, namun juga tipe datanya.
//Khusus untuk tipe data non-primitif seperti array dan objek,
//hanya menghasilkan nilai true jika merujuk ke objek atau array yang sama.
//------------------------------------------------------------------------//
console.log(2 != '2'); // false
console.log(2 != 2); // false
console.log('hi' != 'hi'); // false
console.log('hello' != 'hi'); // true
//Operator tidak sama dengan (!=)
//membandingkan apakah suatu nilai tidak sama dengan nilai lain
//tidak peduli dengan tipe datanya.
//------------------------------------------------------------------------//
console.log(2 !== '2'); // true
console.log(2 !== 2); // false
console.log('hi' !== 'hi'); // false
console.log('hello' !== 'hi'); // true
const arr4 = [1, 2, 3];
const arr5 = [1, 2, 3];
console.log(arr4 !== arr5); // true
const arr6 = arr4;
console.log(arr6 !== arr4); // false
//operator !== membandingkan tipe datanya, tidak hanya nilai.
//khusus untuk tipe data non-primitif seperti array dan objek,
//hanya menghasilkan nilai false jika merujuk ke objek atau array yang sama.
//------------------------------------------------------------------------//
console.log(2 > 3); // true
console.log(3 > 2); // false
console.log(3 > 3); // false
//Operator lebih besar dari (>)
//membandingkan apakah nilai di sebelah kiri lebih besar dari di sebelah kanan.
//------------------------------------------------------------------------//
console.log(2 < 3); // true
console.log(3 < 2); // false
console.log(3 < 3); // false
//operator <
//membandingkan apakah nilai di sebelah kiri lebih kecil dari nilai di sebelah kanan.
//------------------------------------------------------------------------//
console.log(2 >= 3); // false
console.log(3 >= 2); // true
console.log(3 >= 3); // true
//Operator ini (>=)
//membandingkan apakah nilai di sebelah kiri lebih besar atau sama dengan nilai di sebelah kanan.
//------------------------------------------------------------------------//
console.log(2 <= 3); // true
console.log(3 <= 2); // false
console.log(3 <= 3); // true
//operator ini (<=)
//membandingkan apakah nilai di sebelah kiri lebih kecil atau sama dengan nilai di sebelah kanan.

4. Operator Logika

Operator logika merupakan salah satu operator JavaScript yang paling sering digunakan. Biasanya operator logika ini digunakan dalam conditional statement atau pernyataan bersyarat seperti if. Tapi kita juga bisa menjadikan operasi ini sebagai ekspresi truthy dan falsy yang pembahasan lengkapnya bisa kalian baca pada artikel sebelumnya “nilai truthy dan falsy“.

Sebagai tambahan tidak seperti operator perbandingan yang selalu mengembalikan nilai boolean, operator logika ini dapat mengembalikan nilai selain boolean. Berikut ini daftar operator logika yang tersedia di JavaScript: 

OperatorDeskripsi

&&

And (dan)

||

Or (atau)

!

Not (tidak)

4.1 Operator && (And)

Operator && (And) hanya menghasilkan nilai false jika salah satu operan bernilai false.

Expresi pada operator && dievaluasi dari kiri ke kanan sehingga memungkinkan evaluasi short-circuit.

Jika ekspresi di kiri bernilai false, maka ekspresi di kanan tidak akan dievaluasi. Sedangkan jika ekspresi di kiri bernilai true, maka ekspresi di kanan akan dievaluasi.

Berikut ini contoh penerapannya :

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

Terus bagaimana jika ekspresi yang kita buat tidak menghasilkan nilai boolean? Solusinya adalah kita perlu mengubah expresi tersebut menjadi boolean, ini sudah kita pelajari pada materi sebelumnya yaitu pada artikel “truthy dan falsy

Berikut ini contoh penulisan ekspresi kiri bernilai false:

console.log('' && 'hello world'); // ''

Karena ekspresi kiri ini bernilai false, maka JavaScript akan melakukan beberapa hal berikut ini:

  1. Melakukan konversi string kosong ke boolean dan hasilnya false.
  2. Karena hasilnya false, maka JavaScript akan langsung mengembalikan tanpa mengevaluasi ekspresi di kanan.

Sekarang, kita lihat penulisan ekspresi kiri bernilai true:

console.log('xsis' && 'academy'); // 'xsis'

Karena ekspresi kiri bernilai true maka ini yang dilakukan JavaScript:

  1. Melakukan konversi string ‘xsis’ ke boolean dan hasilnya true.
  2. Karena hasilnya true, evaluasi dan kembalikan ekspresi di sebelah kanan.

Berikut ini catatan yang perlu kita ingat terkait konsep penulisan ekspresi operator kali ini yaitu: 

Jika ekspresi disebelah kiri bernilai true, yang dikembalikan adalah nilai di sebelah kanan.

Jika kiri false, maka nilai kiri yang dikembalikan.

4.2 Operator || (Or)

Operator || (Or) hanya menghasilkan nilai false jika kedua operand bernilai false.

Sama seperti AND, expresi pada operator || dievaluasi dari kiri ke kanan sehingga memungkinkan evaluasi short-circuit.

Dan berikut ini catatan yang perlu kita ingat terkait konsep penulisan ekspresi operator kali ini yaitu:

Jika ekspresi di kiri bernilai false, maka evaluasi ekspresi di kanan.

Jika ekspresi di kiri bernilai true, maka ekspresi di kanan tidak akan dievaluasi.

Berikut ini untuk contoh penerapannya:

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

Lantas bagaimana jika ekspresi yang telah kita buat tidak menghasilkan nilai boolean? Maka solusinya adalah ekspresi tersebut harus kita ubah menjadi boolean yang dimana penjelasan lengkapnya sudah pernah dibahas pada artikel sebelumnya “truthy dan falsy“.

Berikut ini contoh penulisan ekspresi kiri bernilai false:

console.log('' || 'hello world'); // 'hello world'

Karena ekspresi kiri bernilai false maka ini yang dilakukan JavaScript:

  1. Melakukan konversi string kosong ke boolean, hasilnya false.
  2. Karena hasilnya false, evaluasi dan kembalikan ekspresi di sebelah kanan.

Sekarang, kita lihat contoh penulisan ekspresi kiri bernilai true:

console.log('xsis' || 'academy'); // 'xsis'

Karena ekspresi kiri bernilai true maka ini yang dilakukan JavaScript:

  1. Melakukan konversi string ‘xsis’ ke boolean, hasilnya true.
  2. Karena kiri bernilai true, JavaScript akan langsung mengembalikan ‘xsis’ tanpa mengevaluasi ekspresi di kanan.

Berikut ini catatan yang perlu kita ingat terkait konsep penulisan ekspresi operator kali ini yaitu: 

Jika ekspresi disebelah kiri bernilai true, yang dikembalikan adalah nilai di sebelah kanan.

Jika kiri false, maka nilai kiri yang dikembalikan.

4.3 Prioritas Operator OR (||) dan AND (&&)

Dalam kondisi tertentu terkadang kita perlu menulis atau menggabungkan operator AND dengan OR dalam satu statement. Jika ini dilakukan operator && akan dieksekusi terlebih dahulu sebelum ||. Tapi kita bisa memilih ekspresi mana yang ingin di eksekusi dengan cara membungkus ekspresi menggunakan kurung lengkung (( … )).

4.4 Operator ! (NOT)

Sementara Operator ! (Not) atau negasi mengubah nilai truthy menjadi falsy atau sebaliknya. Berikut ini contoh penggunaannya: 

console.log(!true); // false
console.log(!false); // true
console.log(!''); // true
console.log(!1); // false
console.log(!(true && true)); // false

5. Operator Ternary

Operator ternary biasanya digunakan untuk mempersingkat conditional statement (if/else). Berikut ini contoh sintaks-nya:

kondisi ? 'jikaBenar' : 'jikaSalah;'.

Operator ini bisa kita gunakan untuk menuliskan sebuah kondisi yang berupa logika atau perbandingan yang nanti hasilnya akan berupa nilai Boolean atau kita juga bisa menggunakan variabel yang berisi nilai Boolean. Sama seperti operator sebelumnya, jika nilainya bukan Boolean akan harus kita ubah menjadi Boolean.

Ada beberapa hal yang perlu kita ingat saat menggunakan operator ini yaitu:

Nilai yang disimpan di jikaBenar akan digunakan jika kondisi bernilai true, tapi jika false akan menggunakan nilai di jikaSalah.

Berikut ini contoh penggunaan:

//contoh kondisi menggunakan boolean
const apakahBenar = false;
const hasil = apakahBenar ? 'Wow! Dia sudah benar.' : 'Ops! Dia ternyata salah.';
console.log(hasil); // Ops! Dia ternyata salah.
 
//contoh kondisi menggunakan pembanding
const banding = 7>3 ? '7 lebih besar dari 3' : '7 lebih kecil dari 3';
console.log(banding); //7 lebih besar dari 3
 
//kondisi yang dipaksakan menjadi boolean
const nilai = null;
const cekNilai = nilai ? 'Nilainya adalah '+nilai : 'Nilainya belum ada nih!';
console.log(cekNilai); // Nilainya belum ada nih!

6. Operator Typeof

Terakhir operator typeof yang dapat kita gunakan untuk mengecek tipe data atau jenis objek suatu nilai. Berikut ini contoh penggunaannya:

console.log(typeof ''); // string
console.log(typeof 1); // number
console.log(typeof 2n); // bigint
console.log(typeof null); // object
console.log(typeof undefined); // undefined
console.log(typeof {}); // object
console.log(typeof []); // object

Demikian pembahasan kita kali ini tentang operator-operator dalam JavaScript, tapi jangan khawatir kita akan kembali melanjutkan pembahasan tentang JavaScript lainnya pada artikel selanjutnya. 

Jangan lupa untuk subscribe artikel kami dengan memasukan email kalian pada kolom di samping, agar kalian tidak tertinggal artikel terbaru dari kami.

Dan untuk kalian yang berminat belajar lebih lanjut tentang pemrograman javascript dan bahasa pemrograman lainnya, silahkan kunjungi social media Xsis Academy untuk info lebih lanjut mengenai Bootcamp Xsis Academy.

Selain itu, temukan juga video tutorial ngoding dari Tim Trainer Xsis Academy pada channel ETG berikut ini Youtube Equine Technologies Group

Penulis : Aulia Brahmantio Diaz – Webmaster Xsis Mitra Utama

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top