Parámetros predeterminados de funciones en JavaScript: del caos a la elegancia

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

¿Parámetro sin regalo? Entendiendo los valores predeterminados en JavaScript

\n\n

Imagina que pediste una pizza. Llamas al delivery y dices: «Quiero una pizza, por favor». El operador pregunta: «¿Cuál?» — «Bueno, la estándar, con queso y salchicha». Ni siquiera piensas que la pizza tiene parámetros predeterminados.

\n\n

Exactamente igual en JavaScript: las funciones a menudo se llaman sin todos los argumentos. Y si el programador no previó set a default parameter value for a JavaScript function, el código puede romperse o comportarse de manera impredecible. En este artículo, analizaremos todas las formas de establecer un valor predeterminado para un parámetro de función en JS — desde los viejos y queridos parches hasta la sintaxis moderna de ES6. ¡Allá vamos!

\n\n

¿Por qué es importante esto?

\n\n

Supongamos que tenemos una función que saluda al usuario:

\n\n
function greet(name) {\n    console.log('¡Hola, ' + name + '!');\n}\n\ngreet(); // Muestra: "¡Hola, undefined!" — incómodo, ¿verdad?
\n\n

Sin default parameters javascript, un argumento no pasado se convierte en undefined. Y si intentamos llamar a un método en undefined — obtenemos un error. Por lo tanto, los parámetros por defecto js no son solo una comodidad, sino una protección contra errores.

\n\n

Método 1: Clásico — operador ternario (o if)

\n\n

Antes de la llegada de ES6, los desarrolladores usaban el operador ternario javascript o una simple comprobación. Funciona, pero se ve voluminoso:

\n\n
function multiply(a, b) {\n    a = a !== undefined ? a : 1;\n    b = b !== undefined ? b : 2;\n    return a * b;\n}\n\nconsole.log(multiply(5)); // 10 (5 * 2)\nconsole.log(multiply());  // 2 (1 * 2)
\n\n

Ventajas: Claro incluso para un principiante, compatible con navegadores antiguos.
\nDesventajas: El código se infla. Si hay 5–6 parámetros, la legibilidad cae drásticamente.

\n\n

Piedra oculta: comprobación de undefined vs truthy

\n\n

Muchos principiantes escriben así:

\n\n
function greet(name) {\n    name = name || 'Invitado';\n    console.log('¡Hola, ' + name);\n}
\n\n

Esto funciona, hasta que pasas 0, una cadena vacía '' o false. Todos estos valores son falsy, y la función los reemplazará con 'Invitado'. Si necesitas pasar 0 como un valor válido — este enfoque fallará. Usa una comprobación estricta de undefined.

\n\n

Método 2: El objeto mágico arguments

\n\n

Dentro de cada función (excepto las funciones flecha) hay un objeto implícito similar a un array llamado arguments javascript. Se puede usar para verificar los argumentos pasados:

\n\n
function showInfo(name, age) {\n    name = arguments.length > 0 ? name : 'Anónimo';\n    age = arguments.length > 1 ? age : 'no especificado';\n    return `${name}, edad: ${age}`;\n}\n\nconsole.log(showInfo()); // Anónimo, edad: no especificado
\n\n

Ventajas: Da control total sobre qué argumentos se pasaron.
\nDesventajas: Sintaxis obsoleta, no funciona en funciones flecha. Generalmente se usa solo para tareas muy específicas (por ejemplo, cuando la cantidad de parámetros no se conoce de antemano).

\n\n

Método 3: Estándar moderno — parámetros predeterminados de ES6

\n\n

A partir de ECMAScript 2015, establecer parámetros por defecto js se puede hacer directamente en la declaración de la función. Esta es la forma más limpia y recomendada:

\n\n
function multiply(a = 1, b = 2) {\n    return a * b;\n}\n\nconsole.log(multiply(5)); // 10\nconsole.log(multiply());  // 2
\n\n

Hermoso, ¿verdad? Pero hay detalles importantes que debes conocer para no caer en una trampa.

\n\n

Detalle 1: Los valores predeterminados se evalúan en el momento de la llamada

\n\n

Esto significa que si pasas undefined — se activará el valor predeterminado. Si pasas null — no:

\n\n
function test(x = 10) {\n                

Blogs

Book Recommendations