Arrays in JavaScript

We wake up in the world of computers. We are introduced with variables , operators , operations and printing. That is when one can say - "Hey I know programming". But once that is done - everyone has to go through the rite of passage for the next level. And yes I am talking about arrays. In most languages array is a special type of data Structure. But for JavaScript an array is another thing it needed to incorporate. Now - what is an even an array?

First lets get a feel for an array. The world is supposed to resemble - group + order. And that is what array is. An array is a group of elements stored in an ordered fashion. Simply speaking - instead of having 10 variables for each student you can have 1 variable that stores all of them.

const student1 = 'Parikar';
const student2 = 'Deepansh';
const student3 = 'HarshWardhan';
const student4 = 'Ansh';

Too verbose! What if we could have them all in a single variable. And YES! We can do that!

const students = ['Parikar', 'Deepansh' , 'HarshWardhan' , 'Ansh' ];

And these elements are accessible via their index which starts from 0.

Which means that for an array of length n , we will have indexes ranging from [0,n-1] yes 0 and n-1 inclusive. Over time one can get used to it. The retrieval of data from a given index in an array is almost instantaneous.

Now array in most languages is a collection of similar data fields. However for JavaScript no such constraints apply. Yes you can have an array literally containing every type of primitive or non-primitive element including another array at any index. For example:

const stuff = ['Apple' , 1 , [1,2], true, Symbol('hello'),null, undefined];

You can have another object or a function in there too.

Using Arrays

To use arrays we need to learn access element, update element , maybe delete them. How to know how many elements , how to see all elements and how to work with it conveniently. Lets start.

First comes Accessing Elements.

We use the square bracket notation.

const elAtIndex3 = stuff[3];
//Outputs true in reference to last array we defined

We can access any element if we know its index.

The mapping is kind of like this (for intuitive understanding)

0  :   'Apple' 
1  :   1 
2  :   [1,2]
3  :   true
4  :   Symbol('hello')
5  :   null
6  :   undefined;

Now for updating we can simply reassign a new value at the index we want to update.

Like :

students[2] = 'Tanmay';

Here our student at index 2 - 'HarshWardhan' will get changed to 'Tanmay'. And the array will look like this now:

students = ['Parikar', 'Deepansh' , 'Tanmay' , 'Ansh' ];

Now we would also like to delete our elements but that is a relatively complex thing. Because we cannot simply do:

 XX delete students[2] XX 

Because array is a linear data structure. Which means that if index 2 is deleted we cannot have an array that goes like = 0->1->3->4. We need it in a correct sequence and hence the array needs to be readjusted, This section will be hence part of detailed array functions and not this.

Working with the array as a whole

Now how do we find the range of our elements. So for starters we know we start with 0 and end with n-1 where n is the length of the array. If only we can find the length...

Yes we can - using the property called length. Any value that is an array has the 'length' property associated with it.

For example:

const n = stuff.length;
// returns 7

This will return 7. So now we know that our range of operation is [0-6]. But do we have to manually get to every element? Well no! We can use a loop for that. But how can we specify index dynamically?

Like this:

const index = 0 ;
console.log(stuff[index]);

If we try to access elements beyond the range of [0-6] we will get an undefined rather than an error so be careful with your arrays.

Now that we know this our process for looping though elements is simple:

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

Here we will start at 0 and continue up until our i value is less than the length, The length is 7. So it will run till i is 6 and when i turns 7 the loop will step executing.

Thus every valid i will be 0 to 6 which is our range. And for each valid i we are logging our element for that index.

We will hence get a cute output like this:

![](https://cdn.hashnode.com/uploads/covers/696be33fcfe0ce5a321590b9/d22267f3-d1ca-43ab-9683-a93ad232fd90.png align="middle")

And no - we didn't go out of bound but actually the last element was undefined. But if that doubt came to your mind than it means that its a good thing.

Now there is a lot to know about Arrays in JavaScript but we will cover them some other time. Anyways - arrays or most coding concepts in general are best understood if they are used in code rather than tutorials. Which means that one can get access to more understanding by simply practicing. So best of luck out there.