Modul Tutorial Bahasa Pemrograman JavaScript Lengkap Untuk Pemula

Assalamu‘alaikum wr. wb.

Hello guys, Kembali lagi bersama Teknoblog Inzaghi's Blog! JavaScript merupakan Bahasa Pemrograman terpenting dalam membuat sebuah Website agar lebih Interaktif. Berbeda dengan PHP, JavaScript masih termasuk Bahasa Pemrograman Frontend (Kecuali NodeJS). JavaScript juga sangat erat dengan HTML dan CSS untuk Pengembangan Web.

Sumber Artikel Utama : Duniailkom.com dan Codewithharry.com

PENGERTIAN BAHASA PEMROGRAMAN JAVASCRIPT

Sumber : AWS.Amazon.com, Dicoding.com (Blog), dan Duniailkom.com

A. Pengertian Bahasa JavaScript

JavaScript adalah bahasa pemrograman yang digunakan oleh pengembang untuk menciptakan situs web yang lebih interaktif. Dari memperbarui aliran media sosial hingga menampilkan animasi atau peta yang dapat diinteraksikan, peran JavaScript adalah untuk meningkatkan pengalaman pengguna ketika mengunjungi sebuah situs web.

Bahasa pemrograman ini berfungsi sebagai skrip yang dijalankan di sisi klien, dan merupakan salah satu teknologi pokok yang mendukung World Wide Web. Sebagai contoh, ketika Anda menjelajahi internet dan melihat elemen seperti carousel gambar, menu tarik-turun yang merespons klik Anda, atau perubahan warna yang terjadi secara dinamis di halaman web, hal ini semua berkat penggunaan JavaScript.

Sebagai contoh, apa yang terjadi ketika sebuah tombol di klik? Bagaimana membuat gambar muncul bergantian secara otomatis (slider), atau bagaimana cara mengubah warna kotak dari merah ke biru setelah tampil selama 1 menit? Inilah yang bisa kita lakukan dengan JavaScript.

JavaScript menambahkan aspek “interaktif” ke dalam HTML dan CSS. Misal, jika sebuah tag <h1> di klik, tampilkan isi seluruh artikel yang terdiri dari 10 tag <p>, atau jika sebuah gambar di klik, tukar class CSS-nya dari .normal menjadi .warning.

JavaScript disebut sebagai bahasa pemrograman tingkat tinggi atau high-level programming language karena kodenya sudah mirip dengan bahasa inggris sehari-hari.

Dalam bahasa pemrograman tingkat tinggi, kita tidak lagi dipusingkan dengan pengaturan dasar seperti alokasi memory, register, garbage collection, dan hal teknis lain yang umumnya ada di dalam bahasa pemrograman tingkat rendah seperti bahasa assembly. Hampir semua bahasa pemrograman modern sudah termasuk high level programming language seperti PHP, Pascal, C++, Python dan Java.

JavaScript memiliki fitur dinamis, tidak bertipe dan diproses secara interpreted. JavaScript mirip bahasa PHP dimana kita tidak perlu menetapkan sebuah variabel harus bertipe integer, float, maupun string. Setiap variabel di dalam JavaScript bisa diisi dengan tipe data apa saja dan kapan saja sepanjang kode program (bersifat dinamis).

Ini berbeda dengan bahasa pemrograman seperti Pascal, C++ maupun Java yang setiap variabelnya hanya bisa diisi tipe data yang sudah ditetapkan, ini dikenal sebagai typed programming language. Dalam bahasa pemrograman jenis ini, jika sebuah variabel sudah ditetapkan bertipe integer (angka bulat), maka sepanjang kode program tidak bisa diisi dengan tipe data string (teks) maupun float (angka desimal).

JavaScript menggunakan standar spesifikasi ECMAScript. Maksudnya, yang membuat dan mengembangkan JavaScript adalah ECMA. ECMA merupakan singkatan dari European Computer Manufacturers Association, sebuah lembaga standarisasi Eropa khusus komputer. Jika ingin disamakan, ini mirip seperti SNI kalau di Indonesia (Standar Nasional Indonesia).

Bersama-sama dengan HTML dan CSS, JavaScript menjadi teknologi inti dari pembuatan konten halaman web (World Wide Web). Ketiga teknologi ini memiliki peran masing-masing. HTML dipakai untuk membuat struktur dan isi dari halaman web (content). CSS untuk mempercantik tampilan website (design). Dan JavaScript berfungsi menangani interaksi (behavior). Sebutan kerennya: “HTML for content, CSS for presentation and JavaScript for behavior“.

Jika pengertian dari Wikipedia ini terasa membingungkan, jangan khawatir. Anda cukup pahami bahwa JavaScript adalah bahasa pemrograman web yang dipakai untuk memprogram HTML. Dengan JavaScript, kita bisa membuat halaman web menjadi lebih interaktif.

B. Sejarah Perkembangan JavaScript

Sumber : Duniailkom.com

Sejarah JavaScript dimulai sekitar Tahun 1994, ketika Internet dan Website sedang mengalami perkembangan yang pesat. Website pada saat itu umumnya dibuat menggunakan Bahasa Pemograman PERL yang pemrosesan hanya bisa dilakukan di sisi web server.

Kelemahan pemrosesan di sisi web server adalah, setiap instruksi dari user harus dikirim terlebih dahulu kepada web server, baru kemudian ditampilkan lagi di dalam web browser. Karena kecepatan koneksi internet yang terbatas, hal ini dipandang tidak efisien. Programmer web butuh Bahasa Pemrograman client-side yang bisa berjalan di web browser tanpa harus dikirim ke server.

Pada Tahun 1995, Brendan Eich seorang programmer dari Netscape mulai mengembangkan sebuah Bahasa Pemrograman Script yang dinamakan Mocha. Netscape pada saat itu merupakan perusahaan Software ternama yang memiliki Web Browser Netscape Navigator.

Pesaing JavaScript : Kemunculan JScript dari Microsoft

Karena kesuksesan JavaScript 1.0, Netscape selanjutnya mengembangkan JavaScript versi 1.1 pada Netscape Navigator 3, dan mengantarkan Netscape Navigator menjadi pemimpin pasar web browser saat itu.

Selang beberapa bulan kemudian, Microsoft yang melihat kepopuleran JavaScript, memperkenalkan web browser Internet Explorer 3 dengan JScript. JScript adalah penamaan lain dari JavaScript. Hal ini dilakukan Microsoft karena JavaScript merupakan merk dagang yang dimiliki oleh Sun dan Netscape. Sehingga Microsoft terpaksa mencari nama lain untuk versi JavaScript mereka.

Selain memiliki fitur yang mirip, JScript juga menambahkan beberapa fitur tersendiri, sehingga JavaScript dan JScript tidak sepenuhnya kompatibel.

Web Browser Internet Explorer 3 yang dirilis oleh Microsoft pada Tahun 1996 ini adalah awal dari kemunduran Netscape Navigator, karena Microsoft merilis Internet Explorer 3 secara gratis dan sebagai software bawaan dari Sistem Operasi Windows. Akan tetapi, keputusan Microsoft menambahkan fitur JScript merupakan langkah besar dalam perkembangan JavaScript.

A

Perubahan Menjadi Nama Standar: ECMAScript

