How to manipulate arrays using array methods in JavaScript

An array is a data structure that stores a collection of values such as numbers, strings, objects, and other arrays.

The values in an array are organized linearly and can be accessed by their index, which is their numerical position on the array.

This article will closely examine some of the most commonly used array methods and their functions.

How to declare an array

In JavaScript, we create arrays using square brackets [ ], and these brackets can contain any number of elements separated by a comma.

For example:

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

We can access each element in the array using its indexes. In the above example, the first element in the numbers array is 1, which gives it an index of 0; the index of the second element is 1, and so on.

How to access individual elements in an array :

let numbers = [1,2,3,4,5]

console.log(numbers[0]); //output :1

console.log(numbers[1]);//output:2

Common JavaScript Array Methods

JavaScript provides a variety of built-in methods for array manipulation.

A method is a function associated with an object and can be called on that object. It encapsulates reusable codes that perform actions or tasks related to that object.

Here, you will find out about some important and commonly used array methods in JavaScript:

• Push() – this method allows the addition of one or more arguments to the end of an existing array.

    let fruits = ['mango'];
    //now you use the push() method to add fruits to your array.
    fruits.push('apple');
    fruits.push('grape');
    fruits.push('banana');
  
    console.log(fruits);//output: ['mango','apple','grape','banana']
  

• Pop() - this removes the last element in an array and returns it.

    let fruits = ['mango','apple','grape','banana']
  
    let removedElement = myArray.pop();
  
    console.log(myArray); //output:['mango','apple','grape']
  
    console.log(removedElement); //output['banana'];
  

• Shift() – removes the first element from an array and returns it.

    let myArray = [‘dan’,’dave’,’monica’];
  
    let removedElement = myArray.shift();
  
    console.log(myArray); //output : [‘dan’, ‘dave’, ‘monica’]
  
    console.log(removedArray); //output : [‘dave’, ‘monica’]
  

• Unshift() – adds one or more elements to the beginning of an array and returns the new array.

    let myArray = [‘dan’,’dave’,’monica’];
  
    myArray.unshift(‘mike’);
  
    console.log(myArray); // output: [‘mike’, ‘dan’, ‘dave’, ‘monica’]
  

• slice()- The method extracts a section of an array and returns it as a new array without modifying the original array. The slice() method takes two optional parameters: the start and end indexes.

  The start index is the index where the extraction starts. If the start index is not specified, slice() will start at index 0.

  The end index is the index where the extraction ends. The slice() method extracts up to the end index but does not include it in the new array.

  For example:

    let fruits =  ['apple','banana','orange','grape','kiwi'];
  
    let citrus = fruits.slice(2,4);
    console.log(fruits); //output: ['apple','banana','orange','grape','kiwi']
  
    console.log(citrus); // output: ['orange','grape']
  
    //let citrus = fruit.slice(2,4) 
    //here we start at index 2 (third argument) and end at position 4(fifth argument)
  

• Splice() – this method adds or removes elements from an array. The syntax of the splice method looks like this:

    array.splice(start, deleteCount, item1, item2, ...);
  

  The start argument is the index of the element from which the change begins. The start argument is compulsory.

  The deleteCount argument is the number of elements to remove from the array starting at the start index. The deleteCount argument is optional. If deleteCount is omitted, all elements from the start index to the end of the array will be removed.

  The item1 and item2 arguments are optional. They are the elements to add to the array starting at the start index. If no items are specified, the splice() method will only remove elements from the array.

  For example:

    let myArray = ['apple','banana','orange','grape','kiwi'];
  
    myArray.splice(2,1); // delete one element at index 2
  
    console.log(myArray); // output: ['apple','banana','grape','kiwi']
  
    myArray.splice(0, 2 , 'guava', 'pear'); // deletes 2 elements starting at index 0 and inserts guava and pear
  
    console.log(myArray); //output : ['guava','pear','orange','grape','kiwi']
  

• ForEach() – this method loops over the elements of an existing array and performs a task for each element. It takes a function as the argument with three parameters, the current element, the index, and the array itself.

    const numbers = [ 1,2,3,4,5];
  
    Numbers.forEach(function(number,index){
  
    console.log(number * 2);
  
    });
  
    //output : [2,4,6,8,10]
  

• Map() - The map() method creates a new array by calling a function on each element of an existing array. The function you provide as an argument to map() will be applied to each element of the array, and the result of each function call will be stored on a new array.

  for example;

    let numbers = [1,2,3,4];
  
    Let newArray = numbers.map(num => num * 2);
  
    console.log(newArray); //output : [2,4,6,8]
  

  Note, the forEach() and map() methods are similar, but the forEach method modifies the existing array and returns the modified values. In contrast, the map method creates a new array containing the modified values.

• Concat() - this combines one or more arrays into a new array without modifying the existing arrays but instead returns a new array with the element of the original arrays.

    let ary1 = [1,2,3,4];
  
    let arry2 = [5,6,7,8];
  
    let newArray = arry1.concat(arry2);
  
    console.log(newArray); // output = [1,2,3,4,5,6,7,8]
  

• IndexOf() – this searches an array to find a particular element and returns the index of the first occurrence of said element. If the element appears more than once, it returns the index of the first occurrence, and if the element doesn’t exist, it returns -1.

    let fruits = [ 'mango', 'orange', 'banana', 'apple' ];
  
    console.log(indexOf(‘banana’)); //output : [2]
  
    console.log(indexOf(‘pear’); // output:[-1].
  

Conclusion

In conclusion, these are just a few of JavaScript's most commonly used array methods. By mastering these methods, you write more efficient and effective JavaScript code for your web application.