const user = {
email: "e@mail.com",
password: "12345"
}
const updateUser = ({ email, password }) => {
if (email) {
Object.assign(user, { email })
}
if (password) {
user.password = password
}
return user
}
const updatedUser = updateUser({ email: "new@email.com" })
console.log(updatedUser === user)Пояснение к ответу
Функция updateUser обновляет значения свойств email и password у пользователя, если их значения переданы в функцию, после чего функция возвращает объект user. Возвращаемое значение функции updateUser — это объект user, что означает, что значение updatedUser является ссылкой на тот же объект user, на который указывает user. updatedUser === user равно true.
Пора переходить на микрофронтенд? Опыт «Инферит Клаудмастер»
В этой статье вы узнаете о:
факторах, сформировавших тренд на уход фронтенд-разработки от монолита к микрофронтенду,
процессах со стороны команды разработки при переходе на микрофронтенд,
кейсе платформы “Инферит Кладумастер”: почему для нашей команды микрофронтенд с плагином Module Federation стал полезным решением,
признаках того, что пора переходить на микрофронтенд.
Ссылка
#статьи
В этой статье вы узнаете о:
факторах, сформировавших тренд на уход фронтенд-разработки от монолита к микрофронтенду,
процессах со стороны команды разработки при переходе на микрофронтенд,
кейсе платформы “Инферит Кладумастер”: почему для нашей команды микрофронтенд с плагином Module Federation стал полезным решением,
признаках того, что пора переходить на микрофронтенд.
Ссылка
#статьи
Воплощённые типы
Хочу представить вам подход к определению типов, позволяющий сделать ваш код чище и понятнее. Я называю это «Воплощённые типы» («Embodied types»).
Воплощённый тип - тип, для которого определена переменная с одинаковым именем и в которой содержится объект с утилитами для этого типа.
Ссылка
#статьи
Хочу представить вам подход к определению типов, позволяющий сделать ваш код чище и понятнее. Я называю это «Воплощённые типы» («Embodied types»).
Воплощённый тип - тип, для которого определена переменная с одинаковым именем и в которой содержится объект с утилитами для этого типа.
Ссылка
#статьи
const animals = {};
let dog = { emoji: '🐶' }
let cat = { emoji: '🐈' }
animals[dog] = { ...dog, name: "Mara" }
animals[cat] = { ...cat, name: "Sara" }
console.log(animals[dog])Что будет на выходе?
Anonymous Quiz
54%
{ emoji: "🐶", name: "Mara" }
18%
{ emoji: "🐈", name: "Sara" }
11%
undefined
16%
ReferenceError
Пояснение к предыдущему посту
Ключи объекта преобразуются в строки.
Поскольку значение dog является объектом, animals[dog] на самом деле означает, что мы создаем новое свойство под названием "object Object", равное новому объекту. animals["object Object"] теперь равно { emoji: "🐶", name: "Mara"}.
cat также является объектом, что означает, что animals[cat] на самом деле означает, что мы перезаписываем значение animals["object Object"] новыми свойствами кота.
Регистрация animals[dog], или фактически animals["object Object"], поскольку преобразование объекта dog в строку приводит к "object Object", возвращает { emoji: "🐈", name: " Сара"}.
Поскольку значение dog является объектом, animals[dog] на самом деле означает, что мы создаем новое свойство под названием "object Object", равное новому объекту. animals["object Object"] теперь равно { emoji: "🐶", name: "Mara"}.
cat также является объектом, что означает, что animals[cat] на самом деле означает, что мы перезаписываем значение animals["object Object"] новыми свойствами кота.
Регистрация animals[dog], или фактически animals["object Object"], поскольку преобразование объекта dog в строку приводит к "object Object", возвращает { emoji: "🐈", name: " Сара"}.
Лонгрид о JavaScript
JavaScript — ужасный язык программирования. По сравнению с другими распространёнными языками он выглядит генетическим уродом. Дело даже не в отсутствии многопоточности, или статической типизации, или того, что node-modules для простого проекта занимают сотни мегабайт, а в том, что в JavaScript столько стилей и подходов, что семь человек одну и ту же несложную задачу могут написать на нём семью различными способами. Каждый из них с трудом будет понимать, что написал другой, и тихо материться. Причем, так напишут и новички, и опытные программисты, которые просто привыкли писать по‑своему или захотели выпендриться.
Ссылка
#статьи
JavaScript — ужасный язык программирования. По сравнению с другими распространёнными языками он выглядит генетическим уродом. Дело даже не в отсутствии многопоточности, или статической типизации, или того, что node-modules для простого проекта занимают сотни мегабайт, а в том, что в JavaScript столько стилей и подходов, что семь человек одну и ту же несложную задачу могут написать на нём семью различными способами. Каждый из них с трудом будет понимать, что написал другой, и тихо материться. Причем, так напишут и новички, и опытные программисты, которые просто привыкли писать по‑своему или захотели выпендриться.
Ссылка
#статьи
const user = {
email: "my@email.com",
updateEmail: email => {
this.email = email
}
}
user.updateEmail("new@email.com")
console.log(user.email)Что будет на выходе?
Anonymous Quiz
30%
my@email.com
54%
new@email.com
11%
undefined
5%
ReferenceError
Пояснение к ответу
Функция updateEmail представляет собой стрелочную функцию и не привязана к объекту пользователя. Это означает, что ключевое слово this не относится к объекту user, а в данном случае относится к глобальной области видимости. Значение email в объекте user не обновляется. При регистрации значения ||user.email|| возвращается исходное значение ||my@email.com||.
Почему реактивность без VDOM (с реальным DOM) лучше, чем реактивность с VDOM?
В этой статье я хотел бы поделиться своими мыслями о том, почему виртуального DOM можно избежать при создании реактивности сегодня. Я работаю со всем этим уже около полутора лет, создавая фреймворк Cample.js, и у меня есть некоторые соображения по этому поводу.
Ссылка
#framework
В этой статье я хотел бы поделиться своими мыслями о том, почему виртуального DOM можно избежать при создании реактивности сегодня. Я работаю со всем этим уже около полутора лет, создавая фреймворк Cample.js, и у меня есть некоторые соображения по этому поводу.
Ссылка
#framework
const promise1 = Promise.resolve('First')
const promise2 = Promise.resolve('Second')
const promise3 = Promise.reject('Third')
const promise4 = Promise.resolve('Fourth')
const runPromises = async () => {
const res1 = await Promise.all([promise1, promise2])
const res2 = await Promise.all([promise3, promise4])
return [res1, res2]
}
runPromises()
.then(res => console.log(res))
.catch(err => console.log(err))Что будет на выходе?
Anonymous Quiz
23%
[['First', 'Second'], ['Fourth']]
35%
[['First', 'Second'], ['Third', 'Fourth']]
21%
[['First', 'Second']]
22%
'Third'
Пояснение к ответу
Метод Promise.all выполняет переданные промисы параллельно. Если одно обещание не выполняется, метод Promise.all отколняется со значением отклоненного обещания. В этом случае promise3 отклонен со значением "Third". Мы перехватываем отклоненное значение в цепочке методов catch при вызове runPromises, чтобы перехватывать любые ошибки внутри функции runPromises. Только "Third" регистрируется, так как promise3 отклонено с этим значением.
Этот опасный рефакторинг
Ошибки во время рефакторинга могут дорого обойтись. Модернизация, ведущая к отказу системы, или внесение новой функциональности параллельно с ошибочными правками явно принесут вред. Но степень вреда может быть разной.
Любой рефакторинг сопряжён с рисками
Доработка кода – это рисковая затея, поскольку подразумевает изменение работающей системы. Всё верно. Но во многих ситуациях разработчики могут снизить эти риски, сделав их допустимыми.
Ссылка
#статьи
Ошибки во время рефакторинга могут дорого обойтись. Модернизация, ведущая к отказу системы, или внесение новой функциональности параллельно с ошибочными правками явно принесут вред. Но степень вреда может быть разной.
Любой рефакторинг сопряжён с рисками
Доработка кода – это рисковая затея, поскольку подразумевает изменение работающей системы. Всё верно. Но во многих ситуациях разработчики могут снизить эти риски, сделав их допустимыми.
Ссылка
#статьи
const keys = ["name", "age"]
const values = ["Lydia", 22]
const method = /* ?? */
Object[method](keys.map((_, i) => {
return [keys[i], values[i]]
})) // { name: "Lydia", age: 22 }
Каким должно быть значение method для регистрации { name: "Lydia", age: 22 }?
Anonymous Quiz
23%
entries
24%
values
40%
fromEntries
13%
forEach
Пояснение к ответу
Метод fromEntries превращает двумерный массив в объект. Первый элемент в каждом подмассиве будет ключом, а второй элемент в каждом подмассиве будет значением. В этом случае мы сопоставляем массив keys, который возвращает массив, первый элемент которого является элементом массива ключей текущего индекса, а второй элемент является элементом массива значений текущего индекса.
Это создает массив подмассивов, содержащих правильные ключи и значения, что приводит к { name: "Lydia", age: 22 }
Это создает массив подмассивов, содержащих правильные ключи и значения, что приводит к { name: "Lydia", age: 22 }