Implementasi JScript di dalam Internet Explorer membuat kalangan programmer bingung, karena terdapat 2 versi JavaScript: JavaScript di Netscape Navigator and JScript pada Internet Explorer. Versi JavaScript juga memiliki 2 versi, yakni versi 1.0 dan 1.1. Hal ini semakin menambah kerumitan dalam pembuatan program. Permasalahan terjadi karena ketiga versi JavaScript tersebut memiliki perbedaan fitur.

Kejadian ini sama seperti yang dialami oleh HTML dan CSS, dan kalangan programmer sepakat bahwa diperlukan sebuah  standarisasi untuk JavaScript.

Pada pertengahan tahun 1997, JavaScript 1.1 diajukan ke badan standarisasi Eropa: European Computer Manufacturers Association (ECMA) untuk membuat sebuah standar bahasa pemograman script web browser. Atas dasar ini, dibentuklah sebuah komite dengan anggota yang terdiri dari programmer dari berbagai perusahaan internet pada saat itu, seperti Netscape, Sun, Microsoft, Borland, NOMBAS serta beberapa perusahaan lain yang tertarik dengan perkembangan JavaScript.

Komite standarisasi ini menghasilkan bahasa pemograman yang disebut ECMAScript, atau secara formal disebut ECMAScript -262. 1 tahun berikutnya, badan standarisasi ISO (International Organization for Standardization) juga mengadopsi ECMAScript sebagai standar. Sejak saat itu, semua web browser menjadikan ECMAScript sebagai standar acuan untuk JavaScript.

ECMAScript terus dikembangkan hingga mencapai versi 3 pada tahun 1999. Berita baiknya, hampir semua web browser saat itu, terutama Microsoft Internet Explorer 5.5 dan Netscape 6 telah mendukung ECMAScript-262 versi 3. Namun berita buruknya, masing-masing web browser menerapkan standar dengan sedikit berbeda, sehingga masih terdapat kemungkinan tidak kompitablel.

ECMAScript atau JavaScript?

ECMAScript adalah versi standar dari JavaScript. Namun karena kepopuleran JavaScript, hampir semua kalangan dan programmer menyebut ECMAScript dengan istilah umum: JavaScript.

Merk dagang JavaScript saat ini dimiliki oleh perusahaan Oracle yang mengakuisisi Sun Microsystem tahun 2010. Namun kita juga akan mendengar versi JavaScript 1.5 atau JavaScript 1.8. Ini adalah versi yang diadopsi oleh Mozilla Firefox yang merupakan ‘reingkarnasi’ dari Netscape. JavaScript 1.5 sebenarnya adalah ECMAScript 3. Dan JavaScript 1.8 merupakan versi ECMAScript dengan beberapa penambahan internal oleh Mozilla.

Apa yang dimaksud dengan ECMAScript Engine (JavaScript Engine)?

Jika anda membaca perkembangan tentang JavaScript, maka selain versi ECMAScript, terdapat istilah JavaScript engine atau dalam bahasa standarnya: ECMAScript Engine.

JavaScript engine adalah mekanisme internal web browser yang dapat disamakan dengan compiler dalam bahasa pemograman lain. Fungsinya untuk menjalankan kode JavaScript.

Biasanya disetiap rilis baru web browser seperti Google Chrome, Microsoft Edge, maupun Mozilla Firefox, juga diikuti rilis terbaru JavaScript engine yang menawarkan kecepatan lebih baik.

V8 adalah nama JavaScript engine untuk Google Chrome, SpiderMonkey untuk Mozilla Firefox, dan Chakra untuk Internet Explorer. Daftar lengkapnya dapat dilihat ke Halaman Wikipedia.

Samakah JavaScript dengan JAVA?

Nama JavaScript memang sering membuat bingung programmer pemula. Ini karena terdapat bahasa pemrograman populer lain yang bernama JAVA. Tidak sedikit yang beranggapan bahwa JavaScript adalah versi “ringan” dari JAVA, atau JavaScript adalah bahasa pemrograman JAVA yang digunakan khusus membuat web.

JavaScript sepenuhnya berbeda dari JAVA. Penamaan yang mirip ini tidak lepas dari sejarah dan ide marketing oleh Netscape Communications, selaku perusahaan yang pertama kali mengembangkan JavaScript.

Sekitar tahun 1990an, Netscape (yang saat itu sedang bersaing dengan Microsoft) berusaha mendapatkan pangsa pasar web browser, yakni persaingan antara web browser Netscape Navigator dengan Internet Explorer. Era ini dikenal juga dengan era “browser war”.

Supaya lebih “menjual”, Netscape mengubah bahasa pemrograman yang dibuatnya dari “LiveScript” menjadi “JavaScript” dengan harapan bisa mengikuti kepopuleran bahasa pemrograman JAVA yang saat itu sedang booming di kalangan programmer.

Walaupun sepenuhnya berbeda, banyak syntax dan aturan penulisan JavaScript mirip dengan JAVA, ini karena keduanya sama-sama terinspirasi dari format penulisan bahasa C dan C++. Bahasa pemrograman PHP juga turunan dari C dan C++. Jika sebelumnya anda sudah pernah mempelajari PHP, aturan penulisan kode program di JavaScript akan terasa sangat mirip.

C. Fungsi JavaScript dalam Pemrograman Web

Pada awal dikembangkan, JavaScript berfungsi untuk membuat interaksi antara user dengan web menjadi lebih cepat. Sebelum ada JavaScript, setiap interaksi dari user harus diproses ke server.

Bayangkan ketika kita mengisi form registrasi untuk pendaftaran sebuah situs web, lalu men-klik tombol submit, menunggu sekitar 5 detik untuk website memproses form tersebut, dan mendapati ada kolom form salah.

Untuk keperluan seperti inilah JavaScript dikembangkan. Pemrosesan untuk memeriksa form bisa dipindahkan dari web server ke dalam web browser.

Dalam perkembangan selanjutnya, JavaScript tidak hanya bisa dipakai untuk validasi form, namun juga berbagai keperluan yang lebih modern. Berbagai animasi untuk mempercantik halaman web, fitur chatting, efek-efek modern, games, semuanya bisa dibuat menggunakan JavaScript.

Akan tetapi karena sifatnya yang dijalankan di sisi client yakni di dalam web browser yang digunakan oleh pengunjung, user sepenuhnya dapat mengontrol eksekusi JavaScript. Hampir semua web browser menyediakan fasilitas untuk mematikan JavaScript, atau bahkan mengubah kode JavaScript yang ada, sehingga kita tidak bisa bergantung sepenuhnya kepada JavaScript.

D. Cara Kerja Java Script

Semua Bahasa Pemrograman beroperasi dengan mengartikan Sintaksis yang mirip bahasa Inggris ke dalam kode mesin, yang nantinya dijalankan oleh Sistem Operasi. JavaScript secara luas dianggap sebagai bahasa skrip atau bahasa yang diinterpretasikan. Kode JavaScript diinterpretasikan, artinya langsung diterjemahkan ke dalam kode mesin oleh mesin JavaScript. Pada Bahasa Pemrograman lain, prosesnya mungkin melibatkan penyusunan seluruh kode menjadi kode mesin dalam langkah terpisah. Dengan demikian, semua bahasa skrip adalah Bahasa Pemrograman, tetapi tidak semua bahasa pemrograman dapat disebut sebagai Bahasa Skrip.

1. Mesin JavaScript

Mesin JavaScript adalah Program Komputer yang menjalankan kode JavaScript. Mesin JavaScript pertama hanya berupa Penerjemah (Interpreter), tetapi mesin modern menggunakan kompilasi saat ini atau waktu aktif untuk meningkatkan performa.

