Array In JavaScript | JavaScript Array Methods | JavaScript Tutorial For Beginners | Simplilearn

hey guys welcome back to another video by simply learn in this video we will be learning all about javascript arrays and the popular methods of the array object so without further ado let's get started so what's in it for you we'll start by understanding what a javascript array is then we will get to know about the operations that we are performing on the array after that we'll get familiar with some of the most used array methods and lastly we'll go through map reduce and filter functions so what exactly is an array now an array object lets you store multiple values in a single variable it stores a fixed size sequential collection of elements of the same type now an array is used to store a collection of data and it uses only integers as element indices however associative areas can also use string indices moving on let's understand what area operations are now we can perform various operations on an array in javascript but let's start by creating an array so for that let's go ahead and create a folder first which will consist of the file that we're creating right so for that let me just go ahead and create a folder and i'll call it demo underscore adding so once you're done with that open your visual studio code editor and here say open folder and click on demo array okay it's creating the workbench all right and now here you can see the new file icon so go ahead and create demo.html file all right here you go now let's start typing the code the first thing we do is type in our html tag and here i have the head tag and let me say javascript tutorial all right and now let's create the body tag now within the body tag i create a paragraph tag and create an id and let me call it demo and then close the tag now i'll explain to you why we're doing this a little later so first let's go ahead and create the script tag so say script and within the script let's create our array so let me use the keyword let and say we give the name of the array cars equals in square base braces we say bmw and volvo [Music] and then say honda all right so now we create an array now one more thing is that we use the keyword let so that which indicates that the array can be changed throughout the program all right so now we go ahead and display it so i say document dot get element by id and here i say now the id created was demo so i say demo here and i use the dot inner html property which is equal to cars okay let me change this to bmw first all right so what exactly in or html does is that it is responsible for what is being displayed on the web page okay now since we've taken id as demo any changes made is reflected in this id and then displayed onto the web browser all right so let's save this and now execute the file so here i go back to my folder and then to the file and go ahead and click on it so there you go the heading is displayed and the entire array is displayed here all right so let's go back to our vs code okay so i hope this was easy to understand now let's go ahead so the next operation is to access an array element so let's go back to our vs code and here let's create another variable say let bmw bmw's variable don't get confused with the array element so bmw equals cars of the index 0. so basically cars of 0 is nothing but bmw all right so that is being saved in the variable bmw and now let's just go ahead and display this so let's just copy this and paste it here and instead of cars you use the variable name bmw that is this one all right so now let's save this and when we execute it you see bmw here that's how you retrieve an element from an array next up we have the array length property which displays the length of the array so again let me show you how to do that let's go back to our code and here let's create a variable and let's call it length variable so i say let l e n equals cars dot left now we can use the length property which will retrieve the length of the array for us it's as simple as that and now after this again let's just copy the same code here and then let's pass len okay now let's save this and when you execute it again it says three so we've successfully retrieved the length of the array all right so the next operation is to access the last array element right so let's go back to our vs code and now let's create another variable and let's call it last and we'll just say last equals cars and within square braces cars dot length minus 1 right so basically the length of the array is 3 and 3 minus 1 is 2. so it should retrieve cars of 2 which is honda right so let's just execute this let me pass last here save it and see if it displays honda for us there you go it's as simple as that all right so moving on the next array operation is loop over an array item so for that let's go to our code and here let's use the for loop so i say cars dot for each for each and within this we'll say item comma index comma array and now we use the arrow function and display the content on the console so i say console.log of item along with its index so let's save this and now let's go ahead and execute it all right now as you can see nothing is printed on your web page right because whatever is being printed has to be printed in your console so now click on f12 which opens the developer options and here you can see console so click on that and now you can see the name of the item in the array along with its index so you see bmw 0 volvo 1 and honda 2. all right so moving on now that we've learned about the array operations let's go ahead and learn about the array methods so the first method is tostring now as the name suggests it is used to convert an array into a string all right so let's go back to our vs code and now let's copy the same code here and here instead of last i just say cars dot to string now you can use this method to convert the array into a string so let's save this and let's execute it all right now here the same output is shown which means that the type has only been changed to string type all right moving on the next method is pop now pop basically removes the last element from the array so let me show you how that works let's go back to our vs code and here we have to save the pop element into a variable right so let's create a variable say last okay and oh since last is already used let me call it last one [Music] last one of cars dot pop now you can use the pop method to pop the element and now you can just copy the same code to display this onto our web page and here i just say last one now since we've popped the last element the array has only two elements right that is bmw and volvo so if you want to display the last element it should display volvo right so what we can do is we can just create another variable say last two and just use the same logic here okay and now let's just display it on your console and let's say last two all right so now let's save it now the popped element has been saved in last one which is displayed on the web page and the last element of the array after the pop function has to be displayed on our console so let's go ahead and execute the file all right so honda has been displayed that is the element that has been removed from the array and now once we check our console here you go here you can see volvo which means that is the last element in the array moving on the next method is the push method now as the name suggests it is used to add a new element to the array and remember to the end of the array so let's go back to our vs code and here let me say cars dot push push is the method that we're using inside of which we'll say audi all right and now let's just display the same things so let me copy this and here let me say cars okay so let me save it and once i execute it it says bmw volvo and audi so we've successfully added another element to the end of the array so the next method is the shift method now basically shift is used to remove the first element from the array now this method shifts all the elements reducing the indexes of every element by one all right let me show you how this works so let's go back to our vs code and here let me just say cars dot shift it's as simple as that and let's just display this let me copy the same thing let's save it and when we execute it here you can see it just displays volvo and audi so now cars has array elements volvo and od with at a indices 0 and 1. all right so moving on the next method is unshift all right so to add an element into the beginning of an array we use the unshift method therefore this method increases the array index by one right so let's go back to our vs code and use the same function unshift let's say cars dot unshift and here we go let's save it and here we have to specify what we're adding right let me say hyundai okay let's save this and when we execute it you can see hyundai volvo and audi as simple as that all right moving on the next method is the concat method now this is basically used to merge two different areas right so let's go back to our vs code ensure let's create another array first and let's just call the array bikes okay and let's create say yamaha and let's say suzuki and then we'll say royal enfield okay and now let's save this and say let vehicles this is another array which is basically the after concatenation the entire array is saved into this array all right so let's say cars dot concat or bikes we just concat bikes and cars together okay and then let's just display this over the web page let me change this to vehicles all right let me save this so let's go ahead and execute it there you go now both the areas have been merged together into a single array so the next array method is the sort method now basically sort is used to sort the entire array into ascending order all right so let's go back to our editor and here let's just use the sort method on the array vehicles all right vehicles dot sort okay and let's just display this on our web page so again let's go back and execute it and here you can see it has been sorted the next method is the reverse method so the reverse method is again used to reverse the elements in an array so it's logic right so sort was used to sort it in ascending order now when you reverse it it just sorts it in the descending order so let's go back here i'm going to copy the same thing all right and here instead of sort let me just say reverse so let's save this and execute it there we go it has displayed the entire array in the reverse order all right with that we finished the array methods next up we have map reduce and filter first up we have array.map now the map method is used for creating a new array from an existing one by applying a function to each and every one of the elements in the first array and it does not change the original array all right so to make you understand this better let's go back to our visual studio code and now here let's first create another area okay so let me call this num1 and let's have integers let's say 2 3 4 5 6 and 7 okay and now let's have another array num2 so let's go ahead and say num1 dot map of let me define a function say multiply okay so multiply the function that is that i'm going to define here so let's say function multiply of value okay and inside this let me say return value into two okay so what this basically does is that it multiplies each and every element of the array num1 by 2 and saves the new elements into the array num2 okay now after this let's go ahead and display the contents so let me copy this and let's display the content in the array num2 right let me save it let's go back here execute it so there we go every element has been multiplied by 2 and then displayed again i hope this was clear for you now the next method is the filter method so the filter method takes each element in an array and applies a conditional statement against it and if this condition returns true the element gets pushed onto the output array but if it returns false the element does not get pushed all right so let me show it to you now let's go ahead and create another variable say num3 and here i say num1 dot filter of say comp now comp is a function let me define the function here let me say function comp of value takes a value as a parameter within which i am going to check if the value is greater than 4. now it only appends the element into the array num3 if the value is greater than 4 all right so now let me just go ahead and change this to num3 all right let's save this and when we go back and execute here we go now the values so let's go back here let me check now num1 had the values 2 four five six and seven right so according to this it has to only display five six and seven do not get confused with num2 here we've passed num1 here so it checks for this array right so according to the logic it should display five six and seven and it has done so here okay moving on the next method is the reduce method now the reduce method reduces an array of values down to just one single value now to get the output value it runs a reducer function to each element of that array okay now this method does not reduce the original array again so let's go back to our vs code now let me create another variables in num4 and say num1 dot reduce and let me call it sum so what we're basically doing is that we're adding all the digits 2 3 4 5 6 and 7 in num1 to a single value right that is the sum and then we're going to be displaying that so what we're going to do is let's define the function here function sum basically is total comma value right and then here let's say return total plus the value okay and after this i'm going to display the content so let's say num 4 okay let's save it go back and execute here we go it displaces some of the entire values in the array this was pretty simple right all right so this was a simple demo on javascript arrays i really hope this helped you if you have any doubts let us know in the comment section below we're also going to be coming up with more and more javascript videos so watch out for that until then keep learning and stay tuned to simply learn hi there if you like this video subscribe to the simply learn youtube channel and click here to watch similar videos turn it up and get certified click here

Channel: Simplilearn

Views: 12,180

Keywords: array in javascript, javascript array methods, javascript arrays, javascript array tutorial, what are arrays in javascript, types of array in javascript, array tutorial, javascript arrays examples, javascript arrays explained, javascript arrays advanced, array tutorial in javascript, array tutorial for beginners, javascript, javascript tutorial, javascript tutorial for beginners, simplilearn javascript, simplilearn

Id: 3tmpNF0BUdI

Length: 24min 34sec (1474 seconds)

Published: Wed Apr 22 2020