JavaScript Arrays Explained With Practical Examples

JavaScript arrays let you store several related values in one place.

A shopping website can store product names, prices, categories, or cart items inside arrays. A navigation menu can store several links. A dashboard can store rows of data returned from an API.

Instead of creating a separate variable for every value, you can keep related values together and work with them as one collection.

Course Home: JavaScript Tutorial for Beginners
Previous Lesson: JavaScript Functions Explained
Next Lesson: JavaScript Objects Explained for Beginners

Quick Answer

A JavaScript array stores an ordered list of values.

Create an array with square brackets:

const products = ["Laptop", "Phone", "Tablet"];

Array positions start at index 0.

console.log(products[0]);

Output:

Laptop

You can check the number of items with:

console.log(products.length);

Output:

Common array operations include:

Read an item with an index
Change an item
Add items with push() or unshift()
Remove items with pop() or shift()
Copy part of an array with slice()
Add, remove, or replace items with splice()
Check for a value with includes()
Find a value’s position with indexOf()
Loop through items with for or for...of

What Is an Array in JavaScript?

An array is an ordered collection of values.

Example:

const colors = ["Red", "Green", "Blue"];

This one variable stores three values.

Without an array, you might create:

const color1 = "Red";
const color2 = "Green";
const color3 = "Blue";

That becomes difficult to manage when you have many values.

An array keeps the related values together:

const colors = ["Red", "Green", "Blue"];

You can then access, update, add, remove, or loop through those values.

Why JavaScript Arrays Matter

Websites often work with lists.

For example:

Product names
Product prices
Shopping-cart items
Categories
Menu links
Search results
User messages
Form errors
Image URLs
API results
Table rows
Notifications

Arrays make these collections easier to store and process.

They also work closely with JavaScript loops and JavaScript functions.

How to Create an Array

The most common way to create an array is with square brackets:

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

You can also create an empty array:

const cart = [];

Then add items later.

JavaScript also provides the Array constructor, but beginners should normally prefer square brackets because they are shorter and clearer.

Use:

const numbers = [10, 20, 30];

instead of:

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

Arrays Can Store Different Data Types

An array can contain strings:

const cities = ["Delhi", "Noida", "Mumbai"];

Numbers:

const prices = [500, 1200, 2500];

Booleans:

const statuses = [true, false, true];

Objects:

const products = [
    { name: "Laptop", price: 50000 },
    { name: "Phone", price: 25000 }
];

JavaScript even allows mixed types:

const values = ["Laptop", 50000, true, null];

That is valid, but arrays are often easier to understand when their items represent the same kind of information.

If data types are still unclear, review the JavaScript Data Types tutorial.

JavaScript Array Indexes Start at 0

Every array item has a position called an index.

Consider:

const products = ["Laptop", "Phone", "Tablet"];

The indexes are:

Laptop → 0
Phone  → 1
Tablet → 2

Access the first item:

console.log(products[0]);

Output:

Laptop

Access the second:

console.log(products[1]);

Output:

Phone

Access the third:

console.log(products[2]);

Output:

Tablet

The first item is at index 0, not index 1.

What Happens With an Invalid Index?

Consider:

const products = ["Laptop", "Phone", "Tablet"];

This index does not exist:

console.log(products[5]);

Output:

undefined

JavaScript does not throw an error just because the array index is missing.

It returns undefined.

How to Get the Last Array Item

Suppose:

const products = ["Laptop", "Phone", "Tablet"];

The array length is:

But the last index is:

So you can use:

const lastProduct = products[products.length - 1];

console.log(lastProduct);

Output:

Tablet

Modern JavaScript also supports:

products.at(-1);

Example:

console.log(products.at(-1));

Output:

Tablet

The at() method is especially convenient when reading items from the end of an array.

JavaScript Array length

The length property tells you how many items an array contains.

const products = ["Laptop", "Phone", "Tablet"];

console.log(products.length);

Output:

An empty array has length 0:

const cart = [];

console.log(cart.length);

Output:

Array length Is Not the Last Index

This is important.

For:

const products = ["Laptop", "Phone", "Tablet"];

the length is:

but the last index is:

The relationship is:

last index = array.length - 1

This is why array loops often use:

i < array.length

rather than:

i <= array.length

You learned this pattern in the JavaScript Loops tutorial.

