Задачи с собеседований (front-end)

Задачи с собеседований (front-end)

Так получилось, что за свою карьеру front-end разработчика, я побывала на многих собеседованиях. Тема прохождения интервью не теряет своей актуальности, а в комментариях, когда речь заходит о собеседованиях, начинают ломаться копья. Хочу тоже внести свой вклад и поделиться накопившейся коллекцией вопросов. Прошу.

Лирическое отступление

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

Задачи

Для начала что-нибудь полегче.

1. Есть некоторая строка (var str = ‘fgfggg’;), что будет, если мы возьмем str[0]?

Ответ

str[0] вернет символ строки, который находится по нулевому индексу. Строка в js — immutable, то есть из нее можно прочитать символ, а вот записать нет.

2. Реализовать методы, которые в процессе выполнения строки (2).plus(3).minus(1) дали бы на выходе 4.

Number.prototype.plus = function (value) {
  return this + value;
}

Number.prototype.minus = function (value) {
  return this - value;
}

Array.prototype.sort = function () {}
var t = [2, 1, 22];
t.sort()

function getStr() {
  return [].slice.call(arguments, 1).join(arguments[0])
}

var sum = 0;

function getSum(obj) {
  sum += obj.valueNode;
  if (obj.next != null) {
    for (var i = 0; i < obj.next.length; i++) {
      getSum(obj.next[i]);
    }
  }

  return sum;
}

var tree1 = {
        valueNode: 1,
        next: [
          {
            valueNode: 3,
            next: null
          },
          {
            valueNode: 2,
            next: null
          }
        ]
      } 

var tree = {
  valueNode: 3,
  next: [{
        valueNode: 1,
        next: null
      },
      {
        valueNode: 3,
        next: null
      },
      {
        valueNode: 2,
        next: null
      },
      {
        valueNode: 2,
        next: [
          {
            valueNode: 1,
            next: null
          },
          {
            valueNode: 5,
            next: null
          }
        ]
      }]
};
console.log(getSum(tree1));
sum = 0;
console.log(getSum(tree));

function getSum(obj) {
  var arr = [obj],
    sum = 0,
    current;

  while(arr.length > 0) {
    current = arr.shift();
    sum += current.valueNode;

    if (current.next != null) {
      for (var i = 0; i < current.next.length; i++) {
        arr.push(current.next[i]);
      }
    }
  }

  return sum;
}

var tree = {
  valueNode: 3,
  next: [{
        valueNode: 1,
        next: null
      },
      {
        valueNode: 3,
        next: null
      },
      {
        valueNode: 2,
        next: null
      },
      {
        valueNode: 2,
        next: [
          {
            valueNode: 1,
            next: null
          },
          {
            valueNode: 5,
            next: null
          }
        ]
      }]
};
getSum(tree)

Ответ

8. Как применяются скругленные углы для элементов и стили для текста(шрифт, тип шрифта, цветащте и тд)?

9. Что такое ресет стилей?

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

Ответ

body {
  overflow: hidden;
}

.wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgba(230, 230, 230, .1);
}

