The Difference Between Regular Functions and Arrow Functions in JavaScript

The Difference Between Regular Functions and Arrow Functions in JavaScript

<p>Other then the syntactical differences. The main difference is the way the this keyword behaves? In an arrow function, the this keyword remains the same throughout the life-cycle of the function and is always bound to the value of this in the...

Other then the syntactical differences. The main difference is the way the this keyword behaves? In an arrow function, the this keyword remains the same throughout the life-cycle of the function and is always bound to the value of this in the closest non-arrow parent function. Arrow functions can never be constructor functions so they can never be invoked with the new keyword. And they can never have duplicate named parameters like a regular function not using strict mode.

Here are a few code examples to show you some of the differences
this.name = "Bob";

const person = { name: "Jon",

<span style="color: #008000">// Regular function</span>
func1: <span style="color: #0000ff">function</span> () {
    console.log(<span style="color: #0000ff">this</span>);
},

<span style="color: #008000">// Arrow function</span>
func2: () =&gt; {
    console.log(<span style="color: #0000ff">this</span>);
}

}

person.func1(); // Call the Regular function // Output: {name:"Jon", func1:[Function: func1], func2:[Function: func2]}

person.func2(); // Call the Arrow function // Output: {name:"Bob"}

The new keyword with an arrow function
const person = (name) => console.log("Your name is " + name);
const bob = new person("Bob");
// Uncaught TypeError: person is not a constructor

If you want to see a visual presentation on the differences, then you can see the video below:

arrow functions javascript regular functions arrow functions vs normal functions difference between functions and arrow functions

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

5 Differences Between Arrow and Regular Functions

The 5 must-know differences between arrow and regular functions in JavaScript. In this post, I’m going to show the main differences between the two, so you could choose the right syntax for your needs.

JavaScript: The Good Parts of Arrow Functions

JavaScript: The Good Parts of Arrow Functions. You might not know this one major difference between normal functions and ES6 arrow functions in JavaScript.

Function Expression vs Function Declaration in JavaScript

In this article, we will acquaint ourselves with three simple terms: function declaration, function expression, and hoisting.

How “this” binds in regular functions and arrow functions in JavaScript

Arrow syntax automatically binds this to the surrounding code’s context…but what does this mean? Let me explain what does that even means! For that, we must first understand what was the problem that can be solved using arrow functions. Let us talk about the scenario where we use a normal function instead of an arrow function.

Arrow functions vs regular functions in JavaScript

How are arrow functions different than regular functions in JS? The only difference is that now in the stack trace that appears when there is an error, you won’t see the function name any more.