Чем отличаются синхронные и асинхронные функции?

Краткий ответ

Синхронные функции выполняются сразу и блокируют дальнейшее выполнение кода, пока не завершатся. Асинхронные функции начинают выполнение, но не блокируют код — они завершаются позже, когда будет готов результат. Для работы с асинхронными операциями используются Promise и async/await.

// Синхронная функция
function syncFunc() {
  console.log('Синхронная функция');
  return 'готово';
}
 
// Асинхронная функция с Promise
function asyncFunc() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('Асинхронная функция');
      resolve('готово');
    }, 1000);
  });
}
 
// Использование
syncFunc();   // Выполняется сразу
asyncFunc().then(result => console.log(result));  // Начинает выполнение, но продолжает код
console.log('Код продолжает работать'); // Выполняется сразу
// Через 1 секунду: 'Асинхронная функция'
// Потом: 'готово'

Полный ответ

Разница между синхронными и асинхронными функциями — как разница между покупкой кофе в кофейне и заказом еды в ресторане с доставкой. В кофейне вы ждёте, пока вам сделают напиток (синхронно), а в ресторане заказываете еду и продолжаете заниматься делами, пока еду готовят (асинхронно)! ☕

В современном JavaScript для работы с асинхронными операциями используются Promise и async/await, которые делают код более читаемым и удобным для работы.

Что такое синхронные функции

Синхронные функции — это обычные функции, которые выполняются сразу и блокируют дальнейшее выполнение кода, пока не завершатся:

function syncTask() {
  console.log('Начало');
  // Выполняется сразу
  console.log('Конец');
}
 
syncTask();
console.log('Это выполнится после syncTask');

Что такое асинхронные функции

Асинхронные функции — это функции, которые начинают выполнение, но не блокируют код. Они завершаются позже, когда будет готов результат:

function asyncTask() {
  console.log('Начало');
  setTimeout(() => {
    console.log('Завершение через 1 секунду');
  }, 1000);
  console.log('Функция завершена (но не задача!)');
}
 
asyncTask();
console.log('Это выполнится сразу после начала asyncTask');

Главные отличия

Порядок выполнения

// Синхронно
function sync() {
  console.log('1');
  console.log('2');
  console.log('3');
}
 
// Асинхронно
function async() {
  console.log('A');
  setTimeout(() => console.log('C'), 0);
  console.log('B');
}
 
sync(); // Вывод: 1, 2, 3
async(); // Вывод: A, B, C

Блокировка кода

// Синхронная функция блокирует всё
function syncDelay() {
  const start = Date.now();
  while (Date.now() - start < 3000) {
    // Бесполезная задержка на 3 секунды
  }
  console.log('Синхронная задержка завершена');
}
 
console.log('Начало');
syncDelay(); // Ждём 3 секунды
console.log('Это появится только через 3 секунды');
 
// Асинхронная функция не блокирует
function asyncDelay() {
  setTimeout(() => {
    console.log('Асинхронная задержка завершена');
  }, 3000);
}
 
console.log('Начало');
asyncDelay(); // Не ждём
console.log('Это появится сразу');

Простые примеры

Синхронные функции

// Обычные математические операции
function add(a, b) {
  return a + b;
}
 
function multiply(a, b) {
  return a * b;
}
 
const sum = add(2, 3);        // 5 (сразу)
const product = multiply(4, 5); // 20 (сразу)

Асинхронные функции

// Работа с сетью
function fetchData(callback) {
  console.log('Запрашиваю данные...');
  setTimeout(() => {
    callback('Данные получены');
  }, 2000);
}
 
fetchData((data) => {
  console.log(data);
});
console.log('Код продолжает работать');

Когда использовать что

Синхронные функции

// Для быстрых операций
function calculateTax(price) {
  return price * 0.2;
}
 
function formatName(first, last) {
  return first + ' ' + last;
}

Асинхронные функции

// Для долгих операций
function loadUserData(userId, callback) {
  // Имитация запроса к серверу
  setTimeout(() => {
    callback({ id: userId, name: 'Пользователь ' + userId });
  }, 1000);
}

Промисы и async/await

Что такое Promise

Promise — это объект, представляющий результат асинхронной операции. У Promise есть три состояния:

Pending — ожидание
Fulfilled — успешно выполнено
Rejected — выполнено с ошибкой

// Создание Promise
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Данные получены');
  }, 1000);
});
 
// Использование Promise
myPromise.then(result => {
  console.log(result); // 'Данные получены'
});

async/await

async/await — это синтаксический сахар для работы с Promise, делающий код более читаемым:

// Функция с async возвращает Promise
async function fetchData() {
  return 'Данные';
}
 
// Использование await вместо .then()
async function getData() {
  const data = await fetchData(); // Ждём результат
  console.log(data); // 'Данные'
}
 
getData();

Частые ошибки

Ожидание немедленного результата

// ❌ Ошибка — ожидание результата от асинхронной функции
function asyncOperation() {
  let result;
  setTimeout(() => {
    result = 'готово';
  }, 1000);
  return result; // undefined!
}
 
const data = asyncOperation();
console.log(data); // undefined
 
// ✅ Правильно — использование callback
function asyncOperationCorrect(callback) {
  setTimeout(() => {
    callback('готово');
  }, 1000);
}
 
asyncOperationCorrect((data) => {
  console.log(data); // 'готово'
});

Путаница с порядком выполнения

console.log('1');
 
setTimeout(() => {
  console.log('2');
}, 0);
 
console.log('3');
 
// Вывод: 1, 3, 2 (а не 1, 2, 3!)

Простые правила

Синхронные — выполняются сразу и блокируют код ⏱️
Асинхронные — не блокируют код, завершаются позже ⚡
Порядок — синхронный код всегда выполняется до асинхронного 📋
Результат — асинхронные функции возвращают результат позже 🕐
Использование — синхронные для быстрых операций, асинхронные для долгих 🎯
Promise — объект для работы с асинхронными операциями 📦
async/await — современный способ работы с асинхронным кодом ✨

Понимание разницы помогает писать более эффективный код и избегать ошибок с порядком выполнения операций! 💪

Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