JavaScript’s Best-Kept Secrets: 6 Surprising Differences In Arrow & Regular Functions

Arrow functions are sleeker, but did you notice they add an array of more differences?

Functions are a key element of JavaScript that must be used to create reusable code.

Regular and arrow functions are the two primary types of functions, and there are many ways to define them.

Given the fact that they offer similar functions, they have some important differences that might have a significant impact on how you use them in your code.

Explore the key differences between arrow functions and regular functions.

1. Differences in Syntax

The syntax you choose when writing JavaScript functions has an important impact on how easy it is to read and understand your code.

Regular and arrow function syntax differ greatly, affecting how you create and use them.

JavaScript arrow functions use a more understandable language structure.

By combining them into a single expression or statement, you can use them for developing functions.

const add = (a, b) => a + b;

In this example, the add function takes two inputs, a and b, and returns the sum of their values.

The => symbol indicates that this is an arrow function.

Defining a normal function, on the other hand, needs the use of the function keyword, with a more lengthy syntax, as seen in this example:

function add(a, b) {
  return a + b;
}

The function keyword in this example offers a typical function that also makes use of curly brackets and the return statement.

Regular functions are more beneficial when dealing with complex syntax that demands multiple statements or expressions.

Arrow functions, on the other hand, use a more clear syntax that can make your code easier to read and understand.

2. Differences in Scope

The term “scoping” relates to how internal variables and functions of a function are accessible.

Scoping is a way in JavaScript to set up and access variables and functions in your code.

Their different scope can have a big influence on how you develop and use arrows and ordinary functions in JavaScript.

In scoping, arrow functions treat this keyword quite differently from regular functions.

Regular functions define this keyword; hence, it can change based on the context in which the function is performed.

Arrow functions, on the other hand, use the same as the static scope near them because they don’t use this keyword.

Try the following example to show the difference between the two.

Suppose you have a person object with a name field and a sayName() method which saves the person’s name using a regular function:

const person = {
  name: 'John,'

  sayName: function() {
    console.log(this.name);
  }
};

person.sayName(); // logs 'John'

The regular sayName() function is a method of the person object in this case, and the keyword within that function refers to that person object.

Let’s try it again with an arrow function:

const person = {
  name: 'John',

  sayName: () => {
    console.log(this.name);
  }
};

person.sayName(); // logs undefined

Because the arrow function in the sayName() method has its keyword, it makes use of the of the static scope that surrounds it.

That is the instance’s global scope in this situation.

Therefore, using person.sayName() returns undefined rather than “John.” This has a big influence on how you create and use functions in your code.

3. Case Studies & Best Practises

Regular functions, such as methods in an object, are better suited for functions that require their keyword.

Arrow functions are better suited for functional programming and callbacks where this keyword is not needed.

4. Differences in Function Binding

The link between this keyword and functions in your code is clarified by the phrase function binding.

The differences in function binding between arrow functions and typical functions can have an important effect on how you build and use arrow functions.

Using this keyword separates it from regular functions and connects it with different objects depending on the method used to apply the function.

One of the most important differences between regular and arrow functions is function binding.

Arrow functions, on the other hand, do not have this keyword; instead, they get it from the scopes around them.

Let’s look at an example to further understand this difference.

Suppose you have a person object with a name field and a method named sayName() that records the person’s name using a regular function:

const person = {
  name: 'John',

  sayName: function() {
    console.log(this.name);
  }
};

const anotherPerson = {
  name: 'Jane'
};

person.sayName.call(anotherPerson); // logs 'Jane'

In this example, you use the call() method to call the person object’s sayName() function with the value anotherPerson.

As a result, this, keyword is connected to the anotherPerson object, and it logs “Jane” rather than “John.”

Let’s try it again with an arrow function:

const person = {
  name: 'John',

  sayName: () => {
    console.log(this.name);
  }
};

const anotherPerson = {
  name: 'Jane'
};

person.sayName.call(anotherPerson); // logs undefined

Because the sayName() look needs its keyword, you’re adding an arrow function into it in this example.

The arrow function in this case gets the attributes of the surrounding scope, which is the global scope.

It means that when you perform person.sayName.call(anotherPerson), this keyword of the arrow function remains the global object, and undefined replaces Jane in the log.

An ordinary function may be chosen if you must connect a function to a specific value.

An arrow function, on the other hand, could be shorter and easier to understand if you don’t need to bind a function to a specific value.

5. Inferred Return

The arrow function has a meant return. If the function body is made up of just one expression, the function returns that expression.

As an example:

const double = (x) => x * 2;

This arrow function takes an argument and returns a double.

Because the function body just contains one expression, you do not need to use an explicit return keyword.

6. Differences in Compatibility

Differences in compatibility use to the addition of arrow functions in ECMAScript 6, which may not operate with earlier browsers or environments.

Regular functions, on the other hand, have been there since the beginning of JavaScript and are extensively supported.

Here’s an example of an arrow function that might not operate in more stable conditions:

const add = (a, b) => a + b;

A comparable regular function that should work in most cases is as follows:

function add(a, b) {
  return a + b;
}

When targeting older settings, use regular functions rather than arrow functions to guarantee compatibility.

When working with current browsers and environments, arrow functions can give a syntax that is easier to understand and more clear.

Choosing Between Regular & Arrow Functions in JavaScript

Arrow and regular functions in JavaScript have special characteristics and uses.

Arrow functions have a basic syntax, inherited from the context in which they are used, whereas regular functions are more flexible and can deal with complex situations.

It helps to understand how they differ and how to use them in keeping with your code’s standards.

Think about compatibility differences while deciding which type of function to use.

Finally, the arrow and regular functions in JavaScript are useful tools for creating clearer, more efficient code.

Before you log off, make your mark with a $1 coffee boost!

Click 👆 to support!

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

👋 Need Web Development Help?

I’m your go-to web developer, and I’m flexible to meet your needs. Whether you’re looking for a remote team member or a freelance expert, I’ve got you covered.

My Expertise: I specialize in:

• 💡 ReactJS
• 🎨 UI/UX Designer
• 🚀 Backend development
• 🌐 APIs
• 🚀 Node.js
• 🎨 Responsive designs
• 🏗️ Building websites from scratch
• 📊 Database management
• ✨ Figma design

Let’s Work Together: Whether it’s a small task or a big project, I’m dedicated to delivering results.

🤝 Ready to Start? Reach out to me at prehandev@gmail.com or find me on Upwork.

Thank you for considering me, Looking forward to working together!

Warm regards,

P. Rehan.