DEV Community

Sandeep Nautiyal
Sandeep Nautiyal

Posted on

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"
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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! 😁😁

Top comments (11)

Collapse
 
tracygjg profile image
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.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

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.

Collapse
 
sandeepnautiyal profile image
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.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

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

Collapse
 
tracygjg profile image
Tracy Gilmore • Edited

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

Collapse
 
zerosirus profile image
ZeroSirus

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

Collapse
 
ezpieco profile image
Ezpie • Edited

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.

Collapse
 
neerajsharma2000 profile image
Neeraj Sharma • Edited

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?

Collapse
 
sandeepnautiyal profile image
Sandeep Nautiyal • Edited

Hey @neerajsharma2000,

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

Collapse
 
dknightemperor profile image
Azazul Haque

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

Collapse
 
sandeepnautiyal profile image
Sandeep Nautiyal • Edited

We'll do that 😁😁😁