JavaScript Callback Functions

Callback function అంటే మరొక function కు argument గా పంపించే function. ఆ function తన పని పూర్తయ్యాక callback function ను అవసరమైన సమయంలో execute చేస్తుంది.

Callback function ఎలా పనిచేస్తుంది?

మనం ఒక function ను తయారు చేస్తాము.
ఆ function ను మరొక function కు argument గా పంపిస్తాము.
మరొక function, అవసరమైన సమయంలో callback ను call చేస్తుంది.

Callback function ను సాధారణంగా asynchronous operations, events, timers మరియు array methods లో ఉపయోగిస్తారు.

సాధారణ ఉదాహరణ

processTask అనే function ఒక task ను స్వీకరించి, task పూర్తయ్యాక callback ను execute చేయవచ్చు. Callback ను function call సమయంలో parentheses లేకుండా పంపాలి. ఉదాహరణకు processTask(showMessage) సరైనది. processTask(showMessage()) అంటే function ను వెంటనే call చేయడం; ఇది callback ను పంపడం కాదు.

Array methods లో callbacks

forEach() array లోని ప్రతి item కోసం callback function ను ఒకసారి execute చేస్తుంది. map(), filter() వంటి methods కూడా callbacks ను ఉపయోగిస్తాయి.

Callback మరియు asynchronous code

setTimeout() వంటి browser లేదా JavaScript runtime functions కొంత సమయం తర్వాత callback ను execute చేస్తాయి. అందువల్ల callback లోని output వెంటనే కాకుండా delay తర్వాత కనిపిస్తుంది.

Simple Explanation

Callback function అంటే తర్వాత execute చేయడానికి పంపించిన function. ఒక function ను మరో function కు value లాగా పంపించి, అవసరమైన సమయంలో దాన్ని call చేయవచ్చు.

ఉదాహరణకు, restaurant లో order ఇచ్చిన తర్వాత food సిద్ధమైనప్పుడు మీకు తెలియజేయమని చెప్పడం callback లాంటిది. పని పూర్తయిన తర్వాత notification వస్తుంది.

Real-Life Example

మీరు online food order చేసినప్పుడు మొదట order submit చేస్తారు. Food సిద్ధమైన తర్వాత restaurant ఒక notification పంపుతుంది. ఇక్కడ notification పంపే పని, మొదటి పని పూర్తయిన తర్వాత అమలు అయ్యే callback లాంటిది.

JavaScript లో కూడా ఒక పని పూర్తయిన తర్వాత చేయాల్సిన పనిని callback function లో ఉంచవచ్చు.

Code Examples

ఒక function కు callback పంపడం

function greetUser(name, callback) {
  console.log("Hello, " + name);
  callback();
}

function showWelcome() {
  console.log("Welcome to JavaScript!");
}

greetUser("Ravi", showWelcome);

greetUser function రెండు parameters తీసుకుంటుంది: name మరియు callback. ముందుగా user కు greeting చూపించి, తర్వాత callback గా వచ్చిన showWelcome function ను execute చేస్తుంది.

showWelcome ను parentheses లేకుండా పంపడం వల్ల అది వెంటనే execute కాకుండా callback గా పంపబడుతుంది.

Hello, Ravi
Welcome to JavaScript!

forEach() లో callback function

const fruits = ["Apple", "Banana", "Mango"];

fruits.forEach(function (fruit) {
  console.log(fruit);
});

forEach() ప్రతి fruit కోసం callback function ను ఒకసారి execute చేస్తుంది. ప్రతి iteration లో ప్రస్తుత item fruit parameter లోకి వస్తుంది.

ఈ ఉదాహరణలో callback మూడు సార్లు execute అవుతుంది.

Apple
Banana
Mango

setTimeout() తో asynchronous callback

console.log("Task started");

setTimeout(function () {
  console.log("Task completed");
}, 1000);

console.log("Other work");

setTimeout() callback ను 1000 milliseconds, అంటే 1 second తర్వాత execute చేస్తుంది. అందువల్ల చివరి console.log ముందుగా execute అవుతుంది.

ఈ code browser console లేదా setTimeout support చేసే JavaScript environment లో run చేయవచ్చు. Output లో చివరి line సుమారు 1 second తర్వాత కనిపిస్తుంది.

Task started
Other work
Task completed (after about 1 second)

Line-by-Line Explanation

const fruits = [“Apple”, “Banana”, “Mango”];

మూడు fruit names ఉన్న array ను fruits అనే constant లో store చేస్తున్నాము.

ఈ ఖాళీ line code ను చదవడానికి సులభంగా చేయడానికి ఉపయోగించబడింది. దీనివల్ల program execution పై ఎలాంటి ప్రభావం ఉండదు.

