Today we will learn how to use an array and array methods. First of all, an array is a special variable that holds one and more than one variable. We should use an array when we store a list of items like names, ages, prices, images, etc.
Declaring an array: it’s easy to declare an array variable. I’ll show you how to declare an array below.
On that image, I declared a name constant variable that holds more than one name stings on the right side inside the second bracket [ ]. You can store strings, numbers, boolean data types in an array.
[ NOTE: you should use comma (,) when you store more than one value. If you don’t use a comma you will get an error.]
Get specific element on array: we learned that how to declare an array. But we don’t know that how to get a specific element from an array. On that image, we store some names elements on the names variable. but we need only the name Alexia from there. Let’s see how to get that specific element.
On that image, we declared a specificName variable that takes a specific element from the names array. Getting from a specific element from the array we have to declare that array name and a second bracket [ ] on that second bracket it takes array index number. Array index number starts from 0. That’s means johnny index number is 0, david index number is 1 and the alexia index number is 2.
[ NOTE: Array index number start from 0 ]
Merging arrays- Concat method: Concat() is an array method that helps to merge two and more variables and store them in one variable. For merging, we have to use the first array variable then a full stop symbol, and then concat( ), inside the first bracket we call another array variable which we want to merge with the first array variable.
On that image, we see that in the result variable where the merged variables are stored.
[NOTE: concat methods don’t change main values ]
Array every method: array method every() is like checking a condition and its returns a boolean data type value. Which results are true or false. Every method takes a callback function where we will use a comparison operator. on that callback function, it gives us a parameter where all array values have and it looped one by one. Let’s see an example.
On that images, we used every array method which returns a boolean value. In that image, we take an age variable where are stored some ages. And we used every method in the isAllAreUnder18 variable. In that images, every method uses a callback back function and returned a false result. Because in that ages array their elements are not less than 30. That’s why the result is false.
[NOTE: every method returns only a boolean value. If you don’t use the return keyword on the callback function you will get a false value( I used the es6 callback arrow function that’s why I didn’t use the return keyword in one line. more-about-arrow-function ).]
Array filter method: array filter() method is used for filtering elements from the array, and return the elements in a new array. the filter method is like every method but in the filter method, it returns a new array.
In that image, I use the filter method on ages array where I stored filtered elements in showUnder20 variable which output is [10,18]. Because it filtered less than 20 elements and stored them in the showUnder20 variable.
[NOTE: filter method return a new array and it didn’t change the main variable elements]
Array find method: array find() method is similar to the filter method which takes a callback function and returns a variable. But in this find method, it will be returned only one element. If your conditions are matched more than one variable then it will return the first matched element.
In this image, I filtered the ages array and my condition matched two values but returns only one element. if no values are matched in find() method it will return undefined.
[NOTE: find returns only one element, not array]
Array findIndex method: findIndex() method helps to find conditionally matched first element index number.it similar to the find method which takes a callback function and returns a matched index number.
In this image, my conditions are matched more than one element but its shows only the first one matched element index number.
[NOTE: if no matched elements are found it will return -1]
Array forEach method: forEach() uses for doing something with that array elements and forEach() didn’t return anything. If we return something in the forEach() method it will give us undefined. The forEach() method takes a callback function and you can modify elements in there.
In that image, I multiplied all elements by two and I pushed that all values in newPrice variable. Foreach helps to get all elements easily and you can modify your elements.
[NOTE: forEach didn’t return anything ]
Array indexOf method: indexOf() method is used for searching a specific element or text in a variable. Its works on strings too. indexOf() method takes two-parameter. The first parameter takes what you wanna search in string and the second takes the start of the index but the second parameter is optional. The second parameter default value is 0.
In the names array, we used the indexOf() method which searched david index number and the output is 1. If the value doesn’t match anything and output will be -1.
[NOTE: it works in the string too]
Array join method: join() method uses for joining and merging all array elements in one string. The join method takes a string which is for giving a value after per element and the parameter is optional.
In that name array, I use the join method with a space string (“ “) parameter which is applied after the elements.
Array map method: map() method is similar to the filter method which takes callback functions. But in the map() method, you have to return something. If you don’t use return you will get undefined values.
In this image, the map() method is used on the price array and store the values in newPrice variable. In the map method, the elements are multiplied by two and the result is stored in newPrice variable.
[NOTE: you have to return a result if you want to access those results from outside]
Array lastIndexOf method: lastIndexOf() method helps to find index item of matched item. If some elements are the same it will be shown the last matched elements index number. It’s the opposite of indexOf().
We see that the output is 4 which is the last matched index number.
Array pop method: the pop() method is used for deleting the last element from the array.
With that method, we deleted the last element “david” from the array.
[NOTE: it change the original array]
Array push method: the push() method is used for adding a new element after the last element in the array. the push() method takes a parameter where the values you wrote.
Added a new element using the push() method after the last element. The push method takes a parameter which is a name in a string.
[NOTE: it change the original array]
Array shift method: shift() method uses for removing the first element from the array.
shift method is used in the names array. And you see that on the output result it removes the first element of the array.
[NOTE: it change the original array]
Array slice method: slice() method uses for slicing or cutting specific elements from the elements. slice method takes two parameters, the first parameter takes the start index number and the second parameter takes the end index number.
In that image, I cut or sliced inside index numbers 1 to 3 from the array.
[NOTE: it don’t change the original array, it’s a create a new array]
Array sort method: sort() method uses for sorting an array means it sorts in ascending. On the string, it will be showing A to Z and it works on numbers too. But in the number, we need to use a callback function and on there you need to write some codes.
For-String
For-Number
In sorting numbers, we need to use a callback function because sort default works only string and single numbers.
[NOTE: it don’t change the original array, it’s a create a new array]
Array splice method: splice() method is like the shift() method but in that splice method, the first parameter takes the start index number and the second parameter takes how much you want to cut or splice.
Array unshift method: unshift() method is opposite of the shift() method. Because shift() removes the first element of the array and unshift() method is adding new element before the first element.
[NOTE: it will change the original array]
Array reduce method: reduce() uses for calculating all elements from the array. Reduce() method takes two perimeters, the first one takes a callback function and the second parameter takes a default value. in that callback function, it takes a previous value and presents a value perimeter which helps to calculate your values. suppose you have a list of numbers in an array and you want the total value of that array. Let’s see on the ex below.
In this example, I take a default value of 0 for summing all elements from the array. this reduce() makes us easy to calculate array values.it is mandatory to use the return keyword if you don’t use it you will not get any results. You will get undefined.
[ NOTE: I request you to read this article from the top. Pardon me if I did any wrong information. Thanks for reading ]
Top comments (0)