2. JavaScript Sisi Klien (Client-Side JavaScript)

JavaScript di sisi klien merujuk pada cara JavaScript beroperasi di peramban Anda. Dalam konteks ini, mesin JavaScript berada di dalam kode peramban. Semua peramban web utama dilengkapi dengan mesin JavaScript bawaan mereka sendiri.

Pengembang aplikasi web menulis kode JavaScript dengan fungsi-fungsi yang terkait dengan berbagai peristiwa, seperti klik mouse atau pergerakan kursor mouse. Fungsi-fungsi ini mengubah struktur HTML dan CSS.

Cara kerja JavaScript di sisi klien secara umum adalah sebagai berikut :

• Peramban memuat halaman web saat Anda mengaksesnya.
• Saat memuat, peramban mengonversi halaman dan semua elemennya menjadi struktur data yang disebut Model Objek Dokumen (DOM).
• Mesin JavaScript peramban mengubah kode JavaScript menjadi bytecode, yang berfungsi sebagai perantara antara Sintaks JavaScript dan mesin.
• Peristiwa tertentu, seperti klik mouse, memicu eksekusi blok kode JavaScript terkait. Mesin kemudian menafsirkan bytecode dan membuat perubahan pada DOM.
• Peramban menampilkan DOM yang diperbarui.

3. JavaScript Sisi Server (Server-Side JavaScript)

JavaScript di Sisi Server merujuk pada penggunaan bahasa ini dalam logika Server Back-end. Dalam hal ini, mesin JavaScript beroperasi langsung di Server. Fungsi JavaScript di sisi server dapat mengakses basis data, menjalankan operasi logis, dan menanggapi berbagai peristiwa yang dipicu oleh sistem operasi server. Keuntungan utama dari skrip di sisi server adalah kemampuannya untuk menyesuaikan respons situs web berdasarkan kebutuhan, hak akses, dan permintaan informasi dari Situs Web.

4. Client vs. Server

Istilah "dinamis" menggambarkan kedua sisi, yaitu sisi klien dan sisi server, dari penggunaan JavaScript. Perilaku dinamis mengacu pada kemampuan untuk memperbarui tampilan halaman web guna menghasilkan konten baru sesuai kebutuhan. Perbedaan antara JavaScript di sisi klien dan di sisi server terletak pada cara mereka menghasilkan konten baru. Kode di sisi server menghasilkan konten baru secara dinamis dengan menggunakan logika aplikasi dan memodifikasi data dari basis data. Di sisi lain, JavaScript di sisi klien menghasilkan konten baru secara dinamis di dalam peramban dengan menggunakan logika antarmuka pengguna dan memodifikasi konten halaman web yang sudah ada di sisi klien. Meskipun makna sedikit berbeda dalam dua konteks ini, keduanya terkait dan bekerja bersama untuk meningkatkan pengalaman pengguna.

Selain implementasi fitur dinamis, perbedaan lain antara penggunaan JavaScript di kedua sisi adalah pada sumber daya yang dapat diakses oleh kode. Di sisi klien, peramban mengendalikan lingkungan waktu aktif JavaScript, dan kode hanya dapat mengakses sumber daya yang diizinkan oleh peramban. Di sisi server, fungsi dapat mengakses semua sumber daya mesin server sesuai kebutuhan.

Itu adalah sebuah kebijakan di mana ketika terdapat beberapa permintaan untuk suatu sumber daya, kebijakan ini menentukan urutan prioritas antara permintaan-permintaan tersebut. Dengan kata lain, antrean yang mengacu pada antrean yang menentukan urutan prioritas saat memproses item-item atau permintaan-permintaan yang masuk.

Sistem antrean biasanya digunakan untuk mengelola sumber daya terbatas di sistem yang memiliki permintaan yang lebih banyak daripada yang dapat segera diproses. Dalam konteks komputasi, ini bisa berarti antrean permintaan CPU, antrean pesan dalam sistem pesan, atau antrean tugas yang akan dieksekusi.

Misalnya, dalam sistem antrean CPU, beberapa tugas atau proses mungkin berada dalam antrean untuk mendapatkan akses ke CPU. Sistem antrian menentukan urutan mana yang akan mendapatkan akses terlebih dahulu berdasarkan aturan prioritas yang telah ditetapkan.

Prinsip dasar dari sistem antrian adalah "First Come, First Served" (FCFS), yang berarti item yang pertama kali masuk ke dalam antrian akan dilayani atau diproses pertama kali. Namun, ada juga berbagai strategi antrian lainnya, seperti "Shortest Job Next" (SJN) di mana item dengan waktu proses yang paling singkat mendapatkan prioritas.

Sistem antrian umumnya digunakan untuk meningkatkan efisiensi dan keadilan dalam alokasi sumber daya terbatas dalam suatu sistem.

CARA MENGGUNAKAN/MENJALANKAN JAVASCRIPT

Sumber Artikel Materi : Blog.Enterprisedna.co, Sebhastian.com, dan Duniailkom.com

Mengetahui cara menjalankan file JavaScript adalah keterampilan dasar bagi setiap programmer yang bekerja dengan bahasa pemrograman populer ini.

Menguasai keterampilan ini akan memungkinkan Anda menguji dan melihat pratinjau kode secara efektif, yang pada akhirnya akan meningkatkan proses pengembangan secara keseluruhan.

Anda dapat menjalankan file JavaScript dengan merujuk ke dalam sebuah file HTML, lalu menggunakan peramban web untuk menjalankannya. Cara lain untuk menjalankan file JavaScript adalah dengan menggunakan Lingkungan Runtime Node JS untuk menjalankannya melalui baris perintah.

Sebagai alternatif, Anda juga dapat menjalankan kode JavaScript Anda dalam IDE populer seperti Visual Studio Code.

Baca terus dan kami akan menunjukkan panduan langkah demi langkah tentang bagaimana Anda dapat membuat file JavaScript di konsol pengembang node perintah JavaScript.

• Buka editor kode pilihan Anda.
• Buat file baru dan mulai mengetikkan kode Anda ke dalam editor.
• Berikut adalah potongan kode JavaScript sederhana yang menampilkan pesan di konsol: console.log("Helo World!").
• Setelah Anda menulis kode JavaScript Anda, saatnya untuk menyimpan file tersebut. Jika Anda menggunakan Visual Studio Code, cukup gunakan pintasan Ctrl+S.

• Jika Anda menggunakan editor teks biasa, pergilah ke menu "File" di toolbar editor Anda dan pilih "Save As". Pada kotak dialog yang muncul, pilih lokasi tempat Anda ingin menyimpan file Anda.
• Saat memberi nama file JavaScript Anda, penting untuk menggunakan ekstensi .js untuk menunjukkan bahwa itu adalah file JavaScript.
• Sebagai contoh, Anda dapat menamai file Anda script.js.
• Terakhir, klik "Save" untuk menyimpan file Anda.

Berikut ini adalah beberapa cara untuk menjalankan File JavaScript.

1. Menggunakan Web Browser

Anda dapat menggunakan peramban web modern untuk menguji dan menjalankan kode JavaScript Anda. Beberapa pilihan populer termasuk Google Chrome, Mozilla Firefox, dan Microsoft Edge.

Anda juga dapat menginstal ekstensi peramban seperti React Developer Tools atau Redux DevTools untuk meningkatkan pengalaman pengembangan Anda.

Untuk menjalankan file JavaScript menggunakan peramban web, Anda pertama kali perlu membuat file HTML yang akan memuat dan menjalankan skrip Anda.

