Array Methods in JavaScript

Arrays are a fundamental data structure in JavaScript used to store multiple values in a single variable. They are a collection of elements, each identified by an index. Arrays in JavaScript can hold elements of any data type, including numbers, strings, objects, and even other arrays.

Creating Arrays:

You can create arrays in JavaScript using the array literal syntax [] or the Array() constructor.

				
					// Using array literal syntax
let fruits = ['apple', 'banana', 'orange'];

// Using Array constructor
let numbers = new Array(1, 2, 3, 4, 5);

Accessing Array Elements:

Array elements can be accessed using their index, starting from zero.

				
					let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]); // Output: apple
console.log(fruits[1]); // Output: banana

Mutator Methods

push()

  • Description: Adds one or more elements to the end of an array and returns the new length of the array.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange'];
let newLength = fruits.push('grape');
console.log(fruits); // Output: ['apple', 'banana', 'orange', 'grape']
console.log(newLength); // Output: 4

Output Explanation: The ‘grape’ element is added to the end of the fruits array, and the new length of the array becomes 4.

pop()

  • Description: Removes the last element from an array and returns that element.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();
console.log(fruits); // Output: ['apple', 'banana']
console.log(lastFruit); // Output: 'orange'

Output Explanation: The last element (‘orange’) is removed from the fruits array, and it is returned as the output.

shift()

  • Description: Adds one or more elements to the end of an array and returns the new length of the array.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();
console.log(fruits); // Output: ['banana', 'orange']
console.log(firstFruit); // Output: 'apple'

Output Explanation: The first element (‘apple’) is removed from the fruits array, and it is returned as the output.

unshift()

  • Description: Adds one or more elements to the beginning of an array and returns the new length of the array.
  • Example:
				
					let fruits = ['banana', 'orange'];
let newLength = fruits.unshift('apple', 'grape');
console.log(fruits); // Output: ['apple', 'grape', 'banana', 'orange']
console.log(newLength); // Output: 4

Output Explanation: ‘apple’ and ‘grape’ elements are added to the beginning of the fruits array, and the new length becomes 

splice()

  • Description: Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange', 'grape'];
fruits.splice(2, 1, 'kiwi', 'melon');
console.log(fruits); // Output: ['apple', 'banana', 'kiwi', 'melon', 'grape']

Output Explanation: At index 2 of the fruits array, one element (‘orange’) is removed, and ‘kiwi’ and ‘melon’ are inserted in its place.

reverse()

  • Description: Reverses the elements of an array in place.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange', 'grape'];
fruits.reverse();
console.log(fruits); // Output: ['grape', 'orange', 'banana', 'apple']

Output Explanation: The order of elements in the fruits array is reversed.

sort()

  • Description: Sorts the elements of an array in place and returns the sorted array.
  • Example:
				
					let fruits = ['banana', 'orange', 'apple', 'grape'];
fruits.sort();
console.log(fruits); // Output: ['apple', 'banana', 'grape', 'orange']
  • Output Explanation: The elements in the fruits array are sorted alphabetically.

copyWithin()

  • Description: Copies a sequence of array elements within the array, from one position to another position within the same array.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange', 'grape'];
fruits.copyWithin(2, 0, 2);
console.log(fruits); // Output: ['apple', 'banana', 'apple', 'banana']

Output Explanation: Copies the elements from index 0 to 2 (‘apple’, ‘banana’) and pastes them starting from index 2 in the same array.

fill()

  • Description: Fills all the elements of an array from a start index to an end index with a static value.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange', 'grape'];
fruits.fill('kiwi', 1, 3);
console.log(fruits); // Output: ['apple', 'kiwi', 'kiwi', 'grape']
  • Output Explanation: Fills ‘kiwi’ from index 1 to 2 (exclusive) in the fruits array.
 

Accessor Methods

concat()

  • Description: Combines two or more arrays and returns a new array without modifying the original arrays.
  • Example:
				
					let fruits1 = ['apple', 'banana'];