How to Change an Array Item

You can update an item using its index.

Example:

const products = ["Laptop", "Phone", "Tablet"];

products[1] = "Smartphone";

console.log(products);

The array now contains:

Laptop
Smartphone
Tablet

The second item changed because its index is 1.

Can You Change an Array Declared With const?

Yes.

This is valid:

const products = ["Laptop", "Phone"];

products[0] = "Desktop";

You can also add items:

products.push("Tablet");

What const prevents is assigning a completely different array to the same variable.

This is not allowed:

const products = ["Laptop", "Phone"];

products = ["Keyboard", "Mouse"];

The variable cannot be reassigned.

The existing array can still be changed.

This follows the same rule you learned in the JavaScript Variables tutorial.

Add an Item With push()

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

Example:

const products = ["Laptop", "Phone"];

products.push("Tablet");

console.log(products);

The array becomes:

Laptop
Phone
Tablet

You can add more than one item:

products.push("Mouse", "Keyboard");

What Does push() Return?

push() returns the new array length.

Example:

const products = ["Laptop", "Phone"];

const newLength = products.push("Tablet");

console.log(newLength);

Output:

The array itself has also changed.

Real Website Example: Add to Cart

Start with an empty cart:

const cart = [];

Add a product:

cart.push("Laptop");

Add another:

cart.push("Mouse");

Now:

console.log(cart);

contains:

Laptop
Mouse

Later, your cart will probably store objects rather than only names.

Remove the Last Item With pop()

The pop() method removes the last item.

Example:

const products = ["Laptop", "Phone", "Tablet"];

products.pop();

console.log(products);

The array becomes:

Laptop
Phone

What Does pop() Return?

pop() returns the item it removed.

Example:

const products = ["Laptop", "Phone", "Tablet"];

const removedProduct = products.pop();

console.log(removedProduct);

Output:

Tablet

The original array now contains:

Laptop
Phone

Add an Item to the Beginning With unshift()

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

Example:

const products = ["Phone", "Tablet"];

products.unshift("Laptop");

console.log(products);

The result is:

Laptop
Phone
Tablet

Like push(), unshift() returns the new array length.

Remove the First Item With shift()

The shift() method removes the first array item.

Example:

const products = ["Laptop", "Phone", "Tablet"];

const removed = products.shift();

console.log(removed);

Output:

Laptop

The array becomes:

Phone
Tablet

push vs unshift

Use:

push()

to add at the end.

Use:

unshift()

to add at the beginning.

Example:

const items = ["B", "C"];

items.push("D");
items.unshift("A");

console.log(items);

Result:

A
B
C
D

pop vs shift

Use:

pop()

to remove the last item.

Use:

shift()

to remove the first item.

Example:

const items = ["A", "B", "C"];

items.pop();

removes:

while:

items.shift();

removes:

Array Methods That Change the Original Array

These methods change the array they are called on:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

This is called mutation.

Other methods, such as slice(), create a new array instead of changing the original.

Knowing which methods mutate an array helps prevent unexpected changes.

Find an Item With includes()

Use includes() to check whether an array contains a value.

Example:

const products = ["Laptop", "Phone", "Tablet"];

console.log(products.includes("Phone"));

Output:

true

Check for a missing value:

console.log(products.includes("Keyboard"));

Output:

false

includes() returns a boolean.

includes() Is Case-Sensitive for Strings

Consider:

const products = ["Laptop", "Phone"];

This:

products.includes("Laptop");

returns:

true

But:

products.includes("laptop");

returns:

false

The capitalization is different.

Find an Item’s Index With indexOf()

indexOf() returns the position of a matching value.

Example:

const products = ["Laptop", "Phone", "Tablet"];

console.log(products.indexOf("Phone"));

Output:

If the value is missing:

console.log(products.indexOf("Keyboard"));

Output:

-1

The result -1 means the item was not found.

Check Whether an Item Exists With indexOf()

Older JavaScript code often uses:

if (products.indexOf("Phone") !== -1) {
    console.log("Found");
}

For a simple existence check, this is usually clearer:

if (products.includes("Phone")) {
    console.log("Found");
}

Use indexOf() when you actually need the item’s position.

Copy Part of an Array With slice()

The slice() method returns part of an array as a new array.

Example:

const products = [
    "Laptop",
    "Phone",
    "Tablet",
    "Mouse"
];

