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
let c = { greeting: "Hey!" }
let d

d = c
c.greeting = "Hello!"
console.log(d.greeting)
Что будет в консоли ?
Anonymous Quiz
71%
Hello!
17%
Hey!
7%
undefined
4%
ошибка
Пояснение к ответу

В JavaScript все объекты являются "ссылочными" типами данных, т.е. значения объектов передаются по ссылкам. Сначала в переменной c создается ссылка на объект. Затем мы указываем переменной d ссылаться на тот же объект, на который ссылается c. При изменении объекта меняются значения всех указывающих на него ссылок.
Самые полезные библиотеки JS для красивых анимаций

Анимации добавляют жизни приложениям и сайтам и делают их простыми в использовании. Мы можем добавлять изменение кнопок при нажатии, всплывающие объекты, эффекты перехода и многое другое, что позволяет пользователю не просто ознакомиться с содержимым, а еще и интересно провести время.

Мы поговорим о библиотеках JavaScript, упрощающих добавление этих анимаций для разработчиков, делая приложения более приятными.

Ссылка

#статьи

let a = 3
let b = new Number(3)
let c = 3

console.log(a == b)
console.log(a === b)
console.log(b === c)
Пояснение к ответу

new Number - это встроенная функция-конструктор. И хотя она выглядит как число, это не настоящее число: у него имеется ряд дополнительных возможностей. На самом деле это объект. Оператор == (абстрактное/нестрогое равенство) разрешает преобразование типов данных, он проверяет равенство значений. Оба значения равны 3, поэтому возвращается true. При использовании оператора === (строговое равенство, оператор идентичности) должны совпадать не только значения, но и типы данных. В данном случае это не так: new Number() - это не число, а объект. Поэтому два последних сравнения возвращают false.
А точно ли программистам не нужны алгоритмы?

В разговорах со своими коллегами я очень часто слышал фразу «алгоритмы программистам не нужны», «алгоритмы никогда не используются в работе» и т. п. Я не являюсь ярым приверженцем того, что алгоритмы нужно учить и использовать их повсеместно, но я понимаю, как они могут помочь мне в жизни программиста.

Ссылка

#статьи

class Chameleon {
static colorChange(newColor) {
this.newColor = newColor
return this.newColor
}

constructor({ newColor = "green" } = {}) {
this.newColor = newColor
}
}

const freddie = new Chameleon({ newColor: "pink" })
freddie.colorChange("orange")
Что будет в консоли ?
Anonymous Quiz
43%
orange
14%
pink
10%
green
33%
ошибка
Почему вам необходим React Query

Не секрет, что я люблю React Query за то, как он упрощает взаимодействие с асинхронным состоянием в приложениях React. И я знаю, что многие коллеги-разработчики согласятся с этим.

Однако иногда я встречаю сообщения, в которых утверждается, что он вам не нужен для чего-то столь «простого», как получение данных с сервера.

Ссылка

#react

// обратите внимание: код выполняется в нестрогом режиме
let greeting
greetign = {} // опечатка!
console.log(greetign)
Что будет в консоли ?
Anonymous Quiz
54%
{}
13%
ошибка
27%
undefined
6%
""
Пояснение к ответу

С помощью выражения 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).