Расскажите, как работает прототипное наследование

Этот вопрос очень часто задают на собеседованиях. Все объекты в JavaScript имеют свойство prototype, которое является ссылкой на другой объект. Когда происходит обращение к свойству объекта, и если свойство не найдено в этом объекте, то механизм JavaScript просматривает прототип объекта, затем прототип прототипа и т.д. До тех пор, пока не найдет определенное свойство на одном из прототипов или до тех пор, пока он не достигнет конца цепочки прототипов. Такое поведение имитирует классическое наследование, но на самом деле это скорее делегирование, чем наследование.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

​Объясните, почему это не является IIFE: `function foo(){ }();`. Что необходимо изменить, чтобы это стало IIFE??

IIFE расшифровывается как Immediately Invoked Function Expression — немедленно вызываемое функциональное выражение. Синтаксический анализатор JavaScript читает function foo(){ } (); как function foo(){ } и ();, где первое выражение — это объявление функции, а второе (пара скобок) — попытка вызова функции, но так как имя не указано, он выдает ошибку Uncaught SyntaxError: Unexpected token.

Вот два способа исправить это, которые заключаются добавление дополнительных скобок: (function foo(){ })() и (function foo(){ }()). Выражения, начинающиеся с function, считаются объявлениями функций. Оборачивая эту функцию внутри (), она становится функциональным выражением, которое затем может быть выполнено с последующим (). Подобные функции не отображаются в глобальной области видимости, и вы можете даже не указывать им имя, если вы не будете на них ссылаться.

Вы также можете использовать оператор void — void function foo(){ }(). К сожалению, с таким подходом есть одна проблема. Выполнение данного выражения всегда возвращает undefined, поэтому, если ваше IIFE возвращает что-либо, вы не можете его использовать.
Пример:
const foo = void function bar() { return ‘foo’; }();
console.log(foo); // undefined

👉 @frontendInterview

Грокаем функциональное мышление

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

Большую часть «действий», изменяющих состояние, можно превратить в «вычисления», чтобы ваш код стал проще и логичнее.
Вы научитесь бороться со сложными ошибками синхронизации, которые неизбежно проникают в асинхронный и многопоточный код, узнаете, как компонуемые абстракции предотвращают дублирование кода, и откроете для себя новые уровни его выразительности.
Книга предназначена для разработчиков среднего и высокого уровня, создающих сложный код. Примеры, иллюстрации, вопросы для самопроверки и практические задания помогут надежно закрепить новые знания.

👉 @frontendInterview

Разбить camelCase

Напишите функцию, которая будет разбивать строки в camelCase на отдельные слова.

Примеры:
"camelCasing" => "camel Casing"
"identifier" => "identifier"
"" => ""

👉 @frontendInterview

Что делает и для чего нужна функция `Function.prototype.bind`?

Метод bind() создаёт новую функцию, которая при вызове устанавливает в качестве контекста выполнения this предоставленное значение. В метод также передаётся набор аргументов, которые будут установлены перед переданными в привязанную функцию аргументами при её вызове.

👉 @frontendInterview

👉 @frontendInterview

Можете ли вы описать основное различие между циклом `.forEach` и циклом `.map()`?

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

forEach
- Перебирает элементы в массиве.
- Вызывает callback-функцию для каждого элемента.
- Не возвращает значение.

 const a = [1, 2, 3];
 const doubled = a.forEach((num, index) => {
   // Делаем что-либо с num и/или index.
 });
 // doubled = undefined

map
- Перебирает элементы в массиве.
- “Сопоставляет” каждый элемент с новым элементом, вызывая функцию для каждого элемента, создавая в результате новый массив.

 const a = [1, 2, 3];
 const doubled = a.map(num => {
   return num * 2;
 });
 // doubled = [2, 4, 6]

Основное различие между .forEach и .map() состоит в том, что .map() возвращает новый массив. Если вам нужен результат, но вы не хотите изменять исходный массив, .map() — очевидный выбор. Если вам просто нужно перебрать массив, то стоит воспользоваться forEach.

👉 @frontendInterview

👉 @frontendInterview

В каких случаях обычно используются анонимные функции?

Они могут использоваться в IIFE для инкапсуляции кода в локальную область видимости, чтобы объявленные в ней переменные не попадали в глобальную область видимости.

 (function() {
   // Здесь код функции.
 })();

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

 setTimeout(function() {
   console.log('Hello world!');
 }, 1000);

Аргументы в конструкциях функционального программирования или Lodash (аналогично callback-функциям).
const arr = [1, 2, 3];
const double = arr.map(function(el) {
return el * 2;
});
console.log(double); // [2, 4, 6]

👉 @frontendInterview

Не заставляйте меня думать. Веб-юзабилити и здравый смысл

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

👉 @frontendInterview

Не пейте воду

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

======================
| Density Chart |
======================
| Honey | H | 1.36 |
| Water | W | 1.00 |
| Alcohol | A | 0.87 |
| Oil | O | 0.80 |
----------------------

[ [
['H', 'H', 'W', 'O'], ['O','O','O','O']
['W', 'W', 'O', 'W'], => ['W','W','W','W']
['H', 'H', 'O', 'O'] ['H','H','H','H']
] ]

👉 @frontendInterview