JavaScript OOP is weird

JosephKabemba — Sat, 06 Nov 2021 16:57:14 +0000

When I discovered Object-Oriented Programming in JavaScript, I was confused. At first, It seemed straightforward. Creating a class was pretty much like Java.

class Student { 
}

But right after this declaration, a lot of questions popped into my mind. I've realized something was missing: the access modifier public before class. So, I added it. Unfortunately, my code editor didn't like it. public was highlighted. When I hovered over it, I got this message.

The 'public' modifier can only be used in TypeScript files.ts(8009)

I was like "What ! I'm coding in JavaScript. Why Are you talking about Typescript ?". After a few searches on Google, I discovered JavaScript did not have the public keyword in its vocabulary. It was somewhat implicit.

I continued coding. I wrote my first constructor.

class Student {  

   constructor(name, faculty){   
      this.name = name;   
      this.faculty = faculty;   
  }
}

Coming from a Java background and having done a few C++, it was weird. The constructor did not have the same name as the class and I'd initialized the instance properties name and faculty before declaring them upfront. I found out later that class fields existed. So, I could rewrite this code, the Java or C++ way. This put my mind at ease.

class Student {   
     name;   
     faculty;   

     constructor(name, faculty){   
       this.name = name;   
       this.faculty = faculty;   
     } 
}

Nonetheless, I wasn't quite satisfied. I was wondering about making my class fields private to comply with OOP Encapsulation Principle that encourages to restrain direct access to class elements such as fields, properties or methods. As for public, the private keyword doesn't exist in JS world. So, I told myself at the moment: "How come this language is so limited ?".

I was too eager to criticize until I found the #. All you have to do to make a property or method private is to put right before it the harsh (#) symbol.

import moment from "moment";

class Student {
  #name;
  #faculty;
  #birthDate;

  constructor(name, faculty, birthdate){
   this.#name = name;
   this.#faculty = faculty;
   this.#birthDate= birthDate;
  }

  #computeAge() {
    return moment(this.#birthDate, "YYYY-MM-DD").fromNow();
  }

  getAge() {
    return this.#computeAge();
  }
}

OOP in JavaScript is not canonical. You will have a lot of surprises if you're coming from a pure Object Oriented Programming language. Consider migrating progressively to Typescript, which is a superset of JavaScript, to have less headache.

If you enjoyed reading this post, we'll appreciate it if you could recommend it and share it with your friends. If you don't have ones, then just follow us, we'll be your friend.

DEV Community: JosephKabemba

JavaScript OOP is weird