Funciones (Functions)

¡Hola HaWker! Jeff Bruchado por aquí.

Este es un artículo más de nuestra serie de artículos que va a cubrir nuestro viaje para Aprender Programación desde Cero.

Hoy será un artículo más sobre un contenido extremadamente importante para proseguir con tu aprendizaje.

Bueno, sin más preámbulos, ¡vamos a comenzar!

Hoy, vamos a hablar sobre uno de los temas más importantes en la Programación:

Funciones (Functions).

Bien, en este momento vamos a sumergirnos en el universo de las Funciones (Functions) en JavaScript y entender por qué son tan fundamentales.

Imagina que estás creando un sitio web, y en él hay una parte que necesita calcular la propina basándose en el valor de la cuenta del restaurante. ¿Vas a querer repetir el mismo cálculo cada vez que alguien introduzca un valor diferente? ¡Claro que no, verdad!

¡Es ahí donde entran las Funciones!

Las Funciones son como pequeños robots en tu código.

Les dices qué hacer una vez, y después solo los llamas para repetir esa tarea cuantas veces quieras.

Son mega importantes porque:

Organización: Deja el código más limpio y organizado. En lugar de repetir el mismo código varias veces, creas una función y la llamas siempre que la necesites.

Reutilización: Una vez que escribes una función, puedes usarla en cualquier lugar de tu proyecto, o incluso en otros proyectos.

Mantenimiento: Si necesitas cambiar la lógica, solo la alteras en la función. Así, el cambio se aplica en todos los lugares donde la función es llamada.

Escalabilidad: A medida que tu proyecto crece, las funciones ayudan a lidiar con la complejidad, manteniendo las cosas más manejables.

Piensa en las Funciones como fórmulas matemáticas. Colocas algunos valores (parámetros), la función procesa esos valores (ejecuta un bloque de código) y, muchas veces, te devuelve un resultado (retorno de la función).

Por ejemplo, una función para calcular propina podría ser algo así:

function calcularPropina(valorCuenta) {
  return valorCuenta * 0.1;
}

Y cada vez que quieras calcular la propina, solo llamas calcularPropina(valorDeLaCuenta) con el valor de la cuenta como parámetro.

Entonces, mira cómo las Funciones son esenciales:

Reducen repetición, mantienen tu código organizado y facilitan alteraciones y escalabilidad.

Sin ellas, la programación sería un verdadero rompecabezas gigante y confuso.

¡Las Funciones transforman complejidad en simplicidad!

Parámetros de funciones

Básicamente son los argumentos o parámetros pasados a una función cuando es llamada.

Por ejemplo, en la siguiente función, a y b son los parámetros de la función:

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

Los declaras dentro de los () en la declaración de la función.

Y cuando la llamas, pasas los valores de los parámetros, dentro de los () de la llamada, en orden de la declaración.

O sea, cuando la función es llamada, los argumentos pasados son asignados a los parámetros correspondientes.

Por ejemplo:

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

let result = sum(1, 2);
console.log(result); // 3

Bueno, en este instante entendiste qué son los parámetros de las funciones, pero puedes haberte quedado preguntándote, ¿y si quiero ejecutar una función que tiene parámetros, pero no quiero pasar valores para esos parámetros, solo quiero el resultado predeterminado, existe una forma de hacer eso?

Y es exactamente lo que te voy a explicar en este momento.

Parámetros con valor predefinido (Default Params)

Vamos a entender sobre Default Params (Parámetros por defecto), son parámetros que ya poseen un valor predeterminado predefinido.

Son útiles cuando queremos que un parámetro tenga un valor por defecto en caso de que el usuario no pase un valor para él.

O sea, ese parámetro se vuelve opcional.

La sintaxis para definir un parámetro por defecto es la siguiente:

function greet(name = 'Jeff') {
  console.log(`¡Hola, ${name}!`);
}

En este ejemplo, si el usuario no pasa un valor para el parámetro name, el valor por defecto Jeff será usado.

En caso contrario, el valor pasado por el usuario será usado.

Por ejemplo:

greet(); // "¡Hola, Jeff!"
greet('María'); // "¡Hola, María!"

Bueno, como puedes percibir son bastante útiles para algunas situaciones específicas, ¿verdad?

Parámetro Rest (Rest Params)

Es una sintaxis especial para pasar un número indeterminado de argumentos a una función.

Y para hacer esto, basta con definir el parámetro de tu función con la siguiente sintaxis:

(...nombreDelParametro), usando los 3 puntos (...), antes de la declaración del nombre.

Es útil cuando no sabemos cuántos argumentos serán pasados.

La sintaxis es la siguiente:

function sum(...numbers) {
  let result = 0;
  for (let number of numbers) {
    result += number;
  }
  return result;
}

En el ejemplo anterior, el parámetro numbers es un array que contendrá todos los argumentos pasados a la función.

Por ejemplo:

function sum(...numbers) {
  let result = 0;
  for (let number of numbers) {
    result += number;
  }
  return result;
}

let result = sum(1, 2, 3, 4, 5);
console.log(result); // 15

IIFEs (Immediately Invoked Function Expressions)

Son funciones que son definidas y llamadas inmediatamente.

Son comúnmente usadas para crear scopes locales y proteger variables y funciones de ser accedidas globalmente.

Ejemplo de un IIFE:

(function () {
  // código de la función aquí
})();

Generalmente el IIFE es usado cuando estás inicializando tu aplicación, y necesitas realizar alguna solicitud antes de que sea creada, como consultar por el usuario, y validar si tiene permiso para cargar la aplicación.

Funciones predefinidas (Built-in Functions)

