Is “Class” In ES6 The New “Bad” Part?

Yesterday I wrote a blog “5 JavaScript “Bad” Parts That Are Fixed In ES6" and mentioned “Class” as one of the fixes. Since then I’ve received a ton of responses where many thought “Class”-syntax in ES6 is better and useful. However others indicated that there was no need for the “Class” keyword because JS doesn’t have the concept of “Class” (i.e blueprint). In fact, their argument is that it may make things worse, because ES6's official “Class” is just a syntactic sugar and not technically and conceptually accurate (i.e. it’s false advertisement or cause for more confusion).

Lets see the arguments from both sides to understand it better.

Argument: Class In ES6 A “Good” Part

The first thing people learn when they study OO language is the concept of Class and how inheritance works and so on. In JS you could simulate a “Class” and do OO programming since the beginning. However, there was no “Class” keyword and the code to set it up, create sub classes and call parent’s functions were all weird and confusing.

Also, most JS folks just want to do basic OO stuff and move on. But the current syntax throw them off.

Further, this is an optional way of creating Objects. It doesn’t prevent people from creating objects using other techniques like “function factories”, “Object literal” and so on.

So making the syntax look better and similar to other OO languages, while still keeping the “prototype” inheritance goodness is a good thing. People can use other ways if they don’t want to use “Class” to create Objects.

Argument : Class In ES6 The New “Bad” Part

Objects are created without Classes! The best way to explain this is to use a real-world analogy of “Living things” (like humans) Vs “Nonliving things” (like car, furniture).

The below picture depicts how object creation differ in Java from that of JavaScript.

You can click on the picture to zoom and read

Objects in Java World Vs JavaScript World

As you can imagine, In JS, there is no overhead and constraints of needing a Class to use objects. Further “prototype”-chain based inheritance can wire up any object to any other object that may not be related (IS-A relationship). So it’s very flexible compared to Classes.

In JS functions are first-class citizens. Functional programming is all about using functions to their fullest extent. There is a notion called: “Favor Composition over Inheritanceand here we are going in the opposite direction because “Class” notation favors “Inheritance over Composition”.

Summary

  1. Class is something everyone learns and making the syntax better is a good thing.
  2. It’s an optional feature and there are other ways to create objects like factory functions.
  3. Using it for limited purposes is fine.
  1. The concept of “Class” doesn’t exist in JavaScript.
  2. Concept of classes makes things brittle. Prototypes are better and very flexible.
  3. It guides people away from goodness and power of functional programming.

So where do you stand? Is “Class” In ES6 The New “Bad” Part?

That’s it! 🙏

My Other Posts

https://medium.com/@rajaraodv/latest

  1. Check out these useful ECMAScript 2015 (ES6) tips and tricks
  2. 5 JavaScript “Bad” Parts That Are Fixed In ES6
  3. Is “Class” In ES6 The New “Bad” Part?
  1. How to Jazz Up Your Terminal — A Step By Step Guide With Pictures
  2. Jazz Up Your “ZSH” Terminal In Seven Steps — A Visual Guide
  1. A Fascinating And Messy History Of The Web And JavaScript
  1. Inner Workings Of The Virtual DOM
  1. Two Quick Ways To Reduce React App’s Size In Production
  2. Using Preact Instead Of React
  1. JavaScript Is Turing Complete — Explained
  2. Functional Programming In JS — With Practical Examples (Part 1)
  3. Functional Programming In JS — With Practical Examples (Part 2)
  4. Why Redux Need Reducers To Be “Pure Functions”
  1. Webpack — The Confusing Parts
  2. Webpack & Hot Module Replacement [HMR] (under-the-hood)
  3. Webpack’s HMR And React-Hot-Loader — The Missing Manual
  1. Why Draft.js And Why You Should Contribute
  2. How Draft.js Represents Rich Text Data
  1. Step by Step Guide To Building React Redux Apps
  2. A Guide For Building A React Redux CRUD App (3-page app)
  3. Using Middlewares In React Redux Apps
  4. Adding A Robust Form Validation To React Redux Apps
  5. Securing React Redux Apps With JWT Tokens
  6. Handling Transactional Emails In React Redux Apps
  7. The Anatomy Of A React Redux App
  8. Why Redux Need Reducers To Be “Pure Functions”
  9. Two Quick Ways To Reduce React App’s Size In Production

Trying to make Web development simple. Former Developer Advocate @Salesforce, VMware (node.js); Engineer @ Yahoo, Zimbra. Twitter: @rajaraodv

Trying to make Web development simple. Former Developer Advocate @Salesforce, VMware (node.js); Engineer @ Yahoo, Zimbra. Twitter: @rajaraodv