Web-Dev-For-Beginners/2-js-basics/2-functions-methods/translations/README.es.md

Sketchnote por Tomomi Imura

Conceptos básicos de JavaScript: función y funciones

Pre-lectura prueba

Cuando necesite su código para realizar una tarea, utilizará una función. Analicemos las diferencias.

Funciones

Una función es un bloque de código destinado a realizar una tarea. Usted crea una función usando la palabra clave function, un nombre, un conjunto de parámetros y la definición de la función también conocida como funciones body. La sintaxis de una función se parece a la siguiente:

function name(param, param2, param3) { // definición de función
 // definición de función/body
}

Funciones

En esencia, una función es un bloque de código que podemos ejecutar bajo demanda. Esto es perfecto para escenarios en los que necesitamos realizar la misma tarea varias veces; en lugar de duplicar la lógica en varias ubicaciones (lo que dificultaría la actualización cuando llegue el momento), podemos centralizarla en una ubicación y llamarla cuando necesitemos que se realice la operación; ¡incluso puede llamar a funciones desde otras funciones!

Igual de importante es la capacidad de nombrar una función. Si bien esto puede parecer trivial, el nombre proporciona una forma rápida de documentar una sección de código. Podría pensar en esto como una etiqueta en un botón. Si hago clic en un botón que dice "Cancelar temporizador", sé que dejará de correr el reloj.

Creando y llamando a una función

La sintaxis de una función se parece a la siguiente:

function nameOfFunction() { // definición de función
 // Código de la función
}

Si quisiera crear una función para mostrar un saludo, podría verse así:

function displayGreeting() {
  console.log('¡Hola, mundo!');
}

Siempre que queremos llamar (o invocar) nuestra función, usamos el nombre de la función seguido de (). Vale la pena señalar el hecho de que nuestra función se puede definir antes o después de que decidamos llamarla; el compilador de JavaScript lo encontrará por usted.

// llamando nuestra función
displayGreeting();

NOTA: Existe un tipo especial de función conocida como método, que ya ha estado utilizando. De hecho, vimos esto en nuestra demostración anterior cuando usamos console.log. Lo que hace que un método sea diferente de una función es que un método está adjunto a un objeto (consola en nuestro ejemplo), mientras que una función es flotante libre. Escuchará que muchos desarrolladores usan estos términos indistintamente.

Mejores prácticas de función

Hay algunas prácticas recomendadas que se deben tener en cuenta al crear funciones:

• Como siempre, use nombres descriptivos para que sepa lo que hará la función
• Usa camelCasing para combinar palabras
• Mantenga sus funciones enfocadas en una tarea específica

Pasar información a una función

Para que una función sea más reutilizable, a menudo querrá pasarle información. Si consideramos nuestro ejemplo de displayGreeting anterior, solo mostrará ¡Hola, mundo!. No es la función más útil que uno podría crear. Si queremos hacerlo un poco más flexible, como permitir que alguien especifique el nombre de la persona a saludar, podemos agregar un parámetro. Un parámetro (también llamado a veces argumento), es información adicional enviada a una función.

Los parámetros se enumeran en la parte de definición entre paréntesis y están separados por comas así:

function name(param, param2, param3) {

}

Podemos actualizar nuestro displayGreeting para aceptar un nombre y mostrarlo.

function displayGreeting(name) {
  const message = `¡Hola, ${name}!`;
  console.log(message);
}

Cuando queremos llamar a nuestra función y pasar el parámetro, lo especificamos entre paréntesis.

displayGreeting('Paco');
// dice "¡Hola, Paco!" cuando ejecutas el comando 

Valores predeterminados

Podemos hacer que nuestra función sea aún más flexible agregando más parámetros. Pero, ¿y si no queremos que se especifiquen todos los valores? Siguiendo con nuestro ejemplo de saludo, podríamos dejar el nombre según sea necesario (necesitamos saber a quién saludamos), pero queremos permitir que el saludo en sí se personalice como desee. Si alguien no quiere personalizarlo, proporcionamos un valor predeterminado en su lugar. Para proporcionar un valor predeterminado a un parámetro, lo configuramos de la misma manera que configuramos un valor para una variable: parameterName = 'defaultValue'. Para ver un ejemplo completo:

function displayGreeting(name, salutation='Hola') {
  console.log(`${salutation}, ${name}`);
}

Cuando llamamos a la función, podemos decidir si queremos establecer un valor para el "saludo".

displayGreeting('Paco');
// dice "Hola, Paco"

displayGreeting('Paco', 'Hola');
// dice "Hola, Paco"

Parámetro

Los parámetros se enumeran en la parte de definición entre paréntesis y están separados por comas así:

(param, param2, param3)

Parámetro

Hasta ahora, la función que construimos siempre saldrá a la consola. A veces, esto puede ser exactamente lo que estamos buscando, especialmente cuando creamos funciones que llamarán a otros servicios. Pero, ¿qué pasa si quiero crear una función auxiliar para realizar un cálculo y devolver el valor para poder usarlo en otro lugar?

Podemos hacer esto usando un valor de retorno. La función devuelve un valor de retorno y se puede almacenar en una variable de la misma manera que podríamos almacenar un valor literal como una cadena o un número.

Aquí define qué tarea debe realizar la función. Una función puede devolver algo o no. Si una función devuelve algo, entonces se usa la palabra clave return. La palabra clave return espera un valor o referencia de lo que se devuelve así:

return myVariable;

Un ejemplo más completo puede verse así:

function add(firstValue, secondValue) {
  let sum = firstValue + secondValue;
  return sum;
}

En el código anterior, se devuelve la variable sum.

Invocación

Cuando invocas una función, la llamas con 0...N conjuntos de argumentos. Los valores de los argumentos se vinculan a los parámetros correspondientes a su posición. La función add() introducido se puede invocar de la siguiente manera:

let result = add(1, 3);
console.log(result); // imprime 4

Los argumentos 1 y 3 están vinculados a los parámetros firstValue y secondValue debido al orden en el que se definen los parámetros.

JavaScript es bastante flexible cuando se trata de invocaciones. No está obligado a proporcionar argumentos para todos los parámetros, el código se ejecutará de todos modos. Sin embargo, dependiendo de lo que le pase, es posible que el código no se comporte como se esperaba.

Desafío, intente llamar al función add() así add(1) y vea qué sucede

Valores predeterminados

También existe el concepto de _ valores predeterminados_ en los parámetros. Esto significa que si no se pasa un argumento a un parámetro durante la invocación, el parámetro asumirá el valor predeterminado. Considere el siguiente código usando un valor predeterminado:

function add5(firstValue, secondValue = 5) {
  return firstValue + secondValue;
}

La invocación de la función anterior podría verse así:

add5 (4) // devuelve 9
add5 (4,2) // devuelve 6

Cualquier parámetro con valores predeterminados debe estar al final de la lista de parámetros. La razón es que JavaScript intenta hacer coincidir argumentos con parámetros y los parámetros con valores predeterminados pueden omitirse en la invocación.

🚀 Desafío:

Prueba de validación de conocimientos

Revisión y autoestudio

Vale la pena leer un poco más sobre las funciones de flecha, ya que se utilizan cada vez más en bases de código. Practique escribir una función y luego reescribirla con esta sintaxis.

Tarea: Práctica de tipos de datos