ReactJS
What is the Difference Between a Normal Function and an Arrow Function?
Syntex
Normal Function: Uses the Function Keyword.
// Regular functionfunction sayHello(name) {return `Hello, ${name}!`; // Hello, Hiren!}sayHello('Hiren');Arrow Function: Uses the => (fat arrow) syntax.// Arrow function (multi-line)const sayHelloArrow = (name) => {return `Hello, ${name}!`; // Hello, Hiren!}sayHelloArrow('Hiren');// Arrow function (implicit return)const sayHelloShort = name => `Hello, ${name}!`; // Hello, Hiren!sayHelloShort('Hiren');Constructors
Normal functions can be used as constructors with new.
Arrow function cannot be used as constructors.
// Normal function can be used as constructorfunction NormalFunction(name) {this.name = name;}const NormalFn = new NormalFunction('Hiren'); // Works// Arrow function cannot be used as constructorconst ArrowFunction = name => { this.name = name; }const ArrowFn = new ArrowFunction('Hiren'); // TypeError: ArrowFunction is not a constructor“this” Behavior (Major Difference!)
The largest difference between normal functions and arrow functions is how they handle “this” keyword.
Using Normal Function
// Using normal function (proper 'this' binding)const person1 = {name: "Hiren",greet: function() {console.log("Hello, " + this.name); // Hello, Hiren}};person1.greet();Using arrow function (lexical 'this' binding)// Using arrow function (lexical 'this' binding)const person2 = {name: "Alice",greet: () => {console.log("Hello, " + this.name); // Hello, undefined}};person2.greet();
Ready to transform your business with our technology solutions? Contact Us today to Leverage Our ReactJS Expertise.
ReactJS