JavaScript Arrays Explained: Basics & Examples

If you are learning JavaScript, understanding arrays is one of the most important steps in your programming journey.

Imagine you are building a website where you need to store a list of students, products, usernames, prices, or comments. Would you create a separate variable for every single item? Of course not!

This is where JavaScript Arrays become useful.

Arrays allow you to store multiple values inside a single variable and manage them efficiently.

In this beginner-friendly guide, we will explore JavaScript arrays from the basics. You will learn how to create arrays, access elements, understand indexing, add and remove items, and work with some of the most important built-in array methods.

Let’s get started!

1. What Is an Array in JavaScript?

An array is a special elements in JavaScript that allows you to store multiple values in a single variable.

For example, imagine you want to store the names of five students.

Without an array, you might write:

const student1 = "Rahim";
const student2 = "Karim";
const student3 = "Ayon";
const student4 = "Sakib";
const student5 = "Nabil";

This approach works, but managing many variables becomes difficult.

Instead, you can use an array:

const students = ["Rahim", "Karim", "Ayon", "Sakib", "Nabil"];

console.log(students);

That’s much cleaner!

Now all five student names are stored inside one variable called students.

Remember: An array can store strings, numbers, booleans, objects, other arrays, and even different data types together.

Example:

const information = [
    "Ayon",
    25,
    true,
    85.5
];

console.log(information);

2. How to Create an Array in JavaScript

There are two common ways to create an array in JavaScript.

Method 1: Using Array Literals

This is the most common and recommended approach.

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

console.log(fruits);

Method 2: Using the Array Constructor

You can also create an array using the Array() constructor.

const numbers = new Array(10, 20, 30, 40);

console.log(numbers);

Both approaches create arrays, but beginners should generally use array literals ([]) because they are simpler and easier to read.

3. Understanding Array Indexing

One important thing you must understand about JavaScript arrays is indexing.

JavaScript arrays use zero-based indexing. This means the first element starts at index 0, not 1.

Consider this example:

const fruits = ["Apple", "Banana", "Mango", "Orange"];

Here is how the indexes work:

ElementIndexApple0Banana1Mango2Orange3

To access a particular element, use its index.

console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Mango
console.log(fruits[3]); // Orange

Why does fruits[10] return undefined?

Our array contains only four elements, with indexes from 0 to 3.

If we try to access index 10, that position does not contain an element. Therefore, JavaScript returns undefined.

console.log(fruits[10]); // undefined

This is important to remember when working with arrays.

4. How to Find the Length of an Array

Sometimes you need to know how many elements an array contains.

JavaScript provides the length property for this purpose.

const fruits = ["Apple", "Banana", "Mango", "Orange"];

console.log(fruits.length);

Output:

4

The length property returns the total number of elements in the array.

One important thing to remember is that array indexing starts from 0, while the length counts the elements starting from 1.

For example:

const fruits = ["Apple", "Banana", "Mango", "Orange"];

console.log(fruits.length); // 4
console.log(fruits[fruits.length - 1]); // Orange

We use length - 1 because the last index is always one less than the array length for a non-empty array.

5. Adding Elements to an Array

JavaScript provides several methods to add new elements to an existing array.

Let’s explore two commonly used methods.

push() — Add an Element at the End

The push() method adds one or more elements to the end of an array.

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

fruits.push("Mango");
console.log(fruits);

Output:

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

You can also add multiple elements:

fruits.push("Orange", "Grapes");

console.log(fruits);

unshift() — Add an Element at the Beginning

The unshift() method adds one or more elements at the beginning of an array.

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

fruits.unshift("Mango");
console.log(fruits);

Output:

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

Quick difference:

• push() adds elements at the end.
• unshift() adds elements at the beginning.

6. Removing Elements from an Array

Just like adding elements, JavaScript also provides methods to remove elements.

pop() — Remove the Last Element

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

fruits.pop();
console.log(fruits);

Output:

["Apple", "Banana"]

The pop() method removes the last element from the array.

shift() — Remove the First Element

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

fruits.shift();
console.log(fruits);

Output:

["Banana", "Mango"]

The shift() method removes the first element.

7. Understanding the splice() Method

The splice() method is one of the most useful array methods in JavaScript.

It allows you to add, remove, or replace elements at a specific position.

Get Rafi Ayon’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Its basic syntax is:

array.splice(start, deleteCount, item1, item2);

Let’s understand it with examples.

Example 1: Removing Elements

const fruits = ["Apple", "Banana", "Mango", "Orange"];