const selected = products.slice(1, 3);

console.log(selected);

Output:

Phone
Tablet

The start index is included.

The end index is not included.

So:

slice(1, 3)

takes indexes:

1
2

slice() Does Not Change the Original Array

Consider:

const products = ["Laptop", "Phone", "Tablet"];

const copy = products.slice(0, 2);

copy contains:

Laptop
Phone

The original array still contains all three items.

This is one major difference between slice() and splice().

Copy an Entire Array With slice()

Calling slice() without arguments returns a shallow copy:

const products = ["Laptop", "Phone"];

const copy = products.slice();

Now:

console.log(copy);

contains the same item values.

The array itself is a different array object.

Later, you will learn the spread syntax:

const copy = [...products];

which is another common way to create a shallow copy.

Remove Items With splice()

splice() can remove items from an array.

Example:

const products = [
    "Laptop",
    "Phone",
    "Tablet",
    "Mouse"
];

products.splice(1, 2);

console.log(products);

The array becomes:

Laptop
Mouse

The arguments:

splice(1, 2)

mean:

Start at index 1
Remove 2 items

splice() Returns the Removed Items

Example:

const products = ["Laptop", "Phone", "Tablet"];

const removed = products.splice(1, 1);

console.log(removed);

Output:

Phone

The original array becomes:

Laptop
Tablet

Add Items With splice()

splice() can also insert values.

Example:

const products = ["Laptop", "Tablet"];

products.splice(1, 0, "Phone");

console.log(products);

Result:

Laptop
Phone
Tablet

Here:

splice(1, 0, "Phone")

means:

Start at index 1
Remove 0 items
Insert "Phone"

Replace Items With splice()

Example:

const products = ["Laptop", "Phone", "Tablet"];

products.splice(1, 1, "Smartphone");

console.log(products);

Result:

Laptop
Smartphone
Tablet

The item at index 1 was removed and replaced.

slice vs splice

These two methods have similar names but very different jobs.

Method	Main purpose	Changes original array?
`slice()`	Copy part of an array	No
`splice()`	Add, remove, or replace items	Yes

Example:

const items = ["A", "B", "C", "D"];

const part = items.slice(1, 3);

part becomes:

B
C

but items remains unchanged.

Now:

items.splice(1, 2);

changes items to:

A
D

Remember:

slice() copies. splice() changes.

Join Array Items Into a String

The join() method combines array items into a string.

Example:

const words = ["JavaScript", "is", "fun"];

const sentence = words.join(" ");

console.log(sentence);

Output:

JavaScript is fun

You choose the separator.

Example:

const categories = ["HTML", "CSS", "JavaScript"];

console.log(categories.join(", "));

Output:

HTML, CSS, JavaScript

Convert a String Into an Array With split()

split() is a string method, but it is often used with arrays.

Example:

const tags = "html,css,javascript";

const tagArray = tags.split(",");

console.log(tagArray);

The result is an array containing:

html
css
javascript

This is useful when text contains several values separated by a known character.

You will study strings more deeply in a dedicated JavaScript Strings lesson.

Combine Arrays With concat()

The concat() method creates a new array by combining arrays or values.

Example:

const frontend = ["HTML", "CSS"];
const scripting = ["JavaScript"];

const skills = frontend.concat(scripting);

console.log(skills);

Result:

HTML
CSS
JavaScript

The original arrays are not changed.

Modern JavaScript also commonly uses spread syntax:

const skills = [...frontend, ...scripting];

You will study spread syntax later.

Loop Through an Array With for

A classic for loop gives you the index.

const products = ["Laptop", "Phone", "Tablet"];

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

Output:

Laptop
Phone
Tablet

Use this pattern when you need the position of each item.

Loop Through an Array With for…of

If you only need each value, for...of is often cleaner.

const products = ["Laptop", "Phone", "Tablet"];

for (const product of products) {
    console.log(product);
}

Output:

Laptop
Phone
Tablet

You learned both loop styles in the JavaScript Loops tutorial.

Real Website Example: Calculate Cart Total

Suppose:

const prices = [500, 1200, 300, 800];

Calculate the total:

let total = 0;

for (const price of prices) {
    total += price;
}

console.log(total);

Output:

The loop processes every value in the array.

Real Website Example: Count Products Above a Price

