Как правильней использовать return c колбэком?

327

21 октября 2017, 19:32

Как правильней всего использовать return с колбэк-функцей в javascript?

// вариант №1
function func(callback) {
  // ...
  callback();
}

// вариант №2
function func(callback) {
  // ...
  callback();
  return;
}

// вариант №3
function func(callback) {
  // ...
  return callback();
}

Сам использую вариант №3. С проверкой на функцию.

Answer 1

Не совсем понятно, что вы имеете ввиду под возвратом колбэк функции, но варианты 1 и 2 иденичны и вернут undefined. Вариант 3 вернет результат вызова функции callback.

function func1(callback) { 
  callback(); 
} 
 
function func2(callback) { 
  callback(); 
  return; 
} 
 
function func3(callback) { 
  return callback(); 
}    
 
console.log(func1(()=>1)); 
console.log(func2(()=>1)); 
console.log(func3(()=>1));

Answer 2

Как правило, коллбеки вызываются в асинхронных функциях. Немного изменим пример:

function f1(callback) { 
  setTimeout(function () { 
    callback(null, 1); 
  }); 
} 
 
function f2(callback) { 
  setTimeout(function () { 
    callback(null, 2); 
    return; 
  }); 
} 
 
function f3(callback) { 
  setTimeout(function () { 
    return callback(null, 3); 
  }); 
} 
 
function handle(err, data) { 
  if (err) { 
    console.error(err); 
  } else { 
    console.log(data); 
  } 
} 
 
f1(handle); 
f2(handle); 
f3(handle);

Очевидно, что все return абсолютно бесполезны и не влияют на результат.

А теперь взглянем на функцию handle:

function handle(err, data) {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
}

Хочется её немного переписать, чтобы основная её задача - обрабатывать data не находилась в ветке else:

function handle(err, data) {
  if (err) {
    console.error(err);
    return;
  }
  console.log(data);
}

Хм.. Выглядит знакомо? Но как-то длинновато два оператора для тупой обработки ошибки - что если сократить?

function handle(err, data) {
  if (err) {
    return console.error(err);
  }
  console.log(data);
}

Ну вот и с коллбеками так же:

function hasError() { 
  return Math.random() < .5; 
} 
 
function f1(callback) { 
  setTimeout(function () { 
    if (hasError()) { 
      callback(new Error(1)); 
    } else { 
      callback(null, 1); 
    } 
  }); 
} 
 
function f2(callback) { 
  setTimeout(function () { 
    if (hasError()) { 
      callback(new Error(2)); 
      return; 
    } 
     
    callback(null, 2); 
  }); 
} 
 
function f3(callback) { 
  setTimeout(function () { 
    if (hasError()) { 
      return callback(new Error(3)); 
    } 
     
    callback(null, 3); 
  }); 
} 
 
function handle(err, data) { 
  if (err) { 
    return console.error(err.message); 
  } 
   
  console.log(data); 
} 
 
f1(handle); 
f2(handle); 
f3(handle);

Лично мне нравится вариант с return callback(), поскольку он короче, но не надо совать return туда, где он не нужен. Но ещё стоит отметить, что если возвращаемое значение где-то используется, то не стоит использовать третий вариант, поскольку таким образом будет отдаваться значение, возвращённое коллбеком вместо undefined. Не стоит рассчитывать, что коллбэк всегда возвращает undefined, если его возвращаемое значение тебе не нужно.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

как поймать изменение input[nama=number]

День добрый! Не могу понять, как отловить изменения в input[type=number], когда нажимаются стандартные стрелочки (google chrome)Изменения при вводе вручную...

274

javascript