Что будет в консоли ?
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))
Пояснение к ответу
Функция add является функцией запоминания (мемоизации). С помощью запоминания мы можем кешировать результаты вызова функции, чтобы ускорить ее повторное выполнение. В данном случае мы создаем объект cache для хранения возвращаемых функцией значений. Если мы повторно вызовем функцию addFunction с тем же аргументом, она сначала проверит, имеется ли соответствующее значение в кеше. Если такое значение имеется, оно возвращается, что экономит время на выполнение функции. Иначе, если значение в кеше отсутствует, оно вычисляется и сохраняется. Мы вызываем addFunction() 3 раза с одним и тем же аргументом: при первом вызове для num, равном 10, значение, возвращаемое функцией, в кеше отсутствует. Условие if (num in cache) возвращает false, и выполняется блок else: Вычислено! 20 выводится в консоль, а результат добавляется в объект cache. cache теперь выглядит как { 10: 20 }. При повторном вызове значение для аргумента 10 возвращается из кеша. Условие if (num in cache) возвращает true, и Из кеша! 20 выводится в консоль. В третий раз мы передаем в функцию выражение 5 * 2, что оценивается (вычисляется) как 10. Объект cache содержит искомое значение. Условие if (num in cache) возвращает true, и Из кеша! 20 выводится в консоль.
var status = "😎"
setTimeout(() => {
const status = "😍"
const data = {
status: "😉",
getStatus() {
return this.status
}
}
console.log(data.getStatus())
console.log(data.getStatus.call(this))
}, 0)
Пояснение к ответу
Значение ключевого слова this зависит от того, в каком контексте оно используется. В методе getStatus this указывает на объект, которому принадлежит метод. Метод принадлежит объекту data, поэтому this указывает на этот объект. Когда мы выводим в консоль this.status, выводится свойство status объекта data или 😉. С помощью метода call мы можем изменить объект, на который ссылается this (изменить контекст this). В функциях ключевое слово this относится к объекту, которому принадлежит функция, либо к объекту, создаваемому с помощью функции-конструктора. Мы объявили функцию setTimeout для объекта global, поэтому в функции setTimeout ключевое слово this указывает на объект global. В глобальном объекте есть переменная status со значением 😎, которое и выводится в консоль.
class Person {
constructor(name) {
this.name = name
}
}
const member = new Person("John")
console.log(typeof member)