Array Methods in Javascript

In JavaScript, an array is a data structure that allows you to store multiple values in a single variable. It is a container that holds a fixed number of elements, which can be of any type such as numbers, strings, objects, or even other arrays. Arrays are widely used in JavaScript and provide various methods and properties for working with and manipulating the data they store.

To create an array in JavaScript, you can use the array literal syntax, which involves enclosing a comma-separated list of values within square brackets:

let myArray = [1, 2, 3, 4, 5];

Alternatively, you can use the Array constructor:

  let myArray = new Array(1, 2, 3, 4, 5);

Both approaches result in the creation of an array with the values [1, 2, 3, 4, 5].

Arrays in JavaScript are zero-indexed, meaning the first element is accessed using the index 0, the second element with the index 1, and so on. You can access individual elements of an array using square brackets and the corresponding index:

let myArray = [1, 2, 3, 4, 5];
console.log(myArray[0]);  // Output: 1
console.log(myArray[2]);  // Output: 3

You can also modify the value of an element by assigning a new value to its corresponding index:

let myArray = [1, 2, 3, 4, 5];
myArray[2] = 10;
console.log(myArray);  // Output: [1, 2, 10, 4, 5]

JavaScript arrays have a length property that returns the number of elements in the array:

let myArray = [1, 2, 3, 4, 5];
console.log(myArray.length);  // Output: 5

Arrays also provide numerous methods for performing operations such as adding or removing elements, iterating over the array, searching for specific values, sorting, and more. Some commonly used array methods include push(), pop(), splice(), concat(), slice(), forEach(), map(), filter(), find(), and sort().

Some commonly used array methods in JavaScript:

  1. push()
  2. Adds one or more elements to the end of an array and returns the new length of the array.

let myArray = [1, 2, 3];
let newLength = myArray.push(4, 5);  // Adds 4 and 5 to the end of the array
console.log(newLength);  // Output: 5 (new length of the array)
console.log(myArray);    // Output: [1, 2, 3, 4, 5] (updated array)
  1. pop()
  2. Removes the last element from an array and returns that element.

   let myArray = [1, 2, 3];
   let lastElement = myArray.pop();
   console.log(lastElement);  // Output: 3
   console.log(myArray);      // Output: [1, 2]
  1. shift()
  2. Removes the first element from an array and returns that element. It also updates the other elements’ indices.

   let myArray = [1, 2, 3];
   let firstElement = myArray.shift();
   console.log(firstElement);  // Output: 1
   console.log(myArray);       // Output: [2, 3]
  1. unshift()
  2. Adds one or more elements to the beginning of an array and returns the new length of the array. It also updates the other elements’ indices.

   let myArray = [2, 3];
   myArray.unshift(1);
   console.log(myArray);  // Output: [1, 2, 3]
let myArray = [3, 4, 5];
let newLength = myArray.unshift(1, 2);  // Adds 1 and 2 to the beginning of the array
console.log(newLength);  // Output: 5 (new length of the array)
console.log(myArray);    // Output: [1, 2, 3, 4, 5] (updated array)
  1. concat()
  2. Combines two or more arrays and returns a new array without modifying the original arrays.

   let array1 = [1, 2];
   let array2 = [3, 4];
   let newArray = array1.concat(array2);
   console.log(newArray);  // Output: [1, 2, 3, 4]
  1. slice()
  2. Returns a shallow copy of a portion of an array into a new array. It takes two optional parameters: start (inclusive) and end (exclusive).

   let myArray = [1, 2, 3, 4, 5];
   let slicedArray = myArray.slice(1, 4);//start at index 1(included) and end at index 4 (excluded)
   console.log(slicedArray);  // Output: [2, 3, 4]
  1. forEach()
  2. Executes a provided function once for each array element.

   let myArray = [1, 2, 3];
   myArray.forEach(function(element) {
     console.log(element);
   });
   // Output: 1 2 3
  1. map()
  2. Creates a new array by calling a provided function on each element of the original array.

   let myArray = [1, 2, 3];
   let mappedArray = myArray.map(function(element) {
     return element * 2;
   });
   console.log(mappedArray);  // Output: [2, 4, 6]
  1. filter()
  2. Creates a new array with all elements that pass a test implemented by the provided function.

   let myArray = [1, 2, 3, 4, 5];
   let filteredArray = myArray.filter(function(element) {
     return element > 2;
   });
   console.log(filteredArray);  // Output: [3, 4, 5]
  1. find()
  2. Returns the first element in an array that satisfies a provided testing function.