const prices = [500, 1200, 300, 2000];

let count = 0;

for (const price of prices) {
    if (price > 1000) {
        count++;
    }
}

console.log(count);

Output:

This combines arrays, loops, comparisons, and if conditions.

Arrays of Objects

Real websites often store objects inside arrays.

Example:

const products = [
    {
        name: "Laptop",
        price: 50000,
        inStock: true
    },
    {
        name: "Phone",
        price: 25000,
        inStock: false
    }
];

Each item is one product object.

Access the first product:

console.log(products[0]);

Access its name:

console.log(products[0].name);

Output:

Laptop

Arrays of objects are extremely common in APIs, shopping sites, dashboards, and Angular applications.

You will understand object properties properly in the JavaScript Objects tutorial.

Loop Through an Array of Objects

Example:

const products = [
    { name: "Laptop", price: 50000 },
    { name: "Phone", price: 25000 },
    { name: "Mouse", price: 1000 }
];

for (const product of products) {
    console.log(`${product.name}: ₹${product.price}`);
}

Output:

Laptop: ₹50000
Phone: ₹25000
Mouse: ₹1000

This is close to the way real product data is processed.

Real Website Example: Show Only Available Products

const products = [
    { name: "Laptop", inStock: true },
    { name: "Phone", inStock: false },
    { name: "Mouse", inStock: true }
];

for (const product of products) {
    if (product.inStock) {
        console.log(product.name);
    }
}

Output:

Laptop
Mouse

Later, the filter() array method can make this kind of task shorter.

Nested Arrays

An array can contain other arrays.

Example:

const rows = [
    ["A1", "A2"],
    ["B1", "B2"]
];

Access the first inner array:

console.log(rows[0]);

Access the first item inside the second inner array:

console.log(rows[1][0]);

Output:

B1

This pattern is sometimes called a multidimensional array.

Real Example: Table Data

const table = [
    ["Product", "Price"],
    ["Laptop", 50000],
    ["Phone", 25000]
];

Access:

console.log(table[1][0]);

Output:

Laptop

Nested arrays can be useful for grids, coordinates, and table-like data.

For named business data, arrays of objects are often easier to read.

How to Check Whether a Value Is an Array

JavaScript arrays are objects.

So:

const products = ["Laptop", "Phone"];

console.log(typeof products);

Output:

object

To check specifically for an array, use:

console.log(Array.isArray(products));

Output:

true

For a normal object:

const product = {
    name: "Laptop"
};

console.log(Array.isArray(product));

Output:

false

Use Array.isArray() when you need to know whether a value is really an array.

Empty Arrays Are Truthy

This surprises many beginners.

Consider:

const items = [];

if (items) {
    console.log("This runs");
}

The message runs because an empty array is truthy.

If you want to know whether the array contains items, check its length:

if (items.length > 0) {
    console.log("Array has items");
}

To check whether it is empty:

if (items.length === 0) {
    console.log("Array is empty");
}

Compare Arrays Carefully

Two separate arrays are not strictly equal, even when they contain the same values.

console.log([1, 2] === [1, 2]);

Output:

false

These are two different array objects.

This returns true:

const first = [1, 2];
const second = first;

console.log(first === second);

Output:

true

Both variables refer to the same array.

You first saw this behavior in the JavaScript Comparison Operators lesson.

Copying an Array Is Different From Sharing It

Consider:

const original = ["Laptop", "Phone"];
const copy = original;

These two variables refer to the same array.

Now:

copy.push("Tablet");

The original also contains "Tablet".

Why?

No new array was created.

Both variables point to the same array.

To create a shallow copy:

const copy = original.slice();

or later with spread syntax:

const copy = [...original];

What Does Shallow Copy Mean?

A shallow copy creates a new outer array.

For primitive items, this often behaves as beginners expect.

Example:

const original = ["A", "B"];
const copy = original.slice();

copy.push("C");

console.log(original);

The original remains:

A
B

But when an array contains objects, the nested objects are still shared by a shallow copy.

Example:

const original = [
    { name: "Laptop" }
];

const copy = original.slice();

copy[0].name = "Phone";

console.log(original[0].name);

Output:

Phone

You will understand this more clearly after learning objects.

For now, remember that copying the array does not automatically create deep copies of every nested object.

Finding Objects in Arrays

