Javascript Array methods you must know

Every developer use arrays for certain task and JS provide some helpful methods to make developers life easier.

Remove an element from array

pop()

Remove the last element of the array and return the removed element

    
var fruits = ['🍅','🍇','🍐','🍒'];

console.log(fruits.pop()) // ['🍅','🍇','🍐']
    
shift()

Remove the first element of the array and return the removed element

    
var fruits = ['🍅','🍇','🍐','🍒'];

console.log(fruits.shift()) // ['🍇','🍐','🍒']
    
splice()

Remove the element from the array based on the index. in the first parameter you can specify the starting index and in the second parameter you can specify how many element need to remove

    
var fruits = ['🍅','🍇','🍐','🍒'];

console.log(fruits.splice(0,1)) //['🍇','🍐','🍒']
    

Add element to an array

push()

Add an element to end of the array and return the length of the array.

    
var fruits = ['🍅','🍇','🍐','🍒'];

console.log(fruits.push('🍑')) // ['🍅','🍇','🍐','🍒','🍑']
    
unshift()

Add an element to start of the array and return the length

    
var fruits = ['🍅','🍇','🍐','🍒'];

console.log(fruits.unshift('🍌')) //['🍌','🍅','🍇','🍐','🍒']
    

Combine two arrays

concat() method will combine one array to another. It will combine to end of the first array

    
var fruits = ['🍅','🍇','🍐','🍒'];
var emojis = ['😊','😍','😇','🥺'];

console.log(fruits.concat(emojis)) //[ '🍅', '🍇', '🍐', '🍒', '😊', '😍', '😇', '🥺' ]
    

Reverse an array

Reverse the order of the array element

    
var fruits = ['🍅','🍇','🍐','🍒'];

console.log(fruits.reverse()) //[ '🍒', '🍐', '🍇', '🍅' ]
    

Filter element in array

filter() method will filter the element of the array and return the new array. Filter can use to remove the unwanted elements from the array

    
var fruits = ['🍅','🍇','🍐','🍒'];

console.log(fruits.filter(fruit => fruit != "🍅")) //['🍇','🍐','🍒']
    

Map function in array

Use to call every element in the array and return a new array. You can use the map in scenarios like multiplying every element in the array, create a map from array etc.

    
var fruits = ['🍅','🍇','🍐','🍒'];
var emojis = ['😊','😍','😇','🥺'];

console.log(fruits.map(function(val,index){
    return val + emojis[index];
})) //[ '🍅😊', '🍇😍', '🍐😇', '🍒🥺' ]
    

Different between filter and Map

Filter and map have a common thing like return a new array. But map returns a new array with applying some changes and this will change the original element. But filter not change the original values. Because filter will return the element if the check is passed.

 

The filter can use to remove unnecessary items from the array. Map can use to convert the array to a different format(return JSON array) or alter the element.

Fill function in array

Fill change all the element in the array to a static value. When specify fill we can say which number need to fill and start and end index. Start and end values are optional. If you didn’t specify the start and end it will replace all values.

    
var fruits = ['🍅','🍇','🍐','🍒'];
var emojis = ['😊','😍','😇','🥺'];

console.log(fruits.fill('🍉',0,2))   //[ '🍉', '🍉', '🍐', '🍒' ]
console.log(fruits.fill('🍉'))       //[ '🍉', '🍉', '🍉', '🍉' ]
console.log(fruits.fill('🍉',1))     //[ '🍅', '🍉', '🍉', '🍉' ]
    

Find an element in array

find()

find method will return the element when the condition is true. If the array contain multiple element which trigger the condition true, it will return on the first element

findIndex()

Same as find method but return the index instead of the element.

    
var fruits = ['🍅','🍇','🍐','🍒'];

console.log(fruits.find(fruit => fruit =='🍅')) //🍅
console.log(fruits.findIndex(fruit => fruit =='🍇')) //1
    
You Will Like Also
x