Classes in Javascript

Hey guys, I’m more than halfway through freecodecamp. I don’t see anywhere on the curriculum that mentions anything about Classes concept? Where can I find that?

Objects start here:

As far as I can tell, classical inheritance isn’t really a big thing in Javascript. You can do it, but Javascript is more built for prototypical inheritance.

Discussion of Classes here:

Classes are part of OOP. JS is not true OOP so classes in JS are not “true” classes, at least compared to something like Java. In JS, classes are really just wrappers for object constructors, so they are OOP-ish, but not real OOP.

As Jeremy mentioned, they are discussed in FCC. They are also used a lot in the React section.

2 Likes

No wonder. I think I ran into classes while learning Angular. I’m assuming it’s the same with React. Are class concept mainly used in these new frameworks?

Not necessarily. They are a very important part of React, at least how it used to be done - a lot of modern React doesn’t use classes (but you still have to know it). I don’t know about Angular, but it uses JS.

But you can use classes is you want. Especially if someone comes from an OOP background, then they might tend to favor classes. One of the people with whom I work likes to use classes when writing modules.

So, yeah, you should be familiar with them, but I think it’s safe to say that they aren’t as important as they are in a true OOP language. But you may run into projects/libraries that use them so they are good to know.

I think it is a fair observation that FCC’s curriculum on classes is a little light - but there is a lot of ground to cover.

1 Like

I noticed classes were introduced in es6, however, it wasn’t covered at all on Freecodecamp curriculum. Freecodecamp focuses more on constructors, when I look into code academy, there is an emphasis on classes, and no mentions of constructors? Just want to make sure I’m on the right path to learning javascript.

If you are talking about constructor functions (function Example() {) Vs class syntax (class Example {), those are the same thing.

1 Like

Right, as Dan says, the constructor functions came first, they were JS’s first attempt to get OOP-ish behavior. Classes were added later to make it look like what people think of as OOP, but under the covers they are really just constructor functions.

But again, if you come from a true OOP background, then these won’t behave exactly as you expect.

1 Like

Hey Kevin, thank you kindly for the quick response. Yes, I think the confusing part was that I learned class first through angular and javascript, and then going through this curriculum and diving deep into constructors was confusing. But you’re saying the concept of the constructor is like classes? If that’s the case, it may make it easier for me to learn constructors!

Yeah, it’s exactly the same. So as an example, sorry if it uses any syntax you aren’t familiar with, I’ve just tried to make relatively realistic:

Say you have a class that creates a User. The constructor sets an id, a name, an email and whether the user is validated their account.

Instead of using the constructor directly, it has a create method that hits a [fictional] API to register a user, and if that succeeds it returns an ID, then runs the constructor to build the user object to use in the program.

Assuming the fictional API sends the user an email asking them to complete registration, the other method checks against the API to see if that has happened (eg if they are validated).

class User {
  constructor (id, name, email) {
    this.id = id;
    this.name = name;
    this.email = email;
    this.isValidated = false;
  }

  static async create(name, email) {
    const { id } = await API.createNewUser(name, email);
    return new User(id, name, email);
  }

  async validate() {
    const {validated } = await API.validateUser(this.id);
    this.isValidated = validated;
  }

  greet() {
    if (this.isValidated) {
      return `Hello ${this.name}!`;
    } else {
      return "Sorry, you aren't validated at the minute. Please respond to the email sent to you."
    }
  }
}

The following is the same:

// This is exactly the same as the class syntaxes `constructor`
function User (id, name, email) {
  this.id = id
  this.name = name;
  this.email = email;
  this.isValidated = false;
} 

// This is exactly the same as the `static` method in the `class` version
User.create = async function  (name, email) {
  const { id } = await API.createNewUser(name, email);
  return new User(id, name, email);
}

// This is exactly the same as the prototype method in the `class` version
User.prototype.validate = async function () {
  const {validated } = await API.validateUser(this.id);
  this.isValidated = validated;
}

User.prototype.greet() {
  if (this.isValidated) {
    return `Hello ${this.name}!`;
  } else {
    return "Sorry, you aren't validated at the minute. Please respond to the email sent to you."
  }
}

In both cases, you use it like:

const dan = await User.create("Dan Couper", "dan@example.com");
dan.isValidated
// false, I haven't responded to the email I was sent yet
dan.greet()
// "Sorry, you aren't validated at the minute. Please respond to the email sent to you."
// ....
// some time later
await dan.validate()
dan.isValidated
// true
dan.greet()
// "Hello, Dan Couper"

2 Likes