Untuk membuatnya, ikuti langkah-langkah berikut :

• Buat file HTML, misalnya, index.html.
• Di dalam file HTML, tambahkan tag <script> yang menunjuk ke file JavaScript eksternal Anda.
• Sebagai contoh, jika file JavaScript Anda dinamai script.js, file HTML Anda harus terlihat seperti ini :

<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
</body>
</html>

• Pastikan file HTML dan file JavaScript Anda berada di direktori yang sama.
• Simpan file HTML Anda dan bukalah menggunakan peramban web pilihan Anda. Kode JavaScript di file script.js Anda seharusnya sekarang dijalankan.
• Anda dapat membuka konsol peramban dengan menekan tombol F12 untuk melihat keluaran skrip.

Setelah Anda membuka konsol, Anda akan melihat keluaran skrip. Untuk lebih memudahkan, Anda dapat menambahkan kode di bawah ini ke file JavaScript Anda :

alert("Hello, World!")

2. Menggunakan Node.js

Node.js adalah runtime JavaScript yang memungkinkan Anda menjalankan kode JavaScript di luar peramban pada baris perintah. Ini diperlukan untuk pengembangan sisi server dan penggunaan alat pengembangan populer seperti npm (Node Package Manager).

Menjalankan file JavaScript menggunakan Node.js adalah proses yang lebih sederhana. Pertama, pastikan Node.js terinstal di mesin Anda. Jika belum, Anda dapat mengunduh dan menginstal Node dari situs web resmi. Setelah Node.js terinstal, ikuti langkah-langkah ini :

• Buka terminal atau command prompt.
• Navigasi ke direktori tempat file JavaScript Anda berada.
• Ketik node [nama_file] dan tekan Enter.
• Gantilah [nama_file] dengan nama skrip JS Anda.
• Sebagai contoh, karena file kita bernama number-conversions.js, kita akan mengetik :

node number-conversions.js

Contoh :

node file-javascript-anda.js

Untuk Node.js, akan kami bahas secara terpisah.

3. Menggunakan Ekstensi VS Code

KONSEP DASAR BAHASA PEMROGRAMAN JAVASCRIPT

Sumber Artikel Materi : Petanikode.com dan Codelapan.com

A. Variabel dan Tipe Data

Dalam dunia programming, variabel dan tipe data merupakan suatu hal yang penting untuk dipelajari dan dipahami, tak terkecuali dalam JavaScript. Pada artikel ini, kita akan melanjutkan series belajar JavaScript untuk pemula. Jika pada artikel sebelumnya, kita sudah belajar apa itu JavaScript, Sejarah JavaScript, penggunaan perintah dasar JavaScript seperti menggunakan innerHTML, document.write(), window.alert(), menggunakan console.log(), dan lain-lain, maka pada artikel ini saya akan sharing tentang penggunaan variabel dan tipe data pada JavaScript.

1. Variabel JavaScript

Variabel merupakan container atau  wadah yang digunakan untuk menyimpan data atau nilai. Di JavaScript ada 3 cara untuk mendeklarasikan variabel, yaitu :

• Menggunakan var
• Menggunakan let
• Menggunakan const

Semua variabel yang digunakan di JavaScript harus mempunyai penamaan yang unique yang artinya tidak boleh sama dengan nama variabel yang lain. Nama-nama variabel yang unique ini disebut juga identifiers atau pengidentifikasi. Identifiers atau pengidentifikasi pada JavaScript dapat berupa nama pendek (seperti x dan y) atau nama yang lebih deskriptif (seperti age, name atau sum). Adapun aturan umum yang harus diikuti untuk membuat nama Variabel JavaScript, diantaranya :

• Nama variabel JavaScript dapat berisi huruf, angka, garis bawah dan Tanda Dollar ($).
• Nama variabel JavaScript bisa di awali dengan huruf.
• Nama variabel JavaScript juga bisa diawali dengan Tanda Dollar ($) dan garis bawah (_). Tapi penamaan variabel JavaScript seperti ini jarang sekali digunakan. Penggunaan Tanda Dollar pada Variabel lebih mirip dengan Bahasa PHP.
• Nama variabel JavaScript sangatlah sensitif terhadap huruf besar atau huruf kecil. Jika kita memakai penamaan variabel JavaScript seperti x dan X maka kedua variabel tersebut bisa dikatakan berbeda.

a. Var

Penggunaan var untuk mendeklarasikan variabel dalam JavaScript dapat dilihat pada contoh kode di bawah ini. Dalam contoh kode tersebut, kita mendeklarasikan var x = 2000, var y = 21, dan pada var z, kita menggunakan operasi aritmatika untuk menjumlahkan nilai var x dan var y. Selanjutnya, hasilnya ditampilkan menggunakan innerHTML di browser, khususnya pada elemen HTML <p> dengan id="demo".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript</title>
    <style>
        body {
            font-size: small;
        }
    </style>
</head>
<body>
    <h1>Variabel dan Tipe Data Javascript</h1>
    <p id="demo"></p>

    <script>
    var x = 2000;
    var y = 21;
    var z = x + y;
    document.getElementById("demo").innerHTML = + x + "+"  + y +"=" + z;
    </script>
</body>
</html>

b. Let

Penggunaan let diperkenalkan dalam JavaScript pada versi ES6 (2015). Perbedaan penggunaan let dengan var terletak pada sifatnya. Jika dengan var variabel dapat dideklarasikan berulang kali (contohnya: var x = "Bebek", x = "Ayam"; hasilnya x = Ayam), maka dengan let, kita tidak dapat mendeklarasikan variabel secara berulang. Variabel yang dideklarasikan menggunakan let harus dideklarasikan sebelum digunakan.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript</title>
</head>
<body>
    <h1>Variabel dan Tipe Data Javascript</h1>
    <p id="demo"></p>

    <script>
        let x = "John Doe";
        let x = 0;
        
        document.getElementById("demo").innerHTML = x ;
    </script>
</body>
</html>

Tidak mungkin membuat variabel yang sama atau mendeklarasikan ulang seperti contoh di atas. Jika tetap mencoba mendeklarasikan variabel ulang dengan let, hasilnya akan "Uncaught SyntaxError: Identifier 'x' has already been declared". Namun, jika menggunakan var, output dari kode tersebut akan menghasilkan x = 0.

Uncaught SyntaxError: Identifier 'x' has already been declared

Gambar di atas adalah contoh hasil output dari penulisan variabel berulang dengan let.

Sebelum ES6 (2015), JavaScript hanya memiliki global scope dan function scope. Pada versi ES6, diperkenalkan dua kata kunci baru yaitu let dan const. Kedua kata kunci ini menyediakan block scope dalam JavaScript, dan variabel yang dideklarasikan di dalam blok {} tidak dapat diakses dari luar blok {}.

Contoh :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript</title>
</head>
<body>
    <h1>Variabel dan Tipe Data Javascript</h1>
    <p id="demo"></p>

    <script>
        {
            let x = 2;
        }

        document.getElementById("demo").innerHTML = x ;
        // maka output di console akan "console.html:19 Uncaught ReferenceError: x is not defined";
    </script>
</body>
</html>

Pada contoh di atas, kita mencoba membuat variabel dengan let di dalam blok {}, lalu kita mencoba menampilkannya menggunakan innerHTML di luar blok. Hasilnya akan menghasilkan error pada konsol dengan pesan "Uncaught ReferenceError: x is not defined". Namun, jika kita letakkan "document.getElementById("demo").innerHTML = x ;" di dalam blok, hasilnya akan menjadi 2.

