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
Что такое стрелочные функции (Arrow Functions)?

Стрелочные функции создаются быстрее и имеют более читаемый синтаксис, чем функциональные выражения. В стрелочных функциях опускается слово «function»:
// ES5
var getCurrentDate = function(){
return new Date()
}

// ES6
const getCurrentDate = () => new Date()
В стрелочной функции не обязательно использовать ключевое слово return, поскольку стрелочные функции неявно возвращают значения при условии, что мы возвращаем одно выражение или значение:
// ES5
function greet(name){
return 'Hello ' + name + '!'
}

// ES6
const greet = (name) => `Hello ${name}`
const greet2 = name = > `Hello ${name}`
Мы также можем передавать параметры стрелочным функциям. Если мы передаем один параметр, его можно не оборачивать в круглые скобки:
const getArgs = () => arguments

const getArgs2 = (...rest) => rest

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

На практике это означает, что они наследуют сущности this и arguments от родительской функции.
function Person(){
this.age = 0;

setInterval(() => {
this.age++; // `this` указывает на объект Person
}, 1000);
}

Еще одна вещь, которую убрали в стрелочных функциях кроме this, это arguments. В обычных функциях мы можем вывести arguments и посмотреть, чему равны наши аргументы.

const getTrack = function (artist, track) {
console.log(arguments);
return artist + ' ' + track;
}

console.log(getTrack('Artist', 'Track'));

В es6 это можно сделать с помощью оператора spread. Как аргумент функции он возвращает все оставшиеся аргументы. Если он указан один, то он вернет все аргументы, как раньше возвращала arguments. Выглядит это так

const getTrack = function (...args) {
console.log(args);
return args[0] + ' ' + args[1];
}
Просили крутую работу и ЗП в 2021?

Skillbox подготовили для вас новогодний подарок
скидки до 60% на все курсы и профессии:

👨‍💻 Frontend-разработчик

👨‍💻 Fullstack-разработчик

👨‍💻 Веб-разработчик

Успей записаться 👇
Доминантные элементы массива

Доминантным является элемент массива, который больше, чем сумма элементов, следующих за ним.

Напишите функцию, которая принимает массив чисел и возвращает массив из доминантных чисел.

Примеры:
 solve([1,21,4,7,5]) = [21,7,5] 
solve([5,4,3,2,1]) = [5,4,3,2,1]
Какое CSS свойство задает расстояние между буквами в слове?
Anonymous Quiz
81%
letter-spacing
10%
word-spacing
4%
text-align
5%
white-space
​Что такое классы (Classes)?

Классы — способ написания функций-конструкторов в JS.. В основе классов лежат те же прототипы и прототипное наследование:

// ES5
function Person(firstName, lastName, age, address){
this.firstName = firstName
this.lastName = lastName
this.age = age
this.address = address
}

Person.self = function(){
return this
}

Person.prototype.toString = function(){
return '[object Person]'
}

Person.prototype.getFullName = function(){
return this.firstName + ' ' + this.lastName
}

// ES6
class Person{
constructor(firstName, lastName, age, address){
this.firstName = firstName
this.lastName = lastName
this.age = age
this.address = address
}

static self(){
return this
}

toString(){
return '[object Person]'
}

getFullName(){
return `${this.firstName} ${this.lastName}`
}
}
Что такое шаблонные литералы (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) будут давать один и тот же результат.