Here, we will talk about examples on de-structuring, rest/spread operators and template literals
De-structuring assignment
Array De-structuring Example
let arr = ["Art", "Vandelay"];
let [firstName, lastName] = arr;
console.log(firstName); // Art
console.log(lastName); // Vandelay
De-structuring applies to any iterables, not just arrays
More examples:
// 1. swapping 2 variables
let x = 2;
let y = 1;
[x,y] = [1,2]
console.log(x,y); // 1 2
// 2. The Rest operator ...
let [a, b, ...etc ] = ["Apple", "Banana", "Cat", "Dog"];
console.log(etc[0]);
console.log(etc[1]);
// 3. Object destructuring
let user = {
id: 1,
name: "Rahul",
age: 20
};
let {id, name, age, gender = "male"} = user;
console.log(id); // 1
console.log(name); // Rahul
console.log(age); // 20
console.log(gender); // male
Rest parameter examples
// 1. merging arrays
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [6, 7, 8, 9, 10];
let merged = [...arr1, ...arr2];
console.log(merged); // 1, 2, 3, 5, 6, 7, 8, 9, 10
Template literals example
// Simple template literal example in JavaScript
const name = "Rahul";
const greeting = `Hello, ${name}!`;
console.log(greeting);
// Output: Hello, Rahul!
Conclusion
De-structuring assignment, rest/spread operators and template literals are used so much in React projects. They help in enhancing code readability and maintaining clean, efficient code, especially in React projects.
Thanks for Reading!