Definir y llamar funciones en JavaScript

Introducción

En este laboratorio, los estudiantes explorarán los conceptos fundamentales de la definición y llamada de funciones en JavaScript. El laboratorio ofrece una introducción integral a los conceptos básicos de las funciones, cubriendo habilidades esenciales como la creación de funciones simples, el trabajo con parámetros y la comprensión de los valores de retorno de las funciones. Los participantes aprenderán cómo estructurar funciones, ejecutarlas y utilizar la salida de la consola para demostrar su funcionalidad.

A través de una serie de ejercicios prácticos, los aprendices practicarán la creación de funciones sin valores de retorno, la implementación de funciones con parámetros y la exploración de diferentes maneras de llamar y utilizar funciones. Al final del laboratorio, los estudiantes habrán adquirido experiencia práctica en la escritura de bloques de código reutilizables, la comprensión de la sintaxis de las funciones y la aplicación de los conceptos de funciones en la programación de JavaScript.

Comprender los conceptos básicos de las funciones

En este paso, aprenderás los conceptos fundamentales de las funciones en JavaScript. Las funciones son bloques de código reutilizables que realizan una tarea específica y ayudan a organizar tu lógica de programación.

Una función se define utilizando la palabra clave function, seguida de un nombre, paréntesis () y un bloque de código encerrados entre llaves {}. Aquí está la estructura básica de una función:

function functionName() {
  // Código a ejecutar
}

Vamos a crear un ejemplo simple para demostrar los conceptos básicos de las funciones. Abre el WebIDE y crea un nuevo archivo llamado functions.js en el directorio ~/project.

// Definiendo una función simple
function greet() {
  console.log("Hola, Funciones de JavaScript!");
}

// Llamando a la función
greet();

Cuando ejecutes este código, verás la siguiente salida:

Salida de ejemplo:
Hola, Funciones de JavaScript!

Puntos claves para entender sobre las funciones:

• Las funciones se definen utilizando la palabra clave function
• Pueden ser llamadas múltiples veces
• Ayudan a reducir la repetición de código
• Las funciones pueden ser simples o complejas

Intenta experimentar llamando a la función greet() múltiples veces para ver cómo funciona.

Crear una función simple sin valor de retorno

En este paso, aprenderás cómo crear funciones que realizan acciones sin devolver un valor. Estas funciones se utilizan a menudo para ejecutar una tarea específica o mostrar información.

Abre el WebIDE y crea un nuevo archivo llamado simple_functions.js en el directorio ~/project. Crearemos algunos ejemplos de funciones sin valores de retorno.

// Función para mostrar un mensaje de bienvenida
function displayWelcome() {
  console.log("Bienvenido a las Funciones de JavaScript!");
}

// Función para imprimir la tabla de multiplicar
function printMultiplicationTable(number) {
  console.log(`Tabla de multiplicar para ${number}:`);
  for (let i = 1; i <= 10; i++) {
    console.log(`${number} x ${i} = ${number * i}`);
  }
}

// Llamando a las funciones
displayWelcome();
printMultiplicationTable(5);

Cuando ejecutes este código, verás la siguiente salida:

Salida de ejemplo:
Bienvenido a las Funciones de JavaScript!
Tabla de multiplicar para 5:
5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
5 x 4 = 20
5 x 5 = 25
5 x 6 = 30
5 x 7 = 35
5 x 8 = 40
5 x 9 = 45
5 x 10 = 50

Puntos claves sobre funciones sin valores de retorno:

• Realizan acciones como imprimir o modificar datos
• Utilizan console.log() para mostrar información
• Pueden tomar parámetros para ser más flexibles
• No utilizan la palabra clave return para enviar un valor de vuelta

Intenta experimentar creando tus propias funciones o modificando las existentes para mostrar mensajes diferentes o realizar diversas tareas.

Crear una función con parámetros y valor de retorno

En este paso, aprenderás cómo crear funciones que aceptan parámetros y devuelven valores. Estas funciones son más versátiles y pueden realizar cálculos o transformaciones.

Abre el WebIDE y crea un nuevo archivo llamado parameter_functions.js en el directorio ~/project. Crearemos funciones que demuestren parámetros y valores de retorno.

// Función para calcular el área de un rectángulo
function calculateRectangleArea(length, width) {
  return length * width;
}

// Función para comprobar si un número es par
function isEven(number) {
  return number % 2 === 0;
}

// Función para saludar a una persona
function createGreeting(name) {
  return `Hola, ${name}! Bienvenido a JavaScript.`;
}

// Demonstrando llamadas a funciones y valores de retorno
let rectangleArea = calculateRectangleArea(5, 3);
console.log(`Área del rectángulo: ${rectangleArea} unidades cuadradas`);

let checkNumber = 6;
console.log(`¿Es ${checkNumber} par? ${isEven(checkNumber)}`);

let personalGreeting = createGreeting("Alice");
console.log(personalGreeting);

Cuando ejecutes este código, verás la siguiente salida:

Salida de ejemplo:
Área del rectángulo: 15 unidades cuadradas
¿Es 6 par? true
Hola, Alice! Bienvenido a JavaScript.

Puntos claves sobre funciones con parámetros y valores de retorno:

• Los parámetros permiten que las funciones acepten entradas
• La palabra clave return envía un valor desde la función
• Las funciones pueden realizar cálculos y devolver el resultado
• Los valores de retorno se pueden utilizar en cálculos adicionales o registro