{
    var x = 2;
}
document.getElementById("demo").innerHTML = x ;

Berbeda dengan menggunakan var seperti pada contoh di atas. Dengan skrip seperti itu, output yang dihasilkan akan tetap menampilkan nilai 2, meskipun kita mencetak var x dengan innerHTML di luar blok {}.

<script>
    var  x = "Bebek";
    
    {  
    var x = "Ayam";
    }
    
    document.getElementById("demo").innerHTML = x;
</script>

Pendeklarasian variabel berulang dengan menggunakan var dan let menghasilkan hasil yang berbeda. Jika kita membuat pendeklarasian berulang menggunakan var seperti contoh di atas, hasilnya akan menjadi "Ayam". Ini karena dengan menggunakan var kita bebas menempatkan variabel baik di luar maupun di dalam blok. Namun, jika var pada contoh kode di atas diganti dengan let, hasilnya akan menjadi "Bebek". Hal ini karena yang ada di dalam blok hanya let = "ayam" (tidak ada perintah untuk mencetak hasil dari variabel yang ada di dalam blok tersebut). Jadi, poin pentingnya adalah "Mendeklarasikan ulang variabel dengan let di dalam blok tidak akan mendeklarasikan ulang variabel di luar blok".

c. Const

Const diperkenalkan oleh JavaScript secara publik dalam versi ES6 (2015). Beberapa poin penggunaan variabel dengan const antara lain :

• Variabel yang didefinisikan dengan const tidak dapat dideklarasikan ulang.
• Variabel yang didefinisikan dengan const tidak dapat ditugaskan kembali.
• Variabel yang didefinisikan dengan const memiliki block scope.

<script>
    const x = "Bebek";
    const x = "Ayam";
    
    document.getElementById("demo").innerHTML = x;
</script>

Seperti penggunaan variabel JavaScript dengan let, menggunakan const untuk mendeklarasikan variabel secara berulang juga tidak diizinkan. Contohnya, jika skrip di atas dijalankan, akan muncul pesan error di konsol seperti "Uncaught SyntaxError: Identifier 'x' has already been declared".

<script>
    const x = "Bebek";
    {
        const x = "Ayam";
    }
    
    document.getElementById("demo").innerHTML = x;
</script>

Const memungkinkan penggunaan nama variabel yang sama, namun dengan syarat tidak dalam satu blok yang sama (artinya, kedua nama variabel tersebut harus dipisahkan oleh blok). Contohnya seperti skrip di atas. Jika skrip JavaScript di atas dijalankan, output yang dihasilkan adalah "Bebek". Mengapa? Karena const yang bernilai "bebek" berada dalam satu blok yang sama dengan innerHTML yang kita gunakan untuk menampilkan nilai variabel x ke dalam HTML. Jika ingin menampilkan variabel yang bernilai "Ayam", maka perintah innerHTML juga harus ditempatkan dalam blok yang sama dengan const x = "Ayam".

Kapan kita menggunakan const di JavaScript? Selalu gunakan const ketika kita mendeklarasikan :

• Array baru
• Function baru
• Object baru
• RegExp baru

Contoh menggunakan const pada Array :

<script>
    // Membuat Array:
    const produk = ["sabun", "sampo", "handuk","pasta gigi"];
    
    // Mengubah data pada array dengan id 0:
    produk[0] = "sikat gigi";
    
    // menambahkan data:
    produk.push("sabun wajah");
    
    // memnampilkan data array:
    document.getElementById("demo").innerHTML = produk; 
</script>

Penggunaan const pada array dapat dilihat pada contoh skrip di atas. Dalam skrip tersebut, kita mendeklarasikan bahwa const produk terdiri dari sabun, sampo, handuk, dan pasta gigi. Kemudian kita ubah data pada array dengan id=0 menjadi sikat gigi, lalu kita tambahkan data produk sabun wajah pada array dengan push. Maka output yang dihasilkan dari skrip di atas akan menampilkan sikat gigi, sampo, handuk, pasta gigi, dan sabun wajah.

Contoh menggunakan const untuk Object :

<script>
    // membuat object:
    const hp = {merk:"Xiaomi", model:"Redmi 10", color:"white"};
    
    // mengubah property:
    hp.color = "black";
    
    // menambahkan property:
    hp.owner = "Jack Ma";
    
    // menampilkan property:
    document.getElementById("demo").innerHTML = hp.owner + " punya hp " + hp.merk + " model  " + hp.model + " dan berwarna " + hp.color; 
</script>

Skrip di atas adalah contoh penggunaan const pada objek. Dari skrip tersebut, akan dihasilkan output "Jack Ma punya hp Xiaomi model Redmi 10 dan berwarna black".

2. Tipe Data Javascript

Dalam programming, pemahaman mengenai tipe data adalah hal yang krusial, bukan hanya dalam konteks JavaScript, tetapi juga berlaku untuk beberapa bahasa pemrograman lainnya. Untuk menggunakan variabel dalam JavaScript, pemahaman tentang tipe data sangatlah penting. Variabel dalam JavaScript dapat menyimpan nilai numerik seperti 100, maupun nilai teks seperti "Hello World". Dalam terminologi pemrograman, nilai teks sering disebut sebagai string. JavaScript mampu mengelola berbagai jenis data, seperti number/integer, string, object, dan sebagainya. Untuk nilai string, penulisan harus berada di dalam tanda kutip ganda atau tunggal. Penting untuk dicatat bahwa jika suatu angka dimasukkan dalam tanda kutip, nilai tersebut akan dianggap sebagai string. Sementara itu, object harus ditulis dalam blok {}, contohnya let x = {firstName:"John", lastName:"Doe"};

a. String

let hewan = "Bebek";   // Menggunakan tanda kutip ganda
let tumbuhan = 'Jeruk Bali';   // Menggunakan tanda kutip tunggal

Tipe data string digunakan untuk merepresentasikan serangkaian teks, seperti contohnya "Makan Bebek Goreng Haji Slamet". Nilai dengan tipe data string dituliskan dengan menggunakan tanda kutip baik tunggal maupun ganda, sebagaimana terlihat pada contoh di atas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variabel dan Tipe Data Javascript</title>
</head>
<body>
    <h1>Belajar Javascript</h1>
    <p id="demo"></p>
    <script>
        let contoh1 = "You're the best";
        let contoh2 = "Kucingku bernama 'Jack'";
        let contoh3 = 'Kucingku bernama "Jack"';
        
        document.getElementById("demo").innerHTML =
        contoh1 + "<br>" + 
        contoh2 + "<br>" + 
        contoh3;
    </script>
</body>
</html>

Selain itu, ada kemungkinan variasi dalam penggunaan string, seperti menggunakan tanda kutip tunggal di dalam tanda kutip ganda atau sebaliknya, seperti yang diperlihatkan pada contoh script di atas.

Output yang akan dihasilkan dari contoh script sebelumnya bisa dilihat seperti pada Gambar di atas.

b. Number/Integer

Contoh :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variabel dan Tipe Data Javascript</title>
</head>
<body>
    <h1>Belajar Javascript</h1>
    <p id="demo"></p>
    <script>
        let berat1 = 4.50;
        let berat2 = 5;
        let berat3 = 3.75;
        
        document.getElementById("demo").innerHTML =
        berat1 + "<br>" + berat2 + "<br>" + berat3;
        </script>
