Bootcamp
Search…
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 2mo ago