How I rediscovered my love for JavaScript after throwing 90% of it in the trash.

My Relationship with JavaScript

My journey with JavaScript started way back in 1997 with Netscape Navigator 3. Back then you couldn’t do much with it. The coolest use of JavaScript was to create mouseovers. At the time, that was some high tech 💩. Being able to change content on the page by just hovering. mind blown. This was all pre-DHTML BTW, so you couldn’t even hide / show DOM elements. It was still oh so magical.

At this point in time, JavsScript’s evolution was very slow, being used primarily for form validation. There wasn’t much progress or interest in JavaScript, nothing like today. It was an extra, an addon, a nice-to-have, but it definitely wasn’t the main attraction and you would still have to be sure your application could run with JavaScript disabled.

Then frameworks entered the market in a big way. jQuery, Knockout, Angular, React, Vue, etc. They came slow at first. Now we get a new framework daily.

We are also seeing the evolution of JavaScript itself accelerating. It took us forever to get ES6. People have already stopped talking about ES7 and are onto ES8!

We also have an infinite number of alternatives such as TypeScript, CoffeeScript, ClojureScript, ELM, etc.

It can be overwhelming and it’s impossible to keep up with everything.

The Wrong Path

When JavaScript first started to mature, Object Oriented Programming (OOP) started to sneak its way into the language… and I loved it.

I started playing with JavaScript and all the different ways I could create a class. I could finally do proper inheritance. I started to think to myself, JavaScript is starting to become a real language.

It wasn’t until many years later that I would discover OOP in JavaScript was a terrible mistake.

I tried to force what I knew from C# into JavaScript and at first things seemed very promising, but the complexity was mind-bending.

Because JavaScript’s prototypal inheritance does not work like C#, I would find myself writing console.log(this) on a daily basis. Who am I now? If you didn’t do everything exactly right, it was a nightmare. Private methods and values had to be prefixed with underscores or even worse wrapped in closures.

Not only did OO JavaScript come with all the problems of OOP, but it added many new problems on top of it.

Then I Discovered Functional Programming

I didn’t get it at first. I would see the code and understand the code, but I didn’t get why. Eventually, I forced myself to learn it. I took an Introduction to Functional Programming course on EDX for FREE with the intent of applying those techniques to JavaScript.

Functional Programming gave me a new perspective, it made me see programming in a much different way.

It was weird at first and took me a while to get used to it. Everything was backwards. Immutable. Foreign.

Slowly, I would try to solve code the functional way. Because I was unfamiliar, it took longer and was more of an academic exercise, but I started to get it and get better at it. Then I got why.

My code became simplified and reusable. Slowly common language features started to disappear from my code. My code looked like a completely different language. Was this still JavaScript I was writing?

No more ‘var’

All my var's were replaced with const. When my code became immutable and my functions became pure, var disappeared completely.

I remember looking at my code and marveling at not seeing a single var or even let, everything became const. My interest levels started rising.

The ‘for’ Loop

The for loop was one of the first things to go. I started replacing the majority of my for loops with filter, map and reduce. The loops that required something extra were replaced with recursion or libraries like lazy.js. Before you start to mutter the word break, read this.

Rethinking JavaScript: Death of the For Loop_JavaScript’s for loop has served us well, but it is now obsolete and should be retired in favor of newer functional…_hackernoon.com

The for loop is now completely extinct in my codebase. If you do happen to stumble across one, point it out so I can kill it.

The ‘if’ Statement

The if statement was soon the next thing to go. I stopped writing large blocks of code nested inside an if-else. (this is also good practice to do with OOP). The logic was extracted into functions. After this, it became obvious to convert the if to a simple ternary operator.

Rethinking JavaScript: The if statement_Thinking functionally has opened my mind about programming. It has given me a greater depth of understanding of code…_hackernoon.com

It is now almost impossible to find an if statement in my code. I will rarely use one for readability for other programmers.

RIP ‘switch’

With the if and for gone, the next feature I eliminated was the switch. These weren’t used often, but I wanted a functional alternative.

Rethinking JavaScript: Eliminate the switch statement for better code_In my last 3 articles I convinced you to remove the if statement, kill the for loop, and never use break. Now I’m going…_hackernoon.com

I also really like Ramda’s cond operator as a replacement for switch.

No More ‘this’

That’s right, you heard me correctly! this has completely disappeared. If you haven’t been with me up until this point, you should be with me now.

Functional JavaScript will allow you to write entire applications free of 'this’.

Now, there is only data and functions and we have absolutely no need for this. I started to see an object as mutable state + functions. I didn’t have a need for mutable state or for functions to be attached to objects, so I disconnected them.

I even wrote an article talking about some of the benefits of decoupling methods from their objects.

Functional JavaScript: Decoupling methods from their objects_One thing I always end up doing in my project is decoupling methods from their objects. map, filter and reduce are not…_hackernoon.com

Object Oriented Design is Unnecessary

Looking back, I now realize OOP added a complexity that was not necessary. I found I could perform the same tasks without having a mutable state.

The code felt lighter because I was no longer passing around these heavy objects. There was just data and functions. These functions now became more reusable now that they weren’t tied to an object.

I no longer had to worry about all the issues that come along with classical inheritance, which JavaScript does poorly.

JavaScript’s lack of access modifiers like private, public, internal or protected was no longer an issue. Access modifiers were created to solve issues that OOP created. Issues that no longer exist in functional JavaScript.

Summary

My code now looks completely different. It consists of a collection of many pure functions, organized into ES6 modules. I use these functions to compose into more complex functions. A large majority of functions are one-line lambda expressions that immediately return a value.

I now see software inputs as data streams and program reactively on those streams.

My understanding of functional programming has given me more options at my disposal to me to solve common problems.

I also learned that functional programming is inclusive and can be used as much or as little as you need in existing projects today. C#’s LINQ is a great example of functional design in an OO language.

Functional Programming can be beautiful.

The beauty in Partial Application, Currying, and Function Composition._Story Time_hackernoon.com

I will respond to every question and comment, so don’t be shy!

I know it’s a small thing, but it makes my day when I get those follow notifications on Medium and Twitter (@joelnet). Or if you think I’m full of shit, tell me in the comments below.

Cheers!

Latest stories written by Joel Thoms - Medium_Read the latest stories written by Joel Thoms on Medium. Computer Scientist and Technology Evangelist with 20+ years of…_medium.com