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
Разработка требований к программному обеспечению

Эта книга — подробное руководство по разработке качественных требований к программному обеспечению. Здесь описаны десятки проверенных на практике приемов выявления, формулирования, разработки, проверки, утверждения и тестирования требований, которые помогут разработчикам, менеджерам и маркетологам создать эффективное ПО. Настоящее издание дополнено новыми приемами, посвященными разработке требований в проектах гибкой разработки (agile).
Что нового привнес в JS стандарт ES6 или ECMAScript2015?

1. Стрелочные функции (Arrow Functions).

2. Классы (Classes).

3. Шаблонные строки (Template Strings).

4. Расширенные объектные литералы (Enhanced Object literals).

5. Деструктуризация (Object Destructuring).

6. Промисы (Promises).

7. Генераторы (Generators).

8. Модули (Modules).

9. Symbol.

10. Прокси (Proxies).

11. Множества (Sets).

12. Параметры по умолчанию.

13. Операторы rest и spread.

14. Блочная область видимости (ключевые слова «let» и «const»).
Какое значение примет result?
Anonymous Quiz
80%
2
5%
0
9%
NaN
6%
1
Что такое стрелочные функции (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 реальных вопросов на интервью и их реальных решений, чтобы вы могли хорошо подготовиться к следующему интервью.