Dasar Destrukturisasi Array/Objek

Pengantar

Dasar-dasar larik

// Array destructuring: assign by position
const pair = [10, 20];

const [x, y] = pair;

console.log("x:", x);
console.log("y:", y);

Melewati bagian dan nilai bawaan

// Skip items with commas and provide defaults
const triple = [5, undefined, 9];

// Skip the middle, provide default for missing/undefined
const [first, , third = 0] = triple;

console.log("first:", first);
console.log("third with default:", third);

Trik pertukaran

// Swap values with destructuring
let a = "left";
let b = "right";

[a, b] = [b, a];

console.log("a:", a);
console.log("b:", b);

Dasar-dasar objek & penggantian nama

// Object destructuring: assign by property name
const user = { name: "Ayla", level: 2, active: true };

// Basic
const { name, active } = user;

// Renaming and default
const { level: userLevel = 0 } = user;

console.log("name:", name);
console.log("active:", active);
console.log("userLevel:", userLevel);

Field bertingkat (ringkas)

// Nested destructuring (keep it simple)
const config = {
  theme: { primary: "blue", contrast: "white" },
  flags: { compact: true }
};

const { theme: { primary }, flags: { compact } } = config;

console.log("primary:", primary);
console.log("compact:", compact);

Kuis sintaks pertukaran

Ringkasan