{ Array Methods. }

Objectives

Use array modification methods like join, slice, concat to modify arrays or create new arrays.

Search for elements in an array using indexOf and lastIndexOf

Describe the difference between a reference type and a value type

So far, we've seen how to access, update, add and remove items from an array. We've also encountered some common array methods, including push, pop, shift, unshift, and splice. But these aren't the only methods you're likely to encounter when working with arrays. Let's take a look at a few more.

Common array functions and properties

length

length returns how many elements are in the array. This is a property, NOT a function (you can tell because we type length, not length(). As we've seen, it can (but is almost never) be used to remove elements/clear an array.

var arr = [1,2,3,4];
arr.length; // 4
arr[arr.length]; // undefined
arr[arr.length-1]; // 4 - this is a nice way to access the last element of an array when you don't know how many elements are inside it.

slice

slice makes a copy of an array. We can use it to copy the entire array, or create a copy of a subarray. If we just invoke slice() with no arguments, we'll create a copy:

var arr = [1,2,3,4];
var copy = arr.slice();
copy; // [1,2,3,4];

Alternatively, you can pass in two arguments to slice. Like splice, the first argument indicates the starting index of the subarray you want. The second argument indicates the ending index. The subarray you get will consist of all the values starting from the starting index and going up to (but not including) the ending index:

lastIndexOf works just like indexOf, but starts searching from the end of the array rather than the beginning.

var arr = [1,2,3,4,5,4,4];
arr.indexOf(4); // 3
arr.lastIndexOf(4); // 6 - this one is different now as it starts from the end!
arr.lastIndexOf(10); // -1 - still returns -1 if the value is not found in the array

Reference vs Value

An essential distinction between primitives and objects (including arrays, which are a type of object in JavaScript) is how their values are passed when assigned to new variables. Take a look at the following example:

In this example, even though we changed the anotherInstructor variable, it did not affect the instructor variable. This is because each one of these primitive types has a specific address in memory (it is a bit more complex than that, but we'll keep things simple to start). Another way to think of this is that when we assigned anotherInstructor to equal instructor, JavaScript created a copy of the string "Elie" and assigned that value to anotherInstructor. So even though those two variables were storing identical-looking strings, they can be modified independently of one another.

This may seem confusing until we compare this with what happens when dealing with reference types. Let's take a look at this array:

We see here that the original instructor array was changed when we pushed Tim to instructorCopy! This is because the instructorCopy did not create a new array, it just created a reference (or pointer) to the instructors array. In other words, unlike with our previous example, setting instructorCopy equal to instructors doesn't create a copy of the instructors array in JavaScript. Instead, both variable names refer to the exact same array!

This can take some time to wrap your head around. If you're curious, you can read more about the phenomenon of passing by value vs. passing by reference here and here

Exercises

Complete both parts of the exercises before moving on. It is essential that you complete these exercises as they are the building blocks for the next section!

Part I

Write the code necessary to do the following:

Create an empty array called arr.

Add your first name to the arr variable

Add your last name to the end of the arr variable

Add your favorite color to the beginning of the arr variable

Your variable arr should look like this (using Elie for a first name, Schoppik for a last name and purple for a favorite color) ["purple", "Elie", "Schoppik"]. Keep going!

Remove the favorite color from the arr variable (remember this is the first value in the array - what method can you use to remove the first value in an array?)

Create another array called arr2.

Add your favorite number to arr2

Add the string "JavaScript" to the end of the arr2 variable

Your variable arr2 should look like this (using 42 as a favorite number) [42, "JavaScript"].

See if the value 42 exists in the arr2 array. Do this using the indexOf method. What does indexOf return to you if the value passed to it can not be found in the array?

Create a new variable called combinedArr which is the result of your arr and arr2 variables combined into one array.