Ashiq's Thought
Understanding JavaScript's Unique OOP Features: Quirks, Beauty, and the Power of 'this'

Photo by Gabriel Heinzer on Unsplash

Understanding JavaScript's Unique OOP Features: Quirks, Beauty, and the Power of 'this'

Mizanur Rahman Ashiq's photo
Mizanur Rahman Ashiq
·

3 min read

Introduction: JavaScript, often regarded as the weirdest and most fascinating language on Earth, offers a distinctive take on Object-Oriented Programming (OOP). While languages like C++ and Java have their own well-established OOP paradigms, JavaScript introduces some peculiarities that set it apart. In this blog post, we'll explore the idiosyncrasies, the beauty, and the power of JavaScript's OOP features.

JavaScript's Class Syntax: In ECMAScript 6 (ES6), JavaScript introduced the 'class' keyword, which revolutionized the way we define classes. However, unlike other languages, such as C++ or Java, the class syntax in JavaScript is merely a wrapper over functions. One key distinction is that a JavaScript class can have only one constructor, limiting the ability to have multiple constructors as seen in other languages.

Let's take a look at an example:

javascriptCopy codeclass Product {
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }
}

let processor = new Product("Intel core i-9", 65000);
let monitor = new Product("LG w49", 35000);

console.log(processor, monitor);

In the above code, we define a Product class with two parameters: name and price. We then create two objects of the class, 'processor' and 'monitor,' using the 'new' keyword. The constructor function assigns the provided arguments to the object properties, and the newly created objects are returned.

The Intricacies of 'this' in JavaScript: In JavaScript, the 'this' keyword operates differently compared to languages like Java or C++. In JavaScript, 'this' refers to the calling site or the context in which a function or class is invoked. When accessing a data member inside a member function, we need to use 'this' to refer to the object itself.

Understanding the 'new' Keyword: Contrary to popular belief, the 'new' keyword in JavaScript is not exclusive to classes. It can also be used with functions. The 'new' keyword follows a four-step process:

  1. Creation of a new, empty JavaScript object, with 'this' pointing to that object.

  2. Linking: Establishing a prototype chain to enable inheritance.

  3. Invoking the function with 'this' assigned to the newly created object.

  4. Function execution begins. If the function does not explicitly return an object, it automatically returns 'this'; otherwise, it returns the object explicitly returned.

Conclusion: JavaScript's approach to OOP is undoubtedly distinctive and can be perceived as both quirky and beautiful. Understanding the nuances of JavaScript's class syntax, the peculiar behavior of 'this,' and the power of the 'new' keyword is crucial for effectively utilizing OOP in JavaScript.

By embracing these unique features, you'll be better equipped to navigate the world of JavaScript development and leverage the language's capabilities to solve complex problems and build robust software.

Happy coding!

Note: Please note that the code and explanations provided are simplified for the purpose of this blog post and may not cover all aspects and edge cases. It's always recommended to refer to official documentation and further explore the topic to gain a comprehensive understanding of JavaScript's OOP features.

JavaScriptoop