Зарегистрируйтесь для доступа к 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 есть более надежный и более правильный по смыслу способ проверить существование свойства, не сравнивая значения – это метод hasOwnProperty(), доступный в каждом объекте. Вот как меняется функция countFruits(), если использовать это свойство:

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

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

  return result;
};

Но и здесь нас ждет подводный камень. Линтер ругается, если использовать метод hasOwnProperty(). Происходит это из-за возможности случайной перезаписи метода. Для этого достаточно добавить во входной массив значение с именем 'hasOwnProperty':

// Понятно что здесь так никто не сделает,
// но в реальном коде все сложнее и такое запросто может произойти
const bag = ['apple', 'hasOwnProperty', 'pear'];

countFruits(bag); // Boom!

В этом месте все упадет с ошибкой, потому что значение свойства hasOwnProperty было подменено. Продемонстрируем как это работает:

const obj = {};
> obj.hasOwnProperty('key'); // false
obj.hasOwnProperty = 'тут все что угодно'
// или что то же самое
// obj['hasOwnProperty'] = 'тут все что угодно'

obj.hasOwnProperty('key')
// Uncaught TypeError: obj.hasOwnProperty is not a function

Так получается, что в JavaScript нет простого и удобного способа выполнить эту проверку с гарантией 100% безопасности. Те способы, которые предлагает линтер, слишком сложны для такой простой задачи. Поэтому проверку на существование ключа лучше выполнять с помощью библиотеки lodash. Она содержит функцию has(), которая не обладает недостатками встроенных способов:

import _ from 'lodash';

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

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

Конкретно в нашем примере с поиском фруктов, внутри результирующего объекта не может оказаться 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

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

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

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

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

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

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

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

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

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

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

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

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

Есть вопрос или хотите участвовать в обсуждении?

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

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»