Exploring Procedural, Object-Oriented, and Functional Programming with JavaScript

Target Audience This article is tailored to anyone eager to explore and understand the three most prevalent programming paradigms in JavaScript: Procedural, Object-Oriented, and Functional programming.

Learning Objectives By the end of this article, you will be able to:

• Identify procedural, object-oriented, and functional programming styles.

• Write code using these styles.

• Convert from procedural style to either of the other two.

• Understand the differences between these paradigms.

This article will enhance your understanding of each paradigm and guide you in their practical implementation. It does not delve into the depths of each programming style but provides sufficient knowledge for a firm foundation.

Procedural Programming Derived from imperative programming, the procedural paradigm is based on the procedure call concept. Programming in this style involves a step-by-step approach, instructing the computer sequentially. Here is a simple example:

HTML code:

<h1 id="h1">Procedural Programming</h1>
<div id="count">0</div>
<button id="btn">Change Color</button>

The HTML code above displays a h1 tag with the value "Procedural Programming". The div tag shows a count of '0' on the page, and the button tag displays a button labeled "Change Color".

JavaScript code implementing a procedural approach:

const h1 = document.getElementById("h1");
const btn = document.getElementById("btn");
const displayCount = document.getElementById("count");
let counter = 0;

const colorArray = [
  "#FF6633", "#FFB399", "#FF33FF", "#FFFF99", "#00B3E6",
  "#E6B333", "#3366E6", "#999966", "#99FF99", "#B34D4D",
  "#80B300", "#809900", "#E6B3B3", "#6680B3", "#66991A",
];

btn.onclick = function () {
  const randomNumber = Math.ceil(Math.random() * colorArray.length);
  h1.style.color = colorArray[randomNumber];
  displayCount.innerHTML = `Clicked ${counter} times`;
  counter++;
};

The JavaScript code is procedural because it's executed in multiple sequential steps. First, we declare all the variables. Then, we add an onClick event to the btn variable, triggering a function that generates a random number to select a color from colorArray. It changes the h1 color and increments the counter variable to display the number of button clicks. This example demonstrates the essence of procedural programming.

Object-Oriented Programming (OOP) This programming paradigm is based on the concept of "objects" that can contain data and code. Data can be in the form of fields, known as attributes or properties, and code in the form of procedures, often referred to as methods. We can refactor the previous example using an object-oriented approach:

HTML code:

<h1 id="h1">Object-Oriented Programming</h1>
<div id="count">0</div>
<button id="btn">Change Color</button>

JavaScript code refactored to OOP:

class AppPage {
  constructor() {
    this.btn = document.getElementById("btn");
    this.h1 = document.getElementById("h1");
    this.displayCount = document.getElementById("count");
    this.counter = 0;
    this.btn.onclick = this.clickHandler;
  }

  randomNumber() {
    return Math.ceil(Math.random() * this.colorArray.length);
  }

  randomColor() {
    const colorArray = [
      "#FF6633", "#FFB399", "#FF33FF", "#FFFF99", "#00B3E6",
      "#E6B333", "#3366E6", "#999966", "#99FF99", "#B34D4D",
      "#80B300", "#809900", "#E6B3B3", "#6680B3", "#66991A",
    ];
    return colorArray[this.randomNumber()];
  }

  clickHandler = () => {
    this.h1.style.color = this.randomColor();
    this.displayCount.innerHTML = `Clicked ${this.counter} times`;
    this.counter++;
  };
}

new AppPage();

In the OOP example, we encapsulate related variables and functions into an AppPage class. Each object of this class can access and manipulate its own data (properties) and behavior (methods). This encapsulation makes code easier to read, manage, and extend, especially in larger applications.

Functional Programming Functional programming constructs programs by applying and composing functions. It's a declarative programming paradigm where function definitions are trees of expressions that map values to other values. In JavaScript, functions are first-class citizens, meaning they can be assigned to variables, passed as arguments, and returned from other functions.

Let's refactor the previous example using the functional programming paradigm:

HTML code:

<h1 id="h1">Functional Programming</h1>
<div id="count">0</div>
<button id="btn">Change Color</button>

JavaScript code refactored to Functional Programming:

const getElementById = (id) => document.getElementById(id);

const getRandomNum = (max) => Math.ceil(Math.random() * max);

const randomColors = () => {
  const colorArray = [
    "#FF6633", "#FFB399", "#FF33FF", "#FFFF99", "#00B3E6",
    "#E6B333", "#3366E6", "#999966", "#99FF99", "#B34D4D",
    "#80B300", "#809900", "#E6B3B3", "#6680B3", "#66991A",
  ];

  return colorArray[getRandomNum(colorArray.length)];
};

const counter = () => {
  let count = 0;
  return () => count++;
};

const count = counter();

const handler = () => {
  const h1Element = getElementById("h1");
  const displayCount = getElementById("count");
  h1Element.style.color = randomColors();
  displayCount.innerHTML = `Clicked ${count()} times`;
};

const connectInput = () => {
  const btnElement = getElementById("btn");
  btnElement.onclick = handler;
};

connectInput();

The functional programming approach breaks down the program into small, testable functions. Each function is pure, meaning it does not produce side effects and does not depend on external state. This leads to code that is easier to understand, test, and debug.

Conclusion This article introduced the fundamental concepts of Procedural, Object-Oriented, and Functional programming paradigms and demonstrated how to implement them using JavaScript. To delve deeper into these paradigms, explore the following links:

• Procedural Programming

• Object-Oriented Programming

• Functional Programming