Destructuring dan Operators

Destructuring

Destructuring adalah cara untuk mengekstrak nilai dari array atau properti dari objek ke dalam variabel yang terpisah dengan sintaks yang ringkas.

Object Destructuring

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30
};

// Old way
const firstName = person.firstName;
const lastName = person.lastName;

// Destructuring
const { firstName, lastName } = person;

const person = {
  firstName: "John",
  lastName: "Doe"
};

// Destructuring dengan nama variabel baru
const { firstName: fName, lastName: lName } = person;
console.log(fName); // "John"

const person = {
  firstName: "John",
  lastName: "Doe"
};

// Dengan nilai default
const { firstName, hobby = "coding" } = person;
console.log(hobby); // "coding"

const person = {
  name: "John",
  address: {
    city: "Jakarta",
    postalCode: "12345"
  }
};

// Nested destructuring
const { address: { city, postalCode } } = person;

Array Destructuring

const colors = ["red", "green", "blue"];

// Old way
const first = colors[0];
const second = colors[1];

// Destructuring
const [first, second] = colors;

const colors = ["red", "green", "blue", "yellow"];

// Skip elements dengan koma
const [, , thirdColor] = colors;
console.log(thirdColor); // "blue"

const numbers = [1, 2, 3, 4, 5];

// Rest pattern
const [first, second, ...rest] = numbers;
console.log(rest); // [3, 4, 5]

let a = 1;
let b = 2;

// Swap variables
[a, b] = [b, a];
console.log(a, b); // 2, 1

Implementasi Destructuring

Tambahkan ke js/app.js:

js/app.js

// ----------------------------
// Destructuring
// ----------------------------
export function demoDestructuring() {
  // Object destructuring
  const person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    email: "john@example.com",
    address: {
      city: "Jakarta",
      postalCode: "12345"
    }
  };

  // Basic destructuring
  const { firstName, lastName } = person;

  // Destructuring dengan nama variabel baru
  const { firstName: fName, lastName: lName } = person;

  // Destructuring dengan nilai default
  const { hobby = "coding" } = person;

  // Nested destructuring
  const { address: { city, postalCode } } = person;

  // Array destructuring
  const colors = ["red", "green", "blue", "yellow", "purple"];

  // Basic array destructuring
  const [firstColor, secondColor] = colors;

  // Skip elements
  const [, , thirdColor] = colors;

  // Rest pattern dalam array destructuring
  const [primary, secondary, ...restColors] = colors;

  // Swap variables menggunakan destructuring
  let a = 1;
  let b = 2;
  [a, b] = [b, a];

  return {
    objectBasic: { firstName, lastName },
    objectRenamed: { fName, lName },
    objectDefault: hobby,
    objectNested: { city, postalCode },
    arrayBasic: { firstColor, secondColor },
    arraySkipped: thirdColor,
    arrayRest: { primary, secondary, restColors },
    swapped: { a, b }
  };
}

Use Cases

Destructuring sangat berguna untuk:

Mengekstrak parameter dari objek function
Mengambil data dari API response
Swap variabel tanpa variabel temporary
Import hanya bagian tertentu dari module

Spread dan Rest Operators

Operator ... (tiga titik) dapat berfungsi sebagai spread operator atau rest parameter tergantung konteksnya.

Spread Operator

Spread operator digunakan untuk "membuka" atau "menyebar" elemen array atau objek.

Dengan Array

const numbers = [1, 2, 3];

// Copy array
const numbersCopy = [...numbers];

// Merge arrays
const moreNumbers = [...numbers, 4, 5];
const combined = [...numbers, ...moreNumbers];

// Spread sebagai argument
Math.max(...numbers); // 3

Dengan Object

const person = { name: "John", age: 30 };

// Copy object
const personCopy = { ...person };

// Merge objects
const employee = {
  ...person,
  company: "Tech Co",
  age: 31  // Override property
};

Rest Parameter

Rest parameter mengumpulkan argumen yang tersisa ke dalam array.

// Rest parameter dalam function
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

sum(1, 2, 3, 4, 5); // 15

// Rest dengan parameter reguler
function process(first, second, ...rest) {
  console.log(first);  // "a"
  console.log(second); // "b"
  console.log(rest);   // ["c", "d", "e"]
}

process("a", "b", "c", "d", "e");

Implementasi Spread dan Rest

Tambahkan ke js/app.js:

js/app.js

