Common uses of destructuring in projects

Author: Ruphaa
Translator: Front-end Xiaozhi Source: dev

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

In this article, you will learn everything you need to know about JS destructuring.

Why does destructuring exist in JS?

This is an ordinary object that contains the names of 4 people.

 const names = {
    taylor: '小智',
    shawn: '前端小智',
    zayn: '大志',
    halsey: '王大志',
}

Now, what would you do if you were asked to manually print all names to the console. might do this:

 console.log(names.taylor)
console.log(names.shawn)
console.log(names.zayn)
console.log(names.halsey)

This way of dots is kind of annoying, how can I make it better?

 const taylor = names.taylor
const shawn = names.shawn
const zayn = names.zayn
const halsey = names.halsey

console.log(taylor)
console.log(shawn)
console.log(zayn)
console.log(halsey)

much better. But we are still repeating the same work. What if we could declare and assign object properties on a single variable?

That would be better, right? That's where object destructuring helps us. So we can do this:

 const { taylor, shawn, zayn, halsey} = names

console.log(taylor)
console.log(shawn)
console.log(zayn)
console.log(halsey)

This is much better than before.

How does it work?

this is very simple. We just take the properties out of the object and store them in a variable. By default, variable names are the same as property names. So we can write:

 const { taylor, shawn, zayn: zaynMalik, halsey} = names

Array destructuring?

Array destructuring is similar to object destructuring, with some differences. We know that data is stored in an array with an index. They are in order. Therefore, when destructuring, we must maintain order. for example:

 const albums = ['Lover', 'Evermore', 'Red', 'Fearless']

const [lover, ever] = albums
// Lover Evermore

Also, arrays don't have a value property. So, you can directly give any variable name you want.

Let's move on to some use cases for object and array destructuring.

array destructuring

swap variables

 let a = 1;
let b = 3;

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

ignore some return values

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

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

Defaults

 let a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

Create subarray with Rest parameters

 const albums = ['Lover', 'Evermore', 'Red', 'Fearless']

const [, ...albums2] = albums

console.log(albums2) // ['Evermore', 'Red', 'Fearless']

object destructuring

Destructuring fields from objects passed as function arguments

 const anjan = {
        name: '前端小智', age: 20
}

const statement = ({name, age}) => {
        return `My name is ${name}. I am ${age} years old.`
}

statement(anjan)
// My name is 前端小智. I am 20 years old.

Nested object destructuring

 const profile= { 
  name: 'Anjan', 
  age: 20,
  professional: {
     profession: '前端开发',
  }
}

const {name, age, professional: {profession}} = profile

console.log(professional) // 这句会报错
console.log(profession) // 前端开发

Defaults

 const {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

Nested object and array destructuring

 const taylor = {
  name: 'Taylor Swift',
  age: 31,
  address: {
      city: 'New York',
      country: 'USA',
  },
  albums: ['Lover', 'Evermore', 'Red', 'Fearless'],
}

const {
  name,
  age,
  address: { city },
  albums: [lover, ...rest],
} = taylor

console.log(name) // Taylor Swift
console.log(age) // 31
console.log(city) // New York
console.log(lover) // Lover
console.log(rest) // [ 'Evermore', 'Red', 'Fearless' ]

That's all you need to know about JS destructuring.

---

The bugs that may exist in editing cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, here is a useful BUG monitoring tool , Fundebug .

Original: https://dev.to/thatanjan/everything-you-need-to-know-about-javascript-destructuring-30e5

comminicate

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.