VORTEX.DEV — Programming Core

// 00 — INDEX

APA YANG
BAKAL LO
PELAJARI

// 15 VORTEX konsep — from zero to core

01

VARIABLES

→

02

DATA TYPES

→

03

OPERATORS

→

04

CONTROL FLOW

→

05

LOOPS

→

06

FUNCTIONS

→

07

ARRAYS

→

08

OBJECTS

→

09

RECURSION

→

10

OOP

→

11

ERROR HANDLING

→

12

ASYNC / ASYNC

→

13

ALGORITHMS

→

14

BIG O

→

15

MEMORY

→

// 01 — VARIABLES

VARIABEL
& SCOPE

// tempat nyimpen data di memori

VAR / LET / CONST

VARIABLE

// storage container

Variable adalah kotak berlabel di memori komputer. Lo kasih nama kotaknya, terus isi dengan data. Kapanpun butuh data itu, tinggal panggil nama kotaknya — komputer langsung tau mau ambil dari mana.

// analogi

Bayangin lo punya laci meja belajar. Lo tulis label di laci: "uang_jajan". Lo masukin Rp50.000. Setiap mau belanja, lo buka laci "uang_jajan" — lo ga perlu inget fisik uangnya ada di mana, cukup inget nama lacinya.

let uang_jajan = 50000; // bisa diubah const nama = "Radit-DVC"; // ga bisa diubah var legasi = "hindari"; // old school uang_jajan = uang_jajan - 15000; // beli makan // uang_jajan sekarang: 35000

SCOPE

// jangkauan variabel

Scope adalah wilayah kekuasaan sebuah variabel. Variable yang dideklarasi di dalam fungsi, cuma bisa diakses di dalam fungsi itu. Di luar? Tidak ada, tidak dikenal.

// analogi

Variable di dalam fungsi itu kayak secret menu restoran — cuma orang yang ada di dapur (dalam fungsi) yang tau ada. Pelanggan di luar (kode global) ga bisa order menu itu.

