#19 JavaScript Code Snippets: Classes and Object-Oriented Programming (OOP)

class User {}

const user =
 new User();

console.log(
 typeof user
);

Instances created with new are objects.

class User {}

const user =
 new User();

console.log(
 user instanceof User
);

The object was created from User.

class User {
 constructor() {
   console.log("Created");
 }
}

new User();

The constructor runs automatically during object creation.

class User {
 constructor() {
   this.name = "JS";
 }
}

const user =
 new User();

console.log(
 user.name
);

Properties assigned with this belong to the instance.

class User {
 greet() {
   return "Hello";
 }
}

const user =
 new User();

console.log(
 user.greet()
);

Methods are available on class instances.

class User {}

const a =
 new User();

const b =
 new User();

console.log(
 a === b
);

Each new call creates a different object.

class User {
 greet() {
   return "JS";
 }
}

const user =
 new User();

const fn =
 user.greet;

console.log(
 fn()
);

This method does not use this, so it executes normally.

class User {
 constructor() {
   this.age = 20;
 }
}

const user =
 new User();

user.age = 25;

console.log(
 user.age
);

Instance properties can be updated.

const User =
 class {
   greet() {
     return "Hi";
   }
 };

const user =
 new User();

console.log(
 user.greet()
);

Classes can be assigned to variables.

class User {}

console.log(
 typeof User
);

Classes are special functions in JavaScript.

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

const user =
 new User("React");

console.log(
 user.name
);

Constructor arguments initialize instance data.

class User {
 constructor(
   name = "Guest"
 ) {
   this.name = name;
 }
}

const user =
 new User();

console.log(
 user.name
);

Default parameters work inside constructors.

class User {
 constructor() {
   return {};
 }
}

const user =
 new User();

console.log(
 typeof user
);

Returning an object from a constructor replaces the instance.

class User {
 constructor() {
   this.name = "JS";
 }

 getName() {
   return this.name;
 }
}

const user =
 new User();

console.log(
 user.getName()
);

Methods access instance data using this.

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

 greet() {
   return "Hi " + this.name;
 }
}

const user =
 new User("JS");

console.log(
 user.greet()
);

Methods can use constructor-initialized properties.

class Animal {
 speak() {
  return "Animal";
 }
}

class Dog extends Animal {}

const dog =
 new Dog();

console.log(
 dog.speak()
);

Dog inherits methods from Animal.

class Animal {
 constructor() {
  this.type = "Animal";
 }
}

class Dog extends Animal {}

const dog =
 new Dog();

console.log(
 dog.type
);

Parent constructor executes automatically when child has no constructor.

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

class Dog extends Animal {
 constructor() {
  super("Tommy");
 }
}

const dog =
 new Dog();

console.log(
 dog.name
);

super() calls the parent constructor.

class Animal {
 speak() {
  return "Hello";
 }
}

class Dog extends Animal {}

const dog =
 new Dog();

console.log(
 dog.speak()
);

Methods are inherited through extends.

class Animal {
 speak() {
  return "Animal";
 }
}

class Dog extends Animal {
 speak() {
  return "Dog";
 }
}

console.log(
 new Dog().speak()
);

Child methods override parent methods.

class User {
 static greet() {
  return "Hello";
 }
}

console.log(
 User.greet()
);

Static methods belong to the class itself.

class User {}

User.version =
 "1.0";

console.log(
 User.version
);

Properties can be attached directly to classes.

class User {
 static hello() {
  return "JS";
 }
}

console.log(
 User.hello()
);

Static methods are called on the class.

class User {
 static hello() {
  return "JS";
 }
}

const user =
 new User();

console.log(
 typeof user.hello
);

Instances cannot directly access static methods.

class User {
 static greet() {
  return "Hi";
 }
}

class Admin
 extends User {}

console.log(
 Admin.greet()
);

Static methods are inherited by child classes.

class User {
 get name() {
  return "JS";
 }
}

const user =
 new User();

console.log(
 user.name
);

Getter behaves like a property.

class User {
 set name(value) {
  this._name =
   value;
 }
}

const user =
 new User();

user.name =
 "React";

console.log(
 user._name
);

Setter executes when a value is assigned.

class User {
 set name(v) {
  this._name = v;
 }

 get name() {
  return this._name;
 }
}

const user =
 new User();

user.name =
 "JS";

console.log(
 user.name
);

Getter returns the stored value.

class Rectangle {
 constructor(w,h) {
  this.w = w;
  this.h = h;
 }

 get area() {
  return this.w *
         this.h;
 }
}

const r =
 new Rectangle(
  5,
  4
 );

console.log(
 r.area
);

Getter computes area dynamically.

class User {
 set age(v) {
  this._age =
   v < 0
   ? 0
   : v;
 }
}

const user =
 new User();

user.age = -5;

console.log(
 user._age
);

Setter validates the incoming value.

class User {
 #name = "JS";

 getName() {
  return this.#name;
 }
}

const user =
 new User();

console.log(
 user.getName()
);

Private fields can be accessed inside class methods.

class User {
 #name = "JS";
}

const user =
 new User();

console.log(
 typeof user.name
);

Private fields are not exposed as normal properties.

class User {
 #secret() {
  return "Hidden";
 }

 getSecret() {
  return this.#secret();
 }
}

console.log(
 new User()
  .getSecret()
);

Private methods are accessible only within the class.

class Counter {
 #count = 0;

 increment() {
  this.#count++;
 }

 getCount() {
  return this.#count;
 }
}

const c =
 new Counter();

c.increment();

console.log(
 c.getCount()
);

Encapsulation hides internal state while allowing controlled access.

class User {}

const user =
 new User();

console.log(
 user instanceof User
);

instanceof checks the prototype chain.

class User {}

const user =
 new User();

console.log(
 user.constructor ===
 User
);

constructor points to the class function.

class User {}

const user =
 new User();

console.log(
 Object.getPrototypeOf(
  user
 ) === User.prototype
);

Instances are linked to the class prototype.

class User {
 constructor() {
  this.name = "JS";
 }

 getName() {
  return this.name;
 }
}

const user =
 new User();

const fn =
 user.getName;

console.log(
 fn()
);

Class methods run in strict mode. Calling the extracted method loses its this binding, causing a TypeError.

console.log(
 typeof User
);

class User {}

Classes are hoisted but remain in the Temporal Dead Zone until initialized.

class User {}

User();

Class constructors cannot be invoked without new.

class Animal {
 speak() {
  return "Animal";
 }
}

class Dog extends Animal {
 speak() {
  return "Dog";
 }
}

console.log(
 new Dog().speak()
);

The child method overrides the parent method.

class Animal {
 speak() {
  return "Animal";
 }
}

class Dog extends Animal {
 speak() {
  return super.speak()
    + " Dog";
 }
}

console.log(
 new Dog().speak()
);

super accesses parent class methods.

class User {
 static hello() {
  return "JS";
 }
}

const user =
 new User();

console.log(
 typeof user.hello
);

Static methods belong to the class, not instances.

class User {}

const a =
 new User();

const b =
 new User();

console.log(
 Object.getPrototypeOf(a)
 ===
 Object.getPrototypeOf(b)
);

All instances share the same prototype object.

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

 greet() {
  return this.name;
 }
}

const user =
 new User("JS");

console.log(
 user.greet ===
 User.prototype.greet
);

Class methods are stored on the prototype and shared by all instances.