DEV Community

Nanthini Ammu
Nanthini Ammu

Posted on

Callback Function and Array Iterations in JS

What is Callback function?

  • A callback function is a function that is passed as an argument to another function.
  • And is executed later.
function greet(name, callback) {
  console.log("Hello " + name);
  callback(); // calling the callback
}

function sayBye() {
  console.log("Bye!");
}

greet("Varun", sayBye);

Output :
Hello Varun
Bye!
Enter fullscreen mode Exit fullscreen mode

Why Callback function ?

  • To handle asynchronous operations, ensuring code execution continues without blocking the program while waiting for a task—like API requests, file reading, or user input—to complete.
console.log("Hi");
setTimeout(()=> console.log("Hello"),2000);
Enter fullscreen mode Exit fullscreen mode

forEach() :

  • It is an array method used to iterate through each element.
  • It executes a function once for every element.
  • Cannot use break or continue.
  • Does not return anything(undefined).

array.forEach(callback(element, index, array))

element : current index value.
index : current index.
array : original array.

const fruits = ["apple","orange","banana","papaya","pomegranate"];
fruits.forEach(function(a,b,c){
    document.write("Iteration :"+ b)
    document.write("<br>");
    document.write(" Value : "+a+" , ");
    document.write(" Index : "+b+" , ");
    document.write(" Array : "+c)
    document.write("<br>");
    document.write("<br>");
})

Output : 
Iteration :0
Value : apple , Index : 0 , Array : apple,orange,banana,papaya,pomegranate

Iteration :1
Value : orange , Index : 1 , Array : apple,orange,banana,papaya,pomegranate

Iteration :2
Value : banana , Index : 2 , Array : apple,orange,banana,papaya,pomegranate

Iteration :3
Value : papaya , Index : 3 , Array : apple,orange,banana,papaya,pomegranate

Iteration :4
Value : pomegranate , Index : 4 , Array : apple,orange,banana,papaya,pomegranate

//same program with arrow function as argument

const fruits = ["apple","orange","banana","papaya","pomegranate"];
fruits.forEach((a,b,c)=>{
    document.write("Iteration :"+ b)
    document.write("<br>");
    document.write(" Value : "+a+" , ");
    document.write(" Index : "+b+" , ");
    document.write(" Array : "+c)
    document.write("<br>");
    document.write("<br>");
})


//same program with function expression as argument

const fruits = ["apple","orange","banana","papaya","pomegranate"];
fruits.forEach(function(a,b,c){
    document.write("Iteration :"+ b)
    document.write("<br>");
    document.write(" Value : "+a+" , ");
    document.write(" Index : "+b+" , ");
    document.write(" Array : "+c)
    document.write("<br>");
    document.write("<br>");
})


Enter fullscreen mode Exit fullscreen mode
const numbersarr = [1,3,5,8,9]
let value = 0;
numbersarr.forEach((a)=>value+=a);
document.write(value);

Output : 26
Enter fullscreen mode Exit fullscreen mode
const numbersarr = [1,3,5,8,9]
let value = 0;
numbersarr.forEach((a)=>{
    if (a == 3)
    return //to skip this iteration
    value+=a
});
document.write(value);

Output : 23
Enter fullscreen mode Exit fullscreen mode

map():

  • It is used to transform each element of an array. It returns a new array with modified values. It does not modify the original array; it creates a new one.

array.map(callback(element, index, array))

const numbersarr = [1,3,5,8,9]
let result = numbersarr.map(a=> a*5)
document.write(numbersarr);
document.write("<br>");
document.write(result);

Output : 
1,3,5,8,9
5,15,25,40,45

Enter fullscreen mode Exit fullscreen mode

Top comments (0)