Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

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

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

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

// Вход

const bag = [
  '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

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов для веб-приложений
6 октября 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов для веб-приложений
6 октября 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
6 октября 16 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»