In a previous article, I talked about functional programming. Today I want to address object-oriented programming with Javascript, which is still a prevalent paradigm that many companies use.
Object-Oriented programming has become a lot easier in Javascript since ES6, with the introduction of classes. Before ES6, we could create objects, but it got messy. If we wanted to reuse those objects, we had to use the prototype.
This programming paradigm can be tricky, and I will do my best to explain it.
What is it?
Object-Oriented programming is centered around classes and objects.
Classes
Don’t worry. You do have to go back to school to take that boring class. Classes in JavaScript are a lot more fun, and you don’t fail.
Classes encapsulate an object’s logic, attributes, and functionality and abstracts away the code’s inner workings.
Encapsulation puts a stamp on a piece of code and says that this piece of code is top-secret. You can’t directly modify it later. The chunk of code is hidden so that it is not accidentally altered later by yourself or other developers.
Objects
Objects are chunks of functionality that make it easy to reuse these chuck of code later. Creating these Objects is also known as defining the object.
Let’s break this down. The constructor is how you define an object and instantiate it later. Without the constructor, you will get an error saying that the object is not defined.
Inside the constructor is where you want to define the attributes – make, model, year, to give the object.
Lastly, the this keyword references the attribute in the constructor to the data you will call that. In other words, this connects the data from the instance of the object you will declare later to the constructor function.
Here is a clearer example.
I hope that clears everything up. I tried to go as slow as possible in the video to get the concept across.
Advantages
There are a lot of advantages Object-Oriented Programming gives us.
Reusability
We define the object one and we can make instances of the object that has the same functionality.
Inheritance
Just like you inherited your metabolism from your parents, in my case, this isn’t good because it is easier for me to gain weight. Your objects can inherit functionality from other objects defined in the class you want to inherit, known as the parent class. Don’t worry, though. The parent class won’t put you in timeout.
The child class inherits attributes from the parent class using the super keyword.
Before the magic that ES6 gave us, we could only implement inheritance manually via the prototype chain. We needed to use the call() method and Object.Create(), which got messy and hard to follow.
Now we don’t have to overcomplicate our code, and we can use inheritance to follow the most crucial commandment in programming, Don’t Repeat Yourself (DRY). Man, I had a hard time staying DRY as a baby. So, because of that, it is safe to say I was a horrible programmer.
Learning Object-Oriented Programming with the class functionality that ES6 gives us adds more tool and firepower to your developer toolbelt. Do you feel like a wizard yet?
After I learned this at Lambda School, I felt like I could code Lord Voldemort from Harry Potter out of existence. With these concepts, you will surely be a wizard and get accepted to Hogwarts.
The Toyota class inherits the make, model, year from the parent class using the super keyword. If we didn’t pass the parent’s that we want to inherit in the super keyword, they would be undefined when we call the object.
We also added a method to the parent class that the child can utilize.
The child class can now access the drive function so that our new object can call it. How fun? Isn’t this a lot better than ES5?
Polymorphism
We can use inheritance to gain access and override the parent class behavior by method overriding.
Method Overriding
Method Overriding gives a different implementation on the child class using the same method that was declared in the parent class.
As you can see from the image, the drive() method in the child class is overwriting the parent drive() method.
Disadvantages
Object-Oriented Programming presents its challenges that may be easier in Functional Programming: Debugging.
Debugging
I talked to a senior developer friend, and he mentioned that you might have a slightly tougher time debugging because you could have a long inheritance chain where you inherit attributes and methods from other classes.
If you override many methods and use a lot of inheritance, it may be harder to track what the code is doing.
Next Steps
Now your head probably hurts with all this information. Object-Oriented Programming is a dense subject, and I have only scratched the surface. Even though that OOJ is valuable, I prefer Functional Programming because I have used it more, and I understand it a little better.
I know that there are many awesome tutorials and courses that offer training.
You can access training for object-oriented programming with Javascript through Codecademy.
- What are things that stand out to you in this review?
- Do you prefer Functional or Object-Oriented Programming? Why?
- How can I improve this article to help readers?
Thank you for reading my post. Leave your comments below to participate in this engaging community. Be sure to sign up to receive updates of more incredible articles.
Share my article on social media and follow me on Twitter for extra content.
211 Followers
Jordan Devaney is a beacon in the tech world, guiding aspiring and seasoned developers alike through the complex landscape of web development and software engineering. Living in Whitmore Lake, Michigan, he combines his academic prowess, with degrees from Western Governor University and a Boot Camp certificate from Bloom Tech, with real-world experience to educate and inspire.
As the force behind DevTuneUp.com, Jordan offers a treasure trove of tutorials, how-tos, and insights into the ever-evolving tech industry. His role as a developer evangelist for nucamp further amplifies his commitment to tech education, making coding accessible to everyone keen to learn or switch careers.
With a sharp focus on demystifying technology and a goal to make DevTuneUp.com a cornerstone for tech enthusiasts, Jordan leverages his expertise in SEO optimization and social media marketing to reach and empower a global audience. Join him on this journey to navigate the digital world with confidence and skill.
To set up a 30 minute meeting via Google Meet and get resources about furthering coding eduction for beginners, click this calendy link.
Hey Jordan,
Your article about the evolution of JavaScript’s Object-Oriented Programming (OOP) is fascinating, especially with the introduction of ES6, which has made classes more approachable. This method simplifies complicated coding tasks by streamlining code reusability and inheritance while adhering to the “Do not Repeat Yourself” principle. However, given JavaScript’s dynamic nature, how do novice programmers transition to comprehending and applying OOP concepts? Furthermore, how does this affect the decision between functional and object-oriented programming for new projects, given the simplicity of ES6 classes? Especially in managing and debugging long inheritance chains, it would be interesting to hear opinions on balancing the advantages of object-oriented programming and its possible complexities.
Navigating the transition to Object-Oriented Programming (OOP) in JavaScript, especially for novice programmers, begins with a solid understanding of the fundamentals: classes, objects, and inheritance provided by ES6. This clarity not only demystifies OOP but also showcases its strengths in code reusability and the maintenance of the DRY principle.
To bridge the gap between functional and object-oriented paradigms, beginners should engage in hands-on projects, leveraging ES6 classes to appreciate their simplicity and power firsthand.
Balancing OOP advantages against potential complexities, such as managing long inheritance chains, requires practice and understanding of design patterns that prevent common pitfalls.
Choosing between functional and object-oriented approaches depends on the project’s requirements and the team’s expertise, suggesting a flexible mindset towards programming paradigms can be beneficial.
As someone diving deeper into JavaScript, I find the concepts of object-oriented programming both challenging and fascinating. It’s particularly interesting how JavaScript, initially not designed with OOP in mind, has evolved to embrace these principles through prototypes and ES6 classes. However, managing inheritance and the this keyword still poses a bit of a learning curve. Any tips for newcomers on mastering these aspects?
I would say you can find some great classes on Udemy and freeCodeCamp
Hi Jordan,
Diving into “Object-Oriented Programming With JavaScript” felt like unlocking a new level in my coding journey! Your breakdown of classes, inheritance, and polymorphism was spot-on and incredibly digestible. It’s amazing to see how JavaScript has evolved with ES6, making OOP concepts more accessible. From your perspective, what’s the biggest challenge when teaching these concepts to beginners, and how do you overcome it? Thank you for your work and for sharing this insightful guide!
Warm regards,
Makhsud
Just go to any preferred learning platform and search object oriented programming. It may be more difficult to learn than functional though
Really dug into your piece on JavaScript’s OOP vibes! The way you laid out concepts like classes, objects, and all that jazz with ES6 was spot on. Made what’s usually a bit of a head-scratcher into something I got excited about. Your examples weren’t just helpful—they were a blast to follow. Plus, keeping the mood light while unpacking some pretty dense topics? Genius move. Thanks for making this journey through OOP less of a chore and more of a discovery. Learned a ton and had fun doing it
Thank you for the kind words
First and foremost, I want to express my gratitude for breaking down the technical jargon!
When it comes to coding, I often feel like an English-speaking toddler trying to decipher French. It’s easy to get overwhelmed with all the complexities, and I find myself on the verge of tears just trying to insert a simple copy-and-paste in the right place.
I’m certain I’ll be returning to you for assistance in the future, as you’ve managed to make the subject matter remarkably accessible! Thank you immensely for your expertise and your ability to communicate with those of us who aren’t as fluent in the language of coding!