Как в 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

Гомогенные массивы

Вам дан двумерный массив. Необходимо убрать из него массивы, в которых есть элементы разных типов.

Пример:
filterHomogenous([[1, 5, 4], ['a', 3, 5], ['b'], [], ['1', 2, 3]])
//[[1, 5, 4], ['b']].

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

​Почему 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-ми компаниях и стартапах 🧙‍♂️

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

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

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