Everything You need to know about JavaScript Array!

Introduction of JavaScript Arrays:

Welcome guys to our new JavaScript learning post, hope you will be good and enjoying your day. In this article, we will cover everything about JavaScript Arrays . JavaScript Array in simply is like a box with single or multiple collection of data in it or an array is special variable which can hold more then one values. Array data can be anything like names of different collections or the information about different types of products which we buy or sell on online webs. So, no matter what data we store in array it will collect all the data like a box. We will cover easy to hard steps of array which I m sure will help you very much understanding the concepts of array and by the end you will be able to add, update, delete item from array. Now, don't get confuse on array's common functionalities add, update, delete, we will cover all of these later in this post . I will share my easiest way with you guys and if you get any confusion or any issue at the end please let me know and I will surely help you . 

Now that we know what javascript arrays are, the main question is how we can initialize array in JavaScript and store data into it. It's basically so simple . First thing first, create a JavaScript file or use a script tag in html file. I assume you might have this knowledge .

This is how we initialize or create Array in JavaScript: 

const x = 6;

const z = 'String Variable...';

const isBoolean = true;

const myArray = [];

Arrays are normal variables but it stores more then one values, right. So how do we know if the created variable is array, number, boolean or string. Well, we will not talk about the others but for array we simply assign the empty brackets like in the example given above. This means that the array is empty or in simple the box is empty. every array has its name like every variable has it's own name, remember. check the below example: 

const arrayName = [];

You can replace the word arrayName with yours like: 

const names = [];

const places = [];

const games = [];

See, how easy it is. But I will recommend you to name your array according to what data you are storing into the array. You did not get me... 😂 ? let me clear, suppose we have the names of different games and we want to store into the array . so we can assume the name of array to games bcz we have the data of games, see the above example for this. Now, it's totally on you, you can choose name of your array whatever you want to but I m saying this bcz it will help you later in some big projects. 

Store data in JavaScript Arrays:

Thus for, we have learned what JavaScript Arrays are and how we can initialize & differentiate it among other variables. before moving on, I want you guys to be continue along with me . I mean practical this along with reading this post . Now, let's see how can we store data into array . There are two essay and simple ways for this. One is by default and the second one is push method. What do I mean by default method. Well, it means we can initialize an array but it should not be empty. Some data should be available into the array along with initialization. This does not means that we can't add more data into it, we can bcz array is like a box, remember! and the cool thing is that unlike box we don't have a limit for array that means we can store unlimited data in array. This is how you can initialize an array with default values:

const games = ['PUBG', 'Last Of Us'];

Woah Woah! you might wondering why we used , in the above example. Well this simply separates the two names and tell the JavaScript Array: Hey 'PUBG' and 'Last Of Us' are to different names. This means in simple that we are adding two names in the array. 

Here is one more thing comes which is what if I want to store multiple information about every game. I mean I want to mention developer company name for the above games along with the name and if I use it like:

const games = ['PUBG', 'Last Of Us', 'Tencent', 'Naughty Dog'];

In this example: 'Tencent' and 'Naughty Dog' are the company names which developed these games.  The problem is it will consider 'Tencent' and 'Naughty Dog' to be another game and we don't want it. We want to tell JavaScript: Hey! this is not another game, this info relates to specific game. So how to do it...?

Well, here comes the object property which helps us to store multiple information of every item inside array. This is how we create object property:

  { name: 'PUBG', company: 'Tencent' }

Curly brackets then the property name(which is totally up to you) and the value. ( , ) separates both information and of course you can add as many data as you want. So how do we use object in array...? Below is a example of it: 

const games = [

  { name: 'PUBG', company: 'Tencent' },

  { name: 'Last Of Us', company: 'Naughty Dog' }

];

You saw how easy it is . Now, let's move to our second method which is.....😄? Ah, I think you should guess or if you can't check out above paragraph before moving forward.

So that is push method. push simply adds the new value or collection of data into our array. this is how we can use it:

games.push('Watch Dogs');

Or with the Objects : 

games.push(

    { name: 'Watch Dogs', company: 'Ubisoft' }

);

Ta ta! so easy-peasy. games is the array name which we created in the above example. Make sure to replace it with the name of array you're using in your practical example. So now, there will be three names in the games array. two names we stored by default and the third one we added using push method.

Update data in JavaScript Arrays:

To update data in array in we need an index number. Now what do we mean by that...?  Index number is the address of a specific item in that array  Basically when we push data to array then javascript assign a counting numbers to every single item of array. This counting starts from 0 and continues... . So if array has one item then then index for that will be 0 and and if it has two items and the second item index will be 1 . 

Now how can we update array item using it's index number. Well this is so easy. For example: 

const games = ['PUBG', 'Last Of Us'];

games[0] = 'Call Of Duty';

Or with the Objects : 

const games = [

    { name: 'PUBG', id: 1 },

    { name: 'Last Of Us', id: 2 },

    { name: 'Watch Dogs', id: 3 }

];

games[0].name = 'Call Of Duty';

Did you understand the code...? Let me explain, so we initialized an array named as games. And in the second line we updated the value of the first item of that array. You just need to write array name then squire brackets and then index number between them like games[0] ( Index number is important otherwise you can face error ) , after this we can assign a new value to it. Note: If your array is created with objects then you need to write array name then squire brackets then property name of that object after the squire brackets like games[0].YourPropertyName . 

Remove item in JavaScript Arrays:

Now we will learn how to remove item in javascript array . Well this is also something which require index number. We will use index number to remove specific item from array bcz index number is the address of a specific item in that array. So to do that, take a look at the below example: 

const games = ['PUBG', 'Last Of Us'];

games.splice(0, 1);

This will simply remove one item from array on index 0. Splice method takes two number arguments which represents to ( At position 0, remove 1 item ). Same code for objects array. Of course it is up to you to choose position number ( Which means where to start removing item in the array ) and also the second number ( Which means how many item should be removed ) .

Find item in JavaScript Arrays:

Well this is also an important step which we should learn about JavaScript Array. There are many ways to find an item or specific collection of data from the array . And of course you will need an index number to find specific item for that bcz always remember that index number is the address of that item in the array . If you know the index number you can simply run this code to find that item in array:

const games = ['PUBG', 'Last Of Us'];

const myItem = games[MyIndexNumber];

this is it. replace MyIndexNumber with your variable or with the index number value and the specific item will be stored in myItem variable . 

Now what if you don't know the index number . Well you might know some information of data inside that array. for example in this array ( const games = ['PUBG', 'Last Of Us']; )  I know that I have two strings stored in it . This is how we can find item using the stored data: 

const games = [

  { name: 'PUBG', company: 'Tencent' },

  { name: 'Last Of Us', company: 'Naughty Dog' }

];

const myItem = games.find(myGame => myGame.name === 'PUBG');

find method checks every single item in an array and matches with the given value and return the result. 

Conclusion:

Great, you we done a good job! This is it for this post guys!, I hope this post will help you and you enjoyed a lot . If you're facing any issue, want me to create post on another topic, let me know the comments below and I will definitely help you.! 

Thank You!

Ba Bye !