This content originally appeared on Go Make Things and was authored by Go Make Things
Over the last few days, we’ve looked at various ways to manipulate arrays. If you missed any of them, learn how to loop, modify, filter, chop, and sort.
Today, we’re going to look at how to chain multiple functions together. Let’s dig in!
An example array
For today’s article, we’ll use an array of objects. Each object in the array is a wizard, and some details about them.
let wizards = [
{
name: 'Radagast',
spells: ['Talk to animals', 'Make plants grow'],
tool: 'staff'
},
{
name: 'Merlin',
spells: ['Dancing teacups', 'Turn into fish'],
tool: 'wand'
},
{
name: 'Gandalf',
spells: ['You shall not pass', 'Disappear'],
tool: 'staff'
}
];
Let’s imagine that we want to get an array that contains just the names of wizards who use a staff, sorted alphabetically.
Chaining array methods
You can chain any array method that returns a new array. For what we’re trying to do, we might use the Array.prototype.filter() method to get an array of just wizards who use a staff, then Array.prototype.map() to create an array of just names, then Array.prototype.sort() to sort them alphabetically.
Because each method returns an array, we can chain them in sequence.
// returns ["Gandalf", "Radagast"]
let wizardsWithStaffs = wizards.filter(function (wizard) {
return wizard.tool === 'staff';
}).map(function (wizard) {
return wizard.name;
}).sort();
Looping
Alternatively, you can create your array of names using a for...of loop and the Array.prototype.push() method, then sort it.
let wizardsWithStaffs = [];
for (let wizard of wizards) {
if (wizard.tool !=='staff') continue;
wizardsWithStaffs.push(wizard.name);
}
wizardsWithStaffs.sort();
Which one should you use?
In my opinion, chaining is the clear winner here. It’s about the same number of lines, but I think the resulting code is a lot more readable.
As always, though, if looping and pushing feels more natural to you, by all means use it!
🔥 Join the Vanilla JS Academy! A new session starts on January 30. Click here to learn more.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2023-01-18T14:30:00+00:00) Chaining array methods with vanilla JavaScript. Retrieved from https://www.scien.cx/2023/01/18/chaining-array-methods-with-vanilla-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.