JavaScript Classes
In programming, classes are used a "blue print" for modeling real-world items in code.
In JavaScript, the syntax for creating a class could be as simple as:
class Square {
constructor(sideLength){
this.sideLength = sideLength;
}
area(){
return this.sideLength * this.sideLength;
}
}
Breaking this down:
First we declared a
class
calledSquare
to represent the idea of a square.Then we declared that in order to create a square, we need to know the length of one side of the square. We specified this by defining a
constructor
method, which is a special method that "builds" our class when we instantiate it.In the
constructor
we took the providedsideLength
and saved it to an instance variable called:sideLength
a. Variables specified with the keywordthis
indicate instance variablesWe also specified a method called
area
which takes no parameters/arguments, as denoted by the empty parenthesisarea()
. In this method, we specified that the area of theSquare
is equal tothis.sideLength * this.sideLength
Instantiating
Once the blue print (class
) has been defined, we create "instances" or specific occurences of that class. In order to instantiate the class we defined above we would use the following syntax:
let square = new Square(5);
This says, store an instance of a square, with a sideLength
equal to 5
in a variable we named square
. Now that we have an instance we can use the instance method associated with the Square
class:
square.area(); // => 25
Methods Types
Standard Methods
Recall the Square
class example...
class Square {
constructor(sideLength){
this.sideLength = sideLength;
}
area(){
return this.sideLength * this.sideLength;
}
}
... area()
is a standard class method. Standard methods in JavaScript are available to any instance of the class they to which they are defined.
Static Methods
Static methods are class-level methods. In other words, they cannot be called on an instance of a class, but rather they are called on the class itself. Typically, static methods are generic utility methods that have functionality relating to the class, but not an instance of a class.
To illustrate this, we will use a different example:
class MyMath {
static square(number){
return number * number;
}
static cube(number){
return number * number * number;
}
}
In the example above, we are defining what it means to square
a number, and what it means to cube
a number. It is important to note, that with static methods, we have no dependence on an instance - or in more technical terms; static methods are stateless.
To use a static method, we must call upon the method at the class level, not the instance level:
let squaredNumber = MyMath.square(5); // => 25
let cubedNumber = MyMath.cube(3) // => 9
Getters and Setters
In most object-oriented programming (OOP) languages, objects/classes have "getter" and "setter" methods that provide access to instance variables. In most native OOP languages, you have "private variables" that are only accessible within the class themselves. This is designed to protect the state of that object by controlling when and how instance variables are set ("setters") and retrieved ("getters").
JavaScript is a functional programming language at its core, which means that it is designed to be written in a procedural style. This is in comparison to OOP languages which model "state" (variables) and "behavior" (methods) within objects after real life. Diving into procedural vs. OOP is out of scope for this topic, but a fundamental programming idea that every modern developer should have a firm grasp around.
class Dog {
constructor(name){
this.name = name;
this._activityLevel = 1;
}
// setter method
set activityLevel(level){
if (level > 10) level = 10
if (level < 1) level = 1
this._activityLevel = level;
}
// getter method
get run(){
return `${name} runs ${this._activityLevel * 1.2} miles per day`
}
}
Inherently, "getter" methods (in JavaScript) provide the ability to access an objects internal state, without invoking the method:
let skipTheDog = new Dog("Skip"); // => null
skipTheDog.activityLevel(5); // => null
skipTheDog.run; // => `Skip runs 6 miles per day`
Notice with the setter (skipTheDog.activityLevel(5);
), we pass in the value we want to use to modify the internal state of the object. Conversely, with getter we do not need to use parenthesis (()
) or "invoke" the method as it is defined as a "getter" method in the class definition. In other words; "getter" methods operate a lot like the properties of an object, except that they do not allow you to change the objects internal state:
let skipTheDog = new Dog("Skip"); // => null
skipTheDog.activityLevel(5); // => null
skipTheDog.run = `Skip runs six miles per day` // => ERROR
Per the example above, we can not use "getter" methods to set internal state, so this would throw an error.
Glossary of Terms
- Class - a blue-print that defines a type of object.
- Constructor - a special method that defines the required parameters to instantiate that class.
- Instance - A specific occurance of an instantiated class.
- Instantiation - The process of creating an "instance" of a class
- Invoke - to call execution of a method, function, subroutine or procedure
- Method - a procedure associated with a class that defines behavior of an object
- Parameter - an arguement for a method
Top comments (0)