JavaScript Arrays 101

So what do you mean by arrays, actually? Technically, an array is a collection of multiple data items of the same data type in one variable, but do you really get this?

Consider Arrays as the album in your music app where you store all your favourite music. It only contains your favourite music lists. This sounds a little familiar, right?

So, now you want a new set of albums in your music app that will store only music designed to help you feel calm and be more productive while you work. Now, what do you generally do? Obviously, Barun, we can create a new album where we will be storing all the calm, mindfulness, and meditation kind of music, which improves my productivity.

Exactly, unknowingly you have just created an array (Album) which contains all your music (data of the same type - category) related to work in one place.

Now, let's understand technically what an array is in JavaScript. As javascript have different sets of data types, which are Number, String, Boolean, Undefined, Null, Symbol, etc and at some point in time we need to store all the related data into a single place. So, where do we store all that data? YES, the answer is an array. Although we have other data structures where we can store similar data, but todays topic will only move around Array.

Now let's deep dive into the code.

The question is, how can we create an Array?

The code below explains how we create an array in JS.

// Creating an empty array named `empty_array`, you can name this anything, whatever you like, like masti_album;
const empty_array = [];

// Creating an array, which stores all the songs which you listent on the regular basis, named `regular_album`. Again, you can name this anything.
const regular_album = ['Balam Pichkari', 'Jhumka Gira Re', 'Dum Maro Dum', 'Didi Tera Devar Deewana', 'Saiyaara', 'Aavan Jaavan'];

So, in the above code, we have created 2 different arrays.

The first array is empty; it doesn't contain any songs. The second array contains the regular song names, which are of the string data type.

Now, if I ask you, tell me in the regular_album list, the song name 'Jhmka Jira Re' is in which place?

You would answer that it is in the 2nd place, right?

Well !!!...

Technically, you are correct, but technically, you are not 😅😅😅.

Areee... don't be so confused. I was just kidding. But on a serious note. You are wrong.

Technically, in JavaScript or even in any other programming language, the counting (Indexing) in the array starts from 0. So, the 'Jhumka Gira Re', the 2nd element in the arrays, is in the 1st index.

Element and Index are two different things.

1. An element is data

2. An index is where that element(data) is positioned

And this position or index starts from 0 in the array.

So, now if I ask you, 'Saiyaara', is in which position or index, then what is your answer?

Aree Uncle and Aunties, not in 5th position,

'Saiyaara' is the data, and the data is stored in the 4th index or position, because the index starts from 0. And if we start counting the position of this song from 0 in the regular_album array, then its position comes 4.

That means the index of this song is 4th, not 5th.

So, lets see how to access the element and perform some operations in it, in code.

const regular_album = ['Balam Pichkari', 'Jhumka Gira Re', 'Dum Maro Dum', 'Didi Tera Devar Deewana', 'Saiyaara', 'Aavan Jaavan'];

Above, I have defined the array as we discussed in the last example.

Now let's print the 2nd element, not the index. So, first, tell me what's the value of the 2nd element?

// regular_album[1] = "Jhumka Gira Re"
console.log(regular_album[1]);

1st element = 0 index

2nd element = 1 index

3rd element = 2 index

Likewise, when we go to the 2nd element, which is stored in the 1st index. Then, our final output of the code will be Jhumka Gira Re

Ohh god, I listen to the same song in the repeat mode for decades just like Anirudh Bhiaya listens. Now I also want to move on and replace my old regular songs with new ones. So, how should I do it?

Let's learn this.

As we already know, using the square bracket just after the variable name in which the array is stored with the index value, we can access the element at that index. In the same way, we can replace the old value with a new one.

Do you wanna see??

Really, do you wanna update your old and clumsy regular song with a new one?

So, just follow along with the code.

// Creating an empty array named `empty_array`, you can name this anything, whatever you like, like masti_album;
const empty_array = [];

// Creating an array, which stores all the songs which you listent on the regular basis, named `regular_album`. Again, you can name this anything.
const regular_album = ['Balam Pichkari', 'Jhumka Gira Re', 'Dum Maro Dum', 'Didi Tera Devar Deewana', 'Saiyaara', 'Aavan Jaavan'];

// Holi season has passed on and you want to replace 'Balam Pichkari' with something new, just like below.
regular_album[0] = 'Dancing with ghost';

console.log(regular_album);

Ohh.. god, I taught you how to replace your old song with a new one. Now you can update any song in the same way. Have FUN!!!...

