Объекты. Свойства.

Всем привет, сегодня пойдет речь об объектах.

Что такое объекты, зачем они нужны, как их создавать и изменять – обо всем этом в этой статье.

Ранее в статьях мы рассматривали примитивные типы (исключением являются массивы). Эти типы важны и нужны, но так как язык JavaScript является объектно-ориентированным(ООП), и в нем часто используются ООП-подходы, то не знать о объектах и не уметь ими пользоваться – огромный пробел в знаниях.

Объект – это сложная сущность, которая может хранить в себе целый набор различных данных состоящих из примитивных значений, массивов, функций.

Как создать объект?

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

const cat = new Object();
const cat = {};

Синтаксис 1-ого варианта называется конструктором объекта, а 2-ого – литералом объекта(или литеральной нотацией).

Каким вариантом пользоваться? Чаще всего в реальных проектах ты сможешь увидеть 2-ой вариант, т.е. const cat = {};

Какие же преимущества есть у объекта? Представим, что мы хотим в коде записать информацию о твоем коте "Ваське". К примеру нам нужна следующая информация: кличка, возраст, цвет, вес.

Как бы ты сейчас стал записывать в коде эти данные? Скорее всего, примерно так:

let catName = 'Васька';
let catAge = 2;
let catColor = 'рыжий';
let catWeight = 3;

Для того, чтобы записать информацию о котике, мы создали целых 4 переменных. А представь, если тебе нужно будет заполнить данные о каком-то сложном объекте, к примеру о автомобиле, который имеет огромную гору различных характеристик. Создавать 100500 переменных – это очень плохо, как минимум потому, что ты запутаешься в этих переменных очень быстро.

Если ты думаешь, что не запутаешься, то представь, что тебе нужно заполнить информацию о трех автомобилях, когда у каждого нужно заполнить по 50 характеристик. Таким методом, на 3 автомобиля у тебя получится 150 переменных. Не хило, неправда ли?

А теперь давай представим, что у тебя есть возможность вместо 150 переменных использовать только 3. Как тебе такой вариант? Я думаю, что куда лучше и проще.

Вернемся к Васе. Создаем объект для нашего котика:

const catVasya = {
   name: 'Вася',
   age: 2,
   color: 'рыжий',
   weight: 3
};

Вуаля, вместо 4-ех переменных получили всего одну с именем cat. Теперь для того, чтобы вытащить какое-то значение из объекту нужно всего лишь обратится к нужному полю в объекте. Например, мы хотим получить цвет кота из этого объекта:

catVasya.color;

Нужно написать название объекта и через точку указать нужное поле.

Свойства объекта

На самом деле то, что выше я называл "полями" в объекте называется свойствами. В свойстве могут хранится любые примитивные данные(строки, числа, булевские значения) и другие объекты(массивы в JS – тоже имеют тип Object) .

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

{
  имяСвойства: 'значение свойства',
  имяСвойства2: 5,
  имяСвойства3: true,
  имяСвойства4: ['а', 'б', 'в'],
  имяСвойства5: { 
     //здесь указать свойства другого объекта
  }
}

Как видишь, мы можем записать в свойство объекта любой валидный тип данных, хоть примитивы, хоть массивы, хоть другие объекты.

Свойства в обязательном порядке разделяются друг от друга запятой.

Хочу обратить внимание, что имя свойства внутри объекта можно определять как в кавычках, так и без них. Посмотри эти 2 скриншота:

На скриншотах показан один и тот же объект, но с разным подходом в определении имени свойств. Какой правильный?

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

Почему? Все просто. Кавычки стоит использовать только тогда, когда ты хочешь задать "необычное" название для свойства. Например:

Я добавил котику свойство с именем other prop , при этом я отошел от хороших практик JS и не использовал стиль camelCase, а просто разделил эти слова пробелом. Самое интересное, что не будет никакой ошибки, если такое имя свойства указать в кавычках. Но, если их убрать, то, конечно же, все сломается и объект будет определен некорректно.

При этом, если сейчас обратиться к новому свойству через символ точки:

catVasya.other prop;

Мы получим ошибку по той простой причине, что JS просто не поймет, что ты хотел обратиться к этому свойству. Потому что для JS это будет выглядеть как то, что ты пытаешься обратиться к свойству объекта catVasya с именем other, затем ставишь пробел и пытаешься обратится к переменной prop, которая не определена.

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

catVasya['other prop'];

Данный случай разобран только для примера! Никогда, слышишь!? Никогда не использую в названии свойств объекта символ пробела! Это очень-очень плохо!

Вычисляемые свойства

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

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

Давай будем просить пользователя вводить имя свойства и его значение:

let propName = prompt('Введи название свойства', 'tailLength');
let propValue = prompt('Введи значение свойства', 20);

Мы завели переменные с именами propName и propValue. Оператор prompt спросит у пользователя как назвать свойство и какое значение в него положить.

По умолчанию(если пользователь ничего не укажет), мы запишем свойств tailLength, что означает "длина хвоста" и передадим в него значение 20.

Давай попробуем добавить данное свойство в объект. Для этого нужно при определении имени свойства обернуть переменную propName в квадратные скобки и тогда значение этой переменной будет указано как имя свойства объекта, а в само значение свойства нам нужно просто записать переменную propValue :

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

Именование свойств объекта

Важным аспектом является именование свойств объекта. Есть правило, которое говорит о том, что имена свойств должны быть указаны как имена существительные. В нашем примере это: name – имя, age – возраст, color – цвет, weight – вес.

Здесь очень просто провести аналогию. Свойство любого реального объекта – это какое-либо описание этого объекта: цвет, возраст, рост, запах, вкус и т.д. Все это и всегда является именами существительными.

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

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

Но, о функция внутри объекта – в следующей статье.

Домашнее задание

Создать объект "игрушка"
Добавить этому объекту свойства "имя", "материал"
Добавить в объект вычисляемое свойство, в котором будет содержаться цена на игрушку.