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

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

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

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
Пояснение к ответу

С помощью выражения greetign = {} мы создаем новый глобальный пустой объект, который выводится в консоль. Когда мы вместо greeting написали greetign, интерпретатор выполнил global.greetign = {} в Node.js (или window.greetign = {} в браузере). В строгом режиме ("use strict") будет выброшено исключение ReferenceError: greetign is not defined.
Rolldown — новый сборщик на основе Rollup

Rolldown - новый проект создателя Vue и Vite Evan You по переписыванию части Rollup на Rust для увеличения производительности сборки JavaScript приложений.

Rolldown может стать самым важным веб-проектом ближайших 5-10 лет. Я подумал, что будет полезно объяснить, почему:

Ссылка

#utils

function bark() {
console.log("Woof!")
}

bark.animal = "dog"

console.log(bark.animal)
Что будет в консоли ?
Anonymous Quiz
63%
dog
20%
ошибка
14%
undefined
2%
""
Пояснение к ответу

В JavaScript такое возможно, т.к. функции в JS - это тоже объекты. Точнее, функция — это специальный тип объекта, который можно вызывать (такой объект имеет внутренний слот callable). Кроме того, функция — это объект со свойствами, вызывать которые нельзя, поскольку они не являются функциями.

function Person(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}

const person = new Person("John", "Smith")
Person.getFullName = function () {
return `${this.firstName} ${this.lastName}`
}

console.log(person.getFullName())
Что будет в консоли ?
Anonymous Quiz
32%
ошибка
5%
""
50%
John Smith
13%
undefined undefined
Пояснение к ответу

Нельзя добавлять свойства к конструктору как к обычному объекту. Если необходимо добавить свойство или метод всем экземплярам, то следует использовать прототипы. В данном случае выражение Person.prototype.getFullName = function () { return ${this.firstName} ${this.lastName} } сделает метод getFullName рабочим. В чем здесь преимущество? Предположим, что мы добавили этот метод к конструктору. Возможно, он нужен не каждому экземпляру класса Person. Это приведет к лишнему расходованию памяти, т.к. все экземпляры будут иметь указанный метод. Напротив, если мы добавим данный метод к прототипу, у нас будет только одно место в памяти, к которому смогут обращаться все экземпляры. Такие методы называются совместными или распределенными (shared).

function Person(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}

const john = new Person("John", "Smith")
const jane = Person("Jane", "Air")

console.log(john)
console.log(jane)
Пояснение к посту

Мы создаем объект jane без помощи ключевого слова new. Использование new приводит к созданию нового объекта (экземпляра). Без new создается глобальный объект. Мы указали, что this.firstName равняется Jane и this.lastName равняется Air. На самом деле, мы определили global.firstName = 'Jane' и global.lastName = 'Air'. Значением jane является undefined, поскольку мы ничего не возвращаем из функции Person.

function sum(a, b) {
return a + b
}

console.log(sum(1, "2"))
Что будет в консоли ?
Anonymous Quiz
8%
NaN
4%
ошибка
65%
"12"
23%
3
Пояснение к ответу

JavaScript - это динамически типизированный язык: мы не определяем тип данных при объявлении переменных (для этого был придуман TypeScript). Значения переменных могут быть автоматически преобразованы из одного типа в другой без нашего участия. Это называется "неявным приведением типов". Приведение - это преобразование данных из одного типа в другой. В рассматриваемом примере JavaScript конвертировал число 1 в строку, чтобы операция имела смысл и вернула хоть какое-то значение. При сложении числа (1) и строки ("2") число преобразуется в строку. Мы можем объединять строки так: "Hello" + "World". Это называется конкатенацией строк. Таким образом, 1 + "2" возвращает "12".
Модули ES6: Rollup

Когда-то были времена, когда весь JavaScript-код приложения складывался в один огромный файл. Это было не только неудобно, но и было множество ошибок из-за глобального пространства имен и сложностей с зависимостями. Тогда появилась необходимость в модульности.

Ссылка

#статьи

let number = 0
console.log(number++)
console.log(++number)
console.log(number)
Что будет в консоли ?
Anonymous Quiz
22%
1 1 2
19%
1 2 2
51%
0 2 2
8%
0 1 2
Пояснение к ответу

Постфиксный оператор ++:

- возвращает значение (0);
- увеличивает (инкрементирует) значение (после чего значением переменной number становится 1).

Префиксный оператор ++:
- инкрементирует значение (теперь number === 2);
- возвращает значение (2). Результат: 0 2 2.
TypeScript: лучшие практики

TypeScript используется все чаще, начиная небольшими пет-проектами и заканчивая огромнейшими веб-приложениями. Но разработчики до сих пор не всегда используют всю мощь этого языка и совершают ошибки. Например, на некоторых проектах можно встретить кучу any и Function.

Давайте разберемся используете ли вы этот невероятно мощный инструмент правильно

Ссылка

#ts

function getPersonInfo(one, two, three) {
console.log(one)
console.log(two)
console.log(three)
}

const person = "John"
const age = 30

getPersonInfo`${person} is ${age} years old`