We are going to move into something you will use almost every single day.
Arrays.
If you think about real-world applications, most of the data you deal with is not a single value. It is a collection of values.
A list of users.
A list of products.
A list of messages.
That is exactly what arrays represent.
What is an Array?
An array is a data structure used to store multiple values in a single variable.
const numbers = [1,2,3,4,5];
Instead of creating five separate variables, you store everything in one place.
Why Do We Need Arrays?
Imagine storing multiple values without arrays.
let user1="Shikhar";
let user2="Nikhil";
let user3="Prabhat";
This quickly becomes unmanageable.
Now with arrays:
const users = ["Shikhar", "Nikhil", "Prabhat"];
Cleaner, scalable, and easier to work with.
How Arrays Work Internally
Arrays are ordered collections. Each value has an index. Index starts from 0.
const fruits = ["apple", "banana", "mango"];
console.log(fruits[0]); // apple
console.log(fruits[1]); // banana
console.log(fruits[2]); // mango
This index-based access is what makes arrays powerful.
Arrays Can Store Anything
JavaScript arrays are flexible. They can store different types of data.
const mixed = [1, "hello", true, null];
They can even store objects and functions.
const data = [
{ name: "Shikhar" },
function() { console.log("Hi"); }
];
Array Length
Every array has a length property.
const numbers = [1, 2, 3, 4];
console.log(numbers.length); // 4
This tells how many elements are present.
Adding Elements
push (add at end)
arr.push(3);
console.log(arr); // [1, 2, 3]
const arr = [1, 2];
unshift (add at beginning)
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
Removing Elements
pop (remove from end)
arr.pop();
console.log(arr); // [0, 1, 2]
shift (remove from beginning)
arr.shift();
console.log(arr); // [1, 2]
Accessing and Updating Elements
const arr = [10, 20, 30];
arr[1] = 50;
console.log(arr); // [10, 50, 30]
Iterating Over Arrays
This is where arrays become useful.
Using for loop
const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
Using for...of
for (let value of arr) {
console.log(value)
}
Cleaner and easier to read.
Important Concept: Arrays Are Objects
In JavaScript, arrays are actually objects.
const arr = [1, 2, 3];
console.log(typeof arr); // object
This is important because arrays behave like reference types.
Reference Behavior (Very Important)
const arr1 = [1, 2, 3];
const arr2 = arr1;
arr2.push(4);
console.log(arr1); // [1, 2, 3, 4]
Both variables point to the same array.
How to Copy Arrays Properly
const arr1 = [1, 2, 3];
const arr2 = [...arr1];
arr2.push(4);
console.log(arr1); // [1, 2, 3]
Now they are separate.
Multidimensional Arrays
Arrays can contain other arrays.
const matrix = [
[1, 2],
[3, 4]
];
console.log(matrix[0][1]); // 2
Common Mistakes
1. Accessing wrong index
const arr = [1, 2, 3];
console.log(arr[3]); // undefined
2. Forgetting arrays are references
Leads to unexpected bugs.
3. Using wrong loop
Using for...in instead of for...of for arrays.
Real-World Example
const users = [
{ name: "Shikhar", age: 25 },
{ name: "Rahul", age: 30 }
];
for (let user of users) {
console.log(user.name);
}
This is how arrays are used in real applications.
Why Arrays Are So Important
Arrays are everywhere:
API responses
database queries
UI lists
form data
Most real-world problems involve arrays.
And the next topics in this series will show you how to:
transform data
filter data
compute results
Final Thought
Arrays are not just a data structure. They are the foundation of how you handle collections of data in JavaScript. If you understand arrays properly, you unlock the ability to solve real-world problems.