includes() is simple for primitive values:

const names = ["Amit", "Riya"];

console.log(names.includes("Riya"));

But real product arrays contain objects.

For objects, later you will use methods such as:

find()
findIndex()
some()

Example:

const products = [
    { id: 1, name: "Laptop" },
    { id: 2, name: "Phone" }
];

const product = products.find((item) => item.id === 2);

console.log(product.name);

Output:

Phone

Do not worry if the arrow function looks advanced.

You will study array callback methods in a later lesson.

Important Array Methods You Will Learn Later

Once you understand array basics, modern JavaScript uses methods such as:

forEach()
map()
filter()
find()
findIndex()
some()
every()
reduce()
sort()

These methods are important, but each one solves a different task.

For example:

forEach() performs work for each item.
map() creates a transformed array.
filter() keeps matching items.
find() returns the first matching item.
some() checks whether at least one item passes.
every() checks whether every item passes.
reduce() combines items into one result.

Understanding indexes, loops, mutation, and basic array methods first makes these methods much easier to learn.

Real Website Example: Shopping Cart

A realistic cart may look like:

const cart = [
    {
        name: "Keyboard",
        price: 1500,
        quantity: 2
    },
    {
        name: "Mouse",
        price: 700,
        quantity: 1
    }
];

Calculate the cart total:

let total = 0;

for (const item of cart) {
    total += item.price * item.quantity;
}

console.log(total);

Output:

This is a common real-world use of an array of objects.

Real Website Example: Add and Remove Cart Items

Start:

const cart = [];

Add products:

cart.push("Keyboard");
cart.push("Mouse");

Now:

console.log(cart.length);

Output:

Remove the last item:

const removedItem = cart.pop();

console.log(removedItem);

Output:

Mouse

The cart now contains one item.

Real Website Example: Search Recent Items

Suppose:

const recentSearches = [
    "JavaScript arrays",
    "CSS grid",
    "HTML forms"
];

Check whether a search already exists:

const exists = recentSearches.includes("CSS grid");

console.log(exists);

Output:

true

This can help prevent simple duplicate values.

Real Website Example: Remove an Item by Index

Suppose:

const cart = ["Laptop", "Phone", "Mouse"];

Find the phone:

const index = cart.indexOf("Phone");

Then remove it:

if (index !== -1) {
    cart.splice(index, 1);
}

Now:

console.log(cart);

contains:

Laptop
Mouse

Checking for -1 first prevents removing the wrong item.

Why Checking indexOf() Matters Before splice()

Consider:

const cart = ["Laptop", "Phone", "Mouse"];

const index = cart.indexOf("Tablet");

The result is:

-1

If you run:

cart.splice(index, 1);

you are effectively using:

cart.splice(-1, 1);

That can remove the last item.

Always confirm the index is valid:

if (index !== -1) {
    cart.splice(index, 1);
}

Common Beginner Mistakes

Starting Array Indexes at 1

Wrong:

const products = ["Laptop", "Phone"];

console.log(products[1]);

This prints:

Phone

not "Laptop".

The first item is:

products[0]

Using array.length as the Last Index

Wrong:

const products = ["Laptop", "Phone", "Tablet"];

console.log(products[products.length]);

Output:

undefined

Use:

products[products.length - 1]

Using <= in an Index Loop

Wrong:

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

The final iteration goes past the last item.

Use:

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

Expecting const to Make an Array Immutable

This works:

const products = [];

products.push("Laptop");

const prevents reassignment of the variable, not changes inside the array.

Confusing push() and unshift()

push() adds to the end.

unshift() adds to the beginning.

Confusing pop() and shift()

pop() removes from the end.

shift() removes from the beginning.

Confusing slice() and splice()

slice() returns a new array and leaves the original unchanged.

splice() changes the original array.

Forgetting indexOf() Can Return -1

Always check:

if (index !== -1) {
    // use index
}

before using the result for removal.

Expecting typeof to Return “array”

It does not.

typeof []

returns:

object

Use:

Array.isArray(value)

Checking an Empty Array With if(array)

An empty array is truthy.

Wrong for checking whether it has items:

if (items) {
    console.log("Has items");
}

Use:

if (items.length > 0) {
    console.log("Has items");
}

Comparing Arrays Directly

This returns false:

[1, 2] === [1, 2]

