Array Destructuring / Object Destructuring

Array Destructuring

Array destructuring allows you to unpack values from arrays into separate variables.

Basic Example

const array = [1, 2, 3];
const [a, b, c] = array;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Skipping Values

const array = [1, 2, 3, 4];
const [a, , b] = array; 

console.log(a); // 1
console.log(b); // 3

Using Rest Operator

const array = [1, 2, 3, 4, 5];
const [a, b, ...rest] = array;

console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

Object Destructuring

Object destructuring allows you to extract properties from objects into variables.

Basic Example

const obj = { x: 1, y: 2, z: 3 };
const { x, y, z } = obj;

console.log(x); // 1
console.log(y); // 2
console.log(z); // 3

Renaming Variables

const obj = { x: 1, y: 2 };
const { x: a, y: b } = obj;

console.log(a); // 1
console.log(b); // 2

Default Values

const obj = { x: 1 };
const { x, y = 2 } = obj;

console.log(x); // 1
console.log(y); // 2

Nested Destructuring

const obj = {
  name: 'John',
  address: {
    city: 'New York',
    state: 'NY'
  }
};
const { name, address: { city, state } } = obj;

console.log(name); // John
console.log(city); // New York
console.log(state); // NY

Function Parameters

Destructuring can also be used to simplify the handling of function parameters, especially when dealing with options objects.

function greet({ name, age }) {
  console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}

const person = { name: 'Alice', age: 25 };
greet(person); // Hello, my name is Alice and I am 25 years old.

Default value

let person = {
    name: 'Ali',
    age: 33,
    job: 'programmer',
    isMale: true,
}
let insan = {
    name: 'Asiya',
    age: 34,
    job: 'doctor',
    isMale: false,
}

function showData(db=insan) {
    const {name, age, job, isMale} = db
    console.log(`"${name}, a ${age}-year-old ${job}, loves ${isMale ? 'his' : 'her'} job."`);
}

showData(person) // "Ali, a 33-year-old programmer, loves his job."

showData()      // "Asiya, a 34-year-old doctor, loves her job."

Destructured object as a parameter

let malePerson = {
    name: 'Ali',
    age: 33,
    job: 'programmer',
    isMale: true,
}
let femalePerson = {
    name: 'Asiya',
    age: 34,
    job: 'doctor',
    isMale: false,
}

function showData({name, age, job, isMale}) {
    console.log(`"${name}, a ${age}-year-old ${job}, loves ${isMale ? 'his' : 'her'} job."`);
}

showData(malePerson)
showData(femalePerson)

These are some of the common ways to use destructuring in JavaScript. It can make your code cleaner and more readable by reducing the amount of boilerplate code required to extract values from arrays and objects.