Destructuring is a very simple concept in javascript, it allows you to pull out some variables from object/array, but it has a lot of features.
Basics
//destructuring object
const fruit = { id: 0, name: "apple", color: "red" };
const { name, id } = fruit;
console.log(id + ": " + name);//0: apple
//destructuring array
const range = [0, 5];
const [min, max] = range;
console.log(min + " - " + max);//0 - 5
//destructuring objects in array
const fruits = [
{ id: 0, name: "apple", color: "red" },
{ id: 1, name: "pear", color: "yellow" }
];
const [{name: appleName, id: appleId}, {name: pearName}] = fruits;
console.log(appleName);//apple
console.log(appleId);//0
console.log(pearName);//pear
Destructuring inside of for-of loop
const fruits = [
{ id: 0, name: "apple", color: "red" },
{ id: 1, name: "pear", color: "yellow" }
];
for(let { id, name } of fruits){
console.log(id + ": " + name);
//first loop> 0: apple
//second loop> 1: pear
}
Default value
const empty = {};
const { name = "apple", id = 5 } = empty;
console.log(id + ": " + name);//5: apple
const emptyRange = [];
const [min = 0, max = 100] = range;
console.log(min + " - " + max);//0 - 100
Renaming values
const fruit = { id: 0, name: "apple", color: "red" };
const { name: fruitName, id: fruitId } = fruit;
console.log(fruitId + ": " + fruitName);//0: apple
Destructuring function input
const printName = ({ name }) => {
console.log(name); //apple
};
const fruit = { id: 0, name: "apple", color: "red" };
printName(fruit);
Rest operator
const fruit = { id: 0, name: "apple", color: "red" };
const { name, ...other } = fruit;
console.log(name);//apple
console.log(other);// { id: 0, color: "red" }
//destructuring array
const range = [0, 5, 55, 100];
const [min, max, ...other] = range;
console.log(min + " - " + max);//0 - 5
console.log(other);// [55, 100]
Nested properties
const fruit = {
id: 0,
name: "apple",
properties: {
color: "red",
hasBugs: false
}
};
const {name, properties: {color, hasBugs, isMature = false }} = fruit;
console.log(name);//"apple"
console.log(color);//"red"
console.log(hasBugs);//false
console.log(isMature);//uses default value: false
Swap values
let [one, two] = [1, 2];
[two, one] = [one, two];
console.log(one);//2
console.log(two);//1
Split string
const namePassString = "hello:world";
const [username, password] = str.split(":");
console.log(username);//hello
console.log(password);//world
Top comments (0)