Son funciones predefinidas que puedes usar para realizar tareas comunes en JavaScript, o sea, no necesitas declararlas.

Estos son ejemplos de Built-in Functions:

• parseInt() para convertir strings en números enteros,
• Math.max() para encontrar el mayor valor en una lista de números
• console.log() para imprimir mensajes en la consola.

Ejemplo de cómo usar la built-in function parseInt():

let myString = '123';
let myInt = parseInt(myString);
console.log(myInt); // 123

Ejemplo de cómo usar la built-in function Math.max():

let numbers = [1, 2, 3, 4, 5];
let max = Math.max(...numbers);
console.log(max); // "5"

Scope y pila de funciones (Scope and function stack (Call stack))

Ya hablé sobre Scope en los artículos anteriores, y en este instante voy a hablar de forma más detallada sobre él con relación a las funciones.

Entonces no te avergüences si sientes que estás repitiendo algo que ya estudiaste. (¡Esto es incluso mejor para fijar el contenido!)

Vamos a entender el concepto de scope nuevamente:

Scope se refiere a la forma como una variable es visible en diferentes partes de tu código.

En otras palabras, el scope determina la "visibilidad" de una variable.

Existen dos tipos principales de scope en JavaScript:

• Scope de bloque
• Scope de función

El scope de bloque es creado por cualquier tipo de instrucción de control, como if y for, y limita la visibilidad de las variables declaradas dentro del bloque al propio bloque.

El scope de función es creado por una función y limita la visibilidad de las variables declaradas dentro de la función a esa función y todas las funciones anidadas dentro de ella.

A continuación un ejemplo de código que demuestra el scope de bloque:

if (true) {
  const x = 5;
}

console.log(x); // Uncaught ReferenceError: x is not defined

En este ejemplo, la variable x es declarada dentro del bloque del if, entonces ella solo es visible dentro del propio bloque. Al intentar acceder a la variable en el exterior del bloque resulta en un error.

A continuación un ejemplo de código que demuestra el scope de función:

function foo() {
  const x = 5;
}

console.log(x); // Uncaught ReferenceError: x is not defined

En este ejemplo, la variable x es declarada dentro de la función foo, entonces ella solo es visible dentro de la función foo y de cualquier función anidada dentro de ella. Al intentar acceder a la variable en el exterior de la función resulta en un error.

En este instante, voy a comenzar a hablar sobre la pila de funciones (o "call stack" en inglés):

Cuando una función es llamada, ella es colocada en la "pila de llamadas" (call stack).

Cuando la función retorna, o sea, cuando termina la ejecución, ella es removida de la pila.

Bien, entendido eso, te voy a mostrar un ejemplo que permite que veas el camino que el código recorrió para llegar al punto en que está, o sea, ve cómo funciona el call stack y el apilamiento de las tareas.

Ejemplo de código que demuestra cómo la pila de funciones funciona:

function foo() {
  console.log('Llamando foo');
  bar();
  console.log('Volviendo de foo');
}

function bar() {
  console.log('Llamando bar');
  baz();
  console.log('Volviendo de bar');
}

function baz() {
  console.log('Llamando baz');
  console.log('Volviendo de baz');
}

foo();

Cuando ejecutas este código, la salida será:

Llamando foo
Llamando bar
Llamando baz
Volviendo de baz
Volviendo de bar
Volviendo de foo

Aquí, podemos ver que las funciones son añadidas a la pila de funciones cuando son llamadas y removidas de la pila cuando retornan.

Cuando una función es llamada, ella es añadida al tope de la pila y la próxima función es llamada.

Cuando la función retorna, ella es removida del tope de la pila y la próxima función en la pila es llamada. Esto continúa hasta que la pila esté vacía y la ejecución del script termine.

Conclusión

Las funciones son una parte muy importante, pues nos permiten escribir código de manera más organizada y reutilizable.

Yo Jeff, resalto que:

Es importante dedicar un tiempo para entender cómo funcionan las funciones y cómo usarlas de manera eficiente, pues esto puede ayudar mucho a la hora de crear tus aplicaciones.

Recuerda que es importante practicar lo que estás aprendiendo, pues esto ayudará a fijar los conceptos y mejorar tus habilidades de abstracción.

Intenta crear tus propias aplicaciones, y jugar con las funciones, pasando diferentes parámetros y argumentos.

Pues bien HaWker, llegamos al fin de un artículo más.

Espero que este artículo haya agregado en tu repertorio de conocimiento sobre Programación.

Como siempre, si tienes cualquier duda o quieres explorar más algún punto, simplemente responde con tu duda, en este email.

¡Y recuerda, estoy aquí para ayudarte a mejorar 1% con cada nuevo artículo!

Si llegaste hasta aquí, como de costumbre, por favor, responde este email con "Conseguí aprender y entender sobre las funciones en la programación".

De esta forma voy a saber que esta serie de artículos está siendo útil para ti, y que estás acompañando y aprovechando.

¡Como ya sabes! Solamente un verdadero HaWker llega hasta el final.

¡Felicitaciones!

Estoy feliz de tenerte aquí.

Te veo pronto.

¡Vamos a por ello! 🦅

- Jeff Bruchado

¡Felicitaciones por llegar hasta aquí, HaWker! 🎉

En este momento que aprendiste sobre las funciones en la programación, ¿qué tal testear tus conocimientos? Participa del quiz abajo y ve cuánto absorbiste de nuestro artículo.

Es una excelente manera de fijar el aprendizaje y prepararte para los próximos pasos en tu viaje de programación.

Presiona para acceder al quiz.

¡Buena suerte y diviértete!