Hello Everyone, hope you all are doing well, Today in this Article we will learn about Array Methods in JavaScript, so before diving in, Let's understand what is an Array.

What is an Array

• An array is a data structure in JavaScript that is used to store a collection of values.

• The collection of variables can be a String, Number, or a combination of both, YES combination of Both, JavaScript allows you to declare an array like this

  const names = ['Ankush', 'Vinay', 'Yash', 1, 2, 3];
  

• Arrays are ordered, meaning that each element in the array has a specific position, or index, starting from 0.

  • so the first element is at index 0, the second element is at index 1, the third element is at index 2, and so on.

  • I hope, till now must have understood what is an Array, now let's deep dive into it

How we can Declare an Array

• Using Literals - It is the easiest and simple way to declare an array using [].It is the MOST RECOMMENDED METHOD / USED METHOD to declare an array

• Using NEW Keyword : This approach is not RECOMMENDED in Industry, as most of the developers prefer to use square brackets [] not new Array

• Using Arrayof Method: This is an inbuilt method of JavaScript

  // using Literal
  const names = ['Ankush', 'Vinay', 'Yash', 1, 2, 3];
  
  // New Keyword
  const names = new Array('Ankush', 'Vinay', 'yash');
  
  // Using Arrayof() Method
  const names = Array.of('Ankush', 'Vinay', 'yash');
  

Method of Array

Length

• Length is used to find the number of elements in that array

  // Length
  const names = ['Ankush', 'Vinay', 'Yash', 1, 2, 3];
  console.log(names.length); // OUTPUT 6
  

  • The length property is useful for determining the size of an array,

  • KEY POINT IS: The length of an Array is 6

    • as it starts from 1.

    • but the index will be 5 as the index starts from

    • How to access the Element of an Array

  • We can easily access the elements of an array with the help of index Number

    const names = ['Ankush', 'Vinay', 'Yash', 1, 2, 3];
    console.log(names[0]); // Ankush
    console.log(names[1]); // Vinay
    console.log(names[2]); // Yash
    

How to Modify the Element in an Array

• Modifying the element in an Array is also super easy with help of indexes

  const names = ['Ankush', 'Vinay', 'Yash', 1, 2, 3];
  
  names[0] = 'Thakur';
  
  console.log(names); // OUTPUT: [ 'Thakur', 'Vinay', 'Yash', 1, 2, 3 ]
  

• Ankush is replaced by Thakur

Insert an element at the END - PUSH

• Inserting an element at the end of an Array is super easy. we can easily do it with the help of Push method

• the push() method is a function that adds one or more elements to the end of an array and returns the new length of the array.

  const names = ['Ankush', 'Vinay', 'Yash']; 
  
  console.log(names.push('Rahul')); // 4 
  
  console.log(names); // [ 'Ankush', 'Vinay', 'Yash', 'Rahul' ]
  

• you can also add multiple elements

  const names = ['Ankush', 'Vinay', 'Yash']; 
  
  names.push('Rahul', 'Vikas', 'Vipul', 'Vannet'); 
  
  console.log(names); 
  
  // Output: [ 'Ankush', 'Vinay', 'Yash', 'Rahul', 'Vikas','Vipul', 'Vannet' ]
  

Deleting an element at the END - POP

• Deleting an element in an Array is also super easy. we can easily do it with the help of pop method

• The pop() method is a function that is used to remove the last element from an array and return that element.

  const names = ['Ankush', 'Vinay', 'Yash', 'Rahul', 'Vikas']; 
  console.log(names.pop()); // Vikas 
  
  console.log(names); // [ 'Ankush', 'Vinay', 'Yash', 'Rahul' ]
  

Inserting an element at the beginning - unshift

• Inserting an element at the Beginning is super easy. we can easily do it with the help of unshift() method

• The unshift() a method is a function that is used to add one or more elements to the beginning of an array. unshift() methods return the new length of the array.

  const names = ['Ankush', 'Vinay', 'Yash', 'Rahul', 'Vikas']; 
  console.log(names.unshift('Diksha')); // 6 
  
  console.log(names); // OUTPUT: [ 'Diksha', 'Ankush', 'Vinay', 'Yash', 'Rahul', 'Vikas' ]
  

Deleting an element at the beginning - shift

• Deleting an element at the Beginning is super easy. we can easily do it with the help of shift() method

• the shift() method is a function that is used to remove the first element from an array and return that element

  const names = ['Ankush', 'Vinay', 'Yash', 'Rahul', 'Vikas']; 
  
  console.log(names.shift()); // Ankush 
  
  console.log(names); // [ 'Vinay', 'Yash', 'Rahul', 'Vikas' ]
  

SLICE

• slice is a Method in JavaScript which is used to extract the value.

• slice simply means take out that portion, for better understanding, let's take an example of CAKE: we cut a slice and take it out

