MulaiCode
JavaScript

JS Cheat Sheet

Panduan komprehensif untuk JavaScript dalam bahasa Indonesia

JavaScript Cheat Sheet Lengkap

Panduan referensi JavaScript yang komprehensif dalam bahasa Indonesia untuk pengembang web.

Sintaks Dasar

// Komentar satu baris
/* Komentar
   multi-baris */
 
// Variabel
let variabel = "nilai"; // Lingkup blok, dapat diubah nilainya
const konstanta = 42; // Lingkup blok, tidak dapat diubah nilainya
var variabelLama = true; // Lingkup fungsi, hindari penggunaannya

Tipe Data

let teks = "tulisan";
let angka = 42;
let desimal = 3.14;
let boolean = true;
let nilaiNull = null;
let nilaiUndefined = undefined;
let array = [1, 2, 3];
let objek = { kunci: "nilai", angka: 42 };
let simbol = Symbol("deskripsi");
let bigInt = 9007199254740991n;

Operator

Aritmatika

let jumlah = 5 + 3; // 8
let selisih = 5 - 3; // 2
let hasil = 5 * 3; // 15
let pembagian = 5 / 3; // 1.6666...
let sisa = 5 % 3; // 2
let pangkat = 5 ** 3; // 125
let tambahSatu = ++jumlah; // Pre-increment
let kurangSatu = --jumlah; // Pre-decrement

Penugasan

x = y;
x += y; // x = x + y
x -= y; // x = x - y
x *= y; // x = x * y
x /= y; // x = x / y
x %= y; // x = x % y
x **= y; // x = x ** y

Perbandingan

a == b; // Sama dengan (dengan konversi tipe)
a === b; // Sama persis (tanpa konversi tipe)
a != b; // Tidak sama dengan
a !== b; // Tidak sama persis
a > b; // Lebih besar dari
a < b; // Lebih kecil dari
a >= b; // Lebih besar atau sama dengan
a <= b; // Lebih kecil atau sama dengan

Logika

a && b; // AND logis
a || b; // OR logis
!a; // NOT logis
a ?? b; // Nullish coalescing (operator koalisi nol)

Operator Ternary

kondisi ? ekspresi1 : ekspresi2;

Alur Kontrol

Pernyataan If

if (kondisi) {
  // kode
} else if (kondisiLain) {
  // kode
} else {
  // kode
}

Pernyataan Switch

switch (ekspresi) {
  case nilai1:
    // kode
    break;
  case nilai2:
    // kode
    break;
  default:
  // kode
}

Perulangan

// For loop standar
for (let i = 0; i < 5; i++) {
  // kode
}
 
// For...of untuk iterables
for (const item of array) {
  // kode untuk objek yang dapat diiterasi
}
 
// For...in untuk properti objek
for (const kunci in objek) {
  // kode untuk properti objek
}
 
// While loop
while (kondisi) {
  // kode
}
 
// Do...while loop
do {
  // kode
} while (kondisi);

Penanganan Kesalahan

try {
  // kode yang mungkin menimbulkan error
} catch (error) {
  // menangani error
} finally {
  // selalu dijalankan
}

Fungsi

Deklarasi & Ekspresi Fungsi

// Deklarasi fungsi
function tambah(a, b) {
  return a + b;
}
 
// Ekspresi fungsi
const kali = function (a, b) {
  return a * b;
};
 
// Fungsi panah
const bagi = (a, b) => a / b;

Parameter Fungsi

// Parameter default
function sapa(nama = "Tamu") {
  return `Halo, ${nama}!`;
}
 
// Parameter rest
function jumlahkan(...angka) {
  return angka.reduce((total, num) => total + num, 0);
}

IIFE (Immediately Invoked Function Expression)

(function () {
  // kode yang langsung dieksekusi
})();

Objek

Dasar Objek

// Literal objek
const orang = {
  nama: "Budi",
  umur: 30,
  sapa() {
    return `Halo, saya ${this.nama}`;
  },
};
 
// Mengakses properti
orang.nama; // Notasi titik
orang["nama"]; // Notasi kurung siku

Operasi Objek

// Destrukturisasi objek
const { nama, umur } = orang;
 
// Operator penyebaran (spread operator)
const salinOrang = { ...orang };
 
