JavaScript Array

JavaScript arrays are collections of items. These items can be of the same type or different but arrays provide a way to group them together into a common collection. Since a JavaScript array is a collection, it is stored and used differently than other primitive data types in JavaScript. Array values are indexed which means in order to obtain any value from this collection, a developer should use its index (starts at 0) within the collection itself. Let’s see a visual representation of an array.

In the example above, as you can see there are 10 numbers in the array. The length of the array is 10 however in order to extract any value for e.g. 60, a developer has to use the index value for that element which is 5 considering the index value starts at 0.

The easiest way to create an array in JavaScript is by using square brackets [], which is called an array literal notation. JavaScript also has a built-in array constructor new Array(), but you can use []. Both statements will create an empty array.

Let’s take a look at an example. As seen below, the length of the array can be figured out by using the length property on the array itself. In order to access a particular element from the array, use it’s index value inside of the square brackets. An item can be changed in an array by reassigning it a new value using the equal sign =.

const grades = [50, 78, 94, 65, 79, 82, 100, 91];
console.log(grades.length); // prints 8
 
// access the value 79 using its index value
console.log(grades[4]); // prints 79. Index starts at 0.
 
// change value at index 0 from 50 to be 86
grades[0] = 86
console.log(grades); // prints [86, 78, 94, 65, 79, 82, 100, 91]

Arrays provide some useful and efficient built-in methods. Here is a MDN Documentation on Arrays and its methods. We will explore the most commonly used methods listed below:

• Array.prototype.push
• Array.prototype.pop
• Array.prototype.includes
• Array.prototype.indexOf

An array element can easily be added to an existing array by using push(). This method will add one or more elements to the end of the array and return the length of the new array for future use.

const grades = [50, 78, 94, 65, 79, 82, 100, 91];
console.log(grades.length); // prints 8
 
// add 86 to the end of grades array
// returns new length of the array
const newGradesLength = grades.push(86);
	
console.log(grades); // prints [50, 78, 94, 65, 79, 82, 100, 91, 86]
console.log(newGradesLength); // 9

An element can easily be removed from an existing array by using pop(). This method will remove an element from the end of the array and return that element.

const grades = [50, 78, 94, 65, 79, 82, 100, 91];
console.log(grades.length); // prints 8
 
// remove last element 91 from the end of grades array
const lastElement = grades.pop();
	
console.log(grades); // prints [50, 78, 94, 65, 79, 82, 100]
console.log(grades.length); // 7
console.log(lastElement); // 91

The includes() method is very useful to find if a certain element exists in the array. It returns true or false indicating whether the element was found or not.

const grades = [50, 78, 94, 65, 79, 82, 100, 91];
 
console.log(grades.includes(86)); // prints false
console.log(grades.includes(91)); // prints true

The indexOf() method is very useful to find if a certain element exists in the array and if so, at what index it was found. If an element is not found, the index returned will be -1.

const grades = [50, 78, 94, 65, 79, 82, 100, 91];
 
console.log(grades.indexOf(86)); // prints -1
console.log(grades.indexOf(91)); // prints 7

The Array object in JavaScript can store multiple values in a single variable. Array In JavaScript, arrays aren’t primitive values. They are instead Array objects that provide the ability to store an indexed collection of values as a list. JavaScript arrays are resizable and can contain a mix of different data types. JavaScript arrays must be accessed using nonnegative integers as indexes. JavaScript arrays are zero-indexed. JavaScript array-copy operations create shallow copies.