Accessing Elements in JavaScript Arrays

by

JavaScript arrays allow you to store multiple values in a single variable. To work with these values, you need to know how to access individual elements. JavaScript provides several ways to access array elements using indexes, properties, and modern methods.

In this tutorial, you will learn how to access array elements, retrieve the first and last elements, use negative indexes, and access elements in nested arrays.

Accessing Array Elements Using Indexes

The most common way to access an array element is by using its index. JavaScript array indexes start at 0, which means the first element is at index 0, the second element is at index 1, and so on.

If you are new to arrays, first learn what an array is in JavaScript to understand how elements are stored.

Syntax:

arrayName[index];

Example:

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

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

Output:

Apple
Banana
Mango

Here, fruits[0] accesses "Apple", fruits[1] accesses "Banana", and fruits[2] accesses "Mango".

Accessing the First Element of an Array

You can access the first element of an array by using index 0.

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

console.log(colors[0]);

Output:

Red

This method works for arrays containing strings, numbers, objects, and other values.

Accessing the Last Element of an Array

To access the last element, use the array’s length property minus one.

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

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

Output:

Orange

The length property returns the number of elements in an array. Because indexing starts at 0, subtracting 1 gives the index of the last element in a non-empty, dense array.

For example, an array containing four elements has a length of 4, but its last index is 3.

Accessing Elements Using at()

JavaScript provides the at() method to access array elements using positive or negative indexes.

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

console.log(fruits.at(0));
console.log(fruits.at(2));
console.log(fruits.at(-1));

Output:

Apple
Mango
Orange

The at() method works as follows:

  • at(0) returns the first element.
  • at(2) returns the third element.
  • at(-1) returns the last element.

Negative indexes count backward from the end of the array. This makes at(-1) convenient when you want the last element without calculating its index.

Accessing an Element That Does Not Exist

If you access an index that does not contain an element, JavaScript returns undefined.

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

console.log(fruits[5]);

Output:

undefined

The array has elements at indexes 0, 1, and 2. Since index 5 does not contain an element, the result is undefined.

You can check whether an index exists using the in operator, but remember that it checks properties on the array and its prototype chain.

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

console.log(1 in fruits);
console.log(5 in fruits);

Output:

true
false

The first result is true because index 1 exists. The second is false because index 5 does not exist.

Accessing Elements in a Nested Array

A nested array is an array that contains another array as an element. To access a value inside a nested array, use multiple sets of square brackets.

let numbers = [
    [10, 20, 30],
    [40, 50, 60],
    [70, 80, 90]
];

console.log(numbers[0][1]);
console.log(numbers[1][2]);
console.log(numbers[2][0]);

Output:

20
60
70

For numbers[0][1], JavaScript first accesses the inner array at index 0. It then retrieves the element at index 1 from that inner array.

Nested arrays are useful for representing tables, grids, and other structured data.

Accessing Object Properties Inside an Array

Arrays can contain objects, and you can access their properties by combining array indexes with dot notation or bracket notation.

let students = [
    { name: "Arun", marks: 85 },
    { name: "Priya", marks: 92 },
    { name: "Rahul", marks: 78 }
];

console.log(students[0].name);
console.log(students[1].marks);
console.log(students[2]["name"]);

Output:

Arun
92
Rahul

Here, students[0] retrieves the first object, and .name accesses its name property.

You can learn more about working with reusable operations in JavaScript Functions.

Frequently Asked Questions

How do you access an array element in JavaScript?

Use the array name followed by the element’s index inside square brackets, such as fruits[0].

How do you access the last element of an array?

Use array[array.length - 1] or array.at(-1).

What happens when you access an invalid array index?

JavaScript returns undefined when the requested index does not contain an element.

Can you use negative indexes with square brackets?

Negative numbers inside square brackets are treated as property keys, not indexes counting backward. Use array.at(-1) to access the last element.

How do you access an element inside a nested array?

Use multiple index expressions, such as numbers[0][1], to access an element inside an inner array.