Struktur Data dan Fungsi Dasar dalam JavaScript - Perwira Learning Center

Al Zaki Ibra Ramadani Januari 27, 2026


1. LATAR BELAKANG

    Pada hari ini, saya mempelajari materi tentang Struktur Data dan Fungsi Dasar dalam JavaScript. Materi ini sangat penting karena dalam pemrograman nyata, kita jarang bekerja dengan data tunggal atau kode yang sederhana. Saat mengembangkan aplikasi atau menyelesaikan masalah algoritmik, kemampuan untuk mengorganisir data secara efisien dan memecah kode menjadi bagian-bagian yang reusable menjadi kunci keberhasilan.

Sebagai siswa SMK yang sedang menempuh PKL di bidang Software Development, saya memahami bahwa program yang baik adalah program yang terstruktur dan mudah dipelihara. Tanpa pemahaman tentang fungsi dan struktur data, algoritma yang kita buat bisa menjadi berantakan, sulit dibaca, dan sulit dikembangkan lebih lanjut.

 

2. ALAT DAN BAHAN

2.1 Perangkat Lunak

  1. Visual Studio Code - Text editor dengan extension JavaScript dan Node.js
  2. Node.js - Runtime environment untuk menjalankan kode JavaScript
  3. Google Chrome - Browser untuk menguji kode di console developer tools
  4. Blogger.com - Platform untuk publikasi laporan pembelajaran

2.2 Perangkat Keras

  1. Laptop - Spesifikasi: Intel Core i5, RAM 8GB, SSD 512GB

 

3. PEMBAHASAN

3.1 Pengertian Fungsi (Function)

Definisi Fungsi:
Fungsi dalam pemrograman adalah blok kode yang dirancang untuk melakukan tugas tertentu. Fungsi ini dapat dipanggil berulang kali dengan input yang berbeda-beda. Bayangkan fungsi seperti mesin otomatis - kita masukkan bahan (input), mesin memproses, dan menghasilkan produk (output).

Fungsi sebagai Pemecah Algoritma:
Dalam menyelesaikan masalah algoritmik yang kompleks, kita dapat memecahnya menjadi bagian-bagian kecil yang masing-masing ditangani oleh fungsi tertentu. Ini seperti membangun rumah - ada tukang batu, tukang kayu, tukang listrik, masing-masing ahli di bidangnya.

Keuntungan Menggunakan Fungsi:

  1. Rapi dan Terstruktur - Kode lebih mudah dibaca dan dipahami
  2. Dapat Digunakan Ulang - Fungsi yang sama bisa dipanggil di banyak tempat
  3. Mudah Dirawat - Perbaikan bug cukup di satu tempat
  4. Mudah Diuji - Setiap fungsi dapat diuji secara terpisah
  5. Kolaborasi Lebih Baik - Tim dapat bekerja pada fungsi yang berbeda
javascript
// Contoh sederhana: Tanpa fungsi vs dengan fungsi

// TANPA FUNGSI (berantakan)
let nilai1 = 85;
let nilai2 = 90;
let nilai3 = 78;

let rataRata = (nilai1 + nilai2 + nilai3) / 3;
console.log("Rata-rata: " + rataRata);

// DENGAN FUNGSI (rapi dan reusable)
function hitungRataRata(a, b, c) {
    return (a + b + c) / 3;
}

let hasil = hitungRataRata(85, 90, 78);
console.log("Rata-rata: " + hasil);

3.2 Struktur Fungsi Dasar

Penulisan Fungsi Sederhana:
Fungsi di JavaScript memiliki struktur dasar yang terdiri dari:

  1. Kata kunci function
  2. Nama fungsi
  3. Parameter (opsional)
  4. Badan fungsi (blok kode)
  5. Return value (opsional)

Parameter dan Return Value:
Parameter adalah input yang diterima fungsi, sedangkan return value adalah output yang dihasilkan fungsi.

