JavaScript 6 for the C# Developer: Mini Series – Part 3: Object Oriented Programming

Today I am going to introduce you to OOP (Object Oriented Programming) in JavaScript 6. Now, OOP is not a new thing in JavaScript. Achieving OOP in JavaScript can currently be done using Prototype based programming; this doesn’t use classes and instead uses functions to define the classes. For example:

JavaScript 6 brings us an even easier way to create OOP apps using Classes. Classes are really just syntactic sugar over the current prototype based model shown above. But I feel it now reduces the barrier to entry in creating clean, reusable and extendable JavaScript apps. Of course, this series isn’t just about JavaScript 6. It’s about how some of the new features of JavaScript 6 are quite similar to how we write C# apps. Again, as I’ve said you could do OOP in JavaScript already, but using prototype everywhere was a little messier and didn’t feel the same. Classes break down that wall.

Let’s take the example above and see how it would look if we wrote it using C# and then let’s take a look at how simplified this approach is in the new JavaScript world.

Nothing really earth shattering going on here, but one thing is for sure, that syntactically the current JavaScript way of implementing OOP previous to version 5 is miles apart in look and feel from its C# OOP cousin. Now then, let’s see how this changes with JavaScript 6, show me some syntactic loveliness:

Well, that’s much easier to take in and understand don’t you think? We now have a class type that has a constructor that can take zero to many parameters and instantiate the object. We define our objects methods without the need to declare a function every time. And we can derive from a base class using extends and pass back parameters needed by the parent constructor using super.

 

Thanks for reading and keep building awesome.

Until next time!

Ian B
P.S. You can also find me on Twitter: @ianaldo21