Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
0.10: Introduction to Classes
​
Classes are templates for creating objects.
Without classes, this is how you would probably create multiple car objects.
1
var car1 = {
2
brand: "ferrari",
3
color: "red",
4
};
5
​
6
var car2 = {
7
brand: "volkswagon",
8
color: "blue",
9
};
10
​
11
var car3 = {
12
brand: "toyota",
13
color: "black",
14
};
Copied!
An optimization to this method would be using a function to generate the objects.
1
function createCar(brand, color) {
2
return {
3
brand: brand,
4
color: color,
5
};
6
}
7
​
8
var car1 = createCar("ferrari", "red");
9
var car2 = createCar("volkswagon", "blue");
10
var car3 = createCar("toyota", "black");
Copied!

Classes are templates for creating objects

See the code below. Note the use of the new keywords class, constructor and new.
The keyword class is used when declaring a new class. The keyword constructor is the special name of the function that creates and returns the new object. The keyword new is used when using a constructor to create a new object.
1
class Car {
2
constructor(brand, color) {
3
this.brand = brand;
4
this.color = color;
5
}
6
}
7
​
8
var car1 = new Car("ferrari", "red");
9
var car2 = new Car("volkswagon", "blue");
10
​
11
class User {
12
constructor(name, email, pw) {
13
this.name = name;
14
this.email = email;
15
this.passwordHash = pw;
16
}
17
}
18
​
19
var user1 = new User("someone", "[email protected]", "xxxx...xxxx");
20
var user2 = new User("someone else", "[email protected]", "xoxo...xoxo");
Copied!

Methods

The power of using classes is seen when you add methods to a class declaration. Methods can be thought of as helper functions, build in to the class.
1
class Car {
2
constructor(brand, color) {
3
this.brand = brand;
4
this.color = color;
5
}
6
//------------------------------------------------
7
//method declared using regular function syntax
8
repaint(newColor) {
9
this.color = newColor;
10
}
11
//------------------------------------------------
12
}
13
​
14
var car1 = new Car("ferrari", "red");
15
​
16
console.log(car1.color); //red
17
car1.repaint('black');
18
console.log(car1.color); //black
19
​
20
class User {
21
constructor(name, email, pw) {
22
this.name = name;
23
this.email = email;
24
this.passwordHash = pw;
25
}
26
//------------------------------------------------
27
//method declared using arrow function syntax
28
resetPassword = () => this.passwordHash = ".";
29
//------------------------------------------------
30
}
31
​
32
​
33
var user1 = new User("someone", "[email protected]", "xxxx...xxxx");
34
console.log(user1.passwordHash); //xxxx...xxxx
35
user1.resetPassword();
36
console.log(user1.passwordHash); //.
Copied!

Using Classes is a great tool for organizing your code

As your write larger, more complex apps with more data and even more functions to process that data, organizing your code in classes will be invaluable.

Exercise

Think of your more complex recent projects, i.e. UFO Sightings, Bird Watching, Recipes, Labels, Categories, etc.
How would using classes help you keep your code clean?
Last modified 10d ago