Establecer un valor de parámetro predeterminado para una función JavaScript


Me gustaría que una función JavaScript tenga argumentos opcionales en los que establezco un valor predeterminado, que se usa si el valor no está definido. En Ruby puedes hacerlo así:

def read_file(file, delete_after = false)
  # code
end

¿Funciona esto en JavaScript?

function read_file(file, delete_after = false) {
  // Code
}
Author: Michał Perłakowski, 2009-05-22

20 answers

Desde ES6/ES2015, los parámetros predeterminados están en la especificación de idioma.

function read_file(file, delete_after = false) {
  // Code
}

Simplemente funciona.

Referencia: Parámetros por defecto-MDN

Los parámetros de función predeterminados permiten que los parámetros formales se inicialicen con valores predeterminados si no se pasa ningún valor o undefined.

También puedes simular parámetros predeterminados con nombre mediante la desestructuración :

// the `= {}` below lets you call the function without any parameters
function myFor({ start = 5, end = 1, step = -1 } = {}) { // (A)
    // Use the variables `start`, `end` and `step` here
    ···
}

Pre ES2015 ,

Hay muchas maneras, pero este es mi método preferido - te permite pasar todo lo que quieras, incluyendo false o null. (typeof null == "object")

function foo(a, b) {
  a = typeof a !== 'undefined' ? a : 42;
  b = typeof b !== 'undefined' ? b : 'default_b';
  ...
}
 2992
Author: Tom Ritter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-03 17:37:50
function read_file(file, delete_after) {
    delete_after = delete_after || "my default here";
    //rest of code
}

Esto asigna a delete_after el valor de delete_aftersi no es un valor falsey de lo contrario asigna la cadena "my default here". Para más detalles, echa un vistazo a Encuesta de Doug Crockford de la lengua y echa un vistazo a la sección sobre los operadores .

Este enfoque no funciona si quieres pasar un falsey valor de decir false, null, undefined, 0 o "". Si necesita que falsey se pasen valores, necesitará usar el método en Tom Respuesta de Ritter .

Cuando se trata de un número de parámetros a una función, a menudo es útil permitir que el consumidor pase los argumentos de los parámetros en un objeto y luego combinar estos valores con un objeto que contiene los valores predeterminados para la función

function read_file(values) {
    values = merge({ 
        delete_after : "my default here"
    }, values || {});

    // rest of code
}

// simple implementation based on $.extend() from jQuery
function merge() {
    var obj, name, copy,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length;

    for (; i < length; i++) {
        if ((obj = arguments[i]) != null) {
            for (name in obj) {
                copy = obj[name];

                if (target === copy) {
                    continue;
                }
                else if (copy !== undefined) {
                    target[name] = copy;
                }
            }
        }
    }

    return target;
};

Utilizar

// will use the default delete_after value
read_file({ file: "my file" }); 

// will override default delete_after value
read_file({ file: "my file", delete_after: "my value" }); 
 566
Author: Russ Cam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-09 10:30:20

Encuentro que algo simple como esto es mucho más conciso y legible personalmente.

function pick(arg, def) {
   return (typeof arg == 'undefined' ? def : arg);
}

function myFunc(x) {
  x = pick(x, 'my default');
} 
 138
Author: tj111,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-05-21 20:18:46

En ECMAScript 6 realmente podrás escribir exactamente lo que tienes:

function read_file(file, delete_after = false) {
  // Code
}

Esto pondrá delete_after a false si no está presente o undefined. Puede usar funciones de ES6 como esta hoy en día con transpilers como Babel.

Consulte el artículo MDN para obtener más información.

 55
Author: Felix Kling,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-01 20:43:06

Valores por defecto de los Parámetros

Con ES6, puede hacer quizás uno de los modismos más comunes en JavaScript se relaciona con establecer un valor predeterminado para un parámetro de función. La forma en que hemos hecho esto durante años debería parecer bastante familiar:

function foo(x,y) {
 x = x || 11;
 y = y || 31;
 console.log( x + y );
}
foo(); // 42
foo( 5, 6 ); // 11
foo( 5 ); // 36
foo( null, 6 ); // 17

Este patrón es el más utilizado, pero es peligroso cuando pasamos valores como {[19]]}

foo(0, 42)
foo( 0, 42 ); // 53 <-- Oops, not 42

¿Por qué? Porque el 0 is falsy, y así el x || 11 results in 11, no el directamente pasado en 0. Para arreglar esto gotcha, algunas personas escribirán el cheque más verbosamente como esto:

function foo(x,y) {
 x = (x !== undefined) ? x : 11;
 y = (y !== undefined) ? y : 31;
 console.log( x + y );
}
foo( 0, 42 ); // 42
foo( undefined, 6 ); // 17

