Традиционные функции и функции стрелок в Javascript имеют некоторые ключевые различия с точки зрения синтаксиса и поведения.

  1. Синтаксис:-
  • Стрелочные функции используют краткий синтаксис и не требуют ключевого слова «function».
  • Обычные функции используют ключевое слово «Function».
//Arrow function
const arrowFunction = (param) => { /* You can write your code here */};

//Normal function
function normalFunction(param){
/* you can write your code here */
}

2. Привязка «this»:-

  • Стрелочные функции не имеют собственного контекста «this». Они наследуют значение «this» от содержащей или окружающей функции или контекста.
  • Обычные функции имеют свой собственный контекст this, который может различаться в зависимости от того, как они вызываются.
const userObject = {
  name: "Sunil",
  sayHelloInArrow: () => {
  console.log(`Hello ${this.name}`);//this refers to the global object
  },
  sayHelloInNormal: function(){
  console.log(`Hello ${this.name}`); //this refers to the userObject
  }
}

userObject.sayHelloInArrow();//Hello undefined
userObject.sayHelloInNormal();//Hello Sunil

3. Объект аргументов:-

  • Стрелочные функции не имеют собственного объекта аргументы. Если вам нужен доступ к аргументам функции, вам следует использовать остальные параметры(`…args`).
  • Обычные функции имеют объект «arguments», который обеспечивает доступ к аргументам функции.
function normalFunction(){
  console.log(arguments)
}

normalFunction(1, 2, 3, 4);//{ '0': 1, '1': 2, '2': 3, '3': 4 }

const arrowFunction = () => {
  console.log(arguments)
}

arrowFunction(1, 2, 3, 4);//Uncaught ReferenceError: arguments is not defined

4. Конструктор:-

  • Стрелочные функции нельзя использовать в качестве конструкторов для создания объектов с ключевым словом «new».
  • Обычные функции можно использовать в качестве конструкторов для создания объектов.
const ArrowConstructor = () => {};
const arrowInstance = new ArrowConstructor(); // TypeError: ArrowConstructor is not a constructor

function NormalConstructor() {}
const normalInstance = new NormalConstructor(); // Normal constructor works as expected

5. Примеры использования:-

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

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