Parmetros predeterminados

Prubalo

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2));
// Expected output: 10

console.log(multiply(5));
// Expected output: 5

Sintaxis

function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
   statements
}

Descripcin

En JavaScript, los parmetros de funcin estn predeterminados en undefined. Sin embargo, a menudo es til establecer un valor predeterminado diferente. Aqu es donde los parmetros predeterminados pueden ayudar.

En el pasado, la estrategia general para establecer valores predeterminados era probar los valores de los parmetros en el cuerpo de la funcin y asignar un valor si eran undefined.

En el siguiente ejemplo, si no se proporciona ningn valor para b cuando se llama a multiply, el valor de b sera undefined al evaluar a * b y multiply devolvera NaN.

function multiply(a, b) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5); // NaN !

Para protegerte contra esto, usaras algo como la segunda lnea, donde b se establece en 1 si llamas a multiply con un solo argumento:

function multiply(a, b) {
  b = typeof b !== "undefined" ? b : 1;
  return a * b;
}

multiply(5, 2); // 10
multiply(5); // 5

Con los parmetros predeterminados en ES2015, las comprobaciones en el cuerpo de la funcin ya no son necesarias. Ahora, puedes asignar 1 como valor predeterminado para b en el encabezado de la funcin:

function multiply(a, b = 1) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5); // 5
multiply(5, undefined); // 5

Ejemplos

Pasar undefined vs. otros valores falsos

En la segunda llamada de este ejemplo, incluso si el primer argumento se establece explcitamente en undefined (aunque no null u otros valores falsos , el valor del argumento num sigue siendo el predeterminado.

function test(num = 1) {
  console.log(typeof num);
}

test(); // 'number' (num se establece en 1)
test(undefined); // 'number' (num se establece en 1 tambin)

// prueba con otros valores falsos:
test(""); // 'string' (num se establece en '')
test(null); // 'object' (num se establece en null)

Evaluado en el momento de la llamada

El argumento predeterminado se evala en el momento de la llamada. Entonces, a diferencia de (por ejemplo) Python, se crea un nuevo objeto cada vez que se llama a la funcin.

function append(value, array = []) {
  array.push(value);
  return array;
}

append(1); // [1]
append(2); // [2], no [1, 2]

Esto incluso se aplica a funciones y variables:

function callSomething(thing = something()) {
  return thing;
}

let numberOfTimesCalled = 0;
function something() {
  numberOfTimesCalled += 1;
  return numberOfTimesCalled;
}

callSomething(); // 1
callSomething(); // 2

Los parmetros anteriores estn disponibles para los parmetros predeterminados posteriores

Los parmetros definidos anteriormente (a la izquierda) estn disponibles para los parmetros predeterminados posteriores:

function greet(name, greeting, message = greeting + " " + name) {
  return [name, greeting, message];
}

greet("David", "Hi"); // ["David", "Hi", "Hi David"]
greet("David", "Hi", "Happy Birthday!"); // ["David", "Hi", "Happy Birthday!"]

Esta funcionalidad se puede aproximar de esta manera, lo que demuestra cuntos casos extremos se manejan:

function go() {
  return ":P";
}

function withDefaults(
  a,
  b = 5,
  c = b,
  d = go(),
  e = this,
  f = arguments,
  g = this.value,
) {
  return [a, b, c, d, e, f, g];
}

function withoutDefaults(a, b, c, d, e, f, g) {
  switch (arguments.length) {
    case 0:
      a;
    case 1:
      b = 5;
    case 2:
      c = b;
    case 3:
      d = go();
    case 4:
      e = this;
    case 5:
      f = arguments;
    case 6:
      g = this.value;
    default:
  }
  return [a, b, c, d, e, f, g];
}

withDefaults.call({ value: "=^_^=" });
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]

withoutDefaults.call({ value: "=^_^=" });
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]

Efectos de el mbito

Si se definen parmetros predeterminados para uno o ms parmetros, se crea un segundo mbito (registro de entorno), especficamente para los identificadores dentro de la lista de parmetros. Este mbito es padre del mbito creado para el cuerpo de la funcin.

Esto significa que no se puede hacer referencia a las funciones y variables declaradas en el cuerpo de la funcin desde los iniciadores de parmetros de valor predeterminado; intentar hacerlo arroja un ReferenceError en tiempo de ejecucin.

Tambin significa que las variables declaradas dentro del cuerpo de la funcin usando var enmascararn los parmetros del mismo nombre, en lugar de que el comportamiento habitual de las declaraciones var duplicadas no tenga ningn efecto.

La siguiente funcin arrojar un ReferenceError cuando se invoca, porque el valor del parmetro predeterminado no tiene acceso al mbito secundario del cuerpo de la funcin:

function f(a = go()) {
  // Lanza un `ReferenceError` cuando se invoca a `f`.
  function go() {
    return ":P";
  }
}

...y esta funcin imprimir undefined porque la variable var a se eleva solo a la parte superior del mbito creado para el cuerpo de la funcin (y no hasta el mbito principal creado para la lista de parmetros):

function f(a, b = () => console.log(a)) {
  var a = 1;
  b(); // Imprime `undefined`, porque los valores de los parmetros predeterminados existen en su propio mbito
}

Parmetros sin valores predeterminados despus de los parmetros predeterminados

Los parmetros an se establecen de izquierda a derecha, sobrescribiendo los parmetros predeterminados incluso si hay parmetros posteriores sin valores predeterminados.

function f(x = 1, y) {
  return [x, y];
}

f(); // [1, undefined]
f(2); // [2, undefined]

Parmetro desestructurado con asignacin de valor predeterminado

Puedes usar la asignacin de valor predeterminado con la notacin la desestructuracin:

function f([x, y] = [1, 2], { z: z } = { z: 3 }) {
  return x + y + z;
}

f(); // 6

Especificaciones

Compatibilidad con navegadores

Ve tambin

• Propuesta original en ecmascript.org