Проверка наличия свойства в JavaScript

• Зачем проверять наличие свойства
• Проверка через оператор in
• Имя свойства в переменной
• Почему undefined не всегда подходит
• Проверка собственных свойств
• Проверка перед использованием
• Что выбрать
• Итого

Иногда перед работой со свойством нужно понять, есть ли оно в объекте. Например, пришли данные о пользователе, но часть полей может отсутствовать.

let user = {
  name: 'Анна',
  age: 28,
};

console.log('name' in user); // true
console.log('email' in user); // false

Свойство name есть в объекте, а свойства email нет.

Зачем проверять наличие свойства

Проверка нужна, когда объект может иметь разную структуру.

let settings = {
  theme: 'dark',
};

if ('theme' in settings) {
  console.log('Тема указана');
}

Если свойство есть, можно выполнить код, который с ним работает.

Такой подход часто встречается при работе с настройками, ответами сервера, формами и любыми объектами, где не все поля обязательны.

Проверка через оператор in

Основной способ проверить наличие свойства - оператор in.

'propertyName' in object

Слева записывается имя свойства, справа - объект.

let user = {
  name: 'Анна',
  age: 28,
};

console.log('age' in user); // true
console.log('city' in user); // false

in проверяет именно наличие свойства, а не то, какое значение в нем хранится.

Имя свойства в переменной

Если имя свойства хранится в переменной, кавычки не нужны.

let user = {
  name: 'Анна',
  age: 28,
};

let field = 'age';

console.log(field in user); // true

JavaScript берет значение переменной field и проверяет, есть ли свойство с таким именем в объекте user.

Если поставить кавычки, проверяться будет уже не значение переменной, а свойство с именем ‘field’.

let field = 'age';

console.log('field' in user); // false

Почему undefined не всегда подходит

Иногда свойство проверяют через сравнение с undefined.

let user = {
  name: 'Анна',
};

console.log(user.email === undefined); // true

Такой способ показывает, что при обращении к user.email мы получаем undefined. Но это не всегда означает, что свойства нет.

let user = {
  name: 'Анна',
  email: undefined,
};

console.log(user.email === undefined); // true
console.log('email' in user); // true

Свойство email есть в объекте, просто его значение равно undefined.

Поэтому, если важно проверить именно наличие свойства, лучше использовать in.

Проверка собственных свойств

Оператор in учитывает не только свойства самого объекта, но и свойства, которые доступны через прототип.

let user = {
  name: 'Анна',
};

console.log('name' in user); // true
console.log('toString' in user); // true

Свойство toString мы не добавляли в объект user, но оно доступно через прототип.

Если нужно проверить, что свойство находится именно в самом объекте, можно использовать Object.hasOwn().

let user = {
  name: 'Анна',
};

console.log(Object.hasOwn(user, 'name')); // true
console.log(Object.hasOwn(user, 'toString')); // false

Для обычных учебных примеров часто хватает in. Object.hasOwn() полезен, когда важно отделить собственные свойства объекта от свойств прототипа.

Проверка перед использованием

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

let user = {
  name: 'Анна',
};

if ('email' in user) {
  console.log(user.email);
} else {
  console.log('Email не указан');
}

Так код явно показывает, что свойство может отсутствовать.

Если нужно проверить вложенное свойство, сначала стоит убедиться, что существует объект, внутри которого оно лежит.

let user = {
  name: 'Анна',
  contacts: {
    email: 'anna@example.com',
  },
};

if ('contacts' in user && 'email' in user.contacts) {
  console.log(user.contacts.email);
}

Здесь сначала проверяется contacts, и только потом email внутри contacts.

Что выбрать

Если нужно узнать, есть ли свойство в объекте, используйте in.

'name' in user

Если нужно проверить только собственное свойство объекта, используйте Object.hasOwn().

Object.hasOwn(user, 'name')

Если нужно проверить значение свойства, тогда уже можно сравнивать его с undefined, null или другим ожидаемым значением.

user.email === undefined
user.email === null

Итого

• in проверяет, есть ли свойство в объекте.
• Имя свойства слева от in обычно записывают строкой.
• Если имя свойства лежит в переменной, кавычки не нужны.
• Проверка через undefined не всегда показывает отсутствие свойства.
• Object.hasOwn() проверяет, что свойство принадлежит самому объекту.