15 Must-Know Javascript array methods
Arrays are an essential part of any programming language, and JavaScript is no exception. With arrays, developers can store and manipulate collections of data, including strings, numbers, and even objects. In this article, we will cover 15 must-know JavaScript array methods that everyone should know.
push() – Adds one or more elements to the end of an array.
The push() method adds one or more elements to the end of an array and returns the new length of the array. This method is useful when you need to add elements to an array without specifying the index.
const array = [1, 2, 3];
array.push(4, 5);
console.log(array);
// Output: [1, 2, 3, 4, 5]
pop() – Removes and returns the last element from an array.
The pop() method removes and returns the last element from an array. This method is useful when you need to remove an element from the end of an array.
const array = [1, 2, 3];
const lastElement = array.pop();
console.log(array); // Output: [1, 2]
console.log(lastElement); // Output: 3
shift() – Removes and returns the first element from an array
The shift() method removes and returns the first element from an array. This method is useful when you need to remove an element from the beginning of an array.
const array = [1, 2, 3];
const firstElement = array.shift();
console.log(array); // Output: [2, 3]
console.log(firstElement); // Output: 1
unshift() – Adds one or more elements to the beginning of an array
The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array. This method is useful when you need to add elements to an array at the beginning.
const array = [1, 2, 3];
array.unshift(4, 5);
console.log(array);
// Output: [4, 5, 1, 2, 3]
splice() – Adds or removes elements from an array at a specified index
The splice() method adds and removes elements from an array at a specified index. This method can be used to add or remove elements from anywhere in the array.
const array = [1, 2, 3, 4];
array.splice(1, 2, 5, 6);
console.log(array);
// Output: [1, 5, 6, 4]
slice() – Returns a copy of a portion of an array specified by its starting and ending indexes
The slice() method returns a copy of a portion of an array specified by its starting and ending indexes. This method can be used to create a new array that contains a subset of the original array.
concat() – Combines two or more arrays and returns a new array
The concat() method combines two or more arrays and returns a new array. This method can be used to join arrays together without modifying the original arrays.
const array1 = [1, 2];
const array2 = [3, 4];
const newArray = array1.concat(array2);
console.log(newArray);
// Output: [1, 2, 3, 4]
join() – Joins all elements of an array into a string
The join() method joins all elements of an array into a string, using a specified separator. This method can be used to create a string from an array.
const array = [1, 2, 3];
const string = array.join("-");
console.log(string);
// Output: "1-2-3"
indexOf() – Returns the index of the first occurrence of a specified element in an array
The indexOf() method returns the index of the first occurrence of a specified element in an array. If the element is not found, this method returns -1.
const array = [1, 2, 3];
const index = array.indexOf(2);
console.log(index);
// Output: 1
lastIndexOf() – Returns the index of the last occurrence of a specified element in an array
The lastIndexOf() method returns the index of the last occurrence of a specified element in the array. If the element is not found, this method returns -1.
const array = [1, 2, 3, 2];
const index = array.lastIndexOf(2);
console.log(index);
// Output: 3
forEach() – Executes a provided function once for each element in an array
The forEach() method executes a provided function once for each element in an array. This method can be used to perform an operation on each element of an array.
const array = [1, 2, 3];
array.forEach((element) => { console.log(element); });
// Output:
// 1
// 2
// 3
map() – Creates a new array with the results of calling a provided function on every element in the array
The map() method creates a new array with the results of calling a provided function on every element in the array. This method can be used to create a new array based on the original array.
const array = [1, 2, 3];
const newArray = array.map((element) => { return element * 2; });
console.log(newArray);
// Output: [2, 4, 6]
filter() – Creates a new array with all elements that pass a test specified by a provided function
The filter() method creates a new array with all elements that pass a test specified by a provided function. This method can be used to create a new array based on a condition.
const array = [1, 2, 3];
const newArray = array.filter((element) => { return element > 1; });
console.log(newArray);
// Output: [2, 3]
reduce() – Executes a provided function on each element of the array and returns a single value
The reduce() method executes a provided function on each element of the array and returns a single value. This method can be used to perform an operation on all elements of an array and return a single value.
const array = [1, 2, 3];
const sum = array.reduce((accumulator, currentValue) => { return accumulator + currentValue; }, 0);
console.log(sum);
// Output: 6
sort() – Sorts the elements of an array in place
The sort() method sorts the elements of an array in place. This method can be used to sort an array in ascending or descending order.
const array = [3, 2, 1];
array.sort();
console.log(array);
// Output: [1, 2, 3]
Conclusion
In this article, we have covered 15 must-know JavaScript array methods that everyone should know. These methods are essential for working with arrays in JavaScript and can greatly simplify your code. By using these methods, you can perform a wide range of operations on arrays, such as adding, removing, sorting, and filtering elements. Whether you’re a beginner or an experienced developer, mastering these array methods will make your life easier and your code more efficient.