JavaScript Arrays Explained for Beginners (With Simple Examples)

Hello readers 👋, this is the 4th blog of my JavaScript series.

In this blog we will understand What is array?, Why do we need array? and some operations that we can perform on array.

Imagine this: you are given a task to store the marks of students. How would you store the marks if arrays did not exist?

Probably like this:

let mark1 = 90;
let mark2 = 87;
let mark3 = 80;
.
.
.
let markn = 43;

Now imagine this situation where you need to store 100s or 1000s of marks. How tedious task it would be. This is where arrays come into the picture.

What is an Array?

In JavaScript, an array is a single variable used to store an ordered collection or list of multiple values, which are accessed using numbered indexes starting at zero.

To create an array we use square braces to store the values separated by comma.

Example:

let marks = [90, 87, 80, 79, 94]

This single variable marks contains multiple values, and the values can be accessed using their index.

In an array, each value can be accessed by an index. The index starts from 0.
And to access the value you can:

let arr = ["apple", "banana", "watermelon", "chocolava"]
let value = arr[3];

console.log(value) 

//OUTPUT
//chocolava

To access the last value of the array -

let arr = ["apple", "banana", "watermelon", "chocolava"]
let value = arr[arr.length - 1];

console.log(value) //chocolava

// OUTPUT
// chocolava

These are another way to access elements using at()

let arr = ["apple", "banana", "watermelon", "chocolava"]
let value = arr.at(2);

console.log(value) //watermelon

// OUTPUT
// watermelon

To access the last value in the array:

let arr = ["apple", "banana", "watermelon", "chocolava"]
let value = arr.at(-1);

console.log(value) //chocolava

// OUTPUT
// chocolava

Change the value in an array:

let arr = ["apple", "banana", "watermelon", "chocolava"]
let value = arr.at(2);

arr[2] = "changed value" // Changing the value here!!!

console.log(arr)

// OUTPUT
// [ 'apple', 'banana', 'changed value', 'chocolava' ]

.length property

Using .length we can access the number of element in the array. It returns an integer value.

let arr = [32, 43, 54, 90]
let len = arr.length;

console.log(len) // 4

Now lets talk about looping over the array.

There are multiple ways to loop over the array. Some of the methods are:-

• for loop
• .map function
• for...of loop

for loop

The most common way to iterate through an array is using a for loop.
It allows us to access each element of the array using its index.

Example:

let arr = ["apple", "banana", "watermelon", "chocolava"]

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

// OUTPUT
// apple
// banana
// watermelon
// chocolava

How this works

1. let i = 0 → The loop starts from index 0.
2. i < arr.length → The loop runs until the last element of the array.
3. i++ → The index increases after every iteration.
4. arr[i] → Accesses the element at the current index.

for...of loop

JavaScript also provides a simpler and cleaner way to loop through arrays using for...of.

Instead of working with indexes, it directly gives us the values of the array.

Example:

let arr = ["apple", "banana", "watermelon", "chocolava"]

for (let fruit of arr) {
  console.log(fruit)
}

// OUTPUT
// apple
// banana
// watermelon
// chocolava

This is often more readable and cleaner when you only need the values and not the index.

.map() function

Another powerful way to work with arrays is using the .map() method.

.map() is used when we want to create a new array by transforming each element of the existing array.

Example:

let numbers = [1, 2, 3, 4]

let doubled = numbers.map(num => num * 2)

console.log(doubled)

// OUTPUT
// [2, 4, 6, 8]

How .map() works

1. It takes a callback function.
2. That function runs for every element in the array.
3. The returned value becomes part of a new array.

Important: .map() does not modify the original array.

Conclusion

Arrays are one of the most fundamental and powerful data structures in JavaScript. Instead of creating multiple variables to store related values, arrays allow us to store and manage them efficiently in a single place.

In this blog, we learned:

• What an array is and why we need it
• How to create an array
• How to access and update array elements
• How to use the .length property
• Different ways to loop through arrays using for, for...of, and .map()

Understanding arrays is extremely important because they are used everywhere in JavaScript - from handling lists of data to working with APIs and building dynamic applications.

---

Hope you liked this blog. If there’s any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

Comments

[Jon Randy 🎖️]

The 'length' property of an array doesn't actually give you the number of elements stored in the array - it gives you the length of the array, which is not necessarily the same thing.

Arrays in JS are sparse arrays, which means they can have empty slots. Such slots are truly empty and are different from slots that contain undefined. Empty slots are skipped by most array methods.

The following array only contains 2 elements, but has a length of 3:

[1,, 3]

If you use the forEach method on this array, your callback will only run twice as the array only contains two elements