Start a free Courses trial
to watch this video
Arrays are used to store a collection of multiple items under a single variable name. This collection could be things like strings, numbers, or even a mix of different data types. Sometimes we need to update or manipulate our arrays by adding or removing items, or combining one array with another. In this guide, I’ll go over just some of the many basic JavaScript array methods. Methods we’ll discuss include: .push(), .pop(), .shift(), .unshift(), .indexOf(), .toString(), .join(), & .concat().
Related content
JavaScript Basic Array Methods (blog)
Resources
MDN - Arrays
MDN - .length
MDN - .push()
MDN - .pop()
MDN - .shift()
MDN - .unshift()
MDN - .indexOf()
MDN - .toString()
MDN - .join()
MDN - .concat()
Not included in the concepts covered but additional common methods
MDN - .reverse()
MDN - .sort()
MDN - .slice()
MDN - .some()
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[MUSIC] 0:00 Hey, what's up? 0:08 My name is Dustin and I'm a developer and technical evangelist here at Treehouse. 0:10 Today, let's go over some basic JavaScript array methods. 0:14 Arrays are used to store data, and this data can be things like strings or 0:17 numbers for example. 0:21 Sometimes we need to update our array by adding or removing data, combining 0:22 an array with another, or even just manipulating the data inside of an array. 0:26 In this guide, I'll go over just some of the many basic JavaScript array methods. 0:31 We'll talk about push, pop, shift, unshift, indexOf, toString, 0:35 join and concat. 0:42 All of this will be done inside of the console of our browser, so 0:44 feel free to follow along with me. 0:47 Also, in the teacher's notes or description of this video, 0:48 I'll link a blog post for basic JavaScript array methods. 0:50 With that said, if you're ready, let's get started. 0:54 Inside my project folder, all I have is an index.html file and an app.js. 0:57 And inside of our index.html, we are linking that script file. 1:03 Inside of app.js we have two arrays, numbers and colors. 1:09 These are the two arrays that we'll be working with and 1:13 we'll write all of our methods on these. 1:16 We'll do this in the browser's console, so let's open up the browser. 1:18 I'll right click and click Inspect and then navigate to the browser's console. 1:24 The first concept I'd like to go over is technically not a method, but 1:29 is awesome to learn and understand, and that's length. 1:33 So if we console.log our numbers array and then we hit 'save', 1:37 we'll see our array in the browsers console. 1:40 But if we add .length to our numbers inside of our console.log method, 1:43 it'll return the length of our array, which is pretty simple. 1:48 So let's remove that and the next method I wanna talk about is push. 1:55 Let's say we wanted to add the string "five" at the end of our numbers array. 2:00 It's pretty simple. 2:05 All we need to do is write numbers.push, and 2:05 then what we wanna add to the end of the array, in this case, the string of "five". 2:08 So we'll console.log our numbers array, hit 'save' and reload the browser. 2:14 And now in our array we have a brand new item at the end. 2:20 And if we run numbers.length we'll see that the length is updated as well, cool. 2:24 So now that we know how to add items to the end of an array, 2:30 how do we remove items from the end of an array? 2:34 So if I console.log numbers, 2:37 you'll see that the last item which is index three is the string of "four" 2:39 But let's say we wanted to remove that. 2:44 All we need to write is numbers.pop, and 2:47 pop will remove the last item from our array. 2:50 So we'll hit 'save', and 2:54 we'll notice that the string of four is no longer in our array. 2:56 And one important thing to know about .pop is that it can also return 3:01 the item that it removed. 3:06 So if we put this in a variable called "lastNum", and it equals numbers.pop, and 3:08 then we console.log(lastNum), you'll see that it removes it from the array but 3:13 it also returns the item that it removed. 3:18 This can be pretty handy. 3:23 So let's now talk about indexOf. 3:25 Let's say you know the element or item that you need from an array, but 3:26 you wanna get the index of it. 3:31 All you need to write is the <arrayName>.indexOf, and 3:34 then the item that you're looking for. 3:37 So in this case, the string "three". 3:41 So if we console.log that and save it, "two" is returned to us in the browser 3:43 console because the string "three" is in the second index of our numbers array. 3:47 So indexOf returns, the index of the item inside of the parentheses. 3:53 So now let's talk about how to remove an item from the beginning of an array. 3:58 In our colors array we have a string for red, green, and blue. 4:04 And if we run colors.shift, it will remove the first item of the array. 4:08 So in the console we'll see green and blue, we no longer see red. 4:14 But just like the pop method, this will also return the item that it removed. 4:20 So if we throw colors.shift into a variable, 4:25 which we'll call shiftedElement. 4:29 So we'll write const shiftedElement equals colors.shift. 4:31 And then if we log our shiftedElement variable, the console will now show "red", 4:35 which is the element that it removed from our colors array, awesome. 4:42 So let's remove that. 4:47 And earlier we talked about push where we added an item to the end of an array. 4:49 Now let's talk about unshift, which is the exact opposite, 4:53 it'll add an item to the beginning of an array. 4:57 So if we do colors.unshift and we give it the string of "purple", and 5:00 then we console.log colors, 5:04 we should see a new item in the array at the very beginning with our "purple" string. 5:06 And just to show you the difference, we'll swap out unshift with push, and 5:12 we'll hit 'save'. 5:16 And you'll notice the exact same thing, except purple shows up at the very end of 5:18 the array, while unshift pushes it at the beginning of the array. 5:22 Next, let's talk about toString. 5:27 There's many reasons why you might need every item from your 5:29 array returned to you as a string, and that's where a toString comes in. 5:32 So if we console.log colors, we'll see that we have ['red', 'green', 5:37 'blue'] in our array. 5:40 And if we wanted to string with all those names in it, 5:42 all we'd need to do is write colors.toString(). 5:45 So let's do that, hit 'save'. 5:49 And now in the browser, we're returned with one string that has "red, 5:51 green,blue" separated by a comma. 5:56 There may be times where you wanna separate your items from your array 5:58 in your string with a space or a comma space or maybe an asterisk. 6:03 And the way that you can do this is by writing .join(). 6:07 It works the same as toString except you can give it a parameter of what 6:11 you'd like to join each item in the array with, in your string. 6:16 So we can give it a space to separate out items by a space, we can give it 6:20 a comma space or we can give it an asterisk or anything you'd like. 6:24 This method returns your array as a string joined by whatever characters you'd like. 6:29 The next method I'd like to go over is concat. 6:35 Let's say you wanna add your numbers and 6:39 colors array to create one array with all these items in it. 6:41 You may think we can do console.log numbers plus colors, but 6:44 if we try that in the browser, you'll see that you returned with a string of all 6:48 the items in the arrays, which is not what we want, we want an array not a string. 6:53 Even if we try to interpolate it by using backticks and interpolation, 6:59 it basically does the same thing as before. 7:03 So in order to combine both arrays into one array, let's set up a new variable. 7:07 We'll call this const data, and it equals numbers and we'll do .concat, 7:12 and in parentheses, we'll give it the colors array. 7:18 So now let's console.log data. 7:23 And in the console, we'll see one array called data, and 7:25 it has all of our items from our numbers array as well as our colors array. 7:29 So if we do data.length, it'll have the value of seven because it holds the four 7:35 items from the numbers array and the three items from the colors array. 7:39 And there's also no specific order that you need to list your arrays. 7:44 So we could also run, colors.concat numbers instead of numbers.concat colors, 7:49 and it'll work pretty much the same way. 7:54 Except our colors array will be first in our data array and 7:58 then followed by our numbers array. 8:01 I hope this guide on basic array methods was helpful. 8:04 Remember, these are just some of the many basic JavaScript array methods. 8:07 Be sure to check out the teacher's notes or description of this video for 8:11 documentation on the methods covered in this guide as well as a few others. 8:14 I'll see you in the next one and until then, have fun and happy coding. 8:18
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up