MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

Типові параметри функції забезпечують ініціалізацію формальних параметрів типовими значеннями, якщо відповідні параметри відсутні чи передано значення undefined.

Синтаксис

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

Опис

Зазвичай в JavaScript типовим значенням параметра є undefined. Втім, інколи може стати в нагоді можливість вказати інше типове значення. Саме для цього призначені типові параметри.

Раніше поширеною практикою було перевіряти значення формальних параметрів всередині функції і підміняти їх власними (типовими) значеннями, якщо вони дорівнюють undefined. В наступному прикладі відсутність параметра b у виклику функції multiply означає, що він матиме значення undefined всередині функції, а отже добуток a * b мав би дорівнювати NaN. Проте, другий рядок в наведеному коді дозволяє цього уникнути:

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

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

Оскільки ES2015 надає можливість вказати типові параметри, перевірка всередині функції вже не потрібна. Достатньо лише вказати 1 як типове значення параметра b в заголовку функції. Те саме, але більш стисло і охайно:

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

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

Приклади

Passing undefined

In the second call here, even if the second argument is set explicitly to undefined (though not null) when calling, the value of the color argument is the default one.

function setBackgroundColor(element, color = 'rosybrown') {
  element.style.backgroundColor = color;
}

setBackgroundColor(someDiv);            // color set to 'rosybrown'
setBackgroundColor(someDiv, undefined); // color set to 'rosybrown' too
setBackgroundColor(someDiv, 'blue');    // color set to 'blue' 

Evaluated at call time

The default argument gets evaluated at call time, so unlike e.g. in Python, a new object is created each time the function is called.

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

Default parameters are available to later default parameters

Parameters already encountered are available to later default parameters:

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

This functionality is approximated in a straight forward fashion and demonstrates how many edge cases are handled.

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, "=^_^="]

Functions defined inside function body

Introduced in Gecko 33 (Firefox 33 / Thunderbird 33 / SeaMonkey 2.30). Functions declared in the function body cannot be referred inside default parameters and throw a ReferenceError (currently a TypeError in SpiderMonkey, see bug 1022967). Default parameters are always executed first, function declarations inside the function body evaluate afterwards.

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

Parameters without defaults after default parameters

Prior to Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2), the following code resulted in a SyntaxError. This has been fixed in bug 777060 and works as expected in later versions. Parameters are still set left-to-right, overwriting default parameters even if there are later parameters without defaults.

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

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

Destructured parameter with default value assignment

You can use default value assignment with the destructuring assignment notation:

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

f(); // 6

Специфікації

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Function Definitions' in that specification.
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Function Definitions' in that specification.
Living Standard  

Підтримка веб-переглядачами

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 49 38 (14.14342) 15.0 (15.0) No support 45 10
Parameters without defaults after default parameters 49 38 (14.14342) 26.0 (26.0) No support ? 10
Destructured parameter with default value assignment 49 ? 41.0 (41.0) No support ? ?
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support 49 (Yes) 15.0 (15.0) No support No support No support 49
Parameters without defaults after default parameters No support 49 (Yes) 26.0 (26.0) ? ? ? 49
Destructured parameter with default value assignment No support ? ? 41.0 (41.0) ? ? ? ?

Див. також

Мітки документа й учасники

 Зробили внесок у цю сторінку: asmforce
 Востаннє оновлена: asmforce,