JavaScript Callback Functions

برغم من عدم معرفتك بمفهوم الـ “callback function”، فإن هناك احتمالية استخدامك لها بدون أن تدرك ذلك حتى. طرق مثل `.map()`، `.filter()`، و `.reduce()` تستخدم جميعها الـ “callback functions”.

بالرغم من أن الـ “callbacks” قد تكون مربكة، إلا أنه لا يزال عليك أن تتعلمها بشكل جيد لأنها تشكل مفهومًا حاسمًا في لغة البرمجة جافا سكريبت. لن تستطيع الوصول بعيدًا بدون معرفة الـ “callbacks”.

في هذا المقال، ستتعلم ما هي الـ “callbacks”، لماذا هي مهمة، وكيفية استخدامها.

ما هي الـ “callback function”؟

في لغة البرمجة جافا سكريبت، كل دالة هي كائن. هذا يتيح لنا استخدام دالة كوسيط داخل دالة أخرى، وهذا هو المفهوم الأساسي للـ “callback functions”.

الـ “callback function” هي دالة تُمرر كمعامل لدالة أخرى ويتوقع أن يتم استدعاؤها مرة أخرى في وقت لاحق. الدالة التي تقبل دوالًا أخرى كمعاملات تسمى “higher-order function”.

لنوضح كيف يعمل الـ “callback” من خلال مثال بسيط.

function createGreeting(name, callback){ 
  const greeting = `Hello ${name}!!`;
  callback(greeting); 
}

function logGreeting(greeting){
  console.log(greeting);
}

createGreeting("James", logGreeting); 
// Hello James!!

function createGreeting(name, callback){ 
  const greeting = `Hello ${name}!!`;
  callback(greeting); 
}

function logGreeting(greeting){
  console.log(greeting);
}

createGreeting("James", logGreeting); 
// Hello James!!

في هذا المثال، `createGreeting` هي الـ “higher-order function”، والتي تقبل معاملين، الاسم والـ “callback function”. نستخدم `logGreeting` كـ “callback function”. عند تنفيذ دالة `createGreeting`، لاحظ أننا لا نضيف أقواسًا بجوار `logGreeting` عند تمريرها كمعامل. هذا لأننا لا نريد تنفيذ الـ “callback function” على الفور، نريد فقط تمرير “the function definition”  إلى الـ “higher-order function” حتى يتم تنفيذها في وقت لاحق.

لماذا نستخدم الـ “callback functions”؟

تُستخدم الـ “callbacks” بطرقين مختلفتين – في synchronous functions وasynchronous functions.

الـ “callbacks” في synchronous functions

إذا كانت دالتك تعمل من الأعلى إلى الأسفل، وتنتظر حتى يتم تنفيذ السطر السابق قبل الانتقال إلى السطر التالي، فإنها دالة متزامنة (synchronous function).

الهدف من استخدام الـ “callbacks” في الشيفرة المتزامنة هو أننا نستطيع بسهولة استبدال جزء من الشيفرة بجزء آخر.

انظر إلى المثال أدناه، يمكننا بسهولة إعادة استخدام دالة `filter` للحصول على أعداد زوجية وفردية عن طريق استبدال الـ “callback function”.

const numbers = [3, 4, 10, 20]
const getOddNums = num => num % 2 !== 0
const getEvenNums = num => num % 2 === 0

// Passing getOddNums function into filter
const oddNums = numbers.filter(getOddNums)

// Passing getEvenNums function into filter
const evenNums = numbers.filter(getEvenNums)

const numbers = [3, 4, 10, 20]
const getOddNums = num => num % 2 !== 0
const getEvenNums = num => num % 2 === 0

// Passing getOddNums function into filter
const oddNums = numbers.filter(getOddNums)

// Passing getEvenNums function into filter
const evenNums = numbers.filter(getEvenNums)

الآن تعرف لماذا نستخدم الـ “callbacks” في الدوال المتزامنة، دعونا ننتقل لنلقي نظرة على لماذا نستخدمها في الدوال الغير متزامنة.

الـ “callbacks” في الدوال الغير متزامنة

الغير متزامن يعني أنه إذا كان على جافا سكريبت أن تنتظر حتى يتم اكتمال شيء ما، ستبدأ في إكمال المهام الأخرى بينما تنتظر.

مثال شائع جدا لدالة غير متزامنة هو `setTimeout`. يأخذ دالة “callback” ليتم تنفيذها في وقت لاحق.

// Calls the callback after 1 second
setTimeout(callback, 1000)

// Calls the callback after 1 second
setTimeout(callback, 1000)