Объекты в JavaScript. Основы для начинающих. Синтаксис, создание, изменение. Уроки JavaScript с нуля

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

«Приёмы объектно-ориентированного проектирования. Паттерны проектирования» авторов Эрих Гамма, Ричард Хелм, Ральф Джонсон, Джон Влиссидес или «Объектно-ориентированный анализ и проектирование с примерами приложений» Гради Буча, а также ещё множество других книг.

00:00 - В уроке
00:32 - Создание объекта и его свойств
02:50 - Имена (ключи) свойств объектов
06:39 - Тип данных Symbol
07:23 - Вложенность объектов
08:33 - Значение свойств объекта из переменных
10:04 - Изменение объекта и его свойств
16:18 - Проверка существования свойства объекта
20:24 - Цикл for in
22:34 - Методы объектов. Использование "this"
27:03 - Функции-конструкторы
29:57 - Домашка
30:57 - ООП и заключение

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!

🤟 Живи, а работай в свободное время! ©

[sashadr]

Это единственный канал, который я знаю, где каждый комментарии - это спасибо

[sxgkcww]

Евгений, здравствуйте!
Большое спасибо за урок!

// Домашняя работа. Home work.
// Урок 9. Lesson 9.

// Задача №1
// Верна ли запись?
const userInfo = {
name: "Вася"
age: 30
}
//Ответ:
/*
Не верна. Потому, что после
значений нет запятых.
*/

// Задача №2
// Что будет в консоли?
let userInfo = {
name: "Вася",
age: 30,
"58": 'Значение свойства'
}
console.log(userInfo[58]);
// Ответ:
/*
В консоль будет выведено
сообщение "Значение свойства"
*/

// Задача №3
// Что будет в консоли?
let userInfo = {
name: "Вася",
age: 30
}
let user = userInfo;
user.age = 45; // меняем значение

console.log(userInfo.age);
// Ответ: 45

// Задача №4
// Что будет в консоли?
let userInfo = {
name: "Вася",
age: 30,
showInfo() {
console.log(`${this.name}`);
}
}

let user = userInfo;
userInfo = null;
user.showInfo();
// Ответ: Вася
/*
Потому, что вызываемая функция
находится внутри объекта user (бывший userInfo).
*/

// Задача №5
// Что будет в консоли?
let userInfo = {
name: "Вася",
age: 30,
}
for (const key in userInfo) {
const value = userInfo[key];
console.log(value);
}
// Ответ: Вася 30
/*
Метод for in последовательно выведет
в консоль все значения, находящиеся
внутри объекта userInfo
*/

// Задача №6
// Что будет в консоли?
let userInfo = {
name: "Вася",
age: 30,
address: {
city: "Uzhhorod",
}
}
for (const key in userInfo.address) {
console.log (userInfo.address[key]);
}
// Ответ: Uzhhorod
/*
В консоль будет выведено значение
свойства city. Свойство city вложено в
дочерний объект address.
*/

// Задача №7
// Что будет в консоли?
const userInfo = {
name: "Вася",
age: 30,
"likes js": true
};
console.log(userInfo."likes js");
// Ответ: Нет, запись не верна.
/*
Что бы вызвать многословное свойство нужно
заключить его имя (ключ) в дополнительные
прямые скобки [ ]
*/
// Правильный вариант
const userInfo = {
name: "Вася",
age: 30,
"likes js": false
};
console.log(userInfo["likes js"]);

// Задача №8
/*
1. Создать пустой объект userInfo.
2. Добавить свойство name со значением Вася.
3. Добавить свойство age со значением 30.
4. Изменить значение свойства name на Лена.
5. Удалить свойство name из объекта.
*/

// 1. Создание пустого объекта userInfo:
userInfo = {
}
// вывод значений свойств в консоль
console.log(userInfo);

// 2. Добавление в объект userInfo свойства name со значением Вася:
userInfo = {
name: "Вася",
}
// вывод значений свойств в консоль
console.log(userInfo);

// 3. Добавление в объект userInfo свойства age со значением 30:
userInfo = {
name: "Вася",
age: 30,
}
// вывод значений свойств в консоль
console.log(userInfo);

// 4. Изменение значения для свойства name
userInfo.name = "Лена";
// вывод значений в консоль с учётом изменений
console.log(userInfo);