</body>
</html>

Tipe data Number atau Integer dalam Javascript harus ditulis tanpa tanda kutip (baik tunggal maupun ganda); jika tertulis di dalam tanda kutip, data tersebut akan dianggap sebagai string meskipun sebenarnya merupakan angka. Contoh penggunaan tipe data Number atau integer dalam Javascript dapat dilihat pada script di atas. Penulisan tipe data Number atau integer dalam Javascript bisa dilakukan dengan atau tanpa desimal.

c. Boolean

Contoh :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variabel dan Tipe Data Javascript</title>
</head>
<body>
    <h1>Belajar Javascript</h1>
    <p id="demo"></p>
    <script>
        let x = "Ayam";
        let y = "Bebek";
        let z = "Ayam";
        
        document.getElementById("demo").innerHTML = (x == y) + "<br>" + (x == z);
    </script>
</body>
</html>

Tipe data boolean merepresentasikan data yang hanya memiliki dua nilai, yaitu true dan false. Tipe data boolean umumnya digunakan untuk kuesioner atau situasi di mana hanya ada dua opsi, ya atau tidak. Contoh penggunaan boolean dalam Javascript dapat dilihat seperti pada script di atas. Dalam contoh tersebut, variabel x memiliki nilai "Ayam", variabel y bernilai "Bebek", dan variabel z bernilai "Ayam". Kemudian, outputnya menunjukkan hasil x == y (artinya: apakah nilai variabel x sama dengan variabel y?) dan y == z (artinya: apakah nilai variabel x sama dengan nilai variabel z?). Output yang dihasilkan adalah true dan false.

d. Array

Contoh :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variabel dan Tipe Data Javascript</title>
</head>
<body>
    <h1>Belajar Javascript</h1>
    <p id="demo"></p>
    <script>
        const menu = ["Ayam Geprek","Ayam Bakar","Nasi Padang","Bebek Goreng"];
        
        document.getElementById("demo").innerHTML = menu[3];
    </script>
</body>
</html>

Tipe data array dalam Javascript ditulis di dalam tanda kurung siku, dan setiap item array dipisahkan oleh koma. Data dalam array selalu diindeks mulai dari [0]. Contoh penggunaan array dapat dilihat seperti pada script di atas. Seperti yang dibahas sebelumnya, untuk mendeklarasikan variabel array, kita menggunakan const. Pada contoh script di atas, variabel menu berisi nilai "Ayam Geprek", "Ayam Bakar", "Nasi Padang", dan "Bebek Goreng". Jika kita menampilkan data dengan indeks [3] dari variabel menu, output yang dihasilkan adalah "Bebek Goreng".

e. Object

Contoh :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variabel dan Tipe Data Javascript</title>
</head>
<body>
    <h1>Belajar Javascript</h1>
    <p id="demo"></p>
    <script>
        const profile = {
          firstName : "Ponidi",
          lastName  : "Karto Toying",
          age     : 70,
          profession  : "petani"
        };
        
        document.getElementById("demo").innerHTML =
        profile.firstName + " seorang " + profile.profession + " berumur " + profile.age + " tahun";
    </script>
</body>
</html>

Object dalam Javascript ditulis di dalam tanda kurung kurawal {}. Properti object dituliskan sebagai nama:nilai dan dipisahkan oleh koma. Contoh penggunaan object dalam Javascript dapat dilihat seperti pada script di atas. Contoh tersebut adalah object profil seseorang dengan empat properti: firstName, lastName, age, dan profession.

f. Undefinited

Contoh :

<script>
    let x;
   console.log(x);
</script>

Undefined adalah tipe data untuk variabel yang tidak memiliki nilai, yang berarti variabel tersebut telah dideklarasikan tetapi tidak memiliki nilai tertentu. Undefined dalam Javascript bisa dilihat pada contoh di atas. Jika script tersebut dijalankan, output yang akan ditampilkan pada console adalah "undefined".

g. Gabungan String dan Integer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript</title>
    <style>
        body {
            font-size: small;
        }
    </style>
</head>
<body>
    <h1>Variabel dan Tipe Data Javascript</h1>
    <p id="demo"></p>

    <script>
        var jumlah = 20;
        var hewan = "Bebek";
        
        document.getElementById("demo").innerHTML = jumlah + "<br>" + hewan;
    </script>
</body>
</html>

Contoh penggunaan tipe data integer dan string javascript dalam HTML bisa dilihat seperti pada potongan kode di atas. Pada variabel "jumlah", karena nilainya merupakan integer jadi penulisannya pun tidak dalam tanda kutip. Dan untuk variabel hewan, karena bertipe data string, maka penulisannya harus di dalam tanda kutip.

Sebenarnya kita juga bisa menyingkat penulisan variabel dengan satu statement banyak variabel seperti var jumlah = 20, hewan = "Bebek"; maka hasilnya akan sama saja dengan penulisan variabel seperti contoh di atas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variabel dan Tipe Data Javascript</title>
</head>
<body>
    <h1>Belajar Javascript</h1>
    <p id="demo"></p>
<script>
    let x = 20 + "Ayam";
    document.getElementById("demo").innerHTML = x; 
</script>
</body>
</html>

Saat menambahkan angka dan string dalam satu variabel seperti contoh di atas, maka tetap saja JavaScript akan memperlakukan atau menganggapnya sebagai string.

<!DOCTYPE html>
<html>
<body>
<h2>Belajar Type Data JavaScript</h2>
<p id="demo"></p>
<script>
let x = 16 + 21 + "ayam";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html> 

Dari contoh kode di atas, output seperti apa yang akan ditampilkan? ya benar, output yang akan ditampilkan dari script di atas adalah 37 ayam.

<!DOCTYPE html>
<html>
<body>
<h2>Belajar Type Data JavaScript</h2>
<p id="demo"></p>
<script>
let x = "ayam"+16 + 21;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html> 

Kemudian, dengan contoh script di atas, output seperti apa yang akan ditampilkan? bukan, output yang ditampilkan bukan ayam37 tapi ayam1621. Kenapa seperti itu? Karena javascript akan mengevaluasi expressions dari kiri ke kanan. Urutan yang berbeda maka hasilnya pun juga akan berbeda. Pada contoh pertama, javascript akan memperlakukan nilai 16 dan 21 sebagai number atau integer sampai membaca ayam. Sedangkah pada contoh kedua, karena urutan data yang pertama merupakan string maka semua data diperlakukan sebagai string (angka termasuk 16 dan 21).

B. Operator

Sumber : Petanikode.com dan Kodealgo.com

Hampir semua bahasa pemrograman memiliki operator termasuk JavaScript, operator digunakan untuk memanipulasi nilai.

Ada banyak operator yang bisa kita gunakan di JavaScript namun di sini kita hanya akan membahas yang sering digunakan saja seperti aritmatika, logika, perbandingan dan sebagainya.

Operator adalah simbol yang dapat digunakan untuk memberi tahu mesin JavaScript untuk melakukan tindakan, operasi, atau melakukan perhitungan, entah itu perhitungan matematika maupun logika.

Nilai atau variabel yang dibutuhkan untuk melakukan operasi disebut operan. Jumlah operan yang dibutuhkan masing-masing operator berbeda.

Berikut beberapa operator dasar JavaScript yang perlu Anda ketahui.

1. Operator Aritmatika

Sumber : Kodealgo.com

