Définir une valeur de paramètre par défaut pour une fonction JavaScript

je voudrais qu'une fonction JavaScript ait des arguments optionnels sur lesquels je mets un défaut, qui est utilisé si la valeur n'est pas définie. Dans Ruby vous pouvez le faire comme ceci:

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

est-ce que cela fonctionne en JavaScript?

function read_file(file, delete_after = false) {
  // Code
}
2069
demandé sur Michał Perłakowski 2009-05-22 00:07:17

20 réponses

De l'ES6/ES2015, des paramètres par défaut est dans le langage de spécification.

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

ça marche.

référence: paramètres par défaut-MDN

les paramètres de la fonction par défaut permettent d'initialiser les paramètres formels avec des valeurs par défaut si aucune valeur ou Non défini est passé.

Vous pouvez également simuler par défaut nommé paramètres via la déstructuration :

// 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
    ···
}

Pré ES2015 ,

il y a beaucoup de façons, mais c'est ma méthode préférée - elle vous permet de passer dans tout ce que vous voulez, y compris faux ou null. ( typeof null == "object" )

function foo(a, b) {
  a = typeof a !== 'undefined' ? a : 42;
  b = typeof b !== 'undefined' ? b : 'default_b';
  ...
}
2992
répondu Tom Ritter 2017-12-03 17:37:50
function read_file(file, delete_after) {
    delete_after = delete_after || "my default here";
    //rest of code
}

assigne à delete_after la valeur de delete_after si elle n'est pas une falsey autrement elle assigne la chaîne "my default here" . Pour plus de détails, consultez , le sondage de Doug Crockford sur la langue et la section sur les opérateurs .

cette approche ne fonctionne pas si vous voulez passer dans un falsey valeur i.e. false , null , undefined , 0 ou "" . Si vous avez besoin de falsey valeurs à passer dans vous devez utiliser la méthode dans réponse de Tom Ritter .

lorsqu'on traite un certain nombre de paramètres à une fonction, il est souvent utile de permettre au consommateur de passer les arguments de paramètre dans un objet et ensuite fusionner ces valeurs avec un objet qui contient les valeurs par défaut pour la fonction

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;
};

à utiliser

// 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
répondu Russ Cam 2018-01-09 10:30:20

je trouve quelque chose de simple comme ceci pour être beaucoup plus concis et lisible personnellement.

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

function myFunc(x) {
  x = pick(x, 'my default');
} 
138
répondu tj111 2009-05-21 20:18:46

dans ECMAScript 6, vous pourrez en fait écrire exactement ce que vous avez:

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

ce sera delete_after à false si elle n'est pas présente ou undefined . Vous pouvez utiliser des fonctionnalités ES6 comme celle-ci aujourd'hui avec des transpilers tels que Babel .

voir l'article de MDN pour plus d'information .

55
répondu Felix Kling 2015-06-01 20:43:06

Valeurs Par Défaut Des Paramètres

avec ES6, vous pouvez peut-être faire l'une des expressions les plus courantes dans JavaScript concerne la définition d'une valeur par défaut pour un paramètre de fonction. La façon dont nous avons fait cela pendant des années devrait sembler assez familière:

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

Ce modèle est le plus utilisé, mais il est dangereux quand on passe des valeurs comme

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

pourquoi? Parce que le 0 is falsy , et donc la x || 11 results in 11 , pas le direct passé en 0. Pour corriger ce gotcha, certaines personnes écriront le chèque plus verbeusement comme ceci:

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

nous pouvons maintenant examiner une jolie syntaxe utile ajoutée à partir de ES6 pour simplifier l'attribution de valeurs par défaut aux arguments manquants:

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 dans une déclaration de fonction est plus comme x !== undefined ? x : 11 que l'idiome beaucoup plus commun x || 11

"

Expressions De Valeur Par Défaut

Function les valeurs par défaut peuvent être plus que des valeurs simples comme 31; elles peuvent être n'importe quelle expression valide, même une 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

comme vous pouvez le voir, les expressions de valeur par défaut sont évaluées de manière paresseuse, ce qui signifie qu'elles ne sont lancées que si et quand elles sont nécessaires - c'est-à-dire quand l'argument d'un paramètre est omis ou non défini.

A l'expression de valeur par défaut peut même être un appel d'expression de fonction en ligne-communément appelé une Expression de fonction immédiatement invoquée (IIFE) :

function foo( x =
 (function(v){ return v + 11; })( 31 )
) {
 console.log( x );
}
foo(); // 42
20
répondu Thalaivar 2016-10-15 17:58:14

cette solution est un travail pour moi dans js:

function read_file(file, delete_after) {
    delete_after = delete_after || false;
    // Code
}
9
répondu Takács Zsolt 2015-11-16 11:29:34

