Reactify | Frontend Разработка
5.43K subscribers
658 photos
52 videos
39 files
260 links
Reactify - это активное Frontend сообщество для бесплатного обучения веб-разработке.

Менторство:
https://reactify.ru

YouTube канал:
https://youtube.com/@reactify-it

Записи занятий менторства:
https://t.me/reactify_community_bot

Связь:
@ruslan_kuyanets
Download Telegram
Проблема изменения вложенных объектов при использовании map

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


const persons = [{
name: 'Ivan',
address: {
ul: 1
}
}]

const newPersons = persons.map(person => {
person.address.ul = 2
return {...person}
})

console.log(persons)
console.log(newPersons)


⚠️ Что происходит:
- В исходном массиве persons есть объект с вложенным объектом address.
- Метод map создает новый массив newPersons, в котором каждый элемент копируется с использованием оператора расширения {...person}.
- Однако, несмотря на создание нового объекта верхнего уровня, вложенный объект address в обоих массивах (persons и newPersons) ссылается на один и тот же объект.

📌 Результат
Изменения, внесенные в newPersons, также повлияют на оригинальный массив persons, так как вложенные объекты не были скопированы глубоко.

✔️ Решение
Чтобы избежать этого, нужно использовать глубокое копирование вложенных объектов, например, с использованием JSON.parse(JSON.stringify(person)) или библиотек, которые поддерживают глубокое копирование.

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


const newPersons = persons.map(person => {
return {
...person,
address: { ...person.address, ul: 2 }
}
})


#frontend #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
August 15, 2024
Типы и структуры данных

Типы данных и структуры данных часто путают, но это две разные концепции, которые играют важную роль в программировании.

📌 Типы данных — это категории, в которые классифицируются данные. Они определяют, какие операции можно выполнять с этими данными и как они хранятся в памяти. В JavaScript есть примитивные и ссылочные типы данных:

Примитивные типы данных: Number, String, Boolean, Null, Undefined, Symbol, BigInt.

Ссылочные типы данных: Object (включая массивы, функции и даты).


📌 Структуры данных — это способы организации и хранения данных в памяти таким образом, чтобы к ним было удобно обращаться и эффективно работать. В JavaScript структуры данных включают:

Массивы (Array): Упорядоченные списки элементов, доступ к которым осуществляется по индексу.

Объекты (Object): Коллекции пар "ключ-значение", где ключи — это строки (или символы), а значения могут быть любыми типами данных.

Наборы (Set): Коллекции уникальных значений, где каждое значение может появляться только один раз.

Карты (Map): Коллекции пар "ключ-значение", где ключи могут быть любого типа, не только строками.


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

#frontend #javascript

👍 Менторство | 🔝 Сообщество
Please open Telegram to view this post
VIEW IN TELEGRAM
August 23, 2024
Сравнение объектов и Map в JavaScript

📌 Тип ключей:
Объект: Ключи приводятся к строкам. Любой нестроковый ключ, например объект, будет преобразован в строку.

Map: Ключи могут быть любого типа, включая объекты, функции и числа.


const obj = {};
const map = new Map();

const keyObj = {};
obj[keyObj] = 'value'; // Ключ преобразуется в "[object Object]"
map.set(keyObj, 'value'); // Ключ остается объектом

console.log(obj[keyObj]); // 'value'
console.log(map.get(keyObj)); // 'value'


📌 Порядок ключей:
Объект: Порядок ключей не гарантирован.

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


const obj = { b: 2, a: 1 };
const map = new Map([['b', 2], ['a', 1]]);

console.log(Object.keys(obj)); // ['b', 'a'] (порядок не гарантирован)
console.log([...map.keys()]); // ['b', 'a'] (порядок гарантирован)


📌 Итерация:
Объект: Нужно использовать Object.keys(), Object.values(), или Object.entries() для итерации.

Map: Поддерживает методы для итерации по умолчанию, включая map.keys(), map.values(), и map.entries().


const obj = { a: 1, b: 2 };
const map = new Map([['a', 1], ['b', 2]]);

for (const key in obj) {
console.log(key, obj[key]);
}

for (const [key, value] of map) {
console.log(key, value);
}


📌 Дополнительные методы:
Объект: Ограниченные возможности, требует использования Object.keys(), Object.values(), и других вспомогательных функций для работы с данными. Для очистки свойств нужно явно удалять каждое свойство.

Map: Обладает множеством удобных методов:
set(key, value): Добавляет элемент.
get(key): Получает значение по ключу.
has(key): Проверяет наличие ключа.
delete(key): Удаляет элемент.
clear(): Удаляет все элементы.

#frontend #javascript #map #object
Please open Telegram to view this post
VIEW IN TELEGRAM
August 26, 2024
Чем отличаются циклы for...in и for...of в JavaScript

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

Пример с объектом:

const car = {
make: 'Toyota',
model: 'Corolla',
year: 2020
};

for (const key in car) {
console.log(key, car[key]);
}

// make Toyota
// model Corolla
// year 2020


Пример с массивом:

const fruits = ['apple', 'banana', 'cherry'];

for (const index in fruits) {
console.log(index, fruits[index]);
}

