Classes in JavaScript: Explained OOP's in JS
Manikandan K
Posted on March 22, 2024
Introduction:
Classes are a key feature of Object-Oriented Programming (OOP) in JavaScript, introduced in ECMAScript 2015 (ES6). They provide a more intuitive and structured way to define objects and their behavior. In this blog post, we'll delve into the concept of classes in JavaScript and demonstrate their usage through practical examples.
Understanding Classes:
Classes in JavaScript act as blueprints for creating objects with predefined properties and methods. They encapsulate data and behavior within a single unit, making code organization and reuse easier.
Exploring the Code:
Let's break down the provided code snippet:
1. Class Declaration:
We declare a class named Person
using the class
keyword. This class represents a person and has a constructor method to initialize its properties name
and age
when a new instance is created.
// Class
class Person {
constructor(_name, _age) { // Constructor with parameters
this.name = _name;
this.age = _age;
}
}
2. Creating an Instance:
We create a new instance of the Person
class using the new
keyword and passing "Manikandan" as the name and 25 as the age.
const person1 = new Person("Manikandan", 25);
3. Logging the Object:
We log the person1
object to the console, which displays the properties name
and age
associated with it.
console.log(person1) // Output: Person { name: 'Manikandan', age: 25 }
4. Defining a Class with Methods:
We declare a class named Car
, which represents a car. It has a constructor method to initialize its properties name
and color
, along with a method drive()
to simulate driving the car.
class Car {
constructor(_name, _color) { // Constructor with parameters
this.name = _name;
this.color = _color;
}
drive() {
console.log(`Hi, This is My ${this.name} car. And its color is ${this.color}`)
}
}
5. Creating an Instance:
We create a new instance of the Car
class, passing "Rolls Royce" as the name and 'Black' as the color.
const car1 = new Car("Rolls Royce", 'Black');
6. Logging the Object:
We log the car1
object to the console, which displays the properties name
and color
associated with it.
console.log(car1) // Output: Car { name: 'Rolls Royce', color: 'Black' }
7. Invoking a Method:
We invoke the drive()
method on the car1
object, which simulates driving the car and logs a message to the console.
car1.drive(); // Output: Hi, This is My Rolls Royce car. And its color is Black
Conclusion:
Classes in JavaScript provide a cleaner and more structured way to define objects and their behavior. By leveraging classes, you can create reusable and maintainable code, making it easier to build complex applications. In this blog post, we've explored the basics of using classes in JavaScript for Object-Oriented Programming.
Stay tuned for more insights and advanced techniques in utilizing classes and OOP principles in JavaScript. Happy coding!
Posted on March 22, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.