Собеседование по Javascript, мой опыт. Часть вторая

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

(Виктор Цой)

Введение

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

"- Ну как на собеседование сходил? Успешно? - Да. Ручку у них спер" (ссылка)

Часть вопросов будет по typescript, часть по javascript, что-то будет из html, Node.js, настройки, библиотеки, концепции. В общем всё то, о чем говорят на собеседованиях.

Вопросы

Вопрос 1 (typescript):

Дан массив: 

 let a = [{a:1},{b:2},{c:3,d:4}];

Как создать объект конкатенацию всех элементов в массиве?

Ответ:

let c = {};
Object.assign(c,...a);
console.log(c);

Вопрос 2 (typescript):

interface IEvent {}
interface ISimpleEvent extends IEvent {} 
interface IComplexEvent extends IEvent {} 
class T implements ISimpleEvent {} 
class D implements IComplexEvent {}

function processEvent(event: IEvent) { 
  if(event instanceof IComplexEvent) { 
    // do something complex } 
  else { 
      // do something simple 
  } 
}

Как сделать так, чтобы этот код заработал?

Ответ:

interface IEvent {}
interface ISimpleEvent extends IEvent {}
interface IComplexEvent extends IEvent {}
class T implements ISimpleEvent {}
class D implements IComplexEvent {}

function isComplexEvent(event: IEvent): event is IComplexEvent {
  return event instanceof D;
}

function processEvent(event: IEvent) {
  if(isComplexEvent(event)) {
    console.log("IComplexEvent");
  } else {
    console.log("ISimpleEvent");
  }
}

let e: D = new D();
processEvent(e);

Вопрос 3 (typescript):

interface A {
  prop1: {
    a: number;
    b: string;
  }
}

function someFunc(k: typeOf A.prop1): void {}

Как заставить этот код работать?

Ответ:

interface A {
  prop1: {
    a: number;
    b: string;
  }
}
type sw = A["prop1"];
function someFunc(a: sw) {
  console.log(a.b)
}

let q = {
  prop1: {
    a: 5,
    b: "dddd"
  }
}

someFunc(q.prop1);

Вопрос 4 (javascript):

Напишите функцию, которая вернет:

console.log(counter()); // output: 0
console.log(counter()); // output: 1
console.log(counter()); // output: 2

Ответ:

function getCounter() {
  var count = 0;
  return function() {
    return count++;
  }
}

let counter = getCounter();

console.log(counter()); // output: 0
console.log(counter()); // output: 1
console.log(counter()); // output: 2

Вопрос 5 (javascript):

Что возвращает функция match?

Ответ:

Объект Array, содержащий результаты сопоставления, или null, если ничего не было сопоставлено.

Вопрос 6:

Emit, on, once в Node.js

Ответ:

Это функции из модуля events, который позволяют работать с событиями. То есть мы вызываем некоторое событие и все подписанные на него слушатели реагируют на него соответствующим образом.

• emit – вызывает событие.

• on - Добавить listener в конце массива listeners для определенных событий. Этот метод не проверяет был ли listener добавлен когда-либо, или нет.

• once - Добавить listener в массив listeners определенного массива. Но этот listener вызывается только 1 раз при происхождении события. Потом он удаляется из массива.

Вопрос 7 (javascript):

  Как будет работать этот код?

console.log('Hi');
var to = setTimeout(function() {
  console.log('callback');
}, 0);
//clearTimeout(to);
console.log('Bye');

Ответ:

Hi
Bye
callback

Если же раскомментировать //clearTimeout(to), то

Hi
Bye

Функция внутри setTimeout будет вызвана в момент, когда стек вызовов будет пуст, т.е. сразу после последнего действия в данном коде. setTimeout задерживает выполнение функции на указанное в параметре время плюс то время которое понадобиться на то чтобы выполнить все функции в стеке плюс функции в Callback Queue, которые там уже были на момент вызова SetTimeout().

Вопрос 8 (html):

box-sizing: border-box 

Ответ:

значения width и height включают в себя размеры padding и border, но не включают margin.

Вопрос 9:

Сlean architecture

Ответ:

Модная ныне концепция разработки Web приложений. Советую почитать книгу Clean Architecture: A Craftsman's Guide to Software Structure and Design (Robert C. Martin Series). По большей части этим вопросом проверяют действительно ли вы участвовали в разработке крупных проектов на Сlean architecture или нет. В целом если в вашем проекте есть папки:

1. entities

2. use_cases

3. interfaces_adapters

4. external_interfaces

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

Вопрос 10:

Circuit breaker

Ответ:

Circuit breaker - это шаблон проектирования, который используют для работы со сбоями в системе. Он работает как прокси-сервис между приложением и удаленным сервисом. Если удаленный сервис начинает возвращать ошибку, то он либо перестеает отправлять на него запросы с нашего приложения, либо отправляет только часть из них. Позволяя сервису восстановиться. После восстановления сервися запросы от нашего приложения снова поступают на удаленный сервис (ссылка). У него есть 3 сосотояния:

• Open

• Closed

• Half-Open

Тут можно почитать о нем более подробно, с картинками.

Вопрос 11:

Webpack

Ответ:

Webpack - это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл "index.html" (ссылка). Так же советую посмотреть Скринкаст по Webpack.

Вопрос 12:

Babel

Ответ:

Утилита, которая преобразует код написанный на ECMAScript 2015+ в обратно совместимую версию JavaScript, которая может выполняться старыми движками JavaScript (ссылка).

Вопрос 13:

SvelteJS

Ответ:

Новый перспективный компилятор с открытм кодом для разработки front end приложений. Он гораздо проще чем Angular, React и VueJS. Почитать про него можно тут или тут. Не знаю зачем у меня о нем спросили, возможно, проверяли мой кругозор. Я не писал на SvelteJS, но пишу на Angular, React и VueJS. После этих 3-х монстров хочется попробовать что-то более простое, но пока что на них довольно высокий спрос и приходиться работать с ними.

Вопрос 14:

npm ci

Ответ:

ci - это Continuous Integration. Аналог npm install, но в отличие от него берет зависимости из package-lock.json. Работает гораздо быстрее, но так как использует lock файл, то использовать его имеет смысл в ci/cd скриптах. Алгоритм такой - npm install создает файл package-lock.json, далее мы добавляем его в git и в ci/cd скрипте git вызываем npm ci. Подробнее можно прочитать тут, тут или тут

Вопрос 15:

Cтрелочные функции и их отличие от обычных функций

Ответ:

Стрелочные функции - это функции типа:

let func = (arg1, arg2, ...argN) => expression

или

let func = function(arg1, arg2, ...argN) {
  return expression;
};

Отличия от обычных функций:

1. Не создает собственный контекст исполнения, всегда использует внешний. Значение this является значением окружающего контекста.

2. Оператор new не работает со стрелочной функцией

3. Неявный return для варианта: let func = (arg1, arg2, ...argN) => expression

4. Ключевое слово yield не может быть использовано в теле стрелочной функции

5. Не имеет собственного объекта arguments

Вопрос 16:

Continuous Integration

Ответ:

Непрерывная интеграция (Continuous Integration) — практика разработки программного обеспечения, которая заключается в постоянном слиянии рабочих копий в общую основную ветвь разработки и выполнении частых автоматизированных сборок проекта для скорейшего выявления потенциальных дефектов и решения интеграционных проблем (ссылка)

Заключение

Не факт, что у вас спросят то же самое, но в целом общее представление о том, что спрашивают и как отвечать я описал. Признаюсь, были и совсем неожиданные ситуации. Как-то раз я пришел на собеседование на frontend developer и отвечал исключительно на вопросы по SQL. В другом случае мы общались исключительно по Java. Так же был случай, когда я должен был на собеседовании настроить фреймворк для написания unit тестов. В общем, собеседование - это так весело, иногда руки потом пол дня дрожат. Особенно когда готовишься к одной теме, а спрашивать начинают совсем другую.

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