Arrow Functions vs Regular Functions

1. Basic Syntax Difference

Regular:
function add(a, b) {
  return a + b;
}

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

they're both called the same way:
add(2, 3)

1b. Functions (without, parameters)

Regular:
function greet() {
  return "Hi";
}

Arrow:
const greet = () => "Hi";

they're both called the same way:
greet()

2. 'this' Behavior Difference

Regular:
const person = {
  name: "Alex",
  greet: function() {
    return "Hi, I'm " + this.name;
  }
};

Arrow:
const person = {
  name: "Alex",
  greet: () => {
    return "Hi, I'm " + this.name;
  }
};

when using the arrow method, 'this' is not a name. It's whatever 'this' was outside the object you defined with the arrow --usually a global object (window in browsers). Arrow functions (functions defined using arrows) never change 'this.'

3. When NOT to Use Arrow Functions

As object methods (they don't get their own this)
As constructors (you can't use new with them)
When dynamic this context is needed

Arrow Functions vs Regular Functions

Arrows (or arrow functions) provide a shorter syntax to define a function.

1. Basic Syntax Difference

1b. Functions (without, parameters)

2. 'this' Behavior Difference

3. When NOT to Use Arrow Functions