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

Просмотр видео-собеседование

вебдев веб-дев.
hr-позвонит hr-позвонит
Подготовка к собеседованию по JavaScript в 2021.Подготовка к собеседованию по JavaScript в 2021..

Сайты тренажеры

js-тренажор
Набор задач.
Набор алгосов по js.

Решение задач/практика

codewars freecodecamp // ES6,
Regular Expressions/
Debugging/
Basic Data Structures/
Basic Algorithm Scripting/
Object Oriented Programming/ Functional Programming/
Intermediate Algorithm Scripting/
JavaScript Algorithms and Data Structures Projects

Книги

YDKJS - get started v2 на русском
YDKJS - scopes and closures
YDKJS - про приведение типов

Статьи

Ликбез из тачилы
Собес Дена Абрамова
Как работает JavaScript: массивы и хэш-таблицы
Front-end. Вопросы на собеседовании 300+ ВОПРОСОВ ПО JAVASCRIPT НА СОБЕСЕДОВАНИИ
70 ВОПРОСОВ ПО JAVASCRIPT НА СОБЕСЕДОВАНИИ
35 ВОПРОСОВ ПО JAVASCRIPT НА СОБЕСЕДОВАНИИ
Яндекс-фронтенд
33 Concepts Every JavaScript Developer Should Know.

1. Как парсит браузер , вторая статья как работает браузер
2. Вопросы по css
3. Прото и прототипы
4. Конструктор и this
5. SOLID
6. http
7. Хедеры
8. Кеш
9. Более подробно евентлуп-1
10. Еще евентлуп
11. DNS
12. Паттерны
13. Preload,Preconnect,Prefetch
14. Жизненный цикл
15. Reconsiciliatiom
16. Difference useEffect/useLaoutEffect

Алгосы

grind75 Качаем литкод

Собеседование

5 минут Приветствие, small talk, план собеседования

• Предупредить, что буду делать записи
• Могу прервать, если не будет хватать времени

10 минут Расскажите о себе ()

• о своем опыте
• об ожиданиях и желаемой роли,
• самая сложная задача или серьезный факап
• что изучили за последнее время

15 минут Live coding

15 минут Теория по JS, TS

15 минут Frameworks - React / State managers / CSS in JS / Webpack / Mfe

20 минут ООП, дизайн принципы и паттерны, Rest, GraphQL, способы интеграции, тестирование, troubleshooting, CI/CD, leadership

5 минут Церемонии в скрам, как проходит эстимация + ретроспектива от кандидата

5 минут Вопросы от кандидата

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

Аналог Promise.All

Написать функцию, которая принимает в себя массив промисов, последовательно их запускает и возвращает массив с их результатом.

Проверка на палиндром

A palindrome is a word, phrase, number, or other sequence of characters which reads the same backward as forward. Examples of numerical palindromes are:
2332
110011
54322345
For a given number num, write a function to test if it's a numerical palindrome or not and return a boolean (true if it is and false if not). Return "Not valid" if the input is not an integer or less than 0.

//Решение

function palindrome(num) {
    if (typeof num !== 'number' || num < 0) return 'Not valid'
    return String(num).split('').reverse().join('') === String(num)
}

Проверка на наличие дубликатов

Given an integer array nums, return true if any value appears at least twice in the array, and return false if every element is distinct.

//Решение

const containsDuplicate = (nums) => {
    return new Set(nums).size !== nums.length
};

// Напиши тип для этой функции

// Перегрузка для трех числовых аргументов
function add(a: number, b: number, c: number): number;
// Перегрузка для объекта, числа и строки
function add(a: object, b: number, c: string): { first: number, second: string };
// Перегрузка для строки и массива строк
function add(a: string, b: string[]): string[];


function add(a: any, b: any, c?: any): any {
    if (typeof a === 'number' && typeof b === 'number' && typeof c === 'number') {
        return a + b + c;
    }

    if (typeof a === 'object' && a !== null && typeof b === 'number' && typeof c === 'string') {
        return {
            first: b,
            second: c
        };
    }

    if (typeof a === 'string' && Array.isArray(b)) {
        return b.map(item => a + item);
    }

    return a;
}

const C = ({
  data,
  setState,
  state,
}: {
  data: any;
  setState: any;
  state: any;
}) => {
  useEffect(() => {
    console.log("mount", data);

    return () => {
      console.log("unmount", data);
    };
  }, []);
  console.log("data", data);
  return (
    <p>
      {data}
      <button onClick={() => setState(() => state.filter((e) => e !== data))}>
        DELETE
      </button>
    </p>
  );
};

export const Cards = () => {
  const [state, setState] = useState([1, 2, 3, 4, 5]);
  return (
    <div>
      {state.map((item) => (
        <C data={item} key={Math.random()} setState={setState} state={state} />
      ))}
    </div>
  );
};

React задачи

Среднее время.
Получение данных.
Найти баг.
yandex-code

JS + TS

Какие существуют типы данных в JS?

Типов данных в JS восемь: number, string, boolean, undefined, object, bigInt, symbol и null.

Как проверить, является ли объект массивом?

Для проверки, является ли объект массивом в JavaScript, можно использовать метод Array.isArray(). Этот метод возвращает значение true, если объект является массивом, и false в противном случае.

Пример использования:

const myArray = [1, 2, 3];

console.log(Array.isArray(myArray)); // true

const myObject = { a: 1, b: 2 };

console.log(Array.isArray(myObject)); // false

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

