Cara membuat if else di javascript

Question

Table Of Contens

Table of Contents Show

Alur Cara Kerja Pernyataan Kondisi IF dan ELSE
IF STATMENT
IF dan ELSE STATMENT
IF dan ELSE IF STATMENT
Percabangan if (true) { console.log('hello world'); } 6, if (true) { console.log('hello world'); } 7, dan if (false) { console.log('hello world'); } 2
1. Percabangan if (true) { console.log('hello world'); } 6
2. Percabangan if (true) { console.log('hello world'); } 7
3. Percabangan if (false) { console.log('hello world'); } 2
3 Hal yang Perlu Diketahui
1. Konversi Kondisi ke Boolean
Apa itu if else JavaScript?
Apa itu struktur if else?
Bagaimana cara memanggil fungsi di JavaScript?
Jelaskan apa yang dimaksud dengan JavaScript?

Pernyataan IF & ELSE di dalam JavaScript - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar tentang dasar-dasar dari pemrogramman JavaScript yaitu pernyataan atau kondisi IF dan ELSE.

Saat menulis sebuah program, mungkin ada situasi di mana kita perlu mengadopsi satu dari serangkaian jalur yang diberikan.

Dalam kasus seperti itu, kita perlu menggunakan pernyataan bersyarat yang memungkinkan program membuat keputusan yang benar dan melakukan tindakan yang benar.

JavaScript mendukung pernyataan bersyarat yang digunakan untuk melakukan tindakan berbeda berdasarkan kondisi yang berbeda. Di sini kita akan menjelaskan pernyataan IF dan ELSE.

Alur Cara Kerja Pernyataan Kondisi IF dan ELSE

Diagram alir berikut menunjukkan bagaimana pernyataan if-else bekerja

JavaScript mendukung bentuk pernyataan IF dan ELSE berikut -

if statement
if...else statement
if...else if... statement.

IF STATMENT

Pernyataan IF adalah pernyataan kontrol utama yang memungkinkan JavaScript untuk membuat keputusan dan melaksanakan pernyataan kondisional.

Sintaks untuk pernyataan if dasar adalah sebagai berikut -

if (expression) {
   Statement(s) to be executed if expression is true
}

Di sini ekspresi JavaScript dievaluasi. Jika nilai yang dihasilkan benar, pernyataan yang diberikan dieksekusi.

Jika ungkapan itu salah, maka tidak ada pernyataan yang tidak akan dieksekusi. Sebagian besar waktu, kita akan menggunakan operator perbandingan saat membuat keputusan.

Contoh Coba contoh berikut untuk memahami cara kerja pernyataan IF.

<html>
   <body>     
      <script type = "text/javascript">
            var age = 20;
         
            if( age > 18 ) {
               document.write("<b>Qualifies for driving</b>");
            }
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

Dari kode diataas, kurang lebih hasilnya seperti berikut ini :

Qualifies for driving
Set the variable to different value and then try...

IF dan ELSE STATMENT

Pernyataan IF dan ELSE adalah bentuk pernyataan kontrol berikutnya yang memungkinkan JavaScript untuk mengeksekusi pernyataan dengan cara yang lebih terkontrol.

Sintaks

if (expression) {
   Statement(s) to be executed if expression is true
} else {
   Statement(s) to be executed if expression is false
}

Di sini ekspresi JavaScript dievaluasi. Jika nilai yang dihasilkan benar, pernyataan yang diberikan di blok 'jika', dieksekusi. Jika ekspresi salah, maka pernyataan yang diberikan di blok lain dieksekusi.

Contoh Coba kode berikut untuk mempelajari cara menerapkan pernyataan if-else di JavaScript.

<html>
   <body>   
      <script type = "text/javascript">
            var age = 15;
         
            if( age > 18 ) {
               document.write("<b>Qualifies for driving</b>");
            } else {
               document.write("<b>Does not qualify for driving</b>");
            }
      </script>     
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