javascript
// Fungsi tanpa parameter dan return value
function sapa() {
    console.log("Halo, selamat belajar!");
}

// Fungsi dengan parameter
function sapaNama(nama) {
    console.log("Halo, " + nama + "!");
}

// Fungsi dengan parameter dan return value
function tambah(angka1, angka2) {
    let hasil = angka1 + angka2;
    return hasil;
}

// Penggunaan fungsi
sapa();                         // Output: Halo, selamat belajar!
sapaNama("Ibra");               // Output: Halo, Ibra!
let jumlah = tambah(5, 3);      // jumlah = 8
console.log("5 + 3 = " + jumlah); // Output: 5 + 3 = 8

3.3 Pengertian Struktur Data

Definisi Struktur Data:
Struktur data adalah cara mengorganisir dan menyimpan data di dalam memori komputer agar dapat diakses dan dimanipulasi dengan efisien. Struktur data menentukan hubungan antara data dan operasi apa yang dapat dilakukan pada data tersebut.

Fungsi Struktur Data:

  1. Menyimpan Data - Menyimpan banyak data dalam satu tempat
  2. Mengelola Data - Memudahkan pencarian, penyisipan, dan penghapusan data
  3. Mengoptimalkan Performa - Memilih struktur data yang tepat mempercepat eksekusi
  4. Meningkatkan Readability - Data terorganisir lebih mudah dipahami

Perbedaan Variabel Biasa dan Struktur Data:

javascript
// VARIABEL BIASA (hanya menyimpan satu nilai)
let namaSiswa1 = "Andi";
let namaSiswa2 = "Budi";
let namaSiswa3 = "Citra";
// Masalah: ribet jika ada 100 siswa!

// STRUKTUR DATA ARRAY (menyimpan banyak nilai)
let daftarSiswa = ["Andi", "Budi", "Citra", "Dewi", "Eka"];
// Solusi: semua nama dalam satu variabel, mudah dikelola

3.4 Array sebagai Struktur Data Dasar

Pengertian Array:
Array adalah struktur data linear yang menyimpan kumpulan nilai dengan tipe data yang sama. Setiap nilai dalam array disebut elemen, dan setiap elemen memiliki indeks (nomor urut) yang dimulai dari 0.

Cara Menyimpan Banyak Data Sejenis:
Array memungkinkan kita menyimpan banyak data dalam satu variabel, yang membuat pengelolaan data menjadi lebih sistematis.

javascript
// Contoh penggunaan array dalam algoritma

// Data nilai ujian 10 siswa
let nilaiUjian = [85, 90, 78, 92, 88, 95, 76, 89, 91, 87];

// Fungsi untuk menghitung nilai tertinggi
function cariNilaiTertinggi(nilaiArray) {
    let tertinggi = nilaiArray[0];
    for (let i = 1; i < nilaiArray.length; i++) {
        if (nilaiArray[i] > tertinggi) {
            tertinggi = nilaiArray[i];
        }
    }
    return tertinggi;
}

// Fungsi untuk menghitung rata-rata
function hitungRataRataArray(nilaiArray) {
    let total = 0;
    for (let nilai of nilaiArray) {
        total += nilai;
    }
    return total / nilaiArray.length;
}

// Menggunakan fungsi dengan array
console.log("Nilai ujian: " + nilaiUjian);
console.log("Nilai tertinggi: " + cariNilaiTertinggi(nilaiUjian));
console.log("Rata-rata: " + hitungRataRataArray(nilaiUjian).toFixed(2));

3.5 Object sebagai Struktur Data

Pengertian Object:
Object adalah struktur data asosiatif yang menyimpan data dalam pasangan key-value (kunci-nilai). Berbeda dengan array yang menggunakan indeks numerik, object menggunakan string sebagai kunci untuk mengakses nilai.

Cara Menyimpan Data Majemuk:
Object ideal untuk menyimpan data yang memiliki banyak atribut atau properti yang berbeda-beda.

