const result =
[1, 2, 3].map(num => {
if (typeof num === "number") return
return num * 2
})
console.log(result)
Что будет в консоли ?
Anonymous Quiz
20%
[]
8%
[null, null, null]
60%
[undefined, undefined, undefined]
12%
[ 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
11%
object и number
15%
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
10%
"Woof I am Rex" и ""
21%
"Woof I am Rex" и "Woof I am Rex"
33%
"Woof I am Rex" и undefined
37%
"Woof I am Rex" и ошибка
Пояснение к ответу
Оператор 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
(Лекция без воды)
Классика 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 являются серверные и клиентские компоненты, которые позволяют разработчикам управлять рендерингом на стороне сервера и на стороне клиента, в зависимости от требований проекта. Давайте разберемся в этих компонентах более подробно.
Ссылка
#статьи
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)