Dari kode diataas, kurang lebih hasilnya seperti berikut ini :

Does not qualify for driving
Set the variable to different value and then try...

IF dan ELSE IF STATMENT

Peryantaan IF dan ELSE IF adalah bentuk lanjutan dari if dan else yang memungkinkan JavaScript membuat keputusan yang benar dari beberapa kondisi.

Sintaks

Sintaks pernyataan if-else-if adalah sebagai berikut -
if (expression 1) {
   Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
   Statement(s) to be executed if expression 2 is true
} else if (expression 3) {
   Statement(s) to be executed if expression 3 is true
} else {
   Statement(s) to be executed if no expression is true
}

Tidak ada yang spesial dari kode ini. Ini hanya serangkaian pernyataan if , di mana setiap if adalah bagian dari klausa lain dari pernyataan sebelumnya.

Pernyataan dieksekusi berdasarkan kondisi sebenarnya, jika tidak ada kondisi yang benar, maka blok yang lain dieksekusi.

Untuk membuat percabangan di JavaScript kita bisa menggunakan kata kunci

if (true) {
  console.log('hello world');
}

6 dan

if (true) {
  console.log('hello world');
}

7 yang akan kita bahas kali ini, atau switch case.

Percabangan memungkinkan kita menentukan aksi atau kode mana yang akan dieksekusi berdasarkan kondisi tertentu.

Jangan bingung antara istilah percabangan, pengkondisian, struktur logika, dan conditional statement (pernyataan bersyarat), semuanya merujuk pada satu hal yang sama.

Mengapa kita perlu belajar percabangan?

Coba perhatikan ketika kita login ke Facebook.

Ketika salah memasukkan kata sandi, Facebook akan menampilkan pesan kesalahan, sedangkan jika benar akan langsung dialihkan ke halaman beranda.

Perilaku seperti ini bisa kita buat menggunakan percabangan.

Jadi, dengan percabangan Anda akan bisa menentukan kode mana yang akan dieksekusi berdasarkan kondisi tertentu.

Berikut topik yang akan kita pelajari terkait percabangan

if (true) {
  console.log('hello world');
}

6 dan

if (true) {
  console.log('hello world');
}

7 JavaScript.

Percabangan if (true) { console.log('hello world'); } 6, if (true) { console.log('hello world'); } 7, dan if (false) { console.log('hello world'); } 2

Percabangan yang menggunakan kata kunci

if (true) {
  console.log('hello world');
}

6 dan

if (true) {
  console.log('hello world');
}

7 memiliki tiga bentuk.

1. Percabangan if (true) { console.log('hello world'); } 6

Percabangan

if (true) {
  console.log('hello world');
}

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

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
```
const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}
```
3 agar statement dieksekusi.

Statement: kode atau aksi yang akan dieksekusi jika kondisi bernilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

3.

Contoh Kondisi

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

3

if (true) {
  console.log('hello world');
}

Perhatikan kode di atas, karena kondisi bernilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

3 maka statement di eksekusi.

Contoh Kondisi

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

7

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

Kode di atas tidak jauh beda dengan yang sebelumnya, hanya saja kita mengubah kondisi menjadi

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

7, yang terjadi statement tidak dieksekusi.

Studi Kasus

Katakanlah kita memiliki sebuah aplikasi yang mengharuskan pengguna login menggunkaan kata sandi.

Jadi, ketika pengguna login menggunakan kata sandi yang benar, kita akan menampilkan pesan kesalahan

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

9, kalau tidak jangan.

Anggap saja kata sandi yang benar adalah

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

0 dan nilai variabel

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

1 dikirim dari formulir login.

Mari kita gunakan kasus jika kata sandi benar.

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

Perhatikan kondisi perbandingan

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

2, ini menghasilkan nilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

3 karena nilai variabel

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

1 sama dengan

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

0.

