Advertisement
  1. Code
  2. JavaScript

Cómo utilizar parámetros opcionales de funciones en JavaScript

Scroll to top
Read Time: 4 min

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

En este artículo rápido, discutiremos cómo puedes usar parámetros opcionales de funciones en JavaScript.

JavaScript es una de las tecnologías centrales de la web. La mayoría de los sitios web la utilizan, y todos los navegadores web modernos son compatibles con ella sin necesidad de plugins. En esta serie, discutiremos diferentes trucos y consejos que te ayudarán en tu desarrollo cotidiano con JavaScript.

Al escribir código en JavaScript, a menudo necesitas configurar como opcionales los parámetros de las funciones. Al usar funciones de JavaScript existen dos tipos de parámetros: parámetros obligatorios y parámetros opcionales. En el caso de los parámetros obligatorios, debes enviar dichos parámetros o, de lo contrario, JavaScript mostrará un error. Sin embargo, en el caso de los parámetros opcionales, si no los envías estos se inicializarán con algún valor predeterminado.

Hoy discutiremos los conceptos básicos de los parámetros opcionales de funciones en JavaScript y cómo usarlos.

Cómo usar los parámetros opcionales de funciones en ES5 y versiones anteriores

En esta sección, discutiremos una solución que funciona incluso con navegadores más antiguos. Esta fue utilizada frecuentemente hasta la era de JavaScript ES5, cuando no había soporte integrado disponible para hacer que los parámetros de las funciones fueran opcionales.

Revisemos el siguiente ejemplo para comprender cómo funciona.

1
function getFullImagePath(imagePath, imageBaseUrl) {
2
  imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/’;

3


4
  var fullImagePath = imageBaseUrl + imagePath;

5


6
  return fullImagePath;

7
}

En el ejemplo anterior, la función getFullImagePath recibe dos argumentos, imagePath e imageBaseUrl. Queremos que el segundo parámetro, imageBaseUrl, sea opcional, por lo que puedes omitir enviarlo si quieres usar el valor de parámetro predeterminado para él. Para que sea opcional, hemos usado la siguiente instrucción.

1
imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/';

Básicamente, estamos verificando si la variable imageBaseUrl está definida; si está definida y se evalúa como TRUE, suponemos que el segundo parámetro está disponible y lo usaremos. Por otro lado, si el parámetro imageBaseUrl no está definido o se evalúa como FALSE, usaremos el valor https://code.tutsplus.com/ como valor predeterminado de este parámetro. Es importante que los parámetros opcionales siempre se encuentren al final de la lista de parámetros.

Ten en cuenta que este enfoque no funcionará para valores numéricos, ya que sustituirá el valor 0. Lo mismo ocurrirá si quieres poder enviar el valor null. Si quieres poder enviar 0 o null a tu función, deberás verificar explícitamente si el parámetro es de tipo undefined.

1
function getFullImagePath(imagePath, imageBaseUrl) {
2
  imageBaseUrl = (typeof imageBaseUrl === 'undefined') ? 'https://code.tutsplus.com/' : imageBaseUrl;
3
  var fullImagePath = imageBaseUrl + imagePath;
4
5
  return fullImagePath;
6
}

En este caso, hemos verificado explícitamente si el valor del parámetro imageBaseUrl es undefined para decidir si es un parámetro opcional. Este es un método más infalible para decidir si el parámetro es opcional.

Así es como puedes hacer que los parámetros de función sean opcionales en navegadores que no sean compatibles con las ediciones ES6+. En la siguiente sección, lo discutiremos en el contexto de los navegadores modernos.

Cómo usar parámetros opcionales de funciones en JavaScript ES6

En esta sección, discutiremos el método que puedes usar en los navegadores modernos que son compatibles con la edición ES6 de JavaScript. Analicemos el siguiente ejemplo para comprender cómo funciona. Escribiremos de nuevo el ejemplo que discutimos en la sección anterior con su contraparte para ES6.

1
function getFullImagePath(imagePath, imageBaseUrl = 'https://code.tutsplus.com/') {
2
  var fullImagePath = imageBaseUrl + imagePath;
3
4
  return fullImagePath;
5
}

Si has trabajado con otros lenguajes de programación, el enfoque anterior para definir parámetros opcionales de funciones podría resultarte familiar. En este caso, al parámetro opcional se le asigna el valor predeterminado en la propia instrucción de declaración de la función.

Además puedes tener múltiples parámetros opcionales, como se muestra en el siguiente fragmento de código, siempre y cuando los definas al final de la lista de parámetros.

1
function foo(a, b=0, c=10) {
2
  //...

3
}

Entonces, como puedes ver, la sintaxis de JavaScript ES6 es mucho más simple y fácil de escribir que el método anterior.

Conclusión

Hoy discutimos cómo puedes usar parámetros opcionales de funciones en JavaScript junto con un par de ejemplos reales.

Esta es una comparación de las diferentes maneras de escribir código para los parámetros opcionales de funciones en JavaScript:

Método Notas
arg = arg || defaultValue Un lenguaje común antes de ES6, pero 0 y null serán sustituidos por el valor predeterminado.
arg = (typeof arg === 'undefined') ? defaultValue : arg La manera más infalible de implementar parámetros opcionales antes de ES6.
function something(arg=defaultValue) { } El mejor método que puedes usar con ES6 y versiones más recientes de JavaScript.
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.