Arrow Functions:

let myFunction = () => {
    console.log('example');
}

Regular Functions

function myFunction() {
    console.log('example');
}

Arrow functions are essentially anonymous functions that provide a more concise syntax for function definitions. Arrow functions come in two formats: one that contains only a single expression (omitting curly braces and the return keyword), and another that can contain multiple statements (requiring curly braces and an explicit return statement).

Arrow Functions as Anonymous Constructors

Arrow functions are anonymous and cannot be used as constructors. Attempting to instantiate them with the 'new' keyword will result in an error.

let ArrowConstructor = () => {
    console.log('error');
}

let instance = new ArrowConstructor();

Result: Uncaught TypeError: ArrowConstructor is not a constructor

Handling Parameters in Arrow Functions

Unlike regular functions, arrow functions do not have their own 'arguments' object. Instead, they utilize rest parameters (...params) to handle multiple arguments.

// Regular function
function displayArgs(a){
  console.log(arguments);
}
displayArgs(1,2,3,4,5); // [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// Arrow function
let showArgs = (...params) => {
  console.log(params);
}
showArgs(3,82,32,11323); // [3, 82, 32, 11323]

function countArgs(...allArgs) {
  console.log(allArgs.length);
}
countArgs(); // 0
countArgs(5); // 1
countArgs(5, 6, 7); // 3

Lexical 'this' Binding in Arrow Functions

Arrow functions do not bind their own 'this' value. Instead, they capture the 'this' value of the enclosing lexical context.

// Example 1:
var sample = {
  value: 10,
  arrowMethod: () => {
    console.log(this.value); // undefined
    console.log(this); // Window object
  },
  regularMethod: function() {
    console.log(this.value); // 10
    console.log(this); // {value: 10, arrowMethod: ƒ, regularMethod: ƒ}
  }
}
sample.arrowMethod(); 
sample.regularMethod();

// Example 2:
var object = {
  value: 10,
  showValue: function(){
    console.log(this.value); //10
  },
  getValue: function() {
    return ()=>{
      console.log(this.value); //10
    }
  }
}
object.showValue(); 
object.getValue()();

Immutability of 'this' in Arrow Functions

When calling an arrow function with methods like 'call()' or 'apply()', the 'this' value remains unchanged. Arrow functions always maintain the 'this' value of their defining context, regardless of invocation methods.

let calculator = {
    base: 10,
    add: function(n) {
        let operation = (n) => n + this.base;
        return operation(n);
    },
    tryChangeThis: function(n) {
        let operation = (n) => n + this.base;
        let differentContext = {
            base: 20
        };
        return operation.call(differentContext, n);
    }
};
console.log(calculator.add(1));  // 11
console.log(calculator.tryChangeThis(1)); // 11

Prototype Property in Arrow Functions

Arrow functions do not have a prototype property, unlike regular functions.

var arrowFunc = ()=>{
  return 1;
}

function regularFunc(){
  return 2;
}

console.log(arrowFunc.prototype);  // undefined
console.log(regularFunc.prototype);   // {constructor: ƒ}

Arrow Functions and Generators

Arrow functions cannot be used as generator functions and cannot contain the 'yield' keyword.