Introduction to arrow functions in JavaScript

In order to understand arrow function syntax, we should start by refactoring a regular function step by step:
We can start by refactoring the function declaration to use a variable assignment:
Then, we can refactor the regular function to an arrow function:
If there's only one argument, we can omit the parentheses around it:
If the function is a single expression, you can omit the curly braces and return statement and use an implicit return:

function square(a) {
  return a * a;
}

Then, we can refactor the regular function to an arrow function:
If there's only one argument, we can omit the parentheses around it:
If the function is a single expression, you can omit the curly braces and return statement and use an implicit return:
The main difference between arrow functions and regular functions is execution context (i.e. the value of this). Technically speaking, most other differences often mentioned either stem from this one or are side effects of it.
In a regular function, this is dynamic and depends on how the function was invoked:
Arrow functions, unlike regular ones, don't define their own execution context therefore this inside an arrow function always refers to the lexical this (i.e. the scope in which the arrow function was defined).

From 30-seconds-of-code: arrow-functions