Class Component Prework - Classes in JavaScript

Learning Goals

By the end of this lesson, you will be able to:

explain what a class is
define classes using the class keyword
create object instances
call methods on object instances

Vocabulary

this - a keyword with a value that changes depending on the context in which it’s used
class - a special function which functions as a template for creating objects
object instance - objects that were created from a class and contain the data and functionality defined in that class

Warm Up

Answer the following questions. Look at the answers below only after answering on your own:

What do you know about methods on objects?
What do you know about the this keyword?

Then, complete this replit to review key concepts about object methods and this.

Here’s how your answers might look. Don’t look until you’re done!

What do you know about methods on objects?

Objects can have all kinds of properties, such as a function. This function would be called a method.
You can call functions on objects using dot notation. This is known as calling a method.

You can create them in several ways, such as:

const obj = {
  methodName: function() {
    // Method implementation
  }
};
    
// OR

const obj = {
  methodName() {
    // Method implementation
  }
};

// OR

const obj = {
  methodName: () => {
    // Method implementation
  }
};    

// ETC

What do you know about the this keyword?
- By default, this refers to the global object (or in the browser, the window).
- this within function code invoked using the new operator refers to the new instance of that object.
- When executing a function as a method on an object, this refers to that object.
Replit answers:
```
// 1.
animal.makeSound('Bark!');

// 2. 
// no answer since this is open ended.

// 3. 
// It should return 5, since 20-15 is 5. 
// this.capacity is 20
// this.attendeeCount is 15
// this refers the object 'networkingEvent'
```

Classes

Classes serve as object factories that allow us to create multiple objects of the same type, which are commonly referred to as object instances. In other words, a class is a an object template.

The syntax for defining a class is as follows:

class NameOfClass {
  constructor() {
    // define properties here
  }
  // define methods here
}

class User {
  constructor() {
    this.name = 'Bill',
    this.age = 32,
    this.email = 'bill@gmail.com',
  }

  updateAge() {
    this.age = this.age++;
  }
}

Please note the use of the class keyword and the function constructor. The constructor function is a special function that gets called when an object instance is created. Its job is to create the same properties on the new object instances we create with our class.

Next, let’s take a look at how to create an object using a class - or ‘create an instance’ of a class.

const newObjectInstance = new NameOfClass();

const bill = new User();

Making objects dynamic

The constructor function can accept arguments, which allows the class to have dynamic properties. For example:

class User {
  constructor(name, age, email) {
    this.name = name,
    this.age = age,
    this.email = email
  }
}

Now, we can make multiple users and give them all their own names, ages, and emails.

const jenny = new User('Jenny', 24, 'frogperson@aol.com');
const bill = new User('Bill', 33, 'bill@gmail.com');
const alfred = new User('Alfred', 56, 'al888@hotmail.com');

Practice

class User {
  constructor(name, age, email) {
    this.name = name,
    this.age = age,
    this.email = email
  }

  updateAge() {
    this.age++;
  }

  updateEmail(newEmail) {
    this.email = newEmail;
  }
}

Before writing any code, answer the following question.

Why do we use the this keyword in the methods updateAge and updateEmail? (Feel free to do some research to help you answer this question.)

Write the following code in a replit, the devtools console, or somewhere else comfortable. Once you’re done, feel free to reference the answers below.

Based on the class definition above, create a new instance of a user.
Using what you already know about objects and methods, utilize the object instance you just created and update the user’s age.
Using what you already know about objects and methods, utilize the object instance you just created and update the user’s email address.

Tip: use console logs to check that everything is working as you expect.

A solution might look something like:

const henrietta = new User('Henrietta', 40, 'h@gmail.com');

henrietta.updateAge();
henrietta.updateEmail('newemail@gmail.com');

More Practice

Define a class of your own choice. Make sure it has some properties and at least one method.

To test it out, instantiate the class (make an object instance).

Fun Fact

OOP, or Object Oriented Programming, is a programming paradigm based on classes and objects. In JS, you would utilize classes if you wrote your code in an OOP style.

We’ve been primarily working in a more functional programming paradigm throughout this program.

If you’re interested in learning more, please research the differences between functional and object oriented programming.

Checks for Understanding

What is a class?
How do you define a class in code?
How do you create an object instance using a class?
How do you call a method on an object instance?