Table of contents
Introduction
In this article, we are going to discuss about array and their methods in JS. An array is a data structure that is used to store different but related elements. JS array can store different datatypes too. Suppose Bill, a restaurant owner, has decided to create a digital record of all the different dishes. For that, he can use one variable to store one dish, but that will be a tedious task. To make that easy Bill can create just one array and store all the different dishes in it.
// Not recommended way
let dish1 = "Samosa";
let dish2 = "Momos";
let dish3 = "Pakoda"
// Better way
const dishes = ["Samosa", "Momos", "Pakoda"];
Array index and access of elements
Bill can access any dish from his dishes array by using his index number. But wait, What is the index?
An index is just a number using which we can access individual elements of an array like dishes[index]. But here is a catch, Index number does not start with 1, it starts with 0. So, to get the first dish Bill has to use dishes[0], for the second dishes[1], for the third dishes[2], and so on.....
const dishes = ["Samosa", "Momos", "Pakoda"];
dishes[0] //Samosa
dishes[1] // Momos
dishes[2] //Pakoda
Why Array?
One can ask why arrays, I can use different variables to store different elements, it is not a problem for me. When we use an array it gets easy to keep track of all similar items. Suppose someone wants to know, how many and what are the dishes does Bill's restaurant has ? In that case, he/she can check all by traversing the array and checking its size of it. Array also provides continuous memory location, so access to any individual element is easier and faster too. Array has some predefined methods to ease our life too.
Methods
1. push()
push method takes an element as an argument and adds it to the last of that array.
const dishes = ["Samosa", "Momos", "Pakoda"];
dishes.push("Pizza");
console.log(dishes);
// ["Samosa", "Momos", "Pakoda", "Pizza"]
2. pop()
pop does not take any argument. It just removes the last element from an array.
const dishes = ["Samosa", "Momos", "Pakoda"];
dishes.pop();
console.log(dishes);
// ["Samosa", "Momos", "Pakoda"]
3. shift()
This method does not take any argument. It removes the first element from an array.
const dishes = ["Samosa", "Momos", "Pakoda"];
dishes.shift();
console.log(dishes);
// ['Momos', 'Pakoda']
4. unshift()
This method takes one element as an argument and adds it to the start of an array.
const dishes = ["Samosa", "Momos", "Pakoda"];
dishes.unshift("Pizza");
console.log(dishes);
// ['Pizza', 'Samosa', 'Momos', 'Pakoda']
5. length
This method returns the length of an array.
const dishes = ["Samosa", "Momos", "Pakoda"];
console.log(dishes.length);
// 3
6. toString()
This method returns all elements of the array separated by a comma in string format.
const dishes = ["Samosa", "Momos", "Pakoda"];
console.log(dishes.toString());
// Samosa,Momos,Pakoda
7. concat()
This method is used to merge two or more elements. It returns a new array.
Syntax: arr1.concat(arr2,arr3)
const arr1 =[1,2,3];
const arr2=[4,5,6];
const arr3=[7,8,9];
const arr=arr1.concat(arr2,arr3);
console.log(arr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
8. sort()
This method sorts the elements of an array.
const dishes = ['Pizza', 'Samosa', 'Momos', 'Pakoda'];
dishes.sort();
console.log(dishes);
// ['Momos', 'Pakoda', 'Pizza', 'Samosa']
9. slice()
slice() method returns a part of the given array. It creates a new array but does not change the original array. It can take negative index values as arguments too.
This method takes 2 arguments:
- start : start index to slice
- end : end index to slice (exclusive index)
const dishes = ['Pizza', 'Samosa', 'Momos', 'Pakoda','Burger'];
const newDishes= dishes.slice(1,4);
console.log(newDishes);
// ['Samosa', 'Momos', 'Pakoda']
10. splice()
This method mutates the given array by removing or replacing existing elements and/or adding new elements in place.
This method can take 3 arguments:
- start : start index
- countdelete : count to delete
- items : items to add in array
const dishes = ['Pizza', 'Samosa', 'Momos', 'Pakoda','Burger'];
dishes.splice(1,3,"chips", "roll");
console.log(dishes);
// ['Pizza', 'chips', 'roll', 'Burger']
11. every()
This method takes a function as an argument and returns true iff that function return true for every element of the array otherwise it will return false.
const num=[1,2,3,4,5];
function lt6 (n){
return n<6;
}
console.log(num.every(lt6));
// true
12. some()
This method takes a function as an argument and returns true iff that function return true for any element of the array otherwise it will return false.
const num=[1,2,3,4,5];
function gt3 (n){
return n>3;
}
console.log(num.some(gt3));
// true
13. map()
This method helps us to iterate over each element of array and perform some task and returns a new array.
const num=[1,2,3,4,5];
function add3(x){
return x+3;
}
const num3=num.map(add3);
console.log(num3);
// [4, 5, 6, 7, 8]
14. filter()
This method takes a function as an argument and return a new array with values for which the passed function returns true otherwise that elements get discarded.
const num=[1,2,3,4,5];
function gt3 (n){
return n>3;
}
console.log(num.filter(gt3));
// [4, 5]
15. reduce()
This method reduces the array into one single value.
const num=[1,2,3,4,5];
function gt3 (n){
return n>3;
}
console.log(num.reduce((a,c)=>(a+c),0));
16. fill()
This method changes the array with given passed elements.
This method takes 3 arguments:
- value : value to insert into array
- start : start index
- end : end index
const num=[1,2,3,4,5];
num.fill("10",1,3);
console.log(num);
// [1, '10', '10', 4, 5]
17. find()
This method takes a function as an argument and returns the first element that return true for that function
const num=[1,2,3,4,5];
function gt3 (n){
return n>3;
}
console.log(num.find(gt3));
// 4
18. indexOf()
This method returns the index of the passed argument.
const num=[1,2,3,4,5,4];
console.log(num.indexOf(4));
// 3
19. lastIndexOf()
This method returns the index of the passed argument.
const num=[1,2,3,4,5,4];
console.log(num.lastIndexOf(4));
// 5
20. includes()
This method returns true if array has this passed argument otherwise false;
const num=[1,2,3,4,5];
console.log(num.includes(9));
// false
21. join()
This method returns the elements of an array as a string joined by the argument passed.
const dishes = ['Pizza', 'Samosa', 'Momos', 'Pakoda','Burger'];
console.log(dishes.join(' and '))
// Pizza and Samosa and Momos and Pakoda and Burger
22. copyWithin()
This method copies the elements within the array itself.
It can take up to 3 arguments:
- target_index : The index to copy the elements to.
- start : start index.
- end : end index.
let aar1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(aar1.copyWithin(1, 5, 8));
// [1, 6, 7, 8, 5, 6, 7, 8, 9]
23. reverse()
This method reverses the order of elements in the original array. It also mutates the original array.
const dishes = ['Pizza', 'Samosa', 'Momos', 'Pakoda','Burger'];
console.log(dishes.reverse());
// ['Burger', 'Pakoda', 'Momos', 'Samosa', 'Pizza']
24. forEach()
This method iterates over each element of an array. It takes a function as an argument which perfor some task on each element and mutates that array.
const num=[1,2,3,4,5];
function add3(x,i){
num[i]=x+3;
}
num.forEach(add3);
console.log(num);
// [4, 5, 6, 7, 8]