Arrow Functions in JavaScript

Before knowing what arrow functions does and why it was introduced. Let's understand what function expression is.

Function Expression

It means to use function keyword and define a function inside an expression. In simple words, previously folk use to write and assign function to variable as below,

const ctc = function (base, variable) { return base +  variable; };

console.log(ctc(30000, 40000));

Arrow Functions

So, Arrow Functions are used to create a arrow function expression. An alternate to traditional approach mentioned above.

Example

const ctc = (base, variable) => base + variable;

console.log(ctc(30000, 40000)); 

But, it has it's own behavior

• They don't have their own binding and should not be used as methods.

• We cannot use them as constructor

• It cannot use yield within their body and cannot be used as generators.

No own bindings to this, arguments, or super

Regular functions are dynamic. So the value of this depends on how the function is called. If an object calls a method, this refers to that object.

Arrow functions are lexical. They do not create their own this context. Instead, they inherit this from the surrounding scope where they were defined (like looking up to their parent block).

Imagine the Great Hall of Winterfell (the Parent Scope). Lord Eddard Stark is organizing his forces. He sends two warriors south to the Red Keep (the Object) to serve the Crown.

• The Sellsword / Regular Function (Bronn): Bronn's loyalty is dynamic. It depends entirely on who is currently paying him right now. When Cersei Lannister at the Red Keep issues a command and asks, "Who do you fight for?", Bronn looks around at his current employer and says, "I fight for House Lannister." (this = the object that called the method).

• The Loyal Bannerman / Arrow Function (Arya Stark): Arya's loyalty is lexical. Her allegiance was permanently forged in Winterfell the moment she was born. Even though she is physically standing in the Red Keep, and Cersei is the one issuing the command, Arya completely ignores her current surroundings. When asked, "Who do you fight for?", she looks back to her origins and says, "I fight for House Stark." (this = the parent scope where she was created).

Example

const winterfell = {
  houseName: "Stark",

  sendWarriorsSouth: function() {

    const redKeep = {
      houseName: "Lannister",
      
      bronn: function() {
        console.log(`Bronn says: I fight for House ${this.houseName}`);
      },

      arya: () => {
        console.log(`Arya says: I fight for House ${this.houseName}`);
      }
    };

    redKeep.bronn(); 
    redKeep.arya();  
  }
};

winterfell.sendWarriorsSouth();

// Output:
// Bronn says: I fight for House Lannister
// Arya says: I fight for House Stark

Note: Generally arrow function are not use in methods, because object methods usually need to talk to the object they live inside, and arrow functions are physically incapable of doing that.

Cannot be used as constructors

In JavaScript, regular functions can be used to create blueprints for new objects using the new keyword. When you call new RegularFunction(), JavaScript creates a brand new object, binds this to that new object, and links it to the function's prototype.

Arrow functions were designed to be lightweight and fast. To save memory and execution time, JavaScript engines completely removed the .prototype property from arrow functions. Without a prototype, and without the ability to bind a new this, they simply cannot construct objects.

Regular Function:

function Car(model) {
  this.model = model;
}
const myCar = new Car("Honda"); 
console.log(myCar.model);

Arrow Function

const Bike = (model) => {
  this.model = model;
};


const myBike = new Bike("Yamaha"); 

Cannot use yield

A generator function (function*) is a special type of function that can pause its execution, hand a value back to the caller using the yield keyword, and then resume later exactly where it left off. It acts like a state machine.

Example

function* snackMachine() {
  yield "Chips";
  yield "Chocolate";
  return "Empty";
}

const machine = snackMachine();
console.log(machine.next().value); // Output: "Chips"
console.log(machine.next().value); // Output: "Chocolate"

Arrow functions were strictly designed to be single-purpose, run-to-completion expressions. The designers of JavaScript (the TC39 committee) decided that combining the complex, state-pausing mechanics of generators with the ultra-concise syntax of arrow functions would make the language too confusing and harder to parse.

Now, when you are writing modern web apps, like subscribing to an observable stream of user data or handling a button click event in a component you just use an arrow function.

"We cannot solve our problems with the same thinking we used when we created them."

— Albert Einstein

Let's Connect! 🚀

I’m currently deep-diving into the JavaScript, building projects and exploring the internals of the web. If you're on a similar journey or just love talking about JavaScript, let’s stay in touch!

• Connect on LinkedIn: Satpalsinh's Profile

• Follow my Blog: blogs.satpal.cloud

Keep coding and keep building.