JavaScript Array#Concat
Definition:
The Concat() method merges two arrays (e.g, ArrayA, ArrayB) and returns a new array containing the combined members of both ArrayA and ArrayB.
Parameters & Return Value:
The concat() method is invoked on an array instance accepting an N number of values or arrays as arguments.
The return value is a newly merged array containing the initial members of the subject array followed by the parameters passed to concat().
For Example:
const arrayA = [1,2,3,4,5];
const arrayB = [6,7,8,9,10];// Merging two arrays
const arrayAB = arrayA.concat(arrayB);// Merging a single array and value
const arrayAndOne = array.concat(1);// Merging a single array and multiple values
const arrayAndValues = array.concat(1,2,3);// Merging a single array and a nested array
const arrayAndNestedArrayB = arrayA.concat([arrayB]);console.log(arrayAB); // [1,2,3,4,5,6,7,8,9,10]
console.log(arrayAndOne); // [1,2,3,4,5,1]
console.log(arrayAndValues); // [1,2,3,4,5,1,2,3]
console.log(arrayAndNestedArrayB); // [1,2,3,4,5,[6,7,8,9,10]]
ES2015 Spread Format:
ES2015 offers a new way to merge arrays using the spread format. Similar to our ES5 examples, the return value is a new array.
const arrayA = [1,2,3,4,5];
const arrayB = [6,7,8,9,10];// Merging two arrays
const arrayAB = [...arrayA, ...arrayB];// Merging a single array and value
const arrayAndOne = [...arrayA, 1];// Merging a single array and multiple values
const arrayAndValues = [...arrayA, 1, 2, 3];// Merging a single array and a nested array
const arrayAndNestedArrayB = [...arrayA, [...arrayB]];console.log(arrayAB); // [1,2,3,4,5,6,7,8,9,10]
console.log(arrayAndOne); // [1,2,3,4,5,1]
console.log(arrayAndValues); // [1,2,3,4,5,1,2,3]
console.log(arrayAndNestedArrayB); // [1,2,3,4,5,[6,7,8,9,10]]
Example Data:
Great. Now that we have a better understanding of what the concat() method does. Let’s analyze how we would use it in a real world application.
Our data is a single state object with an array containing multiple blog posts objects. It has the following properties:
- Title
- Author
- Comment
const state = {blogPosts: [{"title": "I Love Programming", "Author": "Jose", "Comment": "Programming isn't easy"},{"title": "Traveling Abroad", "Author": "Mike", "Comment": "Hire a Pilot"},{"title": "Going to Space", "Author": "Sandra", "Comment": "Meet Elon Musk"},{"title": "How to Make Money Online", "Author": "Cheryl", "Comment": "Sell Get Rich Quick Schemes"},{"title": "How to Get Rich or Die Trying", "Author": "Sandy", "Comment": "Become a Rapper"},],
}
Challenge:
For our real world application, we are storing an array of blog posts in a state object. We want to keep our state object immutable and therefore our existing array of blog posts should not be mutated.
If we want to add a new blog post to the existing array, we will need to create a new array combining the existing blogs with the new one and assign it to the state object.
- Create a function addBlogPost that accepts a state object and a blog post object. It should return a new copy of the state object containing the merged blog post array.
function updateBlogPosts(state, post) {
// Here we use the ES2015 spread operator to create a new copy of the state object. As you can imagine, it works similar to how we use it on an array.
let newState = {...state}; // Merge existing blog posts with the new post and assign to the new state object.
const newState.blogPosts = [...newState.blogPosts, post]
return newState;
}
2. Invoke addBlogPost function with new post
3. Log return value to console
const newBlogPost = { "Title": "I promise not to mutate your original state", Author: "Immutable", "Comment": "I really promise yo" };console.log(updateBlogPosts(state, newBlogPost));> [ { title: 'I Love Programming',
Author: 'Jose',
Comment: 'Programming isn\'t easy' },
{ title: 'Traveling Abroad',
Author: 'Mike',
Comment: 'Hire a Pilot' },
{ title: 'Going to Space',
Author: 'Sandra',
Comment: 'Meet Elon Musk' },
{ title: 'How to Make Money Online',
Author: 'Cheryl',
Comment: 'Sell Get Rich Quick Schemes' },
{ title: 'How to Get Rich or Die Trying',
Author: 'Sandy',
Comment: 'Become a Rapper' },
{ Title: 'I promise not to mutate your original state',
Author: 'Immutable',
Comment: 'I really promise yo' } ]
Conclusion:
I hope you have gained a better understanding of how to use the concat() method through a potential real world application. If you enjoyed this tutorial, please feel free to clap a few times and check out some of my other articles. Until next time, be well : ).
