DEV Community

Nanthini Ammu
Nanthini Ammu

Posted on • Edited on

Callback Function and Array Iteration methods -1 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

flatMap() :

  • flatMap = map() + flat(1)
  • It Transforms each element like map().
  • Then flattens the result by one level

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

const numbersarr = [9,3,7,1,2]
console.log("This is Map")
console.log(numbersarr.map((a)=> [a,a*2]))
console.log("This is flatMap")
console.log(numbersarr.flatMap((a)=> [a,a*2]))
Enter fullscreen mode Exit fullscreen mode

Output :


const numbersarr = [9,2,4,3,28]
console.log("when map is used")
console.log(numbersarr.map(a=> a%2===0 ? a*2 : [])) 
console.log("when flatMap is used")
console.log(numbersarr.flatMap(a=> a%2===0 ? a*2 : [])) 
Enter fullscreen mode Exit fullscreen mode

Output :

filter() :

  • It is used to select elements from an array based on a condition.
  • It returns a new array with only the elements that pass the condition.

array.filter((element, index, array) => condition)

const numbersarr = [9,2,4,3,28]
console.log(numbersarr.filter(a=> a%2===0))

Output : [2, 4, 28]
Enter fullscreen mode Exit fullscreen mode
const numbersarr = [9,2,4,3,28]
const newnumber = numbersarr.filter((value,index)=> 
    {return value>5}
)

console.log(newnumber);

Output : [9,28]
Enter fullscreen mode Exit fullscreen mode
const user = [
    {name : "Varun", age : 6},
    {name : "Tharun", age : 16},
    {name : "Arun", age : 25}

]
const adult = user.filter(a=> a.age>=25)
console.log(adult);

Output : [{name : "Arun", age : 25}]

Enter fullscreen mode Exit fullscreen mode

Top comments (0)