Operator Aritmatika digunakan untuk melakukan operasi matematika seperti penjumlahan, pengurangan, pembagian, perkalian, modulus (sisa bagi) dan sebagainya.

Khusus untuk + dapat digunakan untuk menggabungkan String.

Contoh :

const penjumlahan = 2 + 3;
console.log(penjumlahan); // 5

const pengurangan = 3 - 2;
console.log(pengurangan); // 1

const perkalian = 3 * 2;
console.log(perkalian); // 6

const pembagian = 5 / 2;
console.log(pembagian); // 2.5

const modulus = 10 % 3;
console.log(modulus); // 1 - karena 10 dibagi 3 sisanya 1

const eksponensial = 5 ** 3; // 5 pangkat 3
console.log(eksponensial); // 125

let increment = 5;
increment++; // 5 + 1
console.log(increment); // 6

let decrement = 5;
decrement--; // 5 - 1
console.log(decrement); // 4

a. Sama Dengan (=)

Operator sama dengan (=) digunakan untuk memasukkan nilai ke variabel.

const nama = 'reza';

b. Tambah Sama Dengan (+=)

Operator tambah sama dengan (+=) digunakan untuk menjumlahkan dan memasukkan nilai hasil penjumlahan ke variabel.

let a = 5;
a += 2; // a = 5 + 2
console.log(a); // 7

Khusus untuk += bisa digunakan untuk menggabungkan string :

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

c. Kurang Sama Dengan (-=)

Operator kurang sama dengan (-=) digunakan untuk mengurangi dan memasukkan nilai hasil pengurangan ke variabel.

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

d. Kali Sama Dengan (*=)

Operator kali sama dengan (*=) digunakan untuk mengalikan dan memasukkan nilai hasil perkalian ke variabel.

let a = 5;
a *= 2; // a = 5 * 2
console.log(a); // 10

e. Bagi Sama Dengan (/=)

Operator bagi sama dengan (/=) digunakan untuk membagi dan memasukkan nilai hasil pembagian ke variabel.

let a = 5;
a /= 2; // a = 5 / 2
console.log(a); // 2.5

f. Modulus Sama Dengan (%=)

Operaot modulus sama dengan (%=) digunakan untuk mencari nilai hasil pembagian dan memasukkan hasilnya ke variabel.

let a = 5;
a %= 2; // a = 5 % 2
console.log(a); // 1

g. Eksponensial Sama Dengan (**=)

Operator eksponensial sama dengan (**=) digunakan untuk memangkatkan nilai dan memasukkan hasilnya ke variabel.

let a = 5;
a **= 2; // a = 5 ** 2 (lima pangkat dua)
console.log(a); // 25

2. Operator Logika

Sumber : Kodealgo.com

Operator logika biasanya digunakan dalam conditional statement atau pernyataan bersyarat seperti if. Operator logika && dan || dapat digunakan untuk menggabungkan nilai agar menghasilkan satu nilai Boolean yang sesuai dengan logika.

Jika nilai atau operan bukan Boolean maka akan dikonversi menjadi Boolean. Kedua operator tersebut membutuhkan dua operan. Sedangkan ! (negasi) mengembalikan nilai kebalikan Boolean saat ini.

Operator && (And) hanya menghasilkan nilai false jika salah satu operan bernilai false. Sedangkan operator (Or) || hanya menghasilkan nilai false jika kedua operan bernilai false.

const sudahMakan = true;
const sudahNgopi = true;

if (sudahMakan && sudahNgopi) {
  console.log('Selamat Anda sudah Makan dan Ngopi');
}

Contoh penggunaan operator ! (Not).

const sudahMakan = true;
console.log(!sudahMakan); // false

const sudahNgopi = false;
console.log(!sudahNgopi); // true

a. AND (&&)

Operator && hanya akan menghasilkan nilai true jika ekspresi atau operan di kiri dan kanan bernilai true.

Sintaks :

ekspresi1 && ekspresi2

Contoh :

true && true; // true
true && false; // false
false && true; // false
false && false; // false

2 < 3 && 6 < 8; // true && true = true
2 < 3 && 6 > 8; // true && false = false
2 > 3 && 6 < 8; // false && true = false
2 > 3 && 6 > 8; // false && false = false

b. OR (||)

Operator OR (||) hanya akan menghasilkan nilai false jika ekspresi di kiri dan kanan bernilai false.

ekspresi1 || ekspresi2

Contoh :

true || true; // true
true || false; // true
false || true; // true
false || false; // false

2 < 3 || 6 < 8; // true || true = true
2 < 3 || 6 > 8; // true || false = true
2 > 3 || 6 < 8; // false || true = true
2 > 3 || 6 > 8; // false || false = false

Sama seperti AND, sebetulnya JavaScript mengembalikan nilai salah satu operan.

c. NOT (!)

Operator NOT ! atau negasi mengubah nilai truthy menjadi falsy atau sebaliknya.

Sintaks :

!ekspresi

Contoh :

!true; // false
!false; // true
!''; // true
!1; // false
!(true && true); // false

Kita juga bisa menggunakan beberapa operator NOT secara bersamaan. Untuk mengkonversi nilai apa pun ke boolean sesuai truthy dan falsy, gunakan dua buah operator NOT.

Contoh :

!!true; // true
!!{}; // true
!![]; // true
!!''; // false

3. Operator Perbandingan

Sumber : Kodealgo.com

Operator perbandingan dapat digunakan untuk membandingkan dua buah nilai atau operan.

Contoh :

// ==
const a = 9;
const b = '9';
console.log(a == b); // true

// ===
const c = 9;
const d = '9';
console.log(a === d); // false

// !=
const e = 9;
const f = '9';
console.log(e != f); // false

// !==
const g = 9;
const h = '9';
console.log(g !== h); // true

// >
const i = 3;
const j = 3;
console.log(i > j); // false

// <>
const k = 3;
const l = 5;
console.log(k < l); // true

// >=
const m = 3;
const n = 3;
console.log(m >= n); // true

// <=
const o = 3;
const p = 5;
console.log(o <= p); // true

a. Sama Dengan (==)

Operator == (nilai sama dengan) atau juga dikenal operator kesetaraan, membandingkan nilai apakah sama atau tidak, tidak peduli tipe data.

Contoh :

!!true; // true
!!{}; // true
!![]; // true
!!''; // false

Perhatikan kode di atas, kita membandingkan string '2' dan angka 2, hasilnya dianggap sama jika menggunakan operator ==.

b. Nilai dan Tipe Data Sama Dengan (===)

Sama seperti operator sebelumnya, tapi operator kesetaraan ketat (===) 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.

Contoh :

2 === '2'; // false
2 === 2; // true
'hi' === 'hi'; // true

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];

arr1 === arr2; // false

const arr3 = arr1;
arr3 === arr1; // true

c. Tidak Sama Dengan (!=)

Operator tidak sama dengan (!=) membandingkan apakah suatu nilai tidak sama dengan nilai lain, tidak peduli dengan tipe datanya.

Contoh :

2 != '2'; // false
2 != 2; // false
'hi' != 'hi'; // false
'hello' != 'hi'; // true

d. Nilai dan Tipe Data Tidak Sama Dengan (!==)

Sama seperti operator sebelumnya, tapi operator !== membandingkan tipe datanya, tidak hanya nilai. Selain itu, khusus untuk tipe data non-primitif seperti array dan objek, hanya menghasilkan nilai false jika merujuk ke objek atau array yang sama.

Contoh :