Ahora podemos examinar una sintaxis útil añadida a partir de ES6 para simplificar la asignación de valores predeterminados a los argumentos faltantes:

function foo(x = 11, y = 31) {
 console.log( x + y );
}

foo(); // 42
foo( 5, 6 ); // 11
foo( 0, 42 ); // 42
foo( 5 ); // 36
foo( 5, undefined ); // 36 <-- `undefined` is missing
foo( 5, null ); // 5 <-- null coerces to `0`
foo( undefined, 6 ); // 17 <-- `undefined` is missing
foo( null, 6 ); // 6 <-- null coerces to `0`

x = 11 en una declaración de función es más como x !== undefined ? x : 11 que el lenguaje mucho más común x || 11

Expresiones de valor por defecto

Function los valores predeterminados pueden ser más que simples valores como 31; pueden ser cualquier expresión válida, incluso un function call:

function bar(val) {
 console.log( "bar called!" );
 return y + val;
}
function foo(x = y + 3, z = bar( x )) {
 console.log( x, z );
}
var y = 5;
foo(); // "bar called"
 // 8 13
foo( 10 ); // "bar called"
 // 10 15
y = 6;
foo( undefined, 10 ); // 9 10

Como usted puede ver, las expresiones de valor por defecto se evalúan perezosamente, lo que significa que solo se ejecutan si y cuando se necesitan, es decir, cuando el argumento de un parámetro se omite o no está definido.

Una expresión de valor por defecto puede incluso ser una llamada a una expresión de función en línea-comúnmente conocida como una Expresión de Función Invocada inmediatamente (IIFE):

function foo( x =
 (function(v){ return v + 11; })( 31 )
) {
 console.log( x );
}
foo(); // 42
 20
Author: Thalaivar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-15 17:58:14

Esa solución es trabajar para mí en js:

function read_file(file, delete_after) {
    delete_after = delete_after || false;
    // Code
}
 9
Author: Takács Zsolt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-16 11:29:34

Simplemente use una comparación explícita con undefined.

function read_file(file, delete_after)
{
    if(delete_after === undefined) { delete_after = false; }
}
 7
Author: Martin Wantke,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-16 07:34:34

Siendo un desarrollador de C++ desde hace mucho tiempo (Novato en desarrollo web :)), cuando me encontré por primera vez con esta situación, hice la asignación de parámetros en la definición de la función, como se menciona en la pregunta, de la siguiente manera.

function myfunc(a,b=10)

Pero tenga cuidado de que no funciona de manera consistente en todos los navegadores. Para mí funcionó en Chrome en mi escritorio, pero no funcionó en Chrome en Android. Opción más segura, como muchos han mencionado anteriormente es -

    function myfunc(a,b)
    {
    if (typeof(b)==='undefined') b = 10;
......
    }

La intención de esta respuesta es no repetir la las mismas soluciones, lo que otros ya han mencionado, pero para informar que la asignación de parámetros en la definición de la función puede funcionar en algunos navegadores, pero no se basan en ella.

 6
Author: vivek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-19 06:40:08

Recomiendo encarecidamente extremar la precaución al usar valores de parámetros predeterminados en javascript. A menudo crea errores cuando se usa junto con funciones de orden superior como forEach, map, y reduce. Por ejemplo, considere esta línea de código:

['1', '2', '3'].map(parseInt); // [1, NaN, NaN]

ParseInt tiene un segundo parámetro opcional function parseInt(s, [radix=10]) pero map llama a parseInt con tres argumentos: (elemento, index , y array).

Le sugiero que separe su requerido los parámetros forman sus argumentos de valor opcional/predeterminado. Si su función toma 1,2, o 3 parámetros requeridos para los cuales ningún valor predeterminado tiene sentido, hágalos parámetros posicionales para la función, cualquier parámetro opcional debe seguir como atributos nombrados de un solo objeto. Si su función toma 4 o más, tal vez tenga más sentido proporcionar todos los argumentos a través de atributos de un solo parámetro de objeto.

En su caso, le sugeriría que escriba su función DeleteFile como esto:

// unsafe
function read_file(fileName, deleteAfter=false) {
    if (deleteAfter) {
        console.log(`Reading and then deleting ${fileName}`);
    } else {
        console.log(`Just reading ${fileName}`);
    }
}

// better
function readFile(fileName, options={}) {
  const { deleteAfter = false } = options || {}; // if null
  read_file(fileName, deleteAfter);
}

console.log('unsafe...');
['log1.txt', 'log2.txt', 'log3.txt'].map(read_file);

console.log('better...');
['log1.txt', 'log2.txt', 'log3.txt'].map(readFile);

Ejecutar el fragmento de código anterior ilustra los peligros que acechan detrás de los valores de argumento predeterminados para los parámetros no utilizados.

 6
Author: Doug Coburn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-15 22:43:13

