Introduction to Array in javascript

no matter what i do the glasses always gets dirty and i don't know what i'm doing with that hey there everyone it's here and welcome to another video in this video we're gonna talk about array but here is my solid advice that you should take there are just three major things right now in any given language and once you understand them it really in depth then your life is going to be much more easier array objects and loop right now how the world is proceeding in the web development as well as in the mobile development and many other features or many other fields as well the good thing is everybody is proceeding through the api way and in that particular way and interacting with the databases also you need to understand arrays objects and loops master them and your life is going to be much much easier let's start with the array and i would like to just put out couple of advice not much i will rather like to introduce you in the code section so that we both can be much more friendly and have fun with the array first advice that i would like to put here is spend time in reading the docs or at least at least just go ahead and practice with me in these videos so far we have seen a bit about uh variables some of the differentiation between them that was okay some of the if and else conditional that is also required but a lot of people lag because of the array the thing that will be sent to you by the database most probably is going to be in one or the other format of array and once you know how to loop through the arrays life becomes much more easier but sometimes you don't even need to loop through it it's so much important and for the documentation reading i recommend you to use mdn the mozilla developer network i don't think there is any other better documentation presently in the late 2020 that is even nearby the mozilla developer network mdn there are definitely others and especially the w3 schools you are going to see a lot popping up for every single result they are you are going to be doing but my recommendation is please ignore them i have nothing bad towards w3 schools they are good they are fantastic even i recommend them in some of my other courses but not with the javascript i think mdn is far better that gives you an idea that how things are going on even a lot of things in in between so i'm not going to go in too much of that that's all i want to say now let's go up here and we are into again zero three there's a new file zero seven uh array so let's get started so what is an array array is just a collection of data for example when i say war name and i just have a variable with the name so i have multiple names so i'm going to say war name two name two just like this then we're gonna say war name three so in this special situation where we are having multiple names it's not really recommended to have multiple variables of name rather we would like to have an array so that we can store all of this information in just one variable and can access them so it's pretty easy and yes you have heard the joke right that array starts from zero all the time the starting of the counting for programmer starts from zero it's 100 accurate and that is coming up from directly these arrays so let's just say we're gonna have some of the countries list of countries so let's just say the way how we declare an array is starting with the square brackets and again make sure you do understand there is a vocabulary difference in programming these are parentheses these are brackets and these are braces or curly braces so make sure you understand them it's a lot of confusion for a lot of people just understand the difference it's going to serve you a whole lot so use brackets and inside them a comma separated values can be put up so i'm going to start with the beautiful country india and then we are going to add a lot of countries other than this so let's say we're going to add states here uh we're going to add up one of my favorite one which is japan vietnam is my favorite too but we're going to add that and we're going to include russia as well because it's fun okay so these are the few countries i have added feel free to add your favorite ones as well let's add a couple of more arrays another way how you're going to see that array is being defined which nowadays in the recent code you're going to see a whole lot previously everybody was declaring array like this but now people have started to use this syntax you write a keyword new and then use an array here now this is moreover an approach which is much more object oriented because of the new but it's not really because just it's object oriented at the end of the day the result is 100 exactly same but you can do a lot of things while declaring your array with this style of things eventually i'm going to show you that as well in fact some of the part in this video but this is moreover a friendly approach so let's add some of the states from india in this so that you can get your knowledge about the geography a bit more about india so let's just say so let's just say this is one of my state so that's where it it gets another one which is nearby to me and a little far away but very very heartly city and what else we should have uh add one more which is gonna be a sam okay so all all beautiful states not states actually yeah so we can add a sam okay so this is how we can get and you get the point that how we can have the values i'm having comma separated values here being strings all of these values the only next thing we need to understand that we have seen the declaration now we need to see how we can access these values accessing the values is pretty simple and very straightforward you just simply name your array and if you're going to name it directly like this this is not actually most of the time you will be having this no i don't want to do shutdown let's just say node zero three and this one is zero seven there we go so we get an access to all of this and probably this is not what you want so how do we access it we simply use the square brackets again and we mention the position arrays are very very centric about the position value so when you start with 0 that means you want to access the very first element of the array and similarly you can go for the first element that's technically second but we call it first element because we are starting the count from zero so that's the most basic part of it now another thing very interesting one what you'll be seeing is done a quite a lot so let me just log these values i'm going to say states and then you can put a dot and this dot gives you a whole lot of access to methods that makes your life much more easier we're going to discuss a few but the most common one that you will be using is going to be length this gives you the length of the element that are present in the array so notice here we got zero one two and three but in the general day to day live counting they are actually four elements so that's why the state dot length is gonna give you that hey there are four elements inside the array and that's what it is this method actually helps you a lot in iterating through the array or looping through the arrays so make sure you keep that in mind it's it's very important to have them now not only that you can actually replace any values here as well for example let's just say i don't want to keep my state in here i want to add another state in place of that notice i'm trying to replace the value so what you can do is you can access that particular element which is in this case the first element and i can add it up something different here let's say another favorite place is punjab which is beautiful very green now if i try to access that who is at the first place so i'm going to just say let's just say console.log and we're going to simply say states let's just dump out all the states here and notice here this time it's punjab so rajasthan which is my state is getting replaced by another state of my country so this is most important that make sure whenever you are having this particular syntax you are not adding anything you are replacing the values but obviously you might want to know that how can i replace this or how can i add values without replacing in the front of the array or the back at the array or maybe in some place in between we are going to discuss them as well but first let me let me get away with the confusion here let's just say uh we're creating another array a user now this user is an array okay great so i can add a name to it separated by comma i can add an email so let's just say this is my email and also what i can do is i can address something like uh how many courses i'm enrolled in so i'm going to say three how many number of times of login i've done i'm going to say 34 and am i a verified user i can say true now surely this is a perfect syntax there is no problem in that javascript is not going to complain anything i can even show you by logging the values that yes there is no issue absolutely no issue in that case so we get all the values being dumped here i can access the individual element as well but here is the important point this is not a good data structure there are alternative ways through which if you want to mult store multiple information like this we can store them they are objects which we're going to discuss later on don't be in a hurry but this is definitely possible you can have multiple values here we can see all the data types mostly that we have studied are included strings numbers booleans yeah it's possible okay moving further there might be cases then you want where you want to like dump out the last value from this array especially use case scenario but happens a lot even in to-do list there might be cases where you want to dump off the first value from this here so let's go ahead and try to see that how we can do that there is a method here which is known as pop okay as soon as you run this pop and i try to make a duplicate of this and try to move this here notice here i have used a pop and then i am trying to dump all the values i'm going to just comment out these ones because they are just unnecessary for us right now we are not concerned about them so that we can have only the output that we are worried about okay now notice here as soon as i say pop pop simply means just get rid of the value which is at the very end so true is gone now if i just add a duplicate of this now i'm saying pop two times that means true and 34 both will be gone it's pretty simple not really a rocket science notice here 34 is gone true is gone in the next set of year okay so this is all good and all okay we understand that this is how it works how about i want to get rid of a value from the very front of it now notice here that you can actually get rid anything from the front but it's going to be a cost ineffective operation because everything has to be shifted the value of the array starts from zero so all the elements need to be reshifted again which is expensive but maybe maybe your use case is actually for that and you know the advantage and dispar disadvantages of that and you still want to do it so in that case we can simply go ahead and do the shift and unshift of that so let's just first do an unshift because shift u will automatically be understanding it so whenever i do an unshift i have to pass on a value into it so i'm going to call this as new value now what happens when we run an unshift unshift simply means i'm taking a value in i'm going to add that value at the very first of the array and will shift rest of the values after that okay let's go ahead and run this one so i'm going to have a duplicate of this and we'll move here there we go so this one is getting printed let's see how that actually works now notice here that there is a new value here which is at the very front of the array this time and rest of the values are being shifted okay so make sure you keep an idea that how this is done again this is not a wise advice that you always use shift and unshift but maybe maybe you are aware of the things and you still want to do it again let's go ahead and try it another one this time i want to use a shift okay now as soon as i use the shift i'm not passing anything in here now let's see what happens with that i think many of you might have already guessed that so but still let's just say i want to do a console log of this user too many console logs but let's just say we want to still do it now notice here the new value is gone and i think you can already guess what is happening with the shift and shift now so this is much much more clear okay so quite a discussion about how we can add values at the front of the array how we can add the value as the end of it remove the values from both sides so this is a very important ques these things and make sure you keep you are keeping the notes of them because when you will be writing production grade application this is going to make your life much more easier now i want to bring your attention a bit on these methods just like i would say i was able to say user.pop there are few things which you can do with this new array or in general sometimes nobody just calls it as new you can directly use the array as well in some cases let me show you that as well so we have got a whole lot of console logs let's go ahead and comment that out this one also and this one also we get this point okay now what is going to happen notice here still in my array there is a value 3 here it is still there it has not been gone anywhere now there is a very nice advantage of some of the method for example i have one very interesting method which is index off this is a method you will be using a whole lot of time whenever you are deleting any task any object maybe you are building a t-shirt store maybe you are building up a to-do list this can be useful again there are alternative ways as well but what this unship does actually whenever you try to search for an element which is there in this array list it gives you a unique value that where is the index of 3 and i can notice here that the 3 index actually this one is printing out i don't want that comment this out and let's just say we want to just print out these whatever the last status of the user is let's run it one more time so notice here 3 is there and the position of 3 is 0 1 and 2. so that's why the exact index which is meant to be programmatically not the length where it is meant for general user programmatically the index is given to you now this can be very very helpful for you maybe you want to delete this value you are searching for anything specific inside this so i can search for other things as well like let's just say i want to search for my name it is going to find that as well that it's at the zeroth position but the most important thing is what happens when you're trying to find something which is not there i'm going to say new which is not there just a random name or new we just to avoid the confusion with the keyword new then it gives you minus 1. now this minus 1 is super super handy because you can do a comparison we have learned already about if and else and you can compare it if the value is -1 don't delete it because it's not there in the array rather pop up a message to the user that hey the element you are trying to delete or trying to find is not there so this minus one is super super handy make sure you read a little bit more on the index off although it's not much to read but i still say that focus a little bit attention there okay one last thing that i would like to show you this is just totally a hundred percent fun element you are going to be seeing this a whole lot of tricky situation where you have a string let's just say my name and you want to convert that string into an array every element needs to be stored inside a separate so array will look something like this the array and inside that we have got h then we have got i and we have variety of ways of doing it through the looping when we are going to study the loop we are going to see that but since there is a lot of shortcuts in javascript you can actually do that if you read a little bit more on the documentation of array how you can do that remember how we were using the array the new array here you don't need actually new keyword because you are not creating any object we are just throwing it flying off like that so array you can put a dot here and you can see a whole lot of things coming up like bind call color all of them are fantastic to study in depth in fact if you're gonna spend like two or three days in in learning about all of them it's actually recommended and it's gonna be good for you in longer run but after finishing the series okay there is one which is known as from now this is fantastic think from you can pass on any iteratable and even more to actually take advantage of it and convert anything into an array one of such thing is simply the string again one of many such thing is a string there can be many thing you can pass on in here now notice what is going to happen here notice the entire string is now converted into comma separated values and this is just one advantage of it we can pass on sets and a whole bunch of other things which we haven't talked yet but all i'm saying is array is really powerful the more you're gonna study in it the more you're gonna spend time with erie it's gonna be much much useful for you i hope you have enjoyed this video i know this was a bit longer one but i'll try to keep the video short but array is bigger we're gonna spend a couple of more videos on array we'll try to show you some more cool stuff with it and then we can move forward after that and hope you have already got the subscribed and let's catch up in the next one [Music] bye

Channel: Hitesh Choudhary

Views: 29,407

Keywords: Programming, LearnCodeOnline, javascript, javascript for beginners, javascript course, javascript tutorials, learn javascript, udemy, coursera, udacity, learn js online, javascript projects, js tutorials

Id: Lr-uGVNM8Ko

Length: 17min 49sec (1069 seconds)

Published: Mon Jul 27 2020