Arrays and its methods

What is array ?

Let's assume you have a number of mechanic tools spread all around your room. To overcome this problem, you bring a tool kit and store all the tools in one box. Similarly, in a programming language, when we have a lot of data to store in one place, we use an array to store the data.

In JavaScript, arrays are non-primitive types, meaning they can have properties and methods assigned or modified by users.

How do we assign an array in JavaScript?

Mostly, we use two ways to assign arrays—

1. Using Array Literal:

    let arr = [1, 2, 3, 4];
    Consloe.log(arr)// 1,2,3,4
    Console.log(arr.length) // 4
   

2. Using Array Constructor:

    let arr = [1, 2, 3, 4];
    Consloe.log(arr) // 1,2,3,4
    Console.log(arr.length) // 4 length gives the size of array
   

   Array Methods or Prototype:

   Array method is simply when we use some built-in function to perform an operation on an array to modify it according to our requirements. Now, one by one, we will understand different kinds of array methods with practical examples.

   First, let's take an example. Consider a very simple example for better understanding: imagine we have an array of natural numbers from 0 to 20. Now, let's construct our array.

    let arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
    Consloe.log(arr.length) // 20
   

   1. But wait we assume we have number from 0-20 but 0 is not in the array so here we use unshift() method.

      Unshift( ) method : It is used to add the element at the very first index of the array.

       let arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
       Consloe.log(arr) // [1,2,3,4,...,19,20]
       arr.Unshift(0)
       console.log(arr); // Output:[ 0, 1, 2, 3, ... ,19,20]
      

      2. Now assume we do not want zero in our array, then we use the shift() method. It helps to remove the element at the first index.

          let arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
          Consloe.log(arr) // [1,2,3,4,...,19,20]
          arr.shift(0)
          Console.log(arr.length) // [1,2,3,4,5,6,7,8,9.....,19,20]
         

      3. Now, if you want to remove 20 from the array, you use the pop() method, which helps to remove the element from the last index of the array.

          let arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
          Consloe.log(arr) // [1,2,3,4,...,19,20]
          arr.pop()
          Console.log(arr.length) // [1,2,3,4,5,6 .... ,18,19]
         

         4. Now, if you want to again add 20 from the array, you use the push() method, which helps to add the element from the last index of the array.

             let arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19];
             Consloe.log(arr) // [1,2,3,4,...,19,20]
             arr.push()
             Console.log(arr.length) // [1,2,3,4,5,6 .... ,18,19,20]
            

5. If you want to multiply all the elements of the array by 3, we have the map() method, which iterates over each element of the array, multiplies it by 3, and then returns the array.

    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
   
    // Log the original array
    console.log(arr); // Output: 1, 2, 3, 4, ..., 19, 20
   
    // Use map to modify each element of the array
    let modifiedArr = arr.map(item => item * 3); // Multiplies each element by 3
   
    // Log the modified array
    console.log(modifiedArr); // Output: 3,6,9,12.... 57,60
   

6. If you want to just print the elements of the array then, we have the forEach() method, which iterates over each element of the array and then returns the array.

    let arr = [1,2,3,4,5];
    Consloe.log(arr) // [1,2,3,4,5]
    arr.forEach(function(item) {
        console.log(item);
    });
     // 1
     // 2
     // 3
     // 4
     // 5
   

7. If you want to find the index of any particular element in the array, then we have the indexOf() method, which simply checks if the element is present in the array and returns its index.

    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
    console.log(arr.indexOf(2));  // Output: 1 (index of 2)
   

8. If you have two arrays given and you want to combine both arrays into a single array, we use the concat() method, which helps merge the arrays into one.

    let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
    let arr2 = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ];
   
    const arr3 = arr1.concat(arr2);
    Console.log(arr3)
    // 1,2,3,4,5,6 ..... 18,19,20
   

9. The splice() method of Array instances changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

    let arr = [1, 4, 8, 2, 5, 3, 7, 9, 10, 6];
   
    // Log the original array
    console.log(arr); // Output: [1, 4, 8, 2, 5, 3, 7, 9, 10, 6]
   
    arr.splice(4, 1, 11);
    // Replaces 1 element at index 4
    console.log(months);
    // Output: [1, 4, 8, 2, 11, 3, 7, 9, 10, 6]