Знакомство с параметрами JavaScript по умолчанию

Автор выбрал COVID-19 Relief Fund для получения пожертвования в рамках программы Write for DOnations.

Введение

В ECMAScript 2015 были введены параметры функций по умолчанию для языка JavaScript. Они позволяют разработчикам инициализировать функции со значениями по умолчанию, если при вызове функции не указываются аргументы. Такая инициализация параметров функций упрощает чтение функций, снижает вероятность ошибок и задает поведение функций по умолчанию. Это позволит избежать ошибок, вытекающих из передачи неопределенных (undefined​​) аргументов и деструктуризации несуществующих объектов.

В этой статье мы рассмотрим разницу между параметрами и аргументами, узнаем об использовании параметров функций по умолчанию, увидим альтернативные способы поддержки параметров по умолчанию и выясним, какие значения и выражения можно использовать в качестве параметров по умолчанию. Также мы рассмотрим примеры, демонстрирующие работу параметров по умолчанию в JavaScript.

Аргументы и параметры

Прежде чем изучать параметры функций по умолчанию, важно понять, какие значения по умолчанию могут принимать параметры. Поэтому вначале мы рассмотрим разницу между аргументами и параметрами функции. Если вы хотите узнать больше об этом различии, ознакомьтесь с ранее опубликованной в нашей серии JavaScript статьей Определение функций в JavaScript.

В следующем блоке кода мы создадим функцию, возвращающую куб заданного числа, определяемого как x:

// Define a function to cube a number
function cube(x) {
  return x * x * x
}

Переменная x в этом примере является параметром, то есть переменной с именем, которая передается функции. Параметр всегда должен содержаться в переменной и никогда не может иметь прямого значения.

Теперь рассмотрим следующий блок кода, вызывающий созданную нами функцию cube:

// Invoke cube function
cube(10)

Результат будет выглядеть следующим образом:

Output
1000

В данном случае 10 — это аргумент, то есть значение, передаваемое функции при ее вызове. Значение часто может также содержаться в переменной, как показано в следующем примере:

// Assign a number to a variable
const number = 10

// Invoke cube function
cube(number)

Результат будет таким же:

Output
1000

Если вы не передадите аргумент в функцию, которая ожидает его получить, функция будет использовать подразумеваемое значение undefined:

// Invoke the cube function without passing an argument
cube()

Результат будет выглядеть следующим образом:

Output
NaN

В данном случае cube() пытается рассчитать значение undefined * undefined * undefined и получает результат NaN («не число»). Дополнительную информацию можно найти в посвященном числам разделе статьи Типы данных в JavaScript.

Автоматическое поведение иногда может представлять собой проблему. В некоторых случаях параметр должен иметь значение, даже если функции не передается никаких аргументов. В таком случае и будут полезны параметры по умолчанию, о которых мы более подробно расскажем в следующем разделе.

Синтаксис параметра по умолчанию

С добавлением параметров по умолчанию в ES2015 вы можете назначать для любого параметра значение по умолчанию, которое функция будет использовать вместо undefined, если эта функция будет вызвана без аргумента. В этом разделе мы покажем, как сделать это вручную, и поможем вам настроить параметры по умолчанию.

Без параметров по умолчанию нам нужно будет явно проверять наличие значений undefined, чтобы задать значения по умолчанию, как показано в этом примере:

// Check for undefined manually
function cube(x) {
  if (typeof x === 'undefined') {
    x = 5
  }

  return x * x * x
}

cube()

Здесь используется условное выражение для проверки автоматической передачи значения undefined, а затем задается значение x, равное 5. Результат выглядит следующим образом:

Output
125

Использование параметров по умолчанию позволяет добиться того же результата с намного меньшим количеством кода. Вы можете задать значение по умолчанию для параметра функции cube, используя оператор равенства (=), как показано здесь:

// Define a cube function with a default value
function cube(x = 5) {
  return x * x * x
}

Теперь при вызове функции cube без аргумента она будет присваивать значение 5 переменной x и выводить результат расчета вместо NaN:

// Invoke cube function without an argument
cube()

