Задачи на собеседовании javascript

Собеседование на должность JavaScript-разработчика: популярные задачи с разбором решений

Перевод статьи «How to Beat 5 Common JavaScript Interview Challenges»

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

Проблема распространённых задач заключается в том, что они не имеют никакого отношения к реальной работе, особенно когда речь идёт о frontend. На собеседовании не хватает простых вопросов, например о совместимости браузера, вёрстке или событиях DOM.

Специалисты по подбору сотрудников, которые поддерживают такой подход, часто говорят что-то вроде:

— Я бы предпочёл нанять умного человека и научить его Х, чем нанять человека, который знает всё об Х, но ему не хватает творчества, логики и умения рассуждать.

Собеседование на должность frontend-инженера в Сан-Франциско

Как бы то ни было, на данный момент задачи всё ещё являются важной частью процесса собеседования. Эта статья расскажет, как решить пять распространённых задач по программированию, которые вам могут задать в ходе собеседования на должность младшего JavaScript- или frontend-разработчика.

Подготовка к собеседованию

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

• Готовьтесь заранее. Определите приоритет в подготовке, изучайте менее знакомые темы и много практикуйтесь. Если у вас нет опыта работы в области компьютерных наук, обязательно ознакомьтесь с некоторыми фундаментальными темами, касающимися алгоритмов и структур данных. Существуют онлайн-платформы, как платные, так и бесплатные, которые предлагают отличные способы отработать свои навыки прохождения собеседований. GeeksforGeeks, Pramp, Interviewing.io и CodeSignal — лишь некоторые из них.
• Тренируйтесь мыслить вслух, когда пытаетесь найти решение. Фактически, раскрыть ваш ход мыслей в обстановке собеседования предпочтительнее, чем тратить всё доступное время на написание кода в полной тишине. Ваши слова дадут интервьюеру шанс помочь, если вы ошибётесь. Это также подчеркнёт ваши навыки общения.
• Осознайте задачу, прежде чем начать её решать. Это важно. Иначе вы потратите время на размышления о неверной задаче. Кроме того, это заставит задуматься над вопросами, которые вы можете задать интервьюеру.
• Практикуйте написание кода вручную. Это поможет, если вам предложат использовать доску, где нет автозаполнения, форматирования и т. д. При подготовке пробуйте записать свой код на листе бумаги или доске вместо того, чтобы держать всё в голове.

Стандартные задачи на JavaScript

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

Палиндром

Палиндром — это слово, предложение или последовательность символов, которая читается слева направо так же, как и справа налево. Например, «racecar» и «Anna» являются палиндромами, а «Table» и «John» — нет.

Формулировка задачи

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

palindrome('racecar') === true palindrome('table') === false

Логическое решение задачи

Эта задача строится на идее перевернуть строку задом наперёд. Если обратная строка совпадает с исходной, то это палиндром, и функция должна вернуть значение true. И наоборот, если обратная строка не совпадает с исходной, функция должна вернуть значение false.

Практическое решение

Вот один из способов решения задачи палиндрома:

const palindrome = str => { // Меняем регистр строки на нижний str = str.toLowerCase() // Переворачиваем строку и возвращаем результат сравнения return str === str.split('').reverse().join('') }

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

Далее переворачиваем исходную строку. Это можно сделать, преобразовав строку в массив с помощью метода .split() (библиотека String), затем перевернув массив методом .reverse() (библиотека Array) и, наконец, преобразовав обратный массив снова в строку с помощью метода .join() (библиотека Array).

Остаётся сравнить перевёрнутую строку с исходной и вернуть результат в виде true или false.

FizzBuzz

Это очень популярная задача на собеседованиях.

Найти гласные

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

Фибоначчи

Эта статья не была бы полной без задачи Фибоначчи — классического вопроса, с которым вы наверняка столкнётесь во время собеседования.

Последовательность Фибоначчи — это порядок чисел, где каждое последующее число является суммой двух предыдущих. Например, первые десять чисел последовательности выглядят так: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Заключение

Если вы уже прошли несколько этапов собеседований на работу frontend- или JavaScript-разработчика, особенно уровня junior, вы, вероятно, столкнулись хотя бы с одной или двумя из задач, которые перечислены выше. Но даже если они вам не встретились, вы можете использовать их для совершенствования своих навыков программирования на JavaScript.

Ещё больше IT-задач для собеседований с разбором решений можно найти здесь.

Не смешно? А здесь смешно: @ithumor

Задачи с решениями на JS

Вы здесь: — JavaScript — JavaScript Основы — Задачи с решениями на JS

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

Задача на создание примитивного калькулятора на JS

Запросите у пользователя ввести два числа и верните ему сумму этих двух чисел. Для решения используйте функции: prompt и parseInt.

Решение задачи:

В переменные a и b запишутся, введенные пользователем числа в поля ввода модальных окон. Если пользователь введет строку или число с дробной частью, то функция parseInt преобразует их к целым числам. Команда alert выведет результат сложения двух чисел.

let a = prompt(«Введите первое число:»); // ввели число a = parseInt(a); // преобразовали к целому числу let b = prompt(«Введите второе число:»); // ввели число b = parseInt(b); // преобразовали к целому числу

alert(a+b); // вывели результат сложения

Задача на ветвление (if-else) на JS

Реализуйте алгоритм: участнику викторины задается 2 вопроса. За каждый правильный ответ начисляется 1 балл. Подсчитать и вывести количество правильных ответов на экран.

Задача на циклы и массивы на JS

Напишите программу, которая будет задавать вопросы пользователю и затем выведет ответы на странице. Для решения используйте функцию prompt и цикл for.

Вопросы на собеседовании для JavaScript-программиста

Предлагаем вашему вниманию широкий список вопросов, которые могут задать на собеседовании JavaScript-программисту. Все задачи решены на JS, ES5 и ES6.

После каждого решения приведена ссылка на Codepen, где вы можете самостоятельно опробовать решение конкретной задачи.

Массивы

1.1 У вас есть массив целых чисел, найдите наибольшее произведение из трёх чисел данного массива.

var unsortedArray = [-10, 7, 29, 30, 5, -10, -70]; computeProduct(unsortedArray); // 21000 function sortIntegers(a, b) { return a — b; } // Наибольшее произведение — это (min1 * min2 * max1 || max1 * max2 * max3) function computeProduct(unsorted) { var sortedArray = unsorted.sort(sortIntegers), product1 = 1, product2 = 1, array_n_element = sortedArray.length — 1; // Получаем произведение трёх наибольших элементов уже отсортированного массива for (var x = array_n_element; x > array_n_element — 3; x—) { product1 = product1 * sortedArray[x]; } product2 = sortedArray[0] * sortedArray[1] * sortedArray[array_n_element]; if (product1 > product2) return product1; return product2; }

Решение на Codepen: https://codepen.io/kennymkchan/pen/LxoMvm?editors=0012

Нахождение пропущенного элемента

1.2 Неотсортированный массив содержит (n-1) чисел из последовательности {1,2,…,n} (границы определены), найдите недостающий элемент массива за время o(n).

// Число, возвращаемое функцией — 8 var arrayOfIntegers = [2, 5, 1, 4, 9, 6, 3, 7]; var upperBound = 9; var lowerBound = 1; findMissingNumber(arrayOfIntegers, upperBound, lowerBound); // 8 function findMissingNumber(arrayOfIntegers, upperBound, lowerBound) { // Проходим через массив и находим сумму чисел var sumOfIntegers = 0; for (var i = 0; i < arrayOfIntegers.length; i++) { sumOfIntegers += arrayOfIntegers[i]; } /* Находим теоретическую сумму последовательных чисел, используя вариацию суммы Гаусса*/ // Формула: [(N * (N + 1)) / 2] - [(M * (M - 1)) / 2]; // N - верхняя граница, а M - нижняя граница upperLimitSum = (upperBound * (upperBound + 1)) / 2; lowerLimitSum = (lowerBound * (lowerBound - 1)) / 2; theoreticalSum = upperLimitSum - lowerLimitSum; return theoreticalSum - sumOfIntegers; }

Решение на Codepen: http://codepen.io/kennymkchan/pen/rjgoXw?editors=0012

Удаление повторяющихся значений

1.3 Удалите все одинаковые значения в массиве, возвращая массив, состоящий из уникальных элементов.

// Реализация на ES6 var array = [1, 2, 3, 5, 1, 5, 9, 1, 2, 8]; Array.from(new Set(array)); // [1, 2, 3, 5, 9, 8] // Реализация на ES5 var array = [1, 2, 3, 5, 1, 5, 9, 1, 2, 8]; uniqueArray(array); // [1, 2, 3, 5, 9, 8] function uniqueArray(array) { var hashmap = {}; var unique = []; for(var i = 0; i < array.length; i++) { /* Если возвращаемое значение (unique) - undefined, то оно приравнивается к false. */ if(!hashmap.hasOwnProperty(array[i])) { hashmap[array[i]] = 1; unique.push(array[i]); } } return unique; }

Решение на Codepen: http://codepen.io/kennymkchan/pen/ZLNwze?editors=0012

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

var array = [7, 8, 4, 9, 9, 15, 3, 1, 10]; // [7, 8, 4, 9, 9, 15, 3, 1, 10] возвращаемое значение будет `11`, как разница между `4` и `15` // Примечание: это не `14`, как разница между `15` и `1`, так как 15 стоит перед 1. findLargestDifference(array); function findLargestDifference(array) { // Если в массиве всего один элемент, то задача не имеет смысла if (array.length currentMin && (array[i] — currentMin > currentMaxDifference)) { currentMaxDifference = array[i] — currentMin; } else if (array[i] = 1) { if (digit % 2) { return decimalToBinary((digit — 1) / 2) + 1; } else { return decimalToBinary(digit / 2) + 0; } } else { return ''; } }

Решение на Codepen: http://codepen.io/kennymkchan/pen/OWYYKb?editors=0012

4.2 Напишите рекурсивную функцию, которая выполняет бинарный поиск

function recursiveBinarySearch(array, value, leftPosition, rightPosition) { // Value DNE if (leftPosition > rightPosition) return -1; var middlePivot = Math.floor((leftPosition + rightPosition) / 2); if (array[middlePivot] === value) { return middlePivot; } else if (array[middlePivot] > value) { return recursiveBinarySearch(array, value, leftPosition, middlePivot — 1); } else { return recursiveBinarySearch(array, value, middlePivot + 1, rightPosition); } }

Решение на Codepen: http://codepen.io/kennymkchan/pen/ygWWmK?editors=0012

Числа

5.1 У вас есть целое число, определите, является ли оно является степенью двойки.

isPowerOfTwo(4); // true isPowerOfTwo(64); // true isPowerOfTwo(1); // true isPowerOfTwo(0); // false isPowerOfTwo(-1); // false //Без проверки на ноль function isPowerOfTwo(number) { // `&` ипользует побитовую запись n. // В данном случае, входное число — 4; выражение идентично: // `return (4 & 3 === 0)` /* 4 в двоичном виде — 100, а 3 — 011. & проверяет на то, чтобы оба числа в двоичном виде имели еденицу на одном и том же месте. В таком случае будет возвращено 1, иначе — 0. В этом случае, результатом будет 000. */ // таким образом, 4 удовлетворяет условиям. return number & (number — 1) === 0; } //С проверкой на ноль function isPowerOfTwoZeroCase(number) { return (number !== 0) && ((number & (number — 1)) === 0); }

Решение на Codepen: http://codepen.io/kennymkchan/pen/qRGGeG?editors=0012

JavaScript

6.1 Объясните, что такое «поднятие» в JavaScript.

«Поднятие» — это правило, которое подразумевает под собой необходимость перемещать все объявления переменных в вершину конкретного блока кода. Это касается объявления переменных, инициализация же может проходить и дальше в коде.

6.2 Объясните функционал директивы use strict;

директива use strict; говорит о том, что код должен быть выполнен в «строгом режиме». Один из плюсов данного режима — это то, что он предотвращает использование необъявленных переменных. Наиболее старые версии JavaScript будут игнорировать данную директиву.

// Пример «строгого режима» «use strict»; catchThemAll(); function catchThemAll() { x = 3.14; // На этом моменте будет ошибка return x * x; }

6.3 Объясните, что такое event bubbling и как его предотвратить.
Even bubbling — это концепт, при котором порядок выполнения событий должен подниматься по структуре DOM-дерева.

Один из вариантов предотвращения — «event.stopPropagation()» или «event.cancelBubble», для IE версии ниже 9.

6.4 Какова разница между == и === в JavaScript?

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

// Пример «==» и «===». 0 == false; // true 0 === false; // false 2 == '2'; // true 2 === '2'; // false

6.5 Какова разница между null и undefined?

6.6 В чём разница между прототипным наследованием и классическим наследованием?

В классическом наследовании классы неизменны, поддерживают множественное наследование, могут содержать интерфейсы, final классы и abstract классы. Прототипы же куда более гибки в том плане, что они могут быть изменены.

Другие статьи по теме

Подборка материалов по JavaScript

10 вещей, которые стоит знать каждому JavaScript-разработчику

7 на первый взгляд простых вопросов на собеседовании по JavaScript

От автора: самые стрессовые для меня вещи в разработке программного обеспечения это: собеседование по кодированию и дотошный менеджер или товарищ по команде. Не JavaScript, не this, не CSS, не Internet Explorer, а именно эти две вещи.

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

Что вы можете сделать? Следуйте совету: «Практика позволяет нам совершенствоваться». Тратя достаточное количество времени, а лучше регулярно, на глубокое понимание JavaScript, вы улучшите свои навыки кодирования и, как положительный побочный эффект, навыки интервьюирования.

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

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

JavaScript. Быстрый старт

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

Узнать подробнее

1. Случайная глобальная переменная

Вопрос. Для чего предназначены typeof a и typeof b в следующем фрагменте:

function foo() { let a = b = 0; a++; return a; } foo(); typeof a; // => ??? typeof b; // => ???

Ответ. Давайте внимательнее посмотрим на строку 2: let a = b = 0. Этот оператор на самом деле объявляет локальную переменную a. Тем не менее, он объявляет глобальную переменную b.

Ни в области видимости foo(), ни в глобальной области видимости нет объявленной переменной b. Так что JavaScript интерпретирует выражение b = 0 как window.b = 0.

b — это случайно созданная глобальная переменная

В браузере приведенный выше фрагмент кода эквивалентен:

function foo() { let a; window.b = 0; a = window.b; a++; return a; } foo(); typeof a; // => 'undefined' typeof window.b; // => 'number'

typeof a равно ‘undefined’. Переменная a объявляется только в области видимости foo() и недоступна во внешней области видимости. typeof b оценивается, как ‘number’. b является глобальной переменной со значением 0.

2. Свойство длины массива

Вопрос. Каково значение clothes[0]:

const clothes = ['jacket', 't-shirt']; clothes.length = 0; clothes[0]; // => ???

Ответ. Свойство length объекта массива имеет особое поведение: Уменьшение значения свойства length имеет побочный эффект от удаления собственных элементов массива, индекс массива которых находится между старым и новым значениями длины.

Из-за этого поведения length при выполнении JavaScript clothes.length = 0 все элементы массива clothes удаляются.
clothes[0] равно undefined, потому что массив clothes был очищен.

3. Тест на внимательность

Вопрос. Каково содержимое массива numbers:

const length = 4; const numbers = []; for (var i = 0; i < length; i++);{ numbers.push(i + 1); } numbers; // => ???