let myArray = [1, 2, 3, 4, 5]; 
let foundElement = myArray.find(function(element) { return element > 3; }); 
console.log(foundElement); // Output: 4
  1. findIndex()
  2. Returns the index of the first element in an array that satisfies a provided testing function.

   let myArray = [1, 2, 3, 4, 5];
   let foundIndex = myArray.findIndex(function(element) {
     return element > 3;
   });
   console.log(foundIndex);  // Output: 3 (index of element 4)
  1. includes()
  2. Checks if an array includes a specific element and returns true or false.

   let myArray = [1, 2, 3, 4, 5];
   let includesElement = myArray.includes(3);
   console.log(includesElement);  // Output: true
  1. indexOf()
  2. Returns the first index at which a given element can be found in an array, or -1 if it is not present.

   let myArray = [1, 2, 3, 4, 5];
   let elementIndex = myArray.indexOf(3);
   console.log(elementIndex);  // Output: 2
  1. join()
  2. Joins all elements of an array into a string, optionally using a specified separator.

   let myArray = [1, 2, 3];
   let joinedString = myArray.join('-');
   console.log(joinedString);  // Output: "1-2-3"
  1. reverse()
  2. Reverses the order of elements in an array. The first element becomes the last, and the last element becomes the first.

   let myArray = [1, 2, 3];
   myArray.reverse();
   console.log(myArray);  // Output: [3, 2, 1]
  1. sort()
  2. Sorts the elements of an array in place, either lexicographically (default) or based on a provided comparison function.

   let myArray = [3, 1, 2];
   myArray.sort();
   console.log(myArray);  // Output: [1, 2, 3]
  1. reduce()
  2. Applies a function to reduce the array to a single value by iterating over each element. Read more about reduce() array method.

   let myArray = [1, 2, 3, 4, 5];
   let sum = myArray.reduce(function(accumulator, currentValue) {
     return accumulator + currentValue;
   });
   console.log(sum);  // Output: 15
  1. some()
  2. Checks if at least one element in an array satisfies a provided testing function and returns true or false.

   let myArray = [1, 2, 3, 4, 5];
   let hasEvenNumber = myArray.some(function(element) {
     return element % 2 === 0;
   });
   console.log(hasEvenNumber);  // Output: true
  1. every()
  2. Checks if all elements in an array satisfy a provided testing function and returns true or false.

   let myArray = [2, 4, 6, 8, 10];
   let allEvenNumbers = myArray.every(function(element) {
     return element % 2 === 0;
   });
   console.log(allEvenNumbers);  // Output: true
  1. flat()
  2. Creates a new array that is flattened (depth-wise) by concatenating subarrays.

   let myArray = [1, [2, 3], [4, [5]]];
   let flattenedArray = myArray.flat();
   console.log(flattenedArray);  // Output: [1, 2, 3, 4, [5]]
  1. flatMap()
  2. Applies a mapping function to each element of an array and then flattens the result into a new array.

   let myArray = [1, 2, 3];
   let mappedArray = myArray.flatMap(function(element) {
     return [element * 2];
   });
   console.log(mappedArray);  // Output: [2, 4, 6]
  1. forEach()
  2. Executes a provided function once for each array element, similar to a for loop.

   let myArray = [1, 2, 3];
   myArray.forEach(function(element) {
     console.log(element);
   });
   // Output: 1 2 3
  1. reduceRight()
  2. Similar to reduce(), but works from right to left, reducing the array to a single value.

   let myArray = [1, 2, 3, 4, 5];
   let reducedValue = myArray.reduceRight(function(accumulator, currentValue) {
     return accumulator - currentValue;
   });
   console.log(reducedValue);  // Output: -13 (5 - (4 - (3 - (2 - 1))))
  1. fill()
  2. Changes all elements in an array to a static value within a specified start and end index.

   let myArray = [1, 2, 3, 4, 5];
   myArray.fill(0, 2, 4);
   console.log(myArray);  // Output: [1, 2, 0, 0, 5]
  1. toString()
  2. Converts an array to a string representation by joining its elements with commas.

   let myArray = [1, 2, 3];
   let arrayAsString = myArray.toString();
   console.log
(arrayAsString);  // Output: "1,2,3"

These are just a few examples of array methods available in JavaScript. There are many more methods and each has its specific purpose, allowing you to manipulate and work with arrays in various ways. Arrays are a powerful and fundamental data structure in the javascript. Arrays provide flexibility and functionality to work with collections of data efficiently.

Don't Miss Out! Subscribe to Read Our Latest Blogs.

If you found this blog helpful, share it on social media.

Subscription form (#5)

Pin It on Pinterest

Scroll to Top