// Metode objek
Object.keys(orang); // ["nama", "umur", "sapa"]
Object.values(orang); // ["Budi", 30, ƒ]
Object.entries(orang); // [["nama", "Budi"], ["umur", 30], ["sapa", ƒ]]
Object.assign({}, orang, { kota: "Jakarta" });

Array

Dasar Array

// Pembuatan array
const buah = ["apel", "pisang", "jeruk"];
 
// Mengakses elemen
buah[0]; // "apel"

Metode Array

// Metode modifikasi
buah.push("anggur"); // Tambah di akhir
buah.pop(); // Hapus dari akhir
buah.unshift("lemon"); // Tambah di awal
buah.shift(); // Hapus dari awal
buah.splice(1, 1); // Hapus elemen
buah.slice(1, 2); // Salin bagian array
 
// Metode iterasi
buah.forEach((item) => console.log(item));
const buahKapital = buah.map((item) => item.toUpperCase());
const buahPanjang = buah.filter((item) => item.length > 5);
const semuaPanjang = buah.every((item) => item.length > 3);
const adaPanjang = buah.some((item) => item.length > 5);
const buahDitemukan = buah.find((item) => item === "apel");
const indeksBuah = buah.findIndex((item) => item === "apel");
 
// Reducer
const totalPanjang = buah.reduce((sum, item) => sum + item.length, 0);

Operasi Array

// Destrukturisasi array
const [pertama, kedua, ...sisanya] = buah;
 
// Sintaks penyebaran (spread syntax)
const buahLebih = [...buah, "ceri"];

Kelas

Definisi Kelas

class Orang {
  constructor(nama, umur) {
    this.nama = nama;
    this.umur = umur;
  }
 
  static spesies = "Manusia";
 
  get info() {
    return `${this.nama}, ${this.umur} tahun`;
  }
 
  set namaLengkap(nilai) {
    [this.nama, this.namaBelakang] = nilai.split(" ");
  }
 
  sapa() {
    return `Halo, saya ${this.nama}`;
  }
 
  static buatAnonym() {
    return new Orang("Anonim", 0);
  }
}

Pewarisan (Inheritance)

class Karyawan extends Orang {
  constructor(nama, umur, pekerjaan) {
    super(nama, umur);
    this.pekerjaan = pekerjaan;
  }
 
  sapa() {
    return `${super.sapa()}. Saya bekerja sebagai ${this.pekerjaan}`;
  }
}

JavaScript Asinkron

Promise

// Membuat Promise
const janji = new Promise((resolve, reject) => {
  // Operasi asinkron
  if (sukses) {
    resolve(nilai);
  } else {
    reject(error);
  }
});
 
// Menggunakan Promise
janji
  .then((hasil) => console.log(hasil))
  .catch((error) => console.error(error))
  .finally(() => console.log("Selesai"));
 
// Metode Promise
Promise.all([janji1, janji2]); // Semua berhasil atau satu gagal
Promise.allSettled([janji1, janji2]); // Tunggu semua selesai
Promise.race([janji1, janji2]); // Yang pertama selesai
Promise.any([janji1, janji2]); // Yang pertama berhasil

Async/Await

