Объекты

С возвращением.

В предыдущем уроке ты познакомился с массивами.

Массивы помогают хранить списки значений.

Очень полезно.

Очень мощно.

Очень дружелюбно к квадратным скобкам.

Но иногда простого списка недостаточно.

Например, это нормально:

const user = "Viktor";

Но что делать, если нам нужно больше информации?

Имя.

Возраст.

Email.

Роль.

Страна.

Любимый язык программирования.

Уровень зависимости от кофе.

Одной строки недостаточно.

И здесь появляются объекты.

Объекты помогают хранить структурированные данные.

Вместо того чтобы держать связанную информацию в разных переменных, мы можем хранить её в одном объекте.

Чище.

Умнее.

Меньше хаоса.

JavaScript медленно становится организованным.

Подозрительно организованным.

Что Ты Изучишь

В этом уроке ты изучишь:

что такое объекты;
как создать объект;
как работают свойства и значения;
как получать свойства объекта;
как изменять значения в объекте;
как добавлять новые свойства;
как удалять свойства;
как объекты работают с функциями;
что такое методы;
как использовать объекты с DOM;
как создать маленькую карточку профиля.

В конце этого урока ты поймёшь, как JavaScript описывает вещи из реального мира.

Пользователей.

Товары.

Курсы.

Задачи.

Автомобили.

Котов.

Даже растерянных разработчиков.

Объекты повсюду в JavaScript.

Повсюду.

Как точки с запятой в старых туториалах.

Что Такое Объект?

Объект — это набор связанных данных.

Пример:

const user = {
  name: "Viktor",
  age: 33,
  role: "Developer"
};

У этого объекта есть три свойства:

name
age
role

У каждого свойства есть значение:

Viktor
33
Developer

Структура такая:

property: value

Объекты используют фигурные скобки:

{}

Очень важно.

Массивы используют квадратные скобки:

[]

Объекты используют фигурные скобки:

{}

Разные скобки.

Разная работа.

JavaScript любит скобки.

Может быть, даже слишком.

Создай Проект

Создай папку для этого урока:

mkdir javascript-lesson6
cd javascript-lesson6
touch index.html
touch script.js

Твой проект должен выглядеть так:

javascript-lesson6/
  index.html
  script.js

Открой папку в редакторе.

Мы начнём с консоли.

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

Сегодня без дракона-фреймворка.

Только JavaScript.

Всё ещё странный.

Но полезный.

Напиши HTML

Открой index.html и добавь:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Объекты</title>
</head>
<body>
  <h1>Объекты</h1>
  <p>Открой консоль браузера, чтобы увидеть результат JavaScript.</p>

  <script src="script.js"></script>
</body>
</html>

Открой файл в браузере.

Открой консоль:

нажми правой кнопкой на странице;
выбери Inspect или Проверить;
открой вкладку Console.

Теперь JavaScript готов.

Консоль смотрит.

Снова.

Она, наверное, уже знает слишком много.

Твой Первый Объект

Открой script.js и добавь:

const course = {
  title: "JavaScript",
  level: "Beginner",
  lessons: 12
};

console.log(course);

Обнови браузер.

Ты должен увидеть объект в консоли.

Этот объект представляет курс.

Он имеет:

title: "JavaScript"

level: "Beginner"

lessons: 12

Одна переменная.

Много связанных значений.

В этом сила объектов.

Вместо трёх отдельных переменных:

const title = "JavaScript";
const level = "Beginner";
const lessons = 12;

мы держим всё вместе:

const course = {
  title: "JavaScript",
  level: "Beginner",
  lessons: 12
};

Чище.

Организованнее.

Меньше спагетти.

Больше лазаньи.

Слои.

Порядок.

Профессионализм.

Очень дружелюбно к коду.

И к желудку.

Свойства и Значения

Объекты содержат свойства и значения.

Пример:

const user = {
  name: "Anna",
  age: 25,
  isStudent: true
};

Здесь:

name

это свойство.

"Anna"

это значение.

age

это свойство.

это значение.

isStudent

это свойство.

true

это значение.

Схема всегда такая:

property: value

Между свойствами используются запятые:

const product = {
  name: "Laptop",
  price: 900,
  inStock: true
};

