ARRAY METHODS IN JAVA SCRIPT

[Music] hello friends welcome back to our channel so in today's session we'll see about the methods of arrays in javascript so in the previous session we have seen about the arrays the introduction to arrays how to create the written arrays and how to access the values of arrays right so now in this session we'll see some methods available in arrays right first one it's a join join join function so we know that adder consists of a multiple elements of different data types right under the same name so we can join all those elements with some delimiter so that delimiter should be given in this function that means we have to give that delimiter as an argument to this function and that delimiter should be enclosed in double quotations so that the values of i mean the values or elements of the array will be joined with the help of this delimiter so the syntax is add a name dot join and give the delimiter here delimiter here right so if you give some space the all the elements will be printed with the help of space differentiating with the space if you give some hyphen all the elements will be differentiated with the hyphen symbol right so i will show you the syntax here and i will demonstrate all these methods by executing a small code right so this is the syntax for join so with the help of this delimiter the elements will be joined right next sort is used to arrange all the elements in a sorting order that means from a i mean lower value to higher value ascending order right and this particularly works on the uh character arrays right so if the array consists of all the strings then all the strings will be sorted in alphabetical order right so the syntax for this one is the same thing array underscore name so whatever the array we are taking that array name dot sort function sort function similarly there is a one more function called reverse so this can be applied in any any kind of array so as the name itself indicates the elements will be arranged in reverse on it okay so the syntax is array underscore name dot reverse okay so error name dot reverse and the next function is push function so this push function will insert the element okay it will insert the element at the last position so here the syntax is added name dot push give the element here so we need to pass the element as an argument so that it will be inserted at last position at last position right similarly there is a function called stop function so here the syntax is array underscore name dot pop and give the sorry here we we need not go with the and then so it will delete the last element it will delete the last element okay so and it this will return the element which has been deleted from the list okay after executing this one we get the result as a single element that has been deleted right and this push function this function if you execute this function this will return the length of the array after inserting the element okay so before inserting the element if the length is 3 after executing this function it will return as its four okay so if you print that array then we'll get the four elements okay it will return the length of the array after inserting the element and the next one shift so shift operation so the syntax is same here also the array name dot shift so shift option will insert okay it will insert the element at the starting position okay sorry it will delete it will delete the element from the starting position so here it will delete from the last element here the delete the element the first element it will delete the first element and all the remaining elements will be moved towards its left that means it will occupy the lower indexes for example there are three values so if you apply the shift operation that 10 will be removed okay initially 0 1 2 now after shift operation okay after shift operation 10 will be removed 20 will comes at the index of 0 and 30 will comes at index 1 so the elements will also be shifted towards its left position that means lower index values right and next one so shift is to delete the first element pop is to delete the last element and there is one more function called unshift unshift right so unshift function the syntax is added on name so whatever the array name we are giving some a or s or array or whatever the name we are giving that error name dot unshift unshift give the element here give the element here so this will insert element yet beginning insert the element at beginning so if you use the push operation if you use the push operation the element will be inserted at the last position if you use the unshift operation the element will be inserted at the beginning and automatically the elements will be moving rightwards so for example if you go with unshift uh some 40 then 40 will be occupying at first position that is 0 so 10 will be moving to 1 20 will be moving to 2 and 30 will be moving to 3 right so the elements will be moving towards its right side okay it will increase the total length of the element and it will be moving right side so that is for unshift unship and then concat function concat function so this concat function is used to concat two different arrays not only the two different arrays so we can also concat the element to the existing array okay so not only that it's not restricted to two arrays we can also concatenate three errors we can also concatenate four arrays right so here array1 dot concat array 2 comma add 3 okay so so on we can we can calculate n number of arrays okay it will merge simply we can call it as a merge merging of array elements so here instead of using the array we can also use the elements so whatever the elements you have passed as an argument to this concatenation operation those elements will be concatenated to the this array okay hope you understood so if you are still having any doubts uh just wait for a while i will show you execution of all these functions so that your diets will be clarified okay right so this is about the concatenation function and there are two more functions available that that is the splice and slice splice slice splice function so this slice function will take three arguments three arguments the first argument is index starting index where we have to insert and the second one is number of deletions number of deletions how many elements should be deleted after inserting this one and the third one is elements elements so whatever the elements we need to insert so this price operation can be used for both insertion as well as the deletion so if you go with some i will show you the example so that you will be understand so some a is equal to 10 20 30 40 and a 50 let us check this one so here yeah a dot error name dot splice here i have forgotten to write this splice so a dot splice of i will give some 0 okay 0 i will give 5 right so this means the starting index is zero and we should not delete any elements and we have to insert the fifth element five element five so five should be inserted at the index zero so the result will be the result will be 5 because 0th element means here 0th index so you can observe here 0 1 2 3 and 4. these are the index values so 5 10 20 30 40 and 50. see once one once again i am writing the splice splice i will go with the one i will go with the 2 and i will go with the 15 right so i just want to insert this 15 at 1 position 1 that means index 1 by deleting 2 elements by deleting 2 elements so what the position 1 you can observe here 0 1 2 3 4 and 5. so what is the position 1 10 so from 10 we have to delete the two elements so 5 2 elements will be deleted and this should be inserted there so 5 comma 15 comma so these two elements will be deleted 30 40 and 50. so this will be the result for this one after applying this splice and if you go with uh again one more example let us take one more example so a dot splice of 1 comma 1 comma 10 20 okay so here i am going with index value 0 1 2 3 and a 4. so now i just want to start the index 1 and i have to delete one element i have to insert these two elements there now the result will be so five it will be printed and here the index one so this should be deleted only one element should be deleted so this 15 will be deleted so instead of 15 we have to insert two elements so 10 20 30 40 50 right so this will be the result so hope you understand the first argument will be the index from where we have to start and the second argument is number of deletions from the given first argument we have to delete the number of elements and the third argument is then elements to be inserted so first it will start with this index it will delete the elements and at that position these elements will be get inserted right and also if you are not inserting any other any element automatically it will be deleted so these are the examples for insertion okay these are the examples for instruction now let us check so if you go here i'm not inserting 15 okay so if the if the arrow is this one and i'm just applying this one i'm giving only two arguments i'm giving only two arguments that is starting with index one and we have to delete two elements so automatically the result will be five and these two elements will be deleted so 30 40 and 50. so if you give only two elements that means i mean two arguments that means the starting position as well as the number of elements to be deleted so from that particular index value the number of elements given element given number of elements will be deleted and directly the remaining elements will be applied right so this is how we can use the splice i will show you the execution of all these cases different cases right now the last function is a slice function slice so this slice function is used to extract some portion see starting index comma stop index so this starting index will be included this top index will be excluded so we should not include this stop index right so it will start extracting the elements from this index to this index minus one the last index minus one for example a is equal to the same elements will take some 10 20 30 40 50 and if you are giving so give the index values 0 1 2 3 and a 4 and if you are slicing a dot slice 1 comma 3 so it will start extracting with the starting index so what is the value of starting index 1 it's a 20. so it's keep on going up to the last index minus 1 so 3 minus 1 okay so 2 that means to 30 and this should not be included the third index will not be included right so that's what i am saying it will include the start index element it will exclude the stop index element so this will be the result for a given slice operation similarly a dot slice 1 comma 4 so it will start extracting from 0 1 2 and three sorry not zero it will start from one so one two three so first element is 20 30 and a 40. so this will be the result for given slice and if you are not giving the second argument so for example a dot slice of two we have if you are giving only one argument by default it will consider it will start extracting from index two to last element in the end area okay so here you can observe two means it will start from two because it you will have to include the start index so second element thirty and here we are not giving any second argument right we are not giving any stop index so that's why it will start extracting all the elements till the end of the array so 30 40 50. so this will be the result for this slice so if you specify the last index the last index minus one till the last index minus one the elements will be extracted if you are not specifying the last index so it will start extracting from the given start index value to last index value of the air right so this is how we can apply the splice and slice operation so in in today's session we have seen a different methods array methods join push pop short reverse shift unshift and splice and slice operations right so let's stop here just we move on to the system and i will i will demonstrate all these methods by taking the small example on different cases right so let's move on to the system hello friends so just now we have seen the syntax for various methods available in irs now i will demonstrate each and every method by executing a small code so let us start writing the code so from the html tag so inside the html we need to write the body and we'll give some title for the content and then we'll write script okay so so inside the body i'm writing some heading so h1 array methods h1 now we will write some scripting right by implementing all the methods available in first uh let us take one array where a is a is equal to some 10 20 30 40 and we'll also take some another array so 50 60 70 and 80 right now first we will see the join so how we can join so joining means uh joining all the elements of an array for example if you consider some array a there are four elements we can join all those sphere elements by using one delimiter right so we'll check with this one document dot right ln so a dot join and give the delimiter here you can give any delimiter so not only the symbols or not not only the space we can also give the text also so i will give the break row for the next output to be printed in the next line so br yeah now you can observe here i have given some space right so now i am just saving this file with arraymethods.html so you can find the file has been generated here and you can execute the file so this is the array methods and write ln so spelling mistakes so you can observe here now we get the content 10 20 30 and 40 right so this is how we can use the thing so we can print the thing so instead of giving space if you give some star the star will be printed in between the elements instead of star if you use some dollar symbol the dollar symbol will be added in between the elements of the array and also you can give the content the text can be also given so 10 given text 20 given text 30 given text 40. so not only the symbols we can give any value here so that's why we call it as a delimiter and that delimiter should be enclosed in quotations so that we can join all the elements of array with the help of the delimiter given in the join function so that is all about our join function and then we'll go with the sort function so we'll take some string some c is equal to give the string some x y z and then g h i next d e f a abc so i have given this one now we will sort the elements so sort function will sort out the array elements in alphabetical order right so a dot sorry sorry c dot sort you can observe here and also view the br for the next output to predicted in the next line so you can observe here see these elements a b c d e f g h i n x y z so here we have given x y z g h i d e f and a b c but the correct order is this way correct order is in this way right and also we can have the see i will i will change the order now okay i will change the order now now also it will be same and now i just want to reverse the elements okay i just want to reverse the elements we can reverse the elements in a numerical array or a string array okay so a dot reverse function reverse function will print all the elements in a reverse order okay see you can observe here so actually the elements of a is 10 20 30 40 and um i have just implemented some reverse function so the elements are 40 30 20 and 10 right now i will print both the errors document dot right ln i will give the a is equal to plus a plus and go with the break row and use the same thing for printing the next a second area also that means b is equal to because further we are going to discuss about the push and pop function so that you need to know what are the elements should be pushed in or what the element should be sorted so you can observe here a dot reverse means the complete elements will be reversed and it will be stored in the same area so that's why we got the same result 40 30 20 10 and here 50 60 70 80. now we'll move on with the next function that is a pop function pop function so coming to the pop function pop function will remove the last element so you can observe your document dot write ln so we'll pop the element from a so a dot pop and also give the br for the next output so you can observe here it will return the element which has been deleted right so actually pop function will delete the last element so here i am giving some a dot pop so consider the array a if you consist the array a the array elements are 40 30 20 10 and from that the last element is 10 that will be removed and that element will be displayed here and after the pop function if you still display the a array a you can get the elements here see 40 30 20 that means we are deleting an element but we the complete space is also deleted so in the previous video we have seen the delete method so in order to delete the element by using the delete keyword if you delete that one space will be defined so space will not be deleted the element is only deleted and that space will be filled with undefined symbol right but here the pop function will delete the complete element okay the space will also be the memory will also be deleted so only three elements are there now now this is all about a pop function if you pop the last element will be deleted and next one is the push function push function means inserting the element in order to insert the element so a dot push and give the element as an argument here give the element as an argument here i will give some 10 okay i'll give you some 10. now you can observe it will return the length of the array so if you push the element it will return the length of the array so you know that after deleting an element where the length of the array is a three but now you have pushed one element automatically the length is four now again if you just print the value of a will get the four elements here 40 30 20 10 okay it will push the element at the last last position okay so push is to insert the element and pop is to delete the element and now there is one more function called shift shift shift will also delete the element but the first element will be deleted so coming to the pop function the last element will be deleted coming to the shift function the first element will be deleted and all the remaining elements will be moved to the lower indexes so now i will check let me show that write ln sorry a dot shift okay plus vr now you can observe here it will also give the return the element which has been deleted now you can observe here a dot shift means the 40 is removed that means the first element the beginning element will be deleted and all the remaining elements will be moved towards its lower positions after that you can observe the a array a which is having the three values shifted towards left side so you can observe 30 20 for 10. so before shifting that 40 the 40 is in 0th for index 30 is in first index 20 is in second index 10 is in third index now after deleting this one that means after using the shift operation the 40 will be shift 40 will be deleted and all the remaining values will be shifted towards the left so previously 30 is in zero first index now 30 is in 0th index similarly 20 will be moved to left and 10 will be moved to left so that's called a shift operation and there is one more operation called unshift that will insert the elements at the beginning itself so that will will check document dot write ln a dot unshift so unshift and pass one argument so argument that argument is a value that should be inserted right so i will give 50. so where it will be inserted it will be inserted at the beginning of the array and again the elements will be moved towards right you can observe here again the length is 4 right so previously we are having 3 the length is 4 again if you print a value you will get the elements you can observe here 50 is inserted and all the remaining elements are shifted towards its higher indexes the mood okay so that is the purpose of unshift shift is for deleting the element at the starting position and moving the element unshift is to insert the value at the beginning of the beginning of the array that means inserting at the starting position and the all the remaining elements will be moved towards its right side right hope you understood this one right next concatenation so now we will see the concatenation concatenation means combining both the elements so we can use here so document dot right ln and you can concatenate here so a dot concat of b so that b will be concatenated to a so let us check the result so after applying this one you can observe here so the elements are concatenated so this is the elements of a 50 30 20 10 50 you can observe here right and next to 50 60 70 80 are the b elements so b elements are concatenated to l array a so that this is also called as merging okay merging two areas and also we can not only the complete array we can also concatenate as particular elements so if you observe here document dot first let us print a value see a is equal to 50 30 20 10 that means a will not be updated so a new array will be created okay new array will be created now let us check so document dot write ln a dot concat and instead of giving c here i will give some only one element ok one element i will give some hundred so that element will be concatenated to a let us check so we are can observe see 50 30 20 10 and 100 okay a concatenated and after that you can also observe the a whether it has been changed or not you can see here a is not changed okay a new array will be created so for concatenation function it will be added and a new error will be returned so unless you save the new array into a particular variable it doesn't save the values okay so the original values will not be changed hope you understood this one so after concatenation still if you are printing here we are not getting the concatenated value because this returns a new array right so that is a concatenation and splice next one is a splice so splice means in order to delete the elements or in order to add the elements we can go with the same statement splice so document dot write ln a dot splice so uh yeah a dot splice it will take some three arguments as i mean uh three arguments first one is the index where it will have to start so i just want to add 40 in between 50 and 30. so i will add 40 that means the index value of 40. so i just want to add 40 here right so 40 here means the index value is 1 and i don't want to delete any other elements even though we are adding the elements i don't want to delete so zero number of elements should be deleted and what element should be added here so what should be added here right see so nothing will be printed because no element has been deleted here right so after that if you print the value of a will get the added element here so you can observe here see a is equal to 50 40 30 20 10 and if you want to delete the elements so we can give the position from where we have to add okay not only the 40 we can also go with the multiple elements so if you add some 40 comma 60 the two elements will be added here right so you can observe here again nothing will be printed and after that if you execute uh if you print the value of a will get the two more elements here so see 40 60 40 30 20 and 10 right at one position zero element should be deleted and if you want to delete some two elements now you can observe the value of a is here and if you want to remove this one what element see here here you can observe i just want to add some 70 and i just want to remove two elements so i can go with here see i just want to add some 70 okay and i just want to remove one element and where i have to get the 70 0 1 2 3 third index see here you can observe 0 1 2 3 in the third index i just want to remove 40 and i want to get a 70 so here you can observe so if you put this one the 40 is removed and you can observe here so it will return the element which has been deleted right so after that if you print a value you can observe the 40 is replaced with the 70 and here if you want to remove two elements the two elements will be deleted here and those two elements will be printed here so you can observe here the 40 30 is deleted here instead of 40 30 70 is inserted so here we if you don't want to insert anything if you just want to delete the elements then also you can use the splice function it doesn't uh give any space so you can observe here so just give the two arguments that is where from where we have to start deletion and how many elements to be deleted so three that means so if you can observe here zero one two three here from here the third index two values that means 70 and 20 will be deleted by executing this statement you can observe here see 70 and 20 will be deleted so it will return the elements which has been deleted so after that again if you want to print the a value you will get the elements after deleting 70 and 20. so the elements of here 50 40 60 and 10 right and i just want to replace some with the 30 10 with the 30 again go with the splice function and use the splice so 0 1 2 3 from 3 delete one element and insert some 30 some 30. so 30 element will be added here okay 30 element will be added here see 10 is deleted here and if you go with the a 30 is added here right so inst you can enclose in a quotations or simply you can go with this one because these are numbers right so even though the strings are here it will be treated as a numbers in here other than the arithmetic edition right so uh 3 1 10 30 means from third position one element will be deleted and instead of that element we we are adding some 30 so that's why 50 40 60 and 30 right so hope you understood this one and also we can have the slice operation so slicing means extracting the portion right so splice i think you understood the splice function the first one is the index from where we have to start and the second parameter is how many elements should be deleted okay how many elements should be deleted if you want if you don't want to delete the elements you just place zero there okay and after that what are the elements to be added how many number of elements to be added those elements should be inserted here using a comma right and then the slice operation so slice operation means extracting the portions based upon the index value so i will go with some where uh n is equal to i will go with the 10 20 30 40 50 60 70 right so now let us check document dot write ln go with the a dot sorry sorry n n dot slice and give the index ranges the starting index and the end index and index will not be included i will go with zero that means the extract the portion from the index value zero to five five means four up to four it will be deleted okay it will be extracted zero one two three and a four last stop index will not be included so you can observe here it will return the elements so you can observe 10 20 30 40 and 50. so let us give some 100 so there will be no confusion for you so i will change the elements 300 400 500 600 and 700 and i will give some 4 that means 0 1 2 3 so before that i will print the value of n so that in the output you can know that n is equal to plus n plus vr so you can observe here n value is here n is equal to 100 200 300 400 500 600 700 and coming to the slice so here 0th index to 4th index 0th index 0 1 2 3 and f4 so 4 thin x is not included because the last index will not be included so four minus one that means up to three ah third index it will be printed right so here the slice function will accept the two arguments one is the start index and the second one is the last index and if you are not specifying the last index automatically it will print the rest of the array okay from just a given starting index so n dot slice so if you go with the only one argument that is a three it will start extracting from the third index to last last element you can observe here see third index i am given 3 right so 0 1 2 3 that means from 400 we are not giving the stop index automatically it will start extracting the all the values from the given index value so 400 500 600 and 700 so like that we can use the slice operation to extract some portion of the elements right so hope you understood uh all these methods so we have seen a join push pop shift unshift splice concatenate slice short operation and reverse operation so if you are having any doubts regarding these methods feel free to post your doubts in the comment section definitely i will try to clarify all your doubts if you really understood my session like my session share my session with your friends and don't forget to subscribe to our channel thanks for watching thank you very much

Channel: Sundeep Saradhi Kanthety

Views: 3,478

Keywords: sundeep, saradhi, kanthety, html, introduction, basics, markup language, static, .html, .htm, java scripting, dynamic, front pages, user interface, html elements, html fundamentals, web serevices, hyper text, java script, applications of java script, script tag, head tag, body tag, linking external, javascript file, client side, scripting language, validation, server side, array methods, join, sort, reverse, shift, unshift, concat, splice, slice, push, pop, array object, methods in arrays

Id: AlcwPAw87Ds

Length: 38min 43sec (2323 seconds)

Published: Tue Jan 19 2021