javascript
// Contoh penggunaan object dalam algoritma

// Data siswa dengan berbagai atribut
let siswa1 = {
    nis: "2023001",
    nama: "Andi Wijaya",
    umur: 17,
    kelas: "XII RPL 1",
    alamat: "Jl. Merdeka No. 123",
    nilai: {
        matematika: 85,
        bahasa: 90,
        pemrograman: 95
    }
};

// Fungsi untuk menampilkan data siswa
function tampilkanDataSiswa(siswa) {
    console.log("=== DATA SISWA ===");
    console.log("NIS: " + siswa.nis);
    console.log("Nama: " + siswa.nama);
    console.log("Kelas: " + siswa.kelas);
    console.log("Umur: " + siswa.umur + " tahun");
    console.log("Alamat: " + siswa.alamat);
    console.log("Nilai Matematika: " + siswa.nilai.matematika);
}

// Fungsi untuk menghitung rata-rata nilai
function hitungRataRataNilai(siswa) {
    let nilai = siswa.nilai;
    let total = nilai.matematika + nilai.bahasa + nilai.pemrograman;
    return total / 3;
}

// Menggunakan fungsi dengan object
tampilkanDataSiswa(siswa1);
console.log("Rata-rata nilai: " + hitungRataRataNilai(siswa1).toFixed(2));

3.6 Hubungan Fungsi dan Struktur Data

Menggabungkan Fungsi dengan Array dan Object:
Dalam pemrograman nyata, kita sering menggabungkan fungsi dengan struktur data untuk membuat algoritma yang modular dan fleksibel.

javascript
// Contoh sistem pengelolaan data siswa

// Array of objects untuk menyimpan data multiple siswa
let daftarSiswa = [
    { nis: "2023001", nama: "Andi", nilai: 85 },
    { nis: "2023002", nama: "Budi", nilai: 90 },
    { nis: "2023003", nama: "Citra", nilai: 78 },
    { nis: "2023004", nama: "Dewi", nilai: 92 },
    { nis: "2023005", nama: "Eka", nilai: 88 }
];

// Fungsi untuk mencari siswa berdasarkan NIS
function cariSiswaByNIS(nisDicari) {
    for (let siswa of daftarSiswa) {
        if (siswa.nis === nisDicari) {
            return siswa;
        }
    }
    return null; // Tidak ditemukan
}

// Fungsi untuk menambahkan siswa baru
function tambahSiswaBaru(nis, nama, nilai) {
    let siswaBaru = { nis: nis, nama: nama, nilai: nilai };
    daftarSiswa.push(siswaBaru);
    console.log("Siswa " + nama + " berhasil ditambahkan!");
}

// Fungsi untuk menghitung rata-rata nilai semua siswa
function hitungRataRataKelas() {
    let total = 0;
    for (let siswa of daftarSiswa) {
        total += siswa.nilai;
    }
    return total / daftarSiswa.length;
}

// Menggunakan fungsi-fungsi tersebut
console.log("=== SISTEM PENGELOLAAN SISWA ===");

// Cari siswa
let siswaDitemukan = cariSiswaByNIS("2023003");
if (siswaDitemukan) {
    console.log("Siswa ditemukan: " + siswaDitemukan.nama);
}

// Tambah siswa baru
tambahSiswaBaru("2023006", "Fajar", 95);

// Hitung rata-rata kelas
console.log("Rata-rata nilai kelas: " + hitungRataRataKelas().toFixed(2));

// Tampilkan semua siswa
console.log("\nDaftar semua siswa:");
daftarSiswa.forEach((siswa, index) => {
    console.log(`${index + 1}. ${siswa.nama} - NIS: ${siswa.nis} - Nilai: ${siswa.nilai}`);
});

3.7 Manfaat Struktur Data dan Fungsi Dasar