Oleh karena itu, statement dieksekusi.

Mari kita lihat kasus jika kata sandi salah.

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

Sekarang, kondisi perbandingan

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

2 menghasilkan nilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

7 karena nilai

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

1 tidak sama dengan

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

0.

Oleh karena itu statement tidak dieksekusi.

Bagaimana jika kita ingin menampilkan pesan kesalahan ketika kata sandi salah? Disinilah kita bisa menggunakan

if (true) {
  console.log('hello world');
}

7.

2. Percabangan if (true) { console.log('hello world'); } 7

Percabangan

if (true) {
  console.log('hello world');
}

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

Statement yang dieksekusi ketika kondisi bernilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

3 dan

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

7.

Sintaks

if (kondisi) {
  statement1
} else {
  statement2
}

Perilakunya mirip seperti sebelumnya, hanya saja "statement2" dalam blok

if (true) {
  console.log('hello world');
}

7 akan dieksekusi ketika

if (kondisi) {
  statement1
} else {
  statement2
}

6 bernilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

7.

Contoh kondisi

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

3

if (true) {
  console.log('hello world');
} else {
  console.log('halo dunia');
}

Karena kondisi bernilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

3, maka "statement1" (

if (true) {
  console.log('hello world');
} else {
  console.log('halo dunia');
}

0) dieksekusi.

Contoh kondisi

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

7

if (false) {
  console.log('hello world');
} else {
  console.log('halo dunia');
}

Karena kondisi bernilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

7, maka "statement2" (

if (true) {
  console.log('hello world');
} else {
  console.log('halo dunia');
}

3) dieksekusi.

Jadi, "statement1" dieksekusi ketika kondisi bernilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

3, sedangkan "statement2" ketika

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

7.

Mari kita gunakan contoh kode sebelumnya untuk menampilkan kesalahan

if (true) {
  console.log('hello world');
} else {
  console.log('halo dunia');
}

6 ketika kata sandi salah.

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
} else {
  console.log('Ops! Kata sandi salah.');
}

3. Percabangan if (false) { console.log('hello world'); } 2

Percabangan

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

2 digunakan ketika kita memiliki lebih dari satu kondisi dan lebih dari dua pilihan atau statement (aksi).

Sintaks

if (kondisi1) {
  statement1
} else if (kondisi2) {
  statement2
} else {
  statement3
}

Perilakunya mirip seperti sebelumnya, JavaScript akan memindai setiap kondisi dari atas ke bawah.

Jika ditemukan kondisi yang bernilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

3 maka statement yang ada di dalam kondisi tersebut akan dieksekusi lalu keluar dari percabangan.

Artinya kondisi dan statement berikutnya tidak dieksekusi.

Kita dapat menambahkan lebih dari satu

if (false) {
  console.log('hello world');
} else {
  console.log('halo dunia');
}

0.

Contoh

if (true) {
  console.log('hello world');
}

0

Perhatikan kode di atas, statement berapa yang akan ditampilkan ke console? Jawabannya adalah

if (false) {
  console.log('hello world');
} else {
  console.log('halo dunia');
}

1.

Mengapa

if (false) {
  console.log('hello world');
} else {
  console.log('halo dunia');
}

2,

if (false) {
  console.log('hello world');
} else {
  console.log('halo dunia');
}

3, dan

if (false) {
  console.log('hello world');
} else {
  console.log('halo dunia');
}

4 tidak dieksekusi padahal kondisinya bernilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

3?

Karena

if (false) {
  console.log('hello world');
} else {
  console.log('halo dunia');
}

1 adalah kondisi pertama yang dicek JavaScript.

Sekali lagi ingat, ketika ditemukan kondisi bernilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

3...

...JavaScript akan mengeksekusi statement dalam kondisi tersebut dan keluar dari percabangan.

Bagaimana dengan

if (true) {
  console.log('hello world');
}

7?

Statement dalam blok

