DEV Community

_Khojiakbar_
_Khojiakbar_

Posted on • Edited on

Array Destructuring / Object Destructuring

Array Destructuring

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

Image description

Basic Example

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

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
Enter fullscreen mode Exit fullscreen mode

Skipping Values

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

console.log(a); // 1
console.log(b); // 3
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

Object Destructuring

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

Image description

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
Enter fullscreen mode Exit fullscreen mode

Renaming Variables

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

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

Enter fullscreen mode Exit fullscreen mode

Default Values

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

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

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."
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay