Destructuring assignment

Let´s talk about destructuring.

We are going to start with a simple desctruturing example.

let a,b;
[a,b] = [10, 20];

console.log(a)
// Expected output: 10
console.log(b)
// Expected output: 20

Here we will see how defining "a" and "b" then we are assigned a value to it.

Array Destructuring

Basic variable assingnment
We are assigning a variable and then destructuring it, in order to call each part to get the specific value.

const foo = ["one", "two", "three"];

const [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

Parsing an array returned from a function

We will see how to pass a function into a destructuring variable.

function uno(){
  return [1, 2];
}

const [a,b] = uno();
console.log(a); // 1
console.log(b); // 2

We can also ignore return values from a function

function uno(){
  return [1, 2, 3];
}

const [a, ,b] = uno();
console.log(a); // 1
console.log(b); // 3

Object desctructuring

const user = {
  id: 42,
  isVerified: true,
};

const {id, isVerified} = user;

console.log(id); // 42
console.log(isVerified); // true

Assigning to new variable names

const o = {p: 42, q: true};
const {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true

Unpacking properties from objects passed as a function parameter
We will see how to unpackage properties from objects when we passed it to a function which it will return an specific thing from the object

const user = {
 id: 42,
 displayName: "jdoe",
 fullName: {
  firstName: "jane",
  lastName: "Doe"
 },
};

function userId({id}){
  return id;
}

console.log(userId(user)); // 42

We have created a function that will return the id, so we will get the id as a parameter on the function and when we are calling the function we will pass the object "user".

If you want more examples about it you can checkout the mdn documentation

Thank you so much for reading. I hope someone found it helpful.

If you want to reach to me you can contact me through my email "lautaro.suarez.dev@gmail.com"

Lautaro.