JavaScript Arrays

In JavaScript, arrays are used to store multiple values in a single variable. Instead of having many separate variables for each piece of data, you can put everything into one single array. This makes it easier to work with lists of things like numbers, names, or other data. In this blog, we will look at how to create arrays, change them, and explore some helpful methods that make working with arrays easier.

Table of Contents:

• What is an Array?
• How to Create an Array?
• Array Methods
  • Adding Elements
  • Removing Elements
  • Iterating Through Arrays
• Accessing and Modifying Array Elements
• Common Array Operations
  • Sorting Arrays
  • Filtering Arrays
  • Mapping Arrays
• Multi-Dimensional Arrays
• Conclusion

What is an Array?

In an array, multiple values are stored in a single variable. It is like a list that can store items like numbers, words, or other data. Every item has a place in the array that is known as an index, and it starts from 0.

Syntax:

let arrayName = [item1, item2, item3, ...];

How to Create an Array?

In JavaScript, you can create arrays in two common ways: Using array literals or using the array constructor. Both methods allow you to store multiple values, but they are written differently.

1. Using Array Literals

The most common and easiest way to create an array is by using array literals. An array literal is simply a list of values enclosed in square brackets [].

Example:

let course = ['HTML', 'CSS', 'JS'];

2. Using the Array Constructor

Another way to create an array is by using the Array constructor. This involves calling the Array() function. You can use this to create an empty array while also specifying an array’s size.

Example (Empty Array):

let emptyArray = new Array();

Example (Array with a Size):

let numbers = new Array(3); 

• It will create an array with 3 empty slots.

Example (Array with Values):

let course = new Array('HTML', 'CSS', 'JS');

Master the Latest Tools like React, Node.js, and More

Build a Career in Web Development

Explore Program

Array Methods

JavaScript arrays come with built-in methods that make it easy to manipulate and work with the data stored inside them. Some of the most commonly used array methods include adding and removing elements, as well as iterating through the array.

Adding Elements

There are many ways to add elements to an array in JavaScript. You can add elements to the beginning, end, or even at specific positions.

1. Adding to the End:

With push() method, you can insert one or more elements at the end of an array.

Example:

Output:

2. Adding to the Beginning:

With unshift() method, you can insert one or more elements at the start of an array.

Example:

Output:

Removing Elements

Removing elements from an array is just as easy as adding them. You can remove elements from the beginning, the end, or at specific positions.

1. Removing from the End:

With pop() method, you can remove the last element from an array.

Example:

Output:

2. Removing from the Beginning:

With shift() method, you can remove the first element from an array.

Example:

Output:

Iterating Through Arrays

Sometimes, you’ll want to go through each element in an array and perform some operation on it. JavaScript provides many methods to iterate over arrays.

1. Using a for loop:

By using a for loop, you can iterate over an array by index.

Example:

Output:

2. Using forEach():

The forEach() method is a more modern way to iterate over an array. Basically, it runs a function on each element in the array.

Example:

Output:

Accessing and Modifying Array Elements

Once you’ve created an array, you often need to access specific elements or modify the values inside the array. JavaScript makes this easy by allowing you to use indexes to get and change elements.

Indexing Arrays

Each element in an array has a position, known as its index. The index is always a number, starting at 0 for the first element, 1 for the second, and so on.

Example:

Output:

Here,

• course[0] accesses the first element (HTML).
• course[1] accesses the second element (CSS), and so on.

If you try to access an index that doesn’t exist, like course[3], you will get undefined.

Modifying Elements

In an array, you can modify its values by just using the index of the element and assigning a new value to it.

Example:

Output:

Here,

• The element at index 1 (‘CSS’) is changed to ‘Python’.

You can modify elements at any index, and if the index does not exist, JavaScript will create empty slots (this is more common with higher indexes).

Example (Creating new index):

Output:

Here,

• JavaScript adds CSS at index 5, and there are three empty slots (indexes 2, 3, and 4) between the existing elements.

Common Array Operations

Common array operations in JavaScript help you work with lists of data easily. These operations include sorting (arranging items), filtering (selecting specific items), and mapping (transforming items into new values).

1. Sorting Arrays

To sort an array, you can use the sort() method.

Example:

Output:

2. Filtering Arrays

With filter() method, you can create a new array with the elements that pass a test (a condition) defined by a callback function, but it does not change the original array.

Example:

Output:

3. Mapping Arrays

With map() method, you can change all the items in an array by using a function, and then create a new array with the changed values.

Example:

Output:

Multi-Dimensional Arrays

A multi-dimensional array is an array of arrays. With this, you can create arrays with more than one dimension (like a grid or matrix). The most common example is a 2D array, where each element in the main array is itself an array.

1. Creating Multi-Dimensional Arrays

To create a multi-dimensional array, you can nest arrays inside an outer array. For example, a 2D array can represent rows and columns.

Example:

Output:

2. Accessing Multi-Dimensional Arrays

To access elements in a multi-dimensional array, you can use multiple indices. The first index accesses the outer array (the row), and the second index accesses the element inside that row.

Example:

Output:

Conclusion

So far in this blog, we have learned how to create arrays, how to change them, and we have explored some helpful methods that will help you work with arrays easily. In an array, multiple values are stored in a single variable. It’s like a list where you can keep things like numbers, words, or other data. 

JavaScript Arrays – FAQs