Проблема изменения вложенных объектов при использовании map
При использовании метода map для создания нового массива объектов, возникает проблема, если объекты содержат вложенные объекты. Хотя map возвращает новый массив, вложенные объекты внутри элементов массива остаются ссылками на те же объекты, что и в оригинальном массиве.
⚠️ Что происходит:
- В исходном массиве persons есть объект с вложенным объектом address.
- Метод map создает новый массив newPersons, в котором каждый элемент копируется с использованием оператора расширения {...person}.
- Однако, несмотря на создание нового объекта верхнего уровня, вложенный объект address в обоих массивах (persons и newPersons) ссылается на один и тот же объект.
📌 Результат
Изменения, внесенные в newPersons, также повлияют на оригинальный массив persons, так как вложенные объекты не были скопированы глубоко.
✔️ Решение
Чтобы избежать этого, нужно использовать глубокое копирование вложенных объектов, например, с использованием JSON.parse(JSON.stringify(person)) или библиотек, которые поддерживают глубокое копирование.
В реальных проектах стараются избегать необходимости глубокого клонирования на каждом шаге. Вместо этого можем частично склонировать
#frontend #javascript
При использовании метода 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
Разница между Context API и Redux
Context API и Redux решают схожие задачи, но применяются в разных ситуациях. Обе технологии используются для управления состоянием в React-приложениях, но подход к их применению и масштаб использования различен.
📌 Context API хорош для передачи статичных данных или тех, что редко изменяются. Однако он не рассчитан на сложное управление состоянием, особенно если его много, и если нужно отслеживать изменения.
📌 Redux нужен там, где важно чётко отслеживать все изменения состояния, легко тестировать и логировать эти изменения, а также предсказуемо управлять ими. Он даёт больше возможностей и контроля, но требует больше кода и сложнее в настройке по сравнению с Context API.
#redux #frontend #react #context
Context API и Redux решают схожие задачи, но применяются в разных ситуациях. Обе технологии используются для управления состоянием в React-приложениях, но подход к их применению и масштаб использования различен.
Context API в React удобен, когда нужно передать данные на несколько уровней глубже по иерархии компонентов, минуя промежуточные. Например, у вас есть тема оформления (светлая/тёмная), которая должна быть доступна на любом уровне приложения. Использовать props для передачи таких данных на каждом уровне неэффективно и приводит к "props drilling". Context API позволяет создать глобальный контекст для темы, к которому любой компонент может обратиться напрямую, не завися от промежуточных компонентов.
Redux стоит использовать, когда приложение сложное и нужно централизованное управление состоянием. Представьте крупное приложение с корзиной покупок, аутентификацией, и несколькими взаимодействующими страницами. Каждая часть приложения может нуждаться в доступе к общим данным и реагировать на их изменения. В Redux есть одно глобальное хранилище, где хранится все состояние приложения. Компоненты могут получать данные из этого хранилища и отправлять туда изменения через экшены.
#redux #frontend #react #context
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Задача с собеседования
Интересная задача попалась на позицию Middle.
Какой ответ будет?
Интересная задача попалась на позицию Middle.
// Что выведет этот код?
function foo() {
const x = 10;
return {
x: 20,
bar: () => {
console.log(this.x)
},
baz: function() {
console.log(this.x)
}
};
}
const obj1 = foo();
obj1.bar(); // ...
obj1.baz(); // ...
const obj2 = foo.call({ x: 30 });
obj2.bar(); // ..
obj2.baz(); // ...
Какой ответ будет?
Отличие useMemo от useCallback
📌 useMemo():
- Кэширует результат выполнения функции между рендерами компонента.
- Возвращает закэшированное значение.
- Полезен для оптимизации вычислений и предотвращения ненужных перерасчётов.
📌 useCallback():
- Кэширует саму функцию между рендерами компонента.
- Возвращает мемоизированную версию функции.
- Полезен для предотвращения лишних ререндеров компонентов, когда функция используется в зависимостях других хуков.
Вкратце, useMemo кэширует вычисленное значение, а useCallback — кэширует функцию.
#react #memo #useMemo #useCallback
- Кэширует результат выполнения функции между рендерами компонента.
- Возвращает закэшированное значение.
- Полезен для оптимизации вычислений и предотвращения ненужных перерасчётов.
- Кэширует саму функцию между рендерами компонента.
- Возвращает мемоизированную версию функции.
- Полезен для предотвращения лишних ререндеров компонентов, когда функция используется в зависимостях других хуков.
Вкратце, useMemo кэширует вычисленное значение, а useCallback — кэширует функцию.
#react #memo #useMemo #useCallback
Please open Telegram to view this post
VIEW IN TELEGRAM
Типы и структуры данных
Типы данных и структуры данных часто путают, но это две разные концепции, которые играют важную роль в программировании.
📌 Типы данных — это категории, в которые классифицируются данные. Они определяют, какие операции можно выполнять с этими данными и как они хранятся в памяти. В JavaScript есть примитивные и ссылочные типы данных:
📌 Структуры данных — это способы организации и хранения данных в памяти таким образом, чтобы к ним было удобно обращаться и эффективно работать. В JavaScript структуры данных включают:
❓ В чем разница?
Типы данных — это отдельные значения (например, число или строка), тогда как структуры данных — это контейнеры, организующие и хранящие эти значения для более сложных операций (например, массив или объект).
Тип данных определяет, что это за значение, а структура данных — как эти значения организованы.
#frontend #javascript
👍 Менторство | 🔝 Сообщество
Типы данных и структуры данных часто путают, но это две разные концепции, которые играют важную роль в программировании.
Примитивные типы данных: Number, String, Boolean, Null, Undefined, Symbol, BigInt.
Ссылочные типы данных: Object (включая массивы, функции и даты).
Массивы (Array): Упорядоченные списки элементов, доступ к которым осуществляется по индексу.
Объекты (Object): Коллекции пар "ключ-значение", где ключи — это строки (или символы), а значения могут быть любыми типами данных.
Наборы (Set): Коллекции уникальных значений, где каждое значение может появляться только один раз.
Карты (Map): Коллекции пар "ключ-значение", где ключи могут быть любого типа, не только строками.
Типы данных — это отдельные значения (например, число или строка), тогда как структуры данных — это контейнеры, организующие и хранящие эти значения для более сложных операций (например, массив или объект).
Тип данных определяет, что это за значение, а структура данных — как эти значения организованы.
#frontend #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Менторство — самый эффективный способ обучения. В отличие от многих менторов, которые ограничиваются перепиской и предоставлением материалов, я глубоко вовлечен в процесс. Мой подход — развитие сообщества и постоянное улучшение обучения.
В IT нет такой конкуренции, как это часто изображают. Один из моих учеников за неделю прошел 5 скринингов, 3 из них привели к приглашению на технические собеседования, сейчас ожидаем фидбек от двух компаний. Диапазон зарплат — от 150 до 250 тысяч рублей. Он практикуется в Ехабе уже 1.5 месяца и посещает каждый день созвоны.
Моя программа охватывает 90% вопросов, которые могут задать на собеседовании. Ученики уверенно рассказывают о своем опыте и процессах, как отче наш. Зачем начинать с позиции джуна за 40 тысяч, если можно претендовать на мидл-уровень с зарплатой 200 тысяч? Это не фантазии — это реальность, которую я наблюдаю ежедневно, когда ребята получают офферы на 150к+.
Мой подход позволяет новичкам без опыта быть сильнее специалистов с 1-3 годами стажа. Мы изучаем полный стек, архитектуру, рабочие кейсы, а также прокачиваемся в Ехабе, работая в команде из 30 человек с ежедневными дейликами, канбан доской, планированием и ретроспективой.
К концу года каждый из вас, кто имеет базу, может найти работу с зарплатой от 150 тысяч. А новички смогут освоить стек, чтобы после Нового года приступить к поиску работы. Просто представьте, что вы работаете в сфере, которая вам нравится и получаете 150к. Это может стать правдой, если взять все в свои руки.
До конца августа сделаю скидку 10% на обучение. Это отличный шанс для тех, кто сомневался.
Сайт с ценами:
https://reactify.ru
Канал с полным обзором обучения:
@mentor_reactify
На канале также есть гайд — заходите и забирайте себе!
#mentor #react #frontend
В IT нет такой конкуренции, как это часто изображают. Один из моих учеников за неделю прошел 5 скринингов, 3 из них привели к приглашению на технические собеседования, сейчас ожидаем фидбек от двух компаний. Диапазон зарплат — от 150 до 250 тысяч рублей. Он практикуется в Ехабе уже 1.5 месяца и посещает каждый день созвоны.
Моя программа охватывает 90% вопросов, которые могут задать на собеседовании. Ученики уверенно рассказывают о своем опыте и процессах, как отче наш. Зачем начинать с позиции джуна за 40 тысяч, если можно претендовать на мидл-уровень с зарплатой 200 тысяч? Это не фантазии — это реальность, которую я наблюдаю ежедневно, когда ребята получают офферы на 150к+.
Мой подход позволяет новичкам без опыта быть сильнее специалистов с 1-3 годами стажа. Мы изучаем полный стек, архитектуру, рабочие кейсы, а также прокачиваемся в Ехабе, работая в команде из 30 человек с ежедневными дейликами, канбан доской, планированием и ретроспективой.
К концу года каждый из вас, кто имеет базу, может найти работу с зарплатой от 150 тысяч. А новички смогут освоить стек, чтобы после Нового года приступить к поиску работы. Просто представьте, что вы работаете в сфере, которая вам нравится и получаете 150к. Это может стать правдой, если взять все в свои руки.
До конца августа сделаю скидку 10% на обучение. Это отличный шанс для тех, кто сомневался.
Сайт с ценами:
https://reactify.ru
Канал с полным обзором обучения:
@mentor_reactify
На канале также есть гайд — заходите и забирайте себе!
#mentor #react #frontend
Новая ссылка, прошу прощения, намудрил с каналом. Записи были скрыты от всех
Вот тут подробно про обучение, двух минутные отрывки из каждой активности. Так же гайд
@mentor_reactify
Вот тут подробно про обучение, двух минутные отрывки из каждой активности. Так же гайд
@mentor_reactify
На каком вы этапе?
Anonymous Poll
11%
Изучаю верстку
16%
Изучаю JavaScript
18%
Изучаю React
16%
Практикую React + экоситстема
19%
Ищу работу
21%
Уже работаю
На какую позицию ищите работу?
Anonymous Poll
40%
Я новичок, ищу на Джуна
17%
Я новичок, ищу на Мидла
12%
Я ищу стажировку
20%
Я уже работаю
10%
Результат
Планирую провести стрим с ответами на вопросы. Будет интересно обсудить трудоустройство, работу, обучение, React, собеседования и многое другое. Присоединились бы?
Anonymous Poll
65%
да, посмотреть
6%
нет
5%
да, задать вопрос
24%
нет, но запись глянул бы
😥 Павел Дуров задержан
Основателя Telegram «приняли» прямо на выходе из его частного джета в парижском аэропорту Ле Бурже.
#FreePavel
Основателя Telegram «приняли» прямо на выходе из его частного джета в парижском аэропорту Ле Бурже.
#FreePavel
Сравнение объектов и Map в JavaScript
📌 Тип ключей:
Объект: Ключи приводятся к строкам. Любой нестроковый ключ, например объект, будет преобразован в строку.
Map: Ключи могут быть любого типа, включая объекты, функции и числа.
📌 Порядок ключей:
Объект: Порядок ключей не гарантирован.
Map: Порядок ключей сохраняется в том порядке, в котором они были добавлены.
📌 Итерация:
Объект: Нужно использовать Object.keys(), Object.values(), или Object.entries() для итерации.
Map: Поддерживает методы для итерации по умолчанию, включая map.keys(), map.values(), и map.entries().
📌 Дополнительные методы:
Объект: Ограниченные возможности, требует использования Object.keys(), Object.values(), и других вспомогательных функций для работы с данными. Для очистки свойств нужно явно удалять каждое свойство.
Map: Обладает множеством удобных методов:
set(key, value): Добавляет элемент.
get(key): Получает значение по ключу.
has(key): Проверяет наличие ключа.
delete(key): Удаляет элемент.
clear(): Удаляет все элементы.
#frontend #javascript #map #object
Объект: Ключи приводятся к строкам. Любой нестроковый ключ, например объект, будет преобразован в строку.
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
Классические алгоритмы на собеседованиях
Многие считают, что для успешного трудоустройства в IT необходимо знать сложные алгоритмы и структуры данных. Однако на практике часто оказывается, что собеседования включают в себя задачи, которые гораздо проще, чем вы могли бы ожидать.
Вот что обычно спрашивают на собеседованиях:
✔️ Палиндромы: Проверка, является ли строка палиндромом, — это классическая задача, которая помогает понять, как вы работаете с строками и массивами. Например, задача на LeetCode: определить, является ли данная строка палиндромом.
✔️ Уникальные значения: Проверка, содержит ли массив только уникальные значения, — это ещё одна распространённая задача. Она показывает, как вы можете эффективно использовать структуры данных для решения проблем.
✔️ Замена подстроки: Задача на замену одной подстроки в строке на другую. Это может включать простую замену или более сложные случаи, требующие умения работать со строками и регулярными выражениями.
✔️ Задачи по React и TypeScript: Часто собеседования могут включать задачи, связанные с React и TypeScript. Это могут быть простые задачи на компоненты, управление состоянием или типизацию.
Не забывайте, что ключ к успешному собеседованию — это не только знания алгоритмов, но и способность продемонстрировать ваши практические навыки и умение решать реальные проблемы. Удачи!
#frontend #work
Многие считают, что для успешного трудоустройства в IT необходимо знать сложные алгоритмы и структуры данных. Однако на практике часто оказывается, что собеседования включают в себя задачи, которые гораздо проще, чем вы могли бы ожидать.
Вот что обычно спрашивают на собеседованиях:
Не забывайте, что ключ к успешному собеседованию — это не только знания алгоритмов, но и способность продемонстрировать ваши практические навыки и умение решать реальные проблемы. Удачи!
#frontend #work
Please open Telegram to view this post
VIEW IN TELEGRAM
Какой будет порядок логов? И Что будет в этих логах?
#frontend #react
import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
function App() {
const [state, setState] = useState(0)
console.log(state)
useEffect(() => {
setState(state => state + 1)
}, [])
useEffect(() => {
console.log(state)
setTimeout(() => {
console.log(state)
}, 100)
}, [])
return null
}
ReactDOM.render(<App/>, document.getElementById('root'))
#frontend #react
Неделю назад ученик проходил собеседование в Яндекс. Сам процесс найма состоит из 5 этапов. Один из этапов это алгоритмическое интервью. Вот какие задачи он решал. Фидбек от интервьюера был положительный, ученик прошел в следующий этап.
Задача №1:
Сложность: Easy
Написать функцию sleep, которая принимает продолжительность в миллисекундах и возвращает Promise, который разрешается после указанной задержки.
function sleep(duration) {
// ваш код здесь
}
Задача №2:
Сложность: Easy
Написать функцию myJoin, которая имитирует работу метода Array.prototype.join. Функция принимает разделитель и любое количество аргументов, а затем соединяет их в строку.
const myJoin = (separator, ...args) => {
// ваш код здесь
}
myJoin('.', 'a', 'b', 'c'); // 'a.b.c'
myJoin('-', 'a', 'b', 'c', 'd'); // 'a-b-c-d'
Задача №3:
Сложность: Medium
Написать имплементацию Promise.any. Функция должна принимать массив промисов и возвращать новый промис, который разрешается, если хотя бы один из переданных промисов разрешен. В случае, если все промисы отклонены, должен быть вызван reject с ошибкой AggregateError.
function any(promises) {
// ваш код здесь
}
Задача №4:
Сложность: Hard
Написать функцию-декоратор, которая ограничивает число вызовов исходной функции. Декоратор принимает три аргумента:
- Исходную функцию
- Лимит вызовов
- Callback, который должен быть вызван при достижении лимита.
У возвращаемой функции должен быть метод reset, который сбрасывает счетчик вызовов.
function limitedCalls(fn, limit, callback) {
// ваш код здесь
}
// Примеры использования:
function log(name) {
return `Hello, ${name}!`;
}
function limitReached(name) {
return `Sorry, ${name}, the function can no longer be called.`;
}
const limitedLog1 = limitedCalls(log, 2, limitReached);
limitedLog1('Alice'); // "Hello, Alice!"
limitedLog1('Alice'); // "Sorry, Alice, the function can no longer be called."
limitedLog1.reset();
#frontend #algo
Please open Telegram to view this post
VIEW IN TELEGRAM
Последние деньки лета — давайте немного отдохнём и зарядимся на следующий год. Чтобы следующее лето было кайфовым: работали разработчиками на удалёнке, получали хорошие деньги и чилили у бассейна.
Если нужна помощь, обращайтесь ко мне😎 Я уже стал профи в этом деле: столько собеседований пройдено, столько скринингов завершено. Написано множество гайдов и собрано море материалов для учеников.
Многие ученики приходили и говорили: «Да хотя бы 100 тысяч зарплату, чтобы не выделяться». А спустя время уже отказываются от предложений в 150 тысяч, им подавай 200+! Очень круто наблюдать, как люди растут как специалисты. Сколько сил вложено в любимое дело, сколько созвонов пройдено. Каждый заслуживает лучшего👍
Не забудьте про 10% скидку на менторство до конца августа
Сайт с ценами:
https://reactify.ru
Канал с полным обзором обучения:
@mentor_reactify
На канале также есть гайд — заходите и забирайте себе!
Если нужна помощь, обращайтесь ко мне😎 Я уже стал профи в этом деле: столько собеседований пройдено, столько скринингов завершено. Написано множество гайдов и собрано море материалов для учеников.
Многие ученики приходили и говорили: «Да хотя бы 100 тысяч зарплату, чтобы не выделяться». А спустя время уже отказываются от предложений в 150 тысяч, им подавай 200+! Очень круто наблюдать, как люди растут как специалисты. Сколько сил вложено в любимое дело, сколько созвонов пройдено. Каждый заслуживает лучшего
Не забудьте про 10% скидку на менторство до конца августа
Сайт с ценами:
https://reactify.ru
Канал с полным обзором обучения:
@mentor_reactify
На канале также есть гайд — заходите и забирайте себе!
Please open Telegram to view this post
VIEW IN TELEGRAM
Стрим/Ответы на вопросы
Дата и время: 4 сентября, Среда, 19:00 мск
Место: YouTube
Поболтаем с вами, отвечу на вопросы, расскажу про рынок, про собеседования и тд.
📌 Сюда можете отправить вопрос: https://forms.gle/nS3c2cgaV43ssvLE8
Так же вопросы можно задавать на стриме.
Дата и время: 4 сентября, Среда, 19:00 мск
Место: YouTube
Поболтаем с вами, отвечу на вопросы, расскажу про рынок, про собеседования и тд.
Так же вопросы можно задавать на стриме.
Please open Telegram to view this post
VIEW IN TELEGRAM
Reactify | Frontend Разработка pinned «Стрим/Ответы на вопросы Дата и время: 4 сентября, Среда, 19:00 мск Место: YouTube Поболтаем с вами, отвечу на вопросы, расскажу про рынок, про собеседования и тд. 📌 Сюда можете отправить вопрос: https://forms.gle/nS3c2cgaV43ssvLE8 Так же вопросы можно…»
Кадровый голод, Горящие вакансии
Please open Telegram to view this post
VIEW IN TELEGRAM