DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Destructuring Assignment to Object Properties in JavaScript
BjΓΈrn
BjΓΈrn

Posted on

Destructuring Assignment to Object Properties in JavaScript

Originally posted at bjΓΈrn.dev

TLDR; I was wondering whether it would be possible to use Destructuring Assignment to assign a value directly to a property of an Object. Somehow I was not able to find any info about this online, not even on the MDN pages. Turns out it is possible, see below.

I’m sure that by now we all know about destructuring assignment in JavaScript. The straight forward destructuring assignment of an Array looks like this:

// suppose we have the array:
const x = [2, 3, 4, 5, 6];

// now we can assign values like this:
const [a] = x;        // a === 2
const [,b] = x;       // b === 3
const [,,c, ...rest]; // c === 4 && rest === [5, 6]
Enter fullscreen mode Exit fullscreen mode

With Objects it’s also possible to use destructuring assignment:

// suppose we have the object
const y = {k: 42, l:96, m: 15, n: 16};

// assignment can be done like this
let {k} = y;                // k === 42
let {l: d} = y;             // d === 96
let {k, l: d, ...rest} = y; // k === 42 && d === 96 && rest === {m: 15, n: 16}
Enter fullscreen mode Exit fullscreen mode

It’s even possible to use destructuring with function parameters:

// destructuring function parameters
function q({a, b}){
    console.log(a, b);
}

q({a: 3, b: 5}); // logs: 3 5

// destructuring with reassignment
function r({a: x, b: y}){
    console.log(x, y);
}

r({a: 33, b: 55}); // logs: 33 55

// with default values
function s({a = 3, b = 5, c = 7} = {}){
    console.log(a, b, c);
}

s();        // logs: 3 5 7
s({b: 42}); // logs: 3 42 7

// with default values, nested objects and reassignment
function t({a: x = 3, b: y = 5, some: {value: z = 'empty'}} = {}){
    console.log(x, y, z);
}

t({a: 6, some: {otherValue: 7}}); // logs: 6 5 "empty"
Enter fullscreen mode Exit fullscreen mode

There are plenty more variants, like swapping values and using defaults. Most of them can be found in articles all over the internet, like for instance on MDN.

// swapping variables
let x = 16;
let y = 22;
[y, x] = [x, y]; // x === 22 && y === 16 

// using defaults
const x = [2, 3, 4];
const [,, a = 6, b = 8] = x; // a === 4 && b === 8
Enter fullscreen mode Exit fullscreen mode

Assigning directly to an Object Property

One thing I don't usually see anything written about though is assigning to a property of an object using destructuring assignment. I'm talking about something like this:

const x = [2, 3, 4];
const y = {z: 42};

// instead of doing this
y.z = x[1]; // y.z === 3

// we can write:
[,y.z] = x; // y.z === 3 πŸ‘Œ sweet!
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
cabrouwers profile image
CABrouwers

Thanks. I tried destructuring assignment to properties but ran into troubles. Is anyone able to explain what is going on in the following code, especially why the output is different for the three segments of code.

Code

var x = {}
x.a = 3
[x.a,x.b]= [1,2]
console.log(x)

var x = {}
[x.a,x.b]= [1,2]
console.log(x)

 var y = {}
 [y.a,y.b]= [1,2]
 console.log(y)
Enter fullscreen mode Exit fullscreen mode

Output

{ a: [ 1, 2 ] }
[ 1, 2 ]
TypeError: Cannot read property 'a' of undefined
    at /home/runner/CandidTornTypes/index.js:11:5
Enter fullscreen mode Exit fullscreen mode

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.