Similarities and differences between Class and Constructor Functions

In JavaScript, classes are similar to constructor functions in that they both provides ways to create objects with prototypal inheritance. Some claim that classes are essentially syntatic sugar for over constructor functions, but there are differences...

Classes differ from constructor functions in that

• They are labelled by a special internal property called [[IsClassConstructor]]
• Class must be called with new
• Class methods are non-enumerable, so we can't use for..in to retrieve class methods (which we don't usually want anyway)
• Classes always use strict inside its construct

class User {
  greet() {
    return "Hello, there"
  }
}

Class Expressions

Classes can be defined inside another expression, passed around, returned, assigned, etc.

// Class expression
let User = class {
  greet() {
    return "Heyo";
  }
}

Class expressions may also have a name:

let User = class CoolClass {
  greet() {
    return CoolClass
  }
}

new User().greet(); // Returns CoolClass definition
console.log(CoolClass) // error, not visible outside of the class

Class fields

Class fields is a feature that allows you to define properties directly on the class itself, instead of within the constructor method. It provides concise and readable code:

class User {
  name = "Joseph";
  surname = "Joestar";

  greet() {
    console.log(`Hello, this is ${this.name} ${this.surname}`)
  }
}

const user = new User();
user.greet(); // Hello, this is Joseph Joestar

Add a # in front of the variable turns properties into private ones: #name.

You can also create static fields to define a property that is shared among all instances of the class.

class User {
  static type = "Admin";

  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hi, I am ${this.name} and I have ${this.type} permissions`)
  }
}

const user = new User("Joseph");
user.greet(); // Output: Hi, I am Joseph and I have Admin persmissions

Note: Class fields are a relatively new feature in JavaScript and may not be supported across all browsers and JavaScript environments. You may need to use polyfill or a transpiler like Babel to ensure compatibility with older environments.