async function ambilData() {
  try {
    const respon = await fetch("https://api.contoh.com/data");
    const data = await respon.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

Modul

Mengekspor (Export)

// Mengekspor
export const PI = 3.14159;
export function kuadrat(x) {
  return x * x;
}
export default class Kalkulator {
  /* ... */
}

Mengimpor (Import)

// Mengimpor
import { PI, kuadrat } from "./matematika.js";
import Kalkulator from "./matematika.js";
import * as matematika from "./matematika.js";

Manipulasi DOM

Memilih Elemen

// Metode selector
const elemen = document.getElementById("id");
const elemen = document.getElementsByClassName("kelas");
const elemen = document.getElementsByTagName("div");
const elemen = document.querySelector(".kelas");
const elemen = document.querySelectorAll("div.kelas");

Memodifikasi Elemen

// Konten & atribut
elemen.textContent = "Teks baru";
elemen.innerHTML = "<span>Konten HTML</span>";
elemen.setAttribute("atribut", "nilai");
elemen.style.color = "merah";
 
// Kelas CSS
elemen.classList.add("kelas-baru");
elemen.classList.remove("kelas-lama");
elemen.classList.toggle("aktif");

Manipulasi DOM

// Membuat & menambahkan elemen
const elemenBaru = document.createElement("div");
elemen.appendChild(elemenBaru);
elemen.insertBefore(elemenBaru, elemenReferensi);
elemen.removeChild(elemenAnak);
elemen.replaceChild(elemenBaru, elemenLama);

Events

// Penanganan events
elemen.addEventListener("click", tanganiKlik);
elemen.removeEventListener("click", tanganiKlik);
 
function tanganiKlik(event) {
  event.preventDefault();
  event.stopPropagation();
}

Storage

Web Storage

// Local Storage (tersimpan permanen)
localStorage.setItem("kunci", "nilai");
const nilai = localStorage.getItem("kunci");
localStorage.removeItem("kunci");
localStorage.clear();
 
// Session Storage (tersimpan selama sesi)
sessionStorage.setItem("kunci", "nilai");
const nilai = sessionStorage.getItem("kunci");
sessionStorage.removeItem("kunci");
sessionStorage.clear();

Cookies

// Menyimpan cookie
document.cookie = "nama=nilai; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";
 
// Membaca cookie
const cookies = document.cookie;

JSON

// Mengubah objek ke string JSON
const jsonString = JSON.stringify(objek);
 
// Mengubah string JSON ke objek
const objek = JSON.parse(jsonString);

Regular Expressions

// Membuat Regex
const regex = /pola/gi;
const regexObj = new RegExp("pola", "gi");
 
// Metode Regex
regex.test(string); // Boolean
regex.exec(string); // Array atau null
string.match(regex); // Array atau null
string.replace(regex, "pengganti");
string.search(regex); // Index atau -1
string.split(regex); // Array

Tanggal dan Waktu

// Membuat objek Date
const sekarang = new Date();
const tanggalSpesifik = new Date("2023-05-12");
const tanggalWaktuSpesifik = new Date(2023, 4, 12, 14, 30, 0);
 
// Metode Date
sekarang.getFullYear(); // 2023
sekarang.getMonth(); // 0-11 (Jan-Des)
sekarang.getDate(); // 1-31
sekarang.getDay(); // 0-6 (Min-Sab)
sekarang.getHours(); // 0-23
sekarang.getMinutes(); // 0-59
sekarang.getSeconds(); // 0-59
sekarang.getTime(); // timestamp (milidetik)
 
// Format tanggal internasional
sekarang.toLocaleDateString("id-ID");
sekarang.toLocaleTimeString("id-ID");
sekarang.toLocaleString("id-ID");

Set dan Map

Set

// Membuat Set (kumpulan nilai unik)
const set = new Set([1, 2, 3, 3]); // {1, 2, 3}
 
// Metode Set
set.add(4); // Menambah nilai
set.has(2); // Memeriksa nilai
set.delete(3); // Menghapus nilai
set.size; // Ukuran Set
set.clear(); // Mengosongkan Set
 
// Iterasi Set
for (const nilai of set) {
  console.log(nilai);
}

Map

// Membuat Map (kumpulan pasangan kunci-nilai)
const map = new Map([
  ["kunci1", "nilai1"],
  ["kunci2", "nilai2"],
]);
 
// Metode Map
map.set("kunci3", "nilai3"); // Menambah entri
map.get("kunci1"); // Mengambil nilai
map.has("kunci2"); // Memeriksa kunci
map.delete("kunci1"); // Menghapus entri
map.size; // Ukuran Map
map.clear(); // Mengosongkan Map
 
// Iterasi Map
for (const [kunci, nilai] of map) {
  console.log(kunci, nilai);
}

Panduan Praktik Terbaik

  • Gunakan const kecuali Anda perlu mengubah nilai variabel, dalam hal tersebut gunakan let
  • Hindari penggunaan var karena dapat menyebabkan masalah lingkup
  • Selalu gunakan operator perbandingan ketat (=== dan !==)
  • Gunakan fitur ES6+ seperti arrow function, destructuring, dan spread operator
  • Gunakan Promise atau async/await untuk kode asinkron daripada callback
  • Hindari variabel global dan polusi namespace global
  • Perhatikan kebersihan memory dengan menutup event listener dan interval yang tidak diperlukan
  • Selalu tangani error dengan try-catch pada operasi yang mungkin gagal
  • Gunakan destructuring untuk mengekstrak properti dari objek dan array
  • Gunakan template literals untuk string yang mengandung variabel