This content originally appeared on Go Make Things and was authored by Go Make Things
Yesterday, we looked at how to create a unique copy of an array or object. Today, we’re going to talk about how to merge multiple arrays or objects together.
Let’s dig in!
Merging arrays
You can use the Array.prototype.concat() method to merge two or more arrays together.
Call the concat() method on the first array, and pass each array to merge with it in as arguments. It returns a new array.
let wizards1 = ['Gandalf', 'Radagast'];
let wizards2 = ['Merlin', 'Ursula'];
let allWizards = wizards1.concat(wizards2);
// logs ["Gandalf", "Radagast", "Merlin", "Ursula"]
console.log(allWizards);
You can alternatively use the spread operator (...) to create a new array with the values of your other arrays.
let allWizards = [...wizards1, ...wizards2];
Merging objects
You can use the Object.assign() method to merge two or more objects together.
Pass in each object to merge as an argument. By default, all subsequent objects are merged into the first. To create a new object, use an empty object ({}) as your first argument.
let merlin = {
job: 'Wizard',
age: 142,
wand: true
};
let radagast = {
job: 'Druid',
age: 442,
staff: true
};
let mergedWizards = Object.assign({}, merlin, radagast);
// logs {job: 'Druid', age: 442, wand: true, staff: true}
console.log(mergedWizards);
You can alternatively use the spread operator (...) to create a new object with the values of your other objects.
let mergedWizards = {...merlin, ...gandalf};
Deep merging
The methods included here all do what’s called a shallow merge. If the array or object contains a nested array or object, it’s properties overwrite the previous value rather than being merged into it.
For example, here, both our objects contain an array of spells.
let merlin = {
job: 'Wizard',
spells: ['Dancing teacups', 'Disappear']
};
let radagast = {
job: 'Druid',
spells: ['Talk to animals', 'Navigate']
};
let mergedWizards = Object.assign({}, merlin, radagast);
When merging these together, the radagast.spells array completely overwrites the merlin.spells array. They’re not merged together.
In a deep merge, the properties of the spells arrays would be merged together.
Tomorrow, we’ll take a look at how to deep merge objects and arrays.
Is there a JavaScript or web development topic you'd like to learn more about? Send me an email and let me know.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2023-01-04T14:30:00+00:00) Merging arrays and objects with vanilla JavaScript. Retrieved from https://www.scien.cx/2023/01/04/merging-arrays-and-objects-with-vanilla-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.