Типичные вопросы на собеседовании javascript разработчика
Для успешного прохождения на должность javascript developera рекомендуем вам почитать эту статью и изучить все важные моменты и подводные камни.
Первое что всегда спрашивают это опыт работы, поэтому если у вас нет опыта работы в front end и js рекомендуем поискать "подработку" вначале у нас на сайте и так же изучить типичные и возможные вопросы на собеседовании которые вам могут задать интервьюеры.
Общие вопросы по front-end
- Методологии и подходы написания CSS?
- GruntJS,Gulp, Bower, npm — для чего используются?
- RequireJS (или подобные) — зачем нужны?
- Тестирование: какие библиотеки знаете для тестирования, что использовали на практике? (какие подводные камни были и тд)
- Как логировать JS ошибки с клиента, какие "подводные" камни?
- Какие фреймворки знаете/использовали на практике (если не использовали, то почему), как они устроены внутри.
- Паттерны проектирования
- Другие вопросы из области вёрстки (css, html)
Детальнее читайте в блоге "Вопросы на собеседовании на должность front-end разработчика"
Общие вопросы по javascript
Eсть ли разница между window и document?
Ответ: Да. У JavaScript есть глобальный объект и всё происходит через него. window – тот самый объект, который хранит глобальные переменные, функции, местоположение, историю. Всё находится внутри него, setTimeout, XMLHttpRequest, console и localStorage также являются частью window. Аналогично дело обстоит и с document, который является свойством объекта window и представляет DOM. Все ноды – это часть document, следовательно, вы можете использовать getElementById или addEventListener для document. Но обратите внимание, что этих методов нет в объекте window.
Вызываются ли document.onload и window.onload одновременно?
window.onload вызывается, когда DOM готов и весь контент, включая картинки, стили, фреймы и т.д. загружен. document.onload вызывается когда дерево DOM выстроено, но до момента, как подгружаются картинки, стили и пр.
Как предотвратить нажатие по ссылке?
Использовать preventDefault() внутри обработчика события.
Как остановить дальнейшее распространение события?
Вызвать event.stopPropagation();
Могу ли я удалить удалить обработчик события с элемента?
Да. target.removeEventListener(‘click’, handler)
Как я могу запустить обработчик в фазе захвата, а не в фазе всплытия?
В методах addEventListener и removeEventLister есть третий опциональный параметр. Вы можете установить его в true или false в зависимости от того хотите или нет использовать фазу захвата.
Каким образом можно предотвратить множественный вызов обработчика для одного события?
Если слушатель события прикреплён к одному и тому же типу (click, keydown, и т.д.) элемента, вы можете вызвать event.stopImmediatePropagation() в первом обработчике и другие не будут выполнены.
Самовызывающиеся функции.
Тоже весьма частый вопрос на собеседованиях. Ещё иногда подходят к этому со стороны jQuery: «Почему все плагины обособлены в конструкцию
(function() {})();?».
Как поменять контекст функции. Частичное применение функции.
Тут нужно описать разницу между
.call,.applyи.bindи некоторых стандартных решений на уровне языка.
Разница между операторами == и ===
Оператор == сравнивает на равенство, а вот === — на идентичность. Плюс оператора === состоит в том, что он не приводит два значения к одному типу. Именно из-за этого он обычно и используется.
Напишите регулярное выражение для проверки строк соответствующих формату даты dd.mm.yyyy. или подобное.
Каков будет результат выполнения следующего кода:
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 0);
}
Что вернет выражение +new Date()? Чем отличается от Date.now().
Отличный вопрос. Ответ в том, что +new Date(); создаст экземпляр объекта Date и благодаря + переведет его в числовой формат. Во втором случае вызовется статический метод конструктора, который является более приоритетным, т.к. во-первых он не требует создания экземпляра, а во-вторых является более понятным.
Напишите функцию принимающую строку с именем файла и возвращающую расширение (фрагмент после последней точки)
function getExtension(filename) {
var fragments = filename.split(".");
return fragments[fragments.length - 1];
}
В чём опасность использования for .. in для объекта или массива?
For..in итерируется по всем полям объекта [b]и его прототипов[/b] (т.е. проходит по всей цепочке прототипов).
В приведённом в вопросе коде проблем как таковых нет, но они могут появиться при использовании библиотек/полифиллов, которые переопределяют или создают новые свойства для прототипов стандартных конструкторов (таких как 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); } }Примечание:
Многие инструменты для статического анализа JavaScript кода считают for .. in без фильтрации с hasOwnProperty не безопасным.
Какие языковые конструкции в javascript создают scope? Что произойдет при выполнении следующего куска кода?
var a = 90100;
function someFunc(){
if(false){
var a = 1;
} else {
var b = 2;
}
console.log(b);
console.log(a); //(1)
}
someFunc();
В javascript только функции создают новый scope.
console.log(i) //i здесь уже будет undefined for(var i = 0; i < 2; i++){ }Код в вопросе аналогичен следующему:
var a = 90100; function someFunc(){ var a; var b; if(false){ a = 1; } else { b = 2; } console.log(b); console.log(a); //(1) переменную a переопределили в функции } someFunc();Результат выполнения:
2 undefined
Что такое hoisting или "поднятие переменных"? Что произойдет при выполнении следующего куска кода?
myname = "global";
function func() {
console.log(myname);
var myname = "local";
console.log(myname);
}
func();
Интерпретатор JavaScript всегда перемещает («поднимает») объявления функций и переменных в начало области видимости (вверх текущего скрипта или функции). Код в вопросе аналогичен следующему:
myname = "global"; function func() { var myname; console.log(myname); // "undefined" myname = "local"; console.log(myname); // "local" } func();В консоль будет напечатано:
undefined local
Как добавлять элементы на HTML страницу динамически ?
Создание новых элементов осуществляется с помощью document.createElement(tagName);
После создания элемента его нужно присоединить к родительскому элементу с помощью .appendChild(node);
Пример:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Title</title> <script type="text/javascript"> function addNode() { var newP = document.createElement("p"); var textNode = document.createTextNode(" I'm a new text node"); newP.appendChild(textNode); document.getElementById("target").appendChild(newP); } </script> </head> <body onload="addNode();"> <p id="target">sart here<p> </body> </html>
В чем разница между Object.getOwnPropertyNames() и Object.keys()
Object.getOwnPropertyNames() возвращает перечислимые и не перечислимые свойства из объекта или массива.
var arr = ["a", "b", "c"]; print(Object.getOwnPropertyNames(arr).sort()); // prints "0,1,2,length" // Array-like object var obj = { 0: "a", 1: "b", 2: "c"}; print(Object.getOwnPropertyNames(obj).sort()); // prints "0,1,2"Object.keys() возвращает перечислимые свойства из объекта или массива.
Пример:var arr = ["a", "b", "c"]; alert(Object.keys(arr)); // will alert "0,1,2" // array like object var obj = { 0 : "a", 1 : "b", 2 : "c"}; alert(Object.keys(obj)); // will alert "0,1,2"
С помощью какой конструкции языка можно управлять потоком выполнения скрипта и отслеживать ошибки?
Это возможно с помощью конструкции try{}... catch{}
try { var number = 9; alert( number.toString(2) ); // ... alert('Выполнено без ошибок!'); } catch(e) { alert('Ошибка!'); }
Почему вызов a(); происходит успешно, а вызов b(); выдает ошибку?
a(); //ok
b(); //error
var b = function(){
alert( 'function b');
}
function a(){
alert( 'function a' );
}
Функция а() инициализируется на этапе загрузки скрипта, как бы "всплывает вверх" а функция б инициализируется, когда объявляется переменная b
Что такое глобальные переменные ? Как они создаются ? Какие проблемы связаны с использованием глобальных переменных?
Глобальная переменная - переменная, которая доступна (видима) во всем документе, в отличии от локальной (ограничена рамками блока программного кода, внутри которого она определена)
Пример:var myvar = 5; function myFunction(){ alert(myvar); // 5 }Большинство JavaScript разработчиков избегает использования глобальных переменных. Одна из причин - возможный конфликт имен глобальных и локальных переменных. Так же код использующий глобальные переменные может быть тяжелее сопровождать и тестировать.
Что такое замыкания (closure) в JavaScript?
Простыми словами это внутренняя функция, т.е. функция в функции.
Замыканием (closure) называют потому, что после выполнения родительской или внешней функции, код внутренней все еще "живет" в интерпретаторе, и его можно выполнить. Ошибок не возникнет даже если внутренняя функция (замыкание) будет использовать переменные из внешней функции.
Например, эту особенность можно использовать для создания функций обработчиков событий:(function addHandler() { var element = document.getElementById("element"); element.onclick = function() { alert("Привет из замыкания!"); }; })();
Вопросы, относящиеся к jQuery
Расскажите про $.Deferred.
Как создать утечку памяти с помощью jQuery.
var jqSelector = $("#selector"),
nativeSelector = document.getElementById("selector");
// Удаляем элемент "нативным" способом
nativeSelector.parentNode.removeChild(nativeSelector);
// Выводим закешированное значение селектора jQuery
console.log(jqSelector); // Привет, jQuery.cache!
jQuery.extend
Рассказать всё про функцию, возможно попросят написать аналог.