JavaScript Basic Syntax Demo

📌 Elements

💡 Fundamental JavaScript

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web interaktif. Memahami sintaks dasar adalah kunci untuk menguasai JavaScript.

basic.js

          
            // Variabel dan Tipe Data

            let nama = 'Budi'; // String

            const umur = 25; // Number

            let aktif = true; // Boolean

            // Array

            const buah = ['Apel', 'Mangga', 'Jeruk'];

            // Object

            const user = {

              nama: 'Budi',

              umur: 25,

              aktif: true

            };

📝 Penjelasan Detail:

• let - Variabel yang bisa diubah nilainya
• const - Konstanta yang tidak bisa diubah setelah dideklarasikan
• // - Komentar untuk penjelasan kode
• [] - Array untuk menyimpan koleksi data
• {} - Object untuk menyimpan data dalam properti

🛠️ Features

functions.js

          
            // Function Declaration

            function sapa(nama) {

              return `Halo, ${nama}!`;

            }

            // Function Expression

            const tambah = function(a, b) {

              return a + b;

            };

            // Arrow Function (ES6)

            const kali = (a, b) => a * b;

            // Pemanggilan Fungsi

            const hasil = tambah(5, 3); // 8

ℹ️ Fitur ES6+

ES6 (2015) memperkenalkan fitur modern seperti arrow functions, template literals, let/const, dan banyak lagi. Didukung oleh semua browser modern.

📊 Basic Tables

operators.js

          
            // Operator Aritmatika

            let x = 10 + 5; // 15

            let y = 10 % 3; // 1 (modulus)

            // Operator Perbandingan

            let sama = 10 == '10'; // true (loose equality)

            let identik = 10 === '10'; // false (strict equality)

            // Operator Logika

            let hasil = (10 > 5) && (20 > 15); // true

            let hasil2 = !true; // false

📝 Penjelasan Detail:

• Aritmatika: +, -, *, /, %, ** (pangkat)
• Perbandingan: ==, ===, !=, !==, >, <, >=, <=
• Logika: && (AND), || (OR), ! (NOT)
• === lebih disarankan daripada == untuk menghindari type coercion

🚀 Advanced Table

control-flow.js

          
            // Kondisi if-else

            if (umur >= 18) {

              console.log('Dewasa');

            } else {

              console.log('Anak-anak');

            }

            // Switch Case

            switch(buah) {

              case 'Apel':

                console.log('Ini apel');

                break;

              case 'Mangga':

                console.log('Ini mangga');

                break;

              default:

                console.log('Buah lain');

            }

            // Looping

            for(let i = 0; i < 5; i++) {

              console.log(i);

            }

ℹ️ Modern JavaScript

ES6+ memperkenalkan banyak fitur baru seperti template literals, destructuring, spread operator, dan async/await yang membuat kode lebih efisien.

💡 Pro Tips

🎯 Best Practices

Gunakan const sebanyak mungkin, hindari var, berikan nama variabel/fungsi yang deskriptif, dan gunakan ESLint untuk konsistensi kode.

best-practices.js

          
            // ✅ Good - Clean and readable

            const calculateTotal = (price, quantity) => {

              return price * quantity;

            };

            // ❌ Avoid - Unclear naming

            function calc(a, b) {

              return a * b;

            }

            // ✅ Good - Template literals

            const greeting = `Halo, ${nama}. Umur Anda ${umur} tahun.`;

            // ❌ Avoid - String concatenation

            const greeting2 = 'Halo, ' + nama + '. Umur Anda ' + umur + ' tahun.';

📝 Penjelasan Detail:

• Gunakan const kecuali variabel perlu diubah
• Nama deskriptif untuk variabel dan fungsi
• Template literals lebih mudah dibaca daripada concatenation
• ESLint/Prettier untuk konsistensi gaya kode
• Komunikasikan intent melalui penamaan yang baik

🌐 Info

📚 Sumber Belajar

MDN Web Docs, JavaScript.info, Eloquent JavaScript, dan dokumentasi resmi ECMAScript adalah sumber terbaik untuk mempelajari JavaScript lebih dalam.

⚡ Versi JavaScript

ES6 (2015) adalah pembaruan besar terakhir. ECMAScript merilis versi baru setiap tahun (ES2016, ES2017, dst) dengan fitur tambahan.