.popup {
  position: absolute;
  width: 400px;
  height: 300px;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

11. Нарисовать стилями полукруг.

Ответ

width: 100px;
height: 100px;
border-right: 1px solid #f00;
border-radius: 0 50% 50% 0;

12. Есть массив в котором лежат объекты с датами, отсортировать по датам.

var arr = [{date: '10.01.2017'}, {date: '05.11.2016'}, {date: '21.13.2002'}];

arr.forEach(function(item) {
  var arrDate = item.date.split('.'),
      date = new Date(Number(arrDate[2]), Number(arrDate[1]), Number(arrDate[0]));
      item.time = date.getTime();
});

arr.sort(function (a, b) {
  if (a.time - b.time < 0) {
        return false;
      } else {
        return true;
      }
});

var res = arr.map(function (item) {
  return {date: item.date};
});

console.log(res);

13. Есть несколько слов, определить состоят ли они из одних и тех же букв(‘кот’, ‘ток’, ‘окт’)
Ответ

var arr = ['kot', 'tok', 'okt'],
  arr1 = ['kot', 'tok', 'ott'];

function sameWords(arr) {
  var word1, word2;
  
  for (var i = 0; i < arr.length-1; i++) {
    word1 = 0;
    word2 = 0;
    
    if (arr[i].length !== arr[i+1].length) {
        return false;   
    } else {
      for (var j = 0; j < arr[i].length; j++) {
        word1 += arr[i][j].charCodeAt(0);
        word2 += arr[i+1][j].charCodeAt(0);
      }
      
      if (word1 !== word2) {
        return false;
      }
    }      
  }
  
  return true;
}

console.log(sameWords(arr));
console.log(sameWords(arr1));

Про промисы

В последнее время часто стали задавать вопросы про promse, что это такое, какие методы обработки ошибок, можно ли обойтись без них.(14, 15, 16)

var promis = new Promise(function (resolve, reject) {
  ...
  setTimeout(function () {
    resolve(res);
  }, 5000);
});

Несколько промисов можно объединить и получить разом ответ от них

var promisesImages = [];

for (let i = 0; i < count; i++) {
    promisesImages.push(new Promise((resolveImg, rejectImg) => {
        let img =  new Image(),
            startTime = Date.now();

        img.src = this.imgUrl + '?' + Math.floor(Math.random() * 100000000);

        img.onload = () => {
            resolveImg(Date.now() - startTime);
        };
        img.onerror = rejectImg;
    }));
}

Promise.all(promisesImages)
    .then((timings) => {...})

17. И конечно вопрос на засыпку: «Каким образом можно обойтись без промисов?».
Ответ

18. Еще вспомнился вопрос про обработку ошибок в промисах. У нас есть три запроса к серверу, один возвращает нам имя пользователя, второй его данные, а третий изображение для аватарки, мы для каждого запроса используем по промису, объединяя их в цепочку, что будет если в одном из запросов произойдет ошибка, довыполнится ли цепочка?

Промисы все разрастаются и на смену Callback Hell приходит Promise Hell. Что же делать?
Ответ

function test() {
  return new Promise(function (resolve) {
    setTimeout (function () {
      resolve(1);
    })
  })
}

async function test1() {
  var res = await test();
  console.log(res + 1);
}

(19)Вот еще один примерчик на асинхронность. Объяснить в какой последовательности выведутся цифры и почему так.

console.log(1);
setTimeout(function() {
  console.log(2);
}, 0)
console.log(3);

Достаточно популярный, надо сказать. Вот мне он и достался в очередной раз. Уже отработано начала отвечать: «1, 3, 2. Так как хоть js и асинхронен, но внутри его есть очередь выполнения и setTimeout и setInterval, если им указан 0, помещают вызов функции в конец очереди.»
Тут надо сказать ребята зафейлились, заявив, что я ответила правильно, про 132, но не объяснила почему.

(20)Вообще вопросы на setTimeout и setInterval весьма актуальны.Меня спрашивали: «Какое минимальное время можно задать?»

Куда же без замыканий

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

for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100);
}

21. Что будет выведено в консоль, как можно модифицировать пример что бы он возвращал правильный результат(назовите как можно больше способов)?

for (var i = 0; i < 10; i++) {
  (function (i) {
    setTimeout(function () {
      console.log(i);
    }, 100);
  })(i)
}

Не все обращали внимание, что в i можно передать не только контекст

for (var i = 0; i < 10; i++) {
  setTimeout(function (i) {
    console.log(i);
  }.bind(this, i), 100);
}

Так же методам setInterval и setTimeout можно передать аргументы, которые будут прокинуты в качестве аргументов калбек-функции

for (var i = 0; i < 10; i++) {
  setTimeout(function (i) {
    console.log(i);
  }, 100, i);
}

es6

for (let i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100);
}

Давайте что-нибудь похардкорнее.

22. Надо написать функцию, которая вернет «hello world», но при этом в теле функции нельзя использовать ни цифры, ни буквы, а циклы, массивы, объекты можно, но без цифр.

var zero = [].length,
     one = [{}].length,
     two = [,,].length,
    seven = [,,,,,,,].length;

console.log(String.fromCharCode(Number(String(seven) + String(two))));

(23) От них же. Числа от 1 до 100 лежат в массиве, они хаотично перемешанные, от туда изъяли одно число, надо найти, что это за число. алгоритм не должен превышать O(n^2) сложности.

var sum = 101*50,
     sumArr = eval([4, 2, ... 3, 7].join('+').replace('++', '+')),
     res;
res = sum-sumArr;

