Проверка существования свойства — JS: Объекты

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

if (obj.key === undefined) {
  // логика
}

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

// Вход

const fruits = [
  'apple', 'banana', 'pear',
  'apricot', 'apple', 'banana',
  'apple', 'orange', 'pear',
]

// Выход

const result = {
  apple: 3,
  banana: 2,
  pear: 2,
  orange: 1,
  apricot: 1,
}

Алгоритм ее работы достаточно прост, но есть один тонкий момент. Во время обхода массива эта функция берет объект-результат, извлекает из него нужное свойство и увеличивает значение на единицу. Но это в случае, когда свойство уже есть. А если его нет? Так как изначально объект-результат пустой, то когда элемент массива появляется первый раз, в объекте нужно создавать соответствующее свойство со значением 1. Посмотрите на реализацию:

const countFruits = (fruits) => {
  const result = {}

  for (const name of fruits) {
    // Проверка на существование
    if (result[name] === undefined) {
      result[name] = 1
    }
    else {
      result[name] += 1
    }
  }

  return result
}

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

const obj = {
  key: doSomething(),
}

В примере выше значением key станет результат вызова функции doSomething(). Если эта функция может вернуть undefined, то окажется, что в объекте ключ key определен, но его значение undefined.

В JavaScript есть более надежный и более правильный по смыслу способ проверить существование свойства, не сравнивая значения – это метод Object.hasOwn(). Вот как меняется функция countFruits(), если использовать этот метод:

const countFruits = (fruits) => {
  const result = {}

  for (const name of fruits) {
    // Проверка на существование
    if (Object.hasOwn(result, name)) {
      result[name] += 1
    }
    else {
      result[name] = 1
    }
  }

  return result
}

Оператор нулевого слияния

Конкретно в нашем примере с поиском фруктов внутри результирующего объекта не может оказаться undefined просто так в качестве значения. Там всегда будет какое-то число, начиная от единицы. Более того, даже проверка на наличие значения лишняя. Всё, что нам нужно – извлекать текущее значение с возможностью задать значение по умолчанию. Сделать это можно, воспользовавшись оператором нулевого слияния. Он позволяет задать значение по умолчанию в случае, когда оно равно null или undefined.

let value

value ?? 'wow' // 'wow'

value = null
value ?? 'wow' // 'wow'

value = true
value ?? 'wow' // true

for (const name of fruits) {
  result[name] = (result[name] ?? 0) + 1
}

Дополнительные материалы

1. Функция has из библиотеки Lodash
2. Оператор for...of