let fruits2 = ['orange', 'grape'];
let combinedFruits = fruits1.concat(fruits2);
console.log(combinedFruits); // Output: ['apple', 'banana', 'orange', 'grape']

Output Explanation: fruits2 is concatenated to fruits1 to form combinedFruits.

slice()

  • Description: Returns a shallow copy of a portion of an array into a new array without modifying the original array.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange', 'grape'];
let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // Output: ['banana', 'orange']
  • Output Explanation: Returns elements from index 1 to 2 (exclusive) of the fruits array.

flat()

  • Description: Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
  • Example:
				
					let nestedArray = [1, 2, [3, 4, [5, 6]]];
let flattenedArray = nestedArray.flat(2);
console.log(flattenedArray); // Output: [1, 2, 3, 4, 5, 6]
  • Output Explanation: Flattens the nested array up to the specified depth (2 in this case).

flatMap()

  • Description: Maps each element using a mapping function, then flattens the result into a new array.
  • Example:
				
					let numbers = [1, 2, 3];
let doubled = numbers.flatMap(num => [num, num * 2]);
console.log(doubled); // Output: [1, 2, 2, 4, 3, 6]
  • Output Explanation: Doubles each element in the numbers array and flattens the result.

entries()

  • Description: Returns a new Array Iterator object that contains the key/value pairs for each index in the array.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange'];
let iterator = fruits.entries();
for (let entry of iterator) {
  console.log(entry);
}
// Output:
// [0, 'apple']
// [1, 'banana']
// [2, 'orange']

Output Explanation: It iterates over each index of the fruits array, returning an array with the index and value.

keys()

  • Description: Returns a new Array Iterator object that contains the keys for each index in the array.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange'];
let iterator = fruits.keys();
for (let key of iterator) {
  console.log(key);
}
// Output:
// 0
// 1
// 2
  • Output Explanation: It iterates over each index of the fruits array, returning the index.

values()

  • Description: Returns a new Array Iterator object that contains the values for each index in the array.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange'];
let iterator = fruits.values();
for (let value of iterator) {
  console.log(value);
}
// Output:
// 'apple'
// 'banana'
// 'orange'

Output Explanation: It iterates over each index of the fruits array, returning the value at each index.

Iteration Methods

forEach()

  • Description: Executes a provided function once for each array element.
  • Example:
				
					let numbers = [1, 2, 3];
numbers.forEach(num => console.log(num * 2));
// Output:
// 2
// 4
// 6

Explanation: The forEach() method iterates through each element in the array numbers and executes the provided function for each element.

map()

  • Description: Creates a new array with the results of calling a provided function on every element in the calling array.
  • Example:
				
					let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6]

Explanation: The map() method applies the provided function to each element of the array numbers and returns a new array containing the results.

filter()

  • Description: Creates a new array with all elements that pass the test implemented by the provided function.
  • Example:
				
					let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

Explanation: The filter() method creates a new array containing only the elements of the original array numbers that pass the test provided by the function.

reduce()

  • Description: Executes a reducer function on each element of the array, resulting in a single output value.
  • Example:
				
					let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 10

Explanation: The reduce() method reduces the array numbers to a single value (in this case, the sum of all elements) by applying the provided function to each element

reduceRight()

  • Description: Executes a reducer function on each element of the array (from right to left), resulting in a single output value.
  • Example:
				
					let numbers = [1, 2, 3, 4];
let reversedConcatenation = numbers.reduceRight((accumulator, currentValue) => accumulator + currentValue);
console.log(reversedConcatenation); // Output: '4321'

Explanation: Similar to reduce(), but reduceRight() applies the function from right to left, accumulating the result. In this example, it concatenates the numbers from right to left.

Searching and Sorting Methods:

find()

  • Description: Returns the first element in the array that satisfies the provided testing function.
  • Example:
				
					let numbers = [10, 20, 30, 40, 50];
let found = numbers.find(num => num > 25);
console.log(found); // Output: 30

Explanation: The find() method returns the first element in the numbers array that is greater than 25.

