This first general overview should provide you with the general idea of classes regardless of the language JavaScript.
What is a class? (in OOP)
In object-oriented programming, a class is a blueprint for creating objects (a particular data structure), providing initial values for state (member variables or attributes), and implementations of behavior (member functions or methods).
from brilliant.org
It is a blueprint, to copy from
the class code you write will be the template for so called instance objects (or just instances, or just objects) that are created from your code blueprint scratch.
It defines states, it can be in
Like a blueprint of a real world object defines what parts the later instances will have, a class in OOP does the same. It defines of what minor parts it is build from.
It implements behavior
Think of a cooking recipe for a vegetable soup. You once write down how you slice the vegetable, how long to cook it, mit with spices.
You can use that behavioral blueprint again and again whenever you cook the same dish, regardless of what vegetable you use.
What are classes used for?
The short answer is: Everything!
Classes represent the properties and behavoir of mental models, that usually reflect real-world (touchable) things (tree, car, house, person) or mental (not touchable) concepts (e. g. contracts, accounts, technical aspects like database connections)
The main idea is re-use of code
- JavaScript as a language offers several basic classes to provide common functionality (e.g. the Date class for dealing with dates or the Math class for computing)
- all frameworks you will work with (React for frontend browser, Express for backend server) provide classes to work with
- e.g. React will provide a Component class for parts of the user interface and you may extend this class to create own parts of the UI.
- e.g. in Express you will provide Response objects based on a given class to process requests to your backend service.
What are classes “made” from?
1st. a class name
You will need to reference classes, to create objects from them. The name usually reflect the classes ease of use e.g. Person, Car, Building, Component, Connection, Request
2nd. member variables that are called “attributes” of the class
This is where you will store the data representing the state of objects, that where created based on your class
e.g. for a class representing a person:
- first name
- family name
- date of birth
3rd. functions that are called the “methods” of a class
This is where the intelligence of your class sits, the functions / behavior that will be re-used in every instance of your class.
e.g. for a class representing a person:
- getAge() – returning the persons age calculated from the member variable date of birth and the current time of the server running your code
- greet() – outputting a string combined from “Hello my name is ” + the content of the member variables that contain first name and family name.
methods with special meanings
You are free in the choice of method names, but there are some minor limitations, because JavaScript reserves words for methods with a special meaning.
constructor – to create instances and init values
Usually common object-oriented language reserves constructs for one special kind of method: the constructor.
A construtor is the method that is called to create an instance object based on a class initializing its introducing state with default values. It can have parameters but does not require them always.
e.g. a constructor for an object made from a Date class could expect a string like “2019-12-19” to render the initial values.
this – to reference the current instance object
You can access the current instance object on what a method was called, with the help of the method this.
The class is a blueprint. So it will for a LEGO figure possibly have a method returning it’s body-color attribute. At design time, the instances of a class do still not exists.
So you don’t know if the pizza boy instance, the red mohawk dwarf or the unicorn girl with call the method. To have a reference of the concrete calling instance object, we use the method this.
At this point you learned general concepts about what classes are, what they are used for and what they are made from. Now move on to learn, how to use existing classes.
- image credits:
- https://www.amazon.com/Minifigure-Patent-Invention-Poster-Blueprint/dp/B00NFSO34I
- http://thebrickpeople.com/lego-mini-figures-series-13-unicorn-girl/
- https://www.apecollection.com/en/lego/7853-mini-lego-figures-series-17-figure-you-choose-new-original-new.html
- http://thebrickpeople.com/lego-mini-figures-series-12-pizza-delivery-guy/