if (true) {
  console.log('hello world');
}

7 hanya dieksekusi ketika semua kondisi bernilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

7.

Jadi, selamat ada kondisi yang bernilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

3, statement dalam blok

if (true) {
  console.log('hello world');
}

7 tidak akan dieksekusi.

Contoh

if (true) {
  console.log('hello world');
}

1

Perhatikan contoh di atas, statement dalam blok

if (true) {
  console.log('hello world');
}

7 (

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
} else {
  console.log('Ops! Kata sandi salah.');
}

4) dieksekusi karena semua kondisi di atasnya bernilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

7.

Studi Kasus

Katakanlah kita ingin membuat aplikasi untuk mengkonversi nilai angka dari 0 sampai 100 menjadi nilai huruf (grade) yang diklasifikasikan sebagai berikut:

Nilai 100 - 80: Grade A
Nilai 79 - 60: Grade B
Nilai 59 - 40: Grade C
Nilai 39 - 20: Grade D
Nilai 19 - 0: Grade E

Jika nilai berada di luar rentang 0 - 100, tampilkan pesan

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
} else {
  console.log('Ops! Kata sandi salah.');
}

6.

if (true) {
  console.log('hello world');
}

2

Kode di atas akan menampilkan

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
} else {
  console.log('Ops! Kata sandi salah.');
}

7 ke console karena

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
} else {
  console.log('Ops! Kata sandi salah.');
}

8 berada dalam rentang 60 - 40.

Anda dapat mengubah nilai dari variabel

const inputKataSandi = 'rahasiaaja';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
} else {
  console.log('Ops! Kata sandi salah.');
}

8 untuk menguji masing-masing kondisi, termasuk memasukkan angka diluar rentang 0 - 100.

Kode di atas memang terlihat kompleks, tapi ini lebih ketat.

Kode di atas juga bisa mengasah pemahaman Anda mengenai operator perbandingan dan logika.

3 Hal yang Perlu Diketahui

1. Konversi Kondisi ke Boolean

Kondisi pada percabangan harus menghasilkan atau bernilai boolean (

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

3 atau

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

7).

Bagaimana jika kondisi memiliki nilai selain boolean? JavaScript akan mengkonversi nilai tersebut ke boolean.

Contoh

if (true) {
  console.log('hello world');
}

3

Mengapa

if (true) {
  console.log('hello world');
} else {
  console.log('halo dunia');
}

0 tidak dieksekusi? karena jika

if (kondisi1) {
  statement1
} else if (kondisi2) {
  statement2
} else {
  statement3
}

3 (string kosong) di konversi ke boolean maka akan menghasilkan nilai

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

7 (falsy).

Untuk mengetahui nilai apa saja yang jika dikonversi ke boolean menjadi

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

3 dan

const inputKataSandi = 'rahasia123';

if (inputKataSandi === 'rahasia123') {
  console.log('Selamat Anda berhasil login.');
}

7, pelajari materi truthy dan falsy.

Apa itu if else JavaScript?

Percabangan if/else merupakan percabangan yang memiliki dua blok pilihan. Pilihan pertama untuk kondisi benar, dan pilihan kedua untuk kondisi salah (else).

Apa itu struktur if else?

4. Struktur Percabangan IF ELSE Kondisi IF ELSE adalah kondisi dimana jika pernyataan benar (True) maka kode dalam IF akan dieksekusi, tetapi jika bernilai salah (False) maka akan mengeksekusi kode di dalam ELSE.

Bagaimana cara memanggil fungsi di JavaScript?

Cara Memanggil/Eksekusi Fungsi Kita bisa memanggil fungsi di dalam kode Javascript dengan menuliskan nama fungsinya seperti ini: namaFungsi(); Contoh: // membuat fungsi function sayHello(){ console.log("Hello World!"); } // memanggil fungsi sayHello() // maka akan menghasilkan -> Hello World!