The knowledge points of callback functions in JavaScript are all here!

Author: Shadeed
Translator: Front-end Xiaozhi
Source: dmitripavlutin

If you have dreams and dry goods, search on [Moving the World] still washing dishes in the early morning.

This article https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.

Callbacks are one of the concepts that every JS developer should know. Callbacks are used in arrays, timer functions, promises, event handlers, etc.

In this article, the concept of callback functions is explained. In addition, it will help to distinguish between two callbacks: 161e75b91ec72c synchronous and asynchronous .

1. Callback function

Let's write a function for greeting, first create a function greet(name) that returns the welcome message:

function greet(name) {
  return `Hello, ${name}!`;
}

greet('小智'); // => 'Hello, 小智!'

What if I want to greet some people? Here, we can use the array.map() method:

const persons = ['小智', '王大冶']
const messages = persons.map(greet)

messages // ["Hello, 小智!", "Hello, 王大冶!"]

persons.map(greet) accepts person greet() with each item as a call parameter: greet('Xiaozhi') , greet('Wang Daye') .

Interestingly, the persons.map(greet) method accepts the greet() function as a parameter. Doing this makes reet() a callback function.

persons.map(greet) is a function that accepts another function as an argument, so it is named higher-order function .

Higher-order functions take full responsibility for calling the callback function and supply it with the correct parameters.

In the previous example, the higher-order function persons.map(greet) is responsible for calling the greet() callback function with each item of the array as a parameter: 'Xiaozhi' and 'Wang Daye' .

We can write our own higher-order functions that use callbacks. For example, here is an array.map() method

function map(array, callback) {
  const mappedArray = [];
  for (const item of array) { 
    mappedArray.push(
      callback(item)
    );
  }
  return mappedArray;
}

function greet(name) {
  return `Hello, ${name}!`;
}

const persons = ['小智', '王大冶']

const messages = map(persons, greet);

messages // ["Hello, 小智!", "Hello, 王大冶!"]

map(array, callback) is a higher-order function because it accepts a callback function as a parameter and then calls the callback function inside its function body: callback(item) .

2. Synchronous callback

There are two ways to call callbacks: synchronous and asynchronous callbacks.

Synchronous callbacks are executed during the execution of higher-order functions that use callbacks.

In other words, synchronous callbacks are blocking: the higher-order function does not complete its execution until the callback has finished executing.

function map(array, callback) {
  console.log('map() 开始');
  const mappedArray = [];
  for (const item of array) { mappedArray.push(callback(item)) }
  console.log('map() 完成');
  return mappedArray;
}

function greet(name) {
  console.log('greet() 被调用 ');
  return `Hello, ${name}!`;
}
const persons = ['小智'];

map(persons, greet);

// map() 开始
// greet() 被调用 
// map() 完成

greet() is a synchronous callback function because it map() concurrently with the higher-order function 061e75b91ec908.

2.1 Examples of synchronous callbacks

Many native JavaScript types of methods use synchronous callbacks.

The most commonly used are array methods such as array.map(callback) , array.forEach(callback) , array.find(callback) , array.filter(callback) , array.reduce(callback, init) :

// 数组上的同步回调的示例

const persons = ['小智', '前端小智']
persons.forEach(
  function callback(name) {
    console.log(name);
  }
);
// 小智
// 前端小智

const nameStartingA = persons.find(
  function callback(name) {
    return name[0].toLowerCase() === '小';
  }
)
// nameStartingA // 小智

const countStartingA = persons.reduce(
  function callback(count, name) {
    const startsA = name[0].toLowerCase() === '小';
    return startsA ? count + 1 : count;
  }, 
  0
);

countStartingA // 1

3. Asynchronous callback

Asynchronous callbacks are executed after the execution of higher-order functions.

In short, asynchronous callbacks are non-blocking: a higher-order function completes its execution without waiting for the callback, and the higher-order function ensures that the callback is executed later on a specific event.

In the example below, the execution delay of the later()

console.log('setTimeout() 开始')
setTimeout(function later() {
  console.log('later() 被调用')
}, 2000)
console.log('setTimeout() 完成')

// setTimeout() 开始
// setTimeout() 完成
// later() 被调用(2秒后)

3.1 Example of Asynchronous Callback

Asynchronous callback for timer function:

setTimeout(function later() {
  console.log('2秒过去了!');
}, 2000);

setInterval(function repeat() {
  console.log('每2秒');
}, 2000);

DOM event listeners are also asynchronously called event handlers (a subtype of callback functions)

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function handler() {
  console.log('我被点击啦!');
})
// 点击按钮时，才会打印'我被点击啦!'

4. Asynchronous callback function vs asynchronous function

async placed before the function definition creates an asynchronous function:

async function fetchUserNames() {
  const resp = await fetch('https://api.github.com/users?per_page=5');
  const users = await resp.json();
  const names = users.map(({ login }) => login);
  console.log(names);
}

fetchUserNames() is asynchronous because it is prefixed with async . The function await fetch('https://api.github.com/users?per_page=5') from GitHub top 5 users. Then extract the JSON data from the response object: await resp.json() .

async function is syntactic sugar Promise When the expression await <promise> is encountered (note that calling fetch() will return a promise), the async function will suspend execution until the promise is resolved.

Async callback function and async function are different terms.

Asynchronous callback functions are executed in a non-blocking manner by higher-order functions. But the async function pauses its execution while waiting for the promise ( await <promise> ) to resolve.

However, we can use async functions as async callbacks!

Our async function fetchUserNames() set to be an async callback called when the button is clicked:

const button = document.getElementById('fetchUsersButton');

button.addEventListener('click', fetchUserNames);

Summarize

A callback is a function that can be accepted as a parameter and executed by another function (a higher-order function).

There are two kinds of callback functions: synchronous and asynchronous.

Synchronous callback functions execute concurrently with higher-order functions that use callback functions, and synchronous callbacks are blocking. On the other hand, asynchronous callbacks execute later than higher-order functions, and asynchronous callbacks are non-blocking.

End~, thank you for watching, I'm Xiao Zhi, I'm going to wash the dishes!

---

code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool Fundebug .

Original: https://dmitripavlutin.com/javascript-variables-practices/

comminicate

If you have dreams and dry goods, search on [Moving the World] still washing dishes in the early morning.

This article https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.