Funciones de JavaScript

Introducción

En JavaScript, las funciones son uno de los bloques de construcción fundamentales. Son bloques de código reutilizables que puedes escribir una vez y ejecutar muchas veces. El uso de funciones te ayuda a organizar tu código, hacerlo más legible y evitar la repetición.

En este laboratorio, aprenderás los conceptos básicos de creación y uso de funciones en JavaScript. Construirás una función simple que suma dos números, y aprenderás cómo definirla, pasarle datos, obtener un resultado y mostrar ese resultado.

Definir función con la palabra clave function

En este paso, definirás tu primera función. Una función se define usando la palabra clave function, seguida de un nombre, un conjunto de paréntesis () y un bloque de código (el cuerpo de la función) encerrado entre llaves {}.

Primero, localiza el archivo script.js en el explorador de archivos en el lado izquierdo del WebIDE y ábrelo. Escribiremos todo nuestro código JavaScript en este archivo.

Ahora, agrega el siguiente código a script.js para definir una función llamada addNumbers.

function addNumbers() {
  // Code will go here
}

Este código crea una función vacía. Todavía no hace nada, pero es una definición de función válida. El nombre addNumbers es cómo nos referiremos a esta función más adelante.

Añadir parámetros a la definición de la función

En este paso, añadirás parámetros a tu función. Los parámetros son como marcadores de posición para los datos que una función recibirá cuando sea llamada. Los defines dentro de los paréntesis () en la definición de la función, separados por comas.

Modifiquemos la función addNumbers para que acepte dos números que queremos sumar. Llamaremos a estos parámetros num1 y num2.

Actualiza tu archivo script.js con el siguiente código.

function addNumbers(num1, num2) {
  // Code will go here
}

Ahora, la función addNumbers está configurada para recibir dos valores. Dentro de la función, puedes usar num1 y num2 como variables que contienen los valores pasados a la función.

Devolver valor de la función usando return

En este paso, harás que la función realice una acción y devuelva un resultado. La declaración return se utiliza para especificar el valor que la función debe producir. Cuando JavaScript alcanza una declaración return, la función deja de ejecutarse y el valor especificado se devuelve al lugar donde se llamó a la función.

Agreguemos la lógica a nuestra función para sumar los dos parámetros y devolver el resultado.

Actualiza tu archivo script.js. Agrega la declaración return dentro de las llaves de la función.

function addNumbers(num1, num2) {
  return num1 + num2;
}

Ahora, cuando se ejecute la función addNumbers, calculará la suma de num1 y num2 y devolverá ese valor.

Llamar a la función con argumentos

En este paso, llamarás a la función para ejecutarla. Definir una función no la ejecuta. Para ejecutar la función y obtener un resultado, debes "llamarla" o "invocarla". Cuando llamas a una función, proporcionas valores reales, llamados argumentos, para los parámetros que definiste.

El valor devuelto por la función se puede almacenar en una variable para su uso posterior.

Agrega las siguientes líneas a tu archivo script.js, debajo de la definición de la función, para llamar a la función addNumbers con los argumentos 5 y 10.

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

En este código, addNumbers(5, 10) llama a la función. El valor 5 se pasa al parámetro num1, y 10 se pasa al parámetro num2. La función devuelve 15, que luego se almacena en la variable sum.

Registrar resultado de la función en la consola

En este paso final, mostrarás el resultado de tu llamada a la función. Una forma común de ver el valor de las variables o la salida del código en el desarrollo web es usar console.log(). Esta función imprime mensajes en la consola de desarrollador del navegador web.

Agrega la siguiente línea al final de tu archivo script.js para registrar el valor de la variable sum.

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

console.log(sum);

Para ver la salida:

1. Asegúrate de que tu archivo script.js esté guardado.
2. Cambia a la pestaña Web 8080 en la parte superior de la interfaz de LabEx.
3. Abre las herramientas de desarrollador del navegador. Normalmente puedes hacer esto haciendo clic derecho en la página y seleccionando "Inspeccionar" (Inspect), o presionando F12.
4. En el panel de herramientas de desarrollador, haz clic en la pestaña Consola (Console).

Deberías ver el número 15 impreso en la consola. Este es el resultado devuelto por tu función addNumbers.

Resumen

¡Felicitaciones por completar este laboratorio! Has aprendido los conceptos esenciales de las funciones en JavaScript.

Has logrado con éxito:

• Definir una función usando la palabra clave function.
• Añadir parámetros a una función para aceptar datos de entrada.
• Usar la declaración return para devolver un valor desde una función.
• Llamar a una función con argumentos para ejecutar su código y almacenar el resultado en una variable.
• Usar console.log() para ver la salida en la consola de desarrollador del navegador.

Las funciones son una parte fundamental para escribir código JavaScript limpio, eficiente y reutilizable. Sigue practicando estos conceptos para familiarizarte más con ellos.