JavaScript Array Methods: A Beginner's Guide

JavaScript Array Methods: A Beginner's Guide

·

3 min read

Table of contents

No heading

No headings in the article.

Arrays in javascript are the most commonly used data structure for manipulating and storing data. Arrays allow you to do a lot of things and make the life of a developer much easier. For beginners, here are some array methods to try :

  1. `push()`

    This method allows you to push an element to the end of an array. Here's an example of the push method:

     const arr = [1, 2, 3];
     arr.push(10);
    
     console.log(arr);   // [ 1, 2, 3, 10 ]
    
  2. `pop()`

    This method removes an element from the end of an array. Here is an example of the pop method.

     const arr = [1, 2, 3];
     arr.pop();
    
     console.log(arr); // [ 1, 2 ]
    
  3. `shift()`

    The pop method removes an item from the end of an array. However, the shift method removes the item from the beginning of the array.

     const arr = [1, 2, 3];
     arr.shift();
    
     console.log(arr);  // [ 2, 3 ]
    
  4. `unshift()`

    The unshift method is used for adding items in the same way that the push method is. However, it places the item at the beginning of the array.

     const arr = [1, 2, 3];
     arr.unshift(0);
    
     console.log(arr); // [ 0, 1, 2, 3 ]
    
  5. `slice()`

    Unlike the previous four methods, it returns a new array. The syntax is :

     arr.slice(start, end)
    

    It returns an array from the start index item to the end index item. Please keep in mind that it does not return the end index item. For instance :

     const arr = [1, 2, 3, 4, 5];
     const newArr = arr.slice(0, 2);
    
     console.log(newArr); // [ 1, 2 ]
    

    If you do not add the end index. It will take all items from the first index.

     const arr = [1, 2, 3, 4, 5];
     const newArr = arr.slice(2);
    
     console.log(newArr); // [ 3, 4, 5 ]
    

    You can also use negative index values. For instance :

     const arr = [1, 2, 3, 4, 5];
     const newArr = arr.slice(-1);  // It will return the last index value
    
     console.log(newArr); // [ 5 ]
    
  6. `splice()`

    This method does not return a new array. It modifies the original array. Here's a syntax :

     arr.splice(start, delete, [item1, item2, ..., itemN])
    

    This method is a little confusing. So let's look at an example. This is a simple example of deleting values.

     let arr = ["HTML", "CSS", "JavaScript", "React"];
     arr.splice(1, 2); // from index 1 remove 2 elements
    
     console.log(arr); // [ 'HTML', 'React' ]
    

    Let's take a more complex example :

     let arr = ["HTML", "CSS", "JavaScript", "React"];
     arr.splice(1, 2, "PHP", "C++"); 
     // from index 1 remove 2 elements and add "PHP", "C++" instead of them
    
     console.log(arr); // [ 'HTML', 'PHP', 'C++', 'React' ]
    

    There are still many methods available. I'll post them soon.