Resumen: en este tutorial, aprenderás sobre las funciones de JavaScript y cómo usarlas para estructurar el código en bloques de código más pequeños y que realiza alguna operación y pueden ser reutilizables.

Introducción a las funciones de JavaScript

Cuando desarrollamos una aplicación, a menudo se necesita realizar la misma acción en muchos lugares. Por ejemplo, es posible que desees mostrar un mensaje cada vez que se produzca un error.

Para evitar repetir el mismo código en todos los lugares, puedes usar una función para envolver ese código y reutilizarlo.

JavaScript proporciona muchas funciones que ya estan integradas, como parseInt() y parseFloat(). En este tutorial, aprenderás a desarrollar funciones personalizadas.

Declarar una función

Para declarar una función, se utiliza la palabra clave function, seguida del nombre de la función, una lista de parámetros y el cuerpo de la función de la siguiente manera:

function functionName(parameters) {
    // function body
    // ...
}

El nombre de la función debe ser un identificador de JavaScript válido. Por convención, los nombres de las funciones están en camelCase y comienzan con verbos como getData(), fetchContents() y isValid().

Una función puede aceptar cero, uno o varios parámetros. En el caso de varios parámetros, debes usar una coma para separar los parámetros.

A continuación, se declara una función llamada say() que no acepta ningún parámetro:

function say() {
}

Lo siguiente declara una función llamada square() que acepta un parámetro:

function square(a) {
}

Y lo siguiente declara una función llamada add() que acepta dos parámetros:

function add(a, b) {
}

Dentro del cuerpo de la función, puedes escribir el código para implementar una acción. Por ejemplo, la siguiente función say() simplemente muestra un mensaje en la consola:

function say(message) {
    console.log(message);
}

En el cuerpo de la función say(), llamamos a la función console.log() para enviar un mensaje a la consola.

Llamar a una función

Para usar una función, debes llamarla. Llamar a una función también se conoce como invocar una función. Para llamar a una función, usa su nombre seguido de argumentos entre paréntesis como este:

functionName(arguments);

Al llamar a una función, JavaScript ejecuta el código que esta dentro del cuerpo de la función. Por ejemplo, lo siguiente muestra cómo llamar a la función say():

say('Hello');

En este ejemplo, llamamos a la función say() y le pasamos una cadena literal 'Hello'.

Parámetros vs Argumentos

Los términos parámetros y argumentos a menudo se usan indistintamente. Sin embargo, son esencialmente diferentes.

Al declarar una función, se especifican los parámetros. Sin embargo, al llamar a una función, pasa los argumentos que corresponden a los parámetros.

Por ejemplo, en la función say(), el mensaje es el parámetro y la cadena 'Hello' es un argumento que corresponde al parámetro del mensaje.

Devolviendo un valor

Cada función en JavaScript devuelve implícitamente undefined a menos que especifiques explícitamente un valor de retorno. Por ejemplo:

function say(message) {
    console.log(message);
}

let result = say('Hello');
console.log('Result:', result);

Resultado:

Hello
Result: undefined

Para especificar un valor de retorno para una función, usa la declaración de retorno seguida de una expresión o un valor, como este:

return expression;

Por ejemplo, la siguiente función add() devuelve la suma de los dos argumentos:

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

A continuación, se muestra cómo llamar a la función add():

let sum = add(10, 20);
console.log('Sum:', sum);

Resultado:

Sum: 30

El siguiente ejemplo usa varias declaraciones de devolución en una función para devolver diferentes valores según las condiciones:

function compare(a, b) {
    if (a > b) {
        return -1;
    } else if (a < b) {
        return 1;
    }
    return 0;
}

La función compare() compara dos valores. Vuelve:

•      -1 si el primer argumento es mayor que el segundo.
•      1 si el primer argumento es menor que el segundo.
•      0 si el primer argumento es igual al segundo.

La función deja de ejecutarse inmediatamente cuando llega a la declaración de devolución o return. Por lo tanto, puedes usar la declaración de return sin un valor para salir de la función antes de tiempo, así:

function say(message) {
    // show nothing if the message is empty
    if (! message ) {
        return;
    }
    console.log(message);
}

En este ejemplo, si el mensaje está en blanco (o indefinido), la función say() no mostrará nada.

La función puede devolver un solo valor. Si deseas devolver varios valores de una función, debes empaquetar estos valores en una matriz o un objeto.

El objeto arguments

Dentro de una función, puede acceder a un objeto llamado arguments que representa los argumentos que le pasaron a la función.

El objeto arguments se comporta como una matriz, aunque no es una instancia de tipo Array.

Por ejemplo, puedes usar los corchetes [] para acceder a los argumentos: arguments[0] devuelve el primer argumento, arguments[1] devuelve el segundo, y así sucesivamente.

Además, puedes usar la propiedad length del objeto de argumentos para determinar el número de argumentos.

El siguiente ejemplo implementa una función add() genérica que calcula la suma de cualquier cantidad de argumentos.

function add() {
    let sum = 0;
    for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

Por lo tanto, puedes pasar cualquier número de argumentos a la función add(), así:

console.log(add(1, 2)); // 3
console.log(add(1, 2, 3, 4, 5)); // 15

Función de elevación

En JavaScript, puede usar una función antes de declararla. Por ejemplo:

showMe(); // a hoisting example

function showMe(){
    console.log('an hoisting example');
}

Esta característica se llama elevación.

El levantamiento de funciones es un mecanismo mediante el cual el motor de JavaScript mueve físicamente las declaraciones de funciones a la parte superior del código antes de ejecutarlas.

A continuación se muestra la versión del código antes de que el motor de JavaScript lo ejecute:

function showMe(){
    console.log('a hoisting example');
}

showMe(); // a hoisting example

Resumen

•      Usa la palabra clave function para declarar una función.
•      Utiliza functionName() para llamar a una función.
•      Todas las funciones devuelven implícitamente undefined si no devuelven explícitamente un valor.
•      Utilice la instrucción de return para devolver un valor de una función de forma explícita.
•      La variable arguments es un objeto similar a una matriz dentro de una función, que representa los argumentos de la función.
•      La función de elevación permite llamar a una función antes de declararla.