An array is a special variable, which can hold more than one value and of various data types, unlike the majority of other languages which can hold only similar types of values.

const array = ['Ariana', 30.5, false, 'Pete'];

They are probably the most used data structure in JavaScript, hence it has countless array methods. In this blog, we will learn these methods and also understand when to use which method.

Simple Array Methods

First of all, let's understand how can we call methods on objects. Methods are functions attached to objects. If we have array methods that means arrays themselves are objects.

Push

The push method adds an element at the end of an array. It returns a new array length.

const hogwarts = ['Harry', 'Hermione', 'Ron'];
const newTeam = hogworts.push('Luna');\
console.log(newTeam); // 4
console.log(hogwarts); // [ Harry, Hermione, Ron, Luna ]

Pop

The pop method removes an element from the end of an array and we can store the removed element in a variable.

const hogwarts = ['Harry', 'Hermione', 'Ron', 'Luna'];
const expelled = hogworts.pop();
console.log(expelled); // Luna
console.log(hogwarts); // [ Harry, Hermione, Ron]

Shift

The shift method removes the first array element and "shifts" all other elements to a lower index and can store the removed element in a variable.

const hogwarts = ['Harry', 'Hermione', 'Ron'];
const expelled = hogwarts.shift();
console.log(expelled); // Harry
console.log(hogwarts); // [ Hermione, Ron]

Unshift

The unshift method adds a new element to an array at the beginning and "unshifts" older elements. It returns the new array length.

const hogwarts = ['Harry', 'Hermione', 'Ron'];
const newTeam = hogwarts.unshift('Dumbledore');
console.log(newTeam); // 3
console.log(hogwarts); // [ Dumbledore, Harry, Hermione, Ron]

Length

The length method - quite obvious, returns the length of the array.

const hogwarts = ['Harry', 'Hermione', 'Ron', 'Luna', 'Draco'];
const hogwartsClass = hogwarts.length();
console.log(hogwartsClass); // 5

toString

The toString method converts an array to a string of (comma-separated) array values.

const hogwarts = ['Harry', 'Hermione', 'Ron', 'Luna', 'Draco'];
const listOfStudents = hogwarts.toString();
console.log(listOfStudents); // Harry, Hermione, Ron, Luna, Draco

Concat

The concat method creates a new array by merging existing arrays. It can take any number of array arguments.

const wizards = ['Harry', 'Ron', 'Draco'];
const witches = ['Hermione', 'Ginny', 'Luna'];
const professors = ['Snape', 'Lupin', 'Trelawney'];

const hogwarts = professors.concat(wizards, witches);
console.log(hogwarts);
// [ Snape, Lupin, Trelawney, Harry, Ron, Draco, Hermione, Ginny, Luna]

Slice

The slice method slices out a piece of an array into a new array.

If only one argument is given, it returns an array from the given index to the last element. If two arguments are given The method then selects elements from the start argument, and up to (but not including) the end argument.

// For one argument
const teamPartialVoldy = ['Snape', 'Bellatrix', 'Barty', 'Lucius'];
const deathEaters = teamPartialVoldy.slice(1);
console.log(deathEaters); // [ Bellatrix, Barty, Lucius];

// For two arguments
const teamRandom = ['Snape', 'Bellatrix', 'Lucius', 'Dumbledore'];
const deathEaters = teamPartialVoldy.slice(1, 3);
console.log(deathEaters); // [ Bellatrix, Lucius];

Splice

The splice method can be used to add or remove elements from an array.

Adding elements

const hogwartsHouse = ['Gryffindor', 'Hufflepuff', 'Slytherin'];
hogwartsHouse.splice(2, 0, 'Ravenclaw');
console.log(hogwartsHouse); // [Gryffindor, Hufflepuf, Ravenclaw, Slytherin]

The first parameter (2) defines the position where new elements should be added.

The second parameter (0) defines how many elements should be removed.

The rest of the parameters ("Ravenclaw") define the new elements to be added.

Removing elements

With clever parameter settings, you can use splice to remove elements without leaving holes in the array.

const hogwartsHouse = ['Gryffindor', 'Hufflepuff', 'Ravenclaw', 'Slytherin'];
hogwartsHouse.splice(3, 1,);
console.log(hogwartsHouse); // [Gryffindor, Hufflepuf, Ravenclaw ]

The first parameter (3) defines the position where new elements should be added.

