📦 Объект в JavaScript - это структура данных, которая позволяет хранить сложные данные: значения разных типов и даже другие объекты. Это делает их незаменимыми в решении многих задач.

🔑 Каждое свойство объекта состоит из ключа (или имени свойства) и значения. Значение свойства может быть любого типа: числом, строкой, булевым значением, другим объектом и даже функцией!

🚪 Для доступа к свойствам объекта мы используем оператор точки (.) или квадратные скобки ([]). Оператор точки используется, когда вы знаете имя свойства, а квадратные скобки - когда имя свойства хранится в переменной или вычисляется динамически.

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

🧑‍🔬 Однако, важно помнить о таком понятии как "ссылочная природа" объектов. Это значит, что если две переменные ссылаются на один и тот же объект, изменения, сделанные через одну переменную, будут видны и через другую.

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

#ОбучающийПост #JavaScript #Objects

📦Создание объектов в JavaScript:

1️⃣Литерал объекта: let newObj = {};
Самый распространенный и простой способ создать объект. Возвращает пустой объект.

2️⃣Конструктор Object: let newObj = new Object();
Этот метод также создает пустой объект. На практике используется реже, так как он длиннее и менее нагляден по сравнению с литеральным способом.

3️⃣Object.create(): let newObj = Object.create(null);
Создает новый объект с указанным прототипом. В данном случае мы создаем объект без прототипа, что может быть полезно для создания чистых карт/словарей.

4️⃣Функция Object без new: let newObj = Object();
Если функцию Object вызвать без оператора new, она также вернет новый объект.

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

#ОбучающийПост #JavaScript #Objects

Когда речь идет о программировании, объекты играют центральную роль во многих языках, включая JavaScript. Но что такое объекты в контексте JS?

1️⃣Что такое объект?
Объект в JavaScript – это коллекция данных и/или функциональности, которая группируется вместе. Эти данные обычно представлены в форме пар "ключ-значение".

2️⃣Прототипы:
В JS каждый объект имеет "прототип". Если вы просите объект что-то сделать или вернуть, и этот объект этого не знает, он "спрашивает" свой прототип. Это основа прототипного наследования в JS.

3️⃣Свойства и методы:
В объектах JS есть два основных типа "вещей": свойства (данные) и методы (функции). Когда мы говорим о "методе объекта", мы имеем в виду функцию, связанную с этим объектом.

4️⃣Не только литералы:
Хотя объекты часто создаются с использованием литеральной нотации (например, { key: 'value' }), в JavaScript существует множество способов создания и работы с объектами.

5️⃣Мутабельность:
По умолчанию объекты в JS являются мутабельными, что означает, что их можно изменять после создания. Однако существуют способы сделать их неизменяемыми.

6️⃣Объекты и память:
Когда вы создаете объект, он занимает место в памяти. Но когда объект больше не нужен и нет ссылок на него, сборщик мусора JS автоматически удаляет его, освобождая память.

7️⃣Богатство методов:
JavaScript предоставляет множество встроенных методов для работы с объектами. Например, вы можете использовать Object.keys() для получения всех ключей объекта или Object.freeze() для того чтобы сделать объект неизменяемым.

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

#ОбучающийПост #JavaScript #Objects

В JavaScript можно "заморозить" объект благодаря методу Object.freeze()

🧊 Как это работает?
Когда объект "заморожен", вы не сможете добавлять, удалять или изменять его свойства. Однако он все равно остается объектом!

🧊 Зачем это нужно?
Это может быть полезно, когда вы хотите убедиться, что никакие другие части вашего кода не изменят ваш объект, предоставляя таким образом дополнительный уровень безопасности вашему коду.

🧊 Как использовать?
Просто передайте свой объект методу Object.freeze() и... все! Ваш объект теперь защищен от изменений.

Не забудьте изучить и другие интересные методы работы с объектами в JS!

#ОбучающийПост #JavaScript #Objects

JavaScript является объектно-ориентированным языком. Но что же это значит?

🔍 Базовое понимание

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

🧩 Примитивы vs Объекты

Примитивные типы: string, number, boolean, null, undefined, и symbol. Они неизменяемы (их значения не могут быть изменены).

Объекты: массивы, функции, регулярные выражения, и, конечно же, объекты. Они изменяемы.

✨ Примитивы в роли объектов

Хотя примитивы и не являются объектами, когда вы пытаетесь обратиться к их свойствам или методам (например, используя метод .toString() с числом), JavaScript "автоматически" преобразует примитив в объект, чтобы временно предоставить доступ к этим методам.

💭 Заключение

Хотя не все типы данных в JavaScript являются объектами в строгом смысле, они могут вести себя как объекты благодаря мощным особенностям языка. Это делает JavaScript уникальным и гибким инструментом для разработки.

#ОбучающийПост #JavaScript #Objects

Нативные и Host-объекты

1️⃣Нативные объекты:

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

🔹Object: Основной объект, на котором построено большинство других объектов.
🔹Date: Объект для работы с датами и временем.
🔹Math: Предоставляет математические функции и константы.
🔹parseInt, eval: И другие глобальные функции и свойства.

Преимущества нативных объектов:

📖Они являются частью стандарта ECMAScript и предоставляют основные функции языка.
🔑Где бы вы ни запускали код на JavaScript, нативные объекты будут доступны.

2️⃣Host-объекты (или объекты хоста):

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

Примеры в браузерной среде:

🔹window: Глобальный объект для браузера.
🔹document: Объект, представляющий текущую веб-страницу.
🔹XMLHttpRequest: Для выполнения асинхронных запросов к серверу.
🔹setTimeout: Позволяет выполнять код через заданный интервал времени.

Что нужно знать про host-объекты:

🛠Они могут сильно отличаться в разных средах выполнения. Например, в Node.js будут другие host-объекты, чем в браузере.
📌Они дополняют возможности языка в конкретной среде, предоставляя доступ к уникальным для этой среды функциям.

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

#ОбучающийПост #JavaScript #Objects

Сравнение объектов в JavaScript

Объекты в JavaScript — это как коробки. Даже если у вас две одинаковые коробки с одинаковым содержимым, это все равно разные коробки.

Представьте, что у вас есть две одинаковые игрушечные машинки. Для вас они кажутся одинаковыми, но каждая из них — уникальная.

const car1 = { model: 'Toyota' };
const car2 = { model: 'Toyota' };

console.log(car1 == car2); //false
console.log(car1 === car2); //false

Теперь представим, что у нас есть еще одна переменная, car3. Вместо того чтобы купить новую машинку, мы просто говорим, что car3 это та же самая машинка, что и car1.

const car3 = car1;
console.log(car1 === car3); //true

Теперь, когда мы сравниваем car1 и car3, они абсолютно одинаковые. Не просто похожие, а одна и та же машинка. В то время как car1 и car2, хоть и выглядят одинаково, на самом деле являются разными машинками.

#JavaScript #обучающийПост #Objects

В JavaScript, объекты работают по принципу ссылочной природы. Это значит, что когда вы присваиваете одну переменную объекта другой, вы фактически передаете ссылку на этот объект, а не создаете его полную копию.

const car1 = { brand: "Toyota", model: "Camry" };
const car2 = car1;

Здесь car2 не является новым объектом, а просто указывает на тот же объект, что и car1. Если мы изменим свойство объекта через car2, это изменение отразится и на car1, потому что они ссылаются на один и тот же объект.

car2.model = "Corolla";
console.log(car1.model); // Выведет "Corolla", а не "Camry"

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

#JavaScript #обучающийПост #Objects

Копирование объектов в JavaScript

Как же всё-таки скопировать объект, чтобы он не ссылался на самого себя?

const car1 = { brand: "Toyota", model: "Camry" };
const car2 = car1;

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

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

Что же делать?

Мы можем "купить" другу точно такую же машину, и тогда они будут похожи, но разными:

const car1 = { brand: "Toyota", model: "Camry" };
const car2 = {...car1};

В этом примере мы "покупаем" новую машину, создавая новый объект, и копируем в него все характеристики из первой машины (друг пошёл и заказал машину, основываясь на детальных фотографиях вашего автомобиля).

Теперь это два абсолютно разных объекта. ОДНАКО это сработает, если в объекте нет вложенных объектов. Вложенный объект - это как бардачок в машине. Продавцы в автосалоне не знают, что лежит в вашем бардачке, и они не смогут скопировать его содержимое, а просто укажут на бардачок друга (сделают ссылку) и у вас будет два одинаковых бардачка, если вы что-то заберете из него, то это пропадет и у друга.

#JavaScript #обучающийПост #Objects #clone #copy

Способы копирования объектов в JavaScript[1]

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

Оператор spread:

const car1 = { brand: "Toyota", model: "Camry" };
const car2 = {...car1};

Ручное копирование:

const car1 = { brand: "Toyota", model: "Camry" };
const car2 = {
brand: car1.brand,
model: car1.model
};

Object.assign():

const car1 = { brand: "Toyota", model: "Camry" };
const car2 = Object.assign({}, car1);

#JavaScript #обучающийПост #Objects #clone #copy #shalowCopy

Способы копирования объектов в JavaScript[2]

🔍 Глубокое копирование - это создание дубликата исходного объекта, при этом копируются не только сам объект и его примитивные свойства, но и все вложенные объекты, массивы, функции, и другие ссылочные типы данных. Это означает, что каждый элемент исходного объекта, включая все уровни вложенности, будет скопирован в новый, независимый объект. Таким образом, изменения в копии не повлияют на исходный объект и наоборот.

Допустим, у нас есть объект машины:

const car1 = {
brand: "Toyota",
model: "Camry",
owner: {
name: "Ruslan",
passport: "AB123456"
}
};

Если мы попробуем просто скопировать этот объект, то получим новую машину, НО владельцем будет все тот же Ruslan с паспортом AB123456. То есть, если мы решим поменять имя владельца car2, то имя владельца car1 также изменится, потому что оба объекта ссылаются на один и тот же объект владельца.

Один из способов сделать глубокую копию:

const stringObj = JSON.stringify(car1);
const car3 = JSON.parse(stringObj);

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

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

#JavaScript #обучающийПост #Objects #clone #copy #deepCopy

Функция для глубокого копирования объектов

1️⃣ Проверка наличия и типа объекта
Проверяем, существует ли obj и является ли он объектом.
Если obj равен null или его тип данных не 'object', функция возвращает obj, не производя дополнительных действий.
Здесь мы гарантируем, что функция будет применена только к объектам или массивам.

2️⃣ Обработка массивов
Устанавливаем, является ли obj массивом.
Создаем новый пустой массив arrCopy и проходим по всем элементам obj. Примитивные значения копируются напрямую, а для объектов вызывается функция deepClone рекурсивно.
Этот этап обеспечивает глубокое копирование каждого элемента массива, включая вложенные объекты и массивы.

3️⃣ Обработка объектов
Если obj не массив, но объект, начинаем процесс копирования объекта.
Создаем пустой объект objCopy. Для каждого свойства obj, проверяем, является ли оно собственным с помощью метода hasOwnProperty. Собственные свойства копируются. Если значение свойства - объект, функция deepClone вызывается рекурсивно.
Так мы гарантируем, что все собственные свойства объекта, включая вложенные объекты, будут глубоко скопированы.

#JavaScript #code #Objects #deepCopy