Aprende 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.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 3. Capítulo 5

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 7.69

Desliza para mostrar el menú

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"));

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 3. Capítulo 5