Learn JavaScript - Destructuring and Structured Assignment

#Introduction

So often your code looks like this: const nama = pengguna.nama; const umur = pengguna.umur; — three lines to copy three properties. Destructuring turns that pattern into a single statement that directly extracts values from arrays or objects into variables.

This ES6 feature is one of the most enjoyable to use. Array destructuring gives you a way to swap variables without a temporary variable, and object destructuring makes code that uses function parameters much more readable. Both are often combined with the rest and default values from episode 7.

#Array Destructuring

#Extracting by Position

Array destructuring matches variables with elements by position:

Basic array destructuring

const koordinat = [123, -7];
const [x, y] = koordinat;
 
console.log(x);
console.log(y);

const [x, y] = koordinat extracts 123 into x and -7 into y. The left side of the = defines the expected structure shape, and variables are filled in order. This is far more concise than koordinat[0] and koordinat[1].

#Skipping Elements and Rest

Unneeded elements can be skipped with empty commas, and rest captures the rest:

Skipping elements and rest

const angka = [1, 2, 3, 4, 5];
 
const [, kedua, , keempat] = angka;
const [pertama, ...sisa] = angka;
 
console.log(kedua);
console.log(keempat);
console.log(pertama);
console.log(sisa);

const [, kedua, , keempat] = angka skips positions 1 and 3, so kedua holds 2 and keempat holds 4. Meanwhile const [pertama, ...sisa] fills pertama with 1 and sisa with [2, 3, 4, 5]. Rest in destructuring is always the last element.

#Swapping Variables Without a Temporary Variable

This is one of the favorite patterns: swapping two variables without needing a third one:

Swapping variables

let a = "kiri";
let b = "kanan";
 
[a, b] = [b, a];
 
console.log(a);
console.log(b);

[a, b] = [b, a] creates a temporary array and destructures it back — in other languages, swapping two values needs three lines and a helper variable.

#Object Destructuring

#Extracting by Key Name

Object destructuring matches variables by key name, not position — order doesn't matter:

Basic object destructuring

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

const { nama, tahun } = pengguna extracts the nama and tahun properties. Keys not inside the curly braces are ignored. If you want a variable name different from the key, use the alias pattern: const { username: namaUser } = user — useful when API data keys don't match local naming.

#Default Values and Nested Destructuring

#Handling Missing Properties

When a property doesn't exist, the destructuring result is undefined. Combine it with default values as in function parameters:

Default values in destructuring

const pengguna = { nama: "Arman" };
 
const { nama, kota = "Jakarta", role = "Engineer" } = pengguna;
 
console.log(nama);
console.log(kota);
console.log(role);

const { nama, kota = "Jakarta" } = pengguna fills kota with the default because the property doesn't exist on the object. Default values only apply to undefined properties, not to other falsy values like null.

#Nested Destructuring

Nested data can be extracted directly with the same structure, for example from an API response:

Nested destructuring

const response = {
  status: 200,
  data: {
    pengguna: {
      nama: "Arman",
      alamat: { kota: "Jakarta" },
    },
  },
};
 
const {
  status,
  data: {
    pengguna: {
      nama,
      alamat: { kota },
    },
  },
} = response;
 
console.log(status);
console.log(nama);
console.log(kota);

const { data: { pengguna: { nama } } } = response unpacks a three-level object in a single statement: status, nama, and kota. Nested destructuring must follow the data structure exactly — being off by one level gives undefined.

#Destructuring in Function Parameters

#Extracting Directly in the Parameter List

The most commonly used pattern in the real world: destructuring an object directly in a function's parameters:

Destructuring function parameters

function tampilkanProfil({ nama, role, tahun }) {
  console.log(`${nama} - ${role} sejak ${tahun}`);
}
 
tampilkanProfil({ nama: "Arman", role: "Engineer", tahun: 2020 });

function tampilkanProfil({ nama, role, tahun }) accepts an object and extracts its properties right in the parameter declaration — the caller just sends one object. This is a standard pattern in React and many other libraries.

#Combining with Defaults

Destructured parameters can also use default values:

Defaults on destructured parameters

function konfigurasi({ host = "localhost", port = 3000, ssl = false } = {}) {
  console.log(`Server: ${host}:${port}, ssl ${ssl}`);
}
 
konfigurasi({ port: 8080 });
konfigurasi();

function konfigurasi({ host = "localhost", port = 3000 } = {}) gives per-property defaults plus a {} default for the whole object. With = {} at the end, the function is safe to call with no arguments at all.

#Wrap-Up

Episode 11 enabled you to extract values structurally: array destructuring by position with rest support and a variable-swap pattern, object destructuring by key name with aliases and default values, nested destructuring, and a function parameter pattern that's the standard in modern frameworks.

Key takeaways:

• Array destructuring matches variables with element positions.
• Object destructuring matches variables with key names.
• Default values only apply to undefined properties.
• Rest ... captures the remaining elements and must be last.
• Nested destructuring must match the data shape exactly.
• Function parameters can be destructured with a {} object default.

In the next episode 12 we'll cover scope, closures, and the this context — how JavaScript decides which variables are visible where, the closure mechanism that makes functions remember their environment, and the four this binding rules. This is the hardest episode of phase two, and also the one that deepens your understanding most.