By the time the 20-something JavaScript driver learned functional programming, he had thrown away 90% of his features, stopped using object orientation, and finally found love!!

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

In order to ensure readability, free translation rather than literal translation is used in this paper, and a lot of modifications are made to the source code. In addition, the copyright of this article belongs to the original author, and translation is for study only.

I and JavaScript

JavaScript has been used since 1997 with Netscape’s Navigator 3 browser. At the time, JavaScript could only do very simple things. The coolest thing I remember was implementing mouseover in JavaScript, which was pretty high tech at the time! When the mouse moves over, the text changes magically. Because it was all pre-DHTML at the time, you didn’t need to hide or show DOM elements.

On DHTML(is old DHTML now a front end?) :

DHTML is short for Dynamic HTML, an application of the Standard Common Markup Language, which is the concept of web pages as opposed to traditional static HTML. Dynamic HTML (DHTML for short) is not a new language, it is a combination of HTML, CSS and client-side scripting, that is, a page with HTML + CSS +javascript (or other client-side scripting). Where CSS and client scripts are written directly on the page rather than linked to related files.

At the time, JavaScript was slow to evolve and was mostly used for form validation. Therefore, it was not as hot as it is today and did not attract much attention. As an added bonus, you need to make sure your app works even after JavaScript is disabled in your browser. After that, frameworks came one after another: jQuery, Knockout, Angular, React, Vue, and so on.

JavaScript, too, is evolving at an accelerating rate. We’ve only been using ES6 for a while, and now people are almost skipping ES7 and talking about ES8.

There are many alternatives, such as TypeScript, CoffeScript, ClojureScript, ELM, and so on.

We are overwhelmed by so many frameworks and languages that it is hard to keep track of and master them all.

The wrong route

As JavaScript matured, the concept of object-oriented programming (OOP) crept in, and I used to love it.

I started experimenting with all the different ways to create classes, and I ended up using inheritance correctly. I thought to myself: JavaScript is really starting to look like a language!

However, it wasn’t until years later that I realized OOP was the worst design that JavaScript introduced!

I tried to bring my understanding of C# to JavaScript. I was very excited at first, but it turned out to be too complicated, too brain-burning.

This is mainly because JavaScript archetypal inheritance is different from C#, and I’m used to writing elegant code like console.log(this) every day. But what about now? If I accidentally don’t follow the rules, it will give me nightmares. Private methods and private values must be preceded by an underscore, and even closures must be used to keep them private.

Therefore, not only does OOP cause a lot of problems, but it also introduces new problems by adding OOP.

Functional programming

I didn’t understand it at first. I can read and understand the code written functionally, but I don’t know why! Finally, I forced myself to learn it. I took a free introductory course in functional languages at EDX and tried to apply these techniques to JavaScript.

Functional languages have given me a whole new perspective and made me look at programming in a completely different way.

It will feel unnatural at first and take time to get used to. All definitions are based on functions, values are immutable and stateless. I use functional thinking to solve problems. It took me longer to learn because of the unfamiliarity. Gradually, I mastered the use of functional methods to program. Also, I know the implications of all code written this way.

My code is much cleaner and easier to reuse. Gradually, the language features I used disappeared from the code, and my code looked like it was written in another language. Am I still using JavaScript?

1. Stop using var

I’m replacing var with const. By functional design, my functions are pure. No more value changes are made to a variable, again to ensure that it is not changed.

I’m going to check the code to make sure that every var, even let, all declarations use const.

2. No for loop

When we study programming languages, we learn for loops from the very beginning. But since I learned functional programming, I have changed for loops to filter, Map, and Reduce. For requirements that require some extra computation, I use recursive or third-party libraries such as lazy.js.

Rethinking JavaScript: Death of the For Loop

Now I don’t have a for loop in my code at all, so if you see one, let me know and I’ll eliminate it.

3. If can also be simplified

I started to stop writing chunks of code in if. I extracted the logic and put it in a separate function. In this way, we can write if with the ternary operator (a? B :c) to simplify.

Rethinking JavaScript: The If Statement

There are almost no if statements in my code these days. I rarely use it to make it easier for other developers to understand my code.

4. Say goodbye to the switch

Similarly, I don’t like to use switch, and instead look for a functional way to write it.

Rethinking JavaScript: Eliminate the Switch Statement for Better Code

I also like to use Ramda’s cond operator instead of Swtich.

5. Don’t worry about this

Yes, you heard me right! We can also eliminate this completely.

Functional JavaScript lets you get rid of the annoying this completely

Now there are only data and functions, and even data is just a special form of function, you don’t need this anymore. I began to think of objects as states and functions in functional languages. I don’t even need to bind a state or function to an object, as IN OOP.

I wrote a blog specifically about how to decouple: Functional JavaScript: Decoupling methods from their objects

Object-oriented design is not required

Looking back now, I see that the complexity of programming face objects was really unnecessary. I can do the same things and do the same things in a functional language. Also, the code is much lighter because you no longer have to pass these complex objects around. Only data and functions, and because functions are not bound to objects, they are easier to reuse. I don’t have to worry about all the problems of traditional prototype inheritance anymore, JavaScript is not well designed.

JavaScript’s lack of private, public, internal, or protected access controllers is no longer an issue. The access controller is designed to address the introduction of object-oriented programming. In functional JavaScript, these problems disappear.

conclusion

My code now looks completely different. It contains a lot of pure functions, which I’ve made into different ES6 modules. These functions can be used to build more complex functions. Most of the functions are simple one-line lambda expressions.

Now I think of software differently: input is a stream of data, and then programs operate on that stream and return new data.

The influence and ubiquity of functional design on programming languages is best exemplified by LINQ in C#. Java 8 also introduces functional language features.









Are your users experiencing bugs?

Experience the Demo
Free to use