Frontend Interview - собеседования по Javascript / Html / Css

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

👉 @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

Кому нужны виртуальные помощники? Как их создавать и сколько можно заработать? 🗣12 июля Антон Виноградов, руководитель управления разработки веб-интерфейсов в SberDevices, расскажет о том, что вас ждет в области разработки чат-ботов и голосовых ассистентов. Вы познакомитесь с инструментами решения подобных задач и программой онлайн-курса, разработанного совместно с OTUS. 🎁Также Антон расскажет о возможности создать свой смартап на курсе и принять участие в конкурсе ассистентов Салют с призами до 2,5 млн. рублей. 👉🏻Регистрируйтесь на вебинар и готовьте свои вопросы эксперту: https://otus.pw/OFgz/

👉 @frontendInterview

​Почему JavaScript-программисты испытывают проблемы при использовании ключевого слова this? Самое важное, что нужно понять о this, заключается в том, что у функций нет фиксированного значения this. Это значение зависит от того, как именно вызывается функция. Если мы говорим о том, что функция вызывается с некоторым конкретным значением this, это значит, что это значение определяется не во время объявления функции, а во время её вызова. Вот некоторые особенности this: 1. Если функция вызывается в обычном виде (то есть, с использованием конструкции вида someFunc()), то this будет ссылаться на глобальный объект (в браузере это window). Если код выполняется в строгом режиме, то в this будет записано значение undefined. Если функция вызывается как метод объекта, то ключевое слово this будет представлено объектом, которому принадлежит метод. 2. Если функцию вызывают с использованием call или apply, this будет представлено тем, что указано в качестве первого аргумента call или apply. 3. Если функция вызывается в виде обработчика события, то в this будет целевой элемент события. 4. Если функцию вызывают в виде конструктора, с использованием ключевого слова new, то в this будет новый объект, прототип которого установлен в качестве свойства prototype функции-конструктора. 5. Если функция создана с использованием метода bind, то ключевое слово this функции будет жёстко привязано к значению, переданному bind в качестве первого аргумента. Это — единственное исключение из правила, в соответствии с которым функции не имеют жёстко заданного значения this. Функции, созданные с использованием bind, имеют иммутабельное значение this. 👉 @frontendInterview

👉 @frontendInterview

Как организовать «глубокую заморозку» объекта? Для того чтобы обеспечить «глубокую заморозку» объекта с использованием Object.freeze(), нужно создать рекурсивную функцию, которая «замораживает» свойства объекта, которые также являются объектами. Вот — «глубокая заморозка»:

 function deepFreeze(object) {
     let propNames = Object.getOwnPropertyNames(object);
     for (let name of propNames) {
         let value = object[name];
         object[name] = value && typeof value === "object" ? deepFreeze(value) : value;
     }
     return Object.freeze(object);
 }
 let person = {
     name: "Leonardo",
     profession: {
         name: "developer"
     }
 };
 deepFreeze(person);
 person.profession.name = "doctor"; // TypeError: Cannot assign to read only property 'name' of object

Сообщение об ошибке выводится лишь в строгом режиме. В обычном режиме значение не меняется без вывода сообщений об ошибках. 👉 @frontendInterview

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ Залили мемы для программистов на Продакшн ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

👉 @frontendInterview

Гомогенные массивы Вам дан двумерный массив. Необходимо убрать из него массивы, в которых есть элементы разных типов. Пример: filterHomogenous([[1, 5, 4], ['a', 3, 5], ['b'], [], ['1', 2, 3]]) //[[1, 5, 4], ['b']]. 👉 @frontendInterview

Как в JavaScript-функции передаются параметры: по ссылке или по значению? Параметры всегда передаются по значению, но в переменные, представляющие объекты, записаны ссылки на объекты. Поэтому, когда в функцию передают объект и меняют свойство этого объекта, это изменение сохраняется в объекте и при выходе из функции. В результате возникает ощущение того, что параметры в функции передаются по ссылке. Но если изменить значение переменной, представляющей объект, это изменение не повлияет на объекты, находящиеся за пределами функции. Вот пример:

 function changeStuff(a, b, c) {
   a = a * 10;
   b.item = "changed";
   c = {item: "changed"};
 }

 var num = 10;
 var obj1 = {item: "unchanged"};
 var obj2 = {item: "unchanged"};

 changeStuff(num, obj1, obj2);

 console.log(num);
 console.log(obj1.item);
 console.log(obj2.item);

Вот что выведет этот код: 10 changed unchanged 👉 @frontendInterview

В чём разница между объектами Map и WeakMap? Эти объекты ведут себя по-разному в том случае, если переменная, содержащая ссылку на объект, являющийся ключом одной из пар ключ/значение, оказывается недоступной. Вот пример:

 var map = new Map();
 var weakmap = new WeakMap();

 (function() {
     var a = {
         x: 12
     };
     var b = {
         y: 12
     };

     map.set(a, 1);
     weakmap.set(b, 2);
 })()

После того, как завершается выполнение IIFE, у нас уже не будет доступа к объектам a и b. Поэтому сборщик мусора удаляет ключ b из weakmap и очищает память. А вот содержимое map остаётся при этом неизменным. В результате оказывается, что объекты WeakMap позволяют сборщику мусора избавляться от тех своих записей, на ключи которых нет ссылок во внешних переменных 👉 @frontendInterview

Лень искать тесты по JavaScript? Для вас уже все сделали! 🔥 Канал "Front Wars | JavaScript, HTML, CSS " Публикует полезные тесты которые помогут вам закрепить знания в программирование. 👉 Подписывайтесь и начинайте прокачиваться прямо сейчас @FrontWars