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
function* generator(i) {
yield i
yield i * 2
}

const gen = generator(10)

console.log(gen.next().value)
console.log(gen.next().value)
Что будет в консоли ?
Anonymous Quiz
11%
[0, 10] и [10, 20]
12%
20 и 20
70%
10 и 20
7%
0, 10 и 10, 20
Пояснение к ответу

Выполнение обычных функций не может быть остановлено после их запуска. Однако, генераторы можно останавливать в процессе выполнения, а затем продолжать с места остановки. Каждый раз, когда в функции-генераторе встречается ключевое слово yield, функция возвращает значение, указанное после него. Обратите внимание, что в генераторе вместо return используется yield. Сначала мы инициализируем генератор с i равным 10. Мы вызываем генератор, используя метод next. Когда мы в первый раз вызываем генератор, iравняется 10. Движок JavaScriptвстречает первое ключевое слово yieldи возвращает значение i. После этого выполнение функции приостанавливается и 10 выводится в консоль. Затем мы снова вызываем функцию посредством next(). Она запускается с того места, где остановилась, с i равным 10. Движок встречает следующее ключевое слово yield и возвращает i * 2. iравно 10, поэтому возвращается 20.

const firstPromise = new Promise((res, rej) => {
setTimeout(res, 500, "one")
})

const secondPromise = new Promise((res, rej) => {
setTimeout(res, 100, "two")
})

Promise.race([firstPromise, secondPromise]).then(res => console.log(res))
Что будет в консоли ?
Anonymous Quiz
8%
one
46%
two
30%
two one
16%
one two
Пояснение к ответу

Когда мы передаем несколько промисов методу race, он возвращает первый разрешенный (выполненный или отклоненный) промис. В функцию setTimeout мы передаем задержку в 500 мс для первого промиса и в 100 мс - для второго. Это означает, что secondPromise разрешается первым со значением two. Переменная res имеет значение two, которое и выводится в консоль.

let person = { name: "John" }
const members = [person]
person = null

console.log(members)
Что будет в консоли ?
Anonymous Quiz
18%
null
40%
[null]
5%
[{}]
38%
[{ name: "John" }]
Пояснение к ответу

Сначала мы объявляем переменную person со значением объекта, содержащего свойство name. Затем мы объявляем переменную members. Мы делаем первый элемент этого массива равным [person]. Объекты взаимодействуют посредством ссылок при установке их равными друг другу. Когда мы назначаем ссылку из одной переменной в другую, создается копия этой ссылки (обратите внимание, что у этих переменных не одинаковые ссылки). Затем мы присваиваем переменной person значение null. Мы изменили только значение person, а не первый элемент массива, поскольку этот элемент имеет другую (скопированную) ссылку на объект. Первый элемент в members по-прежнему содержит ссылку на исходный объект. Когда мы выводим в консоль массив members, первый элемент этого массива содержит значение объекта, который и выводится в консоль.
Основы программирования на примере исходного кода MobX

Изучите ключевые концепции программирования, лежащие в основе популярной JavaScript-библиотеки MobX. Понимание этих концепций поможет вам применить лучшие практики программирования в работе.

Ссылка

#статьи

const person = {
name: "John",
age: 30
}

for (const item in person) {
console.log(item)
}
Пояснение к ответу

С помощью цикла for..in мы перебираем ключи объекта, в данном случае name и age. Ключи объекта (кроме Symbol) являются строками. В каждом цикле мы устанавливаем значение item равным текущему ключу, по которому он перебирается. Сначала item равен name, и выводится в консоль. Затем item равен age, что также выводится в консоль.
This media is not supported in your browser
VIEW IN TELEGRAM
👨‍💻 Изучаешь Frontend? Я тоже!

idk Frontend - канал, в котором я максимально подробно конспектирую весь мой путь обучения с самого старта.

С меня:
— Сложная теория простым языком;
— Практические примеры и объяснения;
— Крутые викторины по JS и шпаргалки;
— Работа над ошибками.

С тебя:
— Подписка @idk_frontend

Продолжим обучаться вместе! 👋
Please open Telegram to view this post
VIEW IN TELEGRAM
Мегагайд: культура работы с Git

За время работы в разных компаниях и над разными проектами я поняла, что Git — это не только (и не столько!) знание самой технологии и конкретных команд, но и определённая культура взаимодействия, практики, подходы, договорённости. Всё это помогает участникам команды лучше понимать друг друга и работать быстрее и чётче.

Поговорим как раз об этом — о том, что формирует культуру работы с Git: начнём с конвенций именования коммитов и закончим практиками работы в пуллреквесте. В конце статьи я поделюсь полезными ссылками на интерактивные обучалки, шпаргалки и гайды.

Ссылка

#статьи
Разбираемся с this в JavaScript раз и навсегда

Бесконечно можно смотреть на три вещи: как горит огонь, как течет вода и то как фронтендеры пишут очередную статью про this.

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

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

Ссылка

#статьи

const num = parseInt("7*6", 10)

console.log(num)
Что будет в консоли ?
Anonymous Quiz
28%
42
10%
"42"
32%
7
30%
NaN
Пояснение к ответу

Функция parseInt проверяет, являются ли символы в строке допустимыми с точки зрения используемой системы счисления (второй необязательный аргумент). Как только встречается недопустимый символ, синтаксический анализ строки прекращается и последующие символы игнорируются. * является недопустимым числом. Поэтому parseInt прекращает разбор строки и возвращает 7.
Попытка создать идеальный компонент формы

Как я создавал свою библиотеку для работы с формой, какие сложности встретил и как их решал. Попытка типизировать вообще все и несколько интересных typescript кейсов, которые могут оказаться полезными.

Ссылка

#статьи