JavaScript: The Good Parts of Arrow Functions

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.

When I was at a coding boot camp learning about JavaScript and ES6, everyone in class seemed to have some level of confusion around normal function declarations and the new ES6 arrow function declarations. Common questions we had included:

  • When should we use normal functions or arrow functions?
  • What are the differences between normal functions and arrow functions?
  • Are we able to use one or the other in all situations for consistency?

After doing some research, I found that normal functions and arrow functions are actually not interchangeable in certain circumstances. Apart from the syntax, normal functions and arrow functions have another major difference: the way they bind the this keyword in JavaScript.

Let’s look at a very simple example. Suppose we have a simple JavaScript object:

const obj1 = {
      fullName: 'Object 1',
      color: 'red',
      print: function() {
        console.log(`${this.fullName} is ${this.color}`);
      }
    };

    obj1.print(); // Object 1 is red
view raw
object1.js hosted with ❤ by GitHub

We have a print method on obj1 that logs a string to the console. The result is what we have expected, that this in the print method refers to obj1 itself.

Now let’s create another object with a slightly different print method:

const obj2 = {
      fullName: 'Object 2',
      color: 'blue',
      print: function() {
        setTimeout(function() {
          console.log(`${this.fullName} is ${this.color}`);
        }, 1000);
      }
    };

    obj2.print(); // undefined is undefined
view raw
object2.js hosted with ❤ by GitHub

Now the print method will only log the resulting string after one second due to setTimeout . But why is it logging undefined is undefined instead of Object 2 is blue ?

es2015 javascript es6 javascript-tips arrow-functions function

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

JavaScript = Arrow Functions => ES6

Basic Syntax Explained for Beginners. Arrow function (also known as “fat arrow; =>” function) was introduced in ECMAScript 2015 as a new syntax for declaring functions. JavaScript = Arrow Functions => ES6

The real reason why JavaScript has arrow functions

The real reason why JavaScript has arrow functions Nowadays, all my code is based on the use of arrow functions. If you are still not using them yourself, then don’t be ashamed of who you are. That’s your parent’s job. Instead, find about all the benefits that you can get by using arrow functions like the cool kids. You may notice that the code is shorter and that there is an arrow. Everything before the arrow is arguments of the function and everything after the arrow is always returned as the result of the function.

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.

Javascript Arrow Function Example | ES6 Arrow functions

JavaScript Arrow Function was introduced in ES2015(ES6). Arrow functions have more concise syntax for writing function expressions.

JavaScript Tutorial - ES6 Arrow Functions

In this JavaScript Tutorial, I give a tutorial on ES6 arrow functions. I will explain how to write on by converting a regular named function or anonymous function to use the new arrow function syntax. This will cover a whole variety of examples and how to convert them to simplify your JavaScript code.