9 вопросов для получения должности JavaScript-разработчик


Оглавление (нажмите, чтобы открыть):

25 вопросов, которые задают на собеседовании JavaScript-разработчику

Доброго времени суток, дорогой гость! Рада приветствовать на страницах своего блога.

Сегодня речь пойдет о том, какие вопросы задаются на техническом собеседовании кандидату на позицию Javascript-разработчика. Цель — проверить необходимый уровень знаний языка кандидата и теоретической подготовки.

Мне бы хотелось выразить благодарность Senior Frontend Developer Греченок Евгению и Senior Backend Developer Гиззатову Марселю за помощь в создании статьи. Те вопросы, которые идут дальше, из их методички, которую они используют для собеседований кандидатов «и на 30 тысяч, и на 130». Большое спасибо, ребята, за время, которое мне уделили, и считаю, что для меня на собеседовании был хороший стимул убрать пробелы в собственных знаниях и сделать еще один шаг к тому, чтобы стать профессионалом.

Вопросы по JavaScript (синтаксис и особенности языка)

1. Если вам необходимо проверить, определено ли свойство у самого объекта … (hasOwnProperty)
2. Как работает this ( http://bonsaiden.github.io/JavaScript-Garden/ru/#function.this )
3. Замыкания ( http://bonsaiden.github.io/JavaScript-Garden/ru/#function.closures )
4. Определение переменных (всплытие)
5. Переменные let, const, var ( https://learn.javascript.ru/let-const )
6. Равенство и сравнение (оператор == и ===)
7. Операторы typeof и instanceof (для чего используются http://bonsaiden.github.io/JavaScript-Garden/ru/#types.instanceof )
8. Почему нельзя использовать eval ( http://bonsaiden.github.io/JavaScript-Garden/ru/#core.eval )
9. Деструктуризация ( https://learn.javascript.ru/destructuring )
10. Строки-шаблоны ( https://learn.javascript.ru/es-string )
11. Классы (прототипы, современные)
12. Итераторы ( https://learn.javascript.ru/iterator )
13. Генераторы ( https://learn.javascript.ru/generator )
14. Новые типы данных ( https://learn.javascript.ru/set-map )
15. Что такое Eventloop? Объясните принцип его работы.

Общие вопросы по программированию

  1. Отличие компилируемого языка от интерпретируемого
    Чем компиляция С отличается от Java
  2. Отличие статической типизации от динамической
  3. Отличие наследование от композиции ( https://habrahabr.ru/post/325478/ )
  4. Алгоритмы и их сложность (JS https://tproger.ru/translations/algorithms-and-data-structures/ )
    a. В приложении к любому языку привести примеры стандартных методов сортировки / обхода дерева / поиска в массиве, дикте с пояснением о их сложности и как работают.
  5. FIFO, LIFO
  6. Структуры данных (JS https://learn.javascript.ru/data-structures )
    a. Числа, Строки
    b. Объекты (ассоциативные массивы), передача по ссылке (что передаётся по значению)
    c. Массивы
    d. Деревья, Списки (связанный, ссылочный)
  7. Архитектура (в чём разница)
    a. асинхронная,
    b. многопоточная
  8. Микросервисы
    a. Будет ли микросервисами распределённая архитектура через общую шину данных
    b. Требования к микросервисам
    i. горизонтальное масштабирование
    ii. отказоустойчивость
  9. Преимущества микросервисов:
    i. легкая поддержка (небольшие сервисы легче)
    ii. нет ограничения на языки и библиотеки для решения задачи
    iii. упрощенное тестирование, возможность замокать взаимодействия
    iv. легкое накатывание и откатывание новых версий
    v. можно экспериментировать с технологиями

Гибкие методологии

  1. Зачем нужны
  2. Какие подходы есть
  3. Выявление проблем в разработке, зачем нужна ретроспектива в scrum
  4. Распределение задач по разработчикам
    • горят сроки
    • планирование

Задача на понимание JavaScript

Задача 1. Что выведет данный код?

Цель задачи: проверить понимание замыкания.

Тема: Замыкание (closure).

Ответ: Если исходить из определения замыкания — способность функции запоминать область видимости переменной, в которой та была объявлена, то правильный ответ 5. Функция a запомнила содержимое объявленной ранее переменной за пределами функции, и после вывода функции, передала в alert 5.

suhorukov.com

JavaScript – язык программирования, который сегодня является чуть ли не самым популярным средством сайтостроения. А собственное представительство в сети желают иметь все без исключения, начиная от транснациональных корпораций и заканчивая совсем маленькими компаниями, вплоть до индивидуальных предпринимателей. Соответственно, каждая организация хочет видеть в своем штате специалиста по JavaScript. И, разумеется, готова платить ему достойную профессионала заработную плату. О том, как стать таким специалистом, что для этого понадобится и как получить престижную работу, мы спросили у Евгении Тычинской – рекрутера Кадрового агентства Алексея Сухорукова.

Женя, насколько вообще сегодня востребованы специалисты со знанием JavaScript?

Согласно моим данным, спрос на таких специалистов сейчас не просто очень высок, а еще и продолжает расти месяц от месяца. Сейчас на серьезном подъеме находится направление Web-разработки, есть множество активно развивающихся проектов по E-commerce. А максимальную наглядность для пользователей, их удобство при совершении покупки обеспечивает как раз JavaScript.

Кроме того, его поддерживают любые операционные системы, его можно интегрировать практически со всеми браузерами. Наконец, JavaScript – относительно простой и наглядный в использовании инструмент. Зачастую тем, кто только решил сменить сферу деятельности, как раз и рекомендуют начать развитие в IT именно с JavaScript. А уж если человек профессионал в этой области и еще дополнительно знает другие языки программирования, то таких специалистов даже очень крупные компании будут рады взять на высокооплачиваемую работу. Так или иначе, сегодня без знания JavaScript никуда, а следовательно потребность в опытных и грамотных фронтенд-разработчиках только возрастает.

Женя, а в чем заключается твоя работа? Как ты помогаешь соискателю?

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

Я отбираю наиболее подходящие вакансии, и предлагаю их кандидату на рассмотрение. Затем в выбранные им компании я направляю подробную информацию о соискателе. Потенциальный работодатель может заранее ознакомиться с сильными сторонами кандидата — как личными, так и профессиональными, соответственно, в компании могут сразу определиться, нужен им такой работник или нет. Далее компания при моем посредничестве связывается со специалистом и приглашает его пройти собеседование.

А как вы осуществляете связь с потенциальными работодателями?

Как правило, организации, ищущие специалистов, обращаются к нам самостоятельно. Кроме того, мы находимся в постоянном контакте со многими HR-отделами крупных IT-компаний. За счет этого наши кандидаты получают явное преимущество – ведь зачастую мы имеем более полную информацию о вакансиях, чем та, которую организации выкладывают на профильных сайтах. Более того, у нас есть ряд работодателей, которые вообще предпочитают не искать сотрудников на сторонних сайтах. А это значит, что об открытии у них вакансии можно узнать только в нашем Кадровом агентстве.

Какие компании в основном проявляют интерес специалистам по JavaScript?

Разумеется, это, в первую очередь продуктовые компании, фирмы, работающие над созданием сайтов, мобильных и веб-приложений для своих заказчиков, а также компании сектора E-commerce. По размеру компаний разброс еще больше. У нас встречаются заявки, как от признанных флагманов отрасли, так и от небольших коллективов, которые разрабатывают всего несколько программных продуктов. Есть и стартапы, обещающие довольно заманчивые перспективы своим сотрудникам.

А сколько вакансий у тебя имеется на данный момент?

Вот прямо сейчас у меня в работе 5 вакансий JavaScript-разработчиков. Но тут еще надо учитывать, что за окном конец августа, а в это время традиционно наблюдается спад активности на рынке труда.

Скажи, каков географический разброс этих вакансий?

Все эти запросы пришли ко мне от IT-компаний Новосибирска.

А бывают ли вакансии из других регионов России или даже из-за рубежа?

Да, разумеется. Буквально пару недель назад мы закрыли запрос на JavaScript-разработчика от крупной московской компании. И с зарубежными представителями иногда приходится общаться.

Можно ли найти работу JavaScript-разработчиком новичку в этой сфере?

Да, вполне. Но обычно перед ними открываются три возможных пути:

Брать самостоятельно заказы на фрилансе, через друзей, знакомых и родственников. Самому делать небольшие, относительно простенькие сайты, иногда, может быть даже и бесплатно. И таким образом нарабатывать свое портфолио, ну и, конечно же, навыки и практический опыт. Собственный успешно реализованный проект – прекрасное подспорье при устройстве на работу.

Начать с должности верстальщика и на этом «фоне» постепенно углубляться в изучение самого JavaScript и наиболее популярных при разработке фреймворков и технологий.

Устроиться фронтенд-разработчиком в уже работающую компанию, ведущую собственные проекты. Этот вариант сложнее и менее вероятен, но деятельность нашего Агентства как раз и помогает в его реализации.

Более того, надо сказать, что крупные IT-компании обладают достаточными ресурсами для дополнительного обучения своих сотрудников. Соответственно, они вполне готовы принимать начинающих специалистов на стартовые должности или, что встречается чаще, на стажировку. Длительность такой стажировки довольно индивидуальна. Она зависит как от политики самой компании, так и от стажера: от уровня его знаний, от того, насколько он инициативен, как вписывается в команду и корпоративную культуру. Но чаще всего по времени стажировка соответствует испытательному сроку, а это примерно 3 месяца. Затем компания принимает решение о принятии человека должность Junior фронтенд-разработчика JavaScript.

Женя, уже достаточно продолжительное время в Академии Алексея Сухорукова идут курсы JavaScript. По твоему опыту – достаточно ли там дают знаний для получения начальной должности?

Я работала с выпускниками Академии. Могу сказать, что их знаний и опыта вполне хватает для того, чтобы занять место Junior-специалиста.

А что ты можешь сказать о зарплате JavaScript-разработчиков?

Начальный уровень, тот самый Junior-специалист, получает в месяц минимум 30 000 рублей. Но, как говорится «Джун джуну рознь» ☺ и поэтому верхняя планка сотрудника, который уже готов перейти в Middle-сегмент – около 60 000 рублей. Зарплата уверенного Middle-разработчика уже составляет от 60 до 100 тысяч рублей. Ну а дальше, JavaScript-специалист уровня Senior вполне может рассчитывать на оплату своего труда в размере от 100-120 тысяч и выше. Вот прямо сейчас у меня есть такая вакансия с зарплатой в 150 000 рублей в месяц.

Расскажи, куда двигаться такому специалисту в построении карьеры?

После Senior’a JavaScript-разработчик может занять «позицию» Team Lead’а, то есть, взять на себя руководство всей командой программистов, занимаясь как решением административных вопросов, так постановкой задач для разработчиков.

Женя, дай, по твоему мнению главный совет тем, кто решил освоить JavaScript и найти себе работу по этой специальности?

Сначала дам практическую рекомендацию: в первую очередь постарайтесь освоить сам нативный JavaScript и его современный стандарт, а затем принимайтесь за изучение наиболее популярных и часто используемых фреймворков JavaScript. Это такие инструменты, как React/Redux и Аngular.JS. Многие компании напрямую указывают в числе своих требований к соискателю обязательный опыт работы с этими фреймворками.

Ну, и конечно, если у вас есть интерес и желание работать с JavaScript, а потом совершенствоваться в этом направлении, то не откладывайте в долгий ящик!

Вопросы для собеседования кандидату на должность Front-end разработчика

Это перевод популярного репозитория от html5bp — Front-end Job Interview Questions (en), который существует с 2009 года. Список вопросов составлялся и дополнятся известными во front-end людьми, поэтому на этот список можно положиться. Перевод делал не я (вернее я хотел, но он оказался уже переведен).

Замечание: Этот репозиторий содержит подборку вопросов, которые могут быть использованы на собеседованиях на должность front-end разработчика. Здесь предлагаются лишь идеи, не нужно задавать все вопросы сразу (иначе в один час точно не уложитесь).

Также, имейте в виду, что многие вопросы не требуют однозначного короткого ответа, а лишь помогают завести беседу на ту или иную тему (предоставляя кандидату возможность показать себя во всей красе).

Содержание

Общие вопросы: [↑]

  • Вы пользуетесь Твиттером?
    • Если да, то кто присутствует в вашей ленте?
  • Кого из мировых front-end разработчиков вы знаете?
    • А российских front-end’щиков?
  • У Вас есть аккаунт на GitHub?
    • Если да, то за какими интересными проектами вы следите?
  • Какие блоги Вы читаете?
  • Какие системы управления версиями вам приходилось использовать?
  • Расскажите о своей среде разработки (ОС, редактор, браузер(ы), прочие инструменты)
  • Опишите последовательность Ваших действий, когда вы создаете новую Web-страницу
  • Можете ли пояснить разницу между progressive enhancement и graceful degradation?
    • Бонус, если также расскажете про feature detection (определение возможностей браузера)
  • Объясните, что означает «Семантическая разметка»
  • Какой Ваш основной браузер для разработки и какими инструментами Вы в нем пользуетесь?
  • Как можно оптимизировать загрузку внешних ресурсов на странице?
    • Комбинация из потенциальных решений:
      • Конкатенация
      • Минификация
      • Использование CDN
      • Кэширования
      • и т.д.
  • Каково преимущество в подгрузке внешних ресурсов с нескольких доменов?
    • Сколько ресурсов браузер может одновременно качать с одного домена?
  • Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального)
  • Если Вы присоединились к проекту, где для форматирования используются табы, а Вы привыкли использовать пробелы, как Вы поступите?
    • Предложите использовать EditorConfig (editorconfig.org)
    • Останетесь верным своим привычкам
    • Выполните команду :retab!
  • Используете ли приёмы для ускорения написания кода (сниппеты, Emmet)?
  • Знакомы ли с шаблонизаторами (Smarty, HAML etc.)
  • Реализуйте примитивное слайд-шоу
    • Бонус, если Вы это сделаете без использования JS
  • Какие инструменты Вы используете для тестирования производительности кода?
    • JSPerf (jsperf.com)
    • Dromaeo (dromaeo.com)
    • и т.д.
  • Если бы у Вас была возможность освоить новую технологию в этом году, что бы это было?
  • Объясните важность стандартов и комитетов по стандартам
  • Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?
Мастер Йода рекомендует:  29 Python-проектов, оказавших огромное влияние на разработку

Вопросы по HTML: [↑]

  • Для чего нужен doctype и сколько разновидностей Вы можете назвать?
  • В чем разница между standards mode и quirks mode?
  • Какие ограничения накладывают стандарты XHTML?
    • Могут ли возникнуть проблемы при подаче страниц с типом application/xhtml+xml ?
  • Как следует оформлять страницу, в которой контент может быть на разных языках?
    • Что нужно иметь в виду при разработке многоязычных сайтов?
  • Можно ли использовать синтаксис XHTML в HTML5?
  • Как использовать XML в HTML5?
  • Чем полезны data- атрибуты?
  • Если рассматривать HTML5 как открытую web-платформу, на чем она строится, из каких компонентов состоит?
  • Объясните разницу между cookies, sessionStorage и localStorage.
  • Знакомы ли с подводными камнями вёрстки почтовых шаблонов?
  • Какая разница между GET и POST ?

Вопросы по JavaScript: [↑]

  • Какими js-библиотеками Вы пользовались?
  • Вы когда-нибудь заглядывали в исходный код библиотек/фреймворков, которыми пользовались?
  • Чем JavaScript отличается от Java?
  • Что-такое хэш-таблица?
  • Что такое неопределенные (undefined) и необъявленные (undeclared) переменные?
  • Что такое замыкание и как/для чего его используют?
    • Как вы предпочитаете их использовать?
  • Где обычно используются анонимные функции?
  • Объясните «JavaScript module pattern» и где он (паттерн) применяется
    • Бонус, если упомянута чистота глобального пространства имен
    • Что, если Ваш модуль не заключен в пространство имен?
  • Как Вы организуете свой код? (module pattern, наследование)
  • В чем разница между host-объектами и нативными объектами?
  • В чем разница между последними двумя строчками:
  • В чем разница между .call и .apply ?
  • Что делает и для чего нужна функция Function.prototype.bind ?
  • Когда Вы оптимизируете свой код?
  • Объясните, как работает наследование в JavaScript?
  • Где до сих пор используется document.write() ?
    • В большинстве генерируемых баннеров, хотя так делать не рекомендуется
  • В чем разница между feature detection (определение возможностей браузера), feature inference (предположение возможностей) и анализом строки user-agent?
  • Расскажите об AJAX как можно более подробно
  • Объясните, как работает JSONP (и почему это не настоящий AJAX)
  • Вы когда-нибудь использовали шаблонизацию на JavaScript?
    • Если да, какие библиотеки использовали? (Mustache.js, Handlebars etc.)
  • Объясните, что такое «hoisting»
  • Объясните event bubbling
  • В чем разница между «атрибутом» (attribute) и «свойством» (property)?
  • Почему не следует расширять нативные JavaScript объекты?
  • Почему следует расширять нативные JavaScript объекты?
  • В чем разница между событиями document load и document ready ?
  • В чем разница между == и === ?
  • Как получить параметры из URL’а текущего окна?
  • Объясните same-origin policy в контексте JavaScript
  • Объясните event delegation
  • Какие Вы знаете паттерны организации наследования в JavaScript?
  • Сделайте так, чтобы этот код работал:
  • Опишите принцип мемоизации (избежание повторных вычислений) в JavaScript
  • Почему тернарный оператор так называется?
  • Что такое арность функции?
  • Что делает строчка «use strict»; ? Какие достоинства и недостатки от её использования?

Примеры кода на JavaScript [↑]

Вопрос: Какое значение возвращает данное предложение?
Ответ: 3

Вопрос: Какое значение возвращает данное предложение?
Ответ: «goh angasal a m’i»

Вопрос: Чему равно window.foo?
Ответ: «bar»,
только если выражение window.foo было ложным, иначе переменная сохранит своё изначальное значение

Вопрос: Что покажут эти два alert?
Ответ: «Hello World» и ReferenceError: bar is not defined

Вопрос: Чему равно foo.length?
Ответ: 2

Вопрос: Чему равно foo.length?
Ответ: undefined

Вопросы по jQuery: [↑]

  • Объясните «chaining».
  • Объясните «deferreds».
  • Какие Вы знаете приемы оптимизации кода, использующего jQuery?
  • Что делает .end() ?
  • Как добавить пространство имён к обработчику событий? Для чего это нужно?
  • Назовите 4 разных вида аргументов, которые принимает функция jQuery()?
    • Селектор (строка), HTML (строка), Callback (функция), HTMLElement, объект, массив, массив элементов, объект jQuery etc.
  • Что такое очередь эффектов (fx queue)?
  • В чем разница между .get() , [] , и .eq() ?
  • В чем разница между .bind() , .live() , и .delegate() ?
  • В чем разница между $ и $.fn ? Что вообще такое $.fn ?
  • Оптимизируйте данный селектор:

Вопросы по CSS: [↑]

  • Что такое «reset» CSS и для чего он нужен?
  • Объясните, что такое плавающие элементы (floats) и как они работают?
  • Какие вы знаете методы запрета обтекания (clearing) и какие где применяются?
  • Что такое CSS спрайты? Как они реализуются на странице или сайте?
  • Какие Ваши любимые методы подмены текста картинкой (image replacement) и когда Вы их используете?
  • CSS property hacks, conditionally included .css files…
  • Как Вы обеспечиваете отображение страниц в старых/ограниченных браузерах?
    • Какие приёмы/процессы Вы при этом используете?
  • Какими способами можно визуально скрыть элемент (оставив его доступным для экранного диктора, screen reader)?
  • Вы когда-нибудь использовали сеточную верстку (grid system, grid design)? Если да, какая Ваша любимая?
  • Приходилось ли вам использовать или реализовывать media queries или верстку под мобильные устройства?
  • Приходилось ли вам стилизовать SVG?
  • Как оптимизировать страницы для печати?
  • Какие есть подводные камни в оптимизации производительности CSS?
  • Вы используете CSS препроцессоры? (Sass, Compass, Bourbon, Stylus, LESS)
    • Если да, расскажите, что вам в них нравится и не нравится?
  • Как Вы сверстаете макет, который использует нестандартные шрифты?
    • Webfonts (сервисы вроде Google Webfonts, Typekit, Fontsquirrel etc.)
  • Объясните, как браузер определяет, на какие элементы накладывать CSS стили?
  • Приходилось ли сталкиваться с Retina-дисплеями?
  • Слышали ли о системе БЭМ (Блок-Элемент-Модификатор)?
    • Если да, то в чем её суть? Расскажите о системе нотификации селекторов.

«Светская беседа»: [↑]

  • Самое крутое, что Вы когда либо делали и чем гордитесь?
  • Вы знаете секретный жест HTML5-банды?
  • Что Вы больше всего любите в Ваших инструментах разработки?
  • У Вас есть какие-нибудь личные проекты?
  • Возьмите листок бумаги и напишите в столбик буквы A B C D E. Теперь отсортируйте столбик в алфавитном порядке по убыванию, не написав ни строчки кода.
    • Засеките, через сколько времени кандидат перевернет листок
  • Пират или ниндзя?
    • Бонус за комбинацию. Аргументированную. +2 за зомби-пират-ниндзя-обезьяну
  • Чем бы Вы занимались, если бы не Web-разработкой?
  • Какая Ваша любимая «фишка» Internet Explorer?
  • Закончите предложение: Brendan Eich и Doug Crockford являются ____ языка JavaScript.
  • jQuery: хорошая библиотека или великая библиотека? Тема для дискуссии…

Первоначальные авторы [↑]

  • @bentruyman (bentruyman.com)
  • @cowboy (benalman.com)
  • @roger_raymond (twitter.com/iansym)
  • @ajpiano (ajpiano.com)
  • @paul_irish (paulirish.com)
  • @SlexAxton (alexsexton.com)
  • @boazsender (boazsender.com)
  • @miketaylr (miketaylr.com)
  • @vladikoff (vladfilippov.com)
  • @gf3 (gf3.ca)
  • @jon_neal (twitter.com/jon_neal)
  • @wookiehangover (wookiehangover.com)
  • @darcy_clarke (darcyclarke.me)

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.

9 вопросов для получения должности JavaScript-разработчик

Продолжаем разбирать часто задаваемые вопросы на интервью.

6. Что такое прототипное наследование (prototypal inheritance)

Грамотным ответом будет: изначально каждый объект обладает свойством — прототипом. Вы можете добавлять в него методы и свойства. Создавать другие объекты на основе прототипа. Создаваемый объект автоматически унаследует свойства и своего прототипа. Если свойство в новом объекте отсутствует, то будет произведен его поиск в прототипе.

Функция car называется конструктором. Далее мы добавляем метод getModel в ее прототип, с помощью специальной конструкции car.prototype.getModel(). Если вы не поняли о чем здесь говорится, настоятельно рекомендую ознакомиться с прототипным ООП: https://learn.javascript.ru/prototypes
30% вам зададут этот или похожий вопрос.

7. Разница между объявлением функции (function declaration) и функциональным выражением (function expression)?

Как видим, функциональное выражение, — это переменная, которой присваивается функция.
Важная особенность заключается в том, что функция объявленная через function declaration доступна по тексту программы до ее описания. В то время как функциональное выражение ведет себя как переменная, таким образом, к функции можно обратиться только после. Если мы в предыдущем примере, в самом начале допишем две строки:

Кстати, вместо var можно использовать let, со всеми вытекающими последствиями, касающимися области видимости.
Если вы хотите передать функцию в качестве аргумента другой функции, то вам необходимо воспользоваться функциональным выражением. Потому что это переменная. То есть передать переменную в другую функцию.

8. Что такое промисы (promises) и для чего их используют.

Ответить на данный вопрос иногда трудно, но вы можете просто сказать, что с помощью них можно выполнять действия (функции, методы) в асинхронном режиме. Добиться асинхронности можно и с помощью колбэков, но в случае большой вложенности (большого количества асинхронных действий), мы получим плохо читаемый код.

Видите, насколько сильно ветвится данный код? Теперь, напишем тоже самое с использованием промисов (схематично):

9. Вопрос про setTimeout()

Скорее всего, у вас не будут спрашивать, что же это такое, поскольку ответ на подобный вопрос слишком очевиден. Вместо этого предложат фрагмент кода, и вы должны будете ответить, каков результат его выполнения.

Теперь сделаем тоже самое, только вывод ‘а’ обернем в setTimeout().

По логике вещей, поскольку таймаут равен 0, мы можем предположить, что последовательность вывода останется такой же. Однако на самом деле, мы увидим сначала b, потом c и только в конце – a.
Так происходит потому, что когда мы использует setTimeout, код, который в него заключен, становится асинхронным. JS выполнит его после того, как освободится стэк. То есть после b и c.

10. Замыкания (closure) и как их использовать

Наверняка вам зададут вопрос на собеседовании.

Когда одна функция возвращает другую функцию (или объект), последняя содержит окружение своего как бы «родителя». Обратимся к примеру:

Напоследок, хотелось бы посоветовать не спешить с ответами при прохождении собеседования, особенно на вопросы, связанные с анализом предложенного кода. Часто очевидные на первый взгляд вопросы содержат хитрости и ловушки. Остановитесь, подумайте лишнюю минутку. Задайте уточняющие вопросы — это продемонстрирует вашу внимательность и ответственное отношение к делу. Поможет выявить интервьюверу ход ваших мыслей. Собственно, в основном для этого и задаются хитрые или сложные задачи. Гораздо важнее продемонстрировать правильное мышление, даже если ответ на вопрос в итоге будет неверным.

Человек не может знать всё, это в принципе невозможно. Часто бывает так, что на прошлой работе вы сталкивались с одними технологиями и приёмами, а на новой команда имеет другие взгляды на архитектуру и пользуется не очень знакомыми вам библиотеками. Вот почему грамотный интервьювер в первую очередь постарается выяснить, что за человек перед ним, как он мыслит, его аналитические способности. В конце концов, недостающие пробелы заполнить очень легко, чего нельзя сказать о правильном мышлении программиста, которое формируется только с опытом.

root4root aka admin

Спасибо за статью! Сейчас готовлюсь к собеседованию, читаю такого рода материалы.
У вас опечатка:
setI(b) <
i = k;
>,
Наверное:
setI(b) <
i = b;
>,

Типичные вопросы на собеседовании javascript разработчика

Для успешного прохождения на должность javascript developera рекомендуем вам почитать эту статью и изучить все важные моменты и подводные камни.

Первое что всегда спрашивают это опыт работы, поэтому если у вас нет опыта работы в front end и js рекомендуем поискать «подработку» вначале у нас на сайте и так же изучить типичные и возможные вопросы на собеседовании которые вам могут задать интервьюеры.

Общие вопросы по front-end

  • Методологии и подходы написания CSS?
  • GruntJS,Gulp, Bower, npm — для чего используются?
  • RequireJS (или подобные) — зачем нужны?
  • Тестирование: какие библиотеки знаете для тестирования, что использовали на практике? (какие подводные камни были и тд)
  • Как логировать JS ошибки с клиента, какие «подводные» камни?
  • Какие фреймворки знаете/использовали на практике (если не использовали, то почему), как они устроены внутри.
  • Паттерны проектирования
  • Другие вопросы из области вёрстки (css, html)

Общие вопросы по 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() внутри обработчика события.

Как остановить дальнейшее распространение события?

Могу ли я удалить удалить обработчик события с элемента?

Да. target.removeEventListener(‘click’, handler)

Как я могу запустить обработчик в фазе захвата, а не в фазе всплытия?

В методах addEventListener и removeEventLister есть третий опциональный параметр. Вы можете установить его в true или false в зависимости от того хотите или нет использовать фазу захвата.

Каким образом можно предотвратить множественный вызов обработчика для одного события?

Если слушатель события прикреплён к одному и тому же типу (click, keydown, и т.д.) элемента, вы можете вызвать event.stopImmediatePropagation() в первом обработчике и другие не будут выполнены.

Самовызывающиеся функции.

Тоже весьма частый вопрос на собеседованиях. Ещё иногда подходят к этому со стороны jQuery: «Почему все плагины обособлены в конструкцию (function() <>)(); ?».

Как поменять контекст функции. Частичное применение функции.

Тут нужно описать разницу между .call , .apply и .bind и некоторых стандартных решений на уровне языка.

Разница между операторами == и ===

Оператор == сравнивает на равенство, а вот === — на идентичность. Плюс оператора === состоит в том, что он не приводит два значения к одному типу. Именно из-за этого он обычно и используется.

Напишите регулярное выражение для проверки строк соответствующих формату даты dd.mm.yyyy. или подобное.

Каков будет результат выполнения следующего кода:

Что вернет выражение +new Date()? Чем отличается от Date.now().

Отличный вопрос. Ответ в том, что +new Date(); создаст экземпляр объекта Date и благодаря + переведет его в числовой формат. Во втором случае вызовется статический метод конструктора, который является более приоритетным, т.к. во-первых он не требует создания экземпляра, а во-вторых является более понятным.

Напишите функцию принимающую строку с именем файла и возвращающую расширение (фрагмент после последней точки)

В чём опасность использования for .. in для объекта или массива?

For..in итерируется по всем полям объекта [b]и его прототипов[/b] (т.е. проходит по всей цепочке прототипов).

В приведённом в вопросе коде проблем как таковых нет, но они могут появиться при использовании библиотек/полифиллов, которые переопределяют или создают новые свойства для прототипов стандартных конструкторов (таких как Array или Object).

Чтобы избежать таких проблем, можно воспользоваться методом

Модифицированный пример, который работает корректно:

Примечание:
Многие инструменты для статического анализа JavaScript кода считают for .. in без фильтрации с hasOwnProperty не безопасным.

Какие языковые конструкции в javascript создают scope? Что произойдет при выполнении следующего куска кода?

В javascript только функции создают новый scope.

Код в вопросе аналогичен следующему:

Что такое hoisting или «поднятие переменных»? Что произойдет при выполнении следующего куска кода?

Интерпретатор JavaScript всегда перемещает («поднимает») объявления функций и переменных в начало области видимости (вверх текущего скрипта или функции). Код в вопросе аналогичен следующему:

В консоль будет напечатано:

Как добавлять элементы на HTML страницу динамически ?

Создание новых элементов осуществляется с помощью document.createElement(tagName);

После создания элемента его нужно присоединить к родительскому элементу с помощью .appendChild(node);

В чем разница между Object.getOwnPropertyNames() и Object.keys()

Object.getOwnPropertyNames() возвращает перечислимые и не перечислимые свойства из объекта или массива.

Object.keys() возвращает перечислимые свойства из объекта или массива.
Пример:

С помощью какой конструкции языка можно управлять потоком выполнения скрипта и отслеживать ошибки?

Это возможно с помощью конструкции try<>. catch<>

Почему вызов a(); происходит успешно, а вызов b(); выдает ошибку?

Функция а() инициализируется на этапе загрузки скрипта, как бы «всплывает вверх» а функция б инициализируется, когда объявляется переменная b

Что такое глобальные переменные ? Как они создаются ? Какие проблемы связаны с использованием глобальных переменных?

Глобальная переменная — переменная, которая доступна (видима) во всем документе, в отличии от локальной (ограничена рамками блока программного кода, внутри которого она определена)

Большинство JavaScript разработчиков избегает использования глобальных переменных. Одна из причин — возможный конфликт имен глобальных и локальных переменных. Так же код использующий глобальные переменные может быть тяжелее сопровождать и тестировать.

Мастер Йода рекомендует:  Градиентная заливка в корректирующем слое

Что такое замыкания (closure) в JavaScript?

Простыми словами это внутренняя функция, т.е. функция в функции.
Замыканием (closure) называют потому, что после выполнения родительской или внешней функции, код внутренней все еще «живет» в интерпретаторе, и его можно выполнить. Ошибок не возникнет даже если внутренняя функция (замыкание) будет использовать переменные из внешней функции.
Например, эту особенность можно использовать для создания функций обработчиков событий:

Вопросы, относящиеся к jQuery

Расскажите про $.Deferred.

Как создать утечку памяти с помощью jQuery.

jQuery.extend

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

5 типичных JavaScript вопросов на собеседовании

Разработчики JavaScript пользуются большим спросом в мире IT. Если это та сфера, в которой у вас достаточно знаний, у вас есть много возможностей изменить место своей работы и повысить заработную плату. Но прежде чем вы будете приняты на работу, вам необходимо будет пройти собеседование. В этой статье мы покажем вам 5 типичных вопросов, которые вы должны пройти при приёме на работу и показать свои умения в JavaScript.

Вопрос 1: Возможности

Рассмотрим следующий код:

Что будет написано на консоли?

Ответ

Код выше напишет 5.

Хитрость этого вопроса заключается в том, что в IIFE есть два задания, но переменная a объявляется ключевым словом var. Это означает, что a является переменной функции. b же присвоена глобальной области.

Другой хитростью этого вопроса является то, что он использует строгий режим (‘use strict’;) в функции. Если был включен строгий режим, код покажет ошибку “Uncaught ReferenceError: b не определён”. Помните, что строгий режим требует, чтобы вы ссылались на глобальные области. Таким образом, вы должны написать:

Вопрос 2: Создание “родных” методов

Определите повторяющуюся функцию в строке объекта. Функция подразумевает целое число, определяющее, сколько раз строка должна повториться. Функция повторяет указанную строку указанное количество раз. Например:

Должно получиться «hellohellohello».

Ответ

Возможная реализация показана ниже:

Вопрос проверяет знания разработчиков о наследовании в JavaScript и свойстве прототипа. Так же проверяется и способность разработчика расширять функциональность собственных типов данных (хотя это не обязательно).

Ещё одним важным моментом является демонстрация знаний о том, как не отменить уже определенные функции. Это делается путём тестирования, подтверждающего, что функция не существует самостоятельно до ее определения.

Этот метод особенно полезен, когда вас попросили заклинить функцию JavaScript.

Вопрос 3: Подъём

Каков результат выполнения и почему?

Ответ

Результаты кода – underfined и 2.

Причина в том, что обе переменные функции подняты (помещены в верхней части функции), но переменные не удерживают присвоены значения. В то время, когда переменная a печатается, она существует в функции (это декларируется), но она все ещё undefined. Другими словами, код выше эквивалентен следующему:

Вопрос 4: Как это работает в JavaScript

Каков результат следующего кода? Обоснуйте свой ответ.

Ответ

Код выдаст Aurelio De Rosa и John Doe. Причина в том, что контекст функции, вызываемый ключевым this словом, в JavaScript зависит от того, как именно вызывается функция, а не от того, как она определена.
Вызов первых console.log ( ), getFullname ( ) вызывается функцией объекта obj.prop. Таким образом, контекст относится к последнему и возвращает “fullname” как свойство объекта. В противном случае, когда getFullname ( ) присваивается переменной, контекст относится к глобальному объекту. Это происходит потому, что тест устанавливается как свойство глобального объекта (window). По этой причине функция возвращает значение свойства fullnameиз window, которая в данном случае является кодом, устанавливаемым в первой строке фрагмента.

Вопрос 5: call ( ) и apply ( )

Исправьте предыдущий вопрос так, чтобы последний console.log ( ) стал Aurelio De Rosa.

Ответ

Вопрос может быть изменен, повлияв на контекст функции, используя функции call ( ) или apply ( ). Если вы не знаете их и их отличия, вам стоит прочесть статью. В коде ниже я буду использовать call ( ), но в этом случае применяется apply ( ), результат будет тот же:

Заключение

В этой статье мы обсудили пять типичных вопросов, которые задают на собеседовании, чтобы проверить разработчика JavaScript. Фактические вопросы могут отличаться от собеседования, но понятия и темы, как правило, схожи. Я надеюсь, что вы хорошо провели время, тестируя свои знания. В случае, если вы не смогли ответить на все вопросы, не волнуйтесь: нет ничего, что изучение и опыт не могут исправить.
Если у вас были другие вопросы на собеседовании, не стесняйтесь поделиться ими с нами. Это может помочь многим разработчикам.

Подробная инструкция для разработчиков по подготовке к собеседованию

Интервью с разработчиками — часть нашей повседневной работы в Rubrain.com. Поэтому мы отлично знаем, как некоторым талантливым программистам сложно одновременно расслабиться психологически, но оставаться сконцентрированными на решении профессиональных задач, которые ставит интервьюер. Чаще всего это происходит из-за недостаточной уверенности в собственных знаниях и страха неожиданных вопросов и задач, которые могут поставить в тупик.

Чтобы разработчики чувствовали себя уверенно на собеседовании в любой организации (будь то небольшой стартап или крупный всемирно известный проект IT-сферы), мы нашли и перевели для вас исчерпывающую инструкцию по подготовке к “coding interview”.

Автор статьи, Ариэль Камю — основатель Microverse, удаленной школы разработчиков ПО, которая базируется в Сан-Франциско и бесплатна для всех учеников, которые пока не нашли работу. С оригиналом статьи можно ознакомиться по ссылке https://medium.freecodecamp.org/the-ultimate-guide-to-preparing-for-the-coding-interview-183251ee36c9

*В заданиях статьи автор несколько раз ссылается на книгу Gayle Laakmann McDowell’s “Cracking the Coding Interview”. Издание на русском языке можно найти в интернете под названием «Карьера программиста. Как устроиться на работу в Google, Microsoft или другую ведущую IT-компанию».

В этой статье вы найдете все, что вам нужно, чтобы быть готовым к техническим собеседованиям, поведенческим вопросам и переговорам о зарплате. У каждой компании есть свой способ собеседования с кандидатами, и вы должны быть готовы ко всем возможным вариантам.

Чем меньше компания, тем проще структура собеседований. Небольшие фирмы и стартапы, как правило, проводят 1-2 собеседования (интерактивные собеседования с помощью таких инструментов, как Сodepen и IDE, или whiteboard interview (когда перед кандидатом ставят маркерную доску или дают лист бумаги и просят написать код на них) или дают небольшой проект, который вы должны будете выполнить самостоятельно.

Крупные компании, такие как Google или Facebook, начинают с телефонных собеседований с менеджером по персоналу и техническими специалистами (где вы выполняете задания по написанию кода), после чего переходят уже к очным собеседованиям.

Задание № 1: прочитайте раздел «Форматы собеседования» (https://github.com/yangshun/tech-interview-handbook/blob/master/non-technical/interview-formats.md) в «Руководстве по техническому собеседованию», созданном сотрудником Facebook Яншуном Тэем, чтобы понять, как разные компании структурируют свои собеседования.

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

  • Технические вопросы
  • Проектирование систем
  • Поведенческие вопросы

Давайте рассмотрим каждый тип вопросов и определим основные цели, которые вы должны достичь, чтобы преуспеть на собеседовании.

Технические задания могут касаться структур данных и алгоритмов или конкретных технологий, языков и систем, используемых в компании, куда вы устраиваетесь.

А значит вы уже должны быть знакомы с такими платформами, как Hackerrank, Learneroo и Leetcode, изучить структуры данных и алгоритмы. Даже в процессе поиска работы продолжайте ежедневно практиковаться с Leetcode (подробнее об этом позже).

Имейте в виду, что вас могут попросить выполнить технические задания, используя последнюю версию IDE или другой интерактивный инструмент, позволяющий запустить код, в Google Doc или маркерной доске, где вам нужно будет писать код без особых подсказок. Вы должны быть готовы к самым разным задачам.

Когда дело касается конкретных технологий, языков и систем, у вас должен быть хороший опыт в том стеке, который вы для себя выбрали. В Microverse, школе для удаленных разработчиков программного обеспечения, которая бесплатна до тех пор, пока вы не устроитесь на работу, мы преподаем Ruby, Ruby on Rails, JavaScript и React, но на самом деле, не имеет значения, что вы выберете, пока вы не разберетесь в конкретном стеке и не станете действительно хороши в нем.

Я буду исходить из того, что вы уже владеете своим стеком и умеете создавать с его помощью проекты.

Далее мы будем также использовать книгу Gayle Laakmann McDowell’s “Cracking the Coding Interview”. Если у вас еще нет такой книги, я настоятельно рекомендую ее купить или попытаться найти в местной библиотеке.

Задание № 2: прочитайте VI раздел книги “Cracking the Coding Interview”, который называется «Технические вопросы».

Задание № 3: чтобы освежить информацию о структурах данных и алгоритмах, выполните ТОЛЬКО первое задание по кодированию в каждом разделе (т.е. матрица, динамическое программирование, геометрия, графика, хэш-таблица и т. д.) этой страницы — https://github.com/yangshun/tech-interview-handbook/tree/master/algorithms, используя выбранный вами язык.

Вы будете использовать новую платформу под названием Leetcode. На странице «Руководства по техническому собеседованию» также содержится обзор каждой структуры данных или алгоритма на случай, если вам понадобятся подсказки. Прочитайте его, прежде чем пытаться выполнить задание по кодированию.

Задание № 4: найдите ресурсы, на которых вы сможете проверить себя в наиболее распространенных концептуальных вопросах о различных технологиях, которые вы знаете. Если вы не разбираетесь в каком-то направлении, используйте Google и изучите этот вопрос, прежде чем пытаться найти решение.

Вот несколько примеров «концептуальных вопросов» для разных языков программирования, которые мы преподаем в Microverse. Если вы работаете на тех же языках, не стесняйтесь использовать эти ссылки. Также вы можете использовать эти сайты, чтобы понять, какие похожие ресурсы вам нужно найти в интернете. Имейте в виду, что концептуальные вопросы отличаются от заданий по программированию тем, что они более теоретичны, то есть вам не придется писать код, чтобы на них ответить (в большинстве случаев).

Алгоритмы и структуры данных (максимум 45 минут)

Подготовьтесь к собеседованию на веб-разработчика: ответы на вопросы, часть 1

Дата публикации: 2020-03-12

От автора: неважно, ищете вы работу или нет, веб-разработчик должен знать как базовые, так и продвинутые темы. Они необходимы для разработки продуктов высокого качества с хорошей производительностью и правильными технологиями. В этой статье я расскажу про свой опыт поиска работы, а также про возможные вопросы для собеседования разработчика, которые необходимо изучить, чтобы подготовить себя и максимально повысить свои шансы на получение работы мечты.

Прежде чем начнем

Ищите вы работу сейчас или искали ранее, у вас точно были эти периоды. Много страхов, эмоций, желаний, надежд и дилемм. Нравится вам или нет, но вам нужно обратить внимание на некоторые проблемы и быть готовыми к поиску работы.

В моей прошлой статье мы говорили о том, что важно для соискателя, получили советы о том, как максимально повысить свои шансы, а также узнали, как подготовиться к процессу получения работы мечты. Если вы не читали эту статью, рекомендую сначала ее прочесть.

Вернемся к основам

Сложность подготовки зависит от того, сколько времени вы уделяете на данный момент HTML, CSS и JS, а также от требований должности. Очень важно понять основы и внутренности. В большинстве случаев короткого разговора достаточно, чтобы понять, что вы чего-то не понимаете. Когда что-то не работает, CSS может быть очень странным. JS может быть странным, даже когда все работает. Задача того, кто вас собеседует – увидеть, как вы рассуждаете, как справляетесь с трудными вопросами, а также понять, насколько ваши знания технологий соответствуют требованиям.

Разберем пример. Часто на собеседованиях спрашивают про замыкания – что вернет код ниже:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Код вернет 5 5 5 5 5, а не 0 1 2 3 4. Если использовать let вместо var или использовать ((j) => < return () =>console.log(j); >)(i) – значение I будет сохранено с помощью IIFE в аргумент j в область видимости новой функции. Этот небольшой вопрос так важен, потому что он собирает в себе важные концепции языка – замыкания, контекст, область видимости, IIFE, а также let и var.

Этот вопрос задают очень часто, но есть множество других вопросов типа «почему это произошло». Отвечая, вы можете вспомнить о Event Loop — отличный момент, чтобы углубиваться в важный механизм того, «как работает JS».

Может быть еще такой вопрос «как решить эту проблему». Может, вы знаете решение, но опрашивающий может попросить более сложные решения. Например, проблему можно решить с помощью функции bind, но также есть apply и call. В чем разница? К внутренностям JS можно двигаться разными путями.

Принцип работы

Хороший разработчик должен знать принцип работы языка/технологии. Это влияет на принятие решений, поддержание производительности и другие параметры. Вы должны знать, почему необходимо использовать эту технологию, а также какие варианты еще есть. Вы должны обладать этими практическими знаниями – они того стоят.

Принцип работы веба

Что происходит, когда вы нажимаете Go в адресной строке браузера? Вы думали об этом? DNS и т.д… Да, но не только это. DNS-серверы действительно участвуют в процессе, но есть и другие части. В процессе проверяется 4 кэша для поиска карты для подходящего IP. Затем идет TCP рукопожатие и Ack сообщения, которые вы помните из лекций на степень бакалавра.

«Страницу не приносит аист, он ее не загружает и не рендерит. Вам, как разработчику, нужно знать, как это происходит.»

Что будет делать браузер после того, как HTML возвращается в него? Проходит большой процесс парсинга и рендера ресурсов, среди которых элементы, внешние и внутренние скрипты и стили. То где вы расположите теги и скрипты на внешние ресурсы повлияет на производительность и время взаимодействия. Существуют приоритеты, и браузер проделывает очень много работы.

JavaScript работает в один поток

ОК, и что? Вы подумаете об этом и поймете, почему один поток это так важно. Какие плюсы и минусы в этом? NodeJS подходит разработчикам, у которых много I/O и асинхронных событий. Он работает на основе событий. То есть тяжелые синхронные вычисления типа машинного обучения, скорее всего, не подходят для NodeJS. Кроме того, существуют другие известные языки типа Java или C#. Очень важно знать, что использовать. Все зависит от способов использования продукта.

Цикл событий, стек вызовов, очередь, куча

Еще одна часть того «как это работает» — это внутренний поток и процесс языка – механизм. Каков порядок выполнения, где хранятся все переменные, в чем разница между стеком вызовов и очередью, а также что происходит при вызове setTimeout. Как устроен мир, и как он устроен? Когда вы ответите на эти вопросы, поймете поток JS. Не ходите на собеседование на должность с JS, если не знаете этот механизм. Это критично.

Что еще очень часто задают на собеседовании – область видимости, контекст, поднятие, как реализовать энкапсуляцию в ES5 и прототип. Если у вас спросили это, не сомневайтесь, вы под полным контролем.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Асинхронные колбек-функции, Promises, Async\Await и генераторы

JS разработчики используют множество асинхронных операций. HTTP-запросы, планировщики, таймеры и I/O операции – это только часть асинхронных операций. Это не очередное свойство языка – это его хлебные крошки. Нас могут впечатлить последние разработки новых функций, мы можем проследить их эволюцию. От кошмара с колбеками до кошмара с promises и к генераторам и функциям async\await. Вы должны знать эту эволюцию и уметь ее объяснить.

Мастер Йода рекомендует:  Бусидо web-дизайнера

ES6/7/8

JS находится в продакшене, но он постоянно обновляется. Процесс принятия новых функций в спецификацию крайне упорядоченный и сбалансированный. ECMAScript – это спецификация, формирующая основы JS. ECMAScript стандартизирован организацией по стандартам International в спецификациях ECMA-262 и ECMA-402.

TC39 официально выпустили ECMAScript 2020 в середине 2020. За последний год мы часто упоминали ECMAScript и не зря. ES6 – одна из свежих функций в мире JS. Он везде. ES6 сейчас так популярен из-за своих улучшений, которые сделали разработку удобнее (новый синтаксис и инновации). В ES появились такие вещи, как async\await, стрелочные функции, оператор расширения, структура классов и т.д.

Семантический HTML

Вы не видите визуальной разницы между div, footer, main and article, но она огромна. Семантический HTML очень важен, по многим причинам. Люди с ограниченными способностями используют скрин ридеры, а семантика влияет на порядок чтения и выполнения операций. Для вас, как разработчика, это должен быть стандарт. Легко можно сделать семантический HTML блок, а не просто div внутри div. Так вы приводите разметку к единообразию, а пользователь получает хороший UX – например, h2 на всех страницах будет выглядеть одинаково.

Иногда у вас могут возникать следующие вопросы:

Можно ли помещать div в параграф?

Когда использовать тег article?

Можно ли помещать main внутрь main?

Что лучше подходит к ссылке назад и вперед – тег a или тег button?

Ответы на множество подобных вопросов и рекомендации можно найти в спецификации HTML или на сайте W3C.

Куки, локальное хранилище или хранилище сессии

Куки, локальное хранилище и хранилище сессии широко используются. Часть из них используется почти на всех сайтах, которые вы посещаете. С их помощью можно хранить локальные настройки типа размера колонок таблицы, порядка и любимых элементов. Локальные данные (локальное хранилище или хранилище сессии) влияют на конкретный браузер, на котором они сохранены. Если необходимо влиять на все браузеры и машины пользователя, то данные нужно хранить на сервере.

С помощью кук можно проходить авторизацию и проверять надежность источника запроса. Куки автоматически добавятся в запросы, если не передать время жизни. Локальное хранилище и хранилище сессии не добавятся к запросам на сервер, к ним обращаются только на стороне клиента. Хранилище сессии доступно до тех пор, пока не закрыта вкладка в браузере. Локальное хранилище доступно и при последующих сессиях в браузере.

Локальное хранилище может сохранять толкьо строковые ключи и значения, а куки может хранить сложные объекты. Эти 3 хранилища ограничены размерами. Локальное хранилище и хранилище сессии могут содержать до 5Мб, а куки до 4Кб. Есть и другие ограничения и различия. Это частая тема на собеседовании, она может быть решением на другие вопросы.

Заключение

К собеседованию можно подготовиться. Подготовка делает вас увереннее и помогает вспомнить темы, которые вы редко используете. На подготовку рекомендуется отводить определенное время, но нужно быть внимательным. В следующей части мы продолжим разбирать подходящие и важные темы, такие как архитектура. Я расскажу вам про некоторые действия и источники, которые помогут упростить подготовку.

Автор: Dor Moshe

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с нуля

Вопросы для собеседования кандидату на должность Front-end разработчика

Это перевод популярного репозитория от html5bp — Front-end Job Interview Questions (en), который существует с 2009 года. Список вопросов составлялся и дополнятся известными во front-end людьми, поэтому на этот список можно положиться. Перевод делал не я (вернее я хотел, но он оказался уже переведен).

Замечание: Этот репозиторий содержит подборку вопросов, которые могут быть использованы на собеседованиях на должность front-end разработчика. Здесь предлагаются лишь идеи, не нужно задавать все вопросы сразу (иначе в один час точно не уложитесь).

Также, имейте в виду, что многие вопросы не требуют однозначного короткого ответа, а лишь помогают завести беседу на ту или иную тему (предоставляя кандидату возможность показать себя во всей красе).

Содержание

Общие вопросы: [↑]

  • Вы пользуетесь Твиттером?
    • Если да, то кто присутствует в вашей ленте?
  • Кого из мировых front-end разработчиков вы знаете?
    • А российских front-end’щиков?
  • У Вас есть аккаунт на GitHub?
    • Если да, то за какими интересными проектами вы следите?
  • Какие блоги Вы читаете?
  • Какие системы управления версиями вам приходилось использовать?
  • Расскажите о своей среде разработки (ОС, редактор, браузер(ы), прочие инструменты)
  • Опишите последовательность Ваших действий, когда вы создаете новую Web-страницу
  • Можете ли пояснить разницу между progressive enhancement и graceful degradation?
    • Бонус, если также расскажете про feature detection (определение возможностей браузера)
  • Объясните, что означает «Семантическая разметка»
  • Какой Ваш основной браузер для разработки и какими инструментами Вы в нем пользуетесь?
  • Как можно оптимизировать загрузку внешних ресурсов на странице?
    • Комбинация из потенциальных решений:
      • Конкатенация
      • Минификация
      • Использование CDN
      • Кэширования
      • и т.д.
  • Каково преимущество в подгрузке внешних ресурсов с нескольких доменов?
    • Сколько ресурсов браузер может одновременно качать с одного домена?
  • Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального)
  • Если Вы присоединились к проекту, где для форматирования используются табы, а Вы привыкли использовать пробелы, как Вы поступите?
    • Предложите использовать EditorConfig (editorconfig.org)
    • Останетесь верным своим привычкам
    • Выполните команду :retab!
  • Используете ли приёмы для ускорения написания кода (сниппеты, Emmet)?
  • Знакомы ли с шаблонизаторами (Smarty, HAML etc.)
  • Реализуйте примитивное слайд-шоу
    • Бонус, если Вы это сделаете без использования JS
  • Какие инструменты Вы используете для тестирования производительности кода?
    • JSPerf (jsperf.com)
    • Dromaeo (dromaeo.com)
    • и т.д.
  • Если бы у Вас была возможность освоить новую технологию в этом году, что бы это было?
  • Объясните важность стандартов и комитетов по стандартам
  • Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?

Вопросы по HTML: [↑]

  • Для чего нужен doctype и сколько разновидностей Вы можете назвать?
  • В чем разница между standards mode и quirks mode?
  • Какие ограничения накладывают стандарты XHTML?
    • Могут ли возникнуть проблемы при подаче страниц с типом application/xhtml+xml ?
  • Как следует оформлять страницу, в которой контент может быть на разных языках?
    • Что нужно иметь в виду при разработке многоязычных сайтов?
  • Можно ли использовать синтаксис XHTML в HTML5?
  • Как использовать XML в HTML5?
  • Чем полезны data- атрибуты?
  • Если рассматривать HTML5 как открытую web-платформу, на чем она строится, из каких компонентов состоит?
  • Объясните разницу между cookies, sessionStorage и localStorage.
  • Знакомы ли с подводными камнями вёрстки почтовых шаблонов?
  • Какая разница между GET и POST ?

Вопросы по JavaScript: [↑]

  • Какими js-библиотеками Вы пользовались?
  • Вы когда-нибудь заглядывали в исходный код библиотек/фреймворков, которыми пользовались?
  • Чем JavaScript отличается от Java?
  • Что-такое хэш-таблица?
  • Что такое неопределенные (undefined) и необъявленные (undeclared) переменные?
  • Что такое замыкание и как/для чего его используют?
    • Как вы предпочитаете их использовать?
  • Где обычно используются анонимные функции?
  • Объясните «JavaScript module pattern» и где он (паттерн) применяется
    • Бонус, если упомянута чистота глобального пространства имен
    • Что, если Ваш модуль не заключен в пространство имен?
  • Как Вы организуете свой код? (module pattern, наследование)
  • В чем разница между host-объектами и нативными объектами?
  • В чем разница между последними двумя строчками:
  • В чем разница между .call и .apply ?
  • Что делает и для чего нужна функция Function.prototype.bind ?
  • Когда Вы оптимизируете свой код?
  • Объясните, как работает наследование в JavaScript?
  • Где до сих пор используется document.write() ?
    • В большинстве генерируемых баннеров, хотя так делать не рекомендуется
  • В чем разница между feature detection (определение возможностей браузера), feature inference (предположение возможностей) и анализом строки user-agent?
  • Расскажите об AJAX как можно более подробно
  • Объясните, как работает JSONP (и почему это не настоящий AJAX)
  • Вы когда-нибудь использовали шаблонизацию на JavaScript?
    • Если да, какие библиотеки использовали? (Mustache.js, Handlebars etc.)
  • Объясните, что такое «hoisting»
  • Объясните event bubbling
  • В чем разница между «атрибутом» (attribute) и «свойством» (property)?
  • Почему не следует расширять нативные JavaScript объекты?
  • Почему следует расширять нативные JavaScript объекты?
  • В чем разница между событиями document load и document ready ?
  • В чем разница между == и === ?
  • Как получить параметры из URL’а текущего окна?
  • Объясните same-origin policy в контексте JavaScript
  • Объясните event delegation
  • Какие Вы знаете паттерны организации наследования в JavaScript?
  • Сделайте так, чтобы этот код работал:
  • Опишите принцип мемоизации (избежание повторных вычислений) в JavaScript
  • Почему тернарный оператор так называется?
  • Что такое арность функции?
  • Что делает строчка «use strict»; ? Какие достоинства и недостатки от её использования?

Примеры кода на JavaScript [↑]

Вопрос: Какое значение возвращает данное предложение?
Ответ: 3

Вопрос: Какое значение возвращает данное предложение?
Ответ: «goh angasal a m’i»

Вопрос: Чему равно window.foo?
Ответ: «bar»,
только если выражение window.foo было ложным, иначе переменная сохранит своё изначальное значение

Вопрос: Что покажут эти два alert?
Ответ: «Hello World» и ReferenceError: bar is not defined

Вопрос: Чему равно foo.length?
Ответ: 2

Вопрос: Чему равно foo.length?
Ответ: undefined

Вопросы по jQuery: [↑]

  • Объясните «chaining».
  • Объясните «deferreds».
  • Какие Вы знаете приемы оптимизации кода, использующего jQuery?
  • Что делает .end() ?
  • Как добавить пространство имён к обработчику событий? Для чего это нужно?
  • Назовите 4 разных вида аргументов, которые принимает функция jQuery()?
    • Селектор (строка), HTML (строка), Callback (функция), HTMLElement, объект, массив, массив элементов, объект jQuery etc.
  • Что такое очередь эффектов (fx queue)?
  • В чем разница между .get() , [] , и .eq() ?
  • В чем разница между .bind() , .live() , и .delegate() ?
  • В чем разница между $ и $.fn ? Что вообще такое $.fn ?
  • Оптимизируйте данный селектор:

Вопросы по CSS: [↑]

  • Что такое «reset» CSS и для чего он нужен?
  • Объясните, что такое плавающие элементы (floats) и как они работают?
  • Какие вы знаете методы запрета обтекания (clearing) и какие где применяются?
  • Что такое CSS спрайты? Как они реализуются на странице или сайте?
  • Какие Ваши любимые методы подмены текста картинкой (image replacement) и когда Вы их используете?
  • CSS property hacks, conditionally included .css files…
  • Как Вы обеспечиваете отображение страниц в старых/ограниченных браузерах?
    • Какие приёмы/процессы Вы при этом используете?
  • Какими способами можно визуально скрыть элемент (оставив его доступным для экранного диктора, screen reader)?
  • Вы когда-нибудь использовали сеточную верстку (grid system, grid design)? Если да, какая Ваша любимая?
  • Приходилось ли вам использовать или реализовывать media queries или верстку под мобильные устройства?
  • Приходилось ли вам стилизовать SVG?
  • Как оптимизировать страницы для печати?
  • Какие есть подводные камни в оптимизации производительности CSS?
  • Вы используете CSS препроцессоры? (Sass, Compass, Bourbon, Stylus, LESS)
    • Если да, расскажите, что вам в них нравится и не нравится?
  • Как Вы сверстаете макет, который использует нестандартные шрифты?
    • Webfonts (сервисы вроде Google Webfonts, Typekit, Fontsquirrel etc.)
  • Объясните, как браузер определяет, на какие элементы накладывать CSS стили?
  • Приходилось ли сталкиваться с Retina-дисплеями?
  • Слышали ли о системе БЭМ (Блок-Элемент-Модификатор)?
    • Если да, то в чем её суть? Расскажите о системе нотификации селекторов.

«Светская беседа»: [↑]

  • Самое крутое, что Вы когда либо делали и чем гордитесь?
  • Вы знаете секретный жест HTML5-банды?
  • Что Вы больше всего любите в Ваших инструментах разработки?
  • У Вас есть какие-нибудь личные проекты?
  • Возьмите листок бумаги и напишите в столбик буквы A B C D E. Теперь отсортируйте столбик в алфавитном порядке по убыванию, не написав ни строчки кода.
    • Засеките, через сколько времени кандидат перевернет листок
  • Пират или ниндзя?
    • Бонус за комбинацию. Аргументированную. +2 за зомби-пират-ниндзя-обезьяну
  • Чем бы Вы занимались, если бы не Web-разработкой?
  • Какая Ваша любимая «фишка» Internet Explorer?
  • Закончите предложение: Brendan Eich и Doug Crockford являются ____ языка JavaScript.
  • jQuery: хорошая библиотека или великая библиотека? Тема для дискуссии…

Первоначальные авторы [↑]

  • @bentruyman (bentruyman.com)
  • @cowboy (benalman.com)
  • @roger_raymond (twitter.com/iansym)
  • @ajpiano (ajpiano.com)
  • @paul_irish (paulirish.com)
  • @SlexAxton (alexsexton.com)
  • @boazsender (boazsender.com)
  • @miketaylr (miketaylr.com)
  • @vladikoff (vladfilippov.com)
  • @gf3 (gf3.ca)
  • @jon_neal (twitter.com/jon_neal)
  • @wookiehangover (wookiehangover.com)
  • @darcy_clarke (darcyclarke.me)

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.

Пять типичных вопросов по JavaScript при собеседовании на работу

Разработчики JavaScript широко востребованы в it-индустрии. Так, при желании повысить, к примеру, свой оклад, недостатка в вариантах трудоустройства, как правило, не бывает. Однако, прежде чем устроиться на работу, необходимо на практике продемонстрировать свои знания и пройти собеседование. В этой стать будут рассмотрены 5 типичных вопросов, задаваемых кандидату при собеседовании, чтобы оценить его знания по JavaScript.

Вопрос 1-ый: Область видимости (scope)

Возьмем следующий код:

jQuery

Что что покажет консоль?

Ответ

Код выше выведет 5 .

Подвох заключается в том, что IIFE (немедленно выполняемая функция) имеет два присваивания, но переменная a объявлена посредством ключевого слова var . То есть a — это локальная переменная функции, а b , напротив, присваивается глобальной области видимости/действия.

Одним подвохом вопрос не ограничивается: внутри функции (строгий режим) ( ‘usestrict’; ) не применяется. В случае его применения код выдал бы ошибку «UncaughtReferenceError: bisnotdefined» . Надо помнить, что жесткий режим требует, чтобы вы явно ссылались на глобальную область видимости, если так было задумано. То есть вы должны написать следующее:

jQuery

Вопрос 2-ой: Создайте «нативные» методы

Опишите функцию repeatify объекта String . Функция принимает целое число. Число определяет сколько раз необходимо дублировать строку. Функция возвращает повторяемую строку столько раз, сколько было заранее определено. Пример:

Будет выведено: hellohellohello .

Ответ

Возможное решение показано ниже:

Javascript

Вопрос проверяет знания разработчика о наследовании в JavaScript и о свойстве prototype , а также его знания касательно расширения функциональности нативных данных.

Еще одна цель – показать, что соискатель знает, как избежать замещения возможных заранее установленных функций. То есть перед тем как описать функцию нужно убедиться в том, что она не создана:

Javascript

Этот прием особенно полезен, когда просят заклинить JavaScript функцию.

Вопрос 3-ий: Подъем (Hoisting)

Каким будет результат выполнения этого кода и почему?

Javascript

Ответ

Результат будет – undefined и 2 .

Причина: переменная и функции подняты (перемещены на верх функции), а назначенные переменным значения потеряны. То есть, когда переменная выводится в консоли, она существует в функции (объявлена), но еще undefined . Другими словами, код выше равнозначен следующему:

Javascript

Вопрос 4-ый: как работает this в JavaScript

Каким будет результат следующего кода? Обоснуйте ответ.

Javascript

Ответ

Код выведет AurelioDeRosa и JohnDoe . Причина: контекст функции (то, на что ссылается ключевое слово this ) в JavaScript зависит от того, как функция вызывается, а не определяется.

В первом console.log() , getFullname() вызывается как функция объекта obj.prop . Таким образом, контекст ссылается на последний объект и функция возвращает fullname свойство данного объекта. С другой стороны, когда переменной test присваивается getFullname() , контекст ссылается на глобальный объект ( window ). Это объясняется тем, что переменная test по умолчанию установлена как свойство глобального объекта. Именно по этой причине функция возвращает значение свойства fullname от window , которое в нашем случае определенно в первой строке сниппета.

Вопрос 5-ый: call() и apply()

Возвращаясь к 4 вопросу, сделайте так, чтобы последний console.log() выводил AurelioDeRosa .

Вопрос может быть решен путем переопределения контекста функции. Для этого можно использовать методы call() или apply() . Если вам неизвестны эти функции, советую обратиться к статье Методы javascript call и apply . В коде ниже используется метод call() , однако в нашем случае метод apply() даст тот же результат:

Javascript

Заключение

Были рассмотрены 5 типичных вопрос при собеседовании для проверки знаний разработчика JavaScript. От собеседования к собеседованию вопросы могут варьироваться в деталях и частностях, однако их общая проблематика остается неизменной.

Добавить комментарий