Frontend Interview - собеседования по Javanoscript / Html / Css – Telegram
Frontend Interview - собеседования по Javanoscript / Html / Css
11.4K subscribers
2.1K photos
118 videos
319 files
530 links
Канал для подготовки к собеседованиям по фронтенду

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

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

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
Почему тернарный оператор так называется?

“Тернарный” означает три. Троичное выражение принимает три операнда: условие, выражение “then” и выражение “else”. Тернарные операторы не являются исключительными для JavaScript.

👉 @frontendInterview
Разделите строки

Напишите функцию, которая принимает строку и разбивает её на массив, состоящий из строк, содержащих по два символа. Если последнему символу не хватает пары, то к нему необходимо добавить знак "_".

Примеры
solution('abc') // should return ['ab', 'c_']
solution('abcdef') // should return ['ab', 'cd', 'ef']


👉 @frontendInterview
Чему равен margin между элементами #first и #second?
Anonymous Quiz
8%
5px
39%
7px
32%
12px
21%
0px
Пояснение

margin между абсолютно позиционированными элементами не схлопываются.

👉 @frontendInterview
👍2
Что делает строчка “use strict”;? Какие достоинства и недостатки от ее использования?

‘use strict’ это директива, используемая для включения строгого режима во всем скрипте или отдельных функциях.

Преимущества:
1. Не позволяет случайно создавать глобальные переменные.
2. Любое присваивание, которое в обычном режиме завершается неудачей, в строгом режиме выдаст исключение.
3. При попытке удалить неудаляемые свойства, выдаст исключение (в то время как в нестрогом режиме никакого действия бы не произошло).
4. Требует, чтобы имена параметров функции были уникальными.
5. this в глобальной области видимости равно undefined.
6. Перехватывает распространенные ошибки, выдавая исключения.
7. Исключает неочевидные особенности языка.

Недостатки:
1. Нельзя использовать некоторые особенности языка, к которым привыкли некоторые разработчики.
2. Нет доступа к function.caller и function.arguments.
3. Объединение скриптов, написанных в строгом режиме может вызвать проблемы.
Когда устроился на первую работу и начинаешь вникать в процессы.

👉 @frontendInterview
Почему считается хорошим тоном оставить глобальную область видимости (global scope) в нетронутом состоянии?

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

👉 @frontendInterview
Наследуемо ли CSS свойство background?
Anonymous Quiz
41%
Да
59%
Нет
Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?

Преимущества
1. Помогает избежать “callback hell”, который может быть нечитаемым.
2. Упрощает написание последовательного удобочитаемого асинхронного кода с помощью .then().
3. Упрощает написание параллельного асинхронного кода с помощью Promise.all().
4. С использованием промисов можно избежать следующих проблем, которые возникают при использовании callback-функций:
a) Колбэк-функция была вызвана слишком рано
b) Колбэк-функция была вызвана слишком поздно (или вовсе не была вызвана)
c) Колбэк-функция была вызвана слишком мало или слишком много раз
d) Не удалось передать необходимую среду/параметры
e) Были пропущены ошибки/исключения

Недостатки
1) Чуть более сложный код (спорно).
2) В старых браузерах, где не поддерживается ES2015, вам нужно загрузить полифил, чтобы их использовать.

👉 @frontendInterview
Пояснение

Ключевое слово yield вызывает остановку функции-генератора и возвращает текущее значение выражения, указанного после ключевого слова yield. Его можно рассматривать как аналог ключевого слова return в функции-генераторе.

Метод next() возвращает объект с двумя свойствами done и value.

В данном примере вызов первого next возвращает значение c первой остановки в генераторе. В консоль выводится значение второго вызова next.

👉 @frontendInterview
Секреты CSS

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

👉 @frontendInterview
Расшифровка римских цифр

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

Римское число пишется так:
 1990 = "MCMXC" (1000 = M, 900 = CM, 90 = XC)
2008 = "MMVIII" (2000 = MM, 8 = VIII).

Расшифровка:
Symbol Value
I 1
V 5
X 10
L 50
C 100
D 500
M 1,000


👉 @frontendInterview
JavaScript с нуля

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

👉 @frontendInterview
В чём опасность использования for .. in для объекта или массива?

For..in итерируется по всем полям объекта и его прототипов (т.е. проходит по всей цепочке прототипов).

В приведённом в вопросе коде проблем как таковых нет, но они могут появиться при использовании библиотек/полифиллов, которые переопределяют или создают новые свойства для прототипов стандартных конструкторов (таких как Array или Object).

Пример:
 var arr = [3, 4, 5]; 
Array.prototype.each = function() {/*some fancy polyfill*/};

for (var i in arr) {
console.log(i);
}
Выведет
 0 
1
2
each
Чтобы избежать таких проблем, можно воспользоваться методом Object.prototype.hasOwnProperty.

Модифицированный пример, который работает корректно:

 var arr = [3, 4, 5]; 
Array.prototype.each = function() {/*some fancy polyfill*/};

for (var i in arr) {
if (arr.hasOwnProperty(i)){
console.log(i);
}
}

👉 @frontendInterview