DEV Community

Cover image for JavaScript Arrays
Saravanan Lakshmanan
Saravanan Lakshmanan

Posted on

JavaScript Arrays

What is an Array?

An Array is a special object in JavaScript used to store multiple values in a single variable.

Imagine you want to store the names of 5 students.

❌ Without Array:

let student1 = "Ram";
let student2 = "Priya";
let student3 = "Kumar";
let student4 = "John";
let student5 = "Sara";

✅ With Array:

let students = ["Ram", "Priya", "Kumar", "John", "Sara"];

Instead of creating multiple variables, we store all values inside one array.


1. Creating Arrays (2 Methods)

Method 1: Array Literal (Most Common)

This is the easiest and most commonly used method.

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

How it works:

Index Value


0 Apple
1 Mango
2 Orange


Method 2: Array Constructor

Arrays can also be created using the Array() constructor.

let fruits = new Array("Apple", "Mango", "Orange");

Output:

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

Note:

Most developers prefer the Array Literal method because it is shorter and easier to read.

Preferred:
let fruits = ["Apple", "Mango", "Orange"];

Less Common:
let fruits = new Array("Apple", "Mango", "Orange");


2. Understanding Index

Every element in an array has a position called an index.

⚠️ Array indexing starts from 0, not 1.

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

Index Value


0 Apple
1 Mango
2 Orange


3. Accessing Array Elements

Use square brackets [] with the index number.

Example:

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

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

Accessing an Invalid Index:

console.log(fruits[5]);

Output:

undefined

Because index 5 does not exist.


4. Array Length Property

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

Example:

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

console.log(fruits.length);

Output:

3

Because there are 3 elements.

Another Example:

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

console.log(numbers.length);

Output:

5


5. Getting the Last Element Using Length

A common interview question.

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

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

Output:

Orange

Explanation:

fruits.length returns 3

Last Index = 3 - 1 = 2

fruits[2] returns Orange


6. Array Elements Can Be Any Data Type

Unlike Java, JavaScript arrays can store different types of values in the same array.

Example:

let data = [
"Saravanan",
26,
true,
null
];

console.log(data);

Output:

["Saravanan", 26, true, null]


Arrays Can Store Objects

let person = [
{
name: "Saravanan",
age: 26
}
];

console.log(person);


Arrays Can Store Other Arrays

let nestedArray = [
[10, 20],
[30, 40]
];

console.log(nestedArray);

Output:

[[10,20],[30,40]]


7. Using Loops with Arrays

Arrays are commonly used with loops because they allow us to process multiple values efficiently.

Using a Traditional for Loop

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

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

Output:

Apple
Mango
Orange

How it Works:

1st Iteration:
i = 0
fruits[0] → Apple

2nd Iteration:
i = 1
fruits[1] → Mango

3rd Iteration:
i = 2
fruits[2] → Orange

Loop stops when:
i < fruits.length becomes false.


References:
https://www.w3schools.com/js/js_arrays.asp
https://www.geeksforgeeks.org/javascript/javascript-arrays/

Top comments (0)