You want to hold on to information in sequence without creating multiple variables.

Use an array to store your data. An array is an object where you can store information in a list-like order.

In all instances, you get an array with all the properties and methods of an array . Using the array literal is a quick way of building an array and is considered an easy-to-read way of generating an array. Using the array constructor gives you the option of either setting the length of the array or passing values to it. Items in the array are not of any specific type.

Unlike with other languages, an array is not fixed. It can grow or shrink depending on your needs. If you pass a number to the constructor, you can set the length of an array; however, you can continue to add items past that original number. Arrays can be created using a constructor or you can create an array literal using the bracket syntax.

JavaScript refers to each value in an array as an element. Elements are zero-based, meaning that the first element in the array uses the index number of zero to access it. You will see how this is done in the next section.

You need to access elements in the array and get their values.

You access each element of the array by its index number using the bracket syntax.

You want to keep track of the contents of a table, whereby one dimension represents rows and the other columns.

There isn’t any special syntax to create a multi-dimensional array. You do this by adding a new array inside an element of another array. You can also create a multi-dimensional array with array literals.

Multi-dimensional arrays are very similar to regular arrays. Accessing an element would mean first accessing the outer array, then the element in the inner array . For example, multiArray[0][1] would be the first item on the outer array and the second item in the inner array.

You need to create an array with values set upon initialization.

Using either array literals or a constructor, you can pass values into the array.

When using a constructor, make sure to pass more than one value. If you pass a single number into the constructor, it will think that you want to set the length of the array . A comma-separated list of numbers would be treated as values that would go into the array. If creating an array literal, you do not have this problem. All values will become elements in the array.

You want to know how many elements are in the array.

The length property gives the number of items in an array. Since arrays are zero-based, the first item in the array is zero. This is important to remember because, if the length is seven, like in Listing 7-5, that means there are seven items total, starting from zero to six.

You want to take the values of an array and convert it to a string.

There are multiple ways to convert an array to a string. Two ways are the toString() method and the join() method .

The toString() method will create a comma-separated string based on all the elements in the array. You can also take a single element and convert that into a string.

You want to add an extra element to the end of an array.

The push() method will automatically add an element to the end of an array. It is also important to note that it does not account for gaps in the array. For example, if you create an element with no value, then use the push method, it will create a new element after the blank one.

Using the push() method , you can add one or more elements to the current array. This method will return the new length of the array. Mixing the push method and naming an element specifically can create gaps in the array by accident. If you consistently use the push method, you will always add one more value to the array without the possibility of creating gaps.

You want to give the array values in a certain range.

Using the fill() method , you can add a value with a start and end index number.

The fill() method will add a value given to your array. Two optional parameters are the start and end indexes. When given these parameters, you can update values based on the index number.

You need to combine the values of two arrays into one single array.

Use the concat() method to combine one array to the end of the other.

The concat() method returns a new array with the elements of the original array and the elements of the array being used in the argument as long as the argument is an array. This does not alter the original arrays. What this method does is make a shallow copy that contains references to the original arrays. This is important because if the reference or copy object is modified, the original array will also be modified.

You want to reverse the order of the elements in your array.

Use the reverse() method to combine one array to the end of the other.

In this example, the reverse method returns an array in place. The first element in the array becomes the last and the list will be the first element. This method mutates the array and returns a reference to the array.

You have an array where you want to copy only the elements in a range to other elements in the same array.

Use the copyWithin() method to copy a rage of elements and use those values to replace other elements in the same array.

Understanding the copyWithin() method can be a little confusing. This method takes three arguments—target, start, and end. All of these arguments are numbers. The end argument is optional; in that case, the browser will use the length of the array as the end value.

When discussing these parameters, target tells the browser which element in the array it should update. The start argument defines which element it should start copying. In Listing 7-11, the target element would be 3 (4 because arrays are zero-based) and then it will start copying from 0 (the first element). Since this example does not have an ending argument, it will copy the rest of the array and replace the elements in the array. This method does not have support in Internet Explorer, Opera, or Safari.

You need to add elements to the beginning of an array.

Use the unshift() method to push the elements back to make room for new elements in the front.