You always listen to the list of songs, but do you really know how many songs you listen to on a daily basis??

No?

I knew it, I knew it.

Don't worry, we have something called length property in the array, which can help us count the total number of elements in the array list. So, using that, we can count how many total songs are in your playlists.

Let's do it, guys

 // Creating an empty array named `empty_array`, you can name this anything, whatever you like, like masti_album;
const empty_array = [];

// Creating an array, which stores all the songs which you listent on the regular basis, named `regular_album`. Again, you can name this anything.
const regular_album = ['Dancing with ghost', 'Jhumka Gira Re', 'Dum Maro Dum', 'Didi Tera Devar Deewana', 'Saiyaara', 'Aavan Jaavan'];

// Total Songs you listen on daily basis.
console.log(regular_album.length) // Output: 6

Total Element in the Array = last index + 1

or vise versa

Last Index = Total Element in the Array - 1

['Dancing with ghost', 'Jhumka Gira Re', 'Dum Maro Dum', 'Didi Tera Devar Deewana']

0 index, 1 index 2 index 3 index

Total Length = 4

---

Ok, I taught you a couple of things like:

1. How is your list of songs stored effectively in one place?

2. How are your old songs replaced with new ones under the hood?

3. How do you get to know how many songs you listent in a day?

But still, you should have a question in your mind about how your songs are played one by one, right?

No!!!

You didn't think about that?

What are your thinking capabilities, Uncle & Aunties? Where are you thinking?

AI has ruined your thinking capability.

But no worries, I am here to recover that only. I have taken the "Thaka" of teaching you guys, so here I am.

Let's learn how to do that!!!

So, below is the code for iterating (looping) your song. Or how your songs are beign played one by one.

const songs = [];


const songs = ['Dancing with ghost', 'Jhumka Gira Re', 'Dum Maro Dum', 'Didi Tera Devar Deewana', 'Saiyaara', 'Aavan Jaavan'];


for (let i = 0; i < songs.length; i++) {
    console.log(reglar_album[i]);
}

Dry Run:

songs = ['Dancing with ghost', 'Jhumka Gira Re', 'Dum Maro Dum', 'Didi Tera Devar Deewana', 'Saiyaara', 'Aavan Jaavan'];

Loop:
----

i        i < songs.length        output(songs[i])            i++
--       ----------------        ----------------            ---
0        0 < 6                   'Dancing with ghost'        0
1        1 < 6                   'Jhumka Gira Re'            1
2        2 < 6                   'Dum Maro Dum'              2
3        3 < 6                   'Didi Tera Devar Deewana'   3
4        4 < 6                   'Saiyaara'                  4
5        5 < 6                   'Aavan Jaavan'              5
6        6 < 6                   Loop Breaks;

Now, if you still can't understand how your songs are being played, then God saves you in this hardcore world in the AI ERA.

Yes, Homework… Don’t Run Away 😏

Alright Uncle & Aunties…
Enough theory. Enough songs. Enough blaming AI for everything.

Now it's your turn to prove that your brain is still working.

We are going to do the same thing we did with songs, but this time with movies.

Why movies?

Because let's be honest…
You probably remember movie names faster than JavaScript concepts.

So let's start.

1. Create Your Movie Album

   Create an array called favourite_movies movies that stores 5 movie names that you really like.

   But wait… make sure you actually have exactly 5 elements in the array.

   Not 4.
   Not 6.

   JavaScript will not complain, but your teacher might.

2. Find the First Movie

   Print the first movie from the array.

   Remember something important:

   Arrays in JavaScript do not start counting from 1.

   If you start counting from 1… your code will politely give you the wrong answer.

3. Find the Last Movie (Without Hardcoding)

   Print the last movie in the array.

   But here is the rule:

   You are NOT allowed to directly write the index number.

   Meaning this is not allowed:

   favourite_movies[4]
   

   Your code should still work even if someone later adds more movies to the array.

   Think carefully.

   JavaScript has already told you how many elements exist.

4. Replace One Movie

   Assume you got bored of one movie.

   Replace the 3rd movie in the array with a new movie name of your choice.

   Small brain teaser:

   The question says 3rd movie.

   But arrays start from 0.

   So choose the index carefully or your replacement will happen somewhere else.

5. Print All Movies One by One

   Use a for loop to print every movie in the array.

   But here is the tiny trap:

   Your loop should not try to access an index that does not exist.

   If your loop runs one extra time, JavaScript will happily print undefined.

   Which means your loop condition is wrong.