JavaScript Array Methods You Must Know

In JavaScript array is ordered list of values. Each value is known as element, is assigned a numeric position in array called its index [start from 0th index ...]. Array is grouped in pair of square brackets [] and separated by commas. Here javascript array it allows to store any typeof element such as it can be string, number, boolean, objects and even other arrays also.

So lets discuss methods of array in javascript which helps manipulating original array and returns new one.

1. push() and pop()

In push() method one or more elements can be pushed in array it usually pushes to end of an array and return a new array length. It mutates the original array rather then creating a new array. Lets understand with an example.

const fruits = ["Apple", "Mango", "Banana"];
fruits.push("Orange", "Grapes");

console.log(fruits);
// ["Apple", "Mango", "Banana", "Orange", "Grapes"]

In pop() method it removes last element from the array and returns the removed element. This method is mutating where the length of the original array changes. So lets take a example.

const colors = ["Red", "Blue", "Green", "Yellow"];
colors.pop();

console.log(colors);
// ["Red", "Blue", "Green"]

2. shift() and unshift()

In shift() method it removes the first element from the list of array. Returns removed element. First element indexing to 0th index. It similarly works like pop() but instead of removing element from last it removes first element. Lets now create array and apply shift().

const cities = ["Delhi", "Mumbai", "Chennai", "Kolkata"];
cities.shift();

console.log(cities);
// ["Mumbai", "Chennai", "Kolkata"]

In unshift() method works similarly to push() but adds elements to the beginning of the array can pass one or more element. This method takes any number of parameters want to pass in array. Returns new length of an array.

const students = ["Rochak", "Suhani", "Mohit", "sundaram"];
subjects.unshift("English");

console.log(subjects);
// ["Rochak", "Suhani", "Mohit", "sundaram"]

3. map()

In map() method creates a new array by keeping the original same it does not mutate. It applys provided callback function to each element of an existing array.

let prices = [100, 200, 300];
let discountedPrices = prices.map((price) => price - 20);

console.log(discountedPrices);
// [80, 180, 280]

4. filter()

In filter() method traverses the entire array, selecting the elements that meets the condition implemented by provided callback function. It does not modify the original array.

let ages = [12, 18, 25, 15, 30];

console.log(ages.filter(age => age >= 18));
// [18, 25, 30]

5. reduce()

In reduce() method iterates over an array applying reducer function to each element, accumulating a single output value. It takes an initial value and processes from left to right reducing the array to single result. So lets understand through example.

let cartItems = [
  { item: "Shirt", price: 500 },
  { item: "Jeans", price: 1200 },
  { item: "Shoes", price: 2000 },
];

const totalAmount = cartItems.reduce((total, product) => total + product.price, 0);

console.log(totalAmount);
// output : 3700

6. forEach()

In forEach() method executes a provided function once for each array element. It does not return a new array or modify original array (unless you manually change it inside). It's commonly used for iteration and performing actions on each array element. The callback function has access to current element, index, and entire array on every loop.

let marks = [80, 75, 90, 85];

let sum = 0;

marks.forEach((mark) => sum += mark);

console.log(sum);
// output: 330

Hence, these were the array methods basic level understanding you can try these examples on online terminal or any code editor. Try to make your own example so you can get idea how does it works.