Skip to main content

Functions in JavaScript: A Beginner's Guide with Examples

Functions in JavaScript: A Beginner's Guide with Examples

Learn what functions are in JavaScript, how to create them, and how to use them step by step. A clear explanation for beginners with practical examples will help you master one of the most important concepts in JavaScript programming.

What is a function in JavaScript and what is it used for?​

Functions in JavaScript are reusable blocks of code that perform a specific task. Functions allow you to organize your code, make it more readable, and avoid repetition.

Why use functions?​

Using functions has several advantages:

  • Code reuse: You can define a function once and call it multiple times in different parts of your program.

  • Organization: Functions help structure your code into manageable and logical parts.

  • Maintenance: If you need to change the logic of a task, you only have to modify the function in one place.

  • Readability: Functions with descriptive names make the code easier to understand.

How to define a function​

In JavaScript, you can define a function using the keywordfunctionfollowed by the function name, parentheses, and curly braces. Here's a basic example:

function saludar() {
  console.log("¡Hola, mundo!");
}

In this example, we have defined a function calledsaludarwhich, when called, prints "Hello, world!" to the console.

How to call a function​

To execute code inside a function, you must "call" the function using its name followed by parentheses:

saludar(); // Llama a la función y muestra "¡Hola, mundo!" en la consola

Functions with Parameters​

Functions can accept parameters, which are values passed to the function when it is called. These parameters allow the function to work with different data. Here's an example:

function saludar(nombre) {
  console.log("¡Hola, " + nombre + "!");
}

saludar("Ana"); // Muestra "¡Hola, Ana!" en la consola

saludar("Luis"); // Muestra "¡Hola, Luis!" en la consola

In this case, the functionsaludarIt takes a parameter callednombreand uses it to personalize the greeting message.

Functions with Return Values​

Functions can also return a value using the keywordreturnThis is useful when you want the function to perform a calculation and return the result. Here's an example:

function sumar(a, b) {
  return a + b;
}

let resultado = sumar(5, 3); // Llama a la función y almacena el resultado

console.log(resultado); // Muestra 8 en la consola

In this example, the functionsumarIt takes two parameters,a and band returns their sum. The result is stored in the variableresultado

Anonymous Functions: What They Are and When to Use Them​

Anonymous functions are functions that don't have a name. They are commonly used as values assigned to variables or passed as arguments to other functions. Here's an example of an anonymous function assigned to a variable:

let multiplicar = function (x, y) {
  return x * y;
};

console.log(multiplicar(4, 5)); // Muestra 20 en la consola

Arrow Functions in JavaScript​

Arrow functions are a more concise way to define anonymous functions. Here's an example:

let dividir = (x, y) => {
  return x / y;
};

console.log(dividir(20, 4)); // Muestra 5 en la consola

Differences between declared and expressed functions​

Declared functions: These are defined using the keywordfunctionfollowed by the function name. These functions can be called before their definition in the code due to "hoisting".

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

console.log(restar(10, 4)); // Muestra 6 en la consola

Expressed Functions: These are assigned to a variable and do not have a proper name. These functions cannot be called before they are defined in the code.

let elevarAlCuadrado = function (num) {
  return num * num;
};

console.log(elevarAlCuadrado(6)); // Muestra 36 en la consola

Recursive Functions​

Recursive functions are those that call themselves to solve a problem. They are useful for tasks that can be broken down into smaller subproblems. Here is an example of a recursive function that calculates the factorial of a number:

function factorial(n) {
  if (n === 0) {
    return 1; // Caso base
  } else {
    return n * factorial(n - 1); // Llamada recursiva
  }
}

console.log(factorial(5)); // Muestra 120 en la consola

The return value: how to use return in your functions​

The keywordreturnIn JavaScript, return is used within a function to specify the value that the function should return when called. When a function encounters a return statementreturnThe function's execution stops, and the specified value is returned to the location where the function was called. Here's a simple example:

function obtenerNombreCompleto(nombre, apellido) {
  return nombre + " " + apellido; // Devuelve el nombre completo
}

let nombreCompleto = obtenerNombreCompleto("Juan", "Pérez"); // Llama a la función y almacena el resultado

console.log(nombreCompleto); // Muestra "Juan Pérez" en la consola

In this example, the functionobtenerNombreCompletoIt takes two parameters,nombre and apellidoand usesreturnto return the concatenation of both. The returned value is stored in the variablenombreCompleto

Scope of Variables Within a Function​

The scope of a variable determines where it can be accessed within the code. In JavaScript, variables defined inside a function have local scope, meaning they can only be accessed from within that function. Here's an example:

function ejemploScope() {
  let mensaje = "Hola desde el ámbito local"; // Variable con ámbito local
  console.log(mensaje); // Funciona aquí
}

ejemploScope(); // Llama a la función y muestra el mensaje

console.log(mensaje); // Error: mensaje no está definido fuera de la función

In this example, the variablemensajeis defined within the functionejemploScopeTherefore, it can only be accessed from within that function. Attempting to accessmensajeNesting outside the function will result in an error.

Functions within functions: nesting explained​

In JavaScript, you can define functions inside other functions. These inner functions have access to the variables and parameters of the outer function, allowing you to create a closed scope and encapsulate the logic. Here's an example:

function funcionExterna(x) {
  function funcionInterna(y) {
    return x + y; // Accede a la variable x de la función externa
  }
  return funcionInterna; // Devuelve la función interna
}

let sumaConCinco = funcionExterna(5); // Llama a la función externa y obtiene la función interna

console.log(sumaConCinco(3)); // Muestra 8 en la consola (5 + 3)

console.log(sumaConCinco(10)); // Muestra 15 en la consola (5 + 10)

In this example,funcionInternais defined withinfuncionExternaand can access the variablexThe outer function returns the inner function, which can then be called with different values.

Best Practices for Writing Functions in JavaScript​

Here are some best practices for writing functions in JavaScript:

  • Descriptive Names: Use clear and descriptive names for your functions that indicate their purpose.

  • Small Functions: Keep your functions short and focused on a single task.

  • Limited Parameters: Avoid having too many parameters in a function. If necessary, consider using an object to group them.

  • Comments: Add comments to explain complex logic within your functions.

  • Avoid Side Effects: Functions should avoid modifying external variables or having unexpected side effects.

  • Useconst and let: Declare variables within functions withconst either letto avoid scope issues.

Conclusion​

Functions are a fundamental part of JavaScript and programming in general. They allow you to organize your code, making it more readable and reusable. By mastering functions, you'll be on your way to becoming a more efficient and effective JavaScript developer. Practice creating and using functions in your projects to improve your programming skills!

Resources
Exercises

💻Try these basic exercises on Functions in JavaScript:

Creating a Simple Function with JavaScript

Function to Calculate the Area of a Rectangle

Function that filters a list of products on sale

Function that calculates the total price including tax