Каверзные вопросы по JavaScript на собеседованиях
Во время собеседования на позицию Junior JavaScript developer стоит ожидать вопросов о манипуляциях с DOM, использовании наиболее распространенных методов массива и многих других вопросов по основам JavaScript. Их все сложно перечислить. При этом от джуна едва ли будут ожидать досконального знания абстрактных алгоритмов или параллелизма. Скорее на таком собеседовании рекрутер постарается понять вашу мотивацию и обучаемость. Конечно, вы должны понимать код на JavaScript и уметь писать простые функции.
На собеседовании вас могут ожидать следующие вопросы:
В чем разница между использованием «var», «let» и «const»?
Как показать пользователю уведомление о том, что в его браузере не включен javascript?
Почему важен порядок добавления скриптов на страницу?
Как получить текущий URL?
Как проверить, что переменная не является неопределенной? Как проверить, что свойство существует в объекте?
Написать простую функцию, чтобы проверить, является ли число целым?
Как остановить функцию setInterval?
Список примитивных типов в JavaScript
В чем разница между Java и JavaScript?
Что такое функция имени в JavaScript и как ее определить?
Правильные ответы
1. Разница в уровне охвата
Var – Оператор переменных JavaScript используется для объявления переменной и, при желании, мы можем инициализировать значение этой переменной.
var a = 10;
Объявления переменных обрабатываются перед выполнением кода.
Const – идея константных функций не позволяет им изменять объект, для которого они вызываются. Когда функция объявлена как const, ее можно вызывать для любого типа объекта.
Let – это сигнал о том, что переменная может быть переназначена, например, счетчик в цикле или замена значения в алгоритме. Он также сигнализирует, что переменная будет использоваться только в блоке, в котором она определена.
2. Показать пользователю уведомление о том, что в его браузере не включен JavaScript
<noscript>Your browser does not support JavaScript!</noscript>
3. Библиотеки следует добавлять раньше, чем скрипты, которые их используют
Например, следующий фрагмент приведет к ошибке «Uncaught ReferenceError: jQuery is not defined»
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.js"></script>
4. Получить текущий URL
window.location.href
document.URL
5. Проверить, что переменная не является неопределенной, что свойство существует в объекте
if (typeof someVar !== "undefined") {
// делаем что-то
}
// проверяем свойство с наследованием
if ('someProperty' in object) {
// делаем что-то
}
// проверяем свойство без наследования
if (object.hasOwnProperty('someProperty')) {
// делаем что-то
}
6. Функция, чтобы проверить, является ли число целым
function verifyInt(num) {
return num % 1 === 0;
}
7. Остановить функцию setInterval
// повторяем с интервалом в 1 секунду
let intervalId = setInterval(() => console.log('tick'), 1000);
// остановимся через 10 секунд
setTimeout(() => { clearInterval(intervalId); console.log('stop'); }, 10000);
8. Список примитивных типов
Тип числа представляет как целые числа, так и числа с плавающей запятой.
Тип строки должен быть заключен в кавычки.
Логический тип имеет только два значения: true и false.
9. Разница между Java и JavaScript
Язык программирования JavaScript разработан Netscape, Inc и не является частью платформы Java.
Приложения Java запускаются на виртуальной машине или в веб-браузере, а JavaScript – в веб-браузере и некоторых серверных средах.
Код Java компилируется, тогда как код JavaScript находится в тексте и на веб-странице.
JavaScript – это язык сценариев ООП, тогда как Java – язык программирования ООП.
10. Функция имени
Именованная функция объявляет имя, как только оно определено. Ее можно определить с помощью ключевого слова функции как:
function named(){
// write code here
}
Вопросы для мидлов
Претендентам на начальные позиции в разработке каверзных ловушек не ставят – знания основ синтаксиса и умения писать несложные программы на JavaScript хватит для большинства случаев. Срезаться можно разве что на не связанных непосредственно с языком программирования нюансах: при проверке общей грамотности в сфере ИТ, а также вашей мотивации и готовности работать в команде.
С мидлами история совершенно иная. В отличие от нанимаемых на потоке по готовым скриптам джуниоров, это уже штучный товар – требования к программистам среднего уровня предъявляются более серьезные и собеседуют их куда тщательнее. Приведем основные разделы (и вопросы по ним), на которых срезают многих претендентов.
1. Преобразование типов
Иногда Javascript ведет себя не совсем очевидно. Разработчик должен знать правила, по которым выполняется преобразование типов во время выполнения операций. Знание правил может предотвратить множество ошибок.
Примеры кода, результат выполнения которого должен быть очевиден для разработчика:
5 + ‘2’ Что на выходе?
5 – «2» Что на выходе?
true + true Что на выходе?
2. Promise
Перепишите пример, используя promise:
const printSec = (number, callback) => {
setTimeout(() => {
console.log(`${number} sec`)
callback()
},
1000)
}
printSec(1, () => {
printSec(2, () => {
printSec(3, () => {})
})
})
3. Прототипное наследование
Как работает прототип?
4. Цикл событий
Что произойдет со страничкой в результате выполнения этого кода?
function foo() {
setTimeout(foo, 0);
}
foo();
5. Какие типы данных представлены в JavaScript?
6. Как найти сумму элементов массива, если вложенность массива неизвестна?
arraySum([[1, 2, [3, 4]], [9], [10, 12]])
7. В чем причина помещения всего содержимого исходного файла JavaScript в книгу функций?
8. Перечислите специальные числовые значения
9. Какое предназначение файла package-lock.json?
10. Что такое запросы между источниками и CDN?
Правильные ответы
1. Преобразование типов
5 + '2' // "52"
5 + '2' == '5' + '2' == '52'
5 - "2" // 3
5 - "2" == 5-2 == 3
true + true // 2
true + true == 1 + 1 == 2
2. Promise
это достаточно современный подход написания асинхронного кода. Ранее использовался подход с использованием колбеков. При большой вложенности получался т.н. «ад обратных вызовов».
При использовании промисов код выглядит читабельно и удобен для редактирования:
const printSec = (number) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(`${number} sec`)
resolve()
},
1000)
})
}
printSec(1)
.then(() => printSec(2))
.then(() => printSec(3))
3. Прототипное наследование
Каждый объект в JS имеет базовый объект – прототип. Если свойство не находится в исходном объекте, то поиск продолжается в его «родительском» объекте.
Установить прототип объекта можно только во время создания объекта: если вы создаете новый объект с помощью новой Func(), свойство объекта [[Prototype]] будет установлено на объект, на который ссылается Func.prototype.
4. Цикл событий
Middle-разработчик должен понимать как устроен движок Javascript.Ответ: ничего особенного. Задачи будут добавляться в цикл событий, но они не вызовут ни переполнения стека, ни бесконечной очереди, которая затормозит весь сайт. Так как макротаски после выполнения пропускают один цикл для отрисовки контента и выполнения микротасков, в отличие от микротасков, которые выполняются все в очереди перед тем, как передать управление следующему пункту в цикле событий.
function foo() {
return Promise.resolve(1).then(foo);
}
foo();
Выполнение данного кода вызовет затормаживание интерфейса, т.к. при выполнении одного микротаска в очередь добавляется новый микротаск, который сразу же должен выполниться, без передачи управления другому пункту цикла событий.
5. Типы данных
Чтобы узнать тип переменной JavaScript, мы можем использовать оператор typeof. String – представляет собой серию символов и записывается в кавычках. Строку можно представить в одинарных или двойных кавычках.
Number – представляет собой число и может быть записано с десятичными знаками или без них.
BigInt – используется для хранения чисел, превышающих ограничение типа данных Number. Он может хранить большие целые числа и представлен добавлением «n» к целочисленному литералу.
Boolean – представляет собой логическую сущность и может иметь только два значения: истина или ложь. Логические значения обычно используются для условного тестирования.
Undefined – когда переменная объявлена, но не назначена, она имеет значение undefined, и ее тип также не определен.
Null – представляет несуществующее или недопустимое значение.
Symbol – это новый тип данных, представленный в версии JavaScript для ES6. Он используется для хранения анонимного и уникального значения.
Object – используется для хранения коллекции данных. Важно помнить, что любой тип данных, который не является примитивным типом данных, относится к типу объекта в javascript.
Array – это не отдельный тип данных, на самом деле это Object. `typeof null` равен «object» и это нужно учитывать в проверках.typeof «John Doe» // Возвращает «string»
typeof 3.14 // Возвращает "number"
typeof true // Возвращает "boolean"
typeof 234567890123456789012345678901234567890 n // Возвращает bigint
typeof undefined // Возвращает undefined
typeof null // Возвращает "object"
typeof Symbol ( 'symbol' ) // Возвращает символ
6. Найти сумму элементов массива, если вложенность массива неизвестна
// используя рекурсию
function arraySum(arr) {
let sum = 0;
arr.map((item) => {
if (Array.isArray(item)) {
sum += arraySum(item);
} else {
sum += item;
}
});
return sum;
}
console.log(arraySum([[1, 2, [3, 4]], [9], [10, 12]]));
7. Причина помещения всего содержимого исходного файла JavaScript в книгу функций
Этот метод создает замыкание вокруг всего содержимого файла, что создает частное пространство имен и тем самым помогает избежать потенциальных конфликтов имен между различными модулями и библиотеками JavaScript.
Еще одна особенность этого метода – легко создать псевдоним для глобальной переменной. Это часто используется в плагинах jQuery
8. Специальные числовые значения
Infinity больше любого числа
-Infinity меньше любого числа
NaN представляет собой ошибку (не число)
9. Предназначение файла package-lock.json
package-lock.json автоматически создается для любых операций, когда npm изменяет дерево node_modules или package.json. Он описывает точное дерево, которое было сгенерировано, так что последующие установки могут генерировать идентичные деревья, независимо от промежуточных обновлений зависимостей.
10. Запросы между источниками и CDN
Если мы сделаем выборку с произвольного веб-сайта, это, вероятно, не удастся. Основная концепция здесь – триплет домен/порт/протокол.
Запросы из разных источников, отправленные в другой домен (даже субдомен), протокол или порт требуют специальных заголовков с удаленной стороны. Эта политика называется «CORS»: совместное использование ресурсов между источниками.
CDN (сеть доставки контента) – это группа серверов, расположенных во многих местах. Эти серверы хранят дублированные копии данных, чтобы серверы могли выполнять запросы данных в зависимости от того, какие серверы находятся ближе всего к соответствующим конечным пользователям. CDN обеспечивают быстрое обслуживание и меньше подвержены влиянию высокого трафика.
Как получить знания без отрыва от работы?
Ознакомившись с этим списком вопросов, можно сделать очевидный вывод: при переходе от уровня Junior к уровню Middle JavaScript developer в значительной степени меняется и подход к интервью. Список каверзных вопросов не исчерпывается описанными выше, поэтому нужно быть готовым ко всему.
Программист среднего уровня должен глубокого понимать механику движка JavaScript и устройство объектов, а также хорошо разбираться в типах данных и правилах их преобразования, владеть принципами написания асинхронного кода, знать все особенности функций для работы с массивами и другие тонкости синтаксиса. Освоить их по книгам и документации без отрыва от работы довольно сложно. На помощь желающему переквалифицироваться из джуниоров в мидлы программисту придут онлайн-курсы и видеолекции для продвинутых разработчиков.