После последнего свойства запятая не обязательна.

Но в современном JavaScript часто можно увидеть и такой вариант:

const product = {
  name: "Laptop",
  price: 900,
  inStock: true,
};

Оба варианта правильные.

JavaScript выживет.

Скорее всего.

Получение Свойств Объекта

Свойства объекта можно получать через точку.

Это называется dot notation.

Пример:

const user = {
  name: "Viktor",
  age: 33,
  role: "Developer"
};

console.log(user.name);
console.log(user.age);
console.log(user.role);

Результат:

Viktor
33
Developer

Dot notation означает:

user.name

“Дай мне свойство name из объекта user.”

Очень читаемо.

Очень распространено.

Очень полезно.

Ещё один пример:

const product = {
  name: "Keyboard",
  price: 49,
  color: "black"
};

console.log(`Product: ${product.name}`);
console.log(`Price: €${product.price}`);

Результат:

Product: Keyboard
Price: €49

Объекты помогают держать связанные данные вместе.

Код становится легче понимать.

А твоё будущее “я” становится немного менее злым.

Bracket Notation

Есть ещё один способ получать свойства.

Bracket notation.

Пример:

const user = {
  name: "Viktor",
  age: 33
};

console.log(user["name"]);
console.log(user["age"]);

Результат:

Viktor
33

Это тоже работает.

Dot notation обычно проще:

user.name

Bracket notation полезна, когда название свойства хранится в переменной.

Пример:

const propertyName = "name";

console.log(user[propertyName]);

Результат:

Viktor

Пока что используй dot notation большую часть времени.

Она чистая.

Она простая.

И не выглядит так, будто JavaScript пытается вызвать демона.

Изменение Значений Объекта

Ты можешь изменить значение свойства.

Пример:

const user = {
  name: "Anna",
  age: 25
};

user.age = 26;

console.log(user);

Результат:

{name: "Anna", age: 26}

Возраст изменился с 25 на 26.

Даже если объект создан через const, ты всё равно можешь изменять его свойства.

Это важно.

const означает, что ты не можешь заменить весь объект.

Но можешь изменять то, что внутри.

Пример:

const user = {
  name: "Anna",
  age: 25
};

user.age = 26;

Это разрешено.

А вот это уже нет:

user = {
  name: "Marco",
  age: 30
};

Это пытается заменить весь объект.

JavaScript будет ругаться.

И честно говоря, в этот раз JavaScript прав.

Добавление Новых Свойств

Ты можешь добавить новое свойство в объект.

Пример:

const user = {
  name: "Viktor",
  age: 33
};

user.role = "Developer";

console.log(user);

Теперь у объекта есть новое свойство:

role: "Developer"

Результат:

{name: "Viktor", age: 33, role: "Developer"}

Это полезно, когда позже появляется больше информации.

Пример:

const product = {
  name: "Mouse",
  price: 25
};

product.inStock = true;

console.log(product);

Объекты гибкие.

Иногда даже слишком гибкие.

Как преподаватель йоги, который ещё и backend знает.

Мощно.

Но немного пугает.

Удаление Свойств

Ты можешь удалить свойство с помощью delete.

Пример:

const user = {
  name: "Anna",
  age: 25,
  password: "secret123"
};

delete user.password;

console.log(user);

Результат:

{name: "Anna", age: 25}

Свойство password было удалено.

Хорошо.

Никогда не выводи пароли в реальных проектах.

Никогда не храни пароли так.

Никогда не доверяй паролю из туториала.

Этот пример только для обучения.

Безопасность — это не декоративное растение.

Она имеет значение.

Объекты и Функции

Объекты очень хорошо работают с функциями.

Пример:

function showUser(user) {
  console.log(`Name: ${user.name}`);
  console.log(`Age: ${user.age}`);
}

const user = {
  name: "Viktor",
  age: 33
};

showUser(user);

Результат:

Name: Viktor
Age: 33

Функция получает объект.

Потом читает свойства из этого объекта.

Это очень часто встречается в реальном JavaScript.

Ещё один пример:

function createProductMessage(product) {
  return `${product.name} costs €${product.price}.`;
}

const product = {
  name: "Keyboard",
  price: 49
};

