# Classes in JavaScript

### Class basic syntax

Besides using a constructor function there is a more advance object oriented programming construct called class in JavaScript. The basic syntax is as follows:

```javascript
class MyClass {
	constructor() {}
    method1() {}
    method2() {}
}
```

To utilize this class that you have just created you would use the same syntax as constructor functions: `let x = new MyClass()` to create a new object with all of the methods listed.

The `constructor()` method is automatically called by `new` and you would just do the same thing as a constructor function.

##### What happens underneath

When you write `class User {...}` what it happens underneath is that

1. Creates a function named `User`, and that is the result of the class declaration. The function code is taken from the `constructor` method, assume empty you didn't write such method
2. Stores class method that you wrote inside the class in `User.prototype` just like all the other native prototypes, i.e. `String.prototype, Array.prototype, Number.prototype`

[![image.png](https://wiki.tamarinne.me/uploads/images/gallery/2022-12/scaled-1680-/J6Bimage.png)](https://wiki.tamarine.me/uploads/images/gallery/2022-12/J6Bimage.png)

So all the method that you call on the instantiated object will be on the taken from `YourClass.prototype.<methods>`

##### Not just a syntactic sugar

Many people say that the class declaration is a syntaxsyntactic sugar on top of constructor function. Yes, but there are still some differences:

1. The constructor created by class declaration must be invoked using `new` unlike constructor method where you can invoke it directly, even though it won't work properly
2. Class methods are non-enumerable, compared to constructor function's methods
3. Code inside class declaration are always `use strict`

##### Class expression

Like function expression you can also store class declaration into a variable or as something you would returned from a function, basically be part of another expression.

```javascript
let User = class {
	sayHi() {
    	console.log("Hi");
	}
};
```

##### Getters/setters

You can also provide getters and setters as well

##### Class fields

You can also add properties to the instances of class that you created.

These class fields are set on individual objects not under `Class.prototype`, so if you change one on one object, the other's class fields aren't affected.

```javascript
class User {
	name = "John";
    
    sayHi() {
    	console.log(`Hi I am ${this.name}`)
	}
}

new User().sayHi(); // Hello, John!
```