Array callback methods in JavaScript

Array callback methods in JavaScript


3 min read

Array callback methods

  • Arrays come with many built-in methods that accept callback functions.
  • For Each

    accepts a callback function. Calls the function once per element in the array.

    const num = [1,2,3,4,5,6];
    num.forEach(function(n){ // n parameter represents one element at a time

    We can also add a second parameter to our callback to the function here if we want to use the index.


    Map Method

    creates a new array with the results of calling a callback on every element in the array

    const texts = ['fer','rrer','rer','erre'];
    const caps ={
        return t.toUpperCase();

    Arrow Functions

    Syntactically compact alternative to a regular function expression.

    const square = (x)=>{
        return x*x;

    Implicit return

    all these functions do the same thing:

    const isEven = function(num){
        return num%2===0;
    const isEven = (num)=>{
        return num%2===0;
    const isEven = num =>{
        return num%2===0;
    const isEven = num =>{ // implicit return
    const isEven = num=> num%2===0;// one-liner implicit return

    Find method

    returns the value of the first element in the array that satisfies the provided testing function.

    let shoppingList = [
    let item = shoppingList.find(item=>{
        return item.includes("Milk");

    Filter method

    creates a new array with all elements that pass the test implemented by the provided function.

    const numbers = [12,334,542,3,34,54,5,45,3,4,523,6,3]
    const evens = numbers.filter(n=>{
        return n%2===0;

    Every and Some method


    tests whether all elements in the array pass the provided function It returns a boolean value.

    const words = ['dog','dog','dig','dag','bag'];
        return word.length === 3;
    }) // true

    Some -

    Similar to every, but returns true if any of the array elements pass the test function.

        return word.length >4;



  • If compareFunc(a,b) returns less than 0 -> Sort a before b
  • If compareFunc(a,b) returns 0 -> leave a and b unchanged with respect to each other
  • If compareFunc(a,b) returns greater than 0 -> Sort b before a
  • const prices = [122,4542,453,5248,78709,3435];
    prices.sort(); // it's weird converts into strings then sort
    prices.sort((a,b)=> a-b);

    Reduce Method

    executes a reducer function on each element of the array, resulting in a single value.

    Summing an array

    const arr = [3,5,7,9,11];
    arr.reduce((accumulator, currentValue)=>{
        return accumulator+currentValue;
    Callback Accumulator Currentvalue return value
    first call 3 5 8
    second call 8 7 15
    third call 15 9 24
    fourth call 24 11 35

    it's not always about summing or multiplying or accumulating data in one number. It could be finding the maximum value in an entire array.

    Initial value

    when you use reduce you can actually pass in an initial starting value. So after your callback the format would be something dot reduce.

        return acc+curr;


    we can tally up results from an array we can group different values in an array using an object.

    const vote = ['y','y','n','y','y','y','n']
    const tally = vote.reduce((tally, vote)=>{
        tally[vote] = (tally[vote] || 0)+1
        return tally;
    // {}- initial object

    Did you find this article valuable?

    Support KubeKode Blogs by becoming a sponsor. Any amount is appreciated!