Adding Data to Arrays

Arrays are one of the most powerful, and 0:00 commonly used data structures in JavaScript. 0:02 Because of that, you'll find that there's many ways to work with them. 0:05 In this video, I'll show you three of the most common ways to add items to an array. 0:09 To get started, 0:13 let's take a trip to one of the best sources of JavaScript documentation. 0:15 The Mozilla Developer Network. 0:19 You can find detailed information on every aspect of the JavaScript language at 0:22 the Mozilla Developer Network, including this page discussing arrays. 0:27 The sidebar on the left, lists Properties and Methods of the array object. 0:32 Let's check out this property called length. 0:37 The length property contains, the number of items in the array. 0:42 For example, let's say, you had an array like this. 0:46 You could find out, the number of items in the array with this code. 0:50 The length property is like a variable for that array. 0:53 As you add items to the array? 0:58 The length changes. 0:59 Remember this property, it comes in handy a lot of the time. 1:01 In fact, it's one way you can add an item to the end of an array. 1:04 For example, to add the number 7 to the end of the array, I would write this. 1:08 Now the numbers array, contains these values. 1:15 But how does this work? 1:18 Remember that each item in an Array has an index value. 1:20 So we could look at the original item's array like this. 1:23 [NOISE] What would the next index value be this array? 1:26 6, which is also the number of items, currently in the array. 1:33 In other words, the index value for the next item to be 1:37 added to an Array is the same, as the number of items in the Array. 1:40 That is, it equals the length of the array. 1:44 To add an item to the end of the Array, we just add it, 1:47 at an index that matches the total number of items in the array. 1:50 How's your brain feeling? 1:55 If you're like me, it probably hurts a little bit, right now. 1:57 I know mine did, when I first was learning about arrays and index values. 2:00 Fortunately, there's an easier way to add an item to the end of an array. 2:05 The push method. 2:09 Let's go back to the Mozilla Developer Network, and the array documentation. 2:11 As you can see, there are lots and lots of Methods for arrays. 2:15 Remember, an Method is like an action, you can perform on an object. 2:19 In the case of Arrays, there are lots of different Methods for working with them. 2:24 The push method, lets you add one or more items to the end of an array. 2:28 To use it, you simply type the array's name, followed by a period, the word push, 2:34 and a set of parenthesis. 2:38 [BLANK_AUDIO] 2:40 Inside the parenthesis,. 2:44 You type the item, you wish to add to the end of the array. 2:46 You can think of the push method, 2:49 as pushing an item into the last spot of the array. 2:50 For example, we could add 7 to the end of the number array, like this. 2:54 [SOUND] That's a lot easier than using the length of the array, isn't it? 2:58 Another benefit of the push method is that you can add, 3:04 more than one item to the end of the array at once. 3:06 For example, if I wanted to add 7, 8, and 3:09 9 to the end of the numbers array, [SOUND] I'd do this. 3:12 JavaScript also includes a method for 3:16 adding an item to the beginning of the array. 3:18 It has an unfortunately, confusing name, unshift. 3:21 It works just like the push method. 3:25 For example, say I wanted to add 0 to the beginning of the numbers array. 3:27 I just type the name of the array [NOISE] followed by [NOISE] a period, 3:32 unshift, an opening parenthesis, the number 0, and a closing parenthesis. 3:36 And just like push, you can add [NOISE] more than one item [NOISE] to 3:41 the beginning [NOISE] of an array. 3:45 [NOISE] Let's try out these methods for adding items to an array. 3:48 We'll create an empty array, fill it full of song names and 3:51 then, display it on the page, like this. 3:54 If you'd like to follow along, click the Launch Workspace button on this page. 3:57 Or you can download the project files, and use your own text editor. 4:01 We'll start by linking a couple of JavaScript files to the Web page. 4:05 Click on the index.html file to open it. 4:09 I teach how to attach external JavaScript files to a page, 4:12 in the JavaScript Basics course here at Treehouse. 4:15 If you're not sure how external JavaScript files work, or how to use them, 4:18 I've added a link in the Teacher's notes that discusses how to 4:22 use external JavaScript files. 4:25 I've created one JavaScript file already called helpers.js. 4:27 It has a function in it, that we'll use in this video. 4:31 You can check out the code in that file if you'd like, but 4:35 it includes some features I haven't taught yet. 4:37 In fact, later in this course, I'll teach you how to create that function. 4:40 To use the function in that file, we need to link to the file. 4:44 I'll add the link here, just before the closing body tag. 4:48 When the web browser runs in to this line of HTML, it loads the file, and 4:52 runs the JavaScript inside of it. 4:57 It's common to place JavaScript files before the closing body tag, like this. 4:59 Because it let's the Web page load and display, before the JavaScript runs. 5:03 Next, we'll link to the JavaScript file that you're going to program. 5:08 It should go after the link to the helpers.js file, 5:12 because our program will be using programming in that file. 5:15 In other words, we need the code in helpers.js to load first, 5:19 otherwise, our programming won't work. 5:23 Now, let's add a new file and add some programming to it. 5:25 I'm gonna choose File> New, from the menu here and name the file playlist.js. 5:28 I've added the file outside the js folder, that js folder is for 5:36 holding JavaScript files. 5:40 So, I'll just drag my new file on top of that folder to move it. 5:42 Okay, let's program. 5:48 I'll start by creating a variable with an empty array. 5:50 [BLANK_AUDIO] 5:53 These square brackets represent, what's called an array literal. 5:57 In this case its an empty array literal that has nothing in it. 6:00 So, let's add one item to the playlist using the push method. 6:04 [BLANK_AUDIO] 6:07 To see what the push method did, 6:10 let's print out the array using a printList function. 6:12 This printList function is in the helpers.js file. 6:17 It takes an array as an argument, and prints it out, as an ordered list in HTML. 6:20 Don't worry about how the programming behind this function works, yet. 6:26 In another video I'll teach you how to create this function. 6:29 But this is a good lesson in JavaScript programming. 6:33 You probably, won't write all of the programming, your websites will use. 6:36 You'll often use other people's codes, often called a library or a module or 6:40 a plugin, that provides helpful functions that you 6:45 can use without ever knowing exactly, how they work. 6:48 Let's Save the file and preview it. 6:52 All right, we have a list now of one item. 6:56 Let's add more. 6:59 How about adding more than one item at a time. 7:00 The push method can accept multiple arguments. 7:03 Each argument is one item that's added to the array. 7:06 Let's Save the file, and see what we've got. 7:10 Three items. 7:12 And notice that the songs Respect and 7:13 IMagine are after the first song that we added. 7:16 Now, let's add an item to the beginning of the list using the unshift method. 7:21 [BLANK_AUDIO] 7:24 Let's Save this file, and preview the workspace. 7:30 Now the first song, at the beginning of the array is the song we just added. 7:35 Let's add two more to the beginning. 7:40 [BLANK_AUDIO] 7:41 Save the file, and preview the workspace. 7:50 Great you've just practiced adding elements to an array, 7:54 in the next video you'll learn how to remove items from an array, see you there. 7:58