fruits.forEach(function (fruit) {

forEach() method ను fruits array పై call చేస్తున్నాము. ప్రతి item కోసం execute అయ్యే anonymous callback function ను argument గా పంపుతున్నాము. ప్రస్తుత item fruit parameter లోకి వస్తుంది.

console.log(fruit);

ప్రతి iteration లో ప్రస్తుత fruit name console లో print అవుతుంది.

});

Callback function మరియు forEach() method ముగుస్తున్నాయని ఈ line సూచిస్తుంది.

Try It

Try this JavaScript code:

Example

function processNumber(number, callback) {
  console.log("Number: " + number);
  callback(number);
}

function showDouble(number) {
  // ఇక్కడ number యొక్క double value ను print చేయండి
}

processNumber(5, showDouble);

Try It Yourself »

Practice

Practice:

processNumber function కు callback గా showDouble పంపబడింది. showDouble function లో number యొక్క double value ను Double: 10 format లో print చేయండి.

Hint:

Callback కు వచ్చిన number ను 2 తో multiply చేసి console.log() లో print చేయండి. ఉదాహరణకు string concatenation ను ఉపయోగించవచ్చు.

Common Mistakes

Callback function ను పంపేటప్పుడు showWelcome() అని parentheses తో రాయడం.

Callback ను పంపేటప్పుడు సాధారణంగా showWelcome అని రాయాలి. Parentheses పెడితే function వెంటనే execute అవుతుంది.

Callback parameter ను call చేయకుండా వదిలేయడం.

Callback అవసరమైనప్పుడు execute కావడానికి function body లో callback() లేదా అవసరమైన argument తో callback(value) రాయాలి.

forEach() callback లో array మొత్తం వస్తుందని అనుకోవడం.

సాధారణంగా callback parameter లో ప్రతి iteration కు ఒక current item వస్తుంది. Array మొత్తం అవసరమైతే method documentation మరియు callback parameters ను సరిగ్గా పరిశీలించాలి.

setTimeout() లోని callback వెంటనే execute అవుతుందని అనుకోవడం.

setTimeout callback ఇచ్చిన delay తర్వాత execute అవుతుంది. అందువల్ల code లోని తరువాతి synchronous statements ముందుగా execute కావచ్చు.

Interview Questions

Callback function అంటే ఏమిటి?

Answer:

మరొక function కు argument గా పంపించి, ఆ function అవసరమైన సమయంలో execute చేసే function ను callback function అంటారు.

Callback ను parentheses లేకుండా ఎందుకు పంపుతాము?

Answer:

Parentheses లేకుండా function reference ను పంపుతాము కాబట్టి అది వెంటనే execute కాదు. Parentheses పెడితే function వెంటనే call అవుతుంది.

forEach() callback ను ఎలా ఉపయోగిస్తుంది?

Answer:

forEach() array లోని ప్రతి item కోసం callback function ను ఒకసారి execute చేస్తుంది. ప్రతి iteration లో current item callback కు argument గా వస్తుంది.

Callback functions synchronous మరియు asynchronous code లో ఉపయోగించవచ్చా?

Answer:

అవును. forEach() వంటి methods లో callback సాధారణంగా synchronous గా execute అవుతుంది. setTimeout() వంటి functions లో callback delay తర్వాత asynchronous గా execute అవుతుంది.

Exam Questions

క్రింది code output ఏమిటి? function run(callback) { callback(); } function show() { console.log(“Done”); } run(show);

Answer:

Output: Done. show function ను callback గా పంపి, run function లో callback() ద్వారా execute చేశారు.

క్రింది code లో callback function ఏది? numbers.forEach(function (number) { console.log(number); });

Answer:

function (number) { console.log(number); } అనేది forEach() కు పంపిన callback function.

setTimeout() లో callback function ఎప్పుడు execute అవుతుంది?

Answer:

ఇచ్చిన delay పూర్తైన తర్వాత callback execute అవుతుంది. ఉదాహరణకు 500 milliseconds ఇస్తే, సుమారు అర సెకను తర్వాత callback execute అవుతుంది.

Quick Revision

Callback function అనేది మరొక function కు argument గా పంపించే function.
Callback ను పంపేటప్పుడు సాధారణంగా function name ను parentheses లేకుండా ఉపయోగించాలి.
callback() రాసినప్పుడు callback function execute అవుతుంది.
forEach() array లోని ప్రతి item కోసం callback ను execute చేస్తుంది.
setTimeout() callback ను ఇచ్చిన delay తర్వాత execute చేస్తుంది.
Callback functions code ను reusable మరియు event-based గా రూపొందించడానికి సహాయపడతాయి.

JavaScript Callback Functions