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.
Top comments (0)