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

Раньше делали так (spread оператор):
[...people].sort()

Теперь же можно делать так:
people.toSorted()

#code #JavaScript #Array #methods

#stack #technologies #facebook #meta

Всем привет! Я придумал как у нас пройдёт добавление TypeScript в проект.

Первая серия будет до 10 минут. В этой серии мы установим зависимости, добавим конфиги.

Вторая серия будет до 15 минут. Мы поменяем расширения всех файлов.

И наконец, я подумал сделать курс по TypeScript. Третье видео будет длинным, 1 - 1,5 часа. Я разобью его на логические подтемы и также как и в курсе React, мы поэтапно будет знакомиться с ТС и добавлять его в наш реальный проект.

В основном во всех видео по ТС используют простые маленькие приложения, я считаю, что это не совсем удачный выбор. У нас же, должно быть все логично. У нас есть приложение, есть задача, а не кошечки-собачки, или todo листы.

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

TypeScript в каждый дом!✊🏼

Осталось немного! Скоро на канале!

Видео на канале! Решил поэкспериментировать с обложкой😆

https://youtu.be/8PHd9LOrKbw

#roadmap #react #frontend

Почему NaN не равно самому себе?

Это достаточно логично🤔

Представьте, что вы пытаетесь сравнить два неопределенных результата. Если бы NaN был равен NaN, это могло бы дать ложное впечатление, что две неопределенные операции привели к одному и тому же результату, хотя на самом деле каждая из них неопределенна по-своему.

То есть, например, вам 25 лет, вашему другу тоже 25. Вы одного возраста.
Если вам 25, а другу 21, то вы старше друга.

Но если при подсчете возраста была допущенна ошибка, и у вас NaN и у вашего друга NaN, то как мы можем утверждат, что вы одного возраста, если мы не знаем по сколько вам лет?

Следовательно NaN не может быть равным самому себе

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

Как вам карточка? Новый дизайн, весь вечер придумывал😄

1 - Стало
2 - Было

Вообще идей нет, тяжко придумывать.

Интересный дизайн? Залипательно?

В JavaScript есть значения, которые, если их проверить как условие, окажутся "правдивыми" или "ложными". Так, когда вы делаете что-то вроде if (значение) {...}, это значение автоматически проверяется на "правдивость" или "ложность".

🔴 Будут ложными (false):

Пустая строка ""
Числа 0, -0 и NaN
null и undefined
Само логическое значение false

🟢 Будут правдивыми (true):

Любая непустая строка, типа "hello"
Любое не нулевое число, например 42
Массивы, даже пустые: [] или [1, "2", 3]
Объекты, даже пустые: {} или { a: 42 }
Функции: function foo() { .. }
Логическое true

Так что если вы хотите проверить, есть ли в переменной какое-то "настоящее" значение, можно просто сделать
if (переменная) {...} и JavaScript сам решит, "правда" это или "ложь".

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

Примеры сравнений различных типов

#JavaScript #code

Новое видео на канале! Настраиваем наш проект, добавляем конфигурации для TS и устанавливаем зависимости

Хочу провести эксперимент, не кидаю ссылку на видео. Мне кажется ютуб по своему считает статистику если переход по сторонней ссылке был

Посмотреть можно на канале😃

Сегодня спрашивал у ChatGPT, как добавить определенный функционал из библиотеки.

Он разные решения предлагал, но ни одно не подошло. В итоге сделал все сам и скинул ему решенную задачу😄

Его ответ на скрине

Сравнение объектов в 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

Таймкоды с моего видео про поиск работы. Достаточно много вопросов разобрал. Дал много советов. О многом со встречи узнал впервые

0:00 - Вступление. О мероприятии.
0:45 - Работа HR
1:26 - Сколько времени на 1 резюме
1:33 - Первый отбор
3:03 - Что писать в резюме
4:05 - Отклик на вакансию. Сопроводительное письмо
5:26 - Социальные сети
6:14 - Шаблон резюме. Важно!
7:04 - Опыт работы. Его отсутствие
8:25 - Где взять опыт
10:28 - Где практиковаться
11:15 - Проверяют ли ваш опыт
12:22 - Соотношение вакансий
13:00 - Нехватка специалистов
13:25 - О знаниях джунов. Собеседования
15:46 - Про активность, стажировки, мотивацию
17:28 - Мероприятия. IT сообщества
18:04 - Реферальная система, как превилегия
20:06 - Возраст
21:14 - Зарплата. Ожидания
24:35 - Найм это дорого
24:52 - Ценность сотрудника. Желание работать. Идея
25:34 - Частая смена работы
27:00 - Идеальный джун
28:06 - Пузырь на рынке
30:14 - Опыт вне айти. Смежный опыт
31:48 - Профильное образование
33:00 - Как учиться джуну. Советы
35:14 - Мотивация. Курсы. Цели. Хобби
37:24 - Заключение

Копирование объектов в 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

Рекурсия в программировании

Рекурсия - это концепция в программировании, когда функция вызывает саму себя в своём теле. Она часто используется для решения задач, которые можно разбить на более мелкие подзадачи одного и того же типа.

Принцип работы

❗️Базовый случай: Каждая рекурсивная функция имеет базовый случай - условие, при выполнении которого рекурсия останавливается, и функция перестает вызывать саму себя.
Это очень важно так, как если условия нет или оно не правильное, функция будет бесконечной!

💡Рекурсивный случай: Если базовый случай не выполнен, функция входит в рекурсивный случай, вызывая саму себя и, возможно, изменяя передаваемые параметры.

Важно понять логику работы рекурсии, как вообще работает и как правильно делать.

Пример с факториалом

Факториал числа - это произведение всех положительных целых чисел от 1 до самого числа. Факториал 5, обозначаемый как 5!, равен 1 * 2 * 3 * 4 * 5 = 120.

Рекурсивная функция для расчета факториала:

function factorial(n) {
if (n === 0) { // базовый случай
return 1;
} else { // рекурсивный случай
return n * factorial(n - 1);
}
}

console.log(factorial(5)); // выводит 120

#JavaScript #обучающийПост #рекурсия #factorial