CodeRoll | Frontend
5.47K subscribers
1.46K photos
62 videos
1 file
703 links
— Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JavaScript, HTML, CSS, React, Vue,Angular

Купить рекламу: https://telega.in/c/coderoll

Чат: https://t.me/coderoll_chat

По всем вопросам пишите сюда - @poxvawe322
Download Telegram
Что будет в консоли ?
Anonymous Quiz
30%
Lamborghini
53%
Maserati
7%
ошибка
10%
undefined
Пояснение к ответу

Когда возвращается свойство, его значение равняется возвращаемому значению, а не значению, установленному в функции-конструкторе. Мы возвращаем строку Maserati, поэтому значением myCar.make является Maserati.

(() => {
let x = (y = 10)
})()

console.log(typeof x)
console.log(typeof y)
Пояснение к ответу

Выражение 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.
Мы проанализируем каждый метод, выявим их плюсы, минусы и сложность реализации.

Ссылка

#статьи

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()
Пояснение к ответу

Оператор delete позволяет удалять свойства объектов, включая свойства прототипов. Удаленное свойство прототипа становится недоступным в цепочке прототипов. Другими словами, функция bark после delete Dog.prototype.bark становится недоступной, однако мы все же пытаемся получить к ней доступ. Когда мы пытаемся вызвать нечто, не являющееся функцией, выбрасывается исключение TypeError: в данном случае TypeError: pet.bark is not a function, поскольку значением свойства bark объекта pet является undefined.
Как стать востребованным разработчиком
(Лекция без воды)


Классика IT: учите и отрабатываете одно, а в вакансиях видите другое. По итогу злитесь и начинаете по-новой.

А нужно получить набор знаний и навыков, которые востребованы в реальных проектах.

К примеру, на старте вам не нужно знать все паттерны проектирования. Знаний ООП и принципов SOLID будет вполне достаточно. А стандартный pet-проект с простейшими crud-операциями в вашем CV далеко не то, что хотят видеть рекрутеры.

Чтобы узнать, какие ключевые hard и soft skills качать в первую очередь, как искать лучшие вакансии в IT, сделать портфолио идеальным для работодателя и получить желанный оффер от 100 000 рублей, приходите на онлайн-эфир от «FAANG School».

Мастер-класс
проведет разработчик из BigTech-компании с многолетним опытом.

Переходите, полезные подарки уже ждут:
- Подробный гайд «Как найти работу в IT»
- Пошаговый Roadmap по Java
- Шпаргалка «Hotkey JetBrains IDE»
- Шпаргалка по Rest API
Разбираемся в серверных и клиентских компонентах в Next.js: когда, как и почему?

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)
Что будет в консоли ?
Anonymous Quiz
10%
10
49%
11
36%
ошибка
6%
NaN
Пояснение к ответу

Импортируемый модуль доступен только для чтения: мы не можем его изменять. Это можно сделать только перед экспортом. Когда мы пытаемся увеличить значение переменной 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
41%
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)