Workflow:
- Расскажите о своей среде разработки (ОС, редактор, браузер(ы), прочие инструменты)
- Какую VCS используете? Как работали в команде? PR, методологии, оценка времени
- Использовали CI?
- Как узнаете о новинках в мире JS? Какие конференции/митапы посятили за последние полгода? Какую технологию изучили недавно?
Базовые вопросы
- Как браузер отрисовывает HTML-страницу на экране? (что происходит после получения ответа от сервера)
- Как можно оптимизировать загрузку внешних ресурсов на странице?
CSS:
- Какие единицы измерения CSS использовали? какие существуют?
- Какие способы позиционирования знаете? Чем они отличаются?
- Какие инструменты используете для CSS. (препроцессоры, постпроцессоры)
- Что такое box-sizing и чем он удобен?
JS:
- Что будет выведено в консоль и почему?
console.log(false == '0') console.log(false === '0')
- Развернуть каждое слово в предложении
Пример:
"Welcome to this Javascript Guide!"
должно стать"emocleW ot siht tpircsavaJ !ediuG"
- Вернуть только уникальные элементы из массива
var array = [1, 2, 3, 5, 1, 5, 9, 1, 2, 8];
-
Числа Харшад Числа харшад, или числа Нивена — натуральные числа, делящиеся нацело на сумму своих цифр. Таким числом является, например, 1729, так как 1729 = (1 + 7 + 2 + 9) × 91. Необходимо написать функции:
- проверка, что число является числом харшад
- получить заданное количество чисел харшад, начиная с указанного
-
Что будет выведено в консоль?
for(var i=0; i<5; i++) {
setTimeout (function() {
console.log(i);
}, i * 1000);
}
- Можно ли сделать этот код рабочим?
var a = { id: 1 },
b = { id: 2 };
a + b === 3;
b - a === 1;
- Какой результат будет?
var b = 5;
b.a = ‘some string’;
console.log(b.a);
- Реализовать функцию
curry
Простой вариант
function sum(a,b) { return a + b; }
function curry(method) {
// ...
}
var add2 = curry(sum, 2);
add2(3) === 5;
Усложненный вариант
function sum() {
// ...
}
console.log(sum()); // 0
console.log(sum(1)()); // 1
console.log(sum(1, 2)(2)()); // 5
console.log(sum(1)(2)(3)()); // 6
console.log(sum(1)(2)(3)(4, 4)()); // 14
- Что будет в консоли?
function name(a){
var a = 1;
console.log('Fist ' + a);
function a() {};
console.log('Second ' + a );
}
name(2);
- Скопировать массив
var arr = [1, 2, 3, 4, 5];
- Расскажите про event loop в JS. Как максимально быстро вызвать функции после текущего event loop'a
- Расскажите, что делает оператор
new
- Передать в конструктор все аргументы из функции в исходном порядке
- Найти общий корень для двух узлов в дереве
XX. Необязательно
// first
100['toString']['length']
// будет ли ошибка?
1..z
// third
var a = (1,5 - 1) * 2
var obj = {
a: 5,
b: {
c: 10
}
};
obj.__proto__ = {
a: 10,
b: {
c: 20
}
};
delete obj.a;
console.log(obj.a);
delete obj.a;
console.log(obj.a);
delete obj.b;
console.log(obj.b.c);
delete obj.b.c;
console.log(obj.b.c);
Что выведет каждый из консоль логов? Почему?
- У junior разработчика была задача: Сделать квадрат, который по клику меняет цвет (серый -> синий -> желтый -> зеленый).
Все по идее просто и понятно, а присылают вам такой (работающий!) код:
<style>
.sq {
width: 100px;
height: 100px;
margin: 15px;
background-color: gray;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
</style>
<div class="sq"></div>
<script>
var $sq = document.querySelector('.sq');
$sq.addEventListener('click', function() {
// навешиваем первый обработчик события (1)
this.classList.toggle('blue');
this.addEventListener('click', function() {
// навешиваем первый обработчик события (2)
this.classList.toggle('yellow');
this.addEventListener('click', function() {
// навешиваем первый обработчик события (3)
this.classList.toggle('green');
});
});
});
</script>
ES6:
- Какими возможностями ES6 пользуетесь?
- WeakMap / WeakSet, в чем преимущество?
React/Redux:
- Почему React? в чем ключевая особенность?
- Что такое Virtual DOM?
- Какие способы оптимизации рендеринга используете?
- Какие преимущества у stateless компонента?
- Что использовали для тестирования?
Дополнительно:
- reflow / repaint
- Layout trashing
- Вынос в отдельный слой композиции