Hello Guys,
Welcome to Top 10 Javascript tricks for clean code
Series #1 : " Object Destructuring "
Its me Md Taqui Imam.
Today In this Blog series #1 i will try to Go in-dept on "Object Destructuring" as possible with examples .
So. Let's Get Started🔥.
❓ What is Object Destructuring?
Object destructuring is a cool feature in modern JavaScript that can help make your code cleaner and easier to read. Here are some tips for using object destructuring like a pro!
📚 What to use Object Destructuring?
Destructuring allows you to unpack values from arrays or properties from objects into distinct variables.
For example:
const person = {
firstName: "John",
lastName: "Doe",
age: 30
};
// Without destructuring
const firstName = person.firstName;
const lastName = person.lastName;
const age = person.age;
// With destructuring
const {firstName, lastName, age} = person;
So with destructuring we can extract multiple properties into variables in one line instead of doing it manually. Pretty sweet!
🍭 Common Uses for Object Destructuring
There are a few handy ways you can use object destructuring to write cleaner code:
1. Extracting function parameters
// Without destructuring
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
return `${firstName} ${lastName}`;
}
// With destructuring
function getFullName({firstName, lastName}) {
return `${firstName} ${lastName}`;
}
getFullName({firstName: "John", lastName: "Doe"});
No more repetitive code to extract firstName and lastName!
2. Destructuring return values
// Without destructuring
function calculate() {
return {result: 10};
}
const obj = calculate();
const result = obj.result;
// With destructuring
function calculate() {
return {result: 10};
}
const {result} = calculate();
Unpack what you need directly into variables.
3. Renaming extracted variables
You can also rename the extracted variables by doing:
const {firstName: fn, lastName: ln} = person;
This reassigns firstName to a variable called fn instead. Helpful for avoiding naming conflicts!
4. Setting default values
You can set default values if the extracted property doesn't exist:
const {middleName = "N/A"} = person;
Now middleName will be "N/A" if it's undefined on person.
🏁 Destructuring is Your Friend!
There are many other neat tricks for destructuring objects and arrays in JavaScript. But these examples should give you a good starter kit to start writing cleaner code.
Give it a try and see how destructuring can tidy up your code !
Bonus 🎉:
10 use cases for JavaScript object destructuring with examples 🎉
1. Assign Variables from Properties
const user = {
name: 'John Doe',
age: 30
};
const { name, age } = user;
console.log(name); // John Doe
console.log(age); // 30
This allows us to extract properties from an object and assign them to variables in one line.
2. Assign with Alias
const user = {
name: 'John Doe',
id: 123
};
const { name: userName, id: userId } = user;
console.log(userName); // John Doe
console.log(userId); // 123
We can alias the properties when destructuring to give them different variable names.
3. Assign Default Values
const user = {
name: 'John Doe'
};
const { name, age = 30 } = user;
console.log(name); // John Doe
console.log(age); // 30
Default values allow falling back to something if the property is undefined.
4. Nested Objects
const user = {
name: 'John Doe',
profile: {
age: 30,
location: 'Canada'
}
};
const { profile: { age, location } } = user;
console.log(age); // 30
console.log(location); // Canada
We can access nested properties by destructuring nested objects.
5. Arrays
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
We can destructure arrays in the same way as objects.
6. Return Multiple Values
function calc() {
return {
sum: 1 + 2,
product: 3 * 4
};
}
const { sum, product } = calc();
console.log(sum); // 3
console.log(product); // 12
Destructuring allows functions to return multiple values which we can assign to variables.
7. Parameter Handling
function add({ a, b }) {
return a + b;
}
add({ a: 1, b: 2 }); // 3
When calling functions, we can destructure parameters passed in.
8. Omit Properties
const user = {
id: 42,
isAdmin: false,
name: 'John'
};
const { id, ...userWithoutId } = user;
console.log(id); // 42
console.log(userWithoutId); // {isAdmin: false, name: "John"}
We can omit properties during destructuring.
9. String Destructuring
const [first, second] = 'hello';
console.log(first); // 'h'
console.log(second); // 'e'
Strings can also be destructured like arrays.
10. Destructure Functions
const add = ({a, b}) => a + b;
add({a: 1, b: 2}); // 3
Function parameters can be destructured for convenient usage.
Thankyou for reading this blog,
i hope you find this helpful and learned something new 😊
*See you next series of Javascript clean Coding Tricks *
Don't Forget to Like 💖🦄🔥
Top comments (0)