Rama Chandra's Blog

Function's and Callback

Rama Chandra's photo
Rama Chandra
·

3 min read

Function : It is a block of code, stored inside the cruel brackets. It should take some input and return an output where there is some obvious relationship between the input and the output.

function functionName(parameters) { 
    // Function body 
}
functionName(arguments)

Different types of functions:

Function with arguments : It is take the input in function to perform the operation.

function functionName(parameters) { 
    // Function body 
console.log(parameters)
//printing statement   
}
functionName(arguments)

Function with return type : Is is take the take the and return the output.function

functionName(parameters) { 
    // Function body  
return parameters
// return statement 
}
functionName(arguments)

Anonymous Functions : They are typically assigned to a variable or passed as an argument to other functions.

let  add = function(a, b) {
    return a + b;
};

Arrow functions : Arrow functions differ from traditional functions in a number of ways, including the way their scope is determined and how their syntax is expressed.// Basic syntax

// Basic syntax
const functionName = (parameters) => {
    // Function body
return parameters 
};

// In the arrow function return type implicit
const add = (a, b) => a + b;

Higher-Order Functions : The function which allows the another function as a parameter

function operate(operator, a, b) {
    return operator(a, b);
}
operate(add, 2, 3); // Returns 5

Callback : A callback is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

There are two ways in which the callback may be called: synchronous and asynchronous. synchronous callbacks are called immediately after the invocation of the outer function, with no intervening asynchronous tasks, while asynchronous callbacks are called at some point later, after an asynchronous operation has completed.

function addition(value1, value2, cb){
let add =  value1 + value2
    cb(add)
}
function display(data){
  console.log(" addition of the two numbers : "+data)
}
addition(8, 5, display)

// by using String 
function reverse(str, callback) {
    // Reverse the string
    const reversedStr = str.split('').reverse().join('');
    callback(reversedStr);
}
function result(result) {
    console.log('Result:', result);
}
reverse("Mountblue", result)

// synchronous callback 
// by using Array
function processArray(arr, callback) {
    for (let i = 0; i < arr.length; i++) {
        callback(arr[i]);
    }
}
const numbers = [1, 2, 3, 4, 5];
// Passing an anonymous function as a callback
processArray(numbers, function(num) {
    console.log(num * num);
});

// Asynchronous callback
    let greetings = setTimeout(function() {
        console.log('Hello, Good Morning);
    }, 2000);
console.log(greetings);

const cricketPlayer = {
    name: 'Sachin Tendulkar',
    country: 'India',
    age: 48,
    totalRuns: 18426,
    centuries: 100,
    retired: true
};

//  by using Object 
function getValues( obj, callback){
  for(const value in obj){
        let value1 = obj[value]
        callback(value1)
      }
}
function resultObj(result) {
    console.log('Result:', result);
}
getValues(cricketplayer, resultObj)

Callback Hell : It is nothing but a nested callbacks. Here, each and every callback takes an argument that is a result of the previous callbacks.

In this callback hell drawbacks are there :

  1. The code structure looks like a pyramid, making it difficult to read and maintain.

  2. there is an error in one function, then all other functions get affected. 

     function operation1(callback) {
     const result = 'Operation 1';
     callback(result);
 }
 function operation2(input, callback) {
     const result = input + ' -> Operation 2';
     callback(result);
 }
 function CallbackHell() {
     console.log('Starting  callback hell');
     operation1(function(result1) {
         console.log(result1);
         operation2(result1, function(result2) {
             console.log(result2);
             console.log('callback hell completed');
         });
     });
 }
 // Call the synchronous callback hell
 synchronouCallbackHell();
JavaScript