fruits.splice(1, 2);
console.log(fruits);

Output:

["Apple", "Orange"]

Explanation:

• 1 means start at index 1.
• 2 means remove two elements.

So, Banana and Mango are removed.

Example 2: Adding Elements

const fruits = ["Apple", "Banana", "Orange"];

fruits.splice(2, 0, "Mango");
console.log(fruits);

Output:

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

Here, 0 means we are not removing any existing elements.

Example 3: Replacing Elements

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

fruits.splice(1, 1, "Orange");
console.log(fruits);

Output:

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

The original Banana element is replaced with Orange.

8. Understanding slice() in JavaScript

The slice() method returns a new array containing a selected portion of an existing array.

Unlike splice(), it does not modify the original array.

Example:

const numbers = [10, 20, 30, 40, 50];

const result = numbers.slice(1, 4);
console.log(result);

Output:

[20, 30, 40]

Explanation:

• 1 is the starting index.
• 4 is the ending index.
• The ending index is not included.

The original array remains unchanged.

console.log(numbers);

// [10, 20, 30, 40, 50]

Remember the difference:

• splice() modifies the original array.
• slice() returns a new array without modifying the original.

9. How to Check Whether a Value Is an Array

JavaScript provides a useful method called Array.isArray().

It checks whether a given value is an array.

const fruits = ["Apple", "Banana"];
const name = "Ayon";

console.log(Array.isArray(fruits));
console.log(Array.isArray(name));

Output:

true
false

This is particularly useful when working with API responses or handling data from external sources.

10. Real-World Example: Managing Product Data

Let’s put everything together with a practical example.

Imagine you are developing an e-commerce website and need to manage a list of products.

const products = ["Laptop", "Keyboard", "Mouse", "Monitor"];

console.log(products);

Now, imagine a new product arrives and you want to add it to the list.

products.push("Headphones");

console.log(products);

Output:

["Laptop", "Keyboard", "Mouse", "Monitor", "Headphones"]

Suppose the store stops selling the keyboard. You can remove it using splice().

products.splice(1, 1);

console.log(products);

Output:

["Laptop", "Mouse", "Monitor", "Headphones"]

Finally, suppose you want to display only the first three products without changing the original list.

const availableProducts = products.slice(0, 3);

console.log(availableProducts);

Output:

["Laptop", "Mouse", "Monitor"]

These examples demonstrate how arrays help developers manage data in real-world applications.

11. Common Mistakes Beginners Should Avoid

When learning JavaScript arrays, beginners often make a few common mistakes.

1. Forgetting That Array Indexing Starts from Zero

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

console.log(fruits[1]); // Banana

Remember, the first element is always at index 0.

2. Confusing Length with the Last Index

const numbers = [10, 20, 30];

console.log(numbers.length); // 3
console.log(numbers[2]);     // 30

The last index is always length - 1 for a non-empty array.

3. Confusing splice() and slice()

These methods have different purposes:

• splice() changes the original array.
• slice() creates a new array from a selected portion.

4. Assuming const Arrays Cannot Be Modified

This is a very common misunderstanding.

const numbers = [10, 20, 30];

numbers.push(40);
console.log(numbers);

Output:

[10, 20, 30, 40]

This works!

The const keyword prevents reassignment of the array variable, but it does not prevent modifying the contents of the array.

12. Practice Questions to Test Your Knowledge

The best way to learn JavaScript is by writing code yourself.

Try solving these beginner-friendly exercises.

Exercise 1: Create an array containing five different fruit names and print the entire array.

Exercise 2: Create an array of numbers and print the first and last elements.

Exercise 3: Add a new element to the end of an array using push().

Exercise 4: Remove the first element using shift().

Exercise 5: Use splice() to remove the second element from an array.

Exercise 6: Use slice() to create a new array containing the first three elements.

Exercise 7: Create an array of products and check whether it is an array using Array.isArray().

Try solving these exercises without looking at the examples above. This will help you build confidence.

Final Thoughts

JavaScript arrays are one of the fundamental concepts every JavaScript developer should understand.

From storing simple lists to managing complex application data, arrays play an important role in modern web development.

Start by understanding array indexing, length, push(), pop(), shift(), unshift(), splice(), and slice().

Don’t try to memorize everything in one day. Write small programs, experiment with different methods, and practise regularly.

Remember, becoming a good developer is not about memorizing methods. It is about understanding when and why to use them.

Happy Coding! 🚀

Follow Learn with DevNet for more beginner-friendly tutorials on JavaScript, web development, and the software engineering journey.