Learn Best Practices for Functions | Modern and Advanced Function Patterns

When writing JavaScript functions, following a set of best practices helps you produce code that is easy to understand, maintain, and reuse. Four essential guidelines stand out:

Single Responsibility: each function should do one thing only. When a function tries to handle too many tasks, it becomes harder to test, debug, and reuse. By focusing on a single responsibility, you make your code more predictable and easier to manage;
Descriptive names: use clear, descriptive names for your functions. A function name should describe what the function does, so anyone reading your code knows its purpose without needing to read its implementation;
Avoiding side effects: functions should avoid changing variables or states outside their own scope. Side effects make code harder to predict and debug. Prefer functions that take input, process it, and return a result without altering anything else;
Keeping functions short: short functions are easier to read, understand, and test. If a function is becoming long, look for ways to break it into smaller, reusable functions.

By following these practices, you make your code more robust and maintainable in the long term.


              12345678910111213141516171819
            
// Messy calculator
function calculator(a, b, operation) {
  if (operation === "add") {
    return a + b;
  } else if (operation === "subtract") {
    return a - b;
  } else if (operation === "multiply") {
    return a * b;
  } else if (operation === "divide") {
    if (b === 0) {
      return "Cannot divide by zero";
    }
    return a / b;
  } else {
    return "Unknown operation";
  }
}

console.log(calculator(34, 12, "divide"));


              1234567891011121314151617181920212223242526272829303132333435
            
// Clean calculator
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

function multiply(a, b) {
  return a * b;
}

function divide(a, b) {
  if (b === 0) {
    return "Cannot divide by zero";
  }
  return a / b;
}

function calculator(a, b, operation) {
  if (operation === "add") {
    return add(a, b);
  } else if (operation === "subtract") {
    return subtract(a, b);
  } else if (operation === "multiply") {
    return multiply(a, b);
  } else if (operation === "divide") {
    return divide(a, b);
  } else {
    return "Unknown operation";
  }
}

console.log(calculator(34, 12, "divide"));

Refactoring a complex function into smaller, focused functions, as in the calculator example, demonstrates how best practices make your code easier to read and maintain. When functions each handle a single responsibility and have descriptive names, it becomes much simpler for teammates to understand your intentions and contribute effectively. Avoiding side effects ensures that changes in one part of your code do not cause unexpected bugs elsewhere. Keeping functions short and reusable also makes it easier to test and debug, leading to higher quality software and smoother teamwork.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 5

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain more about what side effects are in JavaScript functions?

How do I decide when a function is too long and should be split up?

Can you give more examples of descriptive function names?

Awesome!

Completion rate improved to 7.69

Swipe to show menu

When writing JavaScript functions, following a set of best practices helps you produce code that is easy to understand, maintain, and reuse. Four essential guidelines stand out:

Single Responsibility: each function should do one thing only. When a function tries to handle too many tasks, it becomes harder to test, debug, and reuse. By focusing on a single responsibility, you make your code more predictable and easier to manage;
Descriptive names: use clear, descriptive names for your functions. A function name should describe what the function does, so anyone reading your code knows its purpose without needing to read its implementation;
Avoiding side effects: functions should avoid changing variables or states outside their own scope. Side effects make code harder to predict and debug. Prefer functions that take input, process it, and return a result without altering anything else;
Keeping functions short: short functions are easier to read, understand, and test. If a function is becoming long, look for ways to break it into smaller, reusable functions.

By following these practices, you make your code more robust and maintainable in the long term.


              12345678910111213141516171819
            
// Messy calculator
function calculator(a, b, operation) {
  if (operation === "add") {
    return a + b;
  } else if (operation === "subtract") {
    return a - b;
  } else if (operation === "multiply") {
    return a * b;
  } else if (operation === "divide") {
    if (b === 0) {
      return "Cannot divide by zero";
    }
    return a / b;
  } else {
    return "Unknown operation";
  }
}

console.log(calculator(34, 12, "divide"));


              1234567891011121314151617181920212223242526272829303132333435
            
// Clean calculator
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

function multiply(a, b) {
  return a * b;
}

function divide(a, b) {
  if (b === 0) {
    return "Cannot divide by zero";
  }
  return a / b;
}

function calculator(a, b, operation) {
  if (operation === "add") {
    return add(a, b);
  } else if (operation === "subtract") {
    return subtract(a, b);
  } else if (operation === "multiply") {
    return multiply(a, b);
  } else if (operation === "divide") {
    return divide(a, b);
  } else {
    return "Unknown operation";
  }
}

console.log(calculator(34, 12, "divide"));

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 5