Типичные вопросы на собеседовании 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

 Рассказать всё про функцию, возможно попросят написать аналог. 

В чем различие между .get(), [], и .eq()?

 

В чем разница между .bind(), .live(), и.delegate()?

 

В чем разница между $ и$.fn? Или просто что такое $.fn.