JavaScript - Struktur Data

Struktur Data?

• Teknik untuk menyimpan dan organisir data
• Mempermudah untuk modifikasi, navigasi, dan akses data yang diinginkan
• Digunakan hampir di seluruh area komputer sains dan pemrograman

Manfaat Struktur Data

• Mengatur dan menggunakan data yang cukup banyak
• Mencari data dari basis data yang ada
• Mempermudah dan Mempercepat proses data

(TL;DR) Struktur Data

• Tipe Data tingkat tinggi (non-primitif) di dalam JS

Array

• Struktur data yang memperbolehkan kita menyimpan koleksi berbagai nilai di bawah bendera satu variabel
• Ukuran-nya bisa secara dinamis bertambah atau berkurang, sesuai keperluan
• Hanya di JSKarena menganut tipe data dinamis, Array bisa berisi kumpulan tipe data lainnya

Array (ii)

• Cara aksesnya dengan menggunakan index, suatu urutan angka, yang dimulai dari 0 (nol)
• Memiliki beberapa fungsi bawaan yang bisa mempermudah developer dalam mengakses dan memodifikasi array yang dibuat

Visualisasi & Penulisan Array

// cara penulisan array secara langsung
const arr = [100, 200, 300];

// cara penulisan inisialisasi array yang tidak diketahui jumlahnya
const arr2 = [];

// cara menambahkan array secara manual
arr2[0] = 100;
arr2[1] = 200;
arr2[2] = 300;

// cara menambahkan nilai baru pada array di posisi terakhir
arr2.push(400);

Array 2 Dimensi (Nested Array)

// inisialisasi array
const sheet = [];

// deklarasi baris pada array
sheet[0] = [];
sheet[1] = [];
sheet[2] = [];

// deklarasi kolom pada array
sheet[0][0] = 100; sheet[0][1] = 200; sheet[0][2] = 300;
sheet[1][0] = 400; sheet[1][1] = 500; sheet[1][2] = 600;
sheet[2][0] = 700; sheet[2][1] = 800; sheet[2][2] = 900;

Tantangan: Array

• Harus menggunakan fungsi push
• Tidak boleh ada akses secara langsung x[0] = yyy;

Metode Bawaan Array

Array juga memiliki banyak sekali metode bawaan yang bisa mempermudah hidup

Object

• Sebuah tipe data dalam js yang menyimpan data dengan pasangan kunci : nilai (pair-key value)
• Mirip dengan array, hanya saja mengakses datanya bukan lewat index, tapi melalui properties
• Cocok untuk menyimpan data yang terstruktur, yang merepresentasikan objek di dunia nyata

Cara Penulisan Object

// cara penulisan object dengan menggunakan { ... }
const kucing = {
  nama: "Whiskas",
  warna: "Hitam",
  jumlahKaki: 4
};

// cara penulisan object dengan menggunakan new Object()
const kucing2 = new Object();

kucing2.nama = "Me-O";
kucing2.warna = "Belang";
kucing2.jumlahKaki = 4;

Mudah sekali bukan?

Namun dunia tidak seindah itu Ferguso

Waduh

Kenyataan Dunia yang Pahit

• Umumnya data memang dibuat dalam bentuk array dan object
• Hanya saja akan sangat umum menemukan data GABUNGAN keduanya (beserta gabungan data primitif lainnya)

Contoh data Gabungan

const response = {
  statusCode: 200,
  endpoint: 'GET /api/v1/dummies',
  body: {
    message: 'Hello World',
    data: [
      { id: 1, name: 'Andre', age: 20 },
      { id: 2, name: 'Bella', age: 21 },
      { ... },
   ],
  totalData: 100
  responseTime: '1506ms'
};

Map dan Set

Sampai sekarang kita mengetahui beberapa hal:

• Object digunakan untuk menyimpan koleksi data yang memiliki pasangan kunci dan nilai
• Array digunakan untuk menyimpan koleksi data yang memiliki urutan, berdasarkan index
• Tapi ini belum cukup kan?

Map

• Koleksi dari data yang memiliki pasangan kunci dan nilai
• Pada Map, kuncinya boleh bertipe data apa saja (tidak harus melulu string, seperti Object)

Penggunaan Map

// inisialisasi objek
const obj = {'a': 1, 'b': 2, 'c': 3};
// inisialisasi Map
let map = new Map();

// menambahkan data
map.set('halo', 'dunia');
map.set(1, 'satu');
map.set(obj, 'lho ini bisa?');

// mengakses data
console.log(map.get('halo'));
console.log(map.get(1));
console.log(map.get(obj));

Set

• Merupakan koleksi data yang spesial
• kumpulan dari data (tanpa ada kunci), dimana untuk setiap data hanya boleh muncul sekali saja (unik)

Penggunaan Set

// inisialisasi Set
let set = new Set();

let muridPertama = { nama: 'Mari' };
let muridKedua = { nama: 'Regal' };

// memasukkan data ke dalam set
set.add(muridPertama);
set.add(muridKedua);
set.add(muridPertama);

console.log(set.size); // tetap 2, bukan 3