Frontend | Вопросы собесов

📌В чём разница между классической функцией и стрелочной?



💬 Спрашивают в 20% собеседований



Классические функции (объявленные через ключевое слово function) и стрелочные функции (введённые в ES6 через => синтаксис) являются двумя способами объявления функций, но между ними есть несколько важных различий:



1️⃣ Синтаксис



➕ Классическая функция:

function add(a, b) {

  return a + b;

}

➕Стрелочная функция:

const add = (a, b) => a + b;

Предлагают более краткий синтаксис для написания функций, особенно если функция состоит из одного выражения.



2️⃣ Контекст this



В классических функциях контекст определяется тем, как функция была вызвана. В стрелочных функциях контекст наследуется из окружающего контекста (лексический контекст this), где функция была объявлена.



➕ Пример с классической функцией:

const obj = {

  id: 42,

  counter: function() {

    setTimeout(function() {

      console.log(this.id); // this ссылается на глобальный объект или undefined в строгом режиме, а не на obj

    }, 1000);

  }

};

➕Пример со стрелочной функцией:

const obj = {

  id: 42,

  counter: function() {

    setTimeout(() => {

      console.log(this.id); // this корректно ссылается на obj, так как стрелочная функция наследует this из окружения

    }, 1000);

  }

};

3️⃣ Конструктор



Классические функции могут использоваться с помощью ключевого слова new. Стрелочные функции не могут быть использованы как конструкторы, и попытка это сделать приведет к ошибке.



➕ Пример с классической функцией:

function Person(name) 

{

  this.name = name;

}

const person = new Person("Alice");

➕ Попытка использовать стрелочную функцию как конструктор:

const Person = (name) => {

  this.name = name;

};

// const person = new Person("Alice"); // Ошибка: Person не является конструктором

4️⃣ Аргументы



В классических функциях можно использовать объект arguments, который содержит аргументы, переданные функции. В стрелочных функциях нет объекта arguments, но можно использовать оператор расширения ... для достижения аналогичного результата.



🤔 Итог:



Основные различия между классическими и стрелочными функциями заключаются в синтаксисе, поведении this, использовании в качестве конструктора и доступе к аргументам функции. Стрелочные функции предлагают более краткий синтаксис и удобны для написания коротких функций, а также при работе с контекстом this в обратных вызовах и замыканиях. Однако для более сложных сценариев, требующих использования this в различных контекстах или создания конструкторов, предпочтительнее использовать классические функции.



🔥 ТОП ВОПРОСОВ С СОБЕСОВ



🔒 База собесов | 🔒 База тестовых