Funciones en JavaScript: declaración, parámetros y arrow functions

En el capítulo anterior vimos cómo usar los bucles y las instrucciones de control de flujo para gobernar la ejecución de nuestro código. En esta parte del tutorial vamos a ver otro elemento importante de JavaScript: las funciones.

Las funciones son bloques de código que puedes ejecutar cuando quieras: defines una tarea una sola vez y la ejecutas tantas veces como haga falta, sin reescribir el código. Así escribes código más eficaz y más fácil de mantener, porque defines la tarea una vez y la reutilizas en todo tu código.

Estos son los distintos elementos que hay que tener en cuenta al escribir funciones en JavaScript:

• La declaración de funciones
• Los argumentos y los parámetros
• El valor de retorno de las funciones
• Las arrow functions

Declaración de funciones

Hay dos formas de declarar una función en JavaScript: la declaración de función y la expresión de función.

Declaración de función

function maFonction() {
  // código a ejecutar
}

Expresión de función

const maFonction = function() {
  // código a ejecutar
}

Los argumentos y los parámetros

Los argumentos son los valores que se pasan a una función al llamarla. Los parámetros son las variables definidas en la declaración de la función que se corresponden con los argumentos que se le pasan.

Aquí tienes un ejemplo de función con un argumento y un parámetro:

function maFonction(parametre) {
  console.log(parametre);
}

maFonction('Bonjour'); // muestra 'Bonjour' en la consola

El valor de retorno de las funciones

Las funciones pueden devolver un valor con la instrucción « return ». Si una función no devuelve ningún valor, se considera que devuelve « undefined ».

function maFonction() {
  return 'Bonjour';
}

console.log(maFonction()); // muestra 'Bonjour' en la consola

También puedes devolver varios valores desde una función usando un objeto o un array:

function maFonction() {
  return {
    message: 'Bonjour',
    nombre: 42
  };
}

console.log(maFonction());
// muestra { message: 'Bonjour', nombre: 42 } en la consola

function maFonction() {
  return [1, 2, 3];
}

console.log(maFonction()); // muestra [1, 2, 3] en la consola

Cuando usas la instrucción « return », la función se detiene de inmediato y el código que viene después no se ejecuta. Aquí tienes un ejemplo que lo ilustra:

function maFonction() {
  return 'Bonjour';
  console.log('Ce message ne sera jamais affiché');
}

console.log(maFonction()); // muestra 'Bonjour' en la consola

Las arrow functions

Las arrow functions (o « funciones flecha » en español) son una sintaxis más concisa para escribir funciones en JavaScript. Resultan especialmente útiles cuando necesitas escribir una función sencilla que no requiere un cuerpo completo.

const maFonction = () => {
  // código a ejecutar
};

Si el cuerpo de la función cabe en una sola expresión, puede omitir las llaves y la palabra clave return: se devuelve el valor de la expresión. Los paréntesis, en cambio, siguen siendo obligatorios cuando la función no tiene ningún parámetro:

const maFonction = () => console.log('Bonjour');

Conclusión

Las funciones son una pieza clave de JavaScript e imprescindibles para escribir código eficaz y fácil de mantener. Cuando domines la declaración de funciones, los argumentos y los parámetros, el valor de retorno y las arrow functions, podrás crear funciones potentes y útiles en tus aplicaciones.

En el próximo capítulo vamos a ver otro concepto importante de JavaScript: los objetos. Veremos cómo crear y usar objetos para almacenar y manipular datos de forma estructurada en nuestro código.