Front-End & Back-End Development 1

Modul 1 JavaScript Lanjutan & Object-Oriented Programming

Pada modul ini, Anda akan mempelajari bagaimana mengelola dan membangun program yang semakin kompleks menggunakan pendekatan JavaScript modern. Ketika sebuah aplikasi mulai berkembang, jumlah function, alur data, dan potensi bug biasanya meningkat secara signifikan. Di sinilah Anda membutuhkan fondasi yang kuat agar kode tetap rapi, terstruktur, dan mudah dikembangkan. Modul ini membantu Anda memahami konsep-konsep penting yang menjadi dasar seorang backend developer profesional, sekaligus memberi Anda panduan praktis untuk menerapkannya.

Bayangkan Anda membangun aplikasi dengan ratusan function dan ribuan baris kode tanpa struktur yang jelas. Kondisi ini dapat membuat kode sulit dipahami dan rawan kesalahan. Dengan menggunakan pendekatan OOP dan fitur modern seperti ES6+, Anda dapat menyusun kode agar lebih teratur, mudah digunakan kembali (reusable), serta lebih mudah dirawat seiring pertumbuhan proyek.

Modul ini dirancang untuk menjadi jembatan bagi Anda dari JavaScript dasar menuju praktik penulisan kode yang lebih profesional dan efisien.

1.1 Konsep CI/CD

Sebelum melangkah lebih jauh ke konsep JavaScript lanjutan, penting bagi kita untuk meninjau kembali dasar-dasar yang menjadi fondasinya. Salah satu bagian paling mendasar dalam pemrograman JavaScript adalah variabel dan tipe data (data types). Variabel berfungsi sebagai wadah untuk menyimpan nilai, sedangkan tipe data menentukan jenis nilai yang disimpan apakah berupa teks, angka, boolean, atau bentuk lain. Pemahaman yang kuat tentang kedua hal ini akan membantu Anda menulis kode yang lebih terstruktur, efisien, dan bebas dari kesalahan logika.

Melalui sesi review ini, Anda akan mengingat kembali cara mendeklarasikan variabel, mengenali berbagai tipe data dalam JavaScript, serta memahami bagaimana keduanya saling berkaitan dalam membangun logika program yang solid.

1.1.1 Variables & Data Types

Dalam JavaScript, kita memiliki tiga cara untuk mendeklarasikan variabel: var, let, dan const. Meskipun ketiganya sama-sama digunakan untuk menyimpan data, masing-masing memiliki perilaku dan aturan yang berbeda. Memahami perbedaan ini sangat penting agar kode yang Anda tulis tetap aman, efisien, dan mudah dipelihara.

// var - Old way (avoid!)

var name = "Aiman";

var name = "Aila"; // Bisa re-declare (dangerous!)

// let - Modern way untuk values yang berubah

let age = 25;

age = 26; // Bisa re-assign

// let age = 27; // Nggak bisa re-declare (good!)

// const - Modern way untuk values yang nggak berubah

const birthYear = 1998;

// birthYear = 1999; // Error! Nggak bisa re-assign

Untuk mempermudah pemahaman, bayangkan tiga jenis ruang penyimpanan berikut:

var seperti kamar tanpa pintu. Siapa pun bisa masuk dan mengganti isinya tanpa batas. Inilah sebabnya penggunaan var bisa menimbulkan banyak masalah dalam kode modern, karena nilainya dapat tertimpa tanpa disadari.
let seperti kamar dengan pintu. Anda masih bisa mengganti isinya jika diperlukan, tetapi dengan kendali yang jelas, tidak bisa mendeklarasikan ulang variabel yang sama di ruang tersebut.
const seperti brankas. Setelah Anda menyimpan sesuatu di dalamnya, nilainya tidak dapat diubah lagi. Ini memberikan kepastian bahwa data tersebut akan tetap sama selama program berjalan.

Sebagai panduan umum:

Gunakan const secara default untuk menjaga nilai tetap konsisten.
Gunakan let hanya jika Anda tahu bahwa nilainya akan berubah.
Hindari var, karena merupakan cara lama yang sering menimbulkan bug dalam kode modern.

Dengan memahami perbedaan ini, Anda dapat menulis kode JavaScript yang lebih aman, mudah dipahami, dan sesuai praktik terbaik masa kini.

1.1.2 Functions

