Insert an array in the middle of another array with ES6 Spread

This video covers stepwise approach on how to insert an array in the middle of an existing array using Spread Element in ES6.

You may want to read What is Spread in JavaScript to get an overview of Spread Element in ES6.

Code

/**
* Goal: Insert english2Gpa in the middle of english1Gpa
*/
let english1Gpa = [2.3, 2.80, 2.82];
let english2Gpa = [2.42, 2.47, 2.77];
let middleIndex = Math.floor(english1Gpa.length/2);
english1Gpa.splice(middleIndex, 0, ...english2Gpa);
console.log(english1Gpa);

Full Transcript

0:00 Hi everyone. It's Deeksha from bonsaiilabs. Welcome to the JavaScript series. This video today covers the stepwise approach on how to insert an array in the middle of an existing array, and we can do that using spread element in ES6. So let's dive into the details. Here is our problem statement. We have two different arrays containing GPAs of students in English language. Our goal is to insert english2Gpa array in the middle of english1Gpa such that the result looks like this. All the elements from english2Gpa array are inserted in the middle. The focus of this video is to work on the approach to solve a problem and we will do that in three simple steps. So first thing, we need a way to find the middle position in an array. Next, we also need to find if array provides a method to add elements in place.

0:48 And finally we need a way to open up all the elements from english2Gpa inside english1Gpa array. We will do all of that one by one. There exists different ways to find the middle index in a given array, but one of them is by using this piece of code, dividing the array length by two gives us the middle index of the array, but the length of the array could be an even or an odd number and we want the resulting index to be an integer and math is a built-in object in JavaScript that can help us doing that. Floor method, when applied on math object returns the largest integer which is either less than or equal to the number passed as an argument. So the middle index of an array that has a length of five returns, two and the one would length six returns

1:31 the middle index equals three. Now our second step is to identify a way such that we could add elements at a specific position in an existing array. Splice is a method that can help us do that. It takes three parameters, a start index to indicate where to start from. deleteCount indicating the number of items to delete starting from the start index and items, which refers to the elements that should be added in sequence. Note that splice method modifies the original array. It doesn't return a new array with all the changes that we want. Finally, we must also know how to spread and open an array inside another array so that we can place elements at a position we found here comes the spread element in JavaScript, which allows an Iterable like array to be expanded and opened inside the array literal. For example, if scores is an array, we can pretty much spread all the elements from scores into this newScores that are literal by using the spread element, which is represented by three dots.

2:29 And you will see that newScores now have all the elements from scores. So let's now stitch all these pieces together to solve our problem. Alright, so time to write the code on the editor. We have two arrays already here. We are going to find the middle index of english1Gpa array now. To find the middle index, we are going to name a variable middleIndex and we will use math.floor as we saw previously and we will pass as argument english1Gpa length and that has to be divided by two because we need to find middle index. Once we have the middleIndex, now we are going to splice the english1Gpa array. During splicing, we need to pass the first argument as start index, which is going to be the middleIndex. We want to start inserting the elements from this index onwards.

3:15 Zero is the count and we are going to spread english2Gpa array. Now spread expands all the elements that were in english2Gpa array right here. Now it's time to log the value of english1Gpa array because we spliced it, we will do console.log english1Gpa. Alright, so let's run the program and see what the result is. If you notice splice did change the original array, but we were able to insert english2Gpa array starting from the middle index. So I hope you got the idea how to make use of math.floor to find the middle index. Then then splicing the array and finally using the spread element open up the elements inside the array. I hope this small session was helpful for you. Thanks for watching. And if you have any questions, drop the comments. You may want to subscribe to this channel if you want to learn fast with these short videos. Until then, my friends keep learning and share your knowledge.