Important array built-in methods in JavaScript essential for web developer

JavaScript offers a few in-built functions which can be utilized to handle arrays and implement a variety of operations on them. In this blog post, we will be discussing some of the most frequently used array functions in JavaScript with examples.

• Array.prototype.concat(): The .concat() method is applied to unite two or more arrays into a fresh array. It does not modify the original arrays.

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "onion"];
let groceries = fruits.concat(vegetables);
console.log(groceries); // ["apple", "banana", "carrot", "onion"]

• Array.prototype.join(): The .join() method is utilized to join all the elements of an array into a single string. It takes an optional parameter which is used to separate the elements. The default separator is a comma.

let fruits = ["apple", "banana", "mango"];
let joined = fruits.join(" & ");
console.log(joined); // "apple & banana & mango"

• Array.prototype.slice(): The .slice() function is employed to form a separate array that serves as a representation of a segment of a pre-existing array. This method necessitates two inputs; the initial index from which the copy will initiate and the last index at which it will finish.

let fruits = ["apple", "banana", "mango", "orange"];
let newFruits = fruits.slice(1, 3);
console.log(newFruits); // ["banana", "mango"]

• Array.prototype.splice(): The .splice() function permits you to insert or delete components from an array at a specified place. The initial argument of the method is the index where the alteration should begin, and the second argument is the amount of elements to be taken away. Further arguments can be added to incorporate new elements.

let fruits = ["apple", "banana", "mango", "orange"];
fruits.splice(1, 2, "kiwi", "watermelon");
console.log(fruits); // ["apple", "kiwi", "watermelon", "orange"]

• Array.prototype.push(): The .push() function is utilized to insert one or more components to the conclusion of an array.

let fruits = ["apple", "banana", "mango", "orange"];
fruits.push("grapes");
console.log(fruits); // ["apple", "banana", "mango", "orange", "grapes"]

• Array.prototype.pop(): The .pop() method is used to remove the last element from an array.

let fruits = ["apple", "banana", "mango", "orange"];
fruits.pop();
console.log(fruits); // ["apple", "banana", "mango"]

• Array.prototype.unshift(): The .unshift() method is used to add an element to the beginning of an array.

let fruits = ["apple", "banana", "mango", "orange"];
fruits.unshift("strawberry");
console.log(fruits); // ["strawberry", "apple", "banana", "mango", "orange"]

• Array.prototype.filter(): The .filter() method is used to create a new array with all elements that pass a certain test specified in a provided function. It is often used to filter out unwanted elements from an array, such as removing all non-numeric elements from an array of mixed data types.

let numbers = [1, 2, "three", 4, "five"];
let filtered = numbers.filter(function(num) {
  return typeof num === "number";
});
console.log(filtered); 

• Array.prototype.map(): The .map() method is used to create a new array with the results of calling a provided function on every element in the original array. It is often used to manipulate data, such as converting an array of numbers into an array of strings or objects.

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled); 

• Array.prototype.reduce(): The .reduce() method is used to apply a function to each element in an array and reduce it to a single value. It is commonly used for tasks such as calculating the sum or product of all elements in an array.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(acc, num) {
  return acc + num;
}, 0);
console.log(sum);

• Array.prototype.find(): The .find() method is used to return the first element in an array that satisfies a provided testing function.

let numbers = [1, 2, 3, 4, 5];
let evenNumber = numbers.find(function(num) {
  return num % 2 === 0;
});
console.log(evenNumber);

• Array.prototype.findIndex(): The .findIndex() method is used to return the index of the first element in an array that satisfies a provided testing function. It returns -1 if no element passes the test.

let numbers = [1, 2, 3, 4, 5];
let evenNumberIndex = numbers.findIndex(function(num) {
  return num % 2 === 0;
});
console.log(evenNumberIndex);

• Array.prototype.reverse(): The .reverse() method is used to reverse the order of the elements in an array.

let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]

• Array.prototype.forEach(): The .forEach() method is used to execute a provided function once for each element in an array. It is often used to perform a specific action on each element of an array, such as printing out the elements or adding them to a new array.

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(num) {
  console.log(num);
});

These methods can be very useful in a variety of situations, As a web developer, it is essential to be familiar with these built-in array methods and understand how to use them effectively to make your code more efficient and easier to read and maintain. you can try out the code in console section of your browser.