il suffit d'utiliser une comparaison explicite avec indéfini.

function read_file(file, delete_after)
{
    if(delete_after === undefined) { delete_after = false; }
}
7
répondu Martin Wantke 2015-11-16 07:34:34

étant un développeur C++ de longue date (Rookie to web development :)), quand je suis tombé sur cette situation, j'ai fait l'assignation de paramètre dans la définition de la fonction, comme il est mentionné dans la question, comme suit.

function myfunc(a,b=10)

mais méfiez-vous qu'il ne fonctionne pas de manière cohérente entre les navigateurs. Pour moi, il a travaillé sur chrome sur mon bureau, mais ne fonctionne pas sur chrome sur android. Option plus sûre, comme beaucoup l'ont mentionné ci-dessus est -

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

L'Intention pour cette réponse n'est pas de répéter les mêmes solutions, ce que d'autres ont déjà mentionné, mais d'informer que l'affectation des paramètres dans la définition de la fonction peut fonctionner sur certains navigateurs, mais ne s'y fient pas.

6
répondu vivek 2016-05-19 06:40:08

je recommande vivement une extrême prudence lors de l'utilisation des valeurs par défaut des paramètres dans javascript. Il crée souvent des bogues lorsqu'il est utilisé en conjonction avec des fonctions d'ordre supérieur comme forEach , map , et reduce . Par exemple, considérez cette ligne de code:

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

deuxième paramètre facultatif function parseInt(s, [ radix =10]) mais la carte appelle parseInt avec trois arguments: ( élément , index , et array ).

je vous suggère de séparer vos paramètres requis de vos arguments de valeur optionnels/par défaut. Si votre fonction prend 1,2, ou 3 paramètres requis pour lesquels aucune valeur par défaut n'a de sens, faites-les paramètres de position de la fonction, Tous les paramètres optionnels devraient suivre comme attributs nommés d'un objet unique. Si votre fonction prend 4 ou plus, il est peut-être plus de sens fournit tous les arguments via les attributs d'un seul paramètre d'objet.

dans votre cas, je vous suggérerais d'écrire votre fonction deleteFile comme ceci:

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

L'exécution de l'extrait ci-dessus illustre les dangers qui se cachent derrière les valeurs par défaut des arguments pour les paramètres inutilisés.

6
répondu Doug Coburn 2017-10-15 22:43:13

comme mise à jour...avec ECMAScript 6 Vous pouvez enfin définir des valeurs par défaut dans les déclarations de paramètres de fonction comme ceci:

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

f(1) === 50

comme référencé par - http://es6-features.org/#DefaultParameterValues

5
répondu zillaofthegods 2015-10-06 16:16:21

pour toute personne intéressée à avoir le code travailler dans Microsoft Edge, ne pas utiliser par défaut dans les paramètres de fonction.

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

dans cet exemple, Edge va lancer une erreur "Expecting') "

pour contourner cette utilisation

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

en date du 08 août 2016 c'est toujours un problème

5
répondu Steven Johnston 2016-09-23 20:15:38

selon la syntaxe

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

, vous pouvez définir la valeur par défaut des paramètres formels. et aussi vérifier la valeur non définie en utilisant la fonction typeof .

2
répondu sachin kumar 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
répondu TinhNQ 2018-06-08 08:55:11

ES6: comme déjà mentionné dans la plupart des réponses, dans ES6, vous pouvez simplement initialiser un paramètre avec une valeur.


ES5: la plupart des réponses données ne sont pas assez bonnes pour moi parce qu'il y a des occasions où je pourrais avoir à passer des valeurs de falsey telles que 0 , null et undefined à une fonction. Pour déterminer si un paramètre n'est pas défini, parce que c'est la valeur que j'ai passé au lieu de non défini dû à n'ont pas été définis du tout je fais ceci:

function foo (param1, param2) {
   param1 = arguments.length >= 1 ? param1 : "default1";
   param2 = arguments.length >= 2 ? param2 : "default2";
}
2
répondu Angel Politis 2018-08-12 05:26:12

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

ici foo () est une fonction qui a un paramètre nommé argValue. Si nous ne passons rien dans l'appel de fonction ici, alors la fonction throwIfNoValue () sera appelée et le résultat retourné sera assigné au seul argument argValue. C'est ainsi qu'un appel de fonction peut être utilisé comme paramètre par défaut. Ce qui rend le code plus simple et lisible.

cet exemple est tiré d'ici

1
répondu dutta 2018-07-01 08:50:53

Si vous utilisez ES6+ vous pouvez définir les paramètres par défaut de la manière suivante:

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

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

