👉 @frontendInterview

​Сравните использование конструкции async/await и генераторов для реализации одного и того же функционала

1. При итерировании генератора с использованием метода .next() каждый вызов этого метода приводит к возврату одного значения с помощью ключевого слова yield. При использовании конструкции async/await await-выражения выполняются последовательно.

2. Конструкция async/await упрощает реализацию определённого сценария использования генераторов.

3. Значения, возвращаемые генератором, всегда имеют вид {value: X, done: Boolean}, а асинхронные функции возвращают промисы, разрешаемые со значением X, либо завершаются с ошибкой.

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

Вот асинхронная функция:

 async function init() {
     const res1 = await doTask1();
     console.log(res1);

     const res2 = await doTask2(res1);
     console.log(res2);

     const res3 = await doTask3(res2);
     console.log(res3);

     return res3;
 }

 init();

Вот аналогичный генератор.
function runner(genFn) {
const itr = genFn();

function run(arg) {
let result = itr.next(arg);

if (result.done) {
return result.value;
} else {
return Promise.resolve(result.value).then(run);
}
}

return run;
}

// Вызывает функцию runner с передачей ей генератора
runner(function* () {
const res1 = await doTask1();
console.log(res1);

const res2 = await doTask2(res1);
console.log(res2);

const res3 = await doTask3(res2);
console.log(res3);

return res3;
});

👉 @frontendInterview

👉 @frontendInterview

The Art of WebAssembly (2021)

WebAssembly - это быстрая, компактная, портативная технология, которая оптимизирует производительность ресурсоемких веб-приложений и программ. The Art of WebAssembly призвана дать веб-разработчикам четкое представление о том, как работает эта технология, когда ее использовать (а когда нет) и как разрабатывать и развертывать приложения.

👉 @frontendInterview

Объединение двух массивов

Напишите функцию, которая принимает два массива и объединяет их, беря элементы из каждого по-очереди.

[a, b, c, d, e], [1, 2, 3, 4, 5]
//[a, 1, b, 2, c, 3, d, 4, e, 5]

[1, 2, 3], [a, b, c, d, e, f]
//[1, a, 2, b, 3, c, d, e, f]

👉 @frontendInterview

Deep Learning with JavaScript (2020)

Глубокое обучение изменило области компьютерного зрения, обработки изображений и приложений естественного языка. Теперь благодаря TensorFlow.js JavaScript-разработчики могут создавать приложения с глубоким обучением, не полагаясь на Python или R. Данная книга показывает программистам, как они могут работать с Deep Learning прямо в браузере. Она написана авторами библиотеки TensorFlow, которые предоставили качественные примеры использования и подробные инструкции для приложений глубокого обучения на JavaScript в вашем браузере или на Node.

👉 @frontendInterview

Преобразование типов

Иногда Javanoscript ведет себя не совсем очевидно. Разработчик должен знать правила, по которым выполняется преобразование типов во время выполнения операций. Знание правил может предотвратить множество ошибок.

Примеры кода, результат выполнения которого должен быть очевиден для разработчика:

5 + '2' // "52"

5 + '2' == '5' + '2' == '52'

5 - "2" // 3

5 - "2" == 5 - 2 == 3

true + true // 2

true + true == 1 + 1 == 2

👉 @frontendInterview

👨‍💻Как устроиться на первую работу в IT? Как не провалить собеседование? Какие скиллы отделяют джуна от миддла и как их прокачивать?

С начала пандемии в ИТ пришло множество новичков. Количество открытых джуниорских вакансий уменьшилось. Компании чаще ищут миддлов и сеньоров.
Попробуйте сравнить количество вакансий "джуниор фронтенд разработчик" и "мидл фронтенд разработчик" на хх.ру

Поэтому был создан журнал Без опыта не берем.

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

Он сам нанимал и менторил джунов, прошел более 100 собеседований. Работал в 7-ми компаниях и стартапах 🧙‍♂️

Про что узнаете?
- Трудоустройство. Где искать вакансии и как откликаться так, чтобы звали на интервью
- Разработка. Как решать сложные проблемы в коде, не усложняя
- Принципы и навыки. Что развивать джуну, чтобы стать уверенным миддлом и получить повышение.

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

👉 Присоединяйтесь

Перепишите пример c картинки, используя promise.

Promise это достаточно современный подход написания асинхронного кода. Ранее использовался подход с использованием колбеков. При большой вложенности получался т.н. «ад обратных вызовов».

При использовании промисов код выглядит читабельно и удобен для редактирования:


const printSec = (number) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(`${number} sec`)
resolve()
},
1000)
})
}

printSec(1)
.then(() => printSec(2))
.then(() => printSec(3))

👉 @frontendInterview

Адресная книга

Вам дана строка, в которой записаны друзья и штаты, в которых они проживают

Вам нужно написать функцию, которая отсортирует друзей по их штатам.

Пример:
ad3="John Daggett, 341 King Road, Plymouth MA
Alice Ford, 22 East Broadway, Richmond VA
Sal Carpenter, 73 6th Street, Boston MA"

Massachusetts
.....^John Daggett 341 King Road Plymouth Massachusetts
.....^Sal Carpenter 73 6th Street Boston Massachusetts
^Virginia
.....^Alice Ford 22 East Broadway Richmond Virginia

👉 @frontendInterview

👉 @frontendInterview

Как работает прототипное наследование в JS?

Каждый объект в JS имеет базовый объект – прототип. Если свойство не находится в исходном объекте, то поиск продолжается в его "родительском" объекте.

Установить прототип объекта можно только во время создания объекта: если вы создаете новый объект с помощью новой Func(), свойство объекта [[Prototype]] будет установлено на объект, на который ссылается Func.prototype.

👉 @frontendInterview

👉 @frontendInterview

Что произойдет со страничкой в результате выполнения кода с картинки?

Ничего особенного. Задачи будут добавляться в цикл событий, но они не вызовут ни переполнения стека, ни бесконечной очереди, которая затормозит весь сайт. Так как макротаски после выполнения пропускают один цикл для отрисовки контента и выполнения микротасков, в отличие от микротасков, которые выполняются все в очереди перед тем, как передать управление следующему пункту в цикле событий.

 foo() {
    return Promise.resolve(1).then(foo);
}

foo();

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

👉 @frontendInterview