JavaScript
Diferencia parámetros y argumentos, valores por defecto, destructuring, objetos de opciones, paso por valor y mutación de datos recibidos.
Los parámetros son los nombres definidos por una función. Los argumentos son los valores enviados al llamarla.
function greet(name) {
return `Hello, ${name}`;
}
greet("Nicolás");name es el parámetro."Nicolás" es el argumento.Cada llamada crea bindings nuevos para sus parámetros.
function calculateTotal(price, quantity) {
return price * quantity;
}
calculateTotal(20, 2);
calculateTotal(50, 3);Las dos llamadas usan valores independientes. Los parámetros solo existen dentro de la función.
JavaScript no exige que la cantidad de argumentos coincida con la cantidad de parámetros.
function greet(name, role) {
console.log(name, role);
}
greet("Nicolás");Resultado:
Nicolás undefinedEl parámetro sin argumento recibe undefined.
Eso puede producir resultados inesperados:
function multiply(first, second) {
return first * second;
}
multiply(5); // NaNLa función debe decidir si un dato puede faltar, tiene un valor por defecto o debe validarse.
Los argumentos adicionales no se asignan a parámetros declarados.
function greet(name) {
return `Hello, ${name}`;
}
greet("Nicolás", "developer", 21);La llamada es válida y la función utiliza "Nicolás". Los demás valores siguen formando parte de la llamada, pero no tienen un parámetro con nombre.
Cuando una función acepta una cantidad variable, es mejor declararlo con rest parameters.
Un parámetro puede definir el valor que utilizará cuando el argumento sea undefined o no se envíe.
function greet(name = "Guest") {
return `Hello, ${name}`;
}
greet(); // "Hello, Guest"
greet(undefined); // "Hello, Guest"
greet(null); // "Hello, null"null no activa el valor por defecto porque es un valor explícito distinto de undefined.
function createId(prefix = `item-${Date.now()}`) {
return prefix;
}La expresión no se calcula una sola vez al definir la función. Se evalúa cada vez que se necesita el valor por defecto.
Un parámetro posterior puede utilizar uno anterior.
function createRange(start, end = start + 10) {
return { start, end };
}El orden contrario no funciona de la misma manera:
function example(first = second, second = 10) {
return first + second;
}
example(); // ReferenceErrorsecond todavía no está inicializado cuando se evalúa el valor por defecto de first.
Una función puede extraer propiedades directamente desde un argumento.
function createUserLabel({ name, role }) {
return `${name} — ${role}`;
}Esto expresa qué datos necesita la función.
También puede combinarse con valores por defecto:
function createUserLabel({ name, role = "user" }) {
return `${name} — ${role}`;
}function createUserLabel({ name = "Unknown" } = {}) {
return name;
}El = {} exterior permite llamar la función sin argumento.
Sin él:
function createUserLabel({ name }) {
return name;
}
createUserLabel(); // TypeErrorJavaScript no puede desestructurar undefined.
En una función posicional, el significado depende del orden.
createUser("Nicolás", true, false, "admin");No es evidente qué representan los booleanos.
Cuando existen muchos parámetros o varias opciones, un objeto suele ser más claro.
createUser({
name: "Nicolás",
isActive: true,
sendWelcomeEmail: false,
role: "admin",
});También facilita añadir opciones sin cambiar el orden de las llamadas existentes.
JavaScript siempre pasa valores.
function replaceValue(value) {
value = 100;
}
let number = 10;
replaceValue(number);
console.log(number); // 10Cuando el argumento es un objeto, el valor pasado es una referencia al objeto.
function renameUser(user) {
user.name = "Nico";
}
const user = { name: "Nicolás" };
renameUser(user);
console.log(user.name); // "Nico"La función recibió una copia de la referencia. Puede utilizarla para modificar el mismo objeto, pero reasignar el parámetro no reemplaza la variable exterior.
function replaceUser(user) {
user = { name: "Other" };
}
replaceUser(user);
console.log(user.name); // "Nico"Si una función no promete modificar el argumento, crear un valor nuevo suele ser más predecible.
function renameUser(user, name) {
return {
...user,
name,
};
}El contrato debe ser claro. Funciones como sort, reverse o splice pueden mutar estructuras recibidas si se usan directamente sobre ellas.
Las funciones normales tienen acceso a un objeto especial llamado arguments.
function showArguments() {
console.log(arguments);
}
showArguments("A", "B", "C");arguments es parecido a un array, pero no es un array real y no existe como binding propio en arrow functions.
En código moderno, los rest parameters suelen ser más explícitos y cómodos.
La propiedad length indica cuántos parámetros aparecen antes del primer parámetro con valor por defecto o rest.
function example(first, second, third = 0, ...rest) {}
console.log(example.length); // 2No indica cuántos argumentos recibirá una llamada. Es metadata sobre la declaración.
Cuando una función recibe información externa, debe validar lo que necesita.
function calculateTotal(price, quantity) {
if (!Number.isFinite(price) || price < 0) {
throw new TypeError("Price must be a non-negative number");
}
if (!Number.isInteger(quantity) || quantity <= 0) {
throw new TypeError("Quantity must be a positive integer");
}
return price * quantity;
}No toda función interna necesita repetir todas las validaciones. La ubicación depende de qué capa sea responsable de garantizar los datos.
function searchProducts({
query = "",
category = null,
limit = 20,
includeInactive = false,
} = {}) {
const normalizedQuery = query.trim().toLowerCase();
return productRepository.search({
query: normalizedQuery,
category,
limit,
includeInactive,
});
}El objeto de opciones hace visibles los significados, permite valores por defecto y evita depender de un orden difícil de recordar.
undefined.null active un parámetro por defecto.undefined sin valor por defecto.arguments cuando rest parameters serían más claros.undefined.undefined, no con null.¿Qué devuelve cada llamada?
function greet(name = "Guest") {
return name;
}
greet();
greet(undefined);
greet(null);
greet("");Devuelven "Guest", "Guest", null y "", respectivamente. Solo la ausencia o undefined activan el valor por defecto.
Valores de retorno explica cómo una función entrega resultados, cuándo termina su ejecución y por qué retornar no es lo mismo que imprimir.