findIndex()

  • Description: Returns the index of the first element in the array that satisfies the provided testing function.
  • Example:
				
					let numbers = [10, 20, 30, 40, 50];
let foundIndex = numbers.findIndex(num => num > 25);
console.log(foundIndex); // Output: 2

Explanation: The findIndex() method returns the index of the first element in the numbers array that is greater than 25.

indexOf()

  • Description: Returns the first index at which a given element can be found in the array, or -1 if it is not present.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange', 'banana'];
let index = fruits.indexOf('banana');
console.log(index); // Output: 1

Explanation: The indexOf() method returns the index of the first occurrence of ‘banana’ in the fruits array.

lastIndexOf()

  • Description: Returns the last index at which a given element can be found in the array, or -1 if it is not present.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange', 'banana'];
let lastIndex = fruits.lastIndexOf('banana');
console.log(lastIndex); // Output: 3

Explanation: The lastIndexOf() method returns the index of the last occurrence of ‘banana’ in the fruits array.

includes()

  • Description: Determines whether an array includes a certain element, returning true or false as appropriate.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange'];
let hasBanana = fruits.includes('banana');
console.log(hasBanana); // Output: true

Explanation: The includes() method checks if the element ‘banana’ is present in the fruits array and returns true if it is found, otherwise false.

Miscellaneous Methods

join()

  • Description: Joins all elements of an array into a string.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange'];
let joinedString = fruits.join(', ');
console.log(joinedString); // Output: 'apple, banana, orange'

Explanation: The join() method concatenates all elements of the fruits array into a string, separated by the specified separator (, in this case).

toString()

  • Description: Returns a string representing the specified array and its elements.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange'];
let stringRepresentation = fruits.toString();
console.log(stringRepresentation); // Output: 'apple,banana,orange'

Explanation: The toString() method converts each element of the fruits array to a string and concatenates them together, separated by commas.

toLocaleString()

  • Description: Returns a localized string representing the array and its elements.
  • Example:
				
					let numbers = [1000, 2000, 3000];
let localizedString = numbers.toLocaleString();
console.log(localizedString); // Output: '1,000, 2,000, 3,000' (depends on locale)

Explanation: The toLocaleString() method converts each element of the array into a localized string representation, considering the locale-specific formatting.

every()

  • Description: Returns true if all elements in the array satisfy the provided testing function.
  • Example:
				
					let numbers = [2, 4, 6, 8, 10];
let allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // Output: true

Explanation: The every() method checks if all elements in the numbers array satisfy the condition (whether they are all even numbers, in this case).

some()

  • Description: Returns true if at least one element in the array satisfies the provided testing function.
  • Example:
				
					let numbers = [1, 3, 5, 7, 10];
let hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // Output: true

Explanation: The some() method checks if at least one element in the numbers array satisfies the condition (whether there is at least one even number, in this case).

isArray()

  • Description: Returns true if the given value is an array; otherwise, returns false.
  • Example:
				
					let fruits = ['apple', 'banana', 'orange'];
let isArray = Array.isArray(fruits);
console.log(isArray); // Output: true

Explanation: The isArray() function checks if the given value (fruits in this case) is an array and returns true if it is, otherwise false.

In summary, JavaScript provides a rich set of array methods catering to various needs, including manipulation, iteration, searching, and sorting. These methods offer flexibility and efficiency when working with arrays, empowering developers to perform diverse operations seamlessly. By leveraging these methods, developers can write concise and expressive code for handling array data, enhancing productivity and code readability. Whether it's adding or removing elements, transforming data, or searching for specific values, JavaScript array methods offer comprehensive solutions for managing array operations efficiently. Understanding and mastering these methods are essential for proficient JavaScript development, enabling developers to build robust and scalable applications with ease. Happy coding !❤️

Table of Contents

Popular Tutorials

Contact here

Copyright © 2025 Diginode

Made with ❤️ in India

Home
Roadmap
ATS Resume
Playground
Resources