​Почему 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

​Сравните использование конструкции 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