Copy and Combine Arrays with the Spread Operator

You learned that with the push and unshift methods, 0:00 you can add elements to the end and beginning of an array. 0:03 But what if you want to add elements somewhere between the beginning and end or 0:06 combine two or more arrays into a single array? 0:10 For example, say you had student lists from two different sources or 0:14 arrays, and you needed to combine both to make a single students list. 0:18 In this video, I'll teach you the basics of the spread operator, 0:22 a special syntax JavaScript provides to build, combine, and 0:26 manipulate arrays quickly and more seamlessly. 0:29 Open the file spread.js, and as always, in index.html, 0:32 update the script tag source attribute value to js/spread.js. 0:37 Spread.js currently contains an array named middle, 0:46 which holds the strings lettuce, cheese, and patty, 0:50 and a burger array that contains the strings top bun and bottom bun. 0:53 The spread operator expands an array, or 0:59 places the contents of one array into another array. 1:02 For example, I want to add the contents of this middle array 1:05 inside the burger array between the strings top bun and bottom bun. 1:10 I'll first try adding the middle variable to 1:15 the burger array between the two strings. 1:17 I'll log the burger array to the console. 1:23 When the burger array gets updated, 1:29 notice how the middle array literal is inserted into the burger array. 1:32 It's an array with an array. 1:37 This is okay if you're trying to create what's called a two-dimensional array, 1:38 which you'll learn about later in this course. 1:42 What I want is a single array with the five elements. 1:44 With the spread operator, you pass only the values of an array into another array. 1:49 The spread syntax consists of three dots, 1:55 immediately followed by the name of the array. 1:57 Just before the middle variable, add 1:59 By prepending the three dots to the variable name, all the values from 2:04 the middle array get unpacked and spread out into the burger array. 2:08 Notice how its length value is now 5. 2:13 Think of it like you're creating a copy of the middle array and 2:17 adding new elements into it at the same time. 2:21 Taking the contents of an array and spreading it out to fill another array 2:25 is one of the most common uses of the spread operator. 2:28 There will be times when you'll need to combine two or 2:32 more arrays into a new array. 2:35 JavaScript provides a few different ways to do this, but 2:37 the spread syntax offers the most concise and elegant solution. 2:40 For instance, let's bring back our wondrous instruments array. 2:44 But this time, we'll build that array from multiple arrays. 2:48 First, I'll create an array named brass. 2:53 This array holds the values trumpet, trombone, 2:56 french horn, baritone, and tuba. 3:05 Next, I'll create an array named woodwind to hold the strings flute, 3:17 oboe, clarinet, 3:26 saxophone, and bassoon. 3:33 Now I want to combine the brass and 3:42 woodwind arrays into a single array named instruments. 3:45 What should I include inside this array? 3:51 Again, I'll use the spread syntax to bring in the contents of the brass array and 3:54 the woodwind array into this new instruments array. 3:59 Logging the value of instruments to the console returns all ten items in 4:07 one array. 4:12 The spread operator extracted each element in the initial arrays and 4:13 placed it in a new array, good. 4:19 Earlier I mentioned that the spread syntax creates a copy of the original array. 4:22 This means that even when the elements inside the original array change, 4:28 like the brass or woodwind arrays, the new array, like instruments, remains the same. 4:32 For example, I'll call the push method on the brass array and 4:37 add the string flugelhorn to the end of the array. 4:42 In the console, notice how flugelhorn does not appear in the new instruments array. 4:50 But if I type brass to see the contents of the original array, 4:55 flugelhorn was indeed added to the end. 4:59 The same would happen with the shift, unshift, and pop methods. 5:04 For example, 5:08 woodwind.pop does not remove an element from the end of the instruments array. 5:09 It affects the woodwind array only. 5:15 To add elements to the new instruments array, you can use the push and 5:19 unshift methods. 5:23 For example, instruments.unshift, 5:24 guitar and piano adds the strings guitar and 5:30 piano to the beginning of the instruments array. 5:34 Another handy aspect of the spread operator is that you can use it to 5:43 pass arrays as arguments to functions. 5:46 Sometimes functions can accept any number of arguments. 5:49 For example, the Math.max function 5:52 returns the largest number from a set of number values passed into it. 5:56 I'll create a numbers array and store four numbers inside it, 6:01 10, 20, 30, and 40. 6:07 If I pass Math.max a reference to the numbers array using just the variable 6:10 name and log it to the console, notice how this returns NaN, or not a number. 6:16 Remember, NaN is JavaScript's way of saying that it can't find a number, 6:22 the argument passed to Math.max cannot be converted to a number. 6:27 With the spread operator, you can expand an array into different arguments. 6:31 Passing Math.max the arguments via ...numbers returns the number 40. 6:36 Similarly, passing ...numbers to the Math.min 6:43 function returns the lowest number in the array, 10. 6:48 The spread operator has lots of other uses which you'll learn about in later courses 6:53 and workshops. 6:57 To learn about some of them now, 6:58 be sure to have a look at the teacher's notes with this video. 7:00 All right, you've learned the basics of arrays, how to create them, how to add and 7:03 remove array elements, even copy and combine arrays. 7:07 That's a great start, but there's more to working with arrays. 7:10 And one of the most important skills for 7:13 working with arrays is coming up in the next stage. 7:15