// 5. Удаление свойства из name из объекта userInfo
delete userInfo.name;
// вывод объекта (значения внутри) в консоль
console.log(userInfo);

[rvgnqns]

Не воспользоваться таким огромным количеством бесплатной информации это грех!
Жека спасибо, таких людей не много)

[khobswv]

Я конечно не експерт, но это мои ответы на задачи(сорри за грамматические ошибки):
1 Нет, там нужно поставить запяту после "name"
2 Значение свойства, ведь "58" = 58 и тем более в [ ]
3 45
потому что объект не копируеться, а создаеться новая ссылка на пару ключ-значение
4 Вася через this сработает
5 Вася и 30 (выводиться значение)
6 Uzhhorod
7 Нет, нужно брать в [ ] что-то такое: console.log(userInfo["likes js"]);
8 let userInfo = {
name: "Вася",
age: 30,
}

userInfo.name = "Лена";
delete userInfo.name;

[igarok]

ребят, давайте поднатужимся, это видео надо вывести в тренды ютуба!!!!

[tazorprod.]

Жека, твои уроки просто чудо. После чтения документации JS у меня остаются вопросы, а твои уроки восполняют пробелы. Спасибо большое за твой труд)

[alexandersukharev]

Очень полезный выпуск, спасибо, давай почаще JS)

[justasparrow]

Спасибо, за урок!) Ты мне уже как старший брат, который меня учит)

[trace]

Дуже дякую Вам за контент! Людина з великої літери. Шкода, що люди не вміють бути вдячними навіть за безкоштовний контент, тим більш, такий якісний. Ще раз дякую Вам!<3
while True:
print("Дякую, Жека!")

[polatzipora]

Случайно нашла какое-то видео по JS на канале, с разницей в пару дней увидела упоминание (в положительном ключе) у Немчинского, просто пишу СПАСИБО.
Учусь в англоязычном Буткемпе на Full Stack и в отличие от БД и Питона, JS --- новая для меня вещь, а с преподавателем конкретно по нему не произошёл мэтч. Зато этот канал ---- попадание в сердечко. Отдельный лайк от меня педагога за домашку. Спасибо! Однозначно, подписка!

[Theonelasthero]

Я это 2 месяца изучал и кодил, а ты за 30 минут все наиподробнейшим образом разобрал))

[jasonborn]

Повторюсь в очередной раз Евгений ты Гений! Спасибо. Тебе нужно преподавать информатику где-нибудь в Оксфорде!) Благодаря твоим курсам многие люди смогут найти работу которые в свою очередь будут поднимать экономику нашей страны в это тяжелое время! Уверен Вселенная отблагодарит тебя за твой нелегкий труд! Спасибо!

[outofrange]

Ты так круто объясняешь, причем иногда рассказываешь детали, про которые никто не говорит. Спасибо! Запиши еще видео про API, промисы и bind, пожалуйста

[stainerframe]

Неймовірно докладне поясненя. Більш детально ні у кого не бачив. Багато чого дізнався нового навіть при тому що більше року пишу на джс. Дякую)

[gfxdzql]

Это просто ВАУ, так доступно рассказать то что я долго-долго пыталась понять сама из разных ресурсов.
Спасибище, добрый чеорвек!
Досматриваю и иду на патреон.

[poihpjh]

Большое спасибо, все очень понятно и качественно. Продолжайте, у Вас отлично получается!

[qnzfjsy]

Спасибо, отличное видео! Когда сначала читаешь, а потом ты рассказываешь-как хлебушек с маслом: идеальная гармония!

[hovsargsyan]

огромное спасибо тебе человек, за твой труд.. пожалуйста делай урок с объяснением алгоритмов, уверен там многие не могут разобраться, в том числе и я. Заранее спасибо огромное :)

[jcyrwzi]

Женя, с прошедшими праздниками. Объекты, ух. Предполагаю что скоро пойдёт уже изучение DOM и браузерные события. Видео супер, все четко и ясно, без воды. Ты объяснил за 30 мин то, что я читал и вникал 3 дня. Жду следующих видео.

[kates]

Класс, за 30 минут рассказано про объекты все то, что я изучала целый день. Спасибо за прекрасный труд🤗)