The second parameter (1) defines how many elements should be removed.

The rest of the parameters are omitted. No new elements will be added.

Includes

The includes method checks if the array contains a particular element and returns a boolean value.

const hogwartsHouse = ['Gryffindor', 'Hufflepuff', 'Ravenclaw', 'Slytherin'];
const smartPants = hogwartsHouse.includes('Ravenclaw');
console.log(smartPants); // true

Join

The join method is used to join the elements of an array into a string. The elements of the string will be separated by a specified separator and its default value is a comma(, ).

const hogwartsHouse = ['Gryffindor', 'Hufflepuff', 'Ravenclaw', 'Slytherin'];
const listOfHouses = hogwartsHouse.join(' ');
console.log(listOfHouses); // Gryffindor Hufflepuff Ravenclaw Slytherin

Looping Arrays: forEach

The forEach method calls a function for each element in an array.

Syntax:

array.forEach(function(currentValue, index, arr), thisValue);

Here, index and arr passing is optional.

For example:

const harry = ['H', 'a', 'r', 'r', 'y'];
let harryName = ' ';

function joinName(currentLetter){
    harryName = harryName + currentLetter;
};

harry.forEach(joinName);
console.log(harryName); // Harry

To see how all arguments are used. Let's see another example

const numbers = [10, 30, 50, 70];
numbers.forEach(myFunction);

function myFunction(item, index, arr) {
  arr[index] = item * 10;
}

console.log(numbers); // [100, 300, 500, 700]

Data Transformations

Map

The map method creates a new array by calling a function for every array element. It calls a function once for each element in an array.

Syntax:

array.map(function(currentValue, index, arr), thisValue)

For Example:

const students = [
  {firstname : "Harry", lastname: "Potter"},
  {firstname : "Hermione", lastname: "Granger"},
  {firstname : "Ronald", lastname: "Weasley"}
];

students.map(getFullName);

function getFullName(item) {
  return [item.firstname,item.lastname].join(" ");
} 
// Harry Potter
// Hermione Granger
// Ronald Weasley

Here, an array containing names and surnames is created. To map the array, a function is passed which joins name and surname to create full name of the student.

Filter

The filter method creates a new array filled with elements that pass a test provided by a function.

Syntax:

array.filter(function(currentValue, index, arr), thisValue)

For example:

const Harry = {
  name: "Harry",
  house: "Gryffindor",
};
const Ron = {
  name: "Ron",
  house: "Gryffindor",
};
const Draco = {
  name: "Draco",
  house: "Slytherin",
};
const Luna = {
  name: "Luna",
  house: "Ravenclaw",
};

const students = [Harry, Ron, Draco, Luna];

function gryffindorClub(name) {
  return name.house === "Gryffindor";
}

const gClub = students.filter(gryffindorClub);
console.log(gClub);
// [ { name: 'Harry',house: 'Gryffindor' },
//   { name: 'Ron',house: 'Gryffindor' } ]

Here, four objects (Harry, Ron, Draco and Luna) are made, containing their name and house. A function is made which returns the object having house Gryffindor. To apply the filter method, this function is passed.

Reduce

The reduce method executes a reducer function for the array element. It returns a single value - the function's accumulated result.

Syntax:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

For example:

const gryffPoints = [200, -50, 100, 50, -250];

function getTotalPoints(total, num) {
  return total + num;
}

const totalPoints = numbers.reduce(getTotalPoints, 0);

console.log(totalPoints); // 50

Here, an array of points of Gryffindor's house is created. A function is created which adds all the points. This function is passed to the reduce method.

Other methods

Find

The find method returns the value of the first element that passes a test. It executes a function for each array element.

Syntax:

array.find(function(currentValue, index, arr),thisValue)

For example:

const housePoints = [190, 260, 180, 240];

function checkPoints(point) {
  return point > 250;
}

const highestPoints = housePoints.find(checkPoints);
console.log(highestPoints); // 260

findIndex

The findIndex method executes a function for each array element. It returns the index (position) of the first element that passes a test.

Syntax:

array.findIndex(function(currentValue, index, arr),thisValue)

For example:

const housePoints = [190, 260, 180, 240];

function checkPoints(point) {
  return point > 250;
}

const highestPoints = housePoints.findIndex(checkPoints);
console.log(highestPoints); // 1

---

Hope this blog enhanced your knowledge about array methods. 😄