• slice() method takes 2 parameters. Both the parameters are index Numbers

  const names = ['Ankush', 'Vinay', 'Yash', 'Rahul', 'Vikas']; 
  // index          0         1        2       3        4  
  console.log(names.slice(1, 3)); // [ 'Vinay', 'Yash']
  

• Here slice will take out the value from index:1 to index:3 . Then why rahul did not come as output?

• IMP PT: The value of index: 3 will not be included as the second parameter is excluded. so it will print Vinay and Yash.

SPLICE

• The splice() is a method in JavaScript that is used to modify an array by adding or removing elements.

• splice() method takes 2 arguments, both are index numbers

• 1st argument Says - from where I have to start injecting the elements

• 2nd argument Says - how many elements I need to delete

  const names = ['Ankush', 'Vinay', 'Yash', 'Rahul', 'Vikas'];
  names.splice(1, 0, 'Diksha'); // it will add Diksha at index:1
  console.log(names); // [ 'Ankush', 'Diksha', 'Vinay', 'Yash', 'Rahul', 'Vikas' ]
  

  • In the Second Argument, we have passed 0, which means do not delete

    const names = ['Ankush', 'Vinay', 'Yash', 'Rahul', 'Vikas'];
    names.splice(1, 2, 'Diksha', 'Thakur'); 
    // Add Diksha and Thakur,two elements will be deleted
    
    console.log(names); 
    // [ 'Ankush', 'Diksha', 'Thakur',  'Rahul', 'Vikas' ]
    

• Now, this time we have passed names.splice(1, 2, 'Diksha', 'Thakur')

• Diksha and Thakur will be added, at index 1 and 2

  • Array will look like: [Ankush, Diksha, Thakur, Vinay, Yash, Rahul, Vikas]

    • Now, in the second Parameter, we have mentioned 2, so it will delete the next 2 elements after the addition (i.e Vinay and Yash)

• For Better understanding, have a look at the image

Concatenation:

• It refers to joining two or more arrays or strings together.

  const arr1 = [1, 2, 3];
  const arr2 = [4, 5, 6];
  const arr3 = [7, 8, 9];
  console.log(arr1.concat(arr2)); // [ 1, 2, 3, 4, 5, 6 ]
  console.log(arr1.concat(arr2, arr3)); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
  

Fill

• It is used to fill all the elements of an array with a static value.

• It takes 3 Arguments

  • 1st - value to fill the array

  • 2nd - The start index (optional)

  • 3rd - The end index (optional).

• If no start index is provided, the fill() method will start at the first element of the array. If no end index is provided, the fill() method will fill the entire array.

  const arr = [1, 2, 3, 4, 5];
  arr.fill(0); // [0, 0, 0, 0, 0]
  
  const arr2 = [1, 2, 3, 4, 5];
  arr2.fill(0, 2); // [1, 2, 0, 0, 0]
  
  const arr3 = [1, 2, 3, 4, 5];
  arr3.fill(0, 2, 4); // [1, 2, 0, 0, 5]
  

Include

• This method is used to find whether that element exists in the array or not

• If there is a repetition of values, then it will count the 1st value

  const names = ['Ankush', 'Vinay', 'Yash', 'Rahul', 'Vikas'];
  console.log(names.includes('Thakur')); // false
  console.log(names.includes('Yash')); // true
  

Index of

• It is the same as Include, used to find whether the element exits in the array or not.

• If NOT, then it returns -1, if yes then it returns the index of the element

  const names = ['Ankush', 'Vinay', 'Yash', 'Rahul', 'Vikas'];
  console.log(names.indexOf('Thakur')); // -1
  console.log(names.indexOf('Yash')); // 2
  

JOIN

• It is used to join all elements of an array into a string

• The join() method takes one argument: a string that is used to separate the elements of the array. If no argument is provided, the elements of the array are separated by a comma (,).

  const arr = [1, 2, 3, 4, 5];
  console.log(arr.join()); // '1,2,3,4,5'
  
  const arr2 = ['a', 'b', 'c', 'd', 'e'];
  console.log(arr2.join('-')); // 'a-b-c-d-e'
  

MAPS

• Map is used to apply operations on ALL THE ELEMENTS

  const arr = [1, 4, 9, 16, 25];
  console.log(arr.map(Math.sqrt)); // [ 1, 2, 3, 4, 5 ]
  

REVERSE

• Reverse is used to reverse the elements in an array

  const arr = [1, 4, 9, 16, 25];
  console.log(arr.reverse()); // [ 25, 16, 9, 4, 1 ]
  

SORT

• It is used to SORT the array

• By default, it will sort the array in ascending order

  const names = ['Ankush', 'Vinay', 'Yash', 'Rahul', 'Vikas'];
  console.log(names.sort()); 
  // [ 'Ankush', 'Rahul', 'Vikas', 'Vinay', 'Yash' ]
  

Thanks, for reading the Article, Please give your valuable Feedback