Понимание объектов и работа с ними - важная часть JavaScript, потому что почти все в JavaScript основано на объектах.

Сначала мы рассмотрим теоретическую часть, где я объясню разницу между классовыми и объектно-ориентированными языками программирования, а затем мы рассмотрим практическую часть о том, как в основном работать с объектами.

Теоретическая часть

Если вы работали с такими языками, как Java или PHP, вы уже знаете, что такое язык программирования на основе классов.

В языках на основе классов вы инкапсулируете свою логику в классы, эти классы являются схемами для экземпляров объектов, которые вы создаете из них.

Слева вы видите простой пользовательский класс. Это план для ваших пользовательских объектов. Поле имени является частным и доступно только через методы.

В объектно-ориентированном языке, таком как JavaScript, экземпляр объекта создается из других объектов. Унаследованный вами объект является так называемым прототипом вашего нового объекта. Вот пример:

const user = { name: 'leo' };
const adminUser = Object.create(user);
adminUser.age = 33;
console.dir(adminUser);

Вы можете попробовать запустить код, например, на codepen.io и открыть консоль dev-tools. Вы можете увидеть подробности ниже. Ваш недавно созданный объект adminUser показан с его прототипной (унаследованной) структурой.

Прототипы - это абстракция созданных объектов. В нашем простом примере выше у нас есть две абстракции: предварительная сборка Object.protoytpe и наш объект user.

Объекты могут содержать простые свойства примитивного типа, вы также можете определять подобъекты или функции.

const user = {
  calculateSum: function (operand1, operand2) {
    return operand1 + operand2;
  }, 
  address: {
    street: '',
    city: ''
  }
};
const adminUser = Object.create(user);
console.dir(adminUser);

Каждый новый объект основан на Object.prototype, если вы не укажете свой собственный прототип, как мы сделали для объекта adminUser, или не установили для прототипа значение null.

const adminUser = Object.create(null);
adminUser.age = 33;
console.dir(adminUser);

Вывод на нашей консоли выглядит очень коротким для этого примера, потому что мы установили унаследованный прототип равным null, поэтому наш объект получает только свойство age и ничего больше.

Практическая часть

Как получить объект в собственность?

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

const name = adminUser.name;
console.log(name);
// outputs: > "leo"

Во-вторых, с квадратными скобками, имеет смысл предпочесть этот способ только в том случае, если вам нужно получить свойство динамически.

const propertyName = "age"; // set by a condition 
const age = adminUser[propertyName];
console.log(age);
// outputs: > 33

Мы обращаемся к функции в приведенном ниже коде и передаем два аргумента.

const sum = adminUser.calculateSum(3, 3);
// toString() is a built in function of Object.prototype
console.log(sum.toString()); 
// outputs: > "6"

Сокращенный код для проверки доступности всех свойств во время выполнения для назначения. Если вы создаете объекты динамически вместе, вы должны предотвращать ошибки, проверяя свойства.

const user = {};
const userName = user && user.details && user.details.name;
console.log(userName);
// outputs: > undefined

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

const user = {};
const userName = user?.details?.name;
console.log(userName);
// outputs: > undefined

Я ценю ваш отзыв. Не стесняйтесь начинать разговор и оставлять комментарии. :)

Больше контента на plainenglish.io