☕ Из джунов в мидлы: каверзные вопросы по JavaScript на собеседованиях

Если вы хотите успешно пройти собеседование, нужно обратить внимание на моменты, по которым обязательно будут заданы каверзные вопросы. Как избежать ловушек и какие знания стоит подтянуть? В этом материале собраны вопросы из реальных интервью с претендентами на трудоустройство в крупные ИТ-компании. Чтобы понять разницу между требованиями к специалистам уровней Junior и Middle, начнем с самого простого.

Вопросы для джунов

Во время собеседования на позицию Junior JavaScript developer стоит ожидать вопросов о манипуляциях с DOM, использовании наиболее распространенных методов массива и многих других вопросов по основам JavaScript. Их все сложно перечислить. При этом от джуна едва ли будут ожидать досконального знания абстрактных алгоритмов или параллелизма. Скорее на таком собеседовании рекрутер постарается понять вашу мотивацию и обучаемость. Конечно, вы должны понимать код на JavaScript и уметь писать простые функции.

На собеседовании вас могут ожидать следующие вопросы:

1. В чем разница между использованием «var», «let» и «const»?

2. Как показать пользователю уведомление о том, что в его браузере не включен javascript?

3. Почему важен порядок добавления скриптов на страницу?

4. Как получить текущий URL?

5. Как проверить, что переменная не является неопределенной? Как проверить, что свойство существует в объекте?

6. Написать простую функцию, чтобы проверить, является ли число целым?

7. Как остановить функцию setInterval?

8. Список примитивных типов в JavaScript

9. В чем разница между Java и JavaScript?

10. Что такое функция имени в 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 и устройство объектов, а также хорошо разбираться в типах данных и правилах их преобразования, владеть принципами написания асинхронного кода, знать все особенности функций для работы с массивами и другие тонкости синтаксиса. Освоить их по книгам и документации без отрыва от работы довольно сложно. На помощь желающему переквалифицироваться из джуниоров в мидлы программисту придут онлайн-курсы и видеолекции для продвинутых разработчиков.

Онлайн-курсы

• Fullstack Academy. Видеокурс на основе семинаров состоит из 40 часов и учит всем основам JavaScript. Помимо инструкций по основным понятиям, в нем также рассматривается большое количество задач по кодированию, которые упорядочены по уровню возрастающей сложности.
• Профессия мидл фронтенд-разработчик. Курс подойдет джунам фронтендерам, бэкендерам, которые собираются стать фуллстак-разработчиками, и тем, кто хочет разобраться в устройстве фреймворков. Курс включает 5 месяцев обучения по 15-20 часов в неделю, за которые вы напишете 2 приложения, отточите навыки JS, познакомитесь с алгоритмами и структурами данных, пройдете программу профессиональной акселерации.
• Coderbyte JavaScript in One Week. Задачи CoderByte – отличный ресурс, особенно если вы хотите подать заявку на учебный курс по более избирательному кодированию в рамках смены карьеры.
• Eloquent JavaScript. Программисты среднего уровня извлекут пользу из первых четырех глав, которые включают обзор синтаксиса JavaScript, функциональности, циклов и массивов.
• Javascript30. Уэс Бос – разработчик полного цикла, спикер и преподаватель из Канады обучал более 500 студентов в 200+ классах и выступал на десятках конференций по всему миру. Курс подойдет разработчикам и дизайнерам от новичка до среднего уровня, которые хотят освоить основы JavaScript и работать в DOM без библиотеки.
• JavaScript, jQuery, and JSON. В этом курсе рассматривается как JavaScript поддерживает объектно-ориентированный шаблон, с акцентом на уникальный аспект подхода JavaScript к объектно-ориентированному программированию. Курс содержит краткое введение в библиотеку jQuery, которая широко используется для манипулирования в браузере объектной моделью документа (DOM) и обработки событий. Вы также узнаете о нотации объектов JavaScript (JSON), которая используется в качестве синтаксиса для обмена данными между кодом, выполняемым на сервере (например, в PHP), и кодом, выполняемым в браузере (JavaScript/jQuery).

Видеолекции

• Crockford on JavaScript. Дуглас Крокфорд очень авторитетный программист и постоянный участник развития языка JavaScript. Его курс лекций наверняка будет полезен.
• Javascript Full Course for Beginners to Advanced. Курс содержит информацию, позволяющую приступить к созданию серверных приложений с использованием NodeJS и интерфейсных приложений с использованием React.
• Advanced javascript tutorial. Промисы, замыкания, прототипы и многое другое из продвинутого уровня JS. В лекциях также освещаются вопросы для интервью.
• Deep JavaScript Foundations. Кайл Симпсон, автор популярной серии книг «Вы не знаете JavaScript», раскрывает в своих лекциях глубокие основы JavaScript. Вы узнаете об обертках объектов, приведении, области видимости, замыкании, типах, системе прототипов, функциях ES6 и многом другом. Видео поможет понять, как движок JavaScript ищет переменные в области функций и блоков (var, let и const).
• Build 15 JavaScript Projects – Vanilla JavaScript Course. Free Code Camp – это некоммерческая организация для изучения программирования. Платформу freeCodeCamp используют около 350000 уникальных посетителей в месяц со студентами из более чем 160 стран.
• JavaScript: Расширенные возможности. Видео курс позволяет ознакомиться с новыми, расширенными возможностями языка JavaScript. Освещены различные варианты использования событий для мобильных устройств, особенности ES6, ES7, ES8, ES9, а также использование Promises RxJS в написании асинхронного кода.
• JavaScript. Владилен Минин больше 7 лет разрабатывает на JavaScript. Стал Senior Frontend разработчиком и тим лидом в 23 года. В его лекциях: что такое JavaScript, переменные, типы данных, числа, BigInt, все о строках, функции, стрелочные функции, массивы, объекты, асинхронность, Promise, async await, работа с DOM и все это с использованием актуального синтаксиса 2020.
• JavaScript Advanced. Видео содержит установку атрибутов свойств через Object.defineProperty, атрибуты свойств get и set, контекст вызова this, асинхронность, стек вызовов, промисы.

Если вы хотите наработать необходимый багаж без отрыва от производства, стоит обратить внимание на продвинутый курс Яндекс.Практикум. Он рассчитан на начинающих фронтендеров и бэкендеров, которые собираются стать фуллстак-разработчиками. С помощью опытных преподавателей студенты детально разберутся в JavaScript и устройстве современных фреймворков.