// ----------------------------
// Spread dan Rest Operators
// ----------------------------
export function demoSpreadRest() {
  // Spread operator dengan array
  const numbers = [1, 2, 3];
  const moreNumbers = [...numbers, 4, 5];

  // Copy array dengan spread
  const numbersCopy = [...numbers];

  // Merge arrays
  const array1 = [1, 2, 3];
  const array2 = [4, 5, 6];
  const mergedArray = [...array1, ...array2];

  // Spread operator dengan objek
  const person = {
    name: "John",
    age: 30
  };

  // Copy objek
  const personCopy = { ...person };

  // Extend objek
  const extendedPerson = {
    ...person,
    email: "john@example.com",
    age: 31 // Override properti yang ada
  };

  // Rest parameter dalam fungsi
  function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
  }

  // Rest parameter dengan parameter reguler
  function process(first, second, ...rest) {
    return {
      first,
      second,
      rest
    };
  }

  return {
    spreadArray: moreNumbers,
    copyArray: numbersCopy,
    mergedArrays: mergedArray,
    spreadObject: extendedPerson,
    restSum: sum(1, 2, 3, 4, 5),
    restProcess: process("a", "b", "c", "d", "e")
  };
}

Perbedaan Spread vs Rest

Aspek	Spread Operator	Rest Parameter
Posisi	Sisi kanan assignment	Parameter function
Fungsi	Membuka/menyebar elemen	Mengumpulkan elemen
Hasil	Array/Object individual	Array yang berisi elemen
Contoh	`[...arr]`	`function(...args)`

Shallow Copy

Spread operator melakukan shallow copy. Nested objects/arrays masih berbagi referensi. Untuk deep copy, gunakan methods seperti structuredClone() atau library seperti Lodash.

Update main.js

Update js/main.js untuk menjalankan demo baru:

js/main.js

// Update import
import { 
  demoVariables, 
  demoArrowFunctions, 
  demoTemplateLiterals, 
  demoDestructuring, 
  demoSpreadRest 
} from './app.js';

// Tambahkan ke fungsi runAllDemos
function runAllDemos() {
  // ... demo sebelumnya ...

  // Demo Destructuring
  const destructuringResults = demoDestructuring();
  addOutput(
    "4. Destructuring",
    "Ekstraksi nilai dari objek dan array",
    `Object basic: ${JSON.stringify(destructuringResults.objectBasic)}
Object renamed: ${JSON.stringify(destructuringResults.objectRenamed)}
Object default: ${destructuringResults.objectDefault}
Object nested: ${JSON.stringify(destructuringResults.objectNested)}
Array basic: ${JSON.stringify(destructuringResults.arrayBasic)}
Array skipped: ${destructuringResults.arraySkipped}
Array with rest: ${JSON.stringify(destructuringResults.arrayRest)}
Swapped variables: ${JSON.stringify(destructuringResults.swapped)}`
  );

  // Demo Spread dan Rest Operators
  const spreadRestResults = demoSpreadRest();
  addOutput(
    "5. Spread dan Rest Operators",
    "Penggunaan ... untuk array dan objek",
    `Spread in array: ${JSON.stringify(spreadRestResults.spreadArray)}
Copy array: ${JSON.stringify(spreadRestResults.copyArray)}
Merged arrays: ${JSON.stringify(spreadRestResults.mergedArrays)}
Spread in object: ${JSON.stringify(spreadRestResults.spreadObject)}
Rest in function (sum): ${spreadRestResults.restSum}
Rest with regular params: ${JSON.stringify(spreadRestResults.restProcess)}`
  );
}

Praktik Terbaik

Destructuring di Parameter Function

// Good
function displayUser({ name, age, email }) {
  console.log(`${name}, ${age}, ${email}`);
}

// Lebih baik dari
function displayUser(user) {
  console.log(`${user.name}, ${user.age}, ${user.email}`);
}

Spread untuk Immutability

// Menghindari mutasi langsung
const newArray = [...oldArray, newItem];
const newObject = { ...oldObject, newProp: value };

Rest untuk Flexible Functions

function createMessage(greeting, ...names) {
  return `${greeting} ${names.join(', ')}!`;
}

Performance

Spread operator sangat efisien untuk array/object kecil hingga menengah. Untuk data yang sangat besar, pertimbangkan methods alternatif seperti Object.assign() atau operasi manual.

Latihan

Destructure object dengan nested properties minimal 3 level
Buat function yang menerima rest parameters dan mengembalikan statistik (min, max, average)
Merge 3 objects dengan spread operator dan override beberapa properties
Gunakan destructuring dalam loop for...of

On this page