React ES6 Destructuring - React Tutorial

Imagine making a sandwich, you don’t pull everything out of the refrigerator, just the ingredients you need. Destructuring works the same way. When working with arrays or objects, you can extract only the items you need, making your code cleaner and more efficient.

Destructuring Arrays

Here’s the old method of assigning array items to variables:

Before

const devices = ['laptop', 'tablet', 'smartphone'];

// Old way
const desktop = devices[0];
const portable = devices[1];
const mobile = devices[2];

JavaScript
​x
 
const devices = ['laptop', 'tablet', 'smartphone'];​// Old wayconst desktop = devices[0];const portable = devices[1];const mobile = devices[2];

Here’s the new method using destructuring:

With Destructuring

const devices = ['laptop', 'tablet', 'smartphone'];

// New way
const [desktop, portable, mobile] = devices;

JavaScript
 
const devices = ['laptop', 'tablet', 'smartphone'];​// New wayconst [desktop, portable, mobile] = devices;

The order of the variables is crucial. If you only need the desktop and mobile, you can skip over the intermediate value:

const devices = ['laptop', 'tablet', 'smartphone'];

const [desktop,, mobile] = devices;

JavaScript
 
const devices = ['laptop', 'tablet', 'smartphone'];​const [desktop,, mobile] = devices;

Example

Destructuring is particularly useful when a function returns an array:

function compute(a, b) {
    const sum = a + b;
    const difference = a - b;
    const product = a * b;
    const quotient = a / b;

    return [sum, difference, product, quotient];
}

const [sum, difference, product, quotient] = compute(8, 2);

JavaScript
 
function compute(a, b) {    const sum = a + b;    const difference = a - b;    const product = a * b;    const quotient = a / b;​    return [sum, difference, product, quotient];}​const [sum, difference, product, quotient] = compute(8, 2);

Destructuring Objects

Here’s the old way of using an object within a function:

Before

const gadget = {
    brand: 'Apple',
    model: 'iPhone',
    type: 'mobile',
    year: 2022,
    color: 'black'
};

// Old way
function displayGadget(gadget) {
    const description = 'My ' + gadget.type + ' is a ' + gadget.color + ' ' + gadget.brand + ' ' + gadget.model + '.';
}

displayGadget(gadget);

JavaScript
 
const gadget = {    brand: 'Apple',    model: 'iPhone',    type: 'mobile',    year: 2022,    color: 'black'};​// Old wayfunction displayGadget(gadget) {    const description = 'My ' + gadget.type + ' is a ' + gadget.color + ' ' + gadget.brand + ' ' + gadget.model + '.';}​displayGadget(gadget);

Here’s the new method with destructuring:

With Destructuring

const gadget = {
    brand: 'Apple',
    model: 'iPhone',
    type: 'mobile',
    year: 2022,
    color: 'black'
};

function displayGadget({type, color, brand, model}) {
    const description = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}

displayGadget(gadget);

JavaScript
 
const gadget = {    brand: 'Apple',    model: 'iPhone',    type: 'mobile',    year: 2022,    color: 'black'};​function displayGadget({type, color, brand, model}) {    const description = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';}​displayGadget(gadget);