javascript Tutorial

JavaScript Array

Learn more about one of the world’s most popular programming languages.

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.

Element102030405060708090100
Position12345678910
Index0123456789

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 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 named points.

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 =.

Code Example
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]

JavaScript Array Methods

Arrays provide some useful built-in methods to use efficiently. 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()

Array Push or Add Array Elements

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.

Code Example
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

Array Pop or Remove Elements to an Array

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.

Code Example
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

Array Includes

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.

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

Array indexOf

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.

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

JavaScript Array Object

The Array object in JavaScript can store multiple values in a single variable. Array indexes in JavaScript are zero-based, so the first element is 0, followed by 1, and so on.

Learn JavaScript Today

Get hands-on experience writing code with interactive tutorials in our free online learning platform.

  • Free and fun
  • Designed for beginners
  • No downloads or setup required