Output
125

При наличии аргумента функция будет выполняться обычным образом, игнорируя значение по умолчанию:

// Invoke cube function with an argument
cube(2)

Output
8

Однако стоит отметить, что значение параметра по умолчанию также заменяет явно переданный функции аргумент undefined, как показано в этом примере:

// Invoke cube function with undefined
cube(undefined)

В результате будет провизведен расчет с переменной x, равной 5:

Output
125

В этом случае были рассчитаны значения для параметра по умолчанию, и явно переданное значение undefined не заменило этот параметр.

Вы получили представление о базовом синтаксисе параметров по умолчанию, и в следующем разделе мы покажем, как параметры по умолчанию работают с разными типами данных.

Типы данных параметров по умолчанию

Любое примитивное значение или объект можно использовать в качестве значения параметра по умолчанию. В этом разделе вы увидите, как подобная гибкость расширяет возможности использования параметров по умолчанию.

Задайте параметры, используя число, строку, логическое значение, объект, массив и нулевое значение в качестве значения по умолчанию. В этом примере будет использоваться синтаксис функции arrow:

// Create functions with a default value for each data type
const defaultNumber = (number = 42) => console.log(number)
const defaultString = (string = 'Shark') => console.log(string)
const defaultBoolean = (boolean = true) => console.log(boolean)
const defaultObject = (object = { id: 7 }) => console.log(object)
const defaultArray = (array = [1, 2, 3]) => console.log(array)
const defaultNull = (nullValue = null) => console.log(nullValue)

При вызове этих функций без параметров будут использоваться значения по умолчанию:

// Invoke each function
defaultNumber()
defaultString()
defaultBoolean()
defaultObject()
defaultArray()
defaultNull()

Output
42
"Shark"
true
{id: 7}
(3) [1, 2, 3]
null

Любой объект, создаваемый в параметре по умолчанию, будет создаваться при каждом вызове функции. Часто такое поведение параметров по умолчанию используется для получения значений из объекта. Если вы пытаетесь провести деструктурирование или получить значение из несуществующего объекта, будет выведена ошибка. Если же параметр по умолчанию представляет собой пустой объект, он просто выдаст значения undefined вместо ошибки:

// Define a settings function with a default object
function settings(options = {}) {
  const { theme, debug } = options

  // Do something with settings
}

Это позволяет избежать ошибок, вызванных деструктурированием несуществующих объектов.

Вы увидели, как параметры по умолчанию работают с разными типами данных. В следующем разделе мы объясним, как можно совместно использовать разные параметры по умолчанию.

Использование нескольких параметров по умолчанию

Вы можете использовать в функции любое желаемое количество параметров по умолчанию. В этом разделе мы покажем, как сделать это и как использовать такую схему для манипуляций с DOM в реальном примере.

Вначале декларируем функцию sum() с несколькими параметрами по умолчанию:

// Define a function to add two values
function sum(a = 1, b = 2) {
  return a + b
}

sum()

По умолчанию производится следующий расчет:

Output
3

Кроме того, значение параметра может использоваться в любом последующем параметре по умолчанию, слева направо. Например, данная функция createUser создает пользовательский объект userObj как третий параметр, и функция просто возвращает userObj с первыми двумя параметрами:

// Define a function to create a user object using parameters
function createUser(name, rank, userObj = { name, rank }) {
  return userObj
}

// Create user
const user = createUser('Jean-Luc Picard', 'Captain')

Если вы вызовете user, вы получите следующий результат:

Output
{name: "Jean-Luc Picard", rank: "Captain"}

Обычно рекомендуется размещать все параметры по умолчанию в конце списка параметров, чтобы можно было легко опускать необязательные значения. Если вы используете параметр по умолчанию первым, вам нужно будет явно передать undefined для использования значения по умолчанию.

Вот пример с параметром по умолчанию в начале списка:

// Define a function with a default parameter at the start of the list
function defaultFirst(a = 1, b) {
  return a + b
}

При вызове этой функции нужно вызвать defaultFirst() с двумя аргументами:

defaultFirst(undefined, 2)

Результат будет выглядеть следующим образом:

Output
3

Вот пример с параметром по умолчанию в конце списка:

// Define a function with a default parameter at the end of the list
function defaultLast(a, b = 1) {
  return a + b
}

defaultLast(2)

В результате будет получено то же значение:

Output
3

Обе функции дают один и тот же результат, однако функция, где значение по умолчанию указано последним, вызывается намного удобнее.

Приведем реальный пример функции, которая создает элемент DOM и добавляет текстовый ярлык и классы, если они существуют.

// Define function to create an element
function createNewElement(tag, text, classNames = []) {
  const el = document.createElement(tag)
  el.textContent = text

  classNames.forEach(className => {
    el.classList.add(className)
  })

  return el
}

Вы можете вызвать функцию с несколькими классами в массиве:

const greeting = createNewElement('p', 'Hello!', ['greeting', 'active'])

При вызове greeting значение будет следующим:

Output
<p class="greeting active">Hello!</p>

Если вы оставите массив classNames вне вызова функции, функция все равно сработает.

const greeting2 = createNewElement('p', 'Hello!')

greeting2 теперь имеет следующее значение:

Output
<p>Hello!</p>

В этом примере forEach() можно вызвать для пустого массива без каких-либо проблем. Если бы пустой массив не был задан в параметре по умолчанию, мы получили бы следующее сообщение об ошибке:

Output
VM2673:5 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at createNewElement (<anonymous>:5:14)
    at <anonymous>:12:18

Мы увидели, как могут взаимодействовать разные параметры по умолчанию, и теперь можем перейти к следующему разделу и посмотреть, как работают вызовы функций в качестве параметров по умолчанию.

Вызовы функций как параметры по умолчанию

Помимо примитивов и объектов, в качестве параметра по умолчанию можно использовать результат вызова функции.

В этом блоке кода мы создадим функцию, возвращающую случайное число, и используем результат как значение параметра по умолчанию для функции cube:

// Define a function to return a random number from 1 to 10
function getRandomNumber() {
  return Math.floor(Math.random() * 10)
}

// Use the random number function as a default parameter for the cube function
function cube(x = getRandomNumber()) {
  return x * x * x
}

Теперь при каждом вызове функции cube без параметра результаты могут отличаться:

// Invoke cube function twice for two potentially different results
cube()
cube()

Вывод вызова этих функций будет отличаться:

Output
512
64

Вы также можете использовать встроенные методы, такие как в объекте Math, и использовать значение, возвращаемое при вызове одной функции, в качестве параметра для другой функции.

В следующем примере в качестве значения x назначается случайное число, которое используется как параметр для созданной нами функции cube. Параметр y рассчитывает кубический корень числа и проверяет равенство x и y:

// Assign a random number to x
// Assign the cube root of the result of the cube function and x to y
function doesXEqualY(x = getRandomNumber(), y = Math.cbrt(cube(x))) {
  return x === y
}

doesXEqualY()

В результате вы получите следующий вывод:

Output
true

Параметр по умолчанию даже может представлять собой определение функции, как видно в этом примере, где параметр определяется как внутренняя функция и возвращается вызов функции parameter:

// Define a function with a default parameter that is an anonymous function
function outer(
  parameter = function inner() {
    return 100
  }
) {
  return parameter()
}

// Invoke outer function
outer()

Output
100

Внутренняя функция создается с нуля каждый раз при вызове внешней функции.

Заключение

Из этой статьи вы узнали, что представляют собой параметры функций по умолчанию и как их использовать. Теперь вы можете использовать параметры по умолчанию для оптимизации функций и повышения удобства их чтения. Также вы можете назначать для параметров пустые объекты и массивы, чтобы уменьшить сложность и оптимизировать код в таких ситуациях, как извлечение значений из объекта или применение цикла к массиву.

Если вы хотите узнать больше о JavaScript, перейдите на главную страницу нашей серии материалов Написание кода на JavaScript или перейдите к нашей серии Написание кода на Node.js для изучения материалов по серверной разработке.