Dalam JavaScript, ada beberapa cara untuk menulis fungsi: Function Declaration, Function Expression, dan Arrow Function. Ketiganya memiliki hasil yang sama yaitu membuat fungsi tetapi cara penulisannya dan konteks penggunaannya bisa berbeda. Mari kita lihat satu per satu:

Function Declaration

// Function Declaration

function greet(name) {

return `Hello, ${name}!`;

}

Function Declaration adalah cara klasik untuk membuat fungsi. Fungsi jenis ini bisa dipanggil (called) bahkan sebelum baris kodenya ditulis, karena JavaScript akan memprosesnya terlebih dahulu saat menjalankan program.

1.1.3 Function Expression

// Function Expression

const greet = function (name) {

return `Hello, ${name}!`;

};

Function Expression adalah fungsi yang disimpan di dalam variabel. Berbeda dengan deklarasi, fungsi ini baru bisa dipanggil setelah baris kodenya dijalankan, karena nilainya harus terlebih dahulu di-assign ke variabel.

1.1.4 Arrow Function

// Arrow Function (ES6+)

const greet = (name) => {

return `Hello, ${name}!`;

};

Arrow Function diperkenalkan di ES6 dan merupakan bentuk yang lebih ringkas dari Function Expression. Ia tidak memiliki this sendiri, sehingga cocok digunakan pada callback atau fungsi pendek di dalam objek atau array methods seperti .map() atau .filter().

// Arrow Function (Shorter)

const greet = (name) => `Hello, ${name}!`;

Versi ini adalah bentuk paling singkat dari Arrow Function, biasanya digunakan untuk fungsi sederhana dengan satu baris perintah.

Analogi Sederhana, bayangkan Anda sedang membuat resep:

Function Declaration seperti menulis resep di awal buku masak bisa Anda buka kapan pun, bahkan sebelum Anda sampai di halamannya.
Function Expression seperti menulis resep di sticky note Anda baru bisa menggunakannya setelah menempelkannya di buku.
Arrow Function seperti catatan singkat di pinggir halaman — cepat, ringkas, tapi cocok hanya untuk resep sederhana.

Dengan memahami perbedaannya, Anda bisa memilih jenis fungsi yang paling sesuai dengan kebutuhan apakah untuk logika kompleks dengan konteks this, atau untuk fungsi ringan yang ringkas dan efisien

1.1.5 Arrays & Objects

Ketika Anda mulai membuat aplikasi yang lebih kompleks, Anda akan sering berurusan dengan kumpulan data seperti daftar produk, pelanggan, atau transaksi. Nah, di JavaScript, dua struktur data yang paling sering digunakan untuk mengelola informasi seperti ini adalah Arrays dan Objects.

Array digunakan untuk menyimpan banyak data dalam satu variabel, biasanya dalam bentuk daftar (list).
Object digunakan untuk menyimpan data yang memiliki pasangan key-value, seperti identitas suatu produk atau pengguna.

Kombinasi keduanya sangat kuat Anda bisa membuat array yang berisi banyak object untuk merepresentasikan kumpulan data yang lebih nyata, seperti daftar produk di bawah ini:

const products = [

{ id: 1, name: "Vitamin C", price: 85000 },

{ id: 2, name: "Vitamin D", price: 120000 },

{ id: 3, name: "Omega-3", price: 200000 },

];

Agar lebih mudah dalam mengolah data seperti ini, JavaScript menyediakan Modern Array Methods sekumpulan fungsi bawaan yang membuatmu bisa menelusuri, memfilter, dan mengolah data dengan cara yang efisien dan elegan. Mari kita lihat satu per satu.

// map - Transform setiap element

const names = products.map((p) => p.name);

// ["Vitamin C", "Vitamin D", "Omega-3"]

map() digunakan untuk membuat array baru berdasarkan hasil transformasi setiap elemen.

Misalnya, jika Anda hanya ingin mengambil nama produk, cukup gunakan map() untuk mengekstrak bagian name dari setiap object.

// filter - Filter berdasarkan kondisi

const affordable = products.filter((p) => p.price < 100000);

// [{ id: 1, name: "Vitamin C", price: 85000 }]

Filter() berfungsi untuk mengambil elemen-elemen yang memenuhi kondisi tertentu.

Pada contoh ini, kita mencari produk dengan harga di bawah 100.000.

// find - Cari satu element

const vitaminC = products.find((p) => p.name === "Vitamin C");

// { id: 1, name: "Vitamin C", price: 85000 }

☐ Salin

