Array in JavaScript | JavaScript Array Methods | JavaScript Tutorial | Edureka

web development or web programming gave birth to dynamic web applications now with the rise of the web javascript has become one of the most important languages in today's world hi everyone this is Scheinman Ephraim at Eureka and in today's life session we will have an in-depth knowledge about the adding methods in JavaScript now before I begin with the session I would like to have a confirmation that I'm audible to you guys so it looks like I'm audible to you guys so let's get started with today's session now before we begin this session let's have a look at today's agenda so first I will give you a brief introduction to JavaScript and then we will have a look at the different fundamentals of JavaScript and out of those we will finally discuss about the JavaScript edit next up we will discuss about the differences between an array and object and finally I will show you the different error methods that are used in JavaScript and how you can use array while writing your code in JavaScript now before we start with the session don't forget to subscribe to Eddie rakers youtube channel to stay connected so let's get started now what is JavaScript now javascript has definitely become one of the most important programming languages when it comes to the web applications or any sort of web development the rise of the web has taken JavaScript places it was never conceived to be now basically javascript is a high-level interpreted programming language that is used to make the webpages more interactive it also allows you to implement complex and beautiful things or creative designs on your web pages so to sum it up javascript actually gives life to your web page and makes it more interactive and look more alive now if you wish to know about JavaScript and details and also learn about the basic and fundamentals you can go back and check out our video learn JavaScript in 60 minutes or you can follow the JavaScript tutorial as well that will help you know about the basics in JavaScript now moving on we will talk about the different fundamentals of JavaScript so some of the basic things that you must know if you are starting to write a code in JavaScript are the variables constants datatypes objects arrays functions conditional statements loops and switch cases now all of these together will help you write a code in JavaScript that will give you an output which will be a beautiful website or a webpage now if you know how to use all of these fundamentals in JavaScript you can do a lot more with your webpage you can check out the videos in our JavaScript playlist in order to get into the depths of all of these fundamentals involved now for today's session we will have a deeper insight in one of these fundamentals that is the eddies in JavaScript now what are the JavaScript arrests the arrays are basically used to store multiple values in a single variable itself so the array is a special variable which can hold more than one value at a time now for example if you have a list of items in your shopping cart you would want to store it in one place for example you would create a list of all the items that you want to buy now the array represents those elements in your list so you can have a look at the syntax of array here you just have to define your array name and then you can put up the item names from your list inside the array itself it can hold more than one item inside the list so this will help you have one particular sorted list for all your items that you want to keep a track on now there are a lot of confusion between the arrays and the objects so while working on JavaScript and using the console if you are using the typeof operator and checking the lists in your array it will show as objects so there is a lot of confusion between these two now arrays are a special type of objects so the typeof operator in JavaScript returns objects for arrays as well so you can have objects in an array and you can have functions in an edit now we have already seen the syntax of how you can write an array in JavaScript but there are two different methods as well either you can define one array with no values inside it or you can use the let keyword give the array name and also write new array that's would create an undefined Eddie and for object all you have to do is take the let keyword and define the name of your object and inside the curly braces you have to define the parameters that you have taken for your object for example here you have a girl and the girl is your object with parameters as name age and eye color so all you have to do is put all these parameters inside your object so now that you know what our JavaScript arrays and how you can define them and also the difference between array and object let's move ahead and have a look at the different JavaScript array methods and also let's have a look what and all we can do with the help of arrays while writing a code in JavaScript so first let's see how this array was so we have to use the let keyword and I have to give a name to my array so for example I want to put items in a list and for my shopping cart so let's see what we can do so we can give the name as list items equal to and we can provide our items to create the list so suppose I'm just putting elements like back shoes dress suppose these are the items that I would want to put inside my list now to get the output we just have to write console dot log and inside that my array name that is list items now let me just save this one so here I've created an HTML file and I have linked it to my example dot GS which consists of my JavaScript code so what I'll do is I have saved this one so now we will just go to the console so once I run my HTML file I will come to this particular web page which has the head tag as welcome to add Eureka now in order to get into the console you have to just go to inspect and here you have the console option so you can see the output here and also you can see that it will give you the index number for each of these items present inside your array so now in arrays always the index number starts from 0 and not from 1 so you can see that the index value for bag is 0 for shoes it is 1 and for dress it is 2 it also provides you the entire length of your array that is 3 because you have three items here now you can also define a particular item from your list with the help of its index value for example I want to get the element or the item from my list as shoes so what I can do is I can take that particular element with the help of the index number as well so here the index number for shoes would be 1 so all I can do is in my console dot log I will mention the index number or the index value as well so I've provided the index value as 1 that is list items 1 so now I'll just save this one and go back to my console now you can see that it has changed the output has changed to shoes initially it was showing me the entire array list items that is it was showing me bag shoes and dress all three of them but right now when I have already mentioned that I only want to get the item that is present in the index number one the output has changed to shoes only now you can also change the value of the variables or you can insert items in your list or also you can remove items from your list now if you want to add another particular item in this array what you have to do is just take the name of your array that is list items and then add the index number where you are going to add it so suppose I'm adding it in index number three and I just have to provide whatever I want to insert so suppose I'm just writing watch and then I'll close this with a semicolon so now I just have to save this and now when I go back to my console you can see that the array items have changed from bat shoes dress two now there has been a watch that has been added into the list now you can also replace a particular item from your array in the same way so for example I want to replace the dress with the watch so I just have to change the index value here so I have given the index value for watch as two now so now let me just save this one now when I go back to my console you can see that you have three items again though but those are bad shoes and watch and the dress has been changed with watch now because we have replaced the value of dress with watch by giving the index number for watch as two so this is how you can insert another value in the list of items or you can replace any particular item in your array as well now another method used in arrays in JavaScript is the length now what do we do with this length method basically this will provide you that how many items are present in your list or what is the length of your list so what you can do is just write list items dot length in console dot log and this will give you the total number of items present in your list so I'll just save this one and now I'll go back to my console and now you can see that it gives me the output as three so basically it says that how many number of items are present inside my array so this gives you the length now there's another method called as the concat method now concat method is used to return a new array comprised of this array joined with other arrays so basically what happens is if you have two different arrays and you want to join them together then you use the concat method so it will help you in joining or concatenating these two arrays or more arrays together so here we have one array that is the list items and we have a few items inside this particular array so let's take another array here so suppose I will name it as colors and then I will provide the colors as blue green and red so now with this we have created another array here now we have two different arrays that is list items and colors now if I want to join both these arrays together what I have to do is I have to go to console dot log and suppose I want to join colors and list items together now I first want the colors and then the items so I have to write it as colors and then use the concat method and inside this I will add the area that I want to concatenate here so my first array is list items so now let's just save this one so it should basically give me the elements inside the colors array and then give me the values from the list items array so now let's go to our console so now you can see that the errors have been joined together so you can see the values inside your array as blue green red bag shoes and dress and also the total number of elements have changed to 6 now you can see that the index number is also given here so the first 3 elements belong to my second array that is the colors and the next three items are from my first array that is the list items now if I want to do the opposite all I have to do is just change it to list items and then concatenate colors now when I save this one and go back to my console now you can see that the order has changed from blue green red back shoes dress to back shoes dress and then blue green red that is the first array is there which is my list items array and then you have the next array that has the colors concatenated with the first one now next up we will have a look at the push and pop methods in array so let's see how the pop method works here in array now this method is used to remove the last element from an array and also return that particular element so what happens is here I have the array as back shoes and dress now when I use the pop method here it will just remove the last element that is the dress from my array and return that particular value so now let's see what is the output here let me just save this one and now when we go to the console you can see that the output is dress here because pop method is used to remove that element and also return that particular element from your array so basically it always removes the last element at the end of your list in the same way push method is used in order to add any particular elements inside your list so pop removes the element from the end push inserts any element into the end of your list so for example here I will just add watch again inside my array now suppose Here I am pushing another element so what does this push method does is it will provide you the new length of your array in the pop method we just used to get the return value as the one that has been removed from the array and with the help of push method the return value is the length of your updated array now so now that I have pushed another element inside my array the value should be four now so let's see what it shows so let me save this one and now let's go back to the console so you can see that the output is four here so basically it's up it's the length of your array and also updates another element inside it and the return value with push is the value of your new or updated array now another commonly used method is the reverse method now this reverse method is used to change the position of your elements in the list so what it does is it will reverse the entire array that you have created so here I have back shoes and dress now the first element would become the last and the last element would become the first element here so now I will just save this one and now we'll go to the console and see what is the output so now you can see that the number of elements are still the same the items inside of arrays are also the same only the order has been reversed here so initially our array started with bag and ended with the element dress but now that we have used the reverse method the values have been changed the last one has become the first element and the first element has become the last one now there's another method known as the shift method now the shift method is used to remove the first element from an array and return that particular element now we had the pop element for the end of your array that is the last element and here we have the shift method for removing the first element so here we'll see how this shift method works so all we have to do is just use the shift method along with my array name and now I will save this one and now let's go back to the console and see so now you can see that the output is back so my array was back shoes and dress and in this order so the first element was back so now as soon as I've used the shift method here what it has done is removed the very first element from my array now the return value is also that particular element that has been removed from my array so this is how this shift method works here now the next one is this slice method so slice method usually extracts a section of an array and returns you a new edit so what you can do is you can use these slice method here and you can provide any particular beginning and ending value that you want to slice from your array now the return value would be the values that have been extracted from the array so now here I have given the beginning value as zero and the ending as one so the value or the element presence in the index number zero will be extracted from my array so now if I save this one and go back to my console you can see that the output is back that is the extracted value from the array and the next here is zero now let's just change this so if I change it to two you can see that from the position 0 and 1 the values must be extracted so my output should be back and choose so let me save this now you can see that the output has changed from back to back and shoes because it will take the value as 0 and 1 so you have to define the beginning and the ending value here and it will take the minus 1 value so as I have given 0 & 2 it will take the values as 0 and 1 that is 2 minus 1 so it will extract the values from the position 0 & 1 and also it will return those particular values itself so that's why the output was back and shoes next up we will have a look at these sort method so this sort method basically sorts all the elements of an array so if you have numbers here it will sort from the smallest number to the largest one that is in the ending order or if you have strings here so it will arrange them in the alphabetical order so now let's see we have used these sort method here and now let me save this one and see what is the output so you can see that the order has been changed from bag shoes dress to bag dress and shoes so the elements in the lists have been arranged according to their alphabets so it's arranged alphabetically so P comes first and then T and then s and that's exactly how the elements in the list have been sorted so with the help of a sort method you can just arrange all your elements in any particular order that you want if you do not mention anything it will sort according to the alphabets or according to the values if there are numbers here now the next method is the two string method so with the help of the two string method what we can do is take the array elements inside our array and get the output in the form of a string so what it does is it returns a string representing the source code of this specified array and all its elements so here I've added these three items inside my list or the array so now during the output I'll just use the two string method with my array that is list items dot - string method now let's see let me save this one and let's look at the output so you can see that in the console you see bag shoes and dress but this time all three of them are in the string format now to show you the difference let me just take the output as array only now let me save this one and now let's go back to the console now you can see the difference so initially with the help of two string it was only defined as a string here you can see the array elements so you can see the index value and it is also represented in the form of an array but as soon as you add this to string method and save this one and now go back to your console you can see that all these three values here are shown in this string format so this is what you can do with the help of your two string method the array elements are represented in the form of a string here now we have already discussed about the shift method so now let's have a look at the unchipped method so this unshipped method is used to add one or more elements to the beginning of an array and also return the new length of the array now shift was used to remove the first element of your array and return that particular value itself that has been extracted but with the help of unshipped method we will be adding elements in the beginning and also return the length so here I will use the unshifted and suppose I want to add two values inside my list so let's just add watch and let me add glasses so here basically I'm adding two more values inside my areas so the list of items will become 5 from 3 now so now let me save this one and also it returns me the value of the length of my array now so how many values I have added and what is the new or the updated length of my array will be shown as the output so now let's go to the console now you can see that the output here is 5 that is the updated length of my array so here I had three values initially and I've inserted two more elements inside my array with the help of the unchipped method so now the value has changed from 3 to 5 that is the length of the array has changed to 5 now so with the help of unship method it returns you the value of your new or updated length of your array so here you can see that the value has changed to 5 now there's another method called as the join that is also used to join all your elements in the form of a string now with the help of two string method we have seen that how we can convert the array values into a string the join also does the same thing that is it converts all the array elements and joins them together in the form of a string so suppose you have two or more or arrays here and you want to join the values and form a string or you want to give any particular string output and then join the items from your array inside it you can do with the help of join so now with the help of this join method you can see that all your array elements have been converted into a string here so to explain you a little more about the join method so suppose I want to add this particular string that is string name with all my elements in the array itself so it will take the list of items and add this string name in between all of these elements so basically it will join the elements from the array with the help of this particular string so here I have back then shoes so it will be back string name shoes string name dress this is just a name that I have given suppose you want to add them with a plus sign or anything you can add it with the help of that as well so let me save this now when I go back to my console you can see the output here so the any elements have been changed into a string and they have been joined together with the help of this string name so when I left it blank it was just back shoes and dress itself now I've joined these elements with this particular value you can just also write a plus sign here in order to show that how it is joined now save it and then once we go back to the console you can see that it shows the output as back plus shoes plus dress so basically it is joining all the elements from your array and then converting it into a string and giving you the output in the form of a string so these were some of the most commonly used methods when it comes to using the arrays in JavaScript now there are various other methods that you can use to perform different actions for example if you want to call any particular value or if you want to return the last index you can use the last index off and you can also filter out the elements with the help of your filter method so there are various methods in array that can be used here but these were some of the most commonly used and also the most important ones that you would need while writing any particular code in JavaScript or while working with arrays in JavaScript now this was all about how we use the array methods and also how arrays help you in working in JavaScript and also the various definitions or the different ways that you must know while working with this particular method so with this we have come to the end of our session today if you have any questions you can leave it in the comment section below also do let us know about your opinion right there don't forget to stay tuned to the Eddie Rekha YouTube channel for more such videos and also we will get back with more such information videos about the other fundamentals that are involved in JavaScript till then thank you and happy learning you

Channel: edureka!

Views: 26,869

Keywords: yt:cc=on, javascript array, arrays in javascript with examples, javascript array length, javascript array example, javascript higher order array methods, javascript array loop, javascript array loop example, Javascript array methods, javascript array tutorial, javsacript array functions, edureka, javascript edureka, array methods, javascript array sort, javascript array map, javascript empty array, javascript array methods with examples, javascript array method tutorial

Id: 5kFOWBh5zKE

Length: 27min 14sec (1634 seconds)

Published: Mon Jul 08 2019