Intenta experimentar creando tus propias funciones con diferentes parámetros y tipos de retorno.

Practicar la implementación de funciones

En este paso, practicarás la implementación de funciones creando un pequeño programa que demuestre varias técnicas de funciones. Construiremos una aplicación de calculadora simple para fortalecer tu comprensión de la implementación de funciones.

Abre el WebIDE y crea un nuevo archivo llamado calculator.js en el directorio ~/project. Implementaremos varias funciones matemáticas:

// Función para sumar dos números
function add(a, b) {
  return a + b;
}

// Función para restar dos números
function subtract(a, b) {
  return a - b;
}

// Función para multiplicar dos números
function multiply(a, b) {
  return a * b;
}

// Función para dividir dos números con manejo de errores
function divide(a, b) {
  if (b === 0) {
    return "Error: División por cero";
  }
  return a / b;
}

// Función para calcular el cuadrado de un número
function square(x) {
  return x * x;
}

// Demostrar las funciones de la calculadora
console.log("Suma: 5 + 3 =", add(5, 3));
console.log("Resta: 10 - 4 =", subtract(10, 4));
console.log("Multiplicación: 6 * 7 =", multiply(6, 7));
console.log("División: 15 / 3 =", divide(15, 3));
console.log("Cuadrado de 4 =", square(4));
console.log("División por cero:", divide(10, 0));

Cuando ejecutes este código, verás la siguiente salida:

Salida de ejemplo:
Suma: 5 + 3 = 8
Resta: 10 - 4 = 6
Multiplicación: 6 * 7 = 42
División: 15 / 3 = 5
Cuadrado de 4 = 16
División por cero: Error: División por cero

Puntos claves sobre la implementación de funciones:

• Crea funciones con responsabilidades claras y singulares
• Utiliza parámetros para hacer que las funciones sean flexibles
• Implementa el manejo de errores cuando sea necesario
• Prueba tus funciones con diferentes entradas
• Utiliza nombres de funciones y variables significativos

Intenta experimentar agregando más funciones matemáticas o modificando las existentes.

Explorar la llamada a funciones y la salida

En este paso, aprenderás diferentes maneras de llamar a funciones y explorar varias técnicas de salida en JavaScript. Crearemos un ejemplo completo que demuestre múltiples estrategias de llamada a funciones y métodos de salida.

Abre el WebIDE y crea un nuevo archivo llamado function_output.js en el directorio ~/project:

// Función para generar un saludo personalizado
function createGreeting(name, time) {
  return `Buen ${time}, ${name}!`;
}

// Función para calcular el precio total con impuestos
function calculateTotalPrice(price, taxRate = 0.1) {
  return price + price * taxRate;
}

// Función con múltiples parámetros y valores predeterminados
function displayUserInfo(name, age = "No especificado", city = "Desconocido") {
  console.log(`Nombre: ${name}`);
  console.log(`Edad: ${age}`);
  console.log(`Ciudad: ${city}`);
}

// Demonstrando diferentes técnicas de llamada a funciones
let morningGreeting = createGreeting("Alice", "mañana");
console.log(morningGreeting);

let eveningGreeting = createGreeting("Bob", "tarde");
console.log(eveningGreeting);

let productPrice = 100;
let totalPrice = calculateTotalPrice(productPrice);
console.log(`Precio del producto: $$${productPrice}`);
console.log(`Precio total (con impuestos): $$${totalPrice}`);

// Llamando a la función con diferentes combinaciones de parámetros
displayUserInfo("Charlie");
displayUserInfo("David", 30);
displayUserInfo("Eve", 25, "Nueva York");

Cuando ejecutes este código, verás la siguiente salida:

Salida de ejemplo:
Buenos días, Alice!
Buenas tardes, Bob!
Precio del producto: $100
Precio total (con impuestos): $110
Nombre: Charlie
Edad: No especificado
Ciudad: Desconocido
Nombre: David
Edad: 30
Ciudad: Desconocido
Nombre: Eve
Edad: 25
Ciudad: Nueva York

Puntos claves sobre la llamada a funciones y la salida:

• Las funciones se pueden llamar con diferentes números de argumentos
• Los valores predeterminados de los parámetros proporcionan flexibilidad
• Utiliza literales de plantilla para la salida formateada
• console.log() es útil para mostrar los resultados de las funciones
• Puedes almacenar los valores de retorno de las funciones en variables

Intenta experimentar creando llamadas a funciones y escenarios de salida más complejos.

Resumen

En este laboratorio, los participantes exploraron los conceptos fundamentales de las funciones de JavaScript, aprendiendo cómo definir, crear y llamar funciones con diferentes características. El laboratorio guió a los aprendices en la comprensión de los conceptos básicos de las funciones, incluyendo la sintaxis de las funciones, la declaración y la ejecución, con énfasis en la creación de bloques de código reutilizables que pueden realizar tareas específicas.

El viaje de aprendizaje cubrió la creación de funciones simples sin valores de retorno, la implementación de funciones con parámetros y la demostración de cómo las funciones se pueden utilizar para organizar la lógica de programación, imprimir la salida y realizar cálculos. Al practicar la implementación de funciones y explorar varias técnicas de llamada a funciones, los participantes adquirieron habilidades prácticas en la escritura de código de JavaScript modular y eficiente.