Пояснение к предыдущему посту
Объекты передаются по ссылке. Когда мы проверяем объекты на строгое равенство (===), мы сравниваем их ссылки.
Мы устанавливаем значение по умолчанию для 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])
8%
sumValues([...[1, 2, 3]])
55%
sumValues(...[1, 2, 3])
26%
sumValues([1, 2, 3])
Как я пытался писать функциональные компоненты без хуков на react
Хуки позволили нам перейти с классового компонента на функциональный. Они решили проблему хранения состояния между перерисовками функционального компонента и отчасти упростив написание логики. Почему же я предлагаю отказаться от них?
Ссылка
#react
Хуки позволили нам перейти с классового компонента на функциональный. Они решили проблему хранения состояния между перерисовками функционального компонента и отчасти упростив написание логики. Почему же я предлагаю отказаться от них?
Ссылка
#react
const person = {
firstName: 'Lydia',
lastName: 'Hallie',
pet: {
name: 'Mara',
breed: 'Dutch Tulip Hound'
},
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
};
console.log(person.pet?.name);
console.log(person.pet?.family?.name);
console.log(person.getFullName?.());
console.log(member.getLastName?.());Пояснение к предыдущему посту
С необязательным оператором связывания ?. нам больше не нужно явно проверять, действительны ли более глубокие вложенные значения или нет. Если мы пытаемся получить доступ к свойству со (нулевым) значением undefined или null, выражение замыкается и возвращает undefined.
person.pet?.name : person имеет свойство с именем pet: person.pet не нулевое. Оно имеет свойство с именем name, и возвращает Mara. person.pet?.family?.name : person имеет свойство с именем pet: person.pet не нулевое. pet не имеет свойство с именем family, person.pet.family нулевое. Выражение возвращает undefined. person.getFullName?.(): person имеет свойство с именем getFullName: person.getFullName() не нулевое, и может быть вызвано, возвращает Lydia Hallie. member.getLastName?.(): member не определено: member.getLastName() нулевое. Выражение возвращает undefined.
Насколько потолстел JavaScript к 2024 году?
Я немного отстал от современных тенденций фронтенд-разработки. Помню, были статьи на тему раздутия веб-среды, в которых писали, что средний размер страницы начал достигать нескольких мегабайтов!
И всё это время я жил с мыслью, что если средний размер страницы равен, скажем, 3 МБ, то JS-бандл должен составлять около 1 МБ. Естественно, основную часть объёма должно занимать содержимое, не так ли?
Что ж, проверить это можно лишь экспериментальным путём, чем я и займусь! Эту статью я пишу в 2024 году и думаю, что через пару лет эксперимент неплохо бы повторить.
Ссылка
#js
Я немного отстал от современных тенденций фронтенд-разработки. Помню, были статьи на тему раздутия веб-среды, в которых писали, что средний размер страницы начал достигать нескольких мегабайтов!
И всё это время я жил с мыслью, что если средний размер страницы равен, скажем, 3 МБ, то JS-бандл должен составлять около 1 МБ. Естественно, основную часть объёма должно занимать содержимое, не так ли?
Что ж, проверить это можно лишь экспериментальным путём, чем я и займусь! Эту статью я пишу в 2024 году и думаю, что через пару лет эксперимент неплохо бы повторить.
Ссылка
#js