JavaScript Classes: Like a pro

Classes in JavaScript is a relatively complex topic for most people working with or learning JavaScript. Most tutorials try to simplify the topic but, unfortunately, end up complicating the topic for most of us. I think the best way to get done with this topic once and for all is to concentrate on the things most tutorials don’t talk about, important terms about JavaScript classes. Example, state, and instances of a class. Most people who are relatively new to programming may not initially get an intuition of what these terms mean in programming, but we will try to keep things as simple as possible.

The lesson might be long, so we will divide it into several articles.

Learning goals:
What is a class?
What does a class do?
What is initializing a class?
Difference between a constructor and a super
What is an instance of a class?
What is a state in a class?
When to and not use this in a class.
What is a class?

A class in object-oriented programming (OOP) is a template. It acts as a predefined framework that simplifies and standardizes the creation of objects. Example:

class User {
  constructor (name, age, occupation) {
    this.occupation = occupation;
    this.name = name;
    this. age = age;

  }
}
const user1 = new User ("john" , 25, "chef");
console.log(user1);
 // output: User { occupation: 'chef', name: 'john', age: 25 }

As seen from the output, we can create a concrete object from the class blueprint. Or what we call a class instance.
A class instance is a single, concrete object created from a class blueprint.

// This is a class instance.
User { occupation: 'chef', name: 'john', age: 25 }

How to Create an Instance
We use the new keyword:

const user1 = new User ("john" , 25, "chef");

Each class instance holds data. For example, this class holds the data concerning our first object. That is the name, age, and occupation of our first user, John. This data is what is referred to us as the state of a class.
A state refers to the data (properties) stored inside an object at any given time. It represents the object's current condition or configuration.
The first instance of a class:

class User {
  constructor (name, age, occupation) {
    this.occupation = occupation;
    this.name = name;
    this. age = age;

  }
}
const user1 = new User ("john" , 25, "Chef");
console.log(user1);
//Below is the first instance of our class User and its state.
 // output: User { occupation: 'Chef', name: 'john', age: 25 }
The second instance of a class:
class User {
  constructor (name, age, occupation) {
    this.occupation = occupation;
    this.name = name;
    this. age = age;

  }
}
const user2 = new User ("James”, 13, "Student");
console.log(user2);
// Below is the second instance of our class User and its state.
 // output: User { occupation: 'Student', name: 'James, age: 13 }

Updating State
The state of a class can be modified after object creation.

const user2 = new User ("James”, 13, "Student"); // creating user2
user2.age = 26; // updating age state of user2 once user2 has been created

From the examples, you can see why we are referring to a class as a template. We are able to create several objects (class instances) from a single class initialization.

Characteristics of instances and states

Class Instances and why they are useful.

1. Instances allow us to create numerous objects where each class has its own state. It is important to note that each instance of a class is different from its predecessor in that it has its own copy of properties.
2. Instances share method. Methods are like functions and are a major property of a class. Learn about them in the next article, where we learn how to appropriately use this in a class.

State and why it is useful.

1. We can update the state of a class. Refer to the example given earlier in the article.
2. The state of a class is used to cause dynamic behavior of class methods based on the prevailing state of a class. See the next lesson.
3. Encapsulation—allows for each class instance to be manipulated independently without interfering with other class instances available at a given time.
4. Memory Efficiency—possible to apply different coding patterns, e.g., the flyweight pattern, to effectively conserve space when working with class instances.

Conclusion
I hope understanding these terms helps demystify classes. If this article was helpful, check the follow-up article where we look at class methods and the this property of JavaScript classes.