Javascript Array methods you need to know!
What can you call an Array in Javascript? special variable or list-like objects?
Well, both of these define Array in Javascript. It is a primary notion that an array can hold more than one value at a time. To store data, manipulate data, or some other data-driven interaction, Array can be a great choice to work with.
With a view to making these interactions smoother, effective, and specific, Javascript provides some methods to apply with Array and get benefit from it. Let’s have a look!
- map()
Get hassled while using for loop in an Array? Well, map() method can be a better solution for you. It takes a parameter that indicates each Array elements and then returns you a new array after doing something.
Example:
const arr = [1, 2, 3, 4];
// pass a function to map
const map = array1.map(x => x +1);
console.log(map);
// expected output: Array [2, 3, 4, 5]
2. concat()
Need two array elements in a new array? Then concat() method will help you. Just take the last array name as concat parameter that you want to add after the first array, and there you go.
Example :
var arr1 = [1,2,3]; var arr2 = [4,5,6]; var arr3 = arr1.concat(arr2);
console.log(arr3);
// expected output: [1,2, 3, 4, 5,6]]
3. pop()
pop() is used to remove the last element of an array. In return, it gives you the value that removed.
Example:
const fruits = [‘mango’, ‘orange’, ‘banana’];
console.log(fruits.pop());
// expected output: “banana”
4. filter()
Yes, you got it right. This semantic method gives you the filtered value from an Array. Just takes an argument of each element and a function that provides the condition to be filtered. And of course, it will give you a filtered Array.
Example:
var prices = [15, 45, 1234, 65, 122, 555];
var result = prices.filter(price => price < 100);
console.log(result);
// expected output: [1234, 122, 555]
5. find()
You will need to find() method very handy to find a specific element in an array. Unlike filter, it will return the first element only.
Example:
var prices = [15, 45, 1234, 65, 122, 555];
var result = prices.find(price => price < 100);
console.log(result);
// expected output: 1234
6. reduce()
reduce() is an interesting and a bit confusing method also. It takes 4 arguments- Accumulator (acc), Current Value (cur), Current Index (idx) Source Array (src). With a callback function, it takes actions with the current value and accumulator and returns one value at the end.
Example:
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
7. join()
join() method helps you to concatenate in an Array. It takes the separated value as a parameter or takes the default comma parameter while joining together all array elements. It gives you a string at the end.
Example:
const elements = [‘Fire’, ‘Air’, ‘Water’];
console.log(elements.join());
// expected output: “Fire,Air,Water”
8. sort()
To sort all array elements sort() method can be applied. It sorts primarily as ascending order, it returns a new array with sorted elements.
Example:
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]
9. shift()
Want to remove the first element of an array? Then shift() method is for you. It returns the shifted element and changes the array length.
Example:
const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1);
// expected output: Array [2, 3]
10. lastIndexOf()
lastIndexOf() method returns the last index of a common element in an Array.
Example:
const animals = [‘Dodo’, ‘Tiger’, ‘Penguin’, ‘Dodo’];
console.log(animals.lastIndexOf(‘Dodo’));
// expected output: 3
That’s all for this article so far. Apply these methods for your next web projects. And of course, treat me with some claps!