JavaScript Dasar: Variabel, Fungsi, Operator, dan Control Flow

JavaScript adalah bahasa pemrograman yang membuat halaman web menjadi interaktif dan dinamis. Mulai dari validasi form, animasi, hingga fetch data dari API — semuanya menggunakan JavaScript.

Cara Menulis JavaScript di HTML

JavaScript bisa ditulis di dua lokasi dalam HTML:

1
<!-- 1. Di Body Location — dieksekusi saat halaman loading -->
2
<html>
3
<body>
4
  <script>
5
    console.log("Halaman sedang loading...");
6
  </script>
7
</body>
8
</html>
9

10
<!-- 2. Di Head Location — dieksekusi saat ada aksi (click, dll) -->
11
<html>
12
<head>
13
  <script>
14
    function greet() {
15
      alert("Hello!");
16
    }
17
  </script>
18
</head>
19
<body>
20
  <button onclick="greet()">Klik Saya</button>
21
</body>
22
</html>
23

24
<!-- 3. File eksternal (direkomendasikan) -->
25
<script src="app.js"></script>

Best Practice: Letakkan <script src="app.js"> sebelum </body> agar tidak memblokir rendering halaman.

Output JavaScript

1
// Console — untuk debugging
2
console.log("Hello World");
3
console.log("Nilai:", 42);
4
console.error("Ini error");
5
console.warn("Ini warning");
6

7
// Alert — popup di browser
8
alert("Pesan untuk user");
9

10
// Confirm — popup dengan OK/Cancel
11
var jawaban = confirm("Yakin ingin menghapus?");
12
if (jawaban) {
13
  console.log("User memilih OK");
14
}
15

16
// Prompt — popup dengan input
17
var nama = prompt("Siapa namamu?");
18
console.log("Halo, " + nama);
19

20
// Tulis ke halaman
21
document.write("<h2>Hello dari JavaScript!</h2>");
22
document.getElementById("output").innerHTML = "Teks diubah!";

Komentar

1
// Ini komentar satu baris
2

3
/*
4
  Ini komentar
5
  multi-baris
6
*/
7

8
var x = 10; // komentar di akhir baris

Variabel: var, let, dan const

JavaScript punya tiga cara deklarasi variabel:

1
// var — function-scoped, bisa re-declare, hoisting
2
var nama = "Budi";
3
var nama = "Siti"; // valid tapi tidak direkomendasikan
4

5
// let — block-scoped, bisa re-assign, ES6+
6
let umur = 25;
7
umur = 26; // valid
8
// let umur = 27; // Error: sudah dideklarasi
9

10
// const — block-scoped, tidak bisa re-assign, ES6+
11
const PI = 3.14159;
12
// PI = 3; // Error: Assignment to constant variable

Perbedaan var, let, const

	`var`	`let`	`const`
Scope	Function	Block	Block
Re-declare	✅	❌	❌
Re-assign	✅	✅	❌
Hoisting	✅ (undefined)	❌	❌
Kapan pakai	Hindari	Variabel biasa	Nilai tetap

1
// Contoh block scope
2
{
3
  var x = 10;  // bisa diakses di luar block
4
  let y = 20;  // TIDAK bisa diakses di luar block
5
  const z = 30; // TIDAK bisa diakses di luar block
6
}
7
console.log(x); // 10
8
console.log(y); // ReferenceError!

Tipe Data JavaScript

1
// String
2
let nama = "Budi";
3
let sapa = 'Hello';
4
let template = `Halo, ${nama}!`; // template literal ES6
5

6
// Number
7
let umur = 25;
8
let harga = 99.99;
9
let negatif = -10;
10

11
// Boolean
12
let aktif = true;
13
let selesai = false;
14

15
// Null — sengaja kosong
16
let data = null;
17

18
// Undefined — belum diisi
19
let belumDiisi;
20
console.log(belumDiisi); // undefined
21

22
// Object
23
let orang = { nama: "Budi", umur: 25 };
24

25
// Array
26
let buah = ["apel", "mangga", "jeruk"];
27

28
// Cek tipe data
29
console.log(typeof nama);    // "string"
30
console.log(typeof umur);    // "number"
31
console.log(typeof aktif);   // "boolean"
32
console.log(typeof data);    // "object" (null quirk)
33
console.log(typeof orang);   // "object"
34
console.log(typeof buah);    // "object"

Fungsi (Functions)

1
// Deklarasi fungsi biasa
2
function tambah(a, b) {
3
  return a + b;
4
}
5
console.log(tambah(3, 4)); // 7
6

7
// Fungsi dengan default parameter (ES6)
8
function greet(name = "Teman") {
9
  return "Halo, " + name + "!";
10
}
11
console.log(greet());        // "Halo, Teman!"
12
console.log(greet("Budi"));  // "Halo, Budi!"
13

14
// Function expression
15
const kali = function(a, b) {
16
  return a * b;
17
};
18

19
// Arrow function (ES6) — lebih ringkas
20
const bagi = (a, b) => a / b;
21
const kuadrat = x => x ** 2;
22
const halo = () => "Hello World!";
23

24
console.log(bagi(10, 2));    // 5
25
console.log(kuadrat(4));     // 16
26
console.log(halo());         // "Hello World!"

Operator

Aritmatika

1
let a = 10, b = 3;
2

3
console.log(a + b);  // 13 — penjumlahan
4
console.log(a - b);  // 7  — pengurangan
5
console.log(a * b);  // 30 — perkalian
6
console.log(a / b);  // 3.333 — pembagian
7
console.log(a % b);  // 1  — modulus (sisa bagi)
8
console.log(a ** b); // 1000 — pangkat (ES6)
9

10
// Increment & decrement
11
let x = 5;
12
x++;       // x = 6 (post-increment)
13
++x;       // x = 7 (pre-increment)
14
x--;       // x = 6 (post-decrement)

Assignment

1
let n = 10;
2
n += 5;   // n = 15
3
n -= 3;   // n = 12
4
n *= 2;   // n = 24
5
n /= 4;   // n = 6
6
n %= 4;   // n = 2
7
n **= 3;  // n = 8

Perbandingan

1
console.log(5 == "5");   // true  — hanya cek nilai
2
console.log(5 === "5");  // false — cek nilai DAN tipe
3
console.log(5 !== "5");  // true  — strict not equal
4
console.log(10 > 5);     // true
5
console.log(10 < 5);     // false
6
console.log(10 >= 10);   // true

Best Practice: Selalu gunakan === (strict equality) bukan ==.

Logika

1
console.log(true && false);  // false — AND
2
console.log(true || false);  // true  — OR
3
console.log(!true);          // false — NOT
4

5
// Contoh praktis
6
let umur = 20;
7
let punya_ktp = true;
8
if (umur >= 17 && punya_ktp) {
9
  console.log("Boleh mendaftar");
10
}

Control Flow

if - else if - else

1
let nilai = 85;
2

3
if (nilai >= 90) {
4
  console.log("A");
5
} else if (nilai >= 80) {
6
  console.log("B");
7
} else if (nilai >= 70) {
8
  console.log("C");
9
} else {
10
  console.log("D");
11
}
12
// Output: B
13

14
// Ternary operator — if-else ringkas
15
let status = nilai >= 60 ? "Lulus" : "Tidak Lulus";
16
console.log(status); // "Lulus"

switch

1
let hari = "Senin";
2

3
switch (hari) {
4
  case "Senin":
5
  case "Selasa":
6
  case "Rabu":
7
  case "Kamis":
8
  case "Jumat":
9
    console.log("Hari kerja");
10
    break;
11
  case "Sabtu":
12
  case "Minggu":
13
    console.log("Akhir pekan");
14
    break;
15
  default:
16
    console.log("Tidak dikenal");
17
}

Loops (Perulangan)

for loop

1
// Loop biasa
2
for (let i = 0; i < 5; i++) {
3
  console.log(i); // 0 1 2 3 4
4
}
5

6
// Loop array
7
let buah = ["apel", "mangga", "jeruk"];
8
for (let i = 0; i < buah.length; i++) {
9
  console.log(buah[i]);
10
}
11

12
// for...of (ES6) — iterasi nilai
13
for (let item of buah) {
14
  console.log(item); // apel, mangga, jeruk
15
}
16

17
// for...in — iterasi key/index
18
let orang = { nama: "Budi", umur: 25 };
19
for (let key in orang) {
20
  console.log(key + ": " + orang[key]);
21
}

while dan do-while

1
// while — cek kondisi dulu
2
let i = 0;
3
while (i < 5) {
4
  console.log(i);
5
  i++;
6
}
7

8
// do-while — eksekusi dulu, baru cek
9
let j = 0;
10
do {
11
  console.log(j);
12
  j++;
13
} while (j < 5);
14
// Perbedaan: do-while selalu eksekusi minimal 1 kali

break dan continue

1
// break — hentikan loop
2
for (let i = 0; i < 10; i++) {
3
  if (i === 5) break;
4
  console.log(i); // 0 1 2 3 4
5
}
6

7
// continue — skip iterasi ini
8
for (let i = 0; i < 10; i++) {
9
  if (i % 2 === 0) continue;
10
  console.log(i); // 1 3 5 7 9 (skip genap)
11
}

Kesimpulan

Fondasi JavaScript yang wajib dikuasai:

let dan const untuk deklarasi variabel (hindari var)
Arrow function => untuk fungsi ringkas
=== untuk perbandingan yang aman
for...of untuk iterasi array yang bersih

Di artikel berikutnya: JavaScript ES6+ — Array methods, destructuring, spread operator, Map, Set, dan Promises.

Referensi: UI Technologies (HTML, CSS & JavaScript) Including ES6 Features — Srinivas Garapati.

Thanks for reading!

JavaScript Dasar: Variabel, Fungsi, Operator, dan Control Flow

Mon Jun 29 2026

1074 words · 11 minutes

Teknologi JavaScript WebDevelopment FrontEnd BelajarJavaScript ES6