Funciones en JavaScript

Por Darío Rivera

Publicado el 2022-03-02 en Javascript

Las funciones son los bloques de código más importantes en JavaScript. Mediante las funciones podemos reutilizar código y obtener un valor de retorno o no como resultado. En este post veremos todo acerca de las funciones.

Declaración de función

Las declaraciones de funciones utilizan la palabra reservada function antes del nombre de la función y tiene la característica del hoisting.

function square(number) {
  return number * number;
}

Observa que la anterior función toma como primer parámetro un número cualquiera y devuelve su potencia cuadrada.

square(3);   // 9

Expresiones de función

Las expresiones de función tiene una sintaxis similar. La diferencia con la declaración de funciones es que las expresiones de función son asignadas a una variable. Estas funciones no presentan hoisting. Debido a este último punto, se recomienda crear funciones de esta manera, además de que siendo así tiene el mismo scope que la constante en donde es creada.

const square = function(number) {
  return number * number;
}

Sin embargo funciona de manera similar en su invocación.

square(3);   // 9

También es posible crear expresiones de función nombradas así:

const square = function sqrt(number) {
  return number * number;
}

Aunque funciona exactamente igual, en caso de algún error el stack trace mostrara el nombre de la función haciendo mucho mas fácil su depuración.

Ámbito o scope

Las funciones de javascript no están restringidas al bloque en donde fueron creadas. Es por esta razón que se recomienda utilizar expresiones de función y no declaración de funciones. Veamos el siguiente ejemplo.

if (true) {
  function square(number) {
    return number * number;
  }
}

square(3);   // 9

if (true) {
  const square = function(number) {
    return number * number;
  }
}

square(3);   // Uncaught ReferenceError: square is not defined

Además de esto las funciones tiene ámbito de función. Es decir que si se declara una función dentro de otra, esta no estará disponible por fuera de la función donde fue declarada.

Expresión de función invocada inmediatamente

Este concepto raro de JavaScript permite que una función anónima se ejecute sin necesidad de llamarla. Esto es de hecho un anti-patrón de JavaScript porque no permite el control de cuándo se ejecuta dicha función. Este tipo de funciones presenta hoisting.

(function(){
    // code
})()

Argumentos de funciones

Las funciones en JavaScript pueden aceptar argumentos especificando el nombre de cada uno de ellos como se muestra a continuación:

function triangle_area(base, height)
{
    return base * height / 2;
}

Valores de argumentos por defecto

Tambien es posible que las funciones en JavaScript definan valores por defecto si no se envían de manera explícita.

function sum(a = 5, b = 4) {
  return a + b;
}

sum();   // 9

Objeto arguments

En JavaScript es posible incluso referencias los argumentos con el objeto especial arguments y no utilizar los nombres definidos en la declaración.

function func1(a, b, c) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

Parámetros rest

La sintáxis de parámetros rest permite aceptar un número indefinido de argumentos mediante un array para representar funciones variádicas.

function sum(...theArgs) {
  let total = 0;
  for (const arg of theArgs) {
    total += arg;
  }
  return total;
}

console.log(sum(1, 2, 3));
// expected output: 6

Función flecha o Arrow function

Este tipo de función es como un tipo de shorthand para funciones que simplifica bastante el código y además tiene un tipo de comportamiento particular con el this. Miremos la siguiente función:

const square = function(number) {
  return number * number;
}

En primer lugar con una arrow function nos podemos ahorrar la palabra function en la declaración.

const square = (number) => {
  return number * number;
}

Ya es una arrow function pero se puede mejorar. En este caso como la expresión de retorno consta de una sola línea no son necesarios los square brackets ni la palabra return.

const square = (number) => number * number;

Y como si fuera poco, como es un solo parámetro el que se recibe nos podemos ahorrar también los paréntesis.

const square = number => number * number;

Para profunfizar más sobre este tipo de funciones puedes visitar nuestro post Arrow Functions en JavaScript.