because the arrays are separate objects.

Accidentally Sharing the Same Array

This does not create a copy:

const copy = original;

Both variables refer to the same array.

Use slice() or spread syntax when you need a new outer array.

Using for…in for Normal Array Values

Avoid:

for (const item in products) {
    console.log(item);
}

This loops over keys or indexes.

For values, prefer:

for (const item of products) {
    console.log(item);
}

Removing Items While Looping Without Care

Changing array positions during an index-based loop can cause items to be skipped.

If removal logic becomes complex, use clearer patterns or array methods designed for filtering after you learn them.

Best Practices for JavaScript Arrays

Use plural names for arrays when possible:

const products = [];
const users = [];
const prices = [];

Use singular names for individual items:

for (const product of products) {
    // ...
}

Prefer const for an array variable when you do not plan to reassign it.

Use Array.isArray() when you need to confirm a value is an array.

Use for...of when you only need each value.

Use a classic for loop when you need index control.

Use includes() for simple existence checks.

Use indexOf() when you need the position of a primitive value.

Remember which methods change the original array.

Use slice() when you need a shallow copy or part of an array without mutation.

Check an index before using splice() to remove a searched item.

Keep arrays focused on related data when possible.

For complex records, use arrays of objects rather than several disconnected arrays.

Beginner Exercise

Create:

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

Complete these tasks:

Print the first fruit.
Print the last fruit.
Print the array length.
Change "Banana" to "Orange".
Add "Grapes" to the end.
Add "Guava" to the beginning.
Remove the last item.
Loop through the final array with for...of.

Try each step in the browser Console.

Challenge Exercise

Create:

const prices = [500, 1200, 300, 2000, 700];

Use a loop to calculate the total.

Then count how many prices are greater than ₹500.

Next, check whether:

exists in the array.

Finally, find the index of:

Print every result.

Extra Challenge

Create:

const cart = [
    { name: "Keyboard", price: 1500, quantity: 2 },
    { name: "Mouse", price: 700, quantity: 1 },
    { name: "Monitor", price: 12000, quantity: 1 }
];

Use a loop to calculate the complete cart total.

Then print the name of every product costing more than ₹1,000.

Frequently Asked Questions

What is an array in JavaScript?

A JavaScript array is an ordered collection that stores multiple values in one variable.

How do I create an array in JavaScript?

Use square brackets:

const products = ["Laptop", "Phone", "Tablet"];

What is an array index?

An index is the numeric position of an array item.

JavaScript array indexes start at 0.

How do I get the first array item?

Use index 0:

products[0]

How do I get the last array item?

You can use:

products[products.length - 1]

or:

products.at(-1)

What does array.length do?

length returns the number of items in an array.

const items = ["A", "B", "C"];

console.log(items.length);

returns 3.

How do I add an item to an array?

Use push() to add at the end:

items.push("New item");

Use unshift() to add at the beginning.

How do I remove an array item?

Use pop() to remove the last item.

Use shift() to remove the first item.

Use splice() when you need to remove an item from a specific position.

What does push() return?

push() returns the array’s new length.

What does pop() return?

pop() returns the item that was removed.

What is the difference between slice and splice?

slice() returns part of an array without changing the original.

splice() changes the original array by adding, removing, or replacing items.

How do I check whether an array contains a value?

Use:

array.includes(value)

It returns true or false.

How do I find an item’s index?

Use:

array.indexOf(value)

It returns the index or -1 when the value is not found.

Why does typeof [] return object?

Arrays are a special kind of JavaScript object.

Use Array.isArray() when you specifically need to identify an array.

How do I check whether an array is empty?

Check its length:

array.length === 0

Are empty arrays falsy?

No.

An empty array is truthy.

Check array.length when you need to know whether it contains items.

Can a const array change?

Yes.

You can add, remove, or update items inside a const array.

You cannot reassign the variable to a different array.

Can arrays contain objects?

Yes.

Arrays of objects are extremely common in real JavaScript applications.

Can arrays contain other arrays?

Yes.

An array containing arrays is often called a nested or multidimensional array.

How do I loop through an array?

You can use a classic for loop or for...of.

Example:

for (const product of products) {
    console.log(product);
}

Should I use for…in for arrays?

Usually not for normal array values.

Use for...of for values or a classic for loop when you need indexes.