// 0 apple
// 1 banana
// 2 cherry



for...of
Цикл for...of используется для перебора значений итерируемых объектов, таких как массивы, строки, Map, Set и т.д. Он перебирает значения.

Пример с массивом:

const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
console.log(fruit);
}
// apple
// banana
// cherry


Пример со строкой:

const name = 'Alice';

for (const char of name) {
console.log(char);
}
// A
// l
// i
// c
// e


Как запомнить
for...in – для индексов и свойств объекта.
for...of – для объектов итерируемых, значений.

Используйте for...in для обхода ключей объектов или индексов массива. Используйте for...of для обхода значений массивов, строк или других итерируемых объектов.

#frontend #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
September 13, 2024
🖥 Функция-конструктор в JavaScript

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

✏️ Создание функции-конструктора
Функция-конструктор выглядит как обычная функция, но она пишется с заглавной буквы по соглашению, чтобы отличаться от других функций. Внутри конструктора используется this для задания свойств создаваемого объекта.


function Person(name, age) {
this.name = name; // свойство name
this.age = age; // свойство age
}


🎮 Создание объектов с помощью конструктора
Чтобы создать объект с помощью конструктора, используется оператор new. Он:

- Создает новый пустой объект.
- Связывает его с this внутри конструктора.
- Возвращает этот объект.


const person1 = new Person("Alice", 25);
console.log(person1.name); // Alice
console.log(person1.age); // 25


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


function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log(`Hi, I'm ${this.name}`);
};
}

const person1 = new Person("Alice", 25);
person1.sayHello(); // Hi, I'm Alice


⚙️ Оптимизация с prototype
Для методов можно использовать prototype, чтобы метод существовал в одном экземпляре и не копировался для каждого объекта.


function Person(name, age) {
this.name = name;
this.age = age;
}

Person.prototype.sayHello = function() {
console.log(`Hi, I'm ${this.name}`);
};

const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

person1.sayHello(); // Hi, I'm Alice
person2.sayHello(); // Hi, I'm Bob


💭 Как работает this в конструкторе
В функции-конструкторе this указывает на новый объект, который создается при вызове через new. Это позволяет настраивать свойства и методы нового объекта.

💎 Продвинутые аспекты
- Наследование. Используя прототипы, можно создавать наследуемые свойства и методы.
- Проверка с instanceof. Для проверки, создан ли объект через конструктор, можно использовать instanceof.


console.log(person1 instanceof Person); // true


#javascript #this #function
Please open Telegram to view this post
VIEW IN TELEGRAM
November 1, 2024
🖥 5 главных правил THIS для Frontend собеседований

В этом видео мы разберем 5 главных правил использования this в JavaScript, которые помогут вам не запутаться и успешно пройти собеседование на фронтенд-разработчика!

- Как работает this в стрелочных функциях.
- Почему важно, как вызывается функция, а не где она создается.
- Как this ведет себя в методах объектов.
- Как режим выполнения (strict или нестрогий) влияет на значение this.
- Как управлять this с помощью методов bind, call и apply.

🔗 СХЕМА-ШПАРГАЛКА ИЗ ВИДЕО

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#this #frontend #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
January 3
🖥 Практика This

Каким будет вывод этого фрагмента кода?

function f() {
this.x = 5;
console.log(this);
}
var o = new f();
console.log(o.x);


Каким будет вывод этого фрагмента кода?

var o = {
f: function() {
return this;
}
}
console.log(o.f())


Каким будет вывод этого фрагмента кода?

var o = {
f: function() {
return this;
}
}
var o2 = {f: o.f};
console.log(o.f());
console.log(o2.f())


Каким будет вывод этого фрагмента кода?

function f() {
console.log( this );
}

let user = {
g: f.bind(null)
};

user.g();


Каким будет вывод этого фрагмента кода?

function sayHi() {
alert( this.name );
}
sayHi.test = 5;

let bound = sayHi.bind({
name: "Вася"
});

alert( bound.test );


#this #frontend #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
January 3
🖥 5 сложных концепций Функций в JavaScript для собеседований

Одна из самых важных тем в JavaScript - это функции. Без них трудно создать даже простое приложение. Мы используем их для обработки событий, логики и асинхронных операций. С помощью функций мы пишем переиспользуемый и чистый код

Все концепции которые мы рассмотрим в этом видео спрашивают на собеседованиях

- Колбеки (Callbacks)
- Замыкания (Closures)
- Чистые функции (Pure Functions)
- this в функциях
- Асинхронные функции (async/await)

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #javascript #функции
Please open Telegram to view this post
VIEW IN TELEGRAM
January 14
🖥 Задачи с собеседований по JavaScript

1. Реализуйте функцию throttle. throttle позволяет "ограничить" количество вызовов функции до одного раза в заданный период времени, даже если функция была вызвана множество раз.

2. Реализуйте функцию debounce. Дебаунсинг позволяет "задержать" выполнение функции до тех пор, пока не пройдет определенный период времени без ее вызова.

3. Реализуйте функцию sleep. Функция sleep позволяет задержать выполнение кода на определенное количество времени.