console.log(createProductMessage(product));

Результат:

Keyboard costs €49.

Объект содержит данные.

Функция использует эти данные.

Чисто.

Просто.

Почти подозрительно нормально.

Методы

Метод — это функция внутри объекта.

Пример:

const user = {
  name: "Viktor",
  sayHello: function () {
    console.log("Hello!");
  }
};

user.sayHello();

Результат:

Hello!

Здесь:

sayHello

это метод.

Потому что это функция, сохранённая внутри объекта.

Также можно использовать данные объекта внутри метода через this.

Пример:

const user = {
  name: "Viktor",
  sayHello: function () {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

user.sayHello();

Результат:

Hello, my name is Viktor.

this.name означает:

“Используй свойство name из этого объекта.”

this может запутывать.

Очень сильно запутывать.

Пока что запомни базовую идею:

Внутри метода объекта this может ссылаться на этот объект.

Не переживай, если это кажется странным.

JavaScript сделал this странным специально.

Возможно, чтобы мы оставались скромными.

Объекты Внутри Массивов

Объекты и массивы часто работают вместе.

Пример:

const products = [
  {
    name: "Laptop",
    price: 900
  },
  {
    name: "Mouse",
    price: 25
  },
  {
    name: "Keyboard",
    price: 49
  }
];

console.log(products[0].name);

Результат:

Laptop

Здесь у нас массив объектов.

Это чрезвычайно распространено.

Очень распространено.

Почти везде распространено.

Список пользователей?

Массив объектов.

Список товаров?

Массив объектов.

Список постов блога?

Массив объектов.

Пример:

for (const product of products) {
  console.log(`${product.name}: €${product.price}`);
}

Результат:

Laptop: €900
Mouse: €25
Keyboard: €49

Это реальный JavaScript.

Данные очень часто приходят как списки объектов.

Не всегда.

Но очень часто.

Привыкай к этому шаблону.

Он будет ходить за тобой.

Как кэш браузера.

Создай Карточку Профиля

Теперь создадим маленькую карточку профиля с помощью объекта.

Обнови index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Объекты</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    h2 {
      font-size: 30px;
      margin-bottom: 8px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }

    .badge {
      display: inline-block;
      padding: 8px 14px;
      border-radius: 999px;
      background-color: #2563eb;
      color: white;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <h1>Объекты</h1>

  <div class="card">
    <h2 id="profileName"></h2>
    <p id="profileRole"></p>
    <p id="profileCountry"></p>
    <span id="profileLevel" class="badge"></span>
  </div>

  <script src="script.js"></script>
</body>
</html>

Теперь обнови script.js:

const profile = {
  name: "Viktor",
  role: "JavaScript Student",
  country: "Italy",
  level: "Beginner"
};

const profileNameElement = document.getElementById("profileName");
const profileRoleElement = document.getElementById("profileRole");
const profileCountryElement = document.getElementById("profileCountry");
const profileLevelElement = document.getElementById("profileLevel");

function showProfile(profile) {
  profileNameElement.textContent = profile.name;
  profileRoleElement.textContent = `Role: ${profile.role}`;
  profileCountryElement.textContent = `Country: ${profile.country}`;
  profileLevelElement.textContent = profile.level;
}

showProfile(profile);

Обнови браузер.

Ты должен увидеть карточку профиля.

JavaScript взял данные из объекта и показал их на странице.

Это важно.

Очень важно.

Потому что многие сайты работают именно так:

данные сохранены в объектах;
JavaScript читает объект;
JavaScript обновляет HTML;
пользователь видит красивый интерфейс.

Объект — это данные.

DOM — это страница.

JavaScript — это официант, который несёт информацию из кухни.

Главное, чтобы не разлил суп.

Как Работает Этот Код

Этот объект хранит данные профиля:

const profile = {
  name: "Viktor",
  role: "JavaScript Student",
  country: "Italy",
  level: "Beginner"
};

Эти строки находят HTML-элементы:

const profileNameElement = document.getElementById("profileName");
const profileRoleElement = document.getElementById("profileRole");
const profileCountryElement = document.getElementById("profileCountry");
const profileLevelElement = document.getElementById("profileLevel");

Эта функция показывает данные из объекта:

function showProfile(profile) {
  profileNameElement.textContent = profile.name;
  profileRoleElement.textContent = `Role: ${profile.role}`;
  profileCountryElement.textContent = `Country: ${profile.country}`;
  profileLevelElement.textContent = profile.level;
}

Это запускает функцию:

showProfile(profile);

Обрати внимание на схему:

Данные живут в объекте.

Функция читает данные.

Страница показывает данные.

Этот шаблон повсюду.

Сейчас простой.

Позже мощный.

Типичные Ошибки

Забыть Запятые Между Свойствами

Неправильно:

const user = {
  name: "Anna"
  age: 25
};

Правильно:

const user = {
  name: "Anna",
  age: 25
};

Используй запятые между свойствами.

JavaScript они нужны.

Он плохо угадывает.

И не читает твою душу.

К счастью.

Использование = Вместо :

Неправильно:

const user = {
  name = "Anna"
};

Правильно:

const user = {
  name: "Anna"
};

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

Не =.

Маленький символ.

Большая разница.

Классическая ловушка JavaScript.

Получение Свойства, Которого Не Существует

Пример:

const user = {
  name: "Anna"
};

console.log(user.email);

Результат:

undefined

Свойства email нет.

JavaScript возвращает undefined.

Снова.

Очень спокойно.

Очень загадочно.

Путать Массивы и Объекты

Массив:

const colors = ["red", "green", "blue"];

Объект:

const user = {
  name: "Anna",
  age: 25
};

Используй массивы для списков.

Используй объекты для структурированных деталей.

Список имён?

Массив.

Один пользователь с множеством деталей?

Объект.

Список пользователей?

Массив объектов.

Это путь.

Практика

Создай объект с названием book.

Он должен содержать:

title;
author;
pages;
isFinished.

Пример:

const book = {
  title: "JavaScript Basics",
  author: "InnoMarts",
  pages: 120,
  isFinished: false
};

Выведи каждое свойство в консоль:

console.log(book.title);
console.log(book.author);
console.log(book.pages);
console.log(book.isFinished);

Потом измени isFinished на true.

book.isFinished = true;

Выведи объект ещё раз.

Сломай его.

Почини его.

Это всё ещё лучший учитель.

Кроме кофе.

Кофе тоже учитель.

Строгий.

Мини-Челлендж

Создай маленькую карточку товара.

Создай объект:

const product = {
  name: "JavaScript Course",
  price: 49,
  category: "Programming",
  available: true
};

Создай HTML с:

названием товара;
ценой;
категорией;
статусом доступности.

Потом создай функцию:

function showProduct(product) {
  // update the page here
}

Если available имеет значение true, покажи:

Available now

Иначе покажи:

Not available

Это очень близко к реальной веб-разработке.

Товары — это объекты.

Пользователи — это объекты.

Заказы — это объекты.

Курсы — это объекты.

Даже баги иногда выглядят как объекты.

Тяжёлые.

Сложные.

Полные свойств, о которых никто не просил.

Итог

Сегодня ты изучил:

объекты хранят структурированные данные;
объекты используют фигурные скобки;
данные хранятся как свойства и значения;
свойства можно получать через dot notation;
свойства также можно получать через bracket notation;
значения в объекте можно изменять;
новые свойства можно добавлять;
свойства можно удалять;
функции могут получать объекты;
методы — это функции внутри объектов;
массивы могут содержать объекты;
объекты могут обновлять DOM.

Это огромный шаг.

Объекты — одна из самых важных частей JavaScript.

Если массивы — это списки, то объекты — это детали.

Вместе они позволяют описывать данные из реального мира.

Пользователя.

Товар.

Курс.

Задачу.

Сообщение.

Очень драматичный банан.

Всё может стать объектом.

JavaScript становится серьёзным.

Всё ещё странным.

Но серьёзным.

Следующий Урок

В следующем уроке мы подробнее изучим DOM.

DOM позволяет JavaScript разговаривать с веб-страницей.

Изменять текст.

Изменять стили.

Создавать элементы.

Реагировать на пользователей.

Короче говоря, DOM — это место, где JavaScript перестаёт быть теорией и начинает трогать страницу.

Осторожно.

Обычно.