راهنمای کامل Callback در جاوا اسکریپت

Callback در جاوا اسکریپت، نقش اساسی در عملیات‌های نامتقارن و رویداد محور ایفا می‌کند. یک تابع Callback کال بک، کارکردی است که جاوا اسکریپت با کمک آن می‌تواند ورودی کاربر را مدیریت کند، درخواست HTTPارسال کند و یا کدی را پس از تکمیل یک سری عملیات مشخص اجرا کند.

پیش‌درآمدی بر callback در جاوا اسکریپت

callback تابعی است که پس از تابعی دیگر که اجرایش به پایان رسیده اجرا می شود – از این رو آن را call back می نامند.
در جاوا اسکریپت توابع اشیا هستند. به همین دلیل، توابع می توانند توابع دیگر را به عنوان آرگومان قبول کنند و قابلیت بازگشت توسط توابع دیگر را دارند. توابعی که اینکار را انجام می دهند، توابع مرتبه بالا نامیده می شوند. هر تابعی که به عنوان یک آرگومان ارسال می شود و سپس توسط تابعی که آن را دریافت کرده فراخوانده می شود، تابع callback نامیده می شود.

متغیرهای جاوا اسکریپت: نوع داده و نام متغیر در جاوا اسکریپت

چرا به Callback در جاوا اسکریپت نیازمندیم؟

دلیل نیاز به Callback در جاوا اسکریپت این است که در حقیقت جاوا اسکریپت زبان برنامه نویسی رویدادمحور است. این بدان معناست که به جای انتظار برای پاسخ یک دستور، جاوا اسکریپت به اجرا ادامه خواهد داد. به مثال زیر نگاهی بیاندازید.

function first(){
  console.log(1);
}

function second(){
  console.log(2);
}

first();
second();

همانطور که انتظار دارید، اولین تابع ابتدا اجرا شده و دومین تابع نیز بعد از اجرای تابع اول اجرا می شود. و خروجی به صورت زیر خواهد بود

// 1
// 2

اما اگر تابع اول یک سری کد داشته باشد که نبایستی فورا اجرا شود چطور؟ برای مثال، در درخواست API که بایستی ابتدا ارسالش کنیم و سپس منتظر پاسخ آن باشیم شرایط چطور خواهد بود؟ برای شبیه سازی این اقدام، از setTimeout استفاده می کنیم که متد خود جاوا اسکریپت است که می تواند تابعی را پس از تاخیری مشخص فرابخواند. ما تابع خود را برای 500 میلی ثانیه به تاخیر می اندازیم تا درخواست API را شبیه سازی کنیم. کد جدید ما به این شکل خواهد بود:

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}

function second(){
  console.log(2);
}

first();
second();

در اینجا مهم نیست که درباره ()setTimeout می‌دانیم یا نمی‌دانیم. تمام آن چیزی که حائز اهمیت است این است که ما console.log(1) را با تاخیری 500 میلی ثانیه جابجا کردیم. بنابراین اتفاقی که در خروجی می افتد به صورت زیر است.

first();
second();
// 2
// 1

با وجود اینکه ما تابع ()first را ابتدا فراخواندیم، میبینیم که این تابع پس از تابع ()second فراخوانده می شود.

آشنایی با ساختار جاوا اسکریپت

این بدان معنا نیست که جاوا اسکریپت توابع مان را به شکلی که ما می خواهیم مرتب کرده است بلکه جاوا اسکریپت برای پاسخ ()first پیش از رفتن به اجرای ()second منتظر نمانده است.

شما نمی توانید تابعی را پس از تابعی دیگری فرا بخوانید و امیدوار باشید که به ترتیب و درست اجرا می شوند. Callback در جاوا اسکریپت روشی است که در آن ما مطمئن می شویم که یک کد مشخص تا زمانیکه اجرای کد دیگر به پایان نرسیده باشد، اجرا نمی شود.

ساخت Callback در جاوا اسکریپت

برای ساخت Callback در جاوا اسکریپت تابع زیر را در نظر داشته باشید

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}

در بالا ما تابع doHomework را ساختیم. تابع ما یک متغیر قبول می کند، یعنی subject که میخواهیم با آن کار کنیم. تابع خود را تایپ کرده و کد زیر را فرابخوانید.

doHomework('math');
// Alerts: Starting my math homework.

حالا اجازه دهید به عنوان آخرین پارامتر در تابع ()doHomework عبارت callback را بیافزاییم. تابع callback در آرگومان دوم از تابع ()doHomework تعریف می شود.

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});

همانطوری که میبینید، اگر کد بالا را اجرا کنید با دو اخطار مواجه خواهید شد. اما توابع Callback در جاوا اسکریپت همیشه نبایستی در فراخوانی تابع مان تعریف شوند. آنها را می توان هرجایی در کدمان که می‌خواهیم مثلا به صورت زیر تعریف کنیم:

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

function alertFinished(){
  alert('Finished my homework');
}

doHomework('math', alertFinished);

نتیجه این مثال دقیقا به مانند مثال پیشین است اما راه اندازی آن اندکی متفاوت است. همانطور که میبینید، ما تابع alertFinished را به عنوان آرگومانی طی فراخوانی تابع ()doHomework انتقال دادیم.

یک مثال واقعی‌تر از Callback در جاوا اسکریپت

وقتی که درخواستی به یک API ارسال می کنید بایستی منتظر پاسخ و پیش از استفاده از آن پاسخ باشید. به مثال زیر نگاه بیاندازید:

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
});

• وظیفه T.get به صورت ساده این است که درخواست GET را به توییتر می‌فرستیم.
• سه پارامتر در این درخواست وجود دارد: search/tweets ریشه درخواست‌مان است، params که پارامترهای جستجو است و سپس تابع ناشناس که callback ماست.

عملگرها در جاوا اسکریپت: عملگرهای منطقی، ریاضی و مقایسه‌ای

به این دلیل Callback در جاوا اسکریپت اهمیت بسیار زیادی دارد که نیاز داریم پیش از اینکه دستورات دیگر کدمان اجرا شوند منتظر پاسخ درخواست ارسال شده به سرور باشیم. پس از ارسال پارامترهای‌مان به search/tweets از طریق درخواست GET، در حقیقت ما نمی‌دانیم که آیا درخواست API مان موفق خواهد بود یا با شکست مواجه خواهد شد.

وقتیکه توییتر پاسخ می دهد، تابع callback ما اجرا می شود. در این وضعیت توییتر یا یک err(error) یا یک پاسخ را به ما بازخواهد گرداند و دقیقا بعد از این پاسخ است که می‌توانیم در خصوص اجرا یا عدم اجرای باقی کدمان تصمیم بگیریم. در تابع callback ما از عبارت ()if استفاده میکنیم تا بررسی کنیم که آیا درخواستمان موفق بوده یا خیر و سپس طبق داده جدید عمل کنیم.