Что будет в консоли ?
Anonymous Quiz
21%
[]
9%
[null, null, null]
58%
[undefined, undefined, undefined]
11%
[ 3 x empty ]
Пояснение к ответу
Метод map возвращает новый массив с обработанными с помощью функции обратного вызова элементами исходного массива. В данном случае элементы исходного массива являются числами, поэтому условие if typeof num === 'number' удовлетворяется. После этого выполнение функции останавливается, в новый массив попадает значение переменной num, равное undefined.
React Conf 2024. React v19
Только что завершилась Конференция React.js. Долгожданная конференция спустя почти 3 года после предыдущей. Не менее долгожданны и обновления реакта. И именно с них была начата конференция, им и будет посвящена статья. И да, как вы увидели из превью — 19 версия перешла в статус release candidate. Полноценный же релиз нам обещают в течении двух недель.
В целом, мне как next.js разработчику большая часть была знакома. Десятки статей на хабре уже рассказали о практически каждой части этого обновления, частично их касался и я рассказывая об обновлениях внесённых в next.js.
Можно сказать, что главным направлениям этого обновления было достижение «Высокого UX при высоком DX». Максимальная производительность при максимально простом коде. И так, а теперь к самой конференции.
Ссылка
#react
Только что завершилась Конференция React.js. Долгожданная конференция спустя почти 3 года после предыдущей. Не менее долгожданны и обновления реакта. И именно с них была начата конференция, им и будет посвящена статья. И да, как вы увидели из превью — 19 версия перешла в статус release candidate. Полноценный же релиз нам обещают в течении двух недель.
В целом, мне как next.js разработчику большая часть была знакома. Десятки статей на хабре уже рассказали о практически каждой части этого обновления, частично их касался и я рассказывая об обновлениях внесённых в next.js.
Можно сказать, что главным направлениям этого обновления было достижение «Высокого UX при высоком DX». Максимальная производительность при максимально простом коде. И так, а теперь к самой конференции.
Ссылка
#react
function Car() {
this.make = "Lamborghini"
return { make: "Maserati" }
}
const myCar = new Car()
console.log(myCar.make)
Пояснение к ответу
Когда возвращается свойство, его значение равняется возвращаемому значению, а не значению, установленному в функции-конструкторе. Мы возвращаем строку Maserati, поэтому значением myCar.make является Maserati.
(() => {
let x = (y = 10)
})()
console.log(typeof x)
console.log(typeof y)
Что будет в консоли ?
Anonymous Quiz
44%
undefined и number
31%
number и number
10%
object и number
14%
number и undefined
Пояснение к ответу
Выражение let x = y = 10 на самом деле является сокращением для y = 10; let x = y. Когда мы устанавливаем y равным 10, мы фактически добавляем свойство y к глобальному объекту (window в браузере, global в Node.js). В браузере window.y теперь равняется 10. Затем мы объявляем переменную x со значением y. Переменные, объявленные с помощью ключевых слов let и const, имеют блочную область видимости, они доступны только в том блоке, в котором они объявлены. Таким блоком в данном случае является немедленно вызываемое функциональное выражение (Immediately Invoked Function Expression, IIFE). Когда мы используем оператор typeof, операнд x не определен: мы пытаемся получить доступ к x вне блока его объявления. Это означает, что x имеет значение undefined. Переменные, которым не присвоено значение, по умолчанию имеют значение undefined. Выражение console.log(typeof x) возвращает undefined. Однако, мы создали глобальную переменную y, присвоив ей значение 10. Это значение доступно в любом месте кода. y определена и содержит значение типа number. Поэтому выражение console.log(typeof y) возвращает number.
Асинхронный веб: WebSocket, Server-Sent Events, Long Polling и Short Polling
Веб-разработка часто требует реализации механизмов обновления контента на странице в реальном времени. Существуют различные сценарии, где это необходимо, например, отображение прогресса выполнения тяжелых задач на бекенде, обновление каких-либо часто меняющихся данных, будь то курсы валют или мониторинг какой-то активности, чаты, различные уведомления. Эти сценарии объединяет одна общая особенность: источник события необходимости обновления данных находится не на клиентской стороне, поэтому мы хотим получать события с бекенда. В данной статье мы рассмотрим четыре популярных подхода к реализации этой функциональности: WebSocket, Server-Sent Events (SSE), Long Polling и Short Polling.
Мы проанализируем каждый метод, выявим их плюсы, минусы и сложность реализации.
Ссылка
#статьи
Веб-разработка часто требует реализации механизмов обновления контента на странице в реальном времени. Существуют различные сценарии, где это необходимо, например, отображение прогресса выполнения тяжелых задач на бекенде, обновление каких-либо часто меняющихся данных, будь то курсы валют или мониторинг какой-то активности, чаты, различные уведомления. Эти сценарии объединяет одна общая особенность: источник события необходимости обновления данных находится не на клиентской стороне, поэтому мы хотим получать события с бекенда. В данной статье мы рассмотрим четыре популярных подхода к реализации этой функциональности: WebSocket, Server-Sent Events (SSE), Long Polling и Short Polling.
Мы проанализируем каждый метод, выявим их плюсы, минусы и сложность реализации.
Ссылка
#статьи
class Dog {
constructor(name) {
this.name = name
}
}
Dog.prototype.bark = function() {
console.log(`Woof I am ${this.name}`)
}
const pet = new Dog("Rex")
pet.bark()
delete Dog.prototype.bark
pet.bark()
Что будет в консоли ?
Anonymous Quiz
9%
"Woof I am Rex" и ""
19%
"Woof I am Rex" и "Woof I am Rex"
33%
"Woof I am Rex" и undefined
38%
"Woof I am Rex" и ошибка
Пояснение к ответу
Оператор delete позволяет удалять свойства объектов, включая свойства прототипов. Удаленное свойство прототипа становится недоступным в цепочке прототипов. Другими словами, функция bark после delete Dog.prototype.bark становится недоступной, однако мы все же пытаемся получить к ней доступ. Когда мы пытаемся вызвать нечто, не являющееся функцией, выбрасывается исключение TypeError: в данном случае TypeError: pet.bark is not a function, поскольку значением свойства bark объекта pet является undefined.
Разбираемся в серверных и клиентских компонентах в Next.js: когда, как и почему?
Next.js предлагает широкие возможности для создания высокопроизводительных веб-приложений. Важной частью его функциональности с появлением Next App Router являются серверные и клиентские компоненты, которые позволяют разработчикам управлять рендерингом на стороне сервера и на стороне клиента, в зависимости от требований проекта. Давайте разберемся в этих компонентах более подробно.
Ссылка
#статьи
Next.js предлагает широкие возможности для создания высокопроизводительных веб-приложений. Важной частью его функциональности с появлением Next App Router являются серверные и клиентские компоненты, которые позволяют разработчикам управлять рендерингом на стороне сервера и на стороне клиента, в зависимости от требований проекта. Давайте разберемся в этих компонентах более подробно.
Ссылка
#статьи
// counter.js
let counter = 10
export default counter
// index.js
import myCounter from "./counter.js"
myCounter += 1
console.log(myCounter)
Пояснение к ответу
Импортируемый модуль доступен только для чтения: мы не можем его изменять. Это можно сделать только перед экспортом. Когда мы пытаемся увеличить значение переменной myCounter, возникает ошибка myCounter доступен только для чтения и не может быть изменен.
const name = "John"
age = 30
console.log(delete name)
console.log(delete age)
Что будет в консоли ?
Anonymous Quiz
34%
false и true
10%
John и 30
15%
true и true
40%
undefined и undefined
Пояснение к ответу
Оператор delete возвращает логическое значение: true при успешном удалении, иначе - false. Однако, переменные, объявленные с помощью ключевых слов, не могут быть удалены с помощью delete. Переменная name была объявлена с помощью ключевого слова const, поэтому возвращается false. Когда мы устанавливаем переменную age равной 30, мы фактически добавляем свойство age к глобальному объекту (window.age в браузере, global.age в Node.js). Свойства объектов, включая глобальный, удалять можно, поэтому выражение delete age возвращает true.
const add = () => {
const cache = {}
return num => {
if (num in cache) {
return `Из кеша! ${cache[num]}`
} else {
const result = num + 10
cache[num] = result
return `Вычислено! ${result}`
}
}
}
const addFunction = add()
console.log(addFunction(10))
console.log(addFunction(10))
console.log(addFunction(5 * 2))