2 !== '2'; // true
2 !== 2; // false
'hi' !== 'hi'; // false
'hello' !== 'hi'; // true

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];

arr1 !== arr2; // true

const arr3 = arr1;
arr3 !== arr1; // false

e. Lebih Besar Dari (>)

Operator lebih besar dari (>) membandingkan apak nilai operan di sebelah kiri lebih besar dari operan di sebelah kanan.

Contoh :

2 > 3; // true
3 > 2; // false
3 > 3; // false

f. Lebih Kecil Dari (<)

Sama seperti operator sebelumnya, tapi operator < membandingkan apakah nilai operan di sebelah kiri lebih kecil dari nilai operan di sebelah kanan.

Contoh :

2 < 3; // true
3 < 2; // false
3 < 3; // false

g. Lebih Besar Dari atau Sama Dengan (>=)

Operator ini (>=) membandingkan apakah nilai operan di sebelah kiri lebih besar atau sama dengan nilai operan di sebelah kanan.

Contoh :

2 >= 3; // false
3 >= 2; // true
3 >= 3; // true

h. Lebih Kecil Dari atau Sama Dengan (<=)

Sama seperti operator sebelumnya, operator ini (<=) membandingkan apakah nilai operan di sebelah kiri lebih kecil atau sama dengan nilai operan di sebelah kanan.

Contoh :

2 <= 3; // true
3 <= 2; // false
3 <= 3; // true

4. Operator Ternary

Sumber : Kodealgo.com

Operator ternary biasanya digunakan untuk mempersingkat conditional statement (if/else).

Sintaks :

kondisi ? jikaBenar : jikaSalah;

Kondisi (kondisi) biasanya berupa logika atau perbandingan yang menghasilkan nilai Boolean, atau kita juga bisa menggunakan variabel yang berisi nilai Boolean, jika nilainya bukan Boolean akan dipaksa menjadi Boolean.

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

Contoh Penggunaan :

const sudahNgopi = false;
const hasil = sudahNgopi ? 'Wow! Dia sudah Ngopi.' : 'Ops! Dia belum Ngopi.';
console.log(hasil); // Ops! Dia belum Ngopi.

a. Contoh Sederhana

Misalnya, kita ingin menentukan pesan lulus dan tidak berdasarkan nilai, pesan tersebut akan diinisialisasi ke variabel pesan. Jika nilai lebih besar dari 70 pesannya Selamat Anda lulus., jika tidak Maaf, Anda tidak lulus..

Mari kita buat menggunakan percabangan if terlebih dahulu.

const nilai = 76;
let pesan;

if (nilai > 70) {
  pesan = 'Selamat Anda lulus.';
} else {
  pesan = 'Maaf, Anda tidak lulus.';
}

console.log(pesan); // Selamat Anda lulus.

Perilaku percabangan di atas dapat dicapai menggunakan operator ternary.

const nilai = 76;
const pesan = nilai > 70 ? 'Selamat Anda lulus.' : 'Maaf, Anda tidak lulus.';

console.log(pesan); // Selamat Anda lulus.

Keduanya memiliki perilaku yang sama dan menghasilkan nilai yang sama, tapi ternary jauh lebih singkat, hanya tiga baris.

b. Lebih Dari Satu Kondisi

Bagaimana jika kita ingin menggunkaan operator ternary dengan lebih dari satu kondisi dan dua pilihan? Misalnya kita ingin menentukan nilai huruf (grade) berdasarkan nilai angka. Berikut jika kita menggunakan percabangan if.

const nilai = 50;
let grade;

if (nilai > 80) {
  grade = 'A';
} else if (nilai > 60) {
  grade = 'B';
} else if (nilai > 40) {
  grade = 'C';
} else if (nilai > 20) {
  grade = 'D';
} else {
  grade = 'E';
}

console.log(grade); // C

Dan ini jika kita menggunakan operator ternary.

let nilai = 50;
const grade =
  nilai > 80
    ? 'A'
    : nilai > 60
    ? 'B'
    : nilai > 40
    ? 'C'
    : nilai > 20
    ? 'D'
    : 'E';

console.log(grade); // C

Agar lebih mudah dibaca, kita bisa membuat baris baru sebelum titik dua (:) seperti contoh di atas, ini tidak akan menghasilkan kesalahan.

c. Ternary di Dalam Fungsi

Saat membuat aplikasi kita seringkali memerlukan percabangan di dalam fungsi.

Untuk percabangan sederhana, operator ternary lebih sering digunakan. Mari kita pelajari bagaimana pola penggunaan operator ternary di dalam fungsi.

Misalnya, kita ingin membuat fungsi untuk mengecek apakah angka bilangan bulat atau bukan, jika ya kembalikan nilai true, jika bukan kembalikan false.

Berikut contoh jika menggunakan percabangan if.

const apakahBulat = (num) => {
  if (num % 2 === 0) {
    return true;
  }

  return false;
};

const hasilYa = apakahBulat(2);
const hasilTidak = apakahBulat(1);
console.log(hasilYa); // true
console.log(hasilTidak); // false

Berikut jika kita menggunakan operator ternary.

const apakahBulat = (num) => (num % 2 === 0 ? true : false);

const hasilYa = apakahBulat(2);
const hasilTidak = apakahBulat(1);
console.log(hasilYa); // true
console.log(hasilTidak); // false

5. Operator Typeof

Operator Typeof dapat digunakan untuk mengecek tipe data atau jenis objek suatu nilai.

Contoh penggunaan typeof :

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

C. Struktur If Else

Sumber : Petanikode.com dan Blog.Xsis.academy

Percabangan yang menggunakan kata kunci if dan else memiliki tiga bentuk yaitu if, else dan else if.

1. Kondisi If

Percabangan if biasanya digunakan ketika kita hanya memiliki satu kondisi dan satu aksi (pilihan) atau statement.

Contoh Sintaks :

if (kondisi) {
  statement
}

• Kondisi : Biasanya berupa ekspresi yang mengembalikan nilai boolean seperti perbandingan dan logika. Jika kondisi tidak mengembalikan nilai boolean, dikonversi otomatis ke boolean (truthy atau falsy). Kondisi harus bernilai true agar statement dapat dieksekusi.
• Statement : Kode atau aksi yang akan dieksekusi jika kondisi bernilai true.

Contoh Sintaks yang bernilai True :

if (true) {
  console.log('Hello World!');
}

console.log('Ini statement di luar if!');

Output :

Hello World!
Ini statement di luar if!

Perhatikan kode di atas, karena kondisi bernilai true maka statement di dalam if akan dieksekusi.

Contoh Sintaks yang bernilai False :

if (false) {
  console.log('hello World!');
}

console.log('Ini statement di luar if!');

Output :

Ini statement di luar if!

Kode di atas tidak jauh beda dengan yang sebelumnya, hanya saja kita mengubah kondisi menjadi false, yang terjadi statement di dalam if tidak dieksekusi.

2. Kondisi If-Else

Percabangan else biasanya digunakan ketika kita memiliki dua pilihan atau statement (aksi).

Statement yang dieksekusi ketika kondisi bernilai true dan false.

Contoh Sintaks :

if (kondisi) {
  statement1
} else {
  statement2
}

Perilakunya mirip seperti sebelumnya, hanya saja “statement2” dalam blok else akan dieksekusi ketika kondisinya bernilai false.

Contoh Sintaks yang bernilai True :

if (true) {
  console.log('Hello World!');
} else {
  console.log('Invalid');
}

Output :

Hello World!