How hoisting works for a class in JavaScript?

Question

The term hoisting in JavaScript class reference is: you first need to declare your class and then access it, otherwise code like the following will throw a ReferenceError:

const p = new Rectangle(); // ReferenceError
class Rectangle {}

In other references: all variable declarations are hoisted to the top of their scope regardless of where the actual declaration has been made.

However MDN says:

Hoisting is a term you will not find used in any normative specification prose prior to ECMAScript® 2015 Language Specification. Hoisting was thought up as a general way of thinking about how execution contexts (specifically the creation and execution phases) work in JavaScript. However, the concept can be a little confusing at first.

It looks hoist means a lot what I understand. However, it is weird to use something before declaration, but is it work differently for classes whereas class is also a type of function in JavaScript.

Answer 1

Actually classes are hoisted as the variable binding is available in the whole scope, but they are not initialised.

Ref: Are variables declared with let or const not hoisted in ES6?

Answer 2

Hoisting doesn't work for classes. Only for variables and functions.
It is possible to initialize a variable or call a function before it's declared.
See the following snippet. It doesn't throw error but logs "Foo" onto the console.

var p = new rectangle();
function rectangle() { console.log("Foo") }

Answer 3

Hoisting in Javascript is putting declarations into memory before it executes any code segment is that it allows you to use a function before you declare it in your code.

For example:

foo("bar");

function foo(name) {
  console.log(name);
}

Javascript hoisting allows you to call the function before it has been declared. NOTE: Javascript doesn't have hoisting for classes.

Answer 4

Class is Reference type

const will only work with Value type data

so you can't use Class as const

Rectangle p = new Rectangle(); 
class static Rectangle {}

Answer 5

Reference 1: https://scotch.io/tutorials/understanding-hoisting-in-javascript

JavaScript classes too can be loosely classified either as:

• Class declarations
• Class expressions

Class declarations

Much like their function counterparts, JavaScript class declarations are hoisted. However, they remain uninitialised until evaluation. This effectively means that you have to declare a class before you can use it.

var Frodo = new Hobbit();
Frodo.height = 100;
Frodo.weight = 300;
console.log(Frodo); // Output: ReferenceError: can't access lexical declaration `Hobbit' before initialization

class Hobbit {
  constructor(height, weight) {
    this.height = height;
    this.weight = weight;
  }
}

So, as far as class declarations go, to access the class declaration, you have to declare first.

Class expressions

Much like their function counterparts, class expressions are not hoisted. Here's an example with the un-named or anonymous variant of the class expression.

var Square = new Polygon();
Square.height = 10;
Square.width = 10;
console.log(Square); // Output: TypeError: Polygon is not a constructor

var Polygon = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

There's a bit of an argument to be made as to whether JavaScript es6 let, const variables and classes are actually hoisted, roughly hoisted or not hoisted. Some argue that they are actually hoisted but uninitialised whilst some argue that they are not hoisted at all. Therefore, we should make it a habit to declare and initialise JavaScript variables before use. Using strict mode in JavaScript es5 can help expose undeclared variables.

P.S.: Other references to be continued...