let global = "semua bisa akses"; function dapur() { let resep = "rahasia"; // local scope console.log(global); // ✅ bisa } console.log(resep); // ❌ ReferenceError

// 02 — DATA TYPES

JENIS
DATA

// tipe wadah yang berbeda untuk isi yang berbeda

PRIMITIVE

STRING

// teks / karakter

Kumpulan karakter yang diapit tanda kutip. Mau nulis kata, kalimat, atau emoji — itu semua string.

// analogi

String kayak nametag — bisa isinya nama, nomor HP, apapun yang ditulis sebagai teks.

let nama = "Radit-DVC"; let kalimat = `Halo ${nama}!`;

PRIMITIVE

NUMBER

// angka integer & float

Semua angka — bulat maupun desimal. Bisa dioprasikan: plus, kurang, kali, bagi.

// analogi

Number kayak timbangan digital — bisa nampilin 5 kg atau 5.75 kg, tapi bukan "lima kilogram" (itu string).

let umur = 17; let pi = 3.14; let inf = Infinity;

PRIMITIVE

BOOLEAN

// true / false only

Cuma dua nilai: true atau false. Titik. Tidak ada abu-abu di sini.

// analogi

Boolean kayak saklar lampu — cuma ada nyala (true) atau mati (false). Ga ada "setengah nyala".

let sudahMakan = true; let sudahTidur = false; let lapar = !sudahMakan;

SPECIAL

NULL

// sengaja dikosongkan

Nilai yang sengaja dikosongkan. Beda sama kosong karena ga diisi — ini emang ditulis kosong secara eksplisit.

// analogi

Null kayak piring kosong yang sengaja lo taruh di meja — emang mau kosong, bukan lupa isi.

let pacar = null; // sengaja null, bukan lupa

SPECIAL

UNDEFINED

// belum diisi / ga ada

Variable yang dideklarasi tapi belum diisi nilainya. JavaScript sendiri yang kasih status ini.

// analogi

Undefined kayak laci yang ada labelnya tapi dalamnya ga ada apa-apa karena lo lupa isi. Beda sama null yang emang sengaja dikosongkan.

let x; console.log(x); // undefined

COMPLEX

OBJECT

// kumpulan key-value

Tipe data kompleks yang bisa nyimpen banyak nilai sekaligus dalam format key-value.

// analogi

Object kayak KTP — satu dokumen yang nyimpen banyak info: nama, NIK, TTL, alamat. Semua tentang satu entitas.

let user = { nama: "Radit-DVC", umur: 17, dev: true };

// 03 — OPERATORS

OPERATOR
& EKSPRESI

// simbol yang melakukan operasi pada data

ARITHMETIC

ARITMATIKA

// matematika dasar

Operator untuk operasi hitung: +, -, *, /, %, **. Persis kayak kalkulator biasa, tapi ada tambahan: modulo (sisa bagi) dan eksponen.

// analogi

% (modulo) kayak lo bagi 10 permen ke 3 orang — hasilnya 1 sisa. Itu yang dikembalikan modulo. Berguna banget buat cek angka ganjil/genap.

10 % 3 // → 1 (sisa bagi) 2 ** 8 // → 256 (2 pangkat 8) 7 % 2 === 0 // → false (ganjil)

COMPARISON

PERBANDINGAN

// membandingkan dua nilai

Operator yang hasilnya selalu boolean: ===, !==, >, <, >=, <=. Gunakan selalu === (strict equality), bukan == yang bisa misleading.

// analogi

== kayak nanya "isi tas sama ga?" — dua tas beda tapi sama isinya dianggap sama. === kayak nanya "ini tas yang persis sama atau beda?" — beda tas tetap beda meski isinya sama.

5 == "5" // → true ⚠️ dangerous 5 === "5" // → false ✅ correct 10 > 5 // → true

// 04 — CONTROL FLOW

ALUR
KONTROL

// percabangan logika program

IF / ELSE IF / ELSE

PERCABANGAN

// decision making machine

Program butuh membuat keputusan — "kalau ini terjadi, lakukan A; kalau itu, lakukan B; kalau tidak ada yang cocok, lakukan C." Itulah if-else.

// analogi

Bayangkan lo ada di persimpangan jalan. Ada papan rambu: "Kalau hujan → belok kiri ke warung", "Kalau terik → jalan lurus ke kolam renang", "Kalau ga ada keduanya → pulang." Program lo pun begitu — tiap kondisi punya jalurnya sendiri.

let cuaca = "hujan"; if (cuaca === "hujan") { console.log("ke warung"); } else if (cuaca === "terik") { console.log("ke kolam renang"); } else { console.log("pulang aja"); }

SWITCH

// multi-case cleaner

Alternatif if-else kalau lo punya banyak kondisi dari satu variabel yang sama. Lebih rapi dan readable.

// analogi

Switch kayak mesin vending — lo pilih angka 1, dapat air; angka 2, dapat snack; angka lain, ga ada yang keluar. Setiap "case" adalah satu pilihan yang valid.

switch(hari) { case "Senin": console.log("Mager"); break; case "Jumat": console.log("Hore"); break; default: console.log("Biasa aja"); }

TERNARY

// if-else satu baris

Cara singkat nulis if-else dalam satu ekspresi. Format: kondisi ? nilaiBenar : nilaiSalah.

// analogi

Ternary kayak lo nanya ke temen: "Mau nasi goreng apa mie goreng?" — dua pilihan, satu jawaban. Ringkas, cepat, no drama.

let umur = 17; let status = umur >= 18 ? "dewasa" : "minor"; // status = "minor"

// 05 — LOOPS

LOOP &
ITERASI

// ulangi aksi tanpa nulis berulang

FOR LOOP

FOR

// loop dengan counter

Loop paling umum. Lo tau persis mau loop berapa kali.

// analogi

Kayak mesin cuci yang lo set 5 putaran — dia muter persis 5x, lalu berhenti. Terstruktur dan terprediksi.

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

WHILE LOOP

WHILE

// loop sampai kondisi false

Loop yang jalan selama kondisi masih true. Hati-hati — salah kondisi bisa infinite loop.

// analogi

Kayak lo ngantri ATM — lo terus nunggu selama antrian masih ada. Begitu antrian habis, lo jalan.

let antrian = 5; while (antrian > 0) { console.log("Nunggu..."); antrian--; }

FOR...OF / MAP

ITERASI

// loop modern di array

Cara modern iterasi array. .forEach, .map, .filter lebih clean dari for biasa.

// analogi

Kayak lo punya konveyor sushi — tiap piring (elemen) lewat, lo lakuin sesuatu. Ga perlu hitung sendiri ada berapa piring.

const menu = ["nasi", "mie", "soto"]; menu.forEach(m => { console.log("Masak:", m); }); const mahal = menu.map(m => m + " spesial");

// 06 — FUNCTIONS

FUNGSI
& CLOSURE

// blok kode yang bisa dipanggil berulang kali

FUNCTION DECLARATION

FUNGSI

// reusable code block

Fungsi adalah resep masakan yang bisa dipakai berulang. Tulis sekali, panggil berkali-kali dengan bahan (argumen) berbeda.

// analogi

Chef punya resep bikin nasi goreng: input → bahan-bahan, proses → masak, output → nasi goreng jadi. Resepnya ga berubah, tapi bahannya bisa beda tiap sesi masak.

function masakNasiGoreng(bahan, level) { return `${bahan} goreng level ${level}`; } masakNasiGoreng("ayam", 3); // → "ayam goreng level 3"

CLOSURE

// fungsi yang ingat scope asalnya

Closure adalah fungsi yang mengingat variabel dari scope luar-nya bahkan setelah fungsi luar selesai dieksekusi. Konsep penting banget di JavaScript.

// analogi

Kayak lo kerja di kafe terus resign, tapi masih inget resep rahasia di sana. Fungsi dalam "mengingat" lingkungan tempat dia lahir, meski lingkungan itu udah "tutup."

function bikinCounter() { let count = 0; return function() { count++; return count; }; } const counter = bikinCounter(); counter(); // → 1 counter(); // → 2

ARROW FUNCTIONS

ARROW FUNCTION

// sintaks ringkas ES6+

Cara penulisan fungsi yang lebih pendek. Perbedaan utama: tidak punya "this" sendiri — dia pakai "this" dari scope sekitarnya.

// analogi

Arrow function kayak asisten yang ga punya ego sendiri — dia merujuk ke bos-nya (scope luar) untuk identitas. Fungsi biasa punya identitas sendiri, arrow function ngikut siapa yang memanggil.

// Function biasa function tambah(a, b) { return a + b; } // Arrow function — lebih ringkas const tambah = (a, b) => a + b; // Dengan satu parameter — ga butuh kurung const kuadrat = n => n * n; // Dengan body — butuh return eksplisit const salam = nama => { const pesan = `Halo, ${nama}!`; return pesan; };

// 07 — ARRAYS

ARRAY
& METHOD

// list data yang terurut

ARRAY BASICS

ARRAY

// rak buku bernomor

Array adalah daftar terurut dari nilai-nilai. Diakses pakai indeks angka mulai dari 0. Penting: indeks dimulai dari NOL, bukan satu.

// analogi

Array kayak rak buku di perpustakaan yang sudah dinomerin. Buku pertama ada di nomor 0, kedua di nomor 1. Mau ambil buku, tinggal sebut nomornya.

const buku = ["Fiksi", "Sains", "Tech"]; buku[0]; // → "Fiksi" buku[2]; // → "Tech" buku.length; // → 3 buku.push("Art"); // tambah di akhir

ARRAY METHODS

FILTER / MAP / REDUCE

// trio paling powerful

Tiga method paling sering dipakai di dunia nyata: filter → saring, map → transformasi, reduce → gabungkan jadi satu nilai.

// analogi

Filter kayak KPU — hanya loloskan yang memenuhi syarat. Map kayak pabrik — ubah tiap bahan baku jadi produk jadi. Reduce kayak kasir — totalkan semua belanjaan jadi satu angka.

const nilai = [45, 78, 90, 55, 88]; // Filter: ambil yang lulus (≥60) const lulus = nilai.filter(n => n >= 60); // [78, 90, 88] // Map: tambah bonus 5 poin const bonus = nilai.map(n => n + 5); // Reduce: total semua nilai const total = nilai.reduce((acc, n) => acc + n, 0); // 356

// 08 — OBJECTS

OBJECT
& PROPERTY

// blueprint data terstruktur

OBJECT LITERAL

OBJECT

// key-value data structure

Object adalah koleksi key-value pairs. Key adalah nama properti, value adalah nilainya. Value bisa berupa tipe data apapun — termasuk fungsi dan array.

// analogi

Object kayak profil karakter game RPG — satu karakter punya nama, level, HP, inventory (array), dan skill (fungsi). Semuanya tergabung dalam satu entitas yang terorganisir.

// 09 — RECURSION

REKURSI
AKA LOOP
YG FILOSOFIS

// fungsi yang memanggil dirinya sendiri

RECURSIVE FUNCTION

RECURSION

// diri sendiri → diri sendiri → diri sendiri

Rekursi adalah teknik di mana sebuah fungsi memanggil dirinya sendiri sampai mencapai kondisi berhenti (base case). Tanpa base case, rekursi jalan terus sampai crash.

// analogi

Bayangkan lo berdiri di antara dua cermin yang berhadapan. Lo liat bayangan lo, di dalam bayangan itu ada bayangan lagi, di dalamnya lagi, terus-terusan. Rekursi begitu — tapi dia harus punya titik berhenti sebelum jadi infinite. Base case-nya: cermin terakhir yang ga memantul lagi.

// Faktorial: 5! = 5×4×3×2×1 function faktorial(n) { // Base case — titik berhenti WAJIB ADA if (n <= 1) return 1; // Recursive case — panggil diri sendiri return n * faktorial(n - 1); } faktorial(5); // 5 × faktorial(4) // 5 × 4 × faktorial(3) // 5 × 4 × 3 × faktorial(2) // 5 × 4 × 3 × 2 × 1 = 120

Rekursi powerful tapi bisa lebih lambat dari loop biasa karena setiap pemanggilan nyimpen state di call stack. Untuk data besar, pertimbangkan iterasi atau tail recursion optimization.

// 10 — OOP

OBJECT
ORIENTED
PROGRAMMING

// paradigma program berbasis objek

CLASS & INSTANCE

CLASS

// cetakan / blueprint

Class adalah blueprint. Dari satu class, lo bisa bikin banyak objek dengan struktur yang sama tapi data berbeda.

// analogi

Class kayak cetakan kue — cetakannya satu, tapi lo bisa bikin puluhan kue dari cetakan itu. Tiap kue (instance) sama bentuknya, tapi bisa beda topping (properti).

class Karakter { constructor(nama, level) { this.nama = nama; this.level = level; this.hp = level * 100; } info() { return `${this.nama} Lv.${this.level}`; } } const hero = new Karakter("Radit-DVC", 50); const villain = new Karakter("boss", 99);

INHERITANCE

// mewarisi sifat class induk

Class bisa mewarisi properti dan method dari class lain. Child class dapat semua dari parent, plus bisa tambahin fitur sendiri.

// analogi

Kayak subclass anak dari orang tua. Lo dapat gen dan sifat dasar dari orang tua (napas, jantung), tapi lo juga punya keunikan sendiri (bisa coding, suka nge-game).

class Mage extends Karakter { constructor(nama, level) { super(nama, level); // panggil parent this.mana = 500; } sihir() { return `${this.nama} cast fireball!`; } } const mage = new Mage("Aria", 45); mage.info(); // ✅ dari parent mage.sihir(); // ✅ milik sendiri

// 11 — ERROR HANDLING

ERROR
HANDLING

// nangkep error sebelum crash app lo

TRY / CATCH / FINALLY

TRY-CATCH

// jaring pengaman akrobat

Kode yang mungkin gagal dibungkus di blok try. Kalau gagal, eksekusi langsung lompat ke catch. Blok finally selalu jalan, berhasil atau gagal sekalipun.

// analogi

Bayangin akrobat di sirkus. Try = dia coba aksi berbahaya. Catch = jaring pengaman kalau dia jatuh (program ga langsung crash, tapi handle error-nya). Finally = musik tetap main apapun yang terjadi — show must go on.

async function fetchData(url) { try { const res = await fetch(url); if (!res.ok) { throw new Error(`HTTP error: ${res.status}`); } const data = await res.json(); return data; } catch (error) { console.error("Gagal fetch:", error.message); return null; // graceful fallback } finally { console.log("Selesai — berhasil atau gagal"); } }

// 12 — ASYNCHRONOUS

ASYNC
AWAIT
& PROMISE

// handle operasi yang butuh waktu

PROMISE

// janji yang akan terpenuhi

Promise adalah objek yang merepresentasikan operasi yang belum selesai. State-nya: pending → fulfilled atau rejected.

// analogi

Promise kayak struk nomor antrian ojol — driver udah di-assign (promise dibuat), tapi makanannya belum datang. Nanti bisa .then (makanan sampai) atau .catch (dibatalkan).

const orderMakanan = new Promise((resolve, reject) => { setTimeout(() => { const berhasil = true; if (berhasil) resolve("nasi goreng tiba!"); else reject("order dibatalkan"); }, 2000); }); orderMakanan .then(msg => console.log(msg)) .catch(err => console.log(err));

ASYNC / AWAIT

ASYNC/AWAIT

// promise tapi lebih manusiawi

Sintaks modern yang bikin async code kelihatan kayak synchronous. Lebih mudah dibaca dan di-debug.

// analogi

Async/await kayak lo ngobrol santai: "Oke, gua tunggu dulu makanannya (await), baru gua makan." Bukan kayak callback hell yang kayak nenek-nenek cerita bercabang tanpa ujung.

async function ambilUserData(id) { // await = tunggu sampai selesai const user = await fetchUser(id); const posts = await fetchPosts(user.id); const likes = await fetchLikes(posts); return { user, posts, likes }; } // Run parallel — lebih cepat const [a, b] = await Promise.all([taskA(), taskB()]);

// 13 — ALGORITHMS

ALGORITMA
DASAR

// langkah-langkah terstruktur menyelesaikan masalah

SEARCHING

BINARY SEARCH

// cari data sorted

Cari data di list sorted dengan cara terus belah dua. Jauh lebih cepat dari cek satu-satu.

// analogi

Cari kata di kamus — lo ga mulai dari halaman 1. Lo buka tengah, cek: lebih awal atau lebih belakang? Terus belah. Kata "Zebra" ketemu tanpa baca semua kamus.

function binarySearch(arr, target) { let lo = 0, hi = arr.length - 1; while (lo <= hi) { let mid = Math.floor((lo+hi)/2); if (arr[mid] === target) return mid; if (arr[mid] < target) lo = mid+1; else hi = mid-1; } return -1; }

SORTING

BUBBLE SORT

// sorting paling simpel

Bandingkan dua elemen bersebelahan, swap kalau salah urutan. Ulangi sampai semua urut. O(n²) — lambat, tapi gampang dipahami.

// analogi

Kayak ngantri yang ga rapi — lo minta satu-satu: "Lho, lo lebih tinggi, tukar tempat dulu." Pelan, tapi akhirnya rapi.

function bubbleSort(arr) { for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr.length-i-1; j++) { if (arr[j] > arr[j+1]) { [arr[j], arr[j+1]] = [arr[j+1], arr[j]]; } } } return arr; }

DIVIDE & CONQUER

MERGE SORT

// sorting lebih efisien

Bagi array jadi dua, sort masing-masing, lalu gabung. O(n log n) — jauh lebih cepat dari bubble sort untuk data besar.

// analogi

Kayak sortir kartu di kasino — bagi dua tumpukan, sortir masing-masing, lalu gabung dengan bandingkan kartu teratas satu-satu. Lebih cepat dari sortir satu tumpukan besar.

// Divide → Conquer → Merge function mergeSort(arr) { if (arr.length <= 1) return arr; const mid = Math.floor(arr.length/2); const L = mergeSort(arr.slice(0, mid)); const R = mergeSort(arr.slice(mid)); return merge(L, R); }

// 14 — BIG O NOTATION

BIG O
NOTATION

// ukuran efisiensi algoritma

TIME COMPLEXITY

// seberapa lambat kode lo seiring data membesar

Big O mendeskripsikan bagaimana waktu eksekusi tumbuh seiring ukuran input bertambah. Bukan ngukur detik — tapi pola pertumbuhannya.

// analogi

Bayangin lo cari kunci yang hilang. O(1): lo tau persis kunci ada di saku kiri — langsung ketemu. O(n): lo cek tiap saku satu-satu. O(n²): lo cek tiap saku, dan tiap saku punya saku lagi yang harus dicek. O(log n): buku telepon — lo langsung belah ke tengah, bukan cek satu-satu.

O(1)

CONSTANT

// selalu sama cepatnya

Waktu eksekusi tidak berubah meski data makin besar. Ini yang ideal.

// Akses array by index = O(1) const x = arr[0]; // langsung const y = arr[999]; // sama cepatnya

O(n) / O(n²)

LINEAR / QUADRATIC

// tumbuh seiring data

O(n): satu loop. O(n²): loop di dalam loop. Makin besar data, makin kerasa bedanya.

// O(n) — satu loop arr.forEach(x => console.log(x)); // O(n²) — nested loop for (let i of arr) for (let j of arr) console.log(i, j);

// 15 — MEMORY MANAGEMENT

MANAJEMEN
MEMORI

// gimana data hidup dan mati di RAM

STACK & HEAP

STACK

// memori terstruktur, cepat

Stack menyimpan primitive values dan referensi. Bekerja seperti tumpukan piring — LIFO (Last In, First Out). Otomatis dibersihkan saat fungsi selesai.

// analogi

Stack kayak meja kerja lo — lo taruh buku yang lagi dipake di atas meja. Selesai, lo singkir. Meja selalu bersih otomatis setelah kerja. Terstruktur, cepat, terbatas ukurannya.

function a() { let x = 1; // push ke stack b(); } // x di-pop otomatis function b() { let y = 2; // push ke stack } // y di-pop otomatis

HEAP & GC

// memori dinamis + garbage collector

Object dan array disimpan di Heap — memori yang lebih besar dan dinamis. Garbage Collector (GC) otomatis bersihkan data yang udah ga dipakai.

// analogi

Heap kayak gudang besar tempat lo simpen barang-barang berat (object). GC kayak petugas kebersihan yang secara berkala ngecek: "ada ga barang yang ga ada yang pake?" Kalau ada, dibuang.

// Object masuk heap let user = { nama: "Radit-DVC" }; // Hapus referensi → GC bisa beresin user = null; // Memory leak — referensi ga pernah hapus const cache = {}; // ⚠️ terus diisi, ga pernah dibersihkan

PROGRAMMING DARI NOLNYA

APA YANGBAKAL LOPELAJARI

VARIABEL& SCOPE

JENISDATA

OPERATOR& EKSPRESI

ALURKONTROL

LOOP &ITERASI

FUNGSI& CLOSURE

ARRAY& METHOD

OBJECT& PROPERTY

REKURSIAKA LOOPYG FILOSOFIS

OBJECTORIENTEDPROGRAMMING

ERRORHANDLING

ASYNCAWAIT& PROMISE

ALGORITMADASAR

BIG ONOTATION

MANAJEMENMEMORI

APA YANG
BAKAL LO
PELAJARI

VARIABEL
& SCOPE

JENIS
DATA

OPERATOR
& EKSPRESI

ALUR
KONTROL

LOOP &
ITERASI

FUNGSI
& CLOSURE

ARRAY
& METHOD

OBJECT
& PROPERTY

REKURSI
AKA LOOP
YG FILOSOFIS

OBJECT
ORIENTED
PROGRAMMING

ERROR
HANDLING

ASYNC
AWAIT
& PROMISE

ALGORITMA
DASAR

BIG O
NOTATION

MANAJEMEN
MEMORI