100 Días de Javascript - 3 de 100 - Funciones

Las funciones son el corazón de JavaScript. Son bloques de código reutilizables y poderosos que permiten encapsular tareas específicas, simplificar la lógica de un programa y promover la modularidad del código. En este viaje por las funciones en JavaScript, exploraremos su sintaxis, sus distintos tipos, cómo pasar argumentos y el manejo de valores de retorno.

#Happy Coding!

Tipos de funciones

En Javascript existen 3 tipos de funciones:

• Funciones normales, declaradas con la palabra function
• Arrow functions, declaradas con =>
• Funciones anónimas

Funciones normales

Las funciones normales, como en otros lenguajes de programación, se declara con la palabra function, seguida del nombre de la función y, entre paréntesis, los parámetros que ésta recibe.

El código que se desea ejecutar va entre llaves “{}”, como se muestra a continuación:

// Declaracion de la funcion
function saludarUsuario(nombre) {
  console.log(`Hola ${nombre}`);
}

// invocar o ejecutar la funcion
saludarUsuario("Diego");

Arrow functions

Las arrow functions son una característica introducida en JavaScript ES6 que proporciona una sintaxis más compacta y algunas ventajas adicionales sobre las funciones regulares.

Estas funciones tienen una Sintaxis más corta, por lo cual son ideales para funciones simples y más concisas, especialmente cuando se usan con funciones de una sola línea.

const numeros = [1, 2, 3, 4, 5];

// Usando una función de flecha para multiplicar cada número por 2
const numerosDobles = numeros.map((numero) => numero * 2);
// Resultado: [2, 4, 6, 8, 10]

Por otra parte, es importante entender el contexto léxico de this. Las arrow functions no tienen su propio this; en su lugar, toman prestado, o, mejor dicho, heredan el this del ámbito circundante. Esto significa que el valor de this dentro de una arrow function se toma del contexto en el que se definió la función.

// Definición de un objeto
const objeto = {
  valor: 5,

  // Función con setTimeout usando una arrow function
  imprimirValorDespuesDeSegundos: function () {
    setTimeout(() => {
      console.log("Valor después de 2 segundos:", this.valor);
    }, 2000);
  },
};

// Llamada a la función del objeto
objeto.imprimirValorDespuesDeSegundos();

En este caso la arrow function tiene acceso a this.valor porque está heredándolo de una función superior (imprimirValorDespuesDeSegundos).

A continuación se muestra un caso en donde la arrow function NO tiene acceso a this.valor

// Definición de un objeto
const objeto = {
  valor: 10,

  // Arrow function
  arrowFuncion: () => {
    console.log("Valor en arrow function:", this.valor);
  },
};

// Llamada a las funciones del objeto
objeto.arrowFuncion(); // Valor en arrow function: undefined

En este caso, this dentro de la arrow function no tiene su propio contexto, por lo que hace referencia al contexto léxico en el que se definió, que en este caso es el contexto global. Como resultado, this.valor no está definido en el contexto global, por lo que imprime undefined.

Funciones anónimas

Las funciones anónimas no tienen nombre y a menudo se usan como argumentos en otras funciones o para eventos.

// sintaxis de una función anónima
(function () {
  //...
});

// caso común en JS
setTimeout(function () {
  // Código a ejecutar después de un tiempo
}, 1000);

En el primer ejemplo tenemos la declaración de una función anónima la cual se ejecutará inmediatamente.

En el segundo ejemplo la función anónima se pasa como parámetro en setTimeout, lo cual hace más sentido que en el ejemplo anterior.

Retorno de valores

Una función puede retornar valores o un objeto específico.

Por ejemplo, considera esta función que suma dos números y devuelve el resultado

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

let resultadoSuma = sumar(5, 3); // Llamamos a la función y almacenamos el resultado
console.log(resultadoSuma); // Imprime: 8

En este caso, la función sumar recibe dos parámetros a y b, realiza la suma y luego utiliza return para devolver el resultado. Cuando se llama a la función sumar(5, 3), devuelve 8, que se guarda en la variable resultadoSuma.

Es esencial entender que una vez que una función utiliza la palabra clave return. El uso de return es fundamental para obtener valores de una función y utilizar esos valores en otras partes del programa.

Funciones que reciben funciones como parámetros

Sí, leíste bien! En JS es posible pasar funciones como parámetros a otras funciones. Esto se conoce como funciones de orden superior o funciones de primera clase. Aquí tienes un ejemplo sencillo que demuestra cómo puedes utilizar funciones como parámetros:

// Función de ejemplo que toma una función como parámetro
function ejecutarOperacion(operacion, a, b) {
  return operacion(a, b);
}

// Definimos algunas funciones que podríamos pasar como parámetros
function suma(x, y) {
  return x + y;
}

function resta(x, y) {
  return x - y;
}

function multiplicacion(x, y) {
  return x * y;
}

// Utilizamos la función de orden superior con diferentes operaciones
console.log(ejecutarOperacion(suma, 5, 3)); // Resultado: 8
console.log(ejecutarOperacion(resta, 10, 4)); // Resultado: 6
console.log(ejecutarOperacion(multiplicacion, 2, 6)); // Resultado: 12

En este ejemplo, ejecutarOperacion es una función de orden superior que toma tres parámetros: una función (operacion) y dos valores (a y b). La función ejecutarOperacion invoca la función que se pasa como parámetro (operacion) y le pasa los valores a y b. Luego, se pueden llamar a diferentes funciones de operación (suma, resta, multiplicacion) al utilizar ejecutarOperacion con esas funciones específicas.

Este enfoque es especialmente útil cuando necesitas flexibilidad y reutilización de código, ya que puedes cambiar la operación simplemente pasando diferentes funciones como argumentos.