4. Реализуйте функцию memoize, которая принимает функцию fn в качестве аргумента и возвращает новую функцию. Новая функция должна кэшировать результаты вызовов fn для уникальных наборов аргументов.

Начальный код:

function memoize(fn) {

}

// Пример использования
function slowFunction(num) {
// Симуляция тяжелых вычислений
for (let i = 0; i < 1e9; i++) {}
return num * 2;
}

const memoizedSlowFunction = memoize(slowFunction);

console.log(memoizedSlowFunction(5)); // Вычисляет и кэширует результат
console.log(memoizedSlowFunction(5)); // Возвращает закэшированный результат


#javascript #livecoding
Please open Telegram to view this post
VIEW IN TELEGRAM
January 14
🖥 Что будет в консоли?

1. Каким будет вывод этого фрагмента кода?
var foo = 1; 
function bar() {
if (!foo) {
var foo = 10;
}
console.log(foo);
}
bar();


2. Каким будет вывод этого фрагмента кода?
function foo() { 
var x = 1;
if (x) {
(function () {
var x = 2;
}());
}
console.log(x)
}


3. Каким будет вывод этого фрагмента кода?
function f() {
console.log( this );
}

let user = {
g: f.bind(null)
};

user.g();


4. Каким будет вывод этого фрагмента кода?
function greetWaitAndAgain() {
console.log(`Hello, ${this.name}!`)
setTimeout(() => {
console.log(`Hello again, ${this.name}!`)
})
}

const user = { name: 'Alex' }

user.greetWaitAndAgain = greetWaitAndAgain;
user.greetWaitAndAgain()


5. Каким будет вывод этого фрагмента кода?
function f() {
this.x = 5;
console.log(this);
}
var o = new f();
console.log(o.x);


#this #javascript #замыкание #собеседование
Please open Telegram to view this post
VIEW IN TELEGRAM
January 14
🖥 5 типичных задач по JavaScript на собеседовании

В этом видео мы разберем 5 типичных задач по JavaScript, которые могут встретиться на собеседовании на фронтенд-разработчика!

- Задача на строки, методы и циклы
- Задача на строки, циклы и условия
- Задача на колбек, массивы, прототип и циклы
- Задача на объекты, массивы, графы и цепочки
- Задача на промисы, замыкания и асинхронность

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #javascript #функции
Please open Telegram to view this post
VIEW IN TELEGRAM
January 29
🖥 Частые задачи на собеседованиях

Как и обещал в видео, предоставляю задачи с собеседований

1. Реализуйте полифил myFilter точно копирующий filter метод
Array.prototype.myFilter = function(callback) {

};

const arr = [1, 2, 3, 4, 5];

const filteredArr = arr.myFilter(x => x > 2);
console.log(filteredArr); // [3, 4, 5]


2. Найти все индексы начала вхождения анаграмм подстроки в строке
function searchAllAnagramsInString(str, substr) {

}

// Пример использования:
console.log(searchAllAnagramsInString("cbaebabacd", "abc")); // [0, 6]


3. Найти самый загруженный день в отеле
function findMaxDayWithClients(bookings) {
// Реализуйте логику поиска самого загруженного дня
}

findMaxDayWithClients([[1, 5], [2, 4], [3, 6]]); // 3
// В день 3 отель был максимально загружен (3 клиента)


4. Представим, что у нас нет встроенных промис-комбинаторов, как можно реплицировать функциональность Promise.all?

function customPromiseAll(promises) {

}

// Пример использования
const promise1 = Promise.resolve(3);
const promise2 = Promise.resolve(42);
const promise3 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));

customPromiseAll([promise1, promise2, promise3])
.then(results => console.log(results)) // [3, 42, 'foo']
.catch(error => console.error(error));


5. Необходимо сгруппировать транзакции по userID.
const transactions = [
{ userID: "user1", amount: 200, date: "2023-01-01" },
{ userID: "user2", amount: 500, date: "2023-01-02" },
{ userID: "user1", amount: 300, date: "2023-01-03" },
{ userID: "user3", amount: 400, date: "2023-01-01" },
{ userID: "user2", amount: 150, date: "2023-01-04" },
{ userID: "user3", amount: 250, date: "2023-01-02" },
{ userID: "user4", amount: 100, date: "2023-01-01" }
];

function topThreeUsersByTotalAmount(transactions) {
//тут
}


#javascript #лайвкодинг
Please open Telegram to view this post
VIEW IN TELEGRAM
January 29
🖥 Разбор задач по Event Loop с собеседований

В этом видео мы подробно разберем выполнение кода в задачах по Event Loop шаг за шагом. Мы визуализируем процесс на схеме, чтобы показать, что происходит с кодом в момент его выполнения. Разберемся, как работает стек вызовов, что такое микротаски, макротаски и как они взаимодействуют в процессе обработки событий. Это видео поможет вам глубже понять внутреннюю работу Event Loop в JavaScript, что критически важно для собеседований и практических задач.

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

🔗 СХЕМА

#frontend #javascript #eventloop
Please open Telegram to view this post
VIEW IN TELEGRAM
February 4
May 26