What is a shallow copy of an array?

A shallow copy creates a new outer array, but nested objects are still shared.

Methods such as slice() and spread syntax can create shallow copies.

What array methods should I learn after the basics?

Important next methods include forEach(), map(), filter(), find(), some(), every(), reduce(), and sort().

What should I learn after JavaScript arrays?

Learn JavaScript objects next. Objects let you store related information with named properties instead of numeric indexes.

Summary

JavaScript arrays store ordered collections of values.

Create an array with:

const products = ["Laptop", "Phone", "Tablet"];

Array indexes start at:

Use:

products[0]

to access the first item.

Use:

products.length

to get the number of items.

You also learned how to:

Read array items
Update items
Add with push() and unshift()
Remove with pop() and shift()
Search with includes() and indexOf()
Copy with slice()
Add, remove, and replace with splice()
Join array items
Combine arrays
Loop through values
Work with arrays of objects
Use nested arrays
Check arrays with Array.isArray()
Understand const arrays
Avoid common index and mutation mistakes

Arrays are one of the most important JavaScript structures because websites constantly work with lists and collections.

Continue Learning JavaScript

Previous Lesson: JavaScript Functions Explained

Course Home: JavaScript Tutorial for Beginners

Next Lesson: JavaScript Objects Explained for Beginners

In the next lesson, you will learn how JavaScript objects store related data with named properties, how to read and update those properties, and how objects work inside real product and user data.

James Parker

44 Posts

James Parker is a technology writer and WordPress enthusiast who shares practical guides on SEO, web development, AI tools, and digital growth. He focuses on creating easy-to-follow tutorials that help beginners and professionals build better websites and improve their online presence.

View All Posts

JavaScript Arrays: Store, Access and Update Multiple Values

Quick Answer

What Is an Array in JavaScript?

Why JavaScript Arrays Matter

How to Create an Array

Arrays Can Store Different Data Types

JavaScript Array Indexes Start at 0

What Happens With an Invalid Index?

How to Get the Last Array Item

JavaScript Array length

Array length Is Not the Last Index

How to Change an Array Item

Can You Change an Array Declared With const?

Add an Item With push()

What Does push() Return?

Real Website Example: Add to Cart

Remove the Last Item With pop()

What Does pop() Return?

Add an Item to the Beginning With unshift()

Remove the First Item With shift()

push vs unshift

pop vs shift

Array Methods That Change the Original Array

Find an Item With includes()

includes() Is Case-Sensitive for Strings

Find an Item’s Index With indexOf()

Check Whether an Item Exists With indexOf()

Copy Part of an Array With slice()

slice() Does Not Change the Original Array

Copy an Entire Array With slice()

Remove Items With splice()

splice() Returns the Removed Items

Add Items With splice()

Replace Items With splice()

slice vs splice

Join Array Items Into a String

Convert a String Into an Array With split()

Combine Arrays With concat()

Loop Through an Array With for

Loop Through an Array With for…of

Real Website Example: Calculate Cart Total

Real Website Example: Count Products Above a Price

Arrays of Objects

Loop Through an Array of Objects

Real Website Example: Show Only Available Products

Nested Arrays

Real Example: Table Data

How to Check Whether a Value Is an Array

Empty Arrays Are Truthy

Compare Arrays Carefully

Copying an Array Is Different From Sharing It

What Does Shallow Copy Mean?

Finding Objects in Arrays

Important Array Methods You Will Learn Later

Real Website Example: Shopping Cart

Real Website Example: Add and Remove Cart Items

Real Website Example: Search Recent Items

Real Website Example: Remove an Item by Index

Why Checking indexOf() Matters Before splice()

Common Beginner Mistakes

Starting Array Indexes at 1

Using array.length as the Last Index

Using <= in an Index Loop

Expecting const to Make an Array Immutable

Confusing push() and unshift()

Confusing pop() and shift()

Confusing slice() and splice()

Forgetting indexOf() Can Return -1

Expecting typeof to Return “array”

Checking an Empty Array With if(array)

Comparing Arrays Directly

Accidentally Sharing the Same Array

Using for…in for Normal Array Values

Removing Items While Looping Without Care

Best Practices for JavaScript Arrays

Beginner Exercise

Challenge Exercise

Extra Challenge

Frequently Asked Questions

What is an array in JavaScript?