4.1 Parámetros de funciones
Los parámetros de funciones en JavaScript permiten pasar valores a las funciones para su procesamiento. Esto hace que las funciones sean más flexibles y adaptables. En este tema, vamos a ver los aspectos básicos de trabajar con parámetros de funciones en JavaScript, excluyendo parámetros por defecto y parámetros rest.
Los parámetros se indican entre paréntesis después del nombre de la función. Al llamar a la función, los valores de estos parámetros se pasan a las variables correspondientes dentro de la función.
Ejemplo:
En la función greet() se definen dos parámetros: name y age. Al llamar a la función, los valores Alice y 30 se pasan a estos parámetros.
function greet(name, age) {
return `Hello, ${name}! You are ${age} years old.`;
}
console.log(greet('Alice', 30)); // "Hello, Alice! You are 30 years old."
Manejo de parámetros indefinidos
Si un parámetro no se pasa al llamar a la función, su valor será undefined. Esto puede llevar a errores, si se realizan operaciones con dicho parámetro que no soportan undefined.
Ejemplo:
En la función greet() se verifica si se pasó el parámetro name. Si no, se usa la cadena Guest.
function greet(name) {
if (name === undefined) {
return 'Hello, Guest!';
}
return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"
console.log(greet('Bob')); // "Hello, Bob!"
4.2 Parámetros por defecto
Los parámetros por defecto permiten establecer valores que se utilizarán si un argumento no se pasa al llamar la función o se pasa como undefined. Esto es especialmente útil para crear funciones con parámetros opcionales.
Sintaxis:
function name (arg1 = value1, arg2 = value2) {
// function body
}
Ejemplo 1: Función simple con parámetros por defecto
En este ejemplo, la función greet() tiene un parámetro name con valor por defecto Guest. Si no se pasa un argumento, se usará el valor por defecto.
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
console.log(greet('Alice')); // Mostrará: Hello, Alice!
console.log(greet()); // Mostrará: Hello, Guest!
Ejemplo 2: Parámetros por defecto con expresiones
En este ejemplo, el parámetro tax por defecto se calcula como el 20% de price, si no se pasa otro argumento.
function calculatePrice(price, tax = price * 0.2) {
return price + tax;
}
console.log(calculatePrice(100)); // Mostrará: 120
console.log(calculatePrice(100, 15)); // Mostrará: 115
Ejemplo 3: Parámetros por defecto dependen de otros parámetros
En este ejemplo, los parámetros por defecto permiten crear un usuario con roles y estados predefinidos.
function createUser(name, role = 'user', isActive = true) {
return { name, role, isActive };
}
console.log(createUser('Alice')); // Mostrará: { name: 'Alice', role: 'user', isActive: true }
console.log(createUser('Bob', 'admin')); // Mostrará: { name: 'Bob', role: 'admin', isActive: true }
console.log(createUser('Charlie', 'moderator', false)); // Mostrará: { name: 'Charlie', role: 'moderator', isActive: false }
4.3 Parámetros rest
Los parámetros rest permiten que la función acepte cualquier cantidad de argumentos y los reúna en un array. Esto es útil para crear funciones que puedan trabajar con un número arbitrario de argumentos.
Sintaxis:
function name (arg1, arg2, ...argArray) {
// function body
}
Ejemplo 1: Sumar todos los argumentos pasados
En este ejemplo, la función sumAll() utiliza parámetros rest para sumar todos los argumentos pasados.
function sumAll(...numbers) {
return numbers.reduce((sum, num) => sum + num, 0);
}
console.log(sumAll(1, 2, 3)); // Mostrará: 6
console.log(sumAll(4, 5, 6, 7, 8)); // Mostrará: 30
Ejemplo 2: Función con parámetros fijos y rest
En este ejemplo, la función showItems() acepta un parámetro fijo firstItem y un número indefinido de argumentos restantes, recogidos en un array otherItems.
function showItems(firstItem, ...otherItems) {
console.log(`Primer elemento: ${firstItem}`);
console.log(`Otros elementos: ${otherItems.join(', ')}`);
}
showItems('apple', 'banana', 'cherry', 'date');
// Mostrará:
// Primer elemento: apple
// Otros elementos: banana, cherry, date
Ejemplo 3: Función con argumentos dinámicos
En este ejemplo, la función createMessage() acepta el primer argumento messageType y reúne todos los demás parámetros en un array messages para crear un mensaje.
function createMessage(messageType, ...messages) {
return `[${messageType.toUpperCase()}]: ${messages.join(' ')}`;
}
console.log(createMessage('info', 'This', 'is', 'an', 'informational', 'message'));
// Mostrará: [INFO]: This is an informational message
console.log(createMessage('error', 'An', 'error', 'occurred'));
// Mostrará: [ERROR]: An error occurred
GO TO FULL VERSION