Como una actualización...con ECMAScript 6 puedes FINALMENTE establecer valores predeterminados en las declaraciones de parámetros de función de la siguiente manera:

function f (x, y = 7, z = 42) {
  return x + y + z
}

f(1) === 50

Como se indica en - http://es6-features.org/#DefaultParameterValues

 5
Author: zillaofthegods,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-06 16:16:21

Para cualquier persona interesada en tener allí el trabajo de código en Microsoft Edge, no utilice valores predeterminados en los parámetros de función.

function read_file(file, delete_after = false) {
    #code
}

En ese ejemplo Edge lanzará un error "Esperando') '"

Para evitar este uso

function read_file(file, delete_after) {
  if(delete_after == undefined)
  {
    delete_after = false;
  }
  #code
}

A partir de Ago 08 2016 esto sigue siendo un problema

 5
Author: Steven Johnston,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-23 20:15:38

Según la sintaxis

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

Puede definir el valor predeterminado de los parámetros formales. y también verifique el valor indefinido usando la función typeof.

 2
Author: sachin kumar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-15 20:40:50
function helloWorld(name, symbol = '!!!') {
    name = name || 'worlds';
    console.log('hello ' + name + symbol);
}

helloWorld(); // hello worlds!!!

helloWorld('john'); // hello john!!!

helloWorld('john', '(>.<)'); // hello john(>.<)

helloWorld('john', undefined); // hello john!!!

helloWorld(undefined, undefined); // hello worlds!!!
 2
Author: TinhNQ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-08 08:55:11

ES6: Como ya se mencionó en la mayoría de las respuestas, en ES6, simplemente puede inicializar un parámetro junto con un valor.


ES5: La mayoría de las respuestas dadas no son lo suficientemente buenas para mí porque hay ocasiones en las que puedo tener que pasar valores falsos como 0, null y undefined a una función. Para determinar si un parámetro es indefinido porque ese es el valor que pasé en lugar de indefinido debido a no haber sido definido en absoluto, hago esto:

function foo (param1, param2) {
   param1 = arguments.length >= 1 ? param1 : "default1";
   param2 = arguments.length >= 2 ? param2 : "default2";
}
 2
Author: Angel Politis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-12 05:26:12

function throwIfNoValue() {
throw new Error('Missing argument');
}
function foo(argValue = throwIfNoValue()) {
return argValue ;
}

Aquí foo() es una función que tiene un parámetro llamado argValue. Si no pasamos nada en la función call aquí, entonces se llamará a la función throwIfNoValue () y el resultado devuelto se asignará al único argumento argValue. Así es como se puede usar una llamada a función como parámetro predeterminado. Lo que hace que el código sea más simplificado y legible.

Este ejemplo se ha tomado de aquí

 1
Author: dutta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-01 08:50:53

Si está utilizando ES6+ puede establecer los parámetros predeterminados de la siguiente manera:

function test (foo = 1, bar = 2) {
  console.log(foo, bar);
}

test(5); // foo gets overwritten, bar remains default parameter

Si necesita ES5 sintaxis puede hacerlo de la siguiente manera:

function test(foo, bar) {
  foo = foo || 2;
  bar = bar || 0;
  
  console.log(foo, bar);
}

test(5); // foo gets overwritten, bar remains default parameter

En la sintaxis anterior se usa el operador OR. El operador OR siempre devuelve el primer valor si se puede convertir a true si no devuelve el valor del lado derecho. Cuando se llama a la función sin argumento correspondiente, la variable de parámetro (bar en nuestro ejemplo) se establece en undefined por el motor JS. undefined Se convierte entonces a false y por lo tanto el operador OR devuelve el valor 0.

 1
Author: Willem van der Veen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-08 15:48:37

Utilice esto si desea utilizar la última ECMA6 sintaxis:

function myFunction(someValue = "This is DEFAULT!") {
  console.log("someValue --> ", someValue);
}

myFunction("Not A default value") // calling the function without default value
myFunction()  // calling the function with default value

Se llama default function parameters. Permite que los parámetros formales se inicialicen con valores predeterminados si no se pasa ningún valor o indefinido. NOTA: No funcionará con Internet Explorer o navegadores más antiguos.

Para la máxima compatibilidad posible use esto:

function myFunction(someValue) {
  someValue = (someValue === undefined) ? "This is DEFAULT!" : someValue;
  console.log("someValue --> ", someValue);
}

myFunction("Not A default value") // calling the function without default value
myFunction()  // calling the function with default value

Ambas funciones tienen exactamente el mismo comportamiento que cada uno de estos ejemplos se basan en el hecho de que la variable de parámetro será undefined si no se pasó ningún valor de parámetro al llamar a esa función.

 0
Author: BlackBeard,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-05 11:54:50
def read_file(file, delete_after = false)
  # code
end

El siguiente código puede funcionar en esta situación incluyendo ECMAScript 6 (ES6) así como versiones anteriores.

function read_file(file, delete_after) {
    if(delete_after == undefined)
        delete_after = false;//default value

    console.log('delete_after =',delete_after);
}
read_file('text1.txt',true);
read_file('text2.txt');

Como valor predeterminado en idiomas funciona cuando el valor del parámetro de la función se omite al llamar, en JavaScript se asigna a undefined. Este enfoque no se ve atractivo programáticamente, pero tiene compatibilidad con versiones anteriores .

 0
Author: Muhammad Rizwan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-24 23:02:55

Sí, esto se conoce como un parámetro predeterminado

Los parámetros de función predeterminados permiten que los parámetros formales se inicialicen con valores predeterminados si no se pasa ningún valor o indefinido.

Sintaxis:

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

Descripción:

Parámetros de las funciones por defecto a undefined Sin embargo, en situaciones podría ser útil establecer un valor predeterminado diferente. Aquí es donde los parámetros predeterminados pueden ayudar.

En el pasado, la estrategia general para establecer valores predeterminados era probar los valores de los parámetros en el cuerpo de la función y asignar un valor si no están definidos. Si no se proporciona ningún valor en la llamada, su valor sería indefinido. Tendría que establecer una comprobación condicional para asegurarse de que el parámetro no está indefinido

Con los parámetros predeterminados en ES2015, la comprobación en el cuerpo de la función ya no es necesaria. Ahora simplemente puede poner un valor predeterminado en el encabezado de la función.

Ejemplo de las diferencias:

// OLD METHOD
function multiply(a, b) {
  b = (typeof b !== 'undefined') ?  b : 1;
  return a * b;
}

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


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

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

Sintaxis Diferente Ejemplos:

Padding undefined vs otros valores falsy:

Incluso si el valor se establece explícitamente al llamar, el valor del argumento num es el predeterminado.

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

test();          // 'number' (num is set to 1)
test(undefined); // 'number' (num is set to 1 too)

// test with other falsy values:
test('');        // 'string' (num is set to '')
test(null);      // 'object' (num is set to null)

Evaluado en el momento de la llamada:

El argumento predeterminado se evalúa en el momento de la llamada, por lo que, a diferencia de otros lenguajes, se crea un nuevo objeto cada vez que se llama a la función.

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

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


// This even applies to functions and variables
function callSomething(thing = something()) {
 return thing;
}

function something() {
  return 'sth';
}

callSomething();  //sth

Los parámetros predeterminados están disponibles para los parámetros predeterminados posteriores:

Los parámetros ya encontrados son disponible para parámetros predeterminados posteriores

function singularAutoPlural(singular, plural = singular + 's',
                        rallyingCry = plural + ' ATTACK!!!') {
  return [singular, plural, rallyingCry];
}

//["Gecko","Geckos", "Geckos ATTACK!!!"]
singularAutoPlural('Gecko');

//["Fox","Foxes", "Foxes ATTACK!!!"]
singularAutoPlural('Fox', 'Foxes');

//["Deer", "Deer", "Deer ... change."]
singularAutoPlural('Deer', 'Deer', 'Deer peaceably and respectfully \ petition the government for positive change.')

Funciones definidas dentro del cuerpo de la función:

Introducido en Gecko 33 (Firefox 33 / Thunderbird 33 / SeaMonkey 2.30). Las funciones declaradas en el cuerpo de la función no se pueden referir dentro de los parámetros predeterminados y lanzar un ReferenceError (actualmente un TypeError en SpiderMonkey, consulte el error 1022967). Los parámetros predeterminados siempre se ejecutan primero, las declaraciones de función dentro del cuerpo de la función se evalúan después.

// Doesn't work! Throws ReferenceError.
function f(a = go()) {
  function go() { return ':P'; }
}

Parámetros sin valores por defecto después de los parámetros por defecto:

Antes de Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2), el siguiente código resultó en un SyntaxError. Esto se ha corregido en el error 777060 y funciona como se esperaba en versiones posteriores. Los parámetros todavía se establecen de izquierda a derecha, sobrescribiendo los parámetros predeterminados incluso si hay parámetros posteriores sin valores predeterminados.

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

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

Paramet desestructurado con asignación de valores por defecto:

Puede usar la asignación de valores predeterminada con la notación de asignación de desestructuración

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

f(); // 6
 0
Author: esewalson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-27 16:56:00

Sí, esto funcionará en Javascript. También puedes hacer eso:

function func(a=10,b=20)
{
    alert (a+' and '+b);
}

func(); // Result: 10 and 20

func(12); // Result: 12 and 20

func(22,25); // Result: 22 and 25
 -3
Author: Muhammad Awais,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-19 11:59:31