1. Algoritma Lebih Rapi dan Terstruktur:
Dengan memecah algoritma menjadi fungsi-fungsi kecil dan mengorganisir data dengan struktur data yang tepat, kode menjadi lebih mudah dibaca dan dipahami.

2. Program Mudah Dikembangkan:
Ketika ada kebutuhan baru, kita cukup menambah fungsi baru atau memperluas struktur data tanpa mengganggu kode yang sudah ada.

3. Mengurangi Kesalahan dan Duplikasi Kode:
Dengan menggunakan fungsi yang sama untuk tugas yang sama, kita mengurangi kemungkinan kesalahan dan menghindari penulisan kode yang berulang-ulang.

4. Memudahkan Kolaborasi Tim:
Dalam pengembangan tim, setiap programmer dapat bekerja pada fungsi yang berbeda tanpa saling mengganggu.

javascript
// Contoh: Sistem toko buku yang terstruktur

// Struktur data untuk toko buku
let tokoBuku = {
    nama: "Buku Kita",
    inventori: [],
    
    // Fungsi-fungsi sebagai method
    tambahBuku: function(judul, harga, stok) {
        let bukuBaru = {
            id: this.inventori.length + 1,
            judul: judul,
            harga: harga,
            stok: stok
        };
        this.inventori.push(bukuBaru);
        console.log(`Buku "${judul}" berhasil ditambahkan.`);
    },
    
    cariBuku: function(judul) {
        for (let buku of this.inventori) {
            if (buku.judul.toLowerCase().includes(judul.toLowerCase())) {
                return buku;
            }
        }
        return null;
    },
    
    tampilkanInventori: function() {
        console.log(`\n=== INVENTORI ${this.nama.toUpperCase()} ===`);
        this.inventori.forEach(buku => {
            console.log(`ID: ${buku.id} | ${buku.judul} | Rp${buku.harga} | Stok: ${buku.stok}`);
        });
    }
};

// Menggunakan sistem toko buku
tokoBuku.tambahBuku("Pemrograman JavaScript", 120000, 15);
tokoBuku.tambahBuku("Algoritma Dasar", 95000, 8);
tokoBuku.tambahBuku("Struktur Data", 110000, 12);

tokoBuku.tampilkanInventori();

let bukuDitemukan = tokoBuku.cariBuku("javascript");
if (bukuDitemukan) {
    console.log(`\nBuku ditemukan: ${bukuDitemukan.judul} - Rp${bukuDitemukan.harga}`);
}

3.8 Kendala dan Solusi

Kendala yang Dihadapi:

  1. Awalnya bingung menentukan kapan menggunakan array vs object
  2. Terkadang lupa untuk menggunakan return di dalam fungsi
  3. Bingung dengan konsep this dalam object methods

Solusi yang Diterapkan:

  1. Membuat aturan sederhana: gunakan array untuk kumpulan data sejenis, gunakan object untuk data dengan banyak atribut
  2. Selalu menulis komentar di atas fungsi tentang apa yang harus di-return
  3. Mempelajari lebih dalam tentang context dan scope dalam JavaScript
  4. Berkonsultasi dengan mentor PLC untuk kasus-kasus spesifik

4. DAFTAR PUSTAKA

  1. BuildWithAngga. (2023). Pengenalan Dasar Javascript. https://buildwithangga.com
  2. CodeCademy. (2023). Javacsript Function. https://www.codecademy.com
  3. Programiz. (n.d.). Javascript Function and Function Expression. https://www.programiz.com
  4. W3Schools. (n.d.). JavaScript Functions Tutorial dan JavaScript Arrays Tutorial. https://www.w3schools.com/js/js_functions.asp dan https://www.w3schools.com/js/js_arrays.asp
  5. Web.Dev. (n.d.). Fungsi. https://web.dev
Al Zaki Ibra Ramadani

Diposting oleh Al Zaki Ibra Ramadani

Posting Komentar

0 Komentar