Just like the function keyword defines a new function, the keyword for
defining a new class is class. By convention, class names start with
capital letters to distinguish them from JavaScript function and variable names
(e.g. MyClass vs. myFunction).
Remember that classes are blueprints for building multiple objects of the same type. The general format for declaring a class is:
1class ClassName {
2 constructor(parameters) {
3 //assign properties
4 }
5 //define methods
6}
Note the keyword constructor. This is a special method for creating objects
of the same type, and it assigns the key/value pairs. Parameters are passed
into constructor rather than the class declaration.
Let's set up an Astronaut class to help us store data about our animal
crew. Each animal has a name, age, and mass, and we assign these
properties in constructor as follows:
1class Astronaut {
2 constructor(name, age, mass) {
3 this.name = name;
4 this.age = age;
5 this.mass = mass;
6 }
7}
The this keyword defines a key/value pair, where the text attached to
this becomes the key, and the value follows the equal sign (this.key =
value).
constructor uses the three this statements (this.name = name, etc.)
to achieve the same result as the object declaration
let objectName = {name: someString, age: someNumber, mass: someMass}. Each
time the Astronaut class is called, constructor builds an object with
the SAME set of keys, but it assigns different values to the keys based on the
arguments.
Note
Each class requires one constructor. Including more than one
constructor results in a syntax error. If constructor is left out of
a class declaration, JavaScript adds an empty constructor () {}
automatically.
To create an object from a class, we use the keyword new. The syntax is:
let objectName = new ClassName(arguments);
new creates an instance of the class, which means that the object
generated shares the same set of keys as every other object made from the
class. However, the values assigned to each key may differ.
Example
Let's create objects for two of our crew members: Fox and Hippo.
1class Astronaut {
2 constructor(name, age, mass){
3 this.name = name;
4 this.age = age;
5 this.mass = mass;
6 }
7}
8
9let fox = new Astronaut('Fox', 7, 12);
10let hippo = new Astronaut('Hippo', 25, 1500);
11
12console.log(typeof hippo, typeof fox);
13
14console.log(hippo, fox);
Console Output
object object
Astronaut { name: 'Hippo', age: 25, mass: 1500 }
Astronaut { name: 'Fox', age: 7, mass: 12 }
In lines 9 and 10, we call the Astronaut class twice and pass in different
sets of arguments, creating the fox and hippo objects.
The output of line 14 shows that fox and hippo are both the same
type of object (Astronaut). The two share the same keys, but they have
different values assigned to those keys.
Note
Two objects created from the same class are NOT equal, even if the keys within the objects all have the same values. The reason behind this was discussed previously.
After creating an Astronaut object, we can access, modify, or add new
key/value pairs as described in the
Objects and Math chapter.
Try It
Play around with modifying and adding properties inside and outside of the
class declaration.
1class Astronaut {
2 constructor(name, age, mass){
3 this.name = name;
4 this.age = age;
5 this.mass = mass;
6 }
7}
8
9let fox = new Astronaut('Fox', 7, 12);
10
11console.log(fox);
12console.log(fox.age, fox.color);
13
14fox.age = 9;
15fox.color = 'red';
16
17console.log(fox);
18console.log(fox.age, fox.color);
Console Output
Astronaut { name: 'Fox', age: 7, mass: 12 }
7 undefined
Astronaut { name: 'Fox', age: 9, mass: 12, color: 'red' }
9 'red'
Attempting to print fox.color in line 12 returns undefined, since that
property is not included in the Astronaut class. Line 15 adds the color
property to the fox object, but this change will not affect any other
objects created with Astronaut.
What happens if we create a new Astronaut without passing in all of the
required arguments?
Try It!
1class Astronaut {
2 constructor(name, age, mass){
3 this.name = name;
4 this.age = age;
5 this.mass = mass;
6 }
7}
8
9let tortoise = new Astronaut('Speedy', 120);
10
11console.log(tortoise.name, tortoise.age, tortoise.mass);
To avoid issues with missing arguments, we can set a default value for a parameter as follows:
1class Astronaut {
2 constructor(name, age, mass = 54){
3 this.name = name;
4 this.age = age;
5 this.mass = mass;
6 }
7}
Now if we call Astronaut but do not specify a mass value, the constructor
automatically assigns a value of 54. If an argument is included for
mass, then the default value is ignored.
TRY IT! Return to the repl.it in the example above and set default values for one or more of the parameters.
The questions below refer to a class called Car.
1class Car {
2 constructor(make, model, year, color, mpg){
3 this.make = make;
4 this.model = model;
5 this.year = year;
6 this.color = color;
7 this.mpg = mpg;
8 }
9}
Question
If we call the class with let myCar = new Car('Chevy', 'Astro', 1985,
'gray', 20), what is output by console.log(typeof myCar.year)?
Question
If we call the class with let myCar = new Car('Tesla', 'Model S', 2019),
what is output by console.log(myCar)?