Is it possible for arrow functions to be hoisted within a class in JavaScript?

Question

Is it possible for arrow functions to be hoisted within a class in JavaScript?

class App {
  constructor() {
    this.canvas = document.createElement('canvas');
    document.body.appendChild(this.canvas);
    this.ctx = this.canvas.getContext('2d');

    this.pixelRatio = window.devicePixelRatio > 1 ? 2 : 1;

    window.addEventListener('resize', this.resize.bind(this), false);
    this.resize();

    window.requestAnimationFrame(this.animate);
  }

  resize() {
    this.stageWidth = document.body.clientWidth;
    this.stageHeight = document.body.clientHeight;
  }

  animate = () => {
    this.test(); // ---> here!
  };

  test = () => {
    console.log('here!');
  };
}

window.onload = () => {
  new App();
};

Why can an arrow function call another method within the same class without being hoisted, when regular functions cannot? Is this a unique characteristic of arrow functions in classes?

javascript hoisting

Answer 1

Answer №1

Although arrow functions do not go through the hoisting process, what you have here is more than just arrow functions - you are utilizing class fields which are a shorthand for assigning a value to the instance within the constructor (at the start of the constructor, immediately after any super calls). Your code can be simplified as:

class App {
  constructor() {
    this.animate = () => {
      this.test(); // ---> here!
    };

    this.test = () => {
      console.log('here!');
    };
    this.canvas = document.createElement('canvas');
    // ...
  }
}

This is not an issue related to hoisting.

First, this.animate is assigned a function. Then, this.test is assigned a function. Lastly, after a requestAnimationFrame, this.animate is executed.

For a simpler example:

const fn1 = () => {
  fn2();
};
const fn2 = () => {
  console.log('fn2');
};

fn1();

As long as the line that assigns the function to the variable runs before the function is called, everything should function correctly.

Answer 2

Although arrow functions do not go through the hoisting process, what you have here is more than just arrow functions - you are utilizing class fields which are a shorthand for assigning a value to the instance within the constructor (at the start of the constructor, immediately after any super calls). Your code can be simplified as:

class App {
  constructor() {
    this.animate = () => {
      this.test(); // ---> here!
    };

    this.test = () => {
      console.log('here!');
    };
    this.canvas = document.createElement('canvas');
    // ...
  }
}

This is not an issue related to hoisting.

First, this.animate is assigned a function. Then, this.test is assigned a function. Lastly, after a requestAnimationFrame, this.animate is executed.

For a simpler example:

const fn1 = () => {
  fn2();
};
const fn2 = () => {
  console.log('fn2');
};

fn1();

As long as the line that assigns the function to the variable runs before the function is called, everything should function correctly.

Is it possible for arrow functions to be hoisted within a class in JavaScript?

Answer №1

Similar questions

What is the best way to securely store a client secret within a JavaScript application?

Show an image in a specific location on the webpage using JavaScript/jQuery

Mastering state management for various input types in React

What is the best way to retrieve an array of objects that have a property matching another array?

Retrieve information stored within an object's properties

Passing in additional custom post data alongside serializing with jQuery

`Is there a specific location for this code snippet?`

Design a table within an mdDialog that allows for editing of data presented in JSON format

The .forEach() method in Javascript is not suitable for DOM nodes as they are subject to change during the iteration

What's the most effective method to incorporate additional events into this element using the conditional operator?

Unexpected outcome when converting a while loop to a .forEach statement

Navigating in a Curved Path using Webkit Transition

Encountering difficulties with image processing on a web page

Guidelines for deploying a node.js REST API application successfully in a production environment

Deciphering the mechanics of collection referencing in mongoose

Client-Specific User Portal

While creating a NodeJS backend to complement a ReactJS frontend, I am continuously encountering a 500 error

Data from HTML not being transferred by Angular Forms

What is the correct way to have JSON.Stringify properly parse a variable?

Exploring the power of Vue.js with dynamic HTML elements and utilizing Vue directives within Sweet Alert