Как проверить наличие свойства в объекте JS

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

Одной из повседневной задачей JS-программистов является проверка на существование свойств. В качестве примера сделаем проверку на возможность использовании технологии WebSocket хранящейся в глобальном объекте бразера — window. JS позволяет делать это по-разному.

Оператор in

Проверка с использованием оператора «in» возвращает true если свойство существует в объекте:

("WebSocket" in window)

Мой однозначный фаворит. Минусы имеются, но лаконичность и простота зашкаливает.

Оператор typeof

Оператор typeof возвращает строковое представление операнда:

(typeof WebSocket !== "undefined")

Проверка на тип чуть-ли не одна из самых важных языковых конструкций JS. И для меня — одна из самых спорных и неуклюжих. Результат оператора нужно явно сравнить со строкой. И именно здесь возникают некоторые сложности понимания.

hasOwnProperty

Метод hasOwnProperty возвращает булево значение определяя наличие свойства в объекте:

(window.hasOwnProperty('WebSocket'))

В отличие от оператора in, этот метод не проверяет объекты по цепочке прототипов.

Array index

Проверка на наличие существование индекса:

(window['WebSocket'] != void 0)

Доступ по индексу возможно самый быстрый из всех представленных. Но он неизящен, груб и просто неудобен.

Проверка элемента дерева

В JavaScript есть два вида равнозначности. Это строгое равенство и идентичность (где интерпретатор сам приведет значение к необходимому типу). Картину усугубляет монстр носящий гордое имя DOM. Он очень сильно расширяет возможности скрипта. В JS, в отличие от того же C# все намного сложнее, здесь делать проверку нужно не только на пустой объект.

jQuery select

jQuery селектинг на несуществующий элемент:

$("#trap")
// []

Здесь мы получили пустой массив. И логично в дальнейшем проверять на наличие хотя бы одного элемента.

Vanilla JS select

В Vanilla JS, результат будет другим:

document.getElementById('trap')
// null

Это пустой результат. Применяя к нему функцию length получим TypeError. Вполне возможно что некоторые фреймворки могут выдать результат селектинга как undefined.