Moving from ‘class’-ical languages to JavaScript

When you shift from languages such as C++, Java or Python to JavaScript, which is a scripting language, you notice it’s not really that similar. Once you get used to the slight changes in syntax, you’ll see it’s way more flexible but then there are other major differences. This article will be focusing on variables and classes.

I won’t be dwelling much into why there are differences but then, basically, JS doesn’t have to be compiled to be executed, like the others, but is directly executed by the browser.

The very first difference you’ll notice would be variable declaration. In JavaScript the type of variable is detected during run-time:

var a = "hello";var b = 25;

For Java or C++, the variable type is predetermined by keywords, which are specified:

string a = "hello";int b = 25;

Moving on to Object Oriented Programming, JavaScript although being an OOP language, has no classes, rather everything is an object. Inheritance is between objects rather than classes.

Take a look at classes in C++. Here, Rectangle() is the constructor, getArea() is a member function, with length and breadth as data members.

class Rectangle {public:double length; // Length of a rectangledouble breadth; // Breadth of a rectangle

Rectangle(double l, double b) {length = l;breadth = b;}

double getArea(void) {return length * breadth;}};

Rectangle rect(10, 15); // Create objectcout<<rect.getArea(); // Returns area, i.e. 150

Generally, JavaScript functions can be used to somewhat simulate classes.

function Rectangle(length, breadth) {// Init variables length and breadththis.length = length;this.breadth = breadth;

// Function to calculate areathis.getArea() {return this.length * this.breadth;}}const square = new Rectangle(10, 10); // Create objectconsole.log(square.getArea()); // Returns area, i.e. 100

Alternatively, it can be declared separately as a prototype of a constructor function, so that the function isn’t created each time an object is.

Rectangle.prototype.getArea = function() {return this.length * this.breadth;}

This is similar to the scope resolution operator (::) in C++.

void Rectangle::getArea() {return length * breadth;}

JavaScript classes introduced in ECMAScript 2015 is extremely similar to classes in C++ and Java in terms of syntax. But, it actually just provides a clearer and simpler syntax for the existing prototype-based inheritance, in which classes are considered as special functions.

class Rectangle {// Init variables length and breadthconstructor(length, breadth) {this.length = length;this.breadth = breadth;}

getArea() {return this.calcArea();}

// Function to calculate areacalcArea() {return this.length * this.breadth;}}const square = new Rectangle(10, 10); // Create objectconsole.log(square.getArea); // Returns area, i.e. 100

Due to compatibility issues with the latest ES6/ES5 JavaScript code for a few browsers and Node, it is transpiled using Babel to convert it to older versions.

So these methods, mentioned above, are ways to implement OOP in a class-less language like JavaScript.

There, that’d be enough to get you started on programming in JavaScript. I hoped you enjoyed this developer tutorial. If you did, please be sure to recommend, follow, and share this article.