Я пытаюсь сформулировать историю, чтобы начать этот пост, но я не могу ничего придумать после работы, поэтому здесь ничего не происходит.

function setUser(name, age) {
  // api request with name and age
}

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

если еще

Это, вероятно, самый простой способ сделать это, и он никогда не ошибется, кроме того, что он занимает слишком много строк.

function setUser(name, age) {
  if (!name) {
    name = "Jennifer"
  }

  if (!age) {
    age = 18
  }
}

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

Булев логический оператор

function setUser(name, age) {
  name = name || "Jennifer"
  age = age || 18
}

Здесь мы используем то, как JavaScript понимает истинные и ложные значения. Если значения пусты, то это ложь. При сравнении ИЛИ он будет оценивать первый элемент, если ложно, то оценивает второй и так далее. В этом случае мы оцениваем, является ли имя ложным или пустым (это также могут быть другие значения, такие как 0, но при условии, что это просто строка), если оно пустое, то оцениваем второй элемент, который является фактической строкой. Поскольку эта строка верна, она вернет это значение, поэтому теперь name всегда должно иметь значение.

Тернарный

function setUser(name, age) {
  name = name ? name : "Jennifer"
  age = age ? age : 18
}

Тернар, на мой взгляд, это укороченная версия if/else. Мы оцениваем, является ли имя правдивым, если да, то возвращаем имя или возвращаем строку, которую мы установили. Это кажется чище, чем if/else, а также короче.

Параметры по умолчанию

function setUser(name = "Jennifer", age = 18) {
  // api request with name and age
}

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

Бонус: дополнительная цепочка с нулевым оператором объединения

function setUser(user) {
  const name = user?.name ?? "Jennifer"
  const age = user?.age ?? 18
}

В приведенной выше функции мы ожидаем, что параметр user является объектом и имеет ключи name и age. Но, конечно, иногда его может не быть, поскольку мы не можем контролировать, как люди будут использовать эту функцию. ?. в user?.name означает, что если user определено, но имеет значение null или не определено, то возвращается undefined. если у вас не определен user и вы пытаетесь получить доступ к ключу, вы получите печально известную ошибку:

VM58:1 Uncaught ReferenceError: user is not defined

Этого не произойдет, если использовать необязательную цепочку, ?.. В сочетании с нулевым оператором объединения мы заставляем его возвращать другое значение, если он сначала получает значение null или undefined. В этом случае, если пользователь имеет значение undefined, оно будет оценено как undefined, а затем вернет «Дженнифер».

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

Первоначально опубликовано на https://sdust.dev.