Playing with JavaScript Arrays

You probably know that in JavaScript we use arrays to store a number of values in a single variable. In a JavaScript array, each element has a number (index), where the index of an array starts from zero and increments by one, i.e., 0, 1, 2, 3, and so on. The index is essentially the identifier of the items in that array.

So in this short tutorial, we’ll look at basic methods that will help you understand arrays in JavaScript at a basic level. This short and helpful guide is taken and translated from the majority of the following post on positronx.io.

1. How to Create an Array in JavaScript?

You can use square brackets [] to create an array in JavaScript.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars)
// ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche']

2. How to Check the Number of Items in a JavaScript Array?

You can check the total number of items in an array (array length) using the method below.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars.length)
// 8

3. How to Access a JavaScript Array Using the Index Number?

You can use a specific number to access a particular item in the array, as shown below.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars[0])
// Tesla

console.log(cars[4])
// Ford

console.log(cars[6])
// Nissan

4. How to Access the Last Item in a JavaScript Array?

You can access the last item in an array using the method below.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars[cars.length - 1])
// Porsche

5. How to Loop Through an Array in JavaScript?

This is the best and most modern way to loop through a JavaScript array.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

cars.forEach(function(arrayItem, index){
  console.log(arrayItem, index)
})

// Tesla 0
// Toyota 1
// BMW 2
// Honda 3
// Ford 4
// Hyundai 5
// Nissan 6
// Porsche 7

Regarding finding an item or string in an array, take a look at the post How to Check if a Specific Value Exists in an Array Using JavaScript and jQuery.

6. How to Add an Item to the Beginning of a JavaScript Array?

You can add an item to the beginning of an array as follows:

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

// unshift() method adds 'Mercedes' to the starting of 'cars' array
var newArray = cars.unshift('Mercedes') 

console.log(cars)

// New cars array
// [ 'Mercedes', 'Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche' ]

7. How to Remove an Item from the Beginning of a JavaScript Array?

You can also remove an item from the starting point of an array, as demonstrated below:

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

// shift() method removes the first item from the array
var newArray = cars.shift() 

console.log(cars)

// New cars array
// Tesla has been removed from the array
// [ 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche' ]

8. How to Find the Index of an Item in a JavaScript Array?

You can find the index number of a specific item in an array using the method below:

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

// indexOf() method returns the index number of an item in an array
var getBMWIndex = cars.indexOf('BMW');
var getHyundaiIndex = cars.indexOf('Hyundai');
var getPorscheIndex = cars.indexOf('Porsche');

console.log(getBMWIndex)
// 2

console.log(getHyundaiIndex)
// 5

console.log(getPorscheIndex)
// 7

Summary

In this guide, we described the basic features and methods of arrays in JavaScript. We learned how to create an array, access items in an array, find the location of an item in an array, remove and add items to an array, and even loop through an array in JavaScript.

By the way, you can find additional information about arrays in JavaScript on MDN Web Docs.

You might also be interested in checking out the post I wrote about Functions in JavaScript, or the post about Introduction to Objects in JavaScript. Feel free to ask, comment, and react as you wish…