JavaScript Array Methods Explained with Examples
In programming, an array is a collection of elements or items. Arrays store data as elements and retrieve them back when you need them.
Array
an array is a collection of data.
an array can hold different types of data it can be a string number boolean etc.
const nums = [5, 3, 67, 3, 76, , 3, 67, 3, 5, 10];
const animals = ["cat", "dog", "bat", "lion", "tiger"];
Array Methods:-
array methods are simply inbuilt functions using them you can do certain operations on the array. Like you can retrieve different arrays, convert arrays to string many more.
1. includes()
using includes() you can check whether the element present inside the array or not.
return true if present, or false if not present.
const nums = [5, 3, 67, 3, 76, , 3, 67, 3, 5, 10];
const animals = ["cat", "dog", "bat", "lion", "tiger"];
// includes()
console.log(nums.includes(10)); //true
console.log(animals.includes("sparrow")); //false
2. indexOf()
it will give you an index of the first occurrence of an element from array.
if not present return -1.
const nums = [5, 3, 67, 3, 76, , 3, 67, 3, 5, 10];
const animals = ["cat", "dog", "bat", "lion", "tiger"];
//indexOf()
console.log(nums.indexOf(5)); //0
console.log(nums.indexOf(4545)); //-1
console.log(animals.indexOf("tiger")); //4
3. Array.isArray()
return a boolean value if the array is available or not.
const nums = [5, 3, 67, 3, 76, , 3, 67, 3, 5, 10];
const animals = ["cat", "dog", "bat", "lion", "tiger"];
//Array.isArray(nameOfArray);
console.log(Array.isArray(nums)); //true
console.log(Array.isArray(animals)); //true
4.Join()
Join() Convert the array into a string. it will return a new string.
const animals = ["cat", "dog", "bat", "lion", "tiger"];
//join()
const strAnimals = animals.join(" ");
console.log(strAnimals); //cat dog bat lion tiger
5.lastIndexOf()
lastIndexOf() will search the element from the back side and return the first occurrence of the element's index.
if not present then return -1.
const nums = [5, 3, 67, 3, 76, , 3, 67, 3, 5, 10];
//lastIndexOf()
console.log(nums.lastIndexOf(5)); //9
console.log(nums.lastIndexOf(4345)); //-1
6.Push()
Using push insert a new element at end of the array.
const nums = [5, 3, 67, 3, 76, , 3, 67, 3, 5, 10];
//push
nums.push(143);
console.log(nums); //5, 3, 67, 3, 76, , 3, 67, 3, 5, 10, 143
7. Pop()
Using pop remove an element at end of the array.
const nums = [5, 3, 67, 3, 76, , 3, 67, 3, 5, 10];
nums.pop();
console.log(nums); //5, 3, 67, 3, 76, , 3, 67, 3, 5
8. unshift()
insert an element at the first position of the array.
const animals = ["cat", "dog", "bat", "lion", "tiger"];
// unshift()
animals.unshift("snake");
console.log(animals); //['snake', 'cat', 'dog', 'bat', 'lion', 'tiger']
9. shift()
remove an element at the first positon of the array.
const animals = ["cat", "dog", "bat", "lion", "tiger"];
// shift()
animals.shift();
console.log(animals); //['dog', 'bat', 'lion', 'tiger']
10. slice()
using slice we can cut out the array at any position an generate a new array.
const animals = ["cat", "dog", "bat", "lion", "tiger"];
// slice()
const one = animals.slice(2, 4);
console.log(one); //(2) ['bat', 'lion']
const two = animals.slice(0);
console.log(two); //(5) ['cat', 'dog', 'bat', 'lion', 'tiger']
const three = animals.slice(-3);
console.log(three); //(3) ['bat', 'lion', 'tiger']
11. concat()
using concat we can combine two or more arrays.
const nums = [5, 3, 67, 3, 76, , 3, 67, 3, 5, 10];
const animals = ["cat", "dog", "bat", "lion", "tiger"];
// concat();
const newArr = nums.concat(animals);
console.log(newArr); //[5, 3, 67, 3, 76, empty, 3, 67, 3, 5, 10, 'cat', 'dog', 'bat', 'lion', 'tiger']
12. findIndex()
it will return you an index of the first element which satisfies the condition.
const nums = [5, 3, 67, 3, 76, , 3, 67, 3, 5, 10];
// findIndex()
const front = nums.findIndex((ele) => {
return ele > 70;
});
console.log(front); //4
13. findLast()
it will return you an element of the first element which satisfies the condition.
const nums = [5, 3, 67, 3, 76, , 3, 67, 3, 5, 10];
// findLast()
const rear = nums.findLast((ele) => {
return ele > 70;
});
14.findLastIndex()
it will return you an index of the first element from the backside.
// findLastIndex()
const last = nums.findLastIndex((ele) => {
return ele > 70;
});
console.log(last);
15.ForEach()
it will iterate the complete array and each time call a function.
// forEach()
animals.forEach((ele) => {
console.log(ele);
});
// cat
// dog
// bat
// lion
// tiger
16. filter()
it will iterate the complete array and return the element those who satisfy the condition.
//filter()
const result = nums.filter((ele) => {
return ele % 2 == 0;
});
console.log(result); //76, 10
17. map()
it will iterate the complete array and return the all element and we can perform certain operations on them.
// Map()
const doubleArr = nums.map((ele) => {
return ele * 2;
});
console.log(doubleArr); //[10, 6, 134, 6, 152, empty, 6, 134, 6, 10, 20]
18. reduce()
reduce have element and one accumulator each time the current element sum to the accumulator and return the computer sum of an array.
// reduce()
const sum = nums.reduce((acc, ele) => {
return acc + ele;
});
console.log(sum); //242
19. reverse()
it will reverse the complete array.
// reverse()
const reversedArr = animals.reverse();
console.log(reversedArr); //['tiger', 'lion', 'bat', 'dog', 'cat']