The unshift() method will shift elements in array-like objects and place new elements in the front of the current elements. This method will return the new length of the array when finished.

You need a quick way to change the elements in the array by adding or removing elements .

Use the splice() method to change the contents of an array.

When using splice, you need to pass over at least two arguments. The first argument, start, tells the browser where to start modifying the array. The next value describes how many items you would like to delete, called the deleteCount. The third optional argument would be a comma-separated list of items you would like to add to the array.

In Listing 7-13, we are deleting no items after the second element in the array, and then adding Zeppo to the array. After that, another splice call is made removing three elements after the first element, only leaving Groucho.

You want to treat your array like a stack and get the first element in the array .

The shift() method will return the first item in the array.

The shift() method will remove the first item in the array (the item at index 0). It will then shift the rest of the items forward. This method changes the length of the array.

You want to treat your array like a stack and get the last element in the array.

The pop() method will return the first item in the array.

You want to create a variable that contains a portion of the current array.

The slice() method will return a shallow copy of the array based on the range you give it.

This method returns a shallow copy of the array. That means that the copy is done by reference. The slice() method take two arguments, The first is the start index number, where the browser should start editing the array. The second argument is the end index number. In Listing 7-16, the slice starts with the first element and ends with element 2. The array returns all elements up to the end number.

You have a value that belongs to an array but need the index number.

Using the indexOf() method will give you the first index of a value you pass to it. Or using lastIndexOf() will return the last index of the value you pass to it.

These methods are useful if you know a value is being used more than once. For example, you may get results back from the server and lastIndexOf() can quickly give you the latest data. The reverse is also true. The indexOf() method would give you the first instance of the value given to it. If you do not get a result, these methods return -1.

You need either the value of an array or the index.

Use the find() method to get the value from an array and findIndex() to get the index number.

These methods work in a similar way that the map method works. You can assign a callback function to the method or use an anonymous function. In either case, you can run the function on each element of the array and evaluate it. If the test passes, you return the value or the index number from the array.

The callback function will receive the element, index number, and the array each time it’s called. There is an optional parameter that lets you set the value of this. These methods are not supported in Internet Explorer or Opera.

You need to allow an undefined amount of arguments (for functions), elements (for arrays), or variables (for destructuring assignment).

The spread operator allows you to assign an unspecified amount of values.

The spread operator works in a similar way to the rest parameter. The main difference is the spread operator will let you express multiple values inside a single variable, whereas the rest parameter takes all values after the first one and expresses each value as an element in an array.

In these examples, there is a function that can take multiple arguments. The second takes the values of the first array and adds them to the second array. It is important to note that, without the dots (…), we would be creating a multi-dimensional array. In the third example, without the dots, the browser would just map the next value. The spread operator is available in Chrome, Firefox , and Microsoft Edge.

You have an object that you can iterate through and you want to convert into an array.

The from() method is a static method. Using it is similar to using a method of the Math class. This method can take three arguments, the second and third are optional. The first is the array-like object; the second is a map function.

You need to decide to use either a regular array or a typed array.

If you are working with raw binary data, use a type array.

Typed arrays are designed to work with binary data. Unlike regular arrays that can hold multiple types of data, typed arrays only have the same type. In addition, typed arrays cannot have any empty values making them contiguous. Typed arrays do not have all the methods that normal arrays have, like push or pop, and the isArray() method will return false.

There are several APIs that support typed arrays. Web Workers, Media Source API, File API, Canvas, and XMLHttpRequest are just some of the APIs that provide support.

Typed arrays are one of two different types of views for an ArrayBuffer , the other being DataView. In this two-step process, the ArrayBuffer holds the binary data with no way to access its contents. Then the data gets passed into either a typed array or a DataView object. Once there, it can be read or changed. There is a list of different type array views. Based on the data you are working with, they come in the 8 ,16, 32, and 64 numeric types. For the full list, look at Mozilla’s site at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays .

In Listing 7-21, we load a file based on the File API. When the file is loaded, it is passed over to the fileReader object. There the file is read as an arrayBuffer. The arrayBuffer is then used in creating a Unit8Array. This typed array then can use some of the syntax of a regular array.