Search for a command to run...
I’m Tomek, software engineer, working mostly with Ruby on Rails.
I work remotely at Mixlr where every day we deliver live audio to millions of listeners.
After hours, I write, read, and help my wife run theCode.xyz
Thanks for the details about JavaScript. I have learned a lot. You may like GTRacing.
I do love to use destructuring for most everything in my JS code-bases 🤓 But your article actually got me curious which one is actually faster 🤔
So I made a quick benchmark seems like they're pretty much on par, so I'll always go with the destructuring then 😍 - Hopefully the V8-team will increase the performance of this in the future though!
Hey Mads, that's a great insight. And the cool tool for making benchmarks. I used to play a lot with benchmarks in the Ruby ecosystem (that's the language I have worked with most), need to give it a spin in JS.
As anyone who has written code knows, there are a million ways to break it. That's why code testing is so important - it's a way to make sure that your code is doing what it's supposed to, and that it can handle everything that's thrown at it. Unit T...
What is refactoring? Refactoring is the process of improving the design of existing code without changing its functionality. As software developers, we are constantly faced with the need to improve and optimize our code. Whether it's for performance,...
Composition and Inheritance There are two main ways to reuse code in object-oriented programming: composition and inheritance. Both have their advantages and disadvantages, and the choice of which to use in a given situation is a design decision. Wha...
Promises are one of the core features of JavaScript that allows us to write asynchronous code in a more synchronous way. Promises give us a way to handle asynchronous operations in a more linear fashion and make it easier to reason about our code. In...
What is the Pareto Principle? The Pareto Principle, also known as the 80/20 rule, is a powerful tool that can be used to improve efficiency and effectiveness in many different areas of life. The principle is simple: for many events, roughly 80% of th...
Destructuring in JavaScript is a powerful feature that lets you extract values from data structures like arrays and objects. It can be used to make your code more readable and concise.
In this blog post, we'll take a look at what destructuring is, how it works, and some of the benefits of using it.
Destructuring is simple though it might seem magical and confusing at first glance. It works by taking an array or object and creating variables from its properties.
For example, let's say you have an array of numbers called myNumbers:
const myNumbers = [1, 2, 3, 4, 5];
You can use destructuring to create variables from the elements of the array.
const [first, second, third, fourth, fifth] = myNumbers;
console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
console.log(fourth); // 4
console.log(fifth); // 5
As you can see, destructuring lets you extract data from arrays and assign it to variables.
You can also use destructuring to extract data from objects.
For example, let's say you have a person object with properties name, age, and country:
const person = {
name: ' John Doe ',
age: 30,
country: ' United States '
};
You can use destructuring to create variables from the object's properties.
const { name, age, country } = person;
console.log(name); // John Doe
console.log(age); // 30
console.log(country); // United States
As presented above we can use destructuring to extract object properties and assign them to the variables.
Destructuring can also be used to extract data from nested data structures.
Let's say you have an array of objects with properties name, age, and country.
const people = [
{
name: ' John Doe ',
age: 30,
country: ' United States '
},
{
name: ' Jane Doe ',
age: 20,
country: ' Canada '
}
];
You can use destructuring to create variables from the nested object's properties.
const [{ name: name1, age: age1, country: country1 }, { name: name2, age: age2, country: country2 }] = people;
console.log(name1); // John Doe
console.log(age1); // 30
console.log(country1); // United States
console.log(name2); // Jane Doe
console.log(age2); // 20
console.log(country2); // Canada
This helps us simplify more complex data structure and extract values form each element of array.
Destructuring can also be used to extract data from function arguments.
Given that we have a function that takes an object with properties name, age, and country:
function sayHello({ name, age, country }) {
console.log(`Hello, my name is ${name}. I'm ${age} years old and I'm from ${country}.`);
}
You can use destructuring to extract the data from the object and pass it as an argument to the function.
sayHello({
name: ' John Doe ',
age: 30,
country: ' United States '
});
// Hello, my name is John Doe. I'm 30 years old and I'm from United States.
As you can see, destructuring makes it easy to extract data from data structures and pass it to functions as arguments.
Destructuring can be used to make your code more readable and concise. To show it we will compare code that uses destructuring with one that doesn't for the examples we wrote above.
Let's take our myNumbers array and try to sum up all the integers inside it.
Without destructuring, you would have to write the following code:
const myNumbers = [1, 2, 3, 4, 5];
let sum = 0;
for (const num of myNumbers) {
sum += num;
}
console.log(sum); // 15
With destructuring, you can write the following code:
const myNumbers = [1, 2, 3, 4, 5];
const [first, second, third, fourth, fifth] = myNumbers;
const sum = first + second + third + fourth + fifth;
console.log(sum); // 15
As you can see, destructuring can make your code more concise.
Let's take a look at object examples and how restructuring can help us make code more readable.
We will use our person object from the previous example.
Without destructuring, you would have to write the following code:
const person = {
name: ' John Doe ',
age: 30,
country: ' United States '
};
console.log(person.name); // John Doe
console.log(person.age); // 30
console.log(person.country); // United States
With destructuring, you can write the following code:
const person = {
name: ' John Doe ',
age: 30,
country: ' United States '
};
const { name, age, country } = person;
console.log(name); // John Doe
console.log(age); // 30
console.log(country); // United States
Using destructuring makes our code more readable.
Last but not least let's see how using destructuring to extract function arguments can help us make it easier to understand and work with:
We will use the sayHello function we are already familiar with from the example above.
Without destructuring, you would have to write the following code:
function sayHello(person) {
console.log(`Hello, my name is ${person.name}. I'm ${person.age} years old and I'm from ${person.country}.`);
}
sayHello({
name: ' John Doe ',
age: 30,
country: ' United States '
});
With destructuring, you can write the following code:
function sayHello({ name, age, country }) {
console.log(`Hello, my name is ${name}. I'm ${age} years old and I'm from ${country}.`);
}
sayHello({
name: ' John Doe ',
age: 30,
country: ' United States '
});
Our destructured example is both more concise and readable.
Destructuring is a powerful feature that can be used to make your code more readable and concise. It is a convenient way to extract data from data structures without having to write a lot of code.
If you're not already using destructuring in your JavaScript code, I encourage you to give it a try - it is worth adding to your toolbox.