kaksha.dev

---

Arrow Functions

Arrow functions are a compact and readable form of normal(traditional) function. In addition, there are some other differences too in the way they work as compared to the normal functions.

• Arrow function syntax

let foo = (arg1, arg2) => {
  console.log("Inside arrow finction")
}

• Arrow function can only be defined using functional expression syntax while normal function can use declaration syntax as well.

// Arrow function
var foo = (arg1) => {
  console.log("This is a function with arguments: ", param1);
}

// Normal function
function foo(arg1) {
  console.log("This is a function with arguments: ", param1);
}

• Arrow function can be used as an anonymous function

() => {
  console.log("This is a function ");
};

• this scope
  • Arrow function - “this” inside arrow function always points to the object where it is defined and is same as (inherited from) its parent, thus reliable
  • Normal function - “this” inside normal function points to the object on which it is called, therefore unreliable

function studentArrowFunction(fName, obtainedMarks) {
  console.log(this);
  this.fNameObj = fName;
  this.obtMarksObject = obtainedMarks;

  // Normal Function
  this.checkResultsNormal = function () {
    console.log(this);
    function innerFunction() {
      console.log("Normal Inner function: ", this);
    }
    innerFunction();
  };

  // Arrow Function
  this.checkResultsArrow = () => {
    console.log(this);
    innerFunction = () => {
      console.log("Arrow Inner function: ", this);
    };
    innerFunction();
  };
}
var student = new studentArrowFunction("fname5", 100);
student.checkResultsNormal() // Window {window: Window, self: Window, document: document, name: '', location: Location, …}

student.checkResultsArrow() // studentArrowFunction {fNameObj: 'fname5', obtMarksObject: 100, checkResultsNormal: ƒ, checkResultsArrow: ƒ}

• Arrow functions do not provide access to default arguments object whereas normal functions have access to default arguments object

// Arrow function
var arrowFunction = () => {
  console.log("The default arguments object is: ", arguments)
}
foo("arg1"); // Uncaught ReferenceError: arguments is not defined

// Normal function 
function normalFunction() {
  console.log("The default arguments object is: ", arguments) // undefined error
}
foo("arg1"); // Arguments ['arg1', callee: ƒ, Symbol(Symbol.iterator): ƒ]