Geek Culture
Published in

Geek Culture

OOP in JavaScript

Photo by Joshua Reddekopp on Unsplash

I first learned about Object Oriented Programming when I started my software engineering journey with the Flatiron School. I doubt anyone starting from Square One, as I was, would be able to absorb it on a deep level. The nature of bootcamp being that you’re holding on by your fingernails! So I’ve decided that a review/refresher is in order, especially considering that the Functional Programming vs OOP discussion probably won’t be “resolved” anytime soon.

OOP of course is shorthand for Object Oriented Programming, and has been around since the late ‘50s/early 60s. In terms of JavaScript, OOP was made available with ES6 in 2015. JavaScript is considered multi-paradigm because of this - we can write JavaScript using pure functions, or we can mimic real world experiences using OOP principles to structure our code.

In general terms, OOP is a programming paradigm or set of concepts where the code is organized in a such a way that it creates a blueprint centered around the instantiated object - usually via classes - that contains state and behavior. i.e., things the object has (characteristics/attributes) and things the object does (methods/functions). Each instantiation of this class is an object that will also instantiate its individual state, and has access to its inherited functions. So we can create, say, an animal. That animal can have a name and various characteristics and things it does, like speak. “Meow.”

The four pillars of OOP are Encapsulation, Inheritance, Abstraction and Polymorphism. These terms have been described many ways. This is how I understand them:

1) Encapsulation: The code is organized into containers for better organization which avoids the need for code duplication. This is the beating heart of OOP. Encapsulation also allows us to hide a method or an attribute so that it can’t be accidentally altered or otherwise messed with. (Note the verrrry new # which in this case is not for a social media posting, but is instead used to create and utilize private variables and methods within classes in JavaScript! You can see it used in the code sample below.)

2) Inheritance: Any instance of a class inherits that class’ variables and methods, as well as any state and/or behavior that may be inherited from that class’s super (or parent) class(es). This extra bit of super power (see what I did there?) requires using the super() keyword.

3) Abstraction: Those cute little instance objects don’t need to worry their pretty heads about the “how”. They can just call the method and let the class take care of the details.

4) Polymorphism: A method can be programmed to behave differently depending on who is calling it. (i.e., a dog will bark while a cat will meow.) A sub class can even overwrite a function that was stated in its super class. This new and improved functionality is encapsulated/protected within its own class. So much power!

Interestingly, if we use functional programming — i.e., if we create an object functionally — we do have access to this (in its correct context of the instantiated object), we have JavaScript’s built-in constructor function, and the object is automatically returned. All of this is provided to us if we use the new keyword. This does mimic OOP but it is not OOP. You can even nest functions inside of these “OOP-adjacent” functions, although this is not recommended due to the added memory space that will be required for each instantiation of a new object.

creating Doctor via functional programming

Using classes (see, below) is how we write JavaScript OOP-style, which is better at least in terms of memory space. When a new instance is created, it can locate the functions that it has access to but it does not need to reserve memory space for the functions themselves.

The static keyword is reserved for class methods and properties, while instance methods do not use static. And of course instance variables use this. (Methods can also use this.)

OOP concepts used in JavaScript — welcome to Grey’s Anatomy

Fun fact: OOP Classes in JavaScript are not truly OOP. This is in fact syntactic sugar (i.e., magic. Do not look behind the curtain!) that looks and behaves like OOP but is simply prototypal inheritance under the hood. For instance, if we were to console.log drMontgomery.__proto__we would see this:

Doctor Class extends from Person Class via __proto__ property

There is not much different here from if we were to create a new array and check its __proto__ property:

we know that a new Array comes with lots of functionality built in
array inherits from Object via Prototype. Feels like OOP!

I find that I enjoy OOP the more I get to know it. And even though Functional Programming and Hooks are all the rage in React.js, I now have a deeper respect for the OG Classes in React. As with typical OOP, when we look at a class that extends from React, it inherits many methods, most importantly lifecycle methods (render() is itself a lifecycle method. In the past I have tended to forget this.). Notice that extends keyword. OOP!

This code is gratefully borrowed from Brad Westfall

Happy coding everyone! I’d love to know your thoughts on OOP and if you have a preference with regards to OOP vs. functional programming.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store