find() digunakan untuk mencari satu elemen pertama yang sesuai dengan kondisi.

Di sini, kita mencari produk dengan nama Vitamin C.

// reduce - Aggregate data

const total = products.reduce((sum, p) => sum + p.price, 0);

// 405000

Reduce() berguna untuk melakukan perhitungan atau penggabungan data dari seluruh elemen array.

Contoh di atas menjumlahkan seluruh harga produk untuk mendapatkan total nilai.

// some - Check apakah ada yang match

const hasExpensive = products.some((p) => p.price > 150000);

// true

some() digunakan untuk memeriksa apakah ada setidaknya satu elemen yang memenuhi kondisi tertentu.

Dalam contoh ini, kita mengecek apakah ada produk dengan harga lebih dari 150.000.

// every - Check apakah semua match

const allPositive = products.every((p) => p.price > 0);

// true

every() melakukan pengecekan sebaliknya memastikan semua elemen memenuhi kondisi yang ditentukan.

Contohnya, semua produk harus memiliki harga di atas nol.

Dengan memahami modern array methods ini, Anda bisa mengolah data dengan lebih cepat dan efisien.

Bayangkan Anda sedang mengelola ribuan data produk — daripada menggunakan loop panjang dan rumit, cukup gunakan metode seperti map(), filter(), atau reduce() untuk menyelesaikannya hanya dalam satu baris kode.

Modern Array Methods bukan hanya mempersingkat kode, tapi juga membuat cara berpikirmu sebagai developer menjadi lebih logis dan deklaratif. Anda tidak lagi memikirkan bagaimana caranya melakukan perulangan, tapi cukup mendefinisikan apa yang ingin dicapai.

Ini semua method wajib dikuasai untuk backend development!

Kesimpulan

Dalam review JavaScript Fundamentals ini, kita telah meninjau kembali fondasi utama dalam menulis kode yang efisien dan modern mulai dari penggunaan variabel dan tipe data, cara mendeklarasikan fungsi, hingga pengelolaan data menggunakan array dan object. Setiap konsep memiliki perannya masing-masing dalam membangun program yang terstruktur dan mudah dipelihara.

Pemahaman terhadap let, const, dan var membantu kita menghindari bug yang sering muncul akibat redeklarasi atau perubahan nilai yang tidak diinginkan. Begitu juga dengan berbagai bentuk fungsi dari Function Declaration hingga Arrow Function yang memberi fleksibilitas dalam menulis logika program. Terakhir, kemampuan mengelola data dengan modern array methods seperti map(), filter(), dan reduce() membuat proses pengolahan data menjadi jauh lebih efisien dan elegan.

1.2. ES6+ Features

JavaScript terus berkembang seiring waktu. Versi ES6 (ECMAScript 2015) menjadi tonggak penting karena membawa banyak fitur baru yang membuat kode JavaScript lebih modern, efisien, dan mudah dibaca.

Kalau dulu kita harus menulis kode panjang dan repetitif, kini banyak hal bisa dilakukan hanya dengan beberapa baris saja. Yuk, kita pelajari beberapa fitur utama ES6+ yang paling sering digunakan dalam pengembangan modern!

1.2.1 Template Literals

Sebelum ES6, menggabungkan teks dan variabel terasa rumit. Kita harus menggunakan tanda "+" dan sering kali sulit dibaca. Sekarang, dengan Template Literals, kita bisa menulis string yang lebih rapi dan fleksibel.

Old Way (Template Literals):

const name = "Aiman";

const age = 25;

const message = "Hello, my name is " + name + " and I'm " + age + " years old.";

New Way (Template Literals):

const name = "Aiman";

const age = 25;

const message = `Hello, my name is ${name} and I'm ${age} years old.`;

Selain itu, Template Literals juga mendukung multi-line strings, sehingga Anda bisa menulis struktur seperti HTML tanpa repot menambahkan tanda tambah di setiap baris.

Multi-line Strings:

const html = `

<h2>${product.name}</h2>

<p>Price: Rp ${product.price.toLocaleString()}</p>

</div>

Hasilnya? Kode jadi jauh lebih bersih dan mudah dibaca, terutama saat Anda bekerja dengan teks panjang atau template HTML.

1.2.2 Default Parameters

Dengan destructuring, Anda bisa memilih elemen yang ingin diambil, melewati elemen tertentu, bahkan mengumpulkan sisanya dalam satu variabel. Sangat praktis untuk mengelola data yang kompleks!

Old Way:

function createProduct(name, price, stock) {

stock = stock || 0; // Default value

return { name, price, stock };

}

New Way:

function createProduct(name, price, stock = 0) {

return { name, price, stock };

}

createProduct("Vitamin C", 85000);

// { name: "Vitamin C", price: 85000, stock: 0 }

Dengan cara ini, kode jadi lebih singkat dan jelas, tanpa perlu kondisi tambahan untuk nilai kosong atau tidak terdefinisi.

1.2.3 Destructuring Assignment

Fitur Destructuring membantu Anda mengambil data dari array atau object dengan cara yang lebih cepat dan rapi, dari pada menulis kode panjang untuk mengambil satu per satu data, Anda bisa langsung “membongkar” strukturnya hanya dalam satu baris.

Array Destructuring:

const colors = ["red", "green", "blue"];

// Old way

const first = colors[0];

const second = colors[1];

// New way

const [first, second, third] = colors;

console.log(first); // "red"

console.log(second); // "green"

// Skip elements

const [first, , third] = colors;

console.log(third); // "blue"

// Rest operator

const [first, ...rest] = colors;

console.log(rest); // ["green", "blue"]

Dengan destructuring, Anda bisa memilih elemen yang ingin diambil, melewati elemen tertentu, bahkan mengumpulkan sisanya dalam satu variabel. Sangat praktis untuk mengelola data yang kompleks!

Object Destructuring:

Sekarang bayangkan Anda memiliki sebuah object produk dengan banyak properti. Daripada mengambil tiap nilai satu per satu, destructuring memungkinkan Anda langsung mengambil nilai yang dibutuhkan.

const product = {

id: 1,

price: 85000,

stock: 50,

category: "Vitamin",

};

// old way

const name = product.name;

const price = product.price;

// New way

const { name, price, stock } = product;

console.log(name); // "Vitamin C"

console.log(price); // 85000

Anda juga bisa mengganti nama variabel hasil destructuring, menambahkan nilai default, atau bahkan mengambil data di dalam struktur bersarang (nested).

// Rename variables

const { name: productName, price: productPrice } = product;

// Default values

const { discount = 0 } = product;

console.log(discount); // 0 (default karena nggak ada di object)

// Nested destructuring

const user = {

address: {

city: "Jakarta",

zip: "12345",

};

const {

name,

address: { city },

} = user;

console.log(city); // "Jakarta"

1.2.4 Destructuring

Bagian ini bertujuan untuk memperkenalkan penggunaan destructuring sebagai teknik untuk mengekstraksi nilai dari object dan array secara lebih ringkas, terstruktur, dan mudah dibaca. Dengan destructuring, kita dapat mengambil hanya data yang diperlukan tanpa menuliskan kode berulang, sekaligus memberikan nilai default untuk menghindari nilai undefined.

Destructuring merupakan fitur penting dalam JavaScript modern yang membantu menuliskan kode dengan lebih bersih dan efisien. Pada latihan ini, Anda akan belajar bagaimana mengambil sebagian data dari sebuah object dan mengembalikannya dalam bentuk object baru yang lebih terfokus. Teknik ini sangat berguna dalam pengolahan data produk, konfigurasi, maupun response API.

Prompt untuk GitHub Copilot:

Gunakan destructuring untuk membuat fungsi yang mengekstraksi data tertentu dari sebuah object produk.

Langkah-langkah Coding:

1. Berikut contoh implementasi fungsi berdasarkan instruksi:

function getProductInfo(product) {

const { name, price, stock = 0 } = product;

return { name, price, stock };

}

2. Lakukan test function:

const product = {

id: 1,

price: 85000,

stock: 50,

category: "Vitamin",

manufacturer: "PT Aiman",

};

const info = getProductInfo(product);

console.log(info);

// { name: "Vitamin C", price: 85000, stock: 50 }

3. Lakukan test tanpa stock:

const product2 = {

price: 120000,

// stock missing!

};

const info2 = getProductInfo(product2);

console.log(info2);

// { name: "Vitamin D", price: 120000, stock: 0 } // Default value works!

Hasil Akhir :

Anda telah membuat fungsi yang bersih dan ringkas menggunakan destructuring. Latihan ini menunjukkan bagaimana cara mengekstrak data yang diperlukan saja serta menggunakan nilai default untuk memastikan fungsi tetap aman digunakan meskipun data tertentu tidak tersedia.

Tips:

Destructuring membantu membuat kode lebih mudah dibaca.
Gunakan default values untuk menghindari nilai undefined.
Teknik ini sangat efektif ketika bekerja dengan object yang memiliki banyak properti.

Spread & Rest Operators

Pernahkah Anda ingin menyalin data dari sebuah array atau object tanpa mengubah aslinya? Atau mungkin ingin menggabungkan beberapa data dengan cara yang lebih ringkas dan rapi?

Nah, di sinilah Spread dan Rest Operators (...) menjadi sahabat terbaikmu!

Keduanya memang terlihat sama—tiga titik—tetapi punya fungsi yang berbeda tergantung konteks penggunaannya.

Spread Operator (...) digunakan untuk menyebarkan isi array atau object menjadi elemen-elemen terpisah. Rest Operator (...) digunakan untuk mengumpulkan sisa elemen menjadi satu variabel, bayangkan seperti ini:

Spread itu seperti memotong pizza jadi beberapa potong (satu jadi banyak 🍕), Sedangkan Rest adalah kebalikannya — mengumpulkan potongan-potongan pizza kembali jadi satu utuh!

Spread Operator (...) - "Sebar" data:

// Array spreading

const vitamins = ["Vitamin C", "Vitamin D"];

const supplements = ["Omega-3", "Probiotics"];

const allProducts = [...vitamins, ...supplements];

// ["Vitamin C", "Vitamin D", "Omega-3", "Probiotics"]

Dengan spread, kita bisa menggabungkan dua array tanpa perlu .concat() atau loop. Hasilnya lebih singkat, bersih, dan mudah dibaca.

// Object spreading

const product = {

price: 85000,

};

const productWithStock = {

...product,

stock: 50,

category: "Vitamin",

};

// { name: "Vitamin C", price: 85000, stock: 50, category: "Vitamin" }

Operator ... menyalin isi product ke object baru, lalu menambahkan properti tambahan seperti stock dan category, ini sangat berguna untuk membuat salinan (copy) object tanpa mengubah data aslinya.

// Copy & modify

const updatedProduct = {

...product,

price: 95000, // Override price

};

// { name: "Vitamin C", price: 95000 }

Perhatikan bahwa perubahan harga hanya berlaku di updated product, bukan product asli menjaga prinsip immutability (tidak mengubah data awal).

Rest Operator (...) - "Kumpulkan" sisa data

Rest Operator berfungsi sebaliknya: ia mengumpulkan sisa argumen atau elemen ke dalam satu variabel array atau object

// Function parameters

function createProduct(name, price, ...otherInfo) {

console.log(name); // "Vitamin C"

console.log(price); // 85000

console.log(otherInfo); // [50, "Vitamin", "PT Aiman"]

}

createProduct("Vitamin C", 85000, 50, "Vitamin", "PT Aiman");

Semua parameter setelah price dikumpulkan ke dalam other info. Ini berguna saat jumlah argumen bisa berbeda-beda.

// Array destructuring

const [first, second, ...rest] = [1, 2, 3, 4, 5];

console.log(first); // 1

console.log(second); // 2

console.log(rest); // [3, 4, 5]

Variabel rest menampung semua elemen setelah indeks kedua.

// Object destructuring

const { name, price, ...others } = {

price: 85000,

stock: 50,

category: "Vitamin",

};

console.log(others); // { stock: 50, category: "Vitamin" }

others menyimpan properti yang belum di destrukturisasi sangat efisien saat kita hanya butuh sebagian data.

Kesimpulan

Fitur-fitur ES6+ membawa perubahan besar dalam cara kita menulis JavaScript, mulai dari yang sebelumnya panjang, repetitif, dan sulit dibaca menjadi lebih ringkas, efisien, dan ekspresif. Dengan adanya fitur seperti Template Literals, Default Parameters, Destructuring Assignment, serta Spread & Rest Operators, developer kini dapat menulis kode yang lebih modern dan mudah dipelihara.

Melalui fitur-fitur ini, JavaScript menjadi lebih powerful tanpa kehilangan kesederhanaannya. Anda bisa mengelola data lebih fleksibel, membuat fungsi lebih rapi, dan menjaga kode tetap bersih sekaligus efisien. Inilah dasar penting yang akan terus digunakan dalam berbagai proyek JavaScript modern baik di sisi front-end maupun back-end.

Cari Blog Ini

SMK Asiyah Homeschooling