Destructuring assignment is a JavaScript feature which allows assignment of values from array and properties from object to distinct variables.
Examples
Swapping two numbers
let a = 10, b = 20;
console.log(`a = ${a} and b = ${b}`);
[a, b] = [b, a];
console.log(`a = ${a} and b = ${b}`);a = 10 and b = 20 a = 20 and b = 10
Variable assignment
const colors = ['#ff0000', "#00FF00", "#0000FF"];
const [red, green, blue] = colors;
console.log(red, green, blue);#ff0000 #00FF00 #0000FF
const pc = {
ram: 32,
cpu: 'ryzen 5000',
gpu: 'rtx 3080',
};
const { ram, gpu } = pc;
console.log(ram, gpu);32 rtx 3080
Assigning default values
let [burger = 3.5, fries = 1.45] = [4.2];
console.log(`Today's rate - Burger $${burger} and Fries $${fries}`);Today's rate - Burger $4.2 and Fries $1.45
const { primaryPower = 'flight', secondaryPower = 'strength' } = { secondaryPower: 'invisibility' };
console.log(primaryPower, secondaryPower);flight invisibility
Assigning remaining values
const numbers = [1, 2, 3, 4, 5];
const [one, ...otherThenOne] = numbers;
console.log(one, otherThenOne);1 [ 2, 3, 4, 5 ]
New variable name
const { origVar: newVar } = { origVar: 'What are you looking at?' }
console.log(newVar);What are you looking at?