What are Classes and How to Use Them in JavaScript ? 🤔🤔

JavaScript, prior to ES6 (ECMAScript 2015), relied on constructor functions to mimic object-oriented concepts. These functions act as blueprints for creating objects, but lack some of the features and structure offered by modern classes.
Let's see a basic implementation of a constructor function for reference...

function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
}
const person1 = new Person("Sandeep");

person1.greet(); // Output: "Hello, my name is Sandeep"

Now the question is if we already have something like this why to introduce something new, why to introduce classes, well thing is these functions have some limitations for example:-

No Inheritance: While you can mimic inheritance patterns using prototypes, it's less straightforward compared to classes.
Verbosity: Defining methods within the constructor function can lead to repetitive code, especially for complex objects.

that is why Classes were introduced in ES6 to addressed these shortcomings by providing a more structured and concise way to define objects and their behaviour.

Well Now enough with why they were introduced and let's jump into how to use them properly.

To create a class all you have to do is use a keyword to define it which is called (wait for it, wait for it, drum roll please 🥁 🥁) "class" lol 🤣🤣. Here is a code snippet of a class in action.

class Person{
    constructor(name){
        this.name=name;
    }
    greet(){
        return `Hello, my name is ${this.name}`
    }
}

const sandeep = new Person("sandeep");

console.log(sandeep.greet()); 
//Output:'Hello, my name is sandeep'

Here are some key benefits of using classes in JavaScript:

• Reusability: Classes allow you to create multiple objects with the same structure and functionality, reducing code duplication.

• Maintainability: Code is easier to understand and modify when it's organised into classes. Each class encapsulates its own data and logic, making it more self-contained.

• Object-Oriented Patterns: Classes facilitate the use of common object-oriented design patterns like inheritance and polymorphism ✨

Now your next question will be "Sandeep, we got it, why classes were introduced and how to implement them, but where to implement them? Well, that's something we will discuss in the next article. Until then, happy coding!"

I hope this helps! 😁😁

Comments

[Tracy Gilmore]

Hi Sandeep, You asked "What are" and "How to" but missed out asking "Why"? I suspect the only reason most people use classes is because they have yet to discover there are better ways, just as advised in the Gang of Four.

[Jon Randy 🎖️]

JS is still only 'emulating' classes using prototypes. The Class syntax that was introduced is just sugar over the existing prototype stuff - which is still being used underneath.

[Sandeep Nautiyal]

Hey @jonrandy ,

Spot on about classes being fancy talk for prototypes! But they definitely have some perks, like:

Clearer Code: The class syntax makes your objects way easier to read and understand. No more squinting at prototype chains!
Better Organization: Classes keep everything nice and tidy by bundling data and methods together. Less code headaches for you!
OOP Magic: Classes make it a breeze to use those awesome object-oriented patterns like inheritance and polymorphism. 🪄
Overall, classes are like a super friendly way to work with objects in JavaScript.

[Jon Randy 🎖️]

Clearer if you are used to class-based inheritance. This kind of thing is completely subjective

[Tracy Gilmore]

Hi @jonrandy, Is it still true to say "JS classes are just syntactic sugar on JS prototypes", I am not so sure?
I query the assertion following the introduction of private properties as I do not think these can be used with or have an idiomatic equivalent for prototypes.
As stated on the MDN page "Private properties were not native to the language before this syntax existed. In prototypal inheritance, its behavior may be emulated..."
Regards, Tracy

[ZeroSirus]

*samaj me kuxh ni aya par sun ke accha laga *

[Ezpie]

Let me translate for those who don't speak Hindi(India's very and most loved official language):

Could not understand anything, but it sounds good.

Hopefully now everyone knows what this means, very popular statement in India BTW.

[Neeraj Sharma]

Informative article ,specially liked the humour .would be awesome if you highlight the main keypoints using bold/italic fonts.
Also,shouldnt classname start with uppercase letter as per convention?

[Sandeep Nautiyal]

Hey @neerajsharma2000,

Thanks for the highlighting it, we'll be updating it, was a typo lol 😝😝

[Azazul Haque]

It's nice Article, Keep writing stuffs you learn new.

[Sandeep Nautiyal]

We'll do that 😁😁😁