In JavaScript, arrays are a fundamental part of the language, providing a way to store and manipulate collections of data. There are many built-in methods for performing various operations on arrays. Here’s a comprehensive overview of some of the most commonly used array methods:

Operation in javascript Array

1. Array Creation

  • Array(): Creates a new array.
  let arr = new Array(10); // Creates an array with 10 empty slots
  let arr2 = Array.of(1, 2, 3); // Creates an array with elements 1, 2, 3
  let arr3 = Array.from('hello'); // Creates an array from an iterable

2. Adding and Removing Elements

  • push(): Adds one or more elements to the end of an array and returns the new length of the array.
  let fruits = ['apple', 'banana'];
  fruits.push('cherry'); // ['apple', 'banana', 'cherry']
  • pop(): Removes the last element from an array and returns that element.
  let fruits = ['apple', 'banana', 'cherry'];
  let last = fruits.pop(); // 'cherry'; fruits: ['apple', 'banana']
  • shift(): Removes the first element from an array and returns that element.
  let fruits = ['apple', 'banana', 'cherry'];
  let first = fruits.shift(); // 'apple'; fruits: ['banana', 'cherry']
  • unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.
  let fruits = ['banana', 'cherry'];
  fruits.unshift('apple'); // ['apple', 'banana', 'cherry']
  • splice(): Adds or removes elements from an array.
  let fruits = ['apple', 'banana', 'cherry'];
  fruits.splice(1, 1, 'kiwi'); // ['apple', 'kiwi', 'cherry']

3. Iterating and Transforming Arrays

  • forEach(): Executes a provided function once for each array element.
  let fruits = ['apple', 'banana', 'cherry'];
  fruits.forEach((fruit) => console.log(fruit));
  • map(): Creates a new array with the results of calling a provided function on every element in the calling array.
  let numbers = [1, 2, 3];
  let doubled = numbers.map(num => num * 2); // [2, 4, 6]
  • filter(): Creates a new array with all elements that pass the test implemented by the provided function.
  let numbers = [1, 2, 3, 4];
  let even = numbers.filter(num => num % 2 === 0); // [2, 4]
  • reduce(): Executes a reducer function on each element of the array, resulting in a single output value.
  let numbers = [1, 2, 3, 4];
  let sum = numbers.reduce((acc, num) => acc + num, 0); // 10
  • reduceRight(): Applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.
  let numbers = [1, 2, 3, 4];
  let sum = numbers.reduceRight((acc, num) => acc + num, 0); // 10

4. Searching and Sorting Arrays

  • find(): Returns the value of the first element in the array that satisfies the provided testing function.
  let numbers = [1, 2, 3, 4];
  let firstEven = numbers.find(num => num % 2 === 0); // 2
  • findIndex(): Returns the index of the first element in the array that satisfies the provided testing function.
  let numbers = [1, 2, 3, 4];
  let index = numbers.findIndex(num => num % 2 === 0); // 1
  • indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not present.
  let fruits = ['apple', 'banana', 'cherry'];
  let index = fruits.indexOf('banana'); // 1
  • lastIndexOf(): Returns the last index at which a given element can be found in the array, or -1 if it is not present.
  let numbers = [1, 2, 3, 1, 2, 3];
  let index = numbers.lastIndexOf(2); // 4
  • includes(): Determines whether an array includes a certain value among its entries, returning true or false.
  let fruits = ['apple', 'banana', 'cherry'];
  let hasBanana = fruits.includes('banana'); // true
  • sort(): Sorts the elements of an array in place and returns the array.
  let fruits = ['cherry', 'banana', 'apple'];
  fruits.sort(); // ['apple', 'banana', 'cherry']
  • reverse(): Reverses the order of the elements in an array in place and returns the array.
  let fruits = ['apple', 'banana', 'cherry'];
  fruits.reverse(); // ['cherry', 'banana', 'apple']

5. Other Useful Methods

  • concat(): Merges two or more arrays. This method does not change the existing arrays but instead returns a new array.
  let arr1 = [1, 2];
  let arr2 = [3, 4];
  let arr3 = arr1.concat(arr2); // [1, 2, 3, 4]
  • slice(): Returns a shallow copy of a portion of an array into a new array object.
  let fruits = ['apple', 'banana', 'cherry', 'date'];
  let citrus = fruits.slice(1, 3); // ['banana', 'cherry']
  • join(): Joins all elements of an array into a string.
  let fruits = ['apple', 'banana', 'cherry'];
  let str = fruits.join(', '); // 'apple, banana, cherry'
  • flat(): Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
  let arr = [1, [2, [3, [4]], 5]];
  let flatArr = arr.flat(2); // [1, 2, 3, [4], 5]
  • flatMap(): Maps each element using a mapping function, then flattens the result into a new array.
  let arr = [1, 2, 3];
  let flatMapped = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]
  • fill(): Fills all the elements of an array from a start index to an end index with a static value.
  let arr = [1, 2, 3, 4];
  arr.fill(0, 2, 4); // [1, 2, 0, 0]
  • copyWithin(): Shallow copies part of an array to another location in the same array and returns it, without modifying its length.
  let arr = [1, 2, 3, 4, 5];
  arr.copyWithin(0, 3); // [4, 5, 3, 4, 5]
  • toString(): Returns a string representing the specified array and its elements.
  let fruits = ['apple', 'banana', 'cherry'];
  let str = fruits.toString(); // 'apple,banana,cherry'

These methods allow for extensive manipulation and querying of arrays, making JavaScript arrays highly versatile and powerful for a wide range of programming tasks.

Share.

Terry White is a professional technical writer, WordPress developer, Web Designer, Software Engineer, and Blogger. He strives for pixel-perfect design, clean robust code, and a user-friendly interface. If you have a project in mind and like his work, feel free to contact him

Leave A Reply