Let's first understand what is array then will deep dive into its method.
So Array is an object that represents a collection of elements.
Declaration of an Array
There are basically two ways to declare array:
- By array literal
- By using new keyword
Syntax-
// array literal
let frameworks = ["React", "Angular", "Vue"];
// using new keyword
let frameworks = new Array("React", "Angular", "Vue");
Note - Majorly we use 1st one i.e array literal
Element of array starts at position 0 and called as index.
Array Methods
1) Length
The length property returns the number of elements in an array.
const cars = ["BMW", "Audi", "Porsche"];
cars.length; //Output: 3
2) pop()
The pop method returns the value that was "popped out". And it always pop out from end of the array.
const cars = ["BMW", "Audi", "Porsche"];
cars.pop(); //Output: Porsche
3) push()
The push method adds a new element to an array (at the end):
const cars = ["BMW", "Audi", "Porsche"];
cars.push("Ferrari"); //Output: 4
console.log(cars); // Output: ["BMW", "Audi", "Porsche", "Ferrari"]
4) Shift()
The shift method removes a first element to an array and return the value that was shifted out.
const cars = ["BMW", "Audi", "Porsche"];
cars.shift(); //Output: BMW
5) Unshift()
The unshift method add a first element to an array and return the length of the array.
const cars = ["BMW", "Audi", "Porsche"];
cars.unshift("Ferrari"); //Output: 4 as it return the length
console.log(cars); // Output: ["Ferrari", "BMW", "Audi", "Porsche"]
6) Concat()
The concat() creates a new array by merging the existing arrays.
const cars = ["BMW", "Audi", "Porsche"];
const bike = ["Honda", "TVS", "Yamaha", "Royal Enfield"]
const vehicles = cars.concat("bike");
console.log(vehicles); // Output: ["Ferrari", "BMW", "Audi", "Porsche", "Honda", "TVS", "Yamaha", "Royal Enfield"]
7) slice()
The slice() method slices out a piece of an array into a new array.
Note:
The slice() method creates a new array.
The slice() method does not remove any elements from the source array.
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const newF = fruits.slice(1);
console.log(newF); // Output: ["Orange", "Lemon", "Apple", "Mango"]
slice method can take two arguments.
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const newF = fruits.slice(1,3);
console.log(newF); // Output: ["Orange", "Lemon"]
8) splice()
The splice method is used to add element in array.
const fruits = ["banana", "orange", "lemon", "apple", "mango"];
const newf = fruits.splice(2, 0, "blueberry", "grapes");
console.log(newf); // output: ["banana", "orange", "blueberry", "grapes", "lemon"]
Note - splice(2,0, "blueberry").
- The parameter 2 defines the position at which new element should be added.
- The parameter 0 define how many elements to be removed.
- The 3rd parameter "blueberry" defines the new element to be added.
9) copyWithin()
The copyWithin method copies array elements to another position in the array.
const bikes = ["Honda", "TVS", "Yamaha", "Royal Enfield"]
const vehicles = bikes.copyWithin(2,0);
console.log(vehicles); // Output: ["Honda", "TVS", "Honda", "TVS" ]
/*Onther position*/
const bikes = ["Honda", "TVS", "Yamaha", "Royal Enfield", "Bajaj"]
const vehicles = bikes.copyWithin(2,0,2);
console.log(vehicles); // Output: ["Honda", "TVS", "Honda", "TVS", "Bajaj"]
10) toString()
The toString method is used to seprate array values into comma separated elements/ values.
const fruits = ["banana", "orange", "lemon", "apple", "mango"];
const newf = fruits.toString();
console.log(newf); // Output: banana, orange, lemon, apple, mango
11) join()
The join method is same as to String method but in join we can contact any thing in between.
const fruits = ["banana", "orange", "lemon", "apple", "mango"];
const newf = fruits.join(" * ");
console.log(newf); // Output: banana * orange * lemon * apple * mango
12) reverse()
The reverse method is used to reverse the element of array.
const fruits = ["banana", "orange", "lemon", "apple", "mango"];
const newf = fruits.reverse();
console.log(newf); // Output: ["mango", "apple", "lemon", "orange", "banana"]
13) Sort()
The sort method is used to sort the array elements in alphabetical and ascending order.
const fruits = ["banana", "apple", "mango"];
const newf = fruits.sort();
console.log(newf); // Output: ["apple", "banana", "orange"]
14) indexof()
The indexOf method is used to find the index of any element from array.
const fruits = ["banana", "apple", "mango"];
const newf = fruits.indexOf("apple");
console.log(newf); // Output: 1
Note - If element is not exist it will return -1.
15) lastIndexOf()
The method lastIndexOf is used to find the element from the end of the array.
const fruits = ["banana", "orange", "lemon", "apple", "mango", "orange"];
const newf = fruits.lastIndexOf("orange");
console.log(newf); // output: 5
16) includes()
The includes method returns true if an array contains a specified elements.
const fruits = ["banana", "orange", "lemon", "apple", "mango"];
fruits.includes("orange"); // Output: true
I have covered majorly all methods of array in javascript. If you found it useful please like and share with others.