[Demo] How "this" works with Arrow functions in JavaScript

This example demonstrates how "this" works in arrow functions in JavaScript. Also, explained how "this" behaves with non-arrow function.

by Rahul Saraswat

HTML

<!-- Please press ctrl-shift-i to see output in browser console window. -->

JavaScript

// how "this" behaves inside non-arrow function
function Employee(){
  this.salary = 5000;
  //want to print name inside "delayPrint" function expression
  this.delayPrint = function(){
  	//not using arrow function, just to show how "salary" not accessible inside the timeout function
  	setTimeout(function(){
    	console.log("with-out Arrow function: " + this.salary);		//prints "undefined"
    }, 500);
  }
}
var empWithoutArrow = new Employee();
empWithoutArrow.delayPrint();

// how "this" behaves inside an arrow function
function EmployeewithArrow(){
	this.salary = 6000;
  this.delayPrint = function(){
  	//here using arrow function to show how "this" accessible
    setTimeout(() => {
    	console.log("with Arrow function: " + this.salary);		//prints "6000"
    }, 500);
  }
}
var empwithArrow = new EmployeewithArrow();
empwithArrow.delayPrint();