Functional Programming vs OOP in JavaScript

Functional Programming vs OOP in JavaScript

What is the difference between OOP and functional programming? To figure this out we will be writing a small factorial website calculator. The first approach uses functional programming, the second one OOP.

What is the difference between OOP and functional programming? To figure this out we will be writing a small factorial website calculator. The first approach uses functional programming, the second one OOP.

Introduction

Before we get started with coding I want to give you a quick introduction to object-oriented and functional programming.

Both are programming paradigms differing in the techniques they allow and forbid.

There are programming languages that only support one paradigm e.g. Haskell (purely functional).

As well as languages that support multiple paradigms such as JavaScript, you can use JavaScript to write object-oriented or functional code or even a mixture of both.

Setup

Before we can dive deep into the differences between these two paradigms we need to set up the project.

For that we first create all the files and folders we need like this:

$ mkdir func-vs-oop
$ cd ./func-vs-oop
$ cat index.html
$ cat functional.js
$ cat oop.js

I’m using the cat command because it works both on Linux-systems and Windows Powershell.

Next up we need to create a simple form for the factorial calculator inside the index.html.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <script src="functional.js" defer></script>
</head>
<body>
  <div class="container mt-5">
    <div class="container mt-3 mb-5 text-center">
      <h2>Functional vs OOP</h2>
    </div>
    <form id="factorial-form">
      <div class="form-group">
        <label for="factorial">Factorial</label>
        <input class="form-control" type="number" name="factorial" id="factorial" />
      </div>
      <button type="submit" class="btn btn-primary">Calculate</button>
    </form>
    <div class="container mt-3">
      <div class="row mt-4 text-center">
        <h3>Result:</h3>
        <h3 class="ml-5" id="factorial-result"></h3>
      </div>
    </div>
  </div>
</body>
</html>

To give this form a better look and feel we use bootstrap as a CSS-Framework. If you display this HTML in the browser it should look like this:

Image for post

factorial calculator

Currently, this form won’t do anything.

Our goal is to implement a logic where you can enter a number up to 100. After clicking the “Calculate”-button it should show the result in the result-div. We will implement this both in the object-oriented way and the functional way.

web-development oop javascript programming functional-programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Functional Programming in JavaScript Explained

Functional programming has become a really hot topic in the JavaScript world. You'll learn: what functional programming is, the types of functions there are, the principles of functional programming, and have a deeper understanding of Higher Order functions.

Understanding Functional Programming in JavaScript

Functional Programming in JavaScript teaches you techniques to improve your web applications: their extensibility, modularity, reusability, and testability, ...

filterMap in JavaScript, efficiency for functional programming

All JavaScript developers are awesome and they deserve a brilliant way of filtering and mapping over an array with just one function with a linear complexity O(n) of one run through the array.

Functional JavaScript :  Functional Programming and Arrays

Functional JavaScript :  Functional Programming and Arrays. Create our own map and filter functions. We’ll look at how to create our own array methods. JavaScript is partly a functional language. To learn JavaScript, we got to learn the functional parts of JavaScript.

First Steps Into Functional Programming in JavaScript - Composition Example

In this video i dip my toes in the world of functional programming in Javascript by exploring composition. I try to wrap my head around a compose() function that takes an array of functions and runs them after one another and passes on the accumulated value.