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).

Let’s 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

1. Conceptually, there is No Class in JavaScript

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.

2. Bad For Functional Programming

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 Inheritance” and here we are going in the opposite direction because “Class” notation favors “Inheritance over Composition”.

Summary

It’s A “Good” Part Because:

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.

It’s A “Bad” Part Because:

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! 🙏

If this was useful, please click the clap 👏 button down below a few times to show your support! ⬇⬇⬇ 🙏🏼

My Other Posts

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

ECMAScript 2015+

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?

Terminal Improvements

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

WWW

1. A Fascinating And Messy History Of The Web And JavaScript

Virtual DOM

1. Inner Workings Of The Virtual DOM

React Performance

1. Two Quick Ways To Reduce React App’s Size In Production
2. Using Preact Instead Of React

Functional Programming

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”

WebPack

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

Draft.js

1. Why Draft.js And Why You Should Contribute
2. How Draft.js Represents Rich Text Data

React And Redux :

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

If this was useful, please click the clap 👏 button below a few times to show your support! ⬇⬇⬇ 🙏🏼