eval([4, 2, ... 3, 7].join('+')

function Book(name, author) {
    this.name = name;
    this.author = author;
    return this;
}

function Foo(Book, 'Учебник javascript', 'Петр Сергеев')

function Book(name, author) {
    this.name = name;
    this.author = author;
    return this;
} 

function Foo(Cclass, name, author) {
  return Object.create(Cclass.prototype);
}

var book = Foo(Book, 'js', 'petr');

console.log(book.name); -> undefined

function Book(name, author) {
    this.name = name;
    this.author = author;
    return this;
}

function Foo(Cclass, name, author) {
    return Cclass.call({}, name, author);
}

var book = Foo(Book, 'js', 'petr');
console.log(book.name);

Задача про палиндром

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

function isPalindrom1(str) {
    if (str.toLowerCase().replace(/[^а-яА-ЯёЁ]/g, '') === str.toLowerCase().replace(/[^а-яА-ЯёЁ]/g, 
    '').split('').reverse().join('')) {
        return true;
     } else {
        return false;
     }
}

Красиво, просто, изящно.

Забавно, но где-то через год мне попался этот же вопрос. Я обрадовалась: «Свезло». Как оказалось, нет. Требовалось решить с помощью цикла, а регулярку можно было использовать только для одного символа. Собеседник мотивировал это тем, что replace с регуляркой по всей строке — слишком ресурсоемко.

Подумав дома, у меня получилось вот так:

function isPalindrom(str) {
    var str = str.toLowerCase(),
          lim = str.length - 1,
          i = 0,
          j = str.length - 1;

    while (i <= lim) {
        if (/[^а-яА-ЯёЁ]/.test(str[i])) {
            i += 1;
        }
        if (/[^а-яА-ЯёЁ]/.test(str[j])) {
            j -= 1;
        }
        if (str[i] != str[j]) {
            return false;
        }
        i += 1;
        j -= 1;
   }
   return true;
}
console.log(isPalindrom('А роза упала на лапу Азора'));

26. Как подключить js, css? Плюсы, минусы разных способов?

<script></script>
<style></style>

прямо на странице или

<script src="script.js"><script>
<link rel="stylesheet" href="/css/style.css">

27. Чем opacity отличается от visible: hidden и что это такое, отличие от overflow: hidden?

Модное слово — каррирование

28. Реализовать функцию f: f(2, 3) -> 5, при вызове f(2)(3), тоже вернет 5

function f(a, b) {
 	if (b !== undefined) {
 		return a + b;
 	} else {
 	return function (b) {
 		return a + b;
 		}
 	}
 }

Более сложный вариант.
f(1)(2)(3)() -> 6, f(0)(3)(1)(5)() -> 8

function f(arg) {
  var value = arg;

  return function (arg) {
    if (arg !== undefined) {
      return f(value + arg);
    } else {
    return value;
    }
  }
}

function foo(value) {
  var acc = value;
  function addNext(next) {
    acc += next;
    return addNext;
  }
  addNext.toString = addNext.valueOf = function() {
    return acc;
  }
  return addNext;
}

var url = 'http://mydomen.com/news.php',
    script = document.createElement('script'),
    callbackName = 'jsonCallback' + Math.randome();

  script.src = url + '?callback' + callbackName;
  window[callbackName] = function(response){
    console.log(response);
  }

  document.header.appendChild(script);

<script src='http://mydomen.com/news.php?callback0.90428777...'>

echo $_REQUEST[callback] + '(' + json_encode($arDate) + ')';

window.jsonCallback0.90428777 -> function (response) {
	console.log(response);
}

<script src="http://bla-bla/get?callback=f'></script>

<? echo $GET['callback'].'('.$date.')';

');alert(document.cookie);'

define([
  mod1,
  mod2,
  mod3
], function (Mod1, Mod2, Mod3) {
  new Mod1();
  ....
});

var mod = requaer('modul');

function one(arg){
  if (typeof arg === 'function') {
    return arg(1);
  } else {
    return 1;
  }
}

function seven(arg) {
  if (typeof arg === 'function') {
    return arg(7);
  } else {
    return 7;
  }
}

function plus(arg) {
  return function (a) {
    return a + arg;
  }
}

function one(arg) {
  return 1 + (arg || 0);
}

function two(arg) {
  return 2 + (arg || 0);
}

function five(arg) {
  return 5 + (arg || 0);
}

function seven(arg) {
  return 7 + (arg || 0);
}

function plus(arg) {
  return arg;
}

function minus(arg) {
  return -arg;
}

35. Сортировка пузырьком.

Да, да, ее еще спрашивают.
Ответ

var m = [1, 7, 5, 13, 8],
      count = m.length - 1,
      max;
for (var i = 0; i < count; i++) {
    for (var j = 0; j < count - i; j++) {
        if (m[j] > m[j + 1]) {
            max = m[j];
            m[j] = m[j + 1];
            m[j + 1] = max;
        }
    }
}

36. Обратная польская нотация.

Основной принцип. Дана строчка 23+1-, начинаем двигаться по ней, как только доходим до первого арифметического знака, берем две цифры перед ним и на их место, записываем результат вычисления. Получится 51-. Начинаем все с начала.
Кому интересно, вот статья wikipedia
Ответ

var notation = '23+1-', notation1 = '7 2 3 * -', notation2 = '1 2 + 4 * 3 +';
function getComputation(notation) {
    var queue = [], tmp, num1, num2;
    for (var i = 0; i < notation.length; i++) {
        if (/\d+/.test(notation[i]) === true) {
            queue.push(Number(notation[i]));
        }
        else {
            switch (notation[i]) {
                case '+':
                    tmp = queue.pop() + queue.pop();
                    queue.push(tmp);
                    break;
                case '-':
                    num1 = queue.pop();
                    num2 = queue.pop();
                    if (num1 > num2) {
                        tmp = num1 - num2;
                    }
                    else {
                        tmp = num2 - num1;
                    }
                    queue.push(tmp);
                    break;
                case '*':
                    tmp = queue.pop() * queue.pop();
                    queue.push(tmp);
                    break;
                case '/':
                    tmp = queue.pop() / queue.pop();
                    queue.push(tmp);
                    break;
            }
        }
    }
    return queue[0];
}
console.log(getComputation(notation));
console.log(getComputation(notation1));
console.log(getComputation(notation2));

37. Есть div, в нем другой div, у второго задан padding 50%, как это все будет выглядеть?

.wrap {
  width: 200px;
  border: 1px solid green;
}

.block {
  width: 200px;
  padding-bottom: 50%;
  border: 1px solid red;
}

Собеседник предложил мне посмотреть дома как оно сработает, хотя мне стало очень интересно.
Как вы считаете, правильно ли на собеседование отвечать самому на вопрос, если кандидат с ним не справился?

38. Есть строка, состоящая из разных скобок, проверить закрыты ли все.  Пример строки: «())({}}{()][][»

function validBraces(str) {

  var arrOpenSymbols = [],
    result = false,
    countOpenSymbols;
  if (str.length > 0) {
    for (var i = 0; i < str.length; i++) {
      if (str[i] === '{' || str[i] === '[' || str[i] === '(') {
        arrOpenSymbols.push(str[i]);
      } else {
        countOpenSymbols = arrOpenSymbols.length;
        if ((str[i] === '}' && arrOpenSymbols[(countOpenSymbols-1)] === '{') ||
          (str[i] === ']' && arrOpenSymbols[(countOpenSymbols-1)] === '[') ||
          (str[i] === ')' && arrOpenSymbols[(countOpenSymbols-1)] === '(')
          ) {
            arrOpenSymbols.pop();
        }
      }
    }

    if (arrOpenSymbols.length === 0) {
      result = true;
    } else {
      result = false;
    }
  }
  return result;
}
console.log('');
console.log(validBraces('()'));
console.log(validBraces('[)'));
console.log(validBraces('{}[]()'));
console.log(validBraces('([{}])'));
console.log(validBraces('())({}}{()][]['));

Если бы передавались строки из скобок ‘{‘, ‘[‘, ‘]’, ‘}’

function validBraces(str) {
  try {
   	eval(str);
   	return true;
   } catch (err) {
   	return false;
   }
}

39. Напишите код, который при клике на любой div внутри root будет выводить в консоль его id.

<div id="root" style="background: red;">
    root
    <span id="id1" style="background: lightblue;">id1</span>
    <div id="id2" style="background: green;">
        id2
        <div id="id3" style="background: yellow;">id3</div>
    </div>
</div>

Ответ

$('#root').on('click', function (event) {
    event.stopPropogation();
    console.log($(event.target).attr('id'));
})

40. Напишите код, который сделает из массива объект
// на входе массив

var arr = [
 {name: 'width', value: 10}, 
 {name: 'height', value: 20}
]

// на выходе объект

{width: 10, height: 20}

Ответ

function getObj(arr) {
    var obj = {};
    
    arr.forEach(function(item){
        obj[item.name] = item.value;
    });
    
    return obj;
}

41. Что выведется в результате?

var i = 10;
var array = [];

while (i--) {
    (function (i) {
        var i = i;
        array.push(function() {
            return i + i;
        });
    })(i);
}    

console.log([
    array[0](),
    array[1](),
])

Ответ

(function (i) {})(i);

function() { return i + i; }

function f() { console.log(this.x); }
var obj = {x: 'bar'};

f.call(obj, a, b);
f.apply(obj, [a, b]);

obj.funk = function f() { console.log(this.x); }
obj.funk();

function f() { console.log(this.x); }.bind(obj, a, b);
f();

function Book() {
    this.name = 'foo'
}

Book.prototype = {
    getName: function() {
        return this.name;
    }
};

var book = new Book();

Book.prototype.getUpperName = function() {
    return this.getName().toUpperCase();
}

book.getUpperName();

Ответ

<div class="block1">
  <div></div>
</div>
<div class="block2">
  <div></div>
</div>

.block1 {
  width: 150px;
  height: 20px;
  border: 1px solid red;
}
.block2 {
  display: none;
  width: 100px;
  height: 50px;
  border: 1px solid red;
}

function showBlock() {
  var block1 = document.getElementsByClassName('block1')[0],
      block2 = document.getElementsByClassName('block2')[0];
  if (!(block1.childNodes.length > 0 )) {
    block2.style.display = 'block';
  }
}
document.addEventListener("DOMContentLoaded", function () {
  showBlock();
});