JavaScript Arrays 101: The Easy Way to Manage Multiple Values
Assume a real-world case. Suppose you are going to the market to buy fruits.
The shopkeeper asks you:
“Which fruits do you want?”
You say:
1 dozen bananas, 1 kg oranges, and 1/2 kg grapes.
Now the shopkeeper takes those fruits, weighs them, and packs them in a bag.
But what if the shopkeeper packs each fruit separately in different bags?
It would be difficult for you to carry multiple bags and take them home.
A similar situation happens in programming. When we want to store a group of related data in a single place and access them easily, we use an Array.
An Array helps us keep multiple values together, just like putting all the fruits into a single bag instead of carrying many separate bags.
Array
As we know, everything is an object in JavaScript.
An array is a special type of object in JavaScript that allows us to store multiple values in a single variable, where each value is stored at a specific index, and we can access them using that index.
💡Index: It is used to represent the position of elements in an array, at which position they are stored.
Example:
const fruits = ["banana","orange","grapes"];
Here:
fruits→ Name of array"banana","orange","grapes"→ Items or elements stored in arrayIndex of items are →
0,1,2
💡Note: In JavaScript, arrays are heterogeneous, meaning they can store different types of data.
Why We Need Arrays?
Imagine if you want to store 5 student's marks in a program.
Without using an array, you have to create separate variables for each value.
Storing multiple values in separate variables:
const marks1 = 85;
const marks2 = 75;
const marks3 = 67;
const marks4 = 95;
const marks5 = 84;
Now, think if you want to create this program for 100 students, how difficult it could become to manage. Also, performing operations becomes complicated.
In this scenario, an array helps us to:
Store multiple values in a single variable.
Make data management easier
Allow easy looping and processing of data
Reduce the need to create many variables
Help in performing operations like searching, sorting, and filtering
Storing multiple values using an Array:
const marks = [85,75,67,95,84]
Creating an Array
In JavaScript, we can create an array in two ways:
- Array Constructor
const colours = new Array("Yellow","Orange","Pink")
- Array Literal
const colours = ["Yellow","Orange","Pink"]
Use cases:
If the size of the array is known, we can create it using the Array constructor.
If the size of the array is not known, it is better to use an Array literal (
[]).
Array literals allow us to create an array of a dynamic size, means its size is decided based on the number of elements present in it.
Accessing Elements using index
As we have already discussed above, each element is stored at a certain position in an array, and these positions are known as Indexes.
💡Note: In Array, indexes start from 0, the reason behind this is how the array is stored in memory.
So, we can also access the elements by using these indexes.
const fruits = ["Orange","Yellow","Pink"]
console.log(fruits[0]) //Orange
console.log(fruits[1]) //Yellow
console.log(fruits[2]) //Pink
To print the entire array, we can simply print the variable name:
console.log(fruits)
Remember: If you try to access an index that is beyond the length of the array, JavaScript will return undefined .
const fruits = ["banana", "orange", "grapes"];
console.log(fruits[5]); //It will print undefined
Since the index 5 does not exist, JavaScript returns undefined Instead of throwing an error.
Updating elements of an Array
In JavaScript, if you want to update any element in the array, you first need to know at which place/index the element is stored. Once you know the position, you can update the value at that index
const colors = ["banana", "orange", "grapes"]
fruits[1]="Apple"
console.log(fruits[1]) //Apple
Or we can also find the index, then update.
const fruits = ["banana", "orange", "grapes"];
const index = fruits.indexOf("orange");
if (index !== -1) {
fruits[index] = "apple";
}
console.log(fruits);
Size of an Array
In JavaScript, there are many built-in properties and methods available with each object that we can use directly.
Similarly, Arrays also have several built-in properties and methods. One of the most commonly used properties is length.
The length of an array is used to determine the size (number of elements) present in the array.
const colors = ["banana", "orange", "grapes"]
console.log(colors.length)
Iterating an Array
Iteration means repeating a process. In programming, it is usually called “Looping” over a collection of data, such as an array.
Looping helps us to access the individual elements that are stored in the array and modify them.
Here we are going to access all the elements of an array using loops.
In JavaScript, we have three basic types of loops:
forwhiledo-while
Each loop has its own use cases. Here we are going to access elements of an array using all three loops one by one.
1. The Classic for Loop :
const fruits= ["banana","orange","grapes","mango","gauva"]
for(let index = 0; index < fruits.length; index++){
console.log(fruits[index]);
}
Output :
banana
orange
grapes
mango
gauva
In the above loop:
Step 1 :
index → It is a variable that starts from 0. We use it to access the position(index) of the elements stored in the array.
Step 2:
index<fruits.length → It is a base condition for loops. If the condition is true, the loop will continue running. If it becomes false, the loop will stop.
Step 3:
console.log(fruits[index]) → This line will access the element stored at the current index of the array and print it.
Step 4:
index++ → After each iteration, the value of the index increases by 1, so the loop moves to the next element.
After this, the cycle repeats from Step 2 to Step 4 until the condition is false.
2. The While Loop :
const fruits= ["banana","orange","grapes","mango","gauva"]
let index = 0;
while(index < fruits.length){
console.log(fruits[index]);
index++;
}
This loop works in the same way as the for loop. The only difference is that the initialization, condition and increment are written separately.
3. The do-while Loop :
const fruits= ["banana","orange","grapes","mango","gauva"]
let index = 0;
do{
console.log(fruits[index]);
index++;
}while(index < fruits.length)
This loop works in a slightly different way. It does not check the condition for the first time. Instead, it executes the code inside do block first, and after that, it checks the condition in the while .
If the condition is true, the loop runs again. If the condition is false, the loop stops.
Conclusion
By the end of this blog, I hope you now understand what arrays are in JavaScript.
We covered:
→ How arrays are created
→ How array elements are accessed
→ How array elements are modified
Arrays are one of the most important data structures in JavaScript, and they help us store and manage multiple values efficiently.
