Arrays are one of the most fundamental and widely used data structures in JavaScript. They allow us to store multiple values in a single variable and efficiently manipulate collections of data.
Examples of data commonly stored in arrays:
- Student names
- Marks
- Product lists
- Mobile numbers
- Cities
- Shopping cart items
What is an Array?
An array is a special type of object that stores multiple values in an ordered sequence.
Definition
An array is a collection of elements stored in contiguous positions and accessed using indexes.
Syntax
let arrayName = [value1, value2, value3];
Example:
let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits);
Output:
["Apple", "Banana", "Orange"]
Why Do We Need Arrays?
Without arrays:
let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Orange";
Managing many variables becomes difficult.
Using arrays:
let fruits = ["Apple", "Banana", "Orange"];
Everything is organized in one variable.
Real-Life Example
Think of a bookshelf.
Shelf
Book 0 → Java
Book 1 → Python
Book 2 → JavaScript
Book 3 → React
Similarly:
let courses = ["Java", "Python", "JavaScript", "React"];
Each element has an index.
Array Index
Array indexing starts from 0.
let colors = ["Red", "Blue", "Green"];
| Index | Value |
|---|---|
| 0 | Red |
| 1 | Blue |
| 2 | Green |
Accessing Elements
let colors = ["Red", "Blue", "Green"];
console.log(colors[0]);
console.log(colors[2]);
Output:
Red
Green
Creating Arrays
1. Array Literal (Most Common)
let numbers = [10, 20, 30];
2. Array Constructor
let numbers = new Array(10, 20, 30);
console.log(numbers);
Output:
[10, 20, 30]
Arrays Can Store Different Data Types
let data = [
"John",
25,
true,
null
];
console.log(data);
Output:
["John",25,true,null]
Length Property
Returns the number of elements.
let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits.length);
Output:
3
Modifying Elements
let fruits = ["Apple", "Banana", "Orange"];
fruits[1] = "Mango";
console.log(fruits);
Output:
["Apple", "Mango", "Orange"]
CRUD Operations with Arrays
Create
let laptops = ["HP", "Dell"];
Read
console.log(laptops[0]);
Output:
HP
Update
laptops[1] = "Lenovo";
Output:
["HP","Lenovo"]
Delete
Using pop():
laptops.pop();
console.log(laptops);
Output:
["HP"]
Adding Elements
push()
Adds elements at the end.
let numbers = [10,20];
numbers.push(30);
console.log(numbers);
Output:
[10,20,30]
Real-Life Example
Adding a person to the end of a queue.
unshift()
Adds elements at the beginning.
let numbers = [20,30];
numbers.unshift(10);
console.log(numbers);
Output:
[10,20,30]
Real-Life Example
VIP person entering at the front of the queue.
Removing Elements
pop()
Removes the last element.
let fruits = ["Apple","Banana","Orange"];
fruits.pop();
console.log(fruits);
Output:
["Apple","Banana"]
shift()
Removes the first element.
let fruits = ["Apple","Banana","Orange"];
fruits.shift();
console.log(fruits);
Output:
["Banana","Orange"]
Real-Life Example
The first person in a queue leaves after getting service.
splice()
Adds, removes, or replaces elements.
Removing
let numbers = [10,20,30,40];
numbers.splice(1,2);
console.log(numbers);
Output:
[10,40]
Adding
let numbers = [10,40];
numbers.splice(1,0,20,30);
console.log(numbers);
Output:
[10,20,30,40]
Replacing
let numbers = [10,20,30];
numbers.splice(1,1,100);
console.log(numbers);
Output:
[10,100,30]
slice()
Returns a portion of an array.
let numbers = [10,20,30,40,50];
console.log(numbers.slice(1,4));
Output:
[20,30,40]
Real-Life Example
Cutting a cake and taking only a few slices.
Looping Through Arrays
for Loop
let fruits = ["Apple","Banana","Orange"];
for(let i=0;i<fruits.length;i++){
console.log(fruits[i]);
}
for...of
for(let fruit of fruits){
console.log(fruit);
}
forEach()
fruits.forEach(function(item){
console.log(item);
});
Searching Arrays
includes()
let fruits = ["Apple","Banana","Orange"];
console.log(fruits.includes("Banana"));
Output:
true
indexOf()
console.log(fruits.indexOf("Orange"));
Output:
2
Joining Arrays
concat()
let a = [1,2];
let b = [3,4];
let result = a.concat(b);
console.log(result);
Output:
[1,2,3,4]
Spread Operator
let a = [1,2];
let b = [3,4];
let result = [...a,...b];
console.log(result);
Output:
[1,2,3,4]
Sorting Arrays
let numbers = [5,2,8,1];
numbers.sort();
console.log(numbers);
Output:
[1,2,5,8]
Reversing Arrays
let numbers = [10,20,30];
numbers.reverse();
console.log(numbers);
Output:
[30,20,10]
map()
Transforms elements.
let nums = [1,2,3];
let doubled = nums.map(function(num){
return num * 2;
});
console.log(doubled);
Output:
[2,4,6]
Real-Life Example
Doubling every employee's salary.
filter()
Returns matching elements.
let nums = [10,20,30,40];
let result = nums.filter(function(num){
return num > 20;
});
console.log(result);
Output:
[30,40]
Real-Life Example
Filtering students who scored above 80 marks.
reduce()
Reduces array into a single value.
let nums = [10,20,30];
let sum = nums.reduce(function(total,num){
return total + num;
},0);
console.log(sum);
Output:
60
Real-Life Example
Calculating total bill amount.
find()
Returns first matching element.
let nums = [10,20,30,40];
let result = nums.find(num => num > 20);
console.log(result);
Output:
30
some()
Checks whether at least one element satisfies the condition.
let nums = [10,20,30];
console.log(nums.some(num => num > 25));
Output:
true
every()
Checks whether all elements satisfy the condition.
let nums = [10,20,30];
console.log(nums.every(num => num > 5));
Output:
true
Destructuring Arrays
let colors = ["Red","Blue","Green"];
let [first, second] = colors;
console.log(first);
console.log(second);
Output:
Red
Blue
Arrays of Objects
let students = [
{
name: "John",
age: 21
},
{
name: "David",
age: 22
}
];
console.log(students[0].name);
Output:
John
Multidimensional Arrays
let matrix = [
[1,2],
[3,4]
];
console.log(matrix[1][0]);
Output:
3
Array Methods Summary
| Method | Purpose |
|---|---|
| push() | Add at end |
| pop() | Remove from end |
| shift() | Remove from beginning |
| unshift() | Add at beginning |
| splice() | Add, remove, replace |
| slice() | Extract part of array |
| concat() | Merge arrays |
| sort() | Sort elements |
| reverse() | Reverse elements |
| map() | Transform elements |
| filter() | Filter elements |
| reduce() | Convert to single value |
| find() | Find first match |
| some() | Checks one condition |
| every() | Checks all conditions |
Arrays vs Objects
| Arrays | Objects |
|---|---|
| Ordered collection | Key-value pairs |
| Accessed by index | Accessed by keys |
| Stores lists | Stores entities |
| Example: Marks | Example: Student |
Real-World Examples
Shopping Cart
let cart = [
"Laptop",
"Mouse",
"Keyboard"
];
Student Marks
let marks = [90,85,95];
Cities
let cities = [
"Madurai",
"Chennai",
"Coimbatore"
];
Employees
let employees = [
"John",
"David",
"Sam"
];
References :
https://www.geeksforgeeks.org/javascript/javascript-arrays/
https://www.w3schools.com/js/js_arrays.asp