Why are ES6 classes not hoisted?

by

Why are ES6 classes not hoisted?

Actually they are hoisted (the variable binding is available in the whole scope) just like let and const are – they only are not initialised.

It would make sense to hoist its definition

No. It’s never a good idea to use a class before its definition. Consider the example

var foo = new Bar(); // this appears to work
console.log(foo.x)   // but doesn't

function Bar(x) {
    this.x = x || Bar.defaultX;
}
Bar.defaultX = 0;

and compare it to

var foo = new Bar(); // ReferenceError
console.log(foo.x);

class Bar {
    constructor (x = Bar.defaultX) {
        this.x = x;
    }
}
Bar.defaultX = 0;

which throws an error as you would expect. This is a problem for static properties, prototype mixins, decorators and everything. Also it is quite important for subclassing, which broke entirely in ES5 when you used a class with its non-adjusted prototype, but now throws an error if an extended class is not yet initialised.

More Related Contents:

  1. What’s the difference between using “let” and “var”?
  2. When should I use a return statement in ES6 arrow functions
  3. How to update nested state properties in React
  4. “Uncaught SyntaxError: Cannot use import statement outside a module” when importing ECMAScript 6
  5. Using Node.js require vs. ES6 import/export
  6. How to load external scripts dynamically in Angular?
  7. Curly Brackets in Arrow Functions
  8. ES6 destructuring function parameter – naming root object
  9. What is the motivation for bringing Symbols to ES6?
  10. How to destructure into dynamically named variables in ES6?
  11. Which browsers support import and export syntax for ECMAScript 6?
  12. ECMAScript 2015: const in for loops
  13. Why do arrow functions not have the arguments array? [duplicate]
  14. How to use code from script with type=module [duplicate]
  15. Using Objects in For Of Loops
  16. Spreading undefined in array vs object
  17. ECMAScript 6 class destructor
  18. Getting a list of statics on an ES6 class
  19. Are HTMLCollection and NodeList iterables?
  20. How can I mock the imports of an ES6 module?
  21. spread operator vs array.concat()
  22. Replace element at specific position in an array without mutating it
  23. Promises, pass additional parameters to then chain
  24. String interpolation on variable
  25. Why should forEach be preferred over regular iterators?
  26. require(‘babel/register’) doesn’t work
  27. What is the most efficient way to copy some properties from an object in JavaScript?
  28. Object destructuring solution for long arrays?
  29. ES6 export default with multiple functions referring to each other
  30. What is the exact parsing precedence of arrow function (fat arrow =>) in Javascript?

Leave a Comment