Learn JavaScript - Arrays, Objects, and Basic Data Structures

#Introduction

Functions keep code organized, but to solve real problems you need a way to store collections of data neatly. Episode 5 covers the three core JavaScript data structures: arrays for ordered lists of values, objects for modeling entities with properties, and the combination of both to build realistic nested data.

In addition, you'll get to know Set and Map — two more specialized data structures. Set stores unique values without duplication, and Map stores key-value pairs with keys of any type. Both are often a better choice than plain arrays or objects.

You'll see data that resembles real applications: lists of users, products, and the relationships between them. Choosing data structures correctly will make episodes 7 through 12 feel much easier.

#Arrays and Their Basic Operations

#Creating and Accessing Arrays

Arrays store an ordered collection of values. Each element is accessed via an index that starts at zero:

Creating and accessing arrays

const buah = ["apel", "pisang", "mangga"];
 
console.log(buah[0]);
console.log(buah[2]);
console.log(buah.length);
console.log(buah[buah.length - 1]);

buah[0] returns "apel", buah[2] returns "mangga", and buah.length returns 3. The last element is always at index length - 1. Arrays can hold mixed types, but best practice is one array holding one consistent type.

#Adding and Removing Elements

The basic array mutation operations use the push, pop, shift, and unshift methods:

Adding and removing elements

const angka = [2, 4];
 
angka.push(6);
console.log(angka);
angka.pop();
console.log(angka);
angka.unshift(1);
console.log(angka);
angka.shift();
console.log(angka);

angka.push(6) adds at the end so the array becomes [2, 4, 6]. pop removes from the end, unshift adds at the front, and shift removes from the front. Worth remembering: push and pop are very fast, while shift and unshift are slow because every element must be shifted.

#Objects and Properties

#Creating and Accessing Objects

Objects model entities with key-value pairs. Keys are called properties, and their values can be of any type:

Creating and accessing objects

const pengguna = {
  nama: "Arman",
  role: "Engineer",
  tahunMasuk: 2020,
};
 
console.log(pengguna.nama);
console.log(pengguna["role"]);
console.log(pengguna.tahunMasuk);

pengguna.nama accesses a property with dot notation, and pengguna["role"] uses bracket notation, which is useful when the key is dynamic. Objects are the backbone of JavaScript — almost everything in this language is an object, including arrays, which are really special objects.

#Mutating Properties

An object's properties can be changed, added, or deleted after the object is created:

Changing and deleting properties

const produk = { nama: "Kopi", harga: 25000 };
 
produk.harga = 30000;
produk.stok = 12;
console.log(produk);
delete produk.stok;
console.log(produk);

produk.harga = 30000 changes an existing value, and produk.stok = 12 adds a new property. The delete operator removes a property from an object. Note: const only protects the variable binding, not the object's contents — its properties can still be mutated.

#Nested Data Structures

#Arrays in Objects and Objects in Arrays

Real-world data is rarely flat. Combining arrays and objects models realistic data: objects containing arrays, or arrays containing many objects.

Array of objects

const tim = [
  { nama: "Arman", role: "Backend" },
  { nama: "Sari", role: "Frontend" },
  { nama: "Budi", role: "DevOps" },
];
 
for (const anggota of tim) {
  console.log(`${anggota.nama} - ${anggota.role}`);
}

tim is an array of objects, and for (const anggota of tim) loops over each member. Accessing anggota.nama and anggota.role combines everything you've learned: arrays, objects, loops, and template literals. This pattern is the most common data shape in JavaScript applications.

#Deeper Nested Data

Data can nest even deeper — objects inside objects, arrays inside properties:

Object with an array inside

const penulis = {
  nama: "Arman Dwi Pangestu",
  buku: [
    { judul: "Belajar JavaScript", tahun: 2026 },
    { judul: "Belajar HTML", tahun: 2025 },
  ],
};
 
console.log(penulis.buku[0].judul);
console.log(penulis.buku.length);

penulis.buku[0].judul opens an access chain: the buku property holding an array, the first element, then its judul property. The deeper the structure, the more important it is to use clear variable names so the access chain doesn't confuse.

#Set and Map

#Set: A Collection of Unique Values

Set stores unique values. Adding a value that already exists won't add a new element:

Set removes duplicates

const angka = [1, 2, 2, 3, 3, 3];
const unik = new Set(angka);
 
console.log(unik);
console.log([...unik]);

new Set(angka) removes all duplicates so unik contains 1, 2, 3. Spreading [...unik] converts the Set back into an array. The new Set(angka) pattern is very common for removing duplicates in one line — and ... is the spread operator we'll dissect in episode 7.

#Map: Key-Value Pairs with Any Key Type

Map stores key-value pairs with keys of any type, including objects. Unlike plain objects, Map preserves order and has an accurate size:

Map with keys and values

const skor = new Map();
 
skor.set("Arman", 92);
skor.set("Sari", 88);
skor.set("Arman", 95);
 
console.log(skor.get("Arman"));
console.log(skor.size);

skor.set("Arman", 95) overwrites the old value for the same key, so get returns 95 and size returns 2. Map is more appropriate than an object when keys are dynamic or frequently added and removed — its behavior is more predictable.

#Wrap-Up

Episode 5 completed your basic data structure toolkit: arrays with the push, pop, shift, and unshift methods, objects with properties and mutation, nested data combining both, and Set and Map as more specific choices for particular needs.

Key takeaways:

• Arrays are accessed via zero-based indices and have a length property.
• push and pop work at the end; shift and unshift at the front.
• Objects model entities with key-value pairs.
• const doesn't lock an object's or array's contents, only the binding.
• Nested data combines arrays inside objects and vice versa.
• Set removes duplicates; Map stores key-value pairs with any key type.

In the next episode 6 we'll cover string and date manipulation — slicing, searching, and replacing text with string methods, formatting numbers and dates, and working with the Date object for time-based logic. Both are practical skills used in almost every application.