JavaScript Arrays: A Simple Guide for Beginners

Arrays are one of the most commonly used features in JavaScript. They allow you to store multiple values in a single variable.

For example, instead of creating separate variables for each fruit:

let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";

You can store all of them in one array:

let fruits = ["Apple", "Banana", "Mango"];

In this tutorial, you will learn the basics of JavaScript arrays with simple examples.

What is an Array in JavaScript?

An array is a collection of multiple values stored in a single variable.

Example:

let fruits = ["Apple", "Banana", "Mango"];

Here, fruits is an array containing three values.

JavaScript arrays can store different types of values:

let data = ["Harshit", 30, true];

However, in most real-world applications, it is better to keep related data together.

How to Create an Array

The easiest way to create an array is by using square brackets [].

let fruits = ["Apple", "Banana", "Mango"];

You can also create an empty array:

let fruits = [];

Then you can add items later.

How to Access Array Items

JavaScript arrays use index numbers to access items.

The first item has an index of 0.

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits[0]);

Output:

Apple

The indexes are:

Apple   → 0
Banana  → 1
Mango   → 2

So:

console.log(fruits[1]);

Output:

Banana

How to Change an Array Item

You can change an array item by using its index.

let fruits = ["Apple", "Banana", "Mango"];

fruits[1] = "Orange";

console.log(fruits);

Output:

["Apple", "Orange", "Mango"]

How to Add Items to an Array

Using push()

The push() method adds an item to the end of an array.

let fruits = ["Apple", "Banana"];

fruits.push("Mango");

console.log(fruits);

Output:

["Apple", "Banana", "Mango"]

Using unshift()

The unshift() method adds an item to the beginning of an array.

let fruits = ["Banana", "Mango"];

fruits.unshift("Apple");

console.log(fruits);

Output:

["Apple", "Banana", "Mango"]

How to Remove Items from an Array

Using pop()

The pop() method removes the last item.

let fruits = ["Apple", "Banana", "Mango"];

fruits.pop();

console.log(fruits);

Output:

["Apple", "Banana"]

Using shift()

The shift() method removes the first item.

let fruits = ["Apple", "Banana", "Mango"];

fruits.shift();

console.log(fruits);

Output:

["Banana", "Mango"]

Find the Length of an Array

You can use the length property to find the number of items in an array.

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits.length);

Output:

3

Loop Through an Array

You can use a for loop to access every item in an array.

let fruits = ["Apple", "Banana", "Mango"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

Output:

Apple
Banana
Mango

Common JavaScript Array Methods

JavaScript provides many useful methods for working with arrays.

Method	Purpose
push()	Adds an item to the end
pop()	Removes the last item
shift()	Removes the first item
unshift()	Adds an item to the beginning
slice()	Creates a portion of an array
splice()	Adds, removes, or replaces items
includes()	Checks if an item exists
indexOf()	Finds the index of an item
map()	Creates a new array by transforming items
filter()	Creates a new array with matching items

We will cover these methods in more detail in the upcoming JavaScript tutorials.

Example: Working with an Array

Here is a simple example that uses several array operations:

let students = ["Rahul", "Amit", "Priya"];

students.push("Neha");

students[0] = "Rohit";

console.log(students);
console.log(students.length);

Output:

["Rohit", "Amit", "Priya", "Neha"]
4

Conclusion

Arrays are an important part of JavaScript because they allow you to store and manage multiple values in one variable.

In this tutorial, you learned how to:

• Create an array
• Access array items
• Update array items
• Add items using push() and unshift()
• Remove items using pop() and shift()
• Find the length of an array
• Loop through an array
• Understand common array methods

Once you understand these basics, the next important topics are map(), filter(), reduce(), find(), and other JavaScript array methods.