Array Methods in JavaScript are built-in (ready-made) functions made available, that can be called on an array in order to do specific tasks like: adding or removing an element, joining two arrays, finding out the length of an array, dividing an array, etc.
Some regularly used Array Methods or Array Properties in JavaScript are as follows:
- length property
- push() method
- pop() method
- shift() method
- unshift() method
- concat() method
- slice() method
- splice() method
Note: All these methods and properties can be accessed by using the dot operator . on an array.
Note: Also check out our JavaScript 👉 JavaScript Arrays lesson.
The length property in JavaScript 📏
The length property of an array is used to find out the exact length of the array. It is used by adding the dot operator . along with the keyword length.
Example
const week = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
// week.length returns "7" as the number of elements in the array "week" is 7.
const numberOfDaysInAWeek = week.length;
console.log(`There are ${numberOfDaysInAWeek} days in a week.`);
// The last element of an array can be found out using the index given by "total length" minus 1.
console.log(`The last day of the week is ${week[numberOfDaysInAWeek - 1]}.`);
Output
There are 7 days in a week.
The last day of the week is Saturday.
NOTE: The .length is a property of an array not a method. Properties are values but methods are functions available in an array.
The push( ) method in JavaScript 👇
The push( ) method in JavaScript is used to add an element in the given array. It is used by adding the dot operator . along with the keyword push.
Example
const animals = ['Dog', 'Cat', 'Cow'];
// Adds an element called "Tiger" to the "animals" array
animals.push("Tiger");
console.log(animals);
// More than one elements can also be added
animals.push("Horse","Donkey");
console.log(animals);
Output
[ 'Dog', 'Cat', 'Cow', 'Tiger' ]
[ 'Dog', 'Cat', 'Cow', 'Tiger', 'Horse', 'Donkey' ]
The pop( ) method in JavaScript 👆
The pop( ) method in JavaScript is used to remove the last element in the given array. It is used by adding the dot operator . along with the keyword pop.
Example
const animals = ['Dog', 'Cat', 'Cow'];
console.log(animals);
// Removes the last element from the "animals" array i.e. 'Cow'
animals.pop();
console.log(animals);
Output
[ 'Dog', 'Cat', 'Cow' ]
[ 'Dog', 'Cat' ]
The shift( ) method in JavaScript 🤛
The shift( ) method in JavaScript is used to remove the first element in the given array and “shift” all the remaining arrays to the left i.e. their preceding index.
It is used by adding the dot operator . along with the keyword shift.
Example
const seasons = ['Spring', 'Summer', 'Autumn', 'Winter'];
console.log(seasons);
// Removing the first element in the "seasons" array i.e. 'Spring'
seasons.shift();
console.log(seasons);
Output
[ 'Spring', 'Summer', 'Autumn', 'Winter' ]
[ 'Summer', 'Autumn', 'Winter' ]
The unshift( ) method in JavaScript 🤜
The unshift( ) method in JavaScript is used to add new elements at the beginning of the given array.
It is used by adding the dot operator . along with the keyword unshift.
Example
const planets = ['Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'];
console.log(planets);
// Adds the element "Earth" at the beginning of the "planets" array
planets.unshift('Earth');
console.log(planets);
// We can also add more than one element at the beginning of the array
planets.unshift('Mercury', 'Venus');
console.log(planets);
Output
[ 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune' ]
[ 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune' ]
[ 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune' ]
The concat( ) method in JavaScript 🤝
The concat( ) method in JavaScript is used to merge or combine two arrays and return a new array having all the elements of both arrays.
It is used by adding the dot operator . along with the keyword concat.
Example
const myBrothers = ['Steve', 'Mark'];
const mySisters = ['Ada', 'Katie'];
// Combining the arrays 'myBrothers' and 'mySisters' and returning a new array having all the elements of both arrays.
const mySiblings = myBrothers.concat(mySisters);
console.log(mySiblings);
Output
[ 'Steve', 'Mark', 'Ada', 'Katie' ]
The slice( ) method in JavaScript 🍕
The slice( ) method in JavaScript is used to slice or cut out the given array and return a new array.
The index of the array element that we put inside the parenthesis ( ), the slice method will cut out and return a new array from that position.
It is used by adding the dot operator . along with the keyword slice.
Things to keep in mind:
- The slice() method does not change the original array.
- It only returns a new cut out array.
Example
const seasons = ['Winter', 'Autumn', 'Spring', 'Summer'];
// The slice() method will cut out a new array from index position "2" i.e. cut out starts from the element 'Spring'.
const seasonsThatAreHot = seasons.slice(2);
console.log(seasonsThatAreHot);
// Keep in mind that the slice() method does not change or cut the original array. It only returns a new cut out array.
console.log(seasons);
Output
[ 'Spring', 'Summer' ]
[ 'Winter', 'Autumn', 'Spring', 'Summer' ]
Example with two arguments
The slice() method can also take two arguments.
The first argument is the index from where the cutting out starts and the second argument is the index up to where (but not including it) the cutting should stop.
const animals = ['Cow', 'Deer', 'Lion', 'Tiger', 'Wolf', 'Rabbit', 'Giraffe'];
// Here, the cutting out starts from index position "2" i.e. the "Lion" element, and stops at position "5" i.e. the "Rabbit" element.
// But the element at index position "5" is not included in the new array.
const carnivores = animals.slice(2, 5);
console.log(carnivores);
Output
[ 'Lion', 'Tiger', 'Wolf' ]
The splice( ) method in JavaScript ✂
The splice( ) method in JavaScript is used to add new elements to the given array by removing the existing elements.
It generally takes two or more parameters inside it’s parenthesis ( ).
- The first parameter is the index from where new elements must be added in.
- The second parameter defines the number of elements we want to add.
- The remaining parameters defines the elements we want to add.
It is used by adding the dot operator . along with the keyword splice.
Things to keep in mind:
- The splice() method changes the original array.
- It returns a new array that contains the deleted elements.
Example
const birds = ['Parrot', 'Pigeon', 'Eagle', 'Falcon'];
console.log("Original Array:");
console.log(birds);
// Here, the 1st parameter "2" explains that we have to remove elements from index position "2".
// The 2nd parameter "2" explains that we want to add two elements to the array "birds" starting from index position "2".
// The 3rd and 4th parameter are the elements that we want to add.
const scaryBirds = birds.splice(2, 2, 'Sparrow', 'Dove');
console.log("New Changed Array:");
console.log(birds);
console.log("Removed array of elements:");
console.log(scaryBirds);
Output
Original Array:
[ 'Parrot', 'Pigeon', 'Eagle', 'Falcon' ]
New Changed Array:
[ 'Parrot', 'Pigeon', 'Sparrow', 'Dove' ]
Removed array of elements:
[ 'Eagle', 'Falcon' ]
There are a lot of other existing array methods and properties that you may stumble upon someday. For a brief view of all those methods, if you are interested in it, you can check out the MDN’s Array Documentation.