JavaScript adalah bahasa pemrograman utama di dunia web, dan mempelajarinya dimulai dari memahami struktur dasar JavaScript dan cara menulis kode dengan benar. Banyak pemula yang langsung ingin membuat fitur kompleks, padahal fondasi terpenting justru ada pada dasar-dasar seperti syntax, variabel, tipe data, statement, expression, hingga cara menulis fungsi.
Tutorial lengkap ini akan membahas JavaScript dari sudut pandang paling sederhana, dengan gaya santai namun tetap teknis sehingga mudah dipahami oleh pemula. Kamu juga akan mempelajari bagaimana cara membuat script JavaScript pertama, bagaimana menulis kode yang benar, serta bagaimana memahami elemen dasar yang menyusun sebuah program JavaScript.
Daftar isi
Baca juga: Cara Menjalankan JavaScript di Browser
Apa Itu JavaScript dan Mengapa Struktur Dasar Penting?
JavaScript adalah bahasa pemrograman yang berjalan di browser dan sekarang juga dapat dijalankan di server menggunakan Node.js. Namun dalam tahap belajar pemula, fokus kita adalah memahami syntax JavaScript sebagai pondasi utama.
Mengapa struktur dasar harus dipelajari?
Karena:
- Tanpa memahami syntax, kamu akan mudah melakukan kesalahan kecil yang menyebabkan error fatal.
- Tanpa memahami statement dan expression, kamu akan bingung melihat kode orang lain.
- Tanpa memahami variabel dan fungsi, kamu tidak akan bisa membangun fitur yang lebih besar.
- Hampir semua konsep tingkat lanjut seperti DOM, asynchronous, API, hingga React atau Node.js dibangun di atas dasar ini.
Belajar dasar JavaScript adalah ibarat belajar alfabet sebelum menulis kalimat.
Cara Menulis Script JavaScript Pertama
Ada dua cara menulis kode JavaScript pada tahap awal:
1. Menulis langsung di dalam tag <script> pada HTML
Cara paling mudah untuk pemula.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar JavaScript</title>
</head>
<body>
<script>
console.log("Halo, JavaScript!");
</script>
</body>
</html>Code language: HTML, XML (xml)2. Menulis kode di file terpisah .js
Lebih rapi dan profesional.
script.js:
console.log("Halo dari file eksternal!");Code language: JavaScript (javascript)html:
<script src="script.js"></script>Code language: HTML, XML (xml)Kedua cara sama benar, tetapi untuk proyek sungguhan selalu gunakan file terpisah.
Struktur Dasar JavaScript yang Harus Dipahami Pemula
Diagram berikut membantu memahami susunan dasar JavaScript:
JavaScript Program
│
├── Variabel
│ └── Tempat menyimpan data
│
├── Tipe Data
│ └── Angka, teks, boolean, objek, array, dll
│
├── Operator
│ └── +, -, *, /, =, ===, &&, ||
│
├── Statement
│ └── Perintah lengkap dalam JavaScript
│
├── Expression
│ └── Ekspresi yang menghasilkan nilai
│
├── Function
│ └── Blok kode yang bisa dijalankan ulang
│
└── Control Flow
└── if, else, switch, loopCode language: JavaScript (javascript)Untuk tutorial kali ini, kita fokus pada struktur dasar paling fundamental, terutama variabel, tipe data, statement, expression, dan function.
1. Variabel JavaScript
Variabel adalah wadah untuk menyimpan data. Ada tiga cara dalam JavaScript modern:
let— variabel yang bisa berubahconst— variabel tetapvar— cara lama (hindari kecuali benar-benar perlu)
Contoh:
let umur = 20;
const pi = 3.14;
var nama = "Andi";Code language: JavaScript (javascript)Mengapa var tidak direkomendasikan? Karena var tidak memiliki block scope sehingga mudah menyebabkan bug.
2. Tipe Data dalam JavaScript
JavaScript memiliki tipe data dasar:
string– teksnumber– angkaboolean– true/falsenullundefinedobject– objekarray– daftar data
Contoh:
let nama = "Aris";
let usia = 25;
let aktif = true;
let alamat = null;
let pekerjaan;
let user = { nama: "Aris", umur: 25 };
let angka = [1, 2, 3, 4, 5];Code language: JavaScript (javascript)3. Operator dalam JavaScript
Operator digunakan untuk memanipulasi data.
Operator Aritmatika
let hasil = 10 + 5;Code language: JavaScript (javascript)Operator Perbandingan
let benar = 10 === 10; // trueCode language: JavaScript (javascript)Operator Logika
let hasil = true && false; // falseCode language: JavaScript (javascript)4. Statement dan Expression
Ini konsep yang sangat penting dalam syntax JavaScript.
Expression
Sesuatu yang menghasilkan nilai.
Contoh:
5 + 10
"Halo"
true
namaCode language: JavaScript (javascript)Statement
Perintah lengkap yang dieksekusi JavaScript.
Contoh:
let angka = 10;
console.log(angka);
if (angka > 5) { }Code language: JavaScript (javascript)Beda keduanya
| Expression | Statement |
|---|---|
| Menghasilkan nilai | Melakukan perintah |
| Bisa muncul di mana saja | Tidak selalu menghasilkan nilai |
5. Cara Membuat Function JavaScript
Fungsi adalah blok kode yang dapat dipanggil kapan saja.
Bentuk Dasar:
function sapa() {
console.log("Halo!");
}
sapa();Code language: JavaScript (javascript)Fungsi dengan Parameter:
function halo(nama) {
console.log("Halo, " + nama);
}
halo("Aris");Code language: JavaScript (javascript)Fungsi Modern (Arrow Function)
const tambah = (a, b) => {
return a + b;
};
console.log(tambah(5, 5));Code language: JavaScript (javascript)6. Cara Membuat Script JavaScript yang Benar
Berikut contoh struktur paling dasar yang menerapkan variabel, expression, statement, operator, dan function.
// membuat variabel
let nama = "Aris";
let usia = 22;
// membuat fungsi
function perkenalan() {
console.log("Halo, nama saya " + nama + " dan saya berusia " + usia + " tahun.");
}
// memanggil fungsi
perkenalan();
// expression
let nilai = 5 + 10;
// statement
if (nilai > 10) {
console.log("Nilai besar");
}Code language: JavaScript (javascript)Kode seperti ini sudah mencakup hampir semua elemen dasar JavaScript.
7. Cara Menulis Kode JavaScript yang Rapi dan Benar
Berikut aturan dasar yang penting untuk pemula:
- Gunakan indentasi 4 spasi Membuat kode mudah dibaca.
- Selalu gunakan let dan const const untuk nilai tetap, let untuk nilai berubah.
- Gunakan nama variabel yang jelas Hindari nama seperti a, b, data.
- Hindari kode dalam satu baris yang terlalu panjang Pisahkan agar lebih rapi.
- Gunakan komentar Komentar membantu memahami kode.
// menghitung luas lingkaran
const phi = 3.14;
let r = 7;
let luas = phi * r * r;Code language: JavaScript (javascript)8. Contoh Program JavaScript Pemula yang Lengkap
Berikut contoh mini program yang menunjukkan semua konsep dasar:
// variabel
let nama = "Aris";
let nilai1 = 80;
let nilai2 = 90;
// function
function hitungRataRata(a, b) {
let hasil = (a + b) / 2; // expression
return hasil;
}
// statement
let rata = hitungRataRata(nilai1, nilai2);
console.log("Rata-rata nilai " + nama + " adalah " + rata);
if (rata >= 85) {
console.log("Keterangan: Sangat Baik");
} else {
console.log("Keterangan: Baik");
}Code language: JavaScript (javascript)Untuk pemula, pemahaman seperti ini sudah lebih dari cukup sebelum masuk ke DOM atau Node.js.
Kesimpulan
Memahami struktur dasar JavaScript dan cara menulis kode JavaScript yang benar adalah fondasi utama sebelum kamu belajar DOM, event, asynchronous, API, atau framework modern seperti React dan Vue. Dengan memahami variabel, expression, statement, operator, dan fungsi, kamu sudah menguasai 70% konsep fundamental JavaScript.
Semakin kuat dasar yang kamu miliki, semakin cepat kamu berkembang menjadi developer JavaScript yang handal.
