Table of contents
Introduction
JavaScript Array is an object used to store and manipulate a collection of elements, which can be of any data type, including numbers, strings, and objects. Arrays are a fundamental concept in JavaScript, and they provide an easy way to store and access data.
Javascript Methods
JavaScript arrays have several built-in methods that allow you to manipulate arrays in different ways. Here are some of the most commonly used methods:
1.push() : Adds one or more elements to the end of the array.
let fruits = ['apple', 'banana', 'orange'];
fruits.push('mango', 'grape');
console.log(fruits); // Output: ['apple', 'banana', 'orange', 'mango', 'grape']
2.pop() : This method removes the last element from the array.
let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();
console.log(lastFruit); // Output: 'orange'
console.log(fruits); // Output: ['apple', 'banana']
3.shift() : Removes the first element from the array.
let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();
console.log(firstFruit); // Output: 'apple'
console.log(fruits); // Output: ['banana', 'orange']
4.unshift() : Adds one or more elements to the beginning of the array.
let fruits = ['apple', 'banana', 'orange'];
fruits.unshift('mango', 'grape');
console.log(fruits); // Output: ['mango', 'grape', 'apple', 'banana', 'orange']
5.slice() : Returns a new array that contains a portion of the original array.
const numbers = [1, 2, 3, 4, 5];
// Create a new array containing elements from index 1 to index 3
const slicedNumbers = numbers.slice(1, 4);
console.log(slicedNumbers); // Output: [2, 3, 4]
console.log(numbers); // Output: [1, 2, 3, 4, 5]
In this example, the slice() method is used to create a new array slicedNumbers containing elements from index 1 to index 3 (excluding the element at index 4) of the numbers array.
The slice() method takes two arguments. The first argument specifies the starting index of the slice, and the second argument specifies the ending index of the slice (exclusive). If the second argument is not provided, the slice will include all elements from the starting index to the end of the array.
In this example, the first argument is 1, which means the slice will start at index 1 (the second element in the array). The second argument is 4, which means the slice will end at index 4 (excluding the element at that index).
The slice() method returns a new array containing the elements in the specified slice. In this example, the slicedNumbers array contains the values 2, 3, and 4.
The original numbers array is not modified by the slice() method.
6.splice() : The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements.
const numbers = [1, 2, 3, 4, 5];
// Remove the second and third elements
const removedElements = numbers.splice(1, 2);
console.log(numbers); // Output: [1, 4, 5]
console.log(removedElements); // Output: [2, 3]
In this example, the splice() method is used to remove the second and third elements (with values 2 and 3) from the numbers array.
The splice() method takes two or more arguments. The first argument specifies the index at which to start changing the array. The second argument specifies the number of elements to remove. If the second argument is 0, no elements are removed.
In this example, the first argument is 1, which means the removal process will start at the second element (index 1). The second argument is 2, which means that two elements will be removed.
The splice() method returns an array containing the elements that were removed. In this example, the removedElements array contains the values 2 and 3 .
After the splice() method is called, the numbers array contains the remaining elements (1, 4, and 5).
7.indexOf() : Returns the index of the first occurrence of a specified element in the array.
let fruits = ['apple', 'banana', 'orange', 'mango', 'grape'];
let index = fruits.indexOf('orange');
console.log(index); // Output: 2
8.forEach(): Executes a provided function once for each array element.
let fruits = ['apple', 'banana', 'orange', 'mango', 'grape'];
fruits.forEach(function(fruit) {
console.log(fruit);
});
// Output:
// 'apple'
// 'banana'
// 'orange'
// 'mango'
// 'grape'
In this example, the forEach() method is used to loop through each element in the fruits array and log its value to the console.
The forEach() method takes a callback function as an argument, which is called once for each element in the array. The callback function takes one argument, which is the current element of the array being processed.
In this example, the callback function logs the value of each fruit element to the console using console.log(). The forEach() method then moves on to the next element in the array until all elements have been processed.
9.map(): Creates a new array with the results of calling a provided function on every element in the array.
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
In this example, the map() method is used to create a new array doubledNumbers that contains each number from the original numbers array multiplied by 2.
The map() method takes a callback function as an argument, which is used to transform each element in the array. The callback function should return the new value of the element. The map() method then creates a new array with the same length as the original array, and populates it with the new values returned by the callback function for each element in the original array.
In this example, the callback function multiplies each element by 2, so the resulting doubledNumbers array contains each number from the original numbers array multiplied by 2.
10.filter() : Creates a new array with all elements that pass the test implemented by the provided function.
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4, 6]
The filter() method takes a callback function as an argument, which is used to test each element in the array. The callback function should return a boolean value (true or false). If the callback function returns true for an element, that element will be included in the new array. If the callback function returns false for an element, that element will be excluded from the new array.
11.reduce() : Executes a provided function for each value of the array and returns a single value.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
});
console.log(sum); // Output: 15
Copying methods and mutating methods
Some methods do not mutate the existing array that the method was called on, but instead, return a new array. And Other methods mutate the array that the method was called on, in which case their return value differs depending on the method.
The following methods create new arrays
concat()filter()flat()flatMap()map()slice()splice()
The following methods mutate the original array
copyWithin()fill()pop()push()reverse()shift()sort()splice()unshift()