Какое значение будет на выходе?
Anonymous Quiz
17%
3, NaN, NaN
7%
3, 7, NaN
63%
3, Lydia2, [object Object]2
13%
"12", Lydia2, [object Object]2
Пояснение к предыдущему посту
Оператор + используется не только для добавления числовых значений, но мы также можем использовать его для объединения строк. Всякий раз, когда движок JavaScript видит, что одно или несколько значений не являются числом, он приводит число к строке.
Первым является 1, который является числовым значением. 1 + 2 возвращает число 3.
Тем не менее, вторая строка "Lydia". "Lydia" является строкой, а 2 является числом: 2 приводится к строке. "Lydia" и "2" объединяются, что приводит к результирующей строке "Lydia2".
{name: "Lydia"} является объектом. Ни число, ни объект не являются строкой, поэтому они приводятся к строке. Всякий раз, когда мы приводим обычный объект, он становится "[object Object]". "[object Object]", объединенный с "2", становится "[object Object]2".
Первым является 1, который является числовым значением. 1 + 2 возвращает число 3.
Тем не менее, вторая строка "Lydia". "Lydia" является строкой, а 2 является числом: 2 приводится к строке. "Lydia" и "2" объединяются, что приводит к результирующей строке "Lydia2".
{name: "Lydia"} является объектом. Ни число, ни объект не являются строкой, поэтому они приводятся к строке. Всякий раз, когда мы приводим обычный объект, он становится "[object Object]". "[object Object]", объединенный с "2", становится "[object Object]2".
Redux vs Mobx кого же выбрать для React-приложения в 2024 году?
В этой статье я рассмотрю два из самых популярных и зрелых стейт менеджеров для React: Redux и Mobx. Я сравню их основные принципы, преимущества и недостатки, а также покажу примеры их использования в коде. Также я попытаюсь ответить на вопрос, какой из них лучше подходит для разработки современных приложений на React в 2024 году.
Ссылка
#статьи
В этой статье я рассмотрю два из самых популярных и зрелых стейт менеджеров для React: Redux и Mobx. Я сравню их основные принципы, преимущества и недостатки, а также покажу примеры их использования в коде. Также я попытаюсь ответить на вопрос, какой из них лучше подходит для разработки современных приложений на React в 2024 году.
Ссылка
#статьи
function compareMembers(person1, person2 = person) {
if (person1 !== person2) {
console.log('Not the same!')
} else {
console.log('They are the same!')
}
}
const person = { name: 'Lydia' }
compareMembers(person)Чему равно значение?
Anonymous Quiz
22%
Not the same!
41%
They are the same!
26%
ReferenceError
12%
SyntaxError
Пояснение к предыдущему посту
Объекты передаются по ссылке. Когда мы проверяем объекты на строгое равенство (===), мы сравниваем их ссылки.
Мы устанавливаем значение по умолчанию для person2, равное объекту person, и передаем объект person в качестве значения для person1.
Это означает, что оба значения имеют ссылку на одно и то же место в памяти, поэтому они равны.
Блок кода в операторе else запускается, и в лог выводится They are the same!.
Мы устанавливаем значение по умолчанию для person2, равное объекту person, и передаем объект person в качестве значения для person1.
Это означает, что оба значения имеют ссылку на одно и то же место в памяти, поэтому они равны.
Блок кода в операторе else запускается, и в лог выводится They are the same!.
Простым языком об HTTP
Вашему вниманию предлагается описание основных аспектов протокола HTTP — сетевого протокола, с начала 90-х и по сей день позволяющего вашему браузеру загружать веб-страницы. Данная статья написана для тех, кто только начинает работать с компьютерными сетями и заниматься разработкой сетевых приложений, и кому пока что сложно самостоятельно читать официальные спецификации.
Ссылка
#статьи
Вашему вниманию предлагается описание основных аспектов протокола HTTP — сетевого протокола, с начала 90-х и по сей день позволяющего вашему браузеру загружать веб-страницы. Данная статья написана для тех, кто только начинает работать с компьютерными сетями и заниматься разработкой сетевых приложений, и кому пока что сложно самостоятельно читать официальные спецификации.
Ссылка
#статьи
const colorConfig = {
red: true,
blue: false,
green: true,
black: true,
yellow: false,
}
const colors = ['pink', 'red', 'blue']
console.log(colorConfig.colors[1])Пояснение к предыдущему посту
В JavaScript у нас есть два способа доступа к свойствам объекта: нотация в скобках или нотация в точках. В этом примере мы используем точечную нотацию (colorConfig.colors) вместо скобочной нотации (colorConfig["colors"]).
В точечной нотации JavaScript пытается найти свойство объекта с таким точным именем. В этом примере JavaScript пытается найти свойство с именем colors в объекте colorConfig. Не существует свойства с именем colors, поэтому возвращается undefined. Затем мы пытаемся получить доступ к значению первого элемента, используя [1]. Мы не можем сделать это для значения, которое undefined, поэтому оно выдает TypeError: Cannot read свойство '1' of undefined.
JavaScript интерпретирует (или распаковывает) операторы. Когда мы используем скобочные обозначения, он видит первую открывающую скобку [ и продолжает работать, пока не найдет закрывающую скобку ]. Только тогда он оценит утверждение. Если бы мы использовали colorConfig[colors [1]], он бы возвратил значение свойства red объекта colorConfig.
В точечной нотации JavaScript пытается найти свойство объекта с таким точным именем. В этом примере JavaScript пытается найти свойство с именем colors в объекте colorConfig. Не существует свойства с именем colors, поэтому возвращается undefined. Затем мы пытаемся получить доступ к значению первого элемента, используя [1]. Мы не можем сделать это для значения, которое undefined, поэтому оно выдает TypeError: Cannot read свойство '1' of undefined.
JavaScript интерпретирует (или распаковывает) операторы. Когда мы используем скобочные обозначения, он видит первую открывающую скобку [ и продолжает работать, пока не найдет закрывающую скобку ]. Только тогда он оценит утверждение. Если бы мы использовали colorConfig[colors [1]], он бы возвратил значение свойства red объекта colorConfig.
Новые клиентские хуки React 19
Вопреки распространенному мнению, основная команда разработчиков React занимается не только серверными компонентами React и Next.js. В следующей версии — React 19 — появятся новые клиентские хуки. Они сфокусированы на двух ключевых аспектах: выборке данных и работе с формами. Эти хуки повысят производительность всех React-разработчиков, включая тех, кто создает одностраничные приложения.
Без дальнейших предисловий давайте познакомимся с новыми хуками!
Ссылка
#react
Вопреки распространенному мнению, основная команда разработчиков React занимается не только серверными компонентами React и Next.js. В следующей версии — React 19 — появятся новые клиентские хуки. Они сфокусированы на двух ключевых аспектах: выборке данных и работе с формами. Эти хуки повысят производительность всех React-разработчиков, включая тех, кто создает одностраничные приложения.
Без дальнейших предисловий давайте познакомимся с новыми хуками!
Ссылка
#react
let name = 'Lydia'
function getName() {
console.log(name)
let name = 'Sarah'
}
getName()
Пояснение к предыдущему посту
Каждая функция имеет свой собственный контекст исполнения (или область видимости). Функция getName сначала ищет в своем собственном контексте (области видимости), чтобы увидеть, содержит ли она переменную name, к которой мы пытаемся получить доступ. В этом случае функция getName содержит собственную переменную name: мы объявляем переменную name с ключевым словом let и значением 'Sarah'.
Переменные с ключевым словом let (и const) поднимаются в начало функции, в отличие от var, которые не инициализируется. Они недоступны до того, как мы объявим (инициализируем) их строку. Это называется "временной мертвой зоной". Когда мы пытаемся получить доступ к переменным до их объявления, JavaScript выдает ReferenceError.
Если бы мы не объявили переменную name в функции getName, движок javascript посмотрел бы вниз по цепочки области действия. Внешняя область имеет переменную с именем name со значением Lydia. В этом случае он бы записал Lydia.
let name = 'Lydia'
function getName() {
console.log(name)
}
getName() // Lydia
Переменные с ключевым словом let (и const) поднимаются в начало функции, в отличие от var, которые не инициализируется. Они недоступны до того, как мы объявим (инициализируем) их строку. Это называется "временной мертвой зоной". Когда мы пытаемся получить доступ к переменным до их объявления, JavaScript выдает ReferenceError.
Если бы мы не объявили переменную name в функции getName, движок javascript посмотрел бы вниз по цепочки области действия. Внешняя область имеет переменную с именем name со значением Lydia. В этом случае он бы записал Lydia.
function getName() {
console.log(name)
}
getName() // Lydia
Запросы, хуки и спагетти
Во время разработки веб-приложений мы порой делаем запросы на сервер внутри useEffect прямо в компоненте с визуальным составляющим. Однако не всегда очевидно, что смешивание логики с интерфейсом может привести к усложнению кодовой базы.
В этой статье мы рассмотрим, как неправильное разделение ответственности может негативно сказаться на ваших компонентах, и какие подходы помогут избежать подобных проблем.
Ссылка
#react
Во время разработки веб-приложений мы порой делаем запросы на сервер внутри useEffect прямо в компоненте с визуальным составляющим. Однако не всегда очевидно, что смешивание логики с интерфейсом может привести к усложнению кодовой базы.
В этой статье мы рассмотрим, как неправильное разделение ответственности может негативно сказаться на ваших компонентах, и какие подходы помогут избежать подобных проблем.
Ссылка
#react
let config = {
alert: setInterval(() => {
console.log('Alert!')
}, 1000)
}
config = nullПояснение к предыдущему посту
Обычно, когда мы устанавливаем объекты равными null, эти объекты получают статус собрано в мусор, так как больше нет ссылок на этот объект. Однако, поскольку функция обратного вызова внутри setInterval является стрелочной функцией (таким образом, привязанной к объекту config), функция обратного вызова по-прежнему содержит ссылку на объект config. Пока есть ссылка, объект не будет собирать мусор. Так как это интервал, установка config в null или delete-ing config.alert не приведет к сбору мусора для интервала, поэтому интервал все равно будет вызываться. Его следует очистить с помощью clearInterval(config.alert), чтобы удалить его из памяти. Поскольку он не был очищен, функция обратного вызова setInterval будет по-прежнему вызываться каждые 1000мс (1с).
Динамические Breadcrumbs на React, React Router и Apollo GraphQL
Хлебные крошки - важнейшая часть навигации приложения. В классическом исполнении они отражают текущее положение пользователя в иерархии. А отображение названия карточки товара, статьи или любой другой сущности - это уже, как правило, задача компонента отвечающего за отображение самой сущности. Однако, все может оказаться не так просто. По каким-либо причинам дизайнер, заказчик или другая неведомая сила будет категорично настаивать, чтобы название отображалось именно в хлебных крошках.
Ссылка
#статьи
Хлебные крошки - важнейшая часть навигации приложения. В классическом исполнении они отражают текущее положение пользователя в иерархии. А отображение названия карточки товара, статьи или любой другой сущности - это уже, как правило, задача компонента отвечающего за отображение самой сущности. Однако, все может оказаться не так просто. По каким-либо причинам дизайнер, заказчик или другая неведомая сила будет категорично настаивать, чтобы название отображалось именно в хлебных крошках.
Ссылка
#статьи
Какой из следующих наборов параметров вернет 6?
Anonymous Quiz
12%
sumValues([...1, 2, 3])
7%
sumValues([...[1, 2, 3]])
55%
sumValues(...[1, 2, 3])
26%
sumValues([1, 2, 3])