JavaScript Arrays 101: A World In A Single Variable

Think, You are going to a mall and you have to buy things for your home, so you want to make a shopping list in that moment I told you to use single paper to write a single item, ---item1, item2, item3----, so you will get angry on me and probably say, are you out of your mind. Its simply bad management.

In Programming, the same things happen when you have a similar type of data (a collection of fruit names or student marks) you don't have to make a different variable for the different data.

Here, enter the Array

Suppose Array as a magic train, in every box of the train, there is a value sitting inside the box. You just have to memorise the name of the train. Whenever you want to talk to a value inside the train, you can call it by "Index Number". In today's blog, we will learn to run this magic train from Zero.

How to create an Array

let fruits = ["Apple" , "Banana" , "Mango"];

We have made a train of fruits, In which each box contains a value naming Apple, Banana, Mango. Now we will see how to get the value from each box through Indexing.

Below are the picture how the train of fruits look like!

A piece of advice: never trust AI, it will give you the work, but whether it is right or not, you should have the knowledge to judge. AI is used to do work faster.

Now come back to the Array

Indexing: Count starts from 0, not 1

After you make an Array, the question arises, how do you get inside the box to get the value?

Here indexing comes to play. Imagine a building that starts from Ground Floor(0) not from Floor 1 (1). In JavaScript, Array works like that.

let fruits = ["Apple" , "Banana" , "Mango"]; // this is our fruits array
console.log(fruits[0]) // Apple
console.log(fruits[1]) // Banana
console.log(fruits[2]) // Mango

For accessing the items, we use [] (Square) brackets.

Here, most of the programmers make mistakes; they ask for the first element and they got the second element.

When you try to access an element that is not in the Array, JavaScript silently returns the undefined value.

let fruits = ["Apple" , "Banana" , "Mango"]; // this is our fruits array
console.log(fruits[20]) // undefined

You can also think Array index as a ruler scale which starts from 0, if you miss that your calculation will go wrong.

Updating Element and Array Length

Suppose you created a todoList, and you want to change your todo from 'Gym' to 'Yoga'. You don't have to delete the array, you just have to find the index of the 'Gym' and replace it with the 'Yoga'.

let todoList = ["Gym", "Reading", "Coding"];

// Yoga in place of Gym (Index 0) "Yoga se hi Hoga"
todoList[0] = "Yoga";

console.log(todoList); // Output: ["Yoga", "Reading", "Coding"]

JavaScript gives us a magical wand of Harry Potter '.length' property. This property tells us the length of the Array elements.

Just like the Ticket Checker knows the length of the magical train, .length knowns the length of the Array.

let students = ["Amit", "Rahul", "Priya", "Sneha"];

console.log(students.length); // Output: 4

Most of the programmers think, just as the index starts from 0, the length also starts from 0 which is not true .length strats from 1 . If you want to get the last element inside an array you have to write,

let students = ["Amit", "Rahul", "Priya", "Sneha"];

console.log(students[students.length - 1]); // output: Sneha

Looping: The Assembly Line

Now imagine, You are a owner of a chocolate factory. And you have to apply a special sticker to each chocolate, so inside of writing code for every chocolate, you will loop from the first chocolate to the last chocolate

You will start the loop from the 0 index
End the loop till the length end
and you will go through each chocolate

let chocolates = ["Dairy Milk", "KitKat", "5Star", "Snickers"];

for (let i = 0; i < chocolates.length; i++) {
    console.log("Packing: " + chocolates[i]);
}

What's Hapening inside the loop?

• i = 0: picks "Dairy Milk"

• i = 1: picks "Kit Kat"

• It goes until less than chocolate.length (4)

You get to know the benfits of looping when you 4000 elements, and looping done it for you in seconds.

Quick Summary Table (Blog Recap)

Action	Syntax	Example
Create	let arr = [v1, v2]	let colors = ["Red", "Blue"]
Access	arr[index]	colors[0] (gives "Red")
Update	arr[index] = newValue	colors[1] = "Green"
Count	arr.length	colors.length (gives 2)