Что такое деструктуризация?

Деструктуризация - это способ извлечения значений из объектов или массивов и присваивания их переменным.

В JavaScript, деструктуризация может быть использована для более удобного доступа к данным внутри объектов или массивов, без необходимости обращаться к каждому элементу по отдельности.

Чем JS отличается при работе на front-end и back-end?

На front-end JavaScript выполняется в браузере и используется для создания интерактивных пользовательских интерфейсов. Он может взаимодействовать с DOM (Document Object Model) браузера, изменять содержимое страницы, обрабатывать события и отправлять запросы на сервер.

На back-end JavaScript может выполняться на сервере с использованием платформы Node.js. В этом случае JavaScript используется для создания серверных приложений и обработки запросов от клиентов. Он может выполнять такие задачи, как обработка данных, взаимодействие с базами данных, маршрутизация запросов и создание API.

Однако, хотя JavaScript используется и на front-end, и на back-end, существуют некоторые различия в окружении и доступных инструментах. На front-end JavaScript работает внутри браузера, имеет доступ к DOM и браузерным API. На back-end JavaScript работает вне браузера, имеет доступ к модулям Node.js и может использовать сторонние библиотеки и фреймворки для разработки серверных приложений.

Для чего предназначены методы setTimeout и setInterval, есть ли они в JS?

Сравните подходы работы с асинхронным кодом: callbacks vs promises vs async / await.

Назовите методы массивов, какие помните, и скажите, для чего они нужны.

Map и Set.

Глубокая (deep) и поверхностная (shallow) копия объекта.

Какая разница между декларацией функции (function declaration) и функциональным выражением (function expression)? Что такое анонимная функция?

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

IIFE (Immediately Invoked Function Expression).

Hoisting.

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

Рекурсия.

Разница между методами call и apply

Garbage Collector (сборщик мусора).

Promise.

Преимущества генераторов:

Чистая функция.

Event Loop (евент-петля)

RAF.

Прототип в JavaScript.

Generics.

Разница между any и unknown.

Type guard.

Type vs Interface.

Utility типы.

Partial - создает тип, который делает все свойства объекта необязательными. Readonly - создает тип, который делает все свойства объекта доступными только для чтения. Record<K, T> - создает тип, который определяет объект с ключами типа K и значениями типа T. Pick<T, K> - создает тип, который выбирает только определенные свойства из объекта T на основе типов K. Omit<T, K> - создает тип, который удаляет определенные свойства из объекта T на основе типов K.

React / State manager

• Ознакомлены ли вы с хуками? В чем их преимущества? Приходилось ли делать свои и с какой целью?
• Знакомы ли вы с фрагментами и порталами? Зачем они нужны?
• Когда и для чего используют рефы?
• В чем разница useRef и useState?
• Какие вы знаете методы жизненного цикла компонента?
• В каком методе жизненного цикла компонента лучше делать запросы на сервер? Почему?
• В каком методе жизненного цикла компонента лучше делать подписку и отписку от листенера? Почему? Зачем отписываться?
• Был ли опыт работы с контекстом? Когда его стоит использовать
• В чем особенность PureComponent?
• В чем видите преимущества библиотеки React?
• Что такое Virtual DOM и Shadow DOM?
• Зачем в списках ключи? Можно ли делать ключами индексы элементов массива? Когда это оправдано?
• Приходилось ли вам настраивать проект React с нуля? С помощью каких инструментов вы это делали?
• Что самое сложное вам приходилось реализовывать с помощью React?

Common

• Как обрабатываются ошибки? В каком случае можно перезаписать return в функции?
• Какие методики отпимизации приложения и метрики вы знаете?
• Что вы знаете про доступность?
• Как клиент взаимодействует с сервером? - socket/rest/graphql/sse/long poling
• Что значит HTTP?
• Какие методы HTTP-запросов вы знаете?
• Какая разница HTTP vs HTTPS?
• Какие знаете коды ответа (состояния) HTTP?
• Что такое CORS?
• Что такое cookie?
• Что такое REST?
• Объяснить понятие мутабельность/иммутабельность? Какие типы являются мутабельными и наоборот?
• Как искать ошибки в коде? Используете ли вы дебаггер?
• Назовите способы хранения данных в браузере.
• Какие паттерны знаете и используете в работе?
• Что такое ci/cd
• Для чего нужен package-lock.json?
• Можете ли вы описать суть методологии git flow/Trunk Based в двух словах?
• SOLID
• WebWorkers
• ServiceWorkers
• SSR/SSG/CSR/SPA/PWA
• Что такое микросервисы?
• Что знаете про тестирование? Какие типы тестов есть? Что такое пирамида тестирования? Как и что тестируете?
  Подходы: {

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

  • BDD — behaviour-driven development — это разработка, основанная на описании поведения. Определенный человек(или люди) пишет описания вида "я как пользователь хочу когда нажали кнопку пуск тогда показывалось меню как на картинке" (там есть специально выделенные ключевые слова). Программисты давно написали специальные тулы, которые подобные описания переводят в тесты (иногда совсем прозрачно для программиста). А дальше классическая разработка с тестами.

  • DDD - это набор принципов и схем, направленных на создание оптимальных систем объектов. Процесс разработки сводится к созданию программных абстракций, которые называются моделями предметных областей. В эти модели входит бизнес-логика, устанавливающая связь между реальными условиями области применения продукта и кодом. }

• С чего начинается создание фичи/компонента/проекта
• Как выбирать библиотеки?