Perbandingan dan Operator logika digunakan untuk menguji apakah logika yang digunakan benar atau salah.
Section Artikel
Operator Perbandingan
Operator perbandingan digunakan dalam pernyataan logis untuk menentukan persamaan atau perbedaan antara variabel atau nilai.
Mengingat jika x = 5, tabel di bawah menjelaskan operator perbandingan:
| Operator | Deskripsi | Perbandingan | Hasil |
| == | sama dengan | x == 8 x == 5 x == “5” | false true true |
| === | nilai yang sama dan tipe yang sama | x === 5 x === “5” | true false |
| != | tidak sama dengan | x != 8 | true |
| !== | tidak sama nilainya atau tidak sama tipe | x !== 5 x !== “5” x !== 8 | false true true |
| > | lebih besar dari | x > 8 | false |
| < | lebih kecil dari | x < 8 | true |
| >= | lebih besar sama dengan | x >= 8 | false |
| <= | lebih kecil sama dengan | x <= 8 | true |
Contoh:
Operator ==
x == 8
<!DOCTYPE html> <html> <body> <h2>JavaScript Comparison</h2> <p> Tetapkan 5 ke x, dan tampilkan nilai perbandingan (x == 8): </p> <p id="demo"></p> <script> var x = 5; document.getElementById("demo").innerHTML = (x == 8); </script> </body> </html>
x == 5
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p> Tetapkan 5 ke x, dan tampilkan nilai perbandingan (x == 5): </p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x == 5);
</script>
</body>
</html>
Operator ===
x === 5
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p> Tetapkan 5 ke x, dan tampilkan nilai perbandingan (x === 5): </p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x === 5);
</script>
</body>
</html>
x === “5”
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p> Tetapkan 5 ke x, dan tampilkan nilai perbandingan (x === "5"). </p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x === "5");
</script>
</body>
</html>
Operator !=
x != 8
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p> Tetapkan 5 sampai x, dan tampilkan nilai perbandingan (x! = 8). </p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x != 8);
</script>
</body>
</html>
Operator !==
x !== 5
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p> Tetapkan 5 ke x, dan tampilkan nilai perbandingannya (x! == 5): </p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x !== 5);
</script>
</body>
</html>
x !== “5”
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p> Tetapkan 5 ke x, dan tampilkan nilai perbandingan (x! == "5"): </p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x !== "5");
</script>
</body>
</html>
Operator >
x > 8
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p> Tetapkan 5 pada x, dan tampilkan nilai perbandingan (x> 8). </p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x > 8);
</script>
</body>
</html>
Operator <
x < 8
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p> Tetapkan 5 pada x, dan tampilkan nilai perbandingan (x <8). </p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x < 8);
</script>
</body>
</html>
Operator >=
x >= 8
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p> Tetapkan 5 ke x, dan tampilkan nilai perbandingan (x> = 8). </p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x >= 8);
</script>
</body>
</html>
Operator <=
x <= 8
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p> Tetapkan 5 ke x, dan tampilkan nilai perbandingan (x <= 8). </p>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = (x <= 8);
</script>
</body>
</html>
Bagaimana Perbandingan digunakan?
Operator perbandingan dapat digunakan dalam pernyataan bersyarat untuk membandingkan nilai dan mengambil tindakan yang bergantung pada hasilnya.
Contoh:
if (age < 18) text = "Terlalu muda";
Operator Logika
Operator logika digunakan untuk menentukan logika antara variabel atau nilai.
Mengingat bahwa x = 6 dan y = 3, tabel di bawah ini menjelaskan operator logika.
Contoh :
Operator &&
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p> Operator AND (&&) mengembalikan nilai benar jika kedua ekspresi benar, jika tidak maka akan mengembalikan salah. </p>
<p id="demo"></p>
<script>
var x = 6;
var y = 3;
document.getElementById("demo").innerHTML =
(x < 10 && y > 1) + "<br>" +
(x < 10 && y < 1);
</script>
</body>
</html>
Operator ||
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p> Operator OR (||) mengembalikan nilai true jika salah satu atau kedua ekspresi benar, jika tidak maka akan mengembalikan salah. </p>
<p id="demo"></p>
<script>
var x = 6;
var y = 3;
document.getElementById("demo").innerHTML =
(x == 5 || y == 5) + "<br>" +
(x == 6 || y == 0) + "<br>" +
(x == 0 || y == 3) + "<br>" +
(x == 6 || y == 3);
</script>
</body>
</html>
Operator !
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparison</h2>
<p> Operator NOT (!) mengembalikan nilai benar untuk pernyataan salah dan salah untuk pernyataan benar. </p>
<p id="demo"></p>
<script>
var x = 6;
var y = 3;
document.getElementById("demo").innerHTML =
!(x === y) + "<br>" +
!(x > y);
</script>
</body>
</html>
Operator Bersyarat (Ternary)
JavaScript juga berisi operator bersyarat yang memberikan nilai variabel berdasarkan beberapa kondisi.
Sintaks:
| variablename = (condition) ? value1:value2 |
Contoh:
<!DOCTYPE html>
<html>
<body>
<p> Masukkan usia Anda dan klik tombol: </p>
<input id="age" value="18" />
<button onclick="myFunction()">Klik disini</button>
<p id="demo"></p>
<script>
function myFunction() {
var age, voteable;
age = document.getElementById("age").value;
voteable = (age < 18) ? "Terlalu muda":"Cukup tua";
document.getElementById("demo").innerHTML = voteable + " to vote.";
}
</script>
</body>
</html>
Jika usia variabel adalah nilai di bawah 18, nilai variabel voteable akan menjadi “Terlalu muda”, jika tidak, nilai voteable akan menjadi “Cukup Tua”.
Membandingkan Tipe Data Berbeda
Membandingkan data dari berbagai tipe dapat memberikan hasil yang tidak diharapkan.
Saat membandingkan string dengan angka, JavaScript akan mengubah string menjadi angka saat melakukan perbandingan. String kosong diubah menjadi 0. String non-numerik diubah menjadi NaN yang selalu bernilai salah.
| Case | Value |
| 2 < 12 | true |
| 2 < “12” | true |
| 2 < “John” | false |
| 2 > “John” | false |
| 2 == “John” | false |
| “2” < “12” | false |
| “2” > “12” | true |
| “2” == “12” | false |
Saat membandingkan dua string, “2” akan lebih besar dari “12”, karena (menurut abjad) 1 kurang dari 2.
Untuk mengamankan hasil yang tepat, variabel harus diubah ke jenis yang tepat sebelum dibandingkan.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comparisons</h2>
<p> Masukkan usia Anda dan klik tombol: </p>
<input id="age" value="18" />
<button onclick="myFunction()">Klik disini</button>
<p id="demo"></p>
<script>
function myFunction() {
var age, voteable;
age = Number(document.getElementById("age").value);
if (isNaN(age)) {
voteable = "Input is not a number";
} else {
voteable = (age < 18) ? "Terlalu muda" : "Cukup Tua";
}
document.getElementById("demo").innerHTML = voteable;
}
</script>
</body>
</html>
