tipos - pasar parametros a una funcion javascript desde html

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

Question

Me gustaría que una función de 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
}

Answer 1

Al ser un desarrollador de C ++ desde hace mucho tiempo (Rookie to web development :)), cuando me topé 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 ten en cuenta que no funciona de manera consistente en 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 no es repetir las mismas soluciones, lo que otros ya han mencionado, sino informar que la asignación de parámetros en la definición de función puede funcionar en algunos navegadores, pero no confiar en ella.

Answer 2

Como una actualización ... con ECMAScript 6, puede 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 hace referencia en - http://es6-features.org/#DefaultParameterValues

Answer 3

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

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

solo 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 puede simular parámetros nombrados por defecto a través de 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, incluso falso o nulo. ( typeof null == "object" )

function foo(a, b) {
  a = typeof a !== ''undefined'' ? a : 42;
  b = typeof b !== ''undefined'' ? b : ''default_b'';
  ...
}

Answer 4

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

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

Esto establecerá delete_after en false si no está presente o undefined . Puede usar características de ES6 como esta hoy con transpilers como Babel .

Vea el artículo de MDN para más información .

Answer 5

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

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

Answer 6

Me parece que algo simple como este 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'');
} 

Answer 7

Para cualquier persona interesada en que el código funcione en Microsoft Edge, no use valores predeterminados en los parámetros de la función.

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

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

Para sortear este uso

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

A partir del 08 de agosto de 2016 esto sigue siendo un problema.

Answer 8

Recomendaría mucho cuidado 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 una segunda function parseInt(s, [ parámetro opcional function parseInt(s, [ radix =10]) pero el mapa llama a parseInt con tres argumentos: ( elemento , índice y matriz ).

Le sugiero que separe los parámetros requeridos de sus argumentos opcionales / valores predeterminados. Si su función toma 1,2, o 3 parámetros requeridos para los cuales ningún valor predeterminado tiene sentido, conviértalos en parámetros posicionales a la función, todos los parámetros opcionales deben seguir como atributos nombrados de un solo objeto. Si su función requiere 4 o más, quizás tenga más sentido suministrar todos los argumentos a través de los atributos de un único parámetro de objeto.

En su caso, le sugiero que escriba su función deleteFile de la siguiente manera:

// 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);

La ejecución del fragmento de código anterior ilustra los peligros que acechan detrás de los valores de argumento predeterminados para los parámetros no utilizados.

Answer 9

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

Answer 10

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 undefined.

Sintaxis:

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

Descripción:

Los parámetros de las funciones están predeterminados como indefinidos. Sin embargo, en situaciones puede ser útil establecer un valor predeterminado diferente. Aquí es donde los parámetros predeterminados pueden ayudar.

En el pasado, la estrategia general para establecer los 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 verificación condicional para asegurarse de que el parámetro no esté indefinido

Con los parámetros predeterminados en ES2015, la verificación en el cuerpo de la función ya no es necesaria. Ahora simplemente puede poner un valor predeterminado en el cabezal de 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

Diferentes ejemplos de sintaxis:

Relleno indefinido vs otros valores falsos:

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 idiomas, 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 están disponibles 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:

Presentado en Gecko 33 (Firefox 33 / Thunderbird 33 / SeaMonkey 2.30). Las funciones declaradas en el cuerpo de la función no pueden referirse dentro de los parámetros predeterminados y lanzar un ReferenceError (actualmente un TypeError en SpiderMonkey, ver error 1022967). Los parámetros predeterminados siempre se ejecutan primero, las declaraciones de funciones 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 predeterminados después de los parámetros predeterminados:

Antes de Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2), el siguiente código dio como resultado un error de sintaxis. Esto se ha corregido en el error 777060 y funciona como se esperaba en versiones posteriores. Los parámetros aún 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]

Parámetro destruido con asignación de valor por defecto:

Puede utilizar la asignación de valor por defecto 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

Answer 11

Según la sintaxis

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

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

Answer 12

Si está utilizando ES6+ , puede configurar 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 necesitas la sintaxis de ES5 puedes 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 esto se puede convertir en true si no devuelve el valor del lado derecho. Cuando se llama a la función sin un argumento correspondiente, la variable de parámetro ( bar en nuestro ejemplo) se establece como undefined por el motor JS. undefined Entonces se convierte en falso y, por lo tanto, el operador OR devuelve el valor 0.

Answer 13

Si, por algún motivo, no está usando ES6 y está usando lodash aquí encontrará una forma concisa de los parámetros de función predeterminados a través del método _.defaultTo :

var fn = function(a, b) {
  a = _.defaultTo(a, ''Hi'')
  b = _.defaultTo(b, ''Mom!'')

  console.log(a, b)
}

fn()                 // Hi Mom!
fn(undefined, null)  // Hi Mom!
fn(NaN, NaN)         // Hi Mom!
fn(1)                // 1 "Mom!"
fn(null, 2)          // Hi 2
fn(false, false)     // false false
fn(0, 2)             // 0 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Lo que establecerá el valor predeterminado si el valor actual es NaN , nulo o no definido

Answer 14

Solo usa una comparación explícita con undefined.

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

Answer 15

Use esto si desea usar la última sintaxis de ECMA6 :

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 un valor o undefined. NOTA : No funciona con Internet Explorer o con 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, ya que cada uno de estos ejemplos se basa en el hecho de que la variable de parámetro no estará undefined si no se pasó un valor de parámetro al llamar a esa función.

Answer 16

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 es posible que tenga que pasar valores de falsey como 0 , null e undefined a una función. Para determinar si un parámetro no está definido porque ese es el valor que pasé en lugar de indefinido porque no se ha definido en absoluto, hago esto:

function foo (param1, param2) {
   param1 = arguments.length >= 1 ? param1 : "default1";
   param2 = arguments.length >= 2 ? param2 : "default2";
}

Answer 17

Valores de parámetros predeterminados

Con ES6, quizás pueda hacer uno de los modismos más comunes en JavaScript relacionado 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

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

¿Por qué? Porque el 0 is falsy , y por eso el x || 11 results in 11 x || 11 results in 11 , no directamente en 0. Para solucionar este problema, algunas personas escribirán el cheque de forma más detallada de esta manera:

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 buena sintaxis útil agregada a partir de ES6 para simplificar la asignación de valores predeterminados a los argumentos que faltan:

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 x !== undefined ? x : 11 que el lenguaje mucho más común x || 11 x || 11

Expresiones de valor predeterminado

Function valores predeterminados de la Function pueden ser más que valores simples como 31; pueden ser cualquier expresión válida, incluso una 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 puede ver, las expresiones de valor predeterminadas se evalúan perezosamente, lo que significa que solo se ejecutan cuando son necesarias, es decir, cuando se omite el argumento de un parámetro o no está definido.

Una expresión de valor por defecto puede ser incluso una llamada de 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

Answer 18

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 llamada de función aquí, 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 de función como parámetro predeterminado. Lo que hace que el código sea más simplificado y legible.

Este ejemplo ha sido tomado de aquí.

Answer 19

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

El siguiente código puede funcionar en esta situación, incluido ECMAScript 6 (ES6) y 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 indefinido . Este enfoque no parece atractivo mediante programación, pero tiene compatibilidad con versiones anteriores .

Answer 20

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!!!

Answer 21

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_after si no es un valor falsey , de lo contrario asigna la cadena "my default here" . Para obtener más detalles, consulte la encuesta de Doug Crockford sobre el idioma y consulte la sección sobre Operadores .

Este enfoque no funciona si desea pasar un valor falsey , es decir, false , null , undefined , 0 o "" . Si necesita que se pasen valores falsey , deberá utilizar el método en la respuesta de Tom Ritter .

Cuando se trata de una serie de parámetros para una función, a menudo es útil permitir que el consumidor pase los argumentos de parámetros en un objeto y luego fusione 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;
};

usar

// 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" });