Classes and Objects
👉 To summarize previous article , classes are nothing but a template or blue print which decides how object will look and behave with different props/methods.
👉 We're Using OOP concepts because it provides us Encapsulation and Abstraction.
Enough ! Time to open VS code
👉 Start a new project , and go to app.js
👉 Let's make a Speedometer class
👉 Speedometer have properties like speed and type
👉 Speedometer will be having methods like increase and decrease speed
👉 in app.js
class Speedometer {
speed = 0;
type = "km/h";
constructor(speed, type) {
this.speed = speed;
this.type = type;
}
increaseSpeed() {
this.speed += 10;
}
decreaseSpeed() {
this.speed -= 10;
}
getInfo() {
console.log(this.speed);
console.log(this.type);
}
}
👉 If we decode our class there are two methods for increasing and decreasing speed of speedometer , and one method for showing information to user.
👉 Constructor is special function called automatically while creating object. we've used it to initialize initial speed and type of object.
👉 As of now class don't consume any resources but when we make objects they will surely occupy resources.
👉 Notice that by convention class names are always written in Pascal case
👉 Notice we haven't typed var or let and even function to specify in class. we don't need to specify that in class
👉 Currently(and even by default) we haven't specified and member access specifiers so our methods and props are accessible inside as well as outside the class.
Making Object 🌚
👉 Making Object of respective class simply means creating variable of that class.
👉 we'll use new keyword to allot resources to new object which we're creating.🏠
👉 The parentheses takes arguments specified in constructor parameters to initialize starter object 😁
👉 in app.js
var speedoMeter = new Speedmeter(0,"km/h");
👉 now speedoMeter is object of class Speedometer with initial value of speed:0 and type : "km/h"
👉speedoMeter can now access props and methods like increase and decrease speed
👉 Go ahead and try calling different methods
object1.getInfo();
object1.increaseSpeed();
object1.increaseSpeed();
object1.getInfo();
object1.decreaseSpeed();
object1.getInfo();
👉 this will output in console
0
km/h
20
km/h
10
km/h
What is this?
👉 this keyword in JavaScript refers to current running object
👉 it's like we're addressing speedoMeter object with this, so this refers to the instance which is in execution now.
👉 in speedoMeter object we can say like this object have intial speed of 0 and type of "km/h"
👉 Notice if in class we want to refer the current running object (which is not there at the moment of creation of class) we'll use this to access props of current running object.
👉 so if we write like this.speed it will refer to speedoMeter object which we have created afterwards.
Using member access specifiers
👉 '#' is used to make any property or method of the class private.
👉 Private methods or props are only accessed inside class
👉 Accessing private members outside class will result in error
class Speedometer {
#speed = 0;
#type = "km/h";
increaseSpeed() {
this.#speed += 10;
}
#decreaseSpeed() {
this.#speed -= 10;
}
getInfo() {
console.log(this.#speed);
console.log(this.#type);
}
}
👉 Notice that now if we create object of Speedometer the object can now only access increaseSpeed() and getInfo() because other members are private
console.log(object1.speed) ❌
console.log(object1.type) ❌
object1.getInfo(); ✅
object1.increaseSpeed(); ✅
object1.increaseSpeed(); ✅
object1.getInfo(); ✅
object1.decreaseSpeed(); ❌
object1.getInfo(); ✅
Inheritance
👉 Inheritance refers to deriving methods and props of parent class or super class to it's child class or sub class.
👉 Inheritance increases code reusability in our code
👉 now , think in terms of animals all animals have name and color, so what we can do is rather specifying this properties each and every time in new animal we can make a parent class with all these properties and a greet method which serves purpose of greeting.
👉 Syntax : class SubClass extends ParentClass that's it 😎 now we can use parent class's props and methods in child class 🎉
👉 Example
class Animal {
color;
name;
greet() {
console.log("hey i'm " + this.name);
console.log("my color is " + this.color);
}
}
class Dog extends Animal {
constructor(name, color) {
super();
this.name = name;
this.color = color;
}
}
var dog = new Dog("tommy", "brown");
dog.greet();
👉 Output:
hey i'm tommy
my color is brown
👉 Notice if we call constructor of sub class it's compulsory to call parent class's constructor regardless of constructor is having params or not.
👉 Using a reserved keyword known as super we can call parent class's constructor like => super(); or super(name,color) [if constructor is having params]
👉 Something looks strange? we are using color,name and greet() inside as well as outside Dog class even though these props and methods wasn't declared in Dog class.
👉 That's how inheritance works, it simple words it will copy all the public and protected methods and props in child class which result in code reusability😀
Let me know in comment section if you have any doubt or feedback. it's always worth to give time to thriving developer community :)
Keep Coding ❤
Top comments (4)
I learned the last 10 years that many people have realy big problems with race conditions and side effects. OOP does not realy help with things except you are just good and know stuff.
Im writing functional the most time, when im writing alone. Still I need to switch to OOP for customer stuff or teams.
Maybe you write about the DANGER (monster appears here) you can easily write. The most tutorials are missing the part and don't share experience from failures. (But thats the important stuff). If you already done that sorry I missed it.
Good Work 👍
Failure is part of journey, I've covered that in one of the blogs saying it's not always sunshine. Sometimes you've to deal with errors and other stuff.
Coming to the OOP concept, even I'm using functional JS all the time. in India the major focus is given on OOP concepts, so keeping that in mind I've covered this . The reason is if someone's reading this blogs it should help them in practical work as well as interviews.
Thank you :)
So in Java you can only have one class in each file. Is that apply to Javascript too? Also how to know if a variable/function should be public or private?
In java it's not compulsory to have one class in each file , rather it's a convetion java devs uses for SoC (separation of concern) .
Same applies in JS one or more class can be defined in one file, as you can see in the example i gave in inheritance I've 2 classes in same file.
Variables/Function which are public can be accessed inside as well as outside class, private members can not be accessed outside class. according to ES2015 syntax it's compulsory to prefix variable or method with '#' to make it private (which is visible difference)
Wish you all the very best for your coding career ahead :)