si vous avez besoin de la syntaxe ES5 vous pouvez le faire de la manière suivante:

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

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

dans la syntaxe ci-dessus, l'opérateur OR est utilisé. L'opérateur OR renvoie toujours la première valeur si celle-ci peut être convertie en true sinon retourne le righthandside valeur. Lorsque la fonction est appelée sans argument correspondant, la variable de paramètre ( bar dans notre exemple) est définie à undefined par le moteur JS. undefined est alors converti en faux et ainsi l'opérateur OR renvoie la valeur 0.

1
répondu Willem van der Veen 2018-08-08 15:48:37

utilisez ceci si vous voulez utiliser la dernière ECMA6 syntaxe:

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

on l'appelle default function parameters . Il permet aux paramètres formels d'être initialisés avec des valeurs par défaut si aucune valeur ou non définie n'est passée. NOTE : il ne fonctionnera pas avec Internet Explorer ou des navigateurs plus anciens.

pour le maximum possible compatibilité utilisez ceci:

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

les deux fonctions ont exactement le même comportement que chacun de ces exemples reposent sur le fait que la variable paramètre sera undefined si aucune valeur de paramètre n'a été passée lors de l'appel de cette fonction.

0
répondu BlackBeard 2018-07-05 11:54:50
def read_file(file, delete_after = false)
  # code
end

code suivant peut fonctionner dans cette situation, y compris ECMAScript 6 (ES6) ainsi que des versions précédentes.

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

comme valeur par défaut dans les langues fonctionne lorsque la valeur du paramètre de la fonction est sautée lors de l'appel, en JavaScript il est assigné à Non défini . Cette approche ne semble pas attrayante programmatically mais ont rétrocompatibilité .

0
répondu Muhammad Rizwan 2018-09-24 23:02:55

Oui, ceci est considéré comme un paramètre par défaut

Les paramètres de fonction par défaut

permettent d'initialiser des paramètres formels avec des valeurs par défaut si aucune valeur ou non définie n'est transmise.

syntaxe:

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

Description:

Paramètres des fonctions par défaut à non défini cependant, dans les situations, il pourrait être utile de définir une valeur par défaut différente. C'est là les paramètres par défaut peuvent aider.

dans le passé, la stratégie générale pour définir les valeurs par défaut était de tester les valeurs des paramètres dans le corps de la fonction et d'attribuer une valeur si elles ne sont pas définies. Si aucune valeur n'est fournie dans l'appel, sa valeur ne sera pas défini. Vous devez configurer un contrôle conditionnel pour vous assurer que le paramètre n'est pas indéfini

avec les paramètres par défaut dans ES2015, le contrôle dans le corps de la fonction n'est plus nécessaire. Maintenant, vous pouvez suffit de mettre une valeur par défaut dans la fonction de la tête.

exemple des différences:

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

Exemples De Syntaxe Différents:

Padding pas défini par rapport à d'autres falsy valeurs:

même si la valeur est définie explicitement lors de l'appel, la valeur de l'argument num est celle par défaut.

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)

Évalué à l'heure de l'appel:

le l'argument par défaut est évalué au moment de l'appel, donc contrairement à d'autres langues, un nouvel objet est créé chaque fois que la fonction est appelée.

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

les paramètres par défaut sont disponibles pour les paramètres par défaut ultérieurs:

les paramètres déjà rencontrés sont disponibles pour les paramètres par défaut ultérieurs

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.')

fonctions définies à l'intérieur du corps de fonction:

introduit dans le Gecko 33 (Firefox 33 / Thunderbird 33 / SeaMonkey 2.30). Les fonctions déclarées dans le corps de la fonction ne peuvent pas être référencées à l'intérieur des paramètres par défaut et lancer une ReferenceError (actuellement une TypeError dans SpiderMonkey, voir bogue 1022967). Les paramètres par défaut sont toujours exécutés en premier, les déclarations de fonction à l'intérieur du corps de fonction évaluent ensuite.

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

paramètres sans défaut après paramètres par défaut:

avant Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2), le code suivant a donné un SyntaxError. Cela a été corrigé dans le bogue 777060 et fonctionne comme prévu dans les versions ultérieures. Les paramètres sont toujours positionnés de gauche à droite, les paramètres par défaut de réécriture même s'il y a des paramètres plus tard sans défaut.

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

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

paramètre déstructuré avec assignation de valeur par défaut:

vous pouvez utiliser l'assignation de valeur par défaut avec la notation d'assignation de déstructuration

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

f(); // 6
0
répondu esewalson 2018-09-27 16:56:00

Oui, cela fonctionnera en Javascript. Vous pouvez aussi faire cela:

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
répondu Muhammad Awais 2016-07-19 11:59:31