JavaScript Arrays
JavaScript array elements are read using their index, starting at 0.
The first element is at index 0, not 1.
This catches out almost everyone at first, so it is worth saying twice.
Example
javascript
const fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0]);
console.log(fruits[2]);The output is Apple then Mango.
An index is the position of an element, counted from 0.
Write the index in square brackets after the array name.
Reading an index that does not exist gives undefined rather than an error.
Syntax
javascript
array[index]The index must be a number, not a name in quotes.
Because counting starts at 0, the last index is length - 1.
Example
javascript
const fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[fruits.length - 1]);The output is Mango.
at() does the same job and accepts negative numbers.
at(-1) is a much clearer way to ask for the last element.
Example
javascript
const fruits = ["Apple", "Banana", "Mango"];
console.log(fruits.at(-1));
console.log(fruits.at(0));Negative numbers count backwards from the end.
Reading past the end is not an error, which can hide bugs.
Example
javascript
const fruits = ["Apple"];
console.log(typeof fruits[5]);The output is undefined.
Assign to an index to replace the value there.
Example
javascript
const fruits = ["Apple", "Banana"];
fruits[1] = "Cherry";
console.log(fruits.join(","));The second element has been replaced.
Use one pair of brackets for each level.
Example
javascript
const grid = [[1, 2], [3, 4]];
console.log(grid[1][0]);The first bracket picks the row, the second picks the value in it.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Array Access</title>
</head>
<body>
<h1>JavaScript Array Access</h1>
<p id="result"></p>
<script>
const fruits = ["Apple", "Banana", "Mango"];
document.getElementById("result").innerHTML =
"First: " + fruits[0] + "<br>Last: " + fruits.at(-1);
</script>
</body>
</html>Run the above example in the Try It Editor.
Try a middle element:
Show fruits[1] as well and see which name appears.
length - 1.at(-1) reads the last element directly.undefined, not an error.JavaScript array access uses a numeric index that starts at 0.
at() makes reading from the end far more readable.
Understanding indexes is needed for every loop over an array.