Understanding Reusable Functions: A Practical Guide with Code Examples

Reusability is a fundamental principle in software development that enables developers to write code that can be used in multiple contexts without modification. One powerful technique for achieving reusability is through the use of functions.

In this article, we'll explore an example of a reusable function that changes the background colour of a web page. Here's the code:

<h1>Change Color</h1>

<button id="colorButton">Change color</button>
<br />
<input type="color" name="color" id="colorInput" aria-label="color" />

function generateRandomColor() {
  let times = 3;
  const result = [];
  while (times > 0) {
    // 3 ways to approximate a number:
    // Math.round (to the nearest integer)
    // Math.floor (to the lowest closest integer)
    // Math.ceil (to the highest closest integer)
    result.push(Math.floor(Math.random() * 256));
    times--;
  }
  return `rgb(${result.join(", ")})`;
}

function changeColor(inputColor, element = document.body) {
  // Get the color or generate a random color
  const color = inputColor || generateRandomColor();
  // Set the body background color to the color
  element.style.backgroundColor = color;
}

// Define elements to change the color
const button = document.querySelector("#colorButton");
const input = document.querySelector("#colorInput");

// Define when to change the color and with what
button.addEventListener("click", () => changeColor());
input.addEventListener("change", (event) => changeColor(event.target.value));

The changeColor() function is reusable and takes an optional inputColor parameter. If inputColor is provided, the function sets the background-color of the web page to that colour. If inputColor is not provided, the function generates a random colour and sets the background colour to that colour.

The generateRandomColor() function generates a random colour. It generates three random numbers between 0 and 255 and returns a string in the format rgb(r, g, b).

The code also defines two elements to change the colour, a button and a colour input. The button is used to generate a random colour, while the colour input is used to specify a specific colour.

By encapsulating the logic for changing the background colour into a reusable function, we can easily change the background colour of the web page in multiple contexts. For example, we can use the function to change the background colour of a button or a text box.

In conclusion, functions are a powerful tool for achieving reusability in software development. By encapsulating code blocks into functions that can be reused across the application, developers can save time and effort in developing and maintaining code. The changeColor() function is an example of a reusable function that can change a web page's background colour in multiple contexts.