Frontend Interview - собеседования по Javascript / Html / Css
10.4K subscribers
2.09K photos
118 videos
320 files
500 links
Канал для подготовки к собеседованиям по фронтенду

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/frontendinterview

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
Что такое шаблонные литералы (Template Literals)?

Шаблонные литералы — cпособ создания строк в JS. Они создаются с помощью двойных обратных кавычек ():

В шаблонных литералах нам не нужно экранировать одинарные кавычки.
// ES5
var greet = 'Hi I\'m Mark'

// ES6
let greet = `Hi I'm Mark`

В ES6 нам не нужно использовать управляющую последовательность "n" для перевода строки.
// ES5
var lastWords = 'n'
+ ' I n'
+ ' am n'
+ 'Iron Man n'

// ES6
let lastWords = `
I
am
Iron Man

В ES6 нам не нужно использовать конкатенацию строк для объединения текста с переменной: мы можем использовать выражение ${expr} для получения значения переменной.
// ES5
function greet(name){
return 'Hello ' + name + '!'
}

// ES6
function greet(name){
return `Hello ${name}!`
}
Какое значение у левого отступа элемента div?
Anonymous Quiz
5%
36px
11%
48px
12%
24px
72%
12px
​Что такое объект Set?

Объект Set позволяет хранить уникальные значения, примитивы и ссылки на объекты.

Экземпляр Set создается с помощью конструктора Set. Мы также можем передать ему некоторые значения при создании:
 const set1 = new Set()
const set2 = new Set(['a','b','c','d','d','e']) // вторая "d" не добавится

Мы можем добавлять значения в Set, используя метод add. Поскольку метод add является возвращаемым, мы может использовать цепочку вызовов:
 set2.add('f')
set2.add('g').add('h').add('i').add('j').add('k').add('k') // вторая "k" не добавится

Мы можем удалять значения из Set, используя метод delete:
 set2.delete('k') // true
set2.delete('z') // false, потому что в set2 нет такого значения

Мы можем проверить наличие свойства в Set, используя метод has:
 set2.has('a') // true
set2.has('z') // false

Для получения длины Set используется метод size:
 set2.size // 10

Метод clear очищает Set:
 set2.clear() // пусто

Мы можем использовать Set для удаления повторяющихся значений в массиве:
const nums = [1,2,3,4,5,6,6,7,8,8,5]
const uniqNums = [...new Set(nums)] // [1,2,3,4,5,6,7,8]
Карьера программиста

Настоятельно рекомендую эту книгу всем тем, кто хочет основательно подготовиться к интервью. Автор, Г. Лакман Макдауэлл, опытная инженер-программист, была и интервьюером, и кандидатом. Она научит вас находить скрытые детали в вопросах, разбивать проблемы на небольшие куски, а также поможет улучшить навык обучения.

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

Боб работает водителем автобуса. Он подъезжает к остановке и ему нужно посчитать, сколько пассажиров он может посадить в автобус.

Напишите функцию, которая принимет три параметра:
1 - количество людей, которое вмещает автобус.
2 - число людей, находящихся в автобусе.
3 - люди, ожидающие на остановке.

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

Примеры:
enough(10, 5, 5);
// 0, так как вместятся все
enough(100, 60, 50);
// 10, Не поместятся 10 из 50
Чистый код

Книга Роберта Мартина (или дяди Боба) “Чистый код” — одна из самых популярных книг по программированию. Она была написана для обучения инженеров-программистов принципам написания чистого программного кода. Книга содержит множество примеров, показывающих, как выполнять рефакторинг кода с целью сделать его более читабельным и поддерживаемым. Но учитывайте то, что издание ориентировано именно на Java. Хотя некоторые из шаблонов и техник распространяются на общее программирование и на другие языки, основной аудиторией книги являются Java-разработчики.

Следует также отметить, что книга вышла в 2008 году. Некоторая информация, например, форматирование кода, сегодня менее актуальна из-за доступных инструментов и IDE сред. Но все же, это отличная книга.
​В чём разница между объектно-ориентированным программированием (ООП) и функциональным программированием (ФП)?

Объектно-ориентированное программирование
ООП базируется на понятии «объекты». Это структуры данных, которые содержат поля данных – известные в JavaScript как «свойства» – и процедуры – известные как «методы».

Некоторые из встроенных объектов JavaScript используют эту парадигму, включая Math (для методов random, max и sin), JSON (для анализа данных JSON) и примитивные типы данных, такие как String, Array, Number и Boolean.

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

Функциональное программирование
ФП основывается на концепции «чистых функций», в которых нет разделяемого состояния, изменяемых данных и побочных эффектов.

При одинаковых входных параметрах чистая функция возвращает один и тот же результат. У неё нет побочных эффектов: например, логирования в консоль или изменения внешней переменной, помимо возвращения результата.

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

 const num = {
val: 1
};
const add5 = () => num.val += 5;
const multiply5 = () => num.val *= 5;
Если вызовем сначала add5, а затем multiply5, результат будет 30. Но если вызовем функции наоборот и запишем результат, то получим другое: 10.

Это идёт вразрез с принципом функционального программирования, так как результат функций различается в зависимости от контекста. Перепишем приведённый выше код так, чтобы результаты стали предсказуемыми:

 const num = {
val: 1
};
const add5 = () => Object.assign({}, num, {val: num.val + 5});
const multiply5 = () => Object.assign({}, num, {val: num.val * 5});
Теперь значение num.val остаётся равным 1, и независимо от контекста add5(num) и multiply5(num) будут давать один и тот же результат.
В чём разница между императивным и декларативным программированием?

Это общие термины, которые описывают общие характеристики нескольких парадигм программирования. ФП – пример декларативного программирования, а ООП – пример императивного программирования.

В базовом смысле императивное программирование касается того, как делать. Эта парадигма объясняет шаги конкретным образом и характеризуется циклами for и while, операторами if и switch и так далее.
 const sumArray = array => {
let result = 0;
for (let i = 0; i < array.length; i++) {
result += array[i]
};
return result;
}

Напротив, декларативное программирование сосредотачивается на том, что делать. При этом абстрагируется от описания, как делать, и опирается на выражения. Это часто приводит к получению более краткого кода, но при масштабировании его становится сложнее отлаживать из-за меньшей прозрачности.

Вот декларативный подход к функции sumArray(), написанной выше.

const sumArray = array => { return array.reduce((x, y) => x + y)
Заменить все элементы

Напишите функцию replaceAll, которая принимает первым параметром массив элементов, вторым параметром - элемент, который нужно заменить и третьим - элемент, который должен заменить второй элемент.

Пример:
replaceAll(array: [1,2,2], old: 1, new: 2) // [2,2,2]
Каково значение свойства padding-right у элемента div?
Anonymous Quiz
22%
20px
3%
10px
73%
30px
1%
0px
Стоит ли переопределять или расширять поведение прототипов?

Изменять поведение встроенных прототипов можно так же, как и создавать и расширять собственные прототипы, но почти каждый JavaScript-разработчик и большинство компаний не рекомендуют этого.

Если хотим, чтобы объекты имели одинаковое поведение, создаём пользовательский объект (или определяем собственный «класс» или «подкласс»), который наследуется от встроенного прототипа без внесения изменений в сам прототип. Если работаем с другими разработчиками, у них отчётливые ожидания относительно поведения JavaScript по умолчанию, и редактирование этого поведения по умолчанию может легко привести к ошибкам.

Однако стоит отметить, что не все разделяют это сильное сопротивление расширению встроенных прототипов. В статье 2005 года создатель JavaScript Брендан Эйх намекнул, что прототипная система на самом деле создавалась отчасти для возможности расширения!
C помощью какого метода можно преобразовать объект в JSON?
Anonymous Quiz
61%
JSON.stringify()
31%
JSON.parse()
3%
JSON.valueOf()
5%
JSON.toString()
Почему Math.max() меньше, чем Math.min()?

То, что Math.max() > Math.min() возвращает false, звучит неправильно, но на самом деле, в этом много смысла. Если аргументы не указаны, Math.min() возвращает бесконечность infinity, а Math.max() возвращает -infinity. Это часть спецификации для методов max() и min(), но за выбором стоит логика. Взгляните на код:

 Math.min(1) 
// 1

Math.min(1, infinity)
// 1

Math.min(1, -infinity)
// -infinity

Если -infinity считался бы аргументом по умолчанию для Math.min(), то каждый результат равнялся бы -infinity, что бесполезно. Поскольку аргумент по умолчанию равен infinity, добавление другого аргумента вернёт это число – желаемое поведение.