Arrays Data Structure in Javascript

The array is a container which can hold a fixed number of items and these items should be of the same type. It stores a fixed-size sequential collection of elements of the same type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.

Why do we need arrays?

Let's say you want to record the average temperatures of all days of the week. You can record them as follows ?

let avgTempMon = 35;
let avgTempTue = 33;
let avgTempWed = 31;
let avgTempThur = 24;
let avgTempFri = 25;
let avgTempSat = 22;
let avgTempSun = 30;

console.log("Monday:", avgTempMon);
console.log("Tuesday:", avgTempTue);

Monday: 35
Tuesday: 33

But if you look at this it gets difficult to keep track of these variables. What if you had to do this for all months? It would get very difficult to keep track. So we use arrays to keep track of these ?

let avgTemps = [];
avgTemps[0] = 35;
avgTemps[1] = 33;
avgTemps[2] = 31;
avgTemps[3] = 24;
avgTemps[4] = 25;
avgTemps[5] = 22;
avgTemps[6] = 30;

console.log("Monday:", avgTemps[0]);
console.log("Friday:", avgTemps[4]);
console.log("All temperatures:", avgTemps);

Monday: 35
Friday: 25
All temperatures: [ 35, 33, 31, 24, 25, 22, 30 ]

Now you only need to keep track of one variable to get all the values.

Arrays Representation

Arrays are represented as contiguous blocks of memory holding data in them. For example:

The above image shows an array of 7 elements representing daily temperatures. The indices are the places where each of these elements are stored. Note that index starts with 0 and each element can be accessed via its index.

let temps = [35, 33, 31, 24, 25, 22, 30];
console.log("Element at index 0:", temps[0]);
console.log("Element at index 4:", temps[4]);
console.log("Element at index 6:", temps[6]);

Element at index 0: 35
Element at index 4: 25
Element at index 6: 30

Basic Array Creation

JavaScript provides multiple ways to create arrays:

// Using array literal (most common)
let fruits = ["apple", "banana", "orange"];

// Using Array constructor
let numbers = new Array(1, 2, 3, 4, 5);

// Creating empty array
let empty = [];

console.log("Fruits:", fruits);
console.log("Numbers:", numbers);
console.log("Empty array length:", empty.length);

Fruits: [ 'apple', 'banana', 'orange' ]
Numbers: [ 1, 2, 3, 4, 5 ]
Empty array length: 0

Common Array Operations

Here are the essential operations you can perform on arrays in JavaScript:

• Adding elements - push(), unshift(), splice()
• Removing elements - pop(), shift(), splice()
• Accessing elements - Using index notation
• Finding elements - indexOf(), includes(), find()
• Joining arrays - concat(), spread operator
• Sorting - sort(), reverse()
• Iterating - for loop, forEach(), map()

let colors = ["red", "green"];

// Adding elements
colors.push("blue");          // Add to end
colors.unshift("yellow");     // Add to beginning

console.log("After adding:", colors);

// Removing elements
let lastColor = colors.pop();    // Remove from end
let firstColor = colors.shift(); // Remove from beginning

console.log("Removed:", lastColor, "and", firstColor);
console.log("Final array:", colors);

After adding: [ 'yellow', 'red', 'green', 'blue' ]
Removed: blue and yellow
Final array: [ 'red', 'green' ]

Conclusion

Arrays are fundamental data structures in JavaScript that allow you to store multiple values in a single variable. They provide efficient access through indices and offer numerous built-in methods for manipulation, making them essential for organizing and managing collections of data.