Annapoorani Kadhiravan

Posted on Jun 19

Arrays in JavaScript

#webdev #programming #productivity #tutorial

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:

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:

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:

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:

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:

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