Пояснение к ответу
Метод fromEntries превращает двумерный массив в объект. Первый элемент в каждом подмассиве будет ключом, а второй элемент в каждом подмассиве будет значением. В этом случае мы сопоставляем массив keys, который возвращает массив, первый элемент которого является элементом массива ключей текущего индекса, а второй элемент является элементом массива значений текущего индекса.
Это создает массив подмассивов, содержащих правильные ключи и значения, что приводит к { name: "Lydia", age: 22 }
Это создает массив подмассивов, содержащих правильные ключи и значения, что приводит к { name: "Lydia", age: 22 }
Деструктуризация в React. Очевидно, но важно
Деструктуризация, которая появилась в стандарте ES6, уже не вызывает вопросов у многих из нас, есть большое количество статей, раскрывающих ее возможности. В основном, мы все тесно с ней дружим и пользуемся.
Казалось бы, что можно рассказать о том, о чем все и так знают? Но практика и чтение статей на Хабре, показали, что есть некоторые нюансы использования деструктуризации в React, о которых не все из нас знают или просто не задумываются, хотя они и являются очевидными.
Ссылка
#статьи
Деструктуризация, которая появилась в стандарте ES6, уже не вызывает вопросов у многих из нас, есть большое количество статей, раскрывающих ее возможности. В основном, мы все тесно с ней дружим и пользуемся.
Казалось бы, что можно рассказать о том, о чем все и так знают? Но практика и чтение статей на Хабре, показали, что есть некоторые нюансы использования деструктуризации в React, о которых не все из нас знают или просто не задумываются, хотя они и являются очевидными.
Ссылка
#статьи
const createMember = ({ email, address = {}}) => {
const validEmail = /.+@.+\..+/.test(email)
if (!validEmail) throw new Error("Valid email pls")
return {
email,
address: address ? address : null
}
}
const member = createMember({ email: "my@email.com" })
console.log(member)Пояснение к ответу
Значением по умолчанию для address является пустой объект {}. Когда мы устанавливаем переменную member равной объекту, возвращаемому функцией createMember, мы не передаем значение для адреса, что означает, что значение адреса является пустым объектом по умолчанию {}. Пустой объект является истинным значением, что означает, что условие address ? address : null условно возвращает true. Значением адреса является пустой объект {}.
Анатомия Htmx
htmx — это библиотека, которая предоставляет доступ к AJAX, переходам CSS, WebSockets и Server Sent Events прямо из HTML через атрибуты, что позволяет создавать современные пользовательские интерфейсы (насколько сложные — другой вопрос), пользуясь простотой и мощью гипертекста. На сегодняшний день у библиотеки почти 30 000 звезд на Github. Удивительно, что до такого решения мы додумались только сейчас, учитывая, что весь функционал был доступен уже 10 лет назад (вы сами убедитесь в этом, когда мы изучим исходный код htmx).
Ссылка
#статьи
htmx — это библиотека, которая предоставляет доступ к AJAX, переходам CSS, WebSockets и Server Sent Events прямо из HTML через атрибуты, что позволяет создавать современные пользовательские интерфейсы (насколько сложные — другой вопрос), пользуясь простотой и мощью гипертекста. На сегодняшний день у библиотеки почти 30 000 звезд на Github. Удивительно, что до такого решения мы додумались только сейчас, учитывая, что весь функционал был доступен уже 10 лет назад (вы сами убедитесь в этом, когда мы изучим исходный код htmx).
Ссылка
#статьи
let randomValue = { name: "Lydia" }
randomValue = 23
if (!typeof randomValue === "string") {
console.log("It's not a string!")
} else {
console.log("Yay it's a string!")
}Что будет на выходе?
Anonymous Quiz
50%
It's not a string!
33%
Yay it's a string!
14%
TypeError
2%
undefined
Пояснение к посту
Условие в операторе if проверяет, равно ли значение !typeof randomValue "строке". Оператор ! преобразует значение в логическое значение. Если значение истинно, возвращаемое значение будет "ложным", если значение ложным, возвращаемое значение будет "истинным". В этом случае возвращаемое значение typeof randomValue является истинным значением "number", что означает, что значение !typeof randomValue является логическим значением false.
!typeof randomValue === "string" всегда возвращает false, поскольку на самом деле мы проверяем false === "string". Поскольку условие вернуло false, запускается блок кода оператора else, и в журнал заносится сообщение Yay it's a string!.
!typeof randomValue === "string" всегда возвращает false, поскольку на самом деле мы проверяем false === "string". Поскольку условие вернуло false, запускается блок кода оператора else, и в журнал заносится сообщение Yay it's a string!.
function sayHi() {
console.log(name)
console.log(age)
var name = "John"
let age = 30
}
sayHi()Что будет в консоли ?
Anonymous Quiz
29%
John и undefined
19%
John и ошибка
14%
ошибка
38%
undefined и ошибка
Пояснение к ответу
В функции sayHi мы сначала определяем переменную name с помощью ключевого слова var. Это означает, что name поднимается в начало функции. name будет иметь значение undefined до тех пор, пока выполнение кода не дойдет до строки, где ей присваивается значение John. Мы еще не определили значение name, когда пытаемся вывести ее значение в консоль, поэтому получаем undefined. Переменные, объявленные с помощью ключевых слов let и const, также поднимаются в начало области видимости, но в отличие от переменных, объявленных с помощью var, не инициализируются, т.е. такие переменные поднимаются без значения. Доступ к ним до инициализации невозможен. Это называется временной мертвой зоной. Когда мы пытаемся обратиться к переменным до их определения, JavaScript выбрасывает исключение ReferenceError.
Typescript Generics
Javascript - крутой язык со своими преимуществами и недостатками. И одно из его свойств - это динамическая типизация, которая одновременно может быть как преимуществом, так и недостатком. Очень много холиварных тредов на этот счет, но по мне так все просто. Для небольших и простых проектов динамическая типизация - это очевидный плюс, так как сильно ускоряет разработку. Однако, когда речь идет о сложных системах, над которыми работает не один человек, сложно отрицать преимущество статической типизации. Ведь статические типы не только регламентируют систему, но и при больших размерах системы начинают ускорять разработку.
Ссылка
#ts
Javascript - крутой язык со своими преимуществами и недостатками. И одно из его свойств - это динамическая типизация, которая одновременно может быть как преимуществом, так и недостатком. Очень много холиварных тредов на этот счет, но по мне так все просто. Для небольших и простых проектов динамическая типизация - это очевидный плюс, так как сильно ускоряет разработку. Однако, когда речь идет о сложных системах, над которыми работает не один человек, сложно отрицать преимущество статической типизации. Ведь статические типы не только регламентируют систему, но и при больших размерах системы начинают ускорять разработку.
Ссылка
#ts
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1)
}
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1)
}Что будет в консоли ?
Anonymous Quiz
34%
0 1 2 и 0 1 2
12%
0 1 2 и 3 3 3
41%
3 3 3 и 0 1 2
13%
3 3 3 и 3 3 3
Пояснение к ответу
Из-за очереди событий в JavaScript функция обратного вызова setTimeout выполняется после освобождения стека вызовов. Так как переменная i в первом цикле определяется с помощью ключевого слова var, она является глобальной. В цикле мы каждый раз увеличиваем значение i на 1, используя оператор ++. К моменту выполнения setTimeout в первом примере значение i равняется 3. Во втором цикле переменная i определяется с помощью ключевого слова let. Такие переменные (а также переменные, объявленные с помощью ключевого слова const) имеют блочную область видимости (блок - это код внутри фигурных скобок - {}). На каждой итерации i будет иметь новое значение, и это значение будет замкнуто в области видимости внутри цикла.
const shape = {
radius: 10,
diameter() {
return this.radius * 2
},
perimeter: () => 2 * Math.PI * this.radius
}
console.log(shape.diameter())
console.log(shape.perimeter())Что будет в консоли ?
Anonymous Quiz
40%
20 и 62.83185307179586
45%
20 и NaN
10%
20 и 63
5%
NaN и 63
Пояснение к ответу
Обратите внимание, что diameter - это обычная функция, а perimeter - стрелочная. У стрелочных функций, в отличие от обычных, значение this указывает на внешнее/лексическое окружение. Это значит, что при вызове метода perimeter его this указывает не на объект shape, а на глобальный объект window. У этого объекта нет свойства radius, поэтому возвращается undefined.