Представляем вам список из 100 вопросов, которые могут встретиться на собеседовании для позиции Middle JavaScript Developer. Я также добавлю подробное объяснение к каждому вопросу, чтобы вы могли лучше подготовиться к собеседованию.

А здесь мы собрали огромную подборку вопросов с собеседований по: Frontend, Javascript, React, Vue.

1. Что такое замыкание (closure) в JavaScript? Приведи пример использования.

Ответ: Замыкание — это функция, которая сохраняет доступ к переменным своей внешней функции даже после того, как внешняя функция завершила выполнение. Пример:javascriptКопировать кодfunction outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 1 counter(); // 2
Пояснение: В данном примере внутренняя функция inner сохраняет ссылку на переменную count из внешней функции outer, несмотря на то, что outer уже завершила выполнение.

2. Чем отличается `var`, `let` и `const` в JavaScript?

Ответ:
- var: Объявляет переменную с функциональной областью видимости, которая подвержена всплытию (hoisting).
- let: Объявляет переменную с блочной областью видимости, не подвержен всплытию.
- const: Также объявляет переменную с блочной областью видимости, но ее значение нельзя изменить после присваивания.
Пояснение: Важнейшее отличие между ними — область видимости и возможность повторного присваивания.

3. Что такое «this» в JavaScript? Как он работает?

Ответ: this — это ключевое слово, которое ссылается на объект, из которого вызывается функция. Поведение this зависит от контекста вызова:
- В методах объекта — это сам объект.
- В обычных функциях — глобальный объект (window в браузере или global в Node.js), если не использован строгий режим ('use strict').
- В стрелочных функциях this лексически привязывается к значению, в котором функция была определена.
Пояснение: Строгий режим ('use strict') может изменить поведение this, сделав его undefined в некоторых случаях.

4. Что такое “hoisting” в JavaScript?

Ответ: Hoisting (подъем) — это механизм в JavaScript, при котором объявления переменных (с использованием var) и функций поднимаются в начало их области видимости.
Пояснение: Например:javascriptКопировать кодconsole.log(a); // undefined var a = 5; Переменная a поднимается, но инициализация происходит в месте её объявления.

5. Что такое асинхронность в JavaScript? Как работают `setTimeout` и `setInterval`?

Ответ: Асинхронность в JavaScript позволяет выполнять операции (например, HTTP-запросы или таймеры) без блокировки основного потока выполнения. setTimeout запускает функцию через заданное время, а setInterval вызывает функцию с заданным интервалом.
Пояснение:
- setTimeout: Ожидает заданное количество миллисекунд, а затем выполняет переданную функцию.
- setInterval: Выполняет переданную функцию через интервал времени, пока не будет отменен.

6. Что такое промисы (Promises) в JavaScript и как они работают?

Ответ: Промис — это объект, который представляет собой результат асинхронной операции, которая может завершиться успешно или с ошибкой.
Пояснение:javascriptКопировать кодconst promise = new Promise((resolve, reject) => { let success = true; if (success) { resolve('Success!'); } else { reject('Error'); } }); promise.then(result => console.log(result)).catch(error => console.error(error));

7. Что такое async/await? Чем это отличается от работы с промисами?

Ответ: async/await — это синтаксический сахар для работы с промисами. async делает функцию асинхронной, а await заставляет её ждать выполнения промиса.
Пояснение: Это упрощает код и делает его более читаемым:javascriptКопировать кодasync function fetchData() { let data = await fetch('url'); let result = await data.json(); console.log(result); }

8. Что такое event loop и как работает очередь событий в JavaScript?

Ответ: Event Loop — это механизм, который позволяет JavaScript выполнять асинхронные операции без блокировки потока. Он состоит из двух очередей: очереди задач (Task Queue) и очереди микрозадач (Microtask Queue).
Пояснение: Микрозадачи (например, обработчики промисов) выполняются перед задачами из основной очереди.

9. Объясни разницу между `null` и `undefined`.

Ответ:
- null — это значение, которое явно указывает на отсутствие значения или объекта.
- undefined — это значение, которое присваивается переменной, которая была объявлена, но не инициализирована.
Пояснение:javascriptКопировать кодlet a; console.log(a); // undefined let b = null; console.log(b); // null

10. Что такое прототипы в JavaScript?

Ответ: Каждый объект в JavaScript имеет скрытое свойство __proto__, которое указывает на его прототип. Прототипы используются для реализации наследования.
Пояснение: Пример:javascriptКопировать кодfunction Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log(`Hello, ${this.name}`); }; const john = new Person('John'); john.sayHello(); // "Hello, John"

11. Что такое `map`, `filter`, `reduce` и в чем их отличие?

Ответ:
- map — создает новый массив, применяя функцию ко всем элементам исходного массива.
- filter — создает новый массив, включающий только те элементы, которые проходят тест.
- reduce — преобразует массив в одно значение (например, сумма элементов).
Пояснение:javascriptКопировать кодlet arr = [1, 2, 3, 4]; let mapped = arr.map(x => x * 2); // [2, 4, 6, 8] let filtered = arr.filter(x => x > 2); // [3, 4] let sum = arr.reduce((acc, x) => acc + x, 0); // 10

12. Что такое деструктуризация в JavaScript?

Ответ: Деструктуризация позволяет извлекать значения из массивов или объектов и присваивать их переменным.
Пояснение:javascriptКопировать кодconst person = { name: 'John', age: 30 }; const { name, age } = person; console.log(name); // John console.log(age); // 30

13. Что такое REST и Spread операторы?

Ответ:
- REST — используется для сбора оставшихся элементов в массив или объект (например, в функциях или при деструктуризации).
- Spread — используется для распространения элементов массива или объекта.
Пояснение:javascriptКопировать кодconst arr = [1, 2, 3]; const newArr = [...arr, 4]; // [1, 2, 3, 4] function sum(...numbers) { return numbers.reduce((acc, num) => acc + num, 0); } console.log(sum(1, 2, 3)); // 6

14. Как работает оператор `typeof`?

Ответ: Оператор typeof используется для проверки типа значения.
Пояснение:javascriptКопировать кодconsole.log(typeof 42); // 'number' console.log(typeof 'hello'); // 'string' console.log(typeof undefined); // 'undefined'

15. Что такое `call`, `apply` и `bind`?

Ответ: Эти методы позволяют изменять контекст this в функциях.
- call и apply вызывают функцию немедленно, но с разными способами передачи аргументов.
- bind возвращает новую функцию с привязанным контекстом.

16. Что такое promise chaining?

Ответ: Promise chaining — это последовательное выполнение нескольких асинхронных операций с использованием метода then.
Пояснение:javascriptКопировать кодfetch('url') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));

17. Что такое модульная система в JavaScript?

Ответ: Модульная система позволяет разделить код на отдельные файлы (модули) для улучшения структуры и повторного использования.
Пояснение: В ECMAScript 6 появились нативные модули, которые используют import и export.javascriptКопировать код// person.js export const person = { name: 'John' }; // app.js import { person } from './person'; console.log(person.name); // John

18. Что такое `Symbol` в JavaScript?

Ответ: Symbol — это примитивный тип данных, который представляет уникальные и неизменяемые идентификаторы.
Пояснение:javascriptКопировать кодconst sym1 = Symbol('description'); const sym2 = Symbol('description'); console.log(sym1 === sym2); // false

19. Что такое мемоизация?

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

20. Что такое “event delegation”?

Ответ: Делегация событий — это техника, при которой событие обрабатывается на родительском элементе, а не на каждом дочернем. Это позволяет оптимизировать обработку событий.
Пояснение:javascriptКопировать кодdocument.getElementById('parent').addEventListener('click', function(event) { if (event.target && event.target.matches('button')) { console.log('Button clicked'); } });

21. Как работают дебаунсинг и троттлинг?

Ответ: Это техники для управления количеством вызовов функции в определенный промежуток времени.
- Дебаунсинг задерживает выполнение функции до тех пор, пока не прекратится серия вызовов.
- Троттлинг ограничивает количество вызовов функции в заданный промежуток времени.

22. Что такое прокси (Proxy) в JavaScript?

Ответ: Прокси — это объект, который оборачивает другой объект и позволяет перехватывать и изменять операции с ним (например, геттеры, сеттеры).
Пояснение:javascriptКопировать кодconst person = { name: 'John' }; const proxy = new Proxy(person, { get(target, prop) { return prop in target ? target[prop] : 'Not found'; } }); console.log(proxy.name); // John console.log(proxy.age); // Not found

23. Объясни, как работают стрелочные функции.

Ответ: Стрелочные функции — это функции с более кратким синтаксисом и лексическим связыванием this.
Пояснение: Стрелочная функция не имеет своего контекста this, и использует значение из родительского контекста.javascriptКопировать кодconst obj = { name: 'Alice', greet: () => { console.log(this.name); // undefined } }; obj.greet();

24. Какие способы клонирования объектов существуют в JavaScript?

Ответ: Клонирование объектов можно сделать несколькими способами:
- Использование Object.assign()
- Использование оператора spread (...)
- Использование JSON.parse() и JSON.stringify() (для глубокого клонирования, но с ограничениями).

25.
Что такое гибридные приложения?

Это приложения, которые сочетают в себе элементы как веб-приложений, так и нативных мобильных приложений. Они разрабатываются с использованием веб-технологий (HTML, CSS, JavaScript) и затем оборачиваются в нативные контейнеры, что позволяет запускать их на различных мобильных платформах (iOS, Android и др.).

🚩Основные характеристики

🟠Кроссплатформенность

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

🟠Использование веб-технологий

Гибридные приложения разрабатываются с использованием стандартных веб-технологий (HTML, CSS, JavaScript), что упрощает процесс разработки для веб-разработчиков.

🟠Нативные контейнеры

Эти приложения оборачиваются в нативные контейнеры (например, с помощью Apache Cordova или Capacitor), что позволяет им использовать функции и API нативных платформ.

🚩Примеры технологий и фреймворков

🟠Apache Cordova (ранее PhoneGap)

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

🟠Ionic

Популярный фреймворк для разработки гибридных мобильных приложений. Основан на Angular и Cordova, но также поддерживает другие фреймворки, такие как React и Vue.

🟠Capacitor

Современная альтернатива Cordova, разработанная командой Ionic. Предоставляет более мощные и гибкие возможности для интеграции с нативными функциями.

🟠React Native

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

🚩Пример создания

1⃣Установка Ionic CLI

npm install -g @ionic/cli

2⃣Создание нового проекта

ionic start myApp tabs –type=angular

3⃣Запуск приложения в браузере

cd myApp

ionic serve

4⃣Сборка и запуск на мобильном устройстве

ionic capacitor add android

ionic capacitor run android

🚩Плюсы

➕Снижение затрат на разработку

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

➕Кроссплатформенность

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

➕Использование существующих навыков

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

🚩Минусы

➖Производительность

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

➖Ограниченный доступ к нативным функциям

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

➖Пользовательский интерфейс

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

Для старшего разработчика JavaScript (Senior JavaScript Developer) вопросы на собеседованиях становятся более глубокими и требующими опыта в решении сложных задач, а также владения современными инструментами и практиками разработки. В этой статье мы продолжим тему и представим ещё 25 вопросов, которые могут быть заданы на собеседовании для этой роли, с развернутыми ответами и объяснениями.

26. Что такое Event Loop в JavaScript?

Ответ:
Event Loop — это механизм, который позволяет JavaScript выполнять асинхронные операции, такие как обработка событий, таймеры, и запросы. JavaScript работает в однопоточном режиме, но Event Loop позволяет обрабатывать операции без блокировки основного потока.

Пример работы:

Когда код выполняется синхронно, он выполняется в основном потоке.
Асинхронные операции (например, сетевые запросы, таймеры) помещаются в очередь “macro” или “micro” задач.
Event Loop проверяет, есть ли задачи в очереди, и поочередно выполняет их.

27. Что такое замыкания (closures)?

Ответ:
Замыкание — это функция, которая “запоминает” свою лексическую среду, даже когда она выполняется за пределами этой среды. Замыкания позволяют функции доступ к переменным, которые были объявлены в её внешнем контексте.

Пример:

javascriptКопировать кодfunction outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}

const increment = outer();
increment(); // 1
increment(); // 2

Здесь функция inner сохраняет ссылку на переменную count из функции outer, создавая замыкание.

28. Что такое промисы (Promises) и как они работают?

Ответ:
Промис (Promise) — это объект, представляющий результат асинхронной операции. Промис может быть в одном из трёх состояний:

Pending (ожидает): операция ещё не завершена.
Resolved (выполнено): операция успешно завершена.
Rejected (отклонено): операция завершилась с ошибкой.

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

javascriptКопировать кодconst promise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve("Success!");
  } else {
    reject("Error!");
  }
});

promise
  .then(result => console.log(result))
  .catch(error => console.log(error));

29. Чем отличается `==` от `===` в JavaScript?

Ответ:

== — это оператор сравнения с приведением типов (loose equality). Он пытается преобразовать операнды к одинаковому типу перед сравнением.
=== — это строгий оператор сравнения (strict equality), который сравнивает значения и типы без преобразования типов.

Пример:

javascriptКопировать кодconsole.log(1 == '1');   // true
console.log(1 === '1');  // false

30. Что такое “hoisting” в JavaScript?

Ответ:
Hoisting — это механизм в JavaScript, при котором объявления переменных и функций поднимаются вверх своей области видимости. Важно заметить, что только объявления поднимаются, но инициализация (присваивание значений) остаётся на своём месте.

Пример:

javascriptКопировать кодconsole.log(a); // undefined
var a = 10;

31. Что такое “this” в JavaScript?

Ответ:
this — это ключевое слово в JavaScript, которое ссылается на контекст, в котором была вызвана функция. Значение this зависит от того, как была вызвана функция.

Пример:

javascriptКопировать кодconst person = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};

person.greet(); // Alice

Внутри метода greet this ссылается на объект person.

32. Что такое стрелочные функции в JavaScript и как они отличаются от обычных функций?

Ответ:
Стрелочные функции (arrow functions) — это короткий синтаксис для объявления функций. Важно, что стрелочные функции не имеют своего this и наследуют его от окружающего контекста, что полезно для работы с обработчиками событий и внутри методов объектов.

Пример:

javascriptКопировать кодconst add = (a, b) => a + b;

В отличие от обычных функций, стрелочные функции не имеют своего контекста this:

javascriptКопировать кодconst obj = {
  value: 10,
  getValue: function() {
    setTimeout(() => {
      console.log(this.value);  // 10, стрелочная функция использует `this` из `getValue`
    }, 1000);
  }
};
obj.getValue();

33. Что такое “debouncing” и “throttling”?

Ответ:

Debouncing — это техника, при которой выполнение функции откладывается до тех пор, пока не прекратятся её вызовы на протяжении заданного времени. Это полезно для обработки событий, таких как изменение размера окна или ввод текста в поле поиска.

javascriptКопировать кодfunction debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func(...args), delay);
  };
}

Throttling — это техника, при которой функция выполняется не чаще, чем один раз за определённый интервал времени. Это полезно для ограничивания частоты выполнения событий, таких как прокрутка страницы.

javascriptКопировать кодfunction throttle(func, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastTime >= delay) {
      func(...args);
      lastTime = now;
    }
  };
}

34. Что такое “prototype” в JavaScript?

Ответ:
Прототип — это объект, на основе которого другие объекты могут наследовать свойства и методы. Каждый объект в JavaScript имеет свойство prototype, которое указывает на его родительский объект.

Пример:

javascriptКопировать кодfunction Animal(name) {
  this.name = name;
}

Animal.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const dog = new Animal('Rex');
dog.sayHello();  // Hello, my name is Rex

35. Что такое “async/await” и как их использовать?

Ответ:
async/await — это синтаксический сахар для работы с асинхронным кодом, который делает его более читаемым и похожим на синхронный код.

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

Пример:

javascriptКопировать кодasync function fetchData() {
  const response = await fetch('https://api.example.com');
  const data = await response.json();
  return data;
}

36. Как работает механизм обработки ошибок с использованием `try/catch`?

Ответ:
try/catch — это конструкция для обработки ошибок в JavaScript. Внутри блока try выполняется код, а если возникает ошибка, управление передается в блок catch.

Пример:

javascriptКопировать кодtry {
  const result = someFunction();
} catch (error) {
  console.error('Error:', error);
}

37. Что такое “IIFE” (Immediately Invoked Function Expression)?

Ответ:
IIFE — это функция, которая немедленно выполняется после её объявления. Она часто используется для создания замкнутого контекста и предотвращения загрязнения глобального пространства имен.

Пример:

javascriptКопировать код(function() {
  console.log('This function runs immediately');
})();

38. Как работает механизм событий в JavaScript (Event Bubbling и Capturing)?

Ответ:

Event Bubbling (всплытие события) — это процесс, при котором событие сначала обрабатывается на самом вложенном элементе, а затем по цепочке всплывает вверх к родительским элементам.
Event Capturing (поглощение события) — это процесс, при котором событие сначала обрабатывается на самом верхнем элементе, а затем по цепочке передается вниз к дочерним элементам.

Пример:

htmlКопировать код<div id="parent">
  <button id="child">Click me</button>
</div>

javascriptКопировать кодdocument.getElementById('parent').addEventListener('click', function() {
  console.log('Parent clicked');
}, true); // capturing

document.getElementById('child').addEventListener('click', function() {
  console.log('Child clicked');
}); // bubbling

39. Что такое “modules” в JavaScript?

Ответ:
Модули в JavaScript — это способ организации и изоляции кода. Модули позволяют импортировать и экспортировать функции, объекты и данные между различными файлами, обеспечивая лучшую структуру и повторное использование кода.

Пример:

javascriptКопировать код// module.js
export const greet = (name) => `Hello, ${name}`;

// main.js
import { greet } from './module.js';
console.log(greet('Alice'));

40. Что такое “memoization” и когда её стоит использовать?

Ответ:
Memoization — это техника оптимизации, при которой результаты дорогостоящих вычислений кэшируются для повторного использования. Это полезно в ситуациях, когда функция часто вызывается с одинаковыми аргументами.

Пример:

javascriptКопировать кодfunction memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (!cache[key]) {
      cache[key] = fn(...args);
    }
    return cache[key];
  };
}

Дополнительные Вопросы с Ответами для Senior JavaScript Разработчика

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

41. Что такое “defer” и “async” в тегах `<script>`?

Ответ:
Атрибуты defer и async используются в тегах <script> для управления загрузкой и выполнением JavaScript на веб-странице.

defer: Скрипт с атрибутом defer загружается асинхронно, но выполняется только после того, как весь HTML документ будет полностью загружен (после события DOMContentLoaded). Скрипты с defer выполняются в порядке их появления на странице.

htmlКопировать код<script src="script.js" defer></script>

async: Скрипт с атрибутом async загружается асинхронно и выполняется сразу после того, как он будет загружен, без ожидания загрузки других скриптов или HTML. Порядок выполнения может быть произвольным, так как скрипты могут загружаться параллельно.

htmlКопировать код<script src="script.js" async></script>

42. Что такое мемоизация и когда её стоит использовать?

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

Пример реализации мемоизации:

javascriptКопировать кодfunction memoize(fn) {
  const cache = {};
  return function (...args) {
    const key = args.join(',');
    if (!cache[key]) {
      cache[key] = fn(...args);
    }
    return cache[key];
  };
}

const slowFunction = (a, b) => a + b;  // пример функции
const fastFunction = memoize(slowFunction);

console.log(fastFunction(1, 2)); // 3
console.log(fastFunction(1, 2)); // 3 (из кэша)

43. Объясните, что такое прототипное наследование в JavaScript?

Ответ:
В JavaScript все объекты имеют скрытое свойство [[Prototype]] (прототип), которое указывает на другой объект. Когда вы пытаетесь получить доступ к свойству объекта, и оно не существует, JavaScript будет искать это свойство в его прототипе. Этот процесс называется прототипным наследованием.

Пример:

javascriptКопировать кодconst animal = {
  speak: function() {
    console.log("Animal speaks");
  }
};

const dog = Object.create(animal);
dog.speak(); // Animal speaks

В этом примере объект dog наследует метод speak от объекта animal.

44. Что такое “this” в стрелочных функциях?

Ответ:
В стрелочных функциях this не привязывается к самому объекту, а наследуется от окружающего контекста, в отличие от обычных функций, где this привязывается к объекту, который вызывает функцию.

Пример:

javascriptКопировать кодconst obj = {
  value: 42,
  regularFunction: function() {
    console.log(this.value);  // 42, так как `this` указывает на `obj`
  },
  arrowFunction: () => {
    console.log(this.value);  // undefined, так как `this` наследуется от окружающего контекста (глобального объекта)
  }
};

obj.regularFunction();
obj.arrowFunction();

45. Как работает система модулей в JavaScript?

Ответ:
Система модулей позволяет разделять код на независимые блоки. В JavaScript существуют два основных типа модулей:

CommonJS: Используется в Node.js, позволяет экспортировать и импортировать данные с помощью module.exports и require.
ES6 Modules: Стандартный способ работы с модулями в браузере и Node.js. Используются ключевые слова export и import.

Пример:

javascriptКопировать код// ES6 Modules
export const myFunction = () => { console.log("Hello!"); };

// import
import { myFunction } from './module.js';
myFunction();

46. Что такое Shadow DOM?

Ответ:
Shadow DOM — это механизм инкапсуляции, который позволяет скрыть часть DOM от основного дерева. Это полезно для создания компонентов с независимым стилем и поведением, предотвращая влияние на другие части страницы.

Пример:

htmlКопировать код<my-element></my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.innerHTML = `<p>Hello from Shadow DOM</p>`;
    }
  }

  customElements.define('my-element', MyElement);
</script>

47. Объясните разницу между `bind()`, `call()` и `apply()` в JavaScript.

Ответ:

bind(): Создаёт новую функцию с привязанным значением this и аргументами, которые могут быть добавлены позже.

javascriptКопировать кодconst obj = { name: 'Alice' };
const greet = function() {
  console.log(`Hello, ${this.name}`);
};

const boundGreet = greet.bind(obj);
boundGreet(); // Hello, Alice

call(): Немедленно вызывает функцию с указанным значением this и переданными аргументами.

javascriptКопировать кодgreet.call(obj); // Hello, Alice

apply(): Как и call(), вызывает функцию с указанным значением this, но передает аргументы в виде массива.

javascriptКопировать кодgreet.apply(obj); // Hello, Alice

48. Что такое “currying” в JavaScript?

Ответ:
Currying — это процесс преобразования функции, которая принимает несколько аргументов, в серию функций, каждая из которых принимает один аргумент. Это позволяет создавать более универсальные и частично применяемые функции.

Пример:

javascriptКопировать кодconst add = a => b => a + b;

const add5 = add(5);
console.log(add5(3));  // 8

49. Что такое “event delegation” и зачем она используется?

Ответ:
Event delegation — это техника обработки событий, при которой вместо привязки обработчиков ко всем дочерним элементам, обработчик привязывается к родительскому элементу. Это позволяет эффективно обрабатывать события на динамически добавляемых элементах.

Пример:

javascriptКопировать кодdocument.getElementById('parent').addEventListener('click', function(e) {
  if (e.target && e.target.matches('button.classname')) {
    console.log('Button clicked!');
  }
});

50. Что такое “polyfill” и зачем он нужен?

Ответ:
Polyfill — это код, который добавляет поддержку новых возможностей в старые браузеры. Это позволяет использовать новые функции JavaScript, такие как Promise, fetch, Object.assign, в браузерах, которые их не поддерживают.

Пример polyfill для Array.prototype.includes:

javascriptКопировать кодif (!Array.prototype.includes) {
  Array.prototype.includes = function(element) {
    return this.indexOf(element) !== -1;
  };
}

51. Что такое “webpack” и как он работает?

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

Основные понятия:

entry: точка входа в приложение.
output: куда будет собран конечный бандл.
loaders: обработчики для файлов (например, для компиляции SCSS в CSS).
plugins: дополнения для расширения функционала (например, для минимизации кода).

Пример базовой конфигурации:

javascriptКопировать кодmodule.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

52. Что такое “service workers” в JavaScript?

Ответ:
Service Workers — это скрипты, которые работают в фоновом режиме и могут использоваться для реализации функционала, такого как кэширование данных для работы в оффлайн-режиме, push-уведомления и фоновые синхронизации.

Пример регистрации service worker:

javascriptКопировать кодif ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(function(registration) { console.log('Service Worker зарегистрирован:', registration); }) .catch(function(error) { console.log

20 Вопросов с Ответами для Собеседования Angular Разработчика

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

1. Что такое Angular и чем он отличается от других фреймворков (например, React или Vue)?

Ответ:
Angular — это полноценный фреймворк для разработки веб-приложений от Google. Он использует TypeScript, предлагает двустороннюю привязку данных, инжекцию зависимостей, маршрутизацию, формы, HTTP-клиент и много других встроенных возможностей. В отличие от React и Vue, которые фокусируются на представлении (View) и предоставляют минимальную функциональность, Angular — это более монолитный фреймворк, который включает в себя все необходимые инструменты для создания крупных приложений.

2. Что такое компоненты в Angular?

Ответ:
Компонент в Angular — это основной строительный блок приложения. Он состоит из:

Шаблона (HTML), который определяет представление.
Класса (TypeScript), который управляет логикой компонента.
Стилей (CSS), которые управляют внешним видом.

Каждый компонент имеет декоратор @Component, который указывает Angular, что это компонент и какие шаблон, стили и другие настройки ему присвоены.

Пример:

typescriptКопировать код@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  title: string = 'Hello, Angular!';
}

3. Что такое директивы в Angular и чем они отличаются от компонентов?

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

Существует три типа директив:

Структурные директивы (*ngIf, *ngFor) — изменяют структуру DOM.
Атрибутные директивы (например, ngClass, ngStyle) — изменяют внешний вид или поведение элементов.
Компоненты — можно рассматривать как директивы с шаблоном.

Пример атрибутной директивы:

htmlКопировать код<div [ngClass]="{ 'highlight': isHighlighted }">Hello, Angular!</div>

4. Что такое двухсторонняя привязка данных (two-way data binding) в Angular?

Ответ:
Двухсторонняя привязка данных позволяет синхронизировать данные между компонентом и его представлением. Когда данные изменяются в компоненте, изменения автоматически отображаются в шаблоне, и наоборот — при изменении данных в шаблоне они автоматически обновляются в компоненте.

Пример:

htmlКопировать код<input [(ngModel)]="username">
<p>Your username is: {{ username }}</p>

Здесь изменения в поле ввода автоматически обновляют значение username в компоненте и наоборот.

5. Что такое сервисы и инъекция зависимостей в Angular?

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

Пример создания сервиса:

typescriptКопировать код@Injectable({
  providedIn: 'root'
})
export class MyService {
  getData() {
    return 'Hello, Service!';
  }
}

Использование в компоненте:

typescriptКопировать кодconstructor(private myService: MyService) {}

ngOnInit() {
  console.log(this.myService.getData());
}

6. Что такое маршрутизация в Angular?

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

Пример маршрутизации:

typescriptКопировать кодconst routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

В шаблоне:

htmlКопировать код<a routerLink="/home">Home</a>
<router-outlet></router-outlet>

7. Что такое RxJS и как он используется в Angular?

Ответ:
RxJS (Reactive Extensions for JavaScript) — это библиотека для работы с асинхронными событиями и потоками данных, которая активно используется в Angular для работы с асинхронными операциями (например, HTTP-запросами, событиями пользователя). Основной абстракцией в RxJS является Observable, который представляет собой поток значений, с которым можно работать с помощью операторов, таких как map, filter, mergeMap, и т.д.

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

typescriptКопировать кодimport { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next('Hello');
  subscriber.next('World');
  subscriber.complete();
});

observable.subscribe({
  next(x) { console.log(x); },
  complete() { console.log('Completed!'); }
});

8. Что такое шаблонные переменные в Angular?

Ответ:
Шаблонные переменные в Angular используются для получения доступа к элементам DOM или компонентам в шаблоне. Они могут быть использованы для передачи данных в другие компоненты или для манипуляций с DOM.

Пример:

htmlКопировать код<input #inputElement>
<button (click)="logValue(inputElement.value)">Log Value</button>

В этом примере #inputElement является шаблонной переменной, которая ссылается на элемент <input>.

9. Что такое жизненный цикл компонента в Angular?

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

Основные хуки:

ngOnInit() — вызывается после инициализации компонента.
ngOnChanges() — вызывается при изменении входных данных компонента.
ngDoCheck() — вызывается при каждом цикле проверки изменений.
ngOnDestroy() — вызывается перед уничтожением компонента.

Пример:

typescriptКопировать кодngOnInit() {
  console.log('Component initialized');
}

10. Что такое Angular CLI и как его использовать?

Ответ:
Angular CLI (Command Line Interface) — это инструмент командной строки, который помогает создавать, разрабатывать и обслуживать Angular-приложения. Он предоставляет команды для генерации компонентов, сервисов, модулей и других элементов, а также для сборки и тестирования приложения.

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

Создание нового компонента:
ng generate component my-component
Запуск приложения:
ng serve

11. Что такое анимации в Angular?

Ответ:
Анимации в Angular позволяют создавать визуальные эффекты в приложении. Angular использует модуль @angular/animations для создания анимаций, таких как плавные переходы между состояниями компонентов.

Пример анимации:

typescriptКопировать кодimport { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-box',
  templateUrl: './box.component.html',
  styleUrls: ['./box.component.css'],
  animations: [
    trigger('fadeInOut', [
      state('in', style({
        opacity: 1
      })),
      state('out', style({
        opacity: 0
      })),
      transition('in <=> out', animate(1000))
    ])
  ]
})
export class BoxComponent {
  state = 'in';
}

В шаблоне:

htmlКопировать код<div [@fadeInOut]="state">Content</div>

12. Что такое Angular Forms и чем отличаются template-driven формы от reactive forms?

Ответ:
Angular поддерживает два типа форм:

Template-driven forms: Управляются через шаблон, с использованием директив ngModel и других атрибутов. Просты в использовании для небольших форм.
Reactive forms: Управляются программно через реактивную модель, где состояние и валидация формы контролируются в компоненте. Подходят для сложных форм с динамическими полями.

Пример reactive формы:

typescriptКопировать кодimport { FormGroup, FormControl } from '@angular/forms';

this.form = new FormGroup({
  name: new FormControl('')
});

13. Что такое `ngIf` и `ngFor` в Angular?

Ответ:

ngIf — структурная директива, которая добавляет или удаляет элемент DOM в зависимости от условия.

htmlКопировать код<div *ngIf="isVisible">This is visible</div>

ngFor — используется для итерации по коллекции и создания элементов для каждого элемента в массиве.

htmlКопировать код<div *ngFor="let item of items">{{ item }}</div>

14. Что такое интерцепторы HTTP в Angular?

Ответ:
Интерцепторы в Angular позволяют перехватывать HTTP-запросы и ответы, модифицировать их или обрабатывать ошибки. Это полезно для добавления заголовков, обработки ошибок или выполнения логирования.

Пример создания интерцептора:

typescriptКопировать код@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const clonedReq = req.clone({
      setHeaders: {
        Authorization: 'Bearer ' + this.authService.getToken()
      }
    });
    return next.handle(clonedReq);
  }
}

15. Что такое lazy loading в Angular?

Ответ:
Lazy loading — это техника загрузки модулей только тогда, когда они действительно необходимы (например, при навигации на определённую страницу). Это улучшает производительность, так как не нужно загружать все модули сразу при старте приложения.

Пример настройки lazy loading:

typescriptКопировать кодconst routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

16. Что такое `ngOnChanges()` и когда оно вызывается?

Ответ:
ngOnChanges() — это хук жизненного цикла, который вызывается, когда входные данные компонента изменяются. Этот метод получает объект с текущими и предыдущими значениями входных данных.

Пример:

typescriptКопировать кодngOnChanges(changes: SimpleChanges) {
  console.log(changes);
}

17. Как управлять состоянием в Angular?

Ответ:
В Angular можно управлять состоянием несколькими способами:

Через сервисы, которые хранят состояние и передают его компонентам.
С помощью RxJS (например, через BehaviorSubject).
Использование NgRx — библиотеки для управления состоянием с использованием Redux-подхода.

18. Что такое `providedIn: 'root'` в Angular?

Ответ:
providedIn: 'root' в декораторе @Injectable() означает, что сервис будет предоставлен на уровне корневого инжектора и будет доступен во всём приложении.

Пример:

typescriptКопировать код@Injectable({
  providedIn: 'root'
})
export class MyService {
  // Логика сервиса
}

19. Что такое Change Detection в Angular?

Ответ:
Change detection (обнаружение изменений) в Angular — это процесс проверки изменений в данных и обновления DOM для отображения этих изменений. Angular использует различные стратегии обнаружения изменений, такие как Default и OnPush.

Пример:

typescriptКопировать код@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {}

20. Как работают модули в Angular?

Ответ:
Модули в Angular — это контейнеры для компонентов, сервисов и других объектов, которые нужны для работы приложения. Каждый Angular-приложение начинается с главного модуля (AppModule), который объединяет все части приложения и экспортирует необходимые элементы для других частей.

Пример модуля:

typescriptКопировать код@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

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

25 Вопросов с Ответами на Собеседовании для React Разработчика

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

1. Что такое React?

Ответ:
React — это библиотека JavaScript для создания пользовательских интерфейсов. Она разработана Facebook и позволяет строить компоненты, которые могут обновлять и рендерить интерфейс в ответ на изменения состояния приложения. React использует виртуальный DOM для повышения производительности.

2. Что такое JSX?

Ответ:
JSX (JavaScript XML) — это синтаксический сахар для JavaScript, который позволяет писать HTML-подобный код внутри JavaScript. JSX превращается в обычный JavaScript с помощью компилятора, такого как Babel. Пример:

jsxКопировать кодconst element = <h1>Hello, world!</h1>;

JSX упрощает создание и чтение UI компонентов.

3. Что такое Virtual DOM и как он работает?

Ответ:
Virtual DOM — это абстракция реального DOM, которая используется React для оптимизации производительности. Когда компонент обновляется, React сначала изменяет виртуальный DOM, затем сравнивает его с предыдущей версией и вносит минимальные изменения в реальный DOM.

4. Что такое компонент в React?

Ответ:
Компонент в React — это функциональная или классовая сущность, которая принимает входные данные (props) и возвращает UI, описанный с использованием JSX. Компоненты могут быть повторно используемыми и могут содержать логику состояния.

5. Что такое props и state в React?

Ответ:

Props (свойства) — это данные, которые передаются в компонент родителем. Props являются неизменяемыми для компонента.
State (состояние) — это данные, которые управляются внутри компонента и могут изменяться. Изменение состояния вызывает повторный рендер компонента.

6. Как работает метод `setState`?

Ответ:
Метод setState используется для обновления состояния компонента в React. Когда состояние изменяется, React перерисовывает компонент и его дочерние элементы. Важно, что setState работает асинхронно, и обновления могут быть объединены.

jsКопировать кодthis.setState({ counter: this.state.counter + 1 });

7. Что такое жизненный цикл компонента?

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

componentDidMount — вызывается после первого рендера компонента.
componentDidUpdate — вызывается после обновления компонента.
componentWillUnmount — вызывается перед удалением компонента.

С появлением React Hooks жизненный цикл можно управлять и с помощью хуков (например, useEffect).

8. Что такое React Hooks?

Ответ:
React Hooks — это новые возможности, введенные в React 16.8, которые позволяют использовать состояние и другие возможности React в функциональных компонентах, без необходимости писать классовые компоненты. Примеры хуков:

useState — для управления состоянием.
useEffect — для работы с побочными эффектами.
useContext — для работы с контекстом.

9. Как работает хук `useState`?

Ответ:
useState — это хук, который позволяет добавлять состояние в функциональные компоненты. Он возвращает массив из двух элементов: текущего состояния и функции для его обновления.

jsКопировать кодconst [count, setCount] = useState(0);

10. Что такое хук `useEffect`?

Ответ:
useEffect — это хук, который позволяет выполнять побочные эффекты в функциональных компонентах (например, запросы к API, подписки, манипуляции с DOM). Он выполняется после рендера компонента.

jsКопировать кодuseEffect(() => {
  // код для побочного эффекта
}, [dependencies]); // зависимости, по изменению которых будет выполняться эффект

11. Как работает хук `useContext`?

Ответ:
useContext позволяет функциональным компонентам использовать значения из контекста. Это полезно для передачи данных между компонентами, не прокидывая props через всю иерархию.

jsКопировать кодconst value = useContext(MyContext);

12. Что такое React Context?

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

13. Что такое Higher-Order Component (HOC)?

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

jsКопировать кодconst withAuth = (Component) => {
  return function AuthHOC(props) {
    if (!props.isAuthenticated) {
      return <Redirect to="/login" />;
    }
    return <Component {...props} />;
  };
};

14. Как обрабатываются события в React?

Ответ:
События в React обрабатываются через синтетические события, которые абстрагируют реальные события браузера. Например, для обработки клика на кнопку:

jsxКопировать кодfunction handleClick() {
  console.log('Clicked');
}

<button onClick={handleClick}>Click me</button>

15. Что такое `key` в списках React?

Ответ:
key — это уникальный идентификатор для каждого элемента в списке, который помогает React эффективно отслеживать изменения в DOM. key должен быть уникальным для каждого элемента в пределах списка.

jsxКопировать кодconst items = [1, 2, 3];
return items.map(item => <li key={item}>{item}</li>);

16. Как в React управлять формами?

Ответ:
Формы в React управляются с помощью состояния компонента. Для обработки ввода данных используется двухсторонняя привязка. Важный момент — в React элементы формы (например, <input>) контролируются через состояние.

jsxКопировать кодconst [value, setValue] = useState('');

const handleChange = (event) => {
  setValue(event.target.value);
};

return <input value={value} onChange={handleChange} />;

17. Что такое мемоизация в React?

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

jsКопировать кодconst MemoizedComponent = React.memo(MyComponent);

18. Что такое динамический импорт в React?

Ответ:
Динамический импорт позволяет загружать модули асинхронно. В React это используется для ленивой загрузки компонентов, что улучшает производительность приложения. Пример:

jsКопировать кодconst LazyComponent = React.lazy(() => import('./LazyComponent'));

19. Что такое Redux?

Ответ:
Redux — это библиотека для управления состоянием в JavaScript-приложениях. Он использует принцип единого хранилища (store), которое содержит все состояние приложения, и позволяет изменять его через действия (actions) и редьюсеры (reducers).

20. Что такое “middleware” в Redux?

Ответ:
Middleware в Redux — это промежуточные слои, которые могут перехватывать и обрабатывать действия перед тем, как они будут отправлены в редьюсер. Примером является redux-thunk, который позволяет использовать асинхронные операции.

21. Что такое “pure” компоненты?

Ответ:
Pure компоненты в React — это компоненты, которые не изменяют свои props и state, и всегда возвращают одинаковый результат при одинаковых входных данных. Они могут быть реализованы с помощью React.PureComponent или функциональных компонентов с использованием React.memo.

22. Как работает Suspense в React?

Ответ:
Suspense — это компонент, который позволяет отложить рендеринг части интерфейса до тех пор, пока не будут загружены необходимые ресурсы (например, компоненты или данные). Это часто используется в сочетании с React.lazy.

23. Как оптимизировать производительность React-приложений?

Ответ:
Некоторые способы оптимизации:

Использование React.memo и useMemo для предотвращения лишних рендеров.
Ленивая загрузка компонентов с помощью React.lazy и Suspense.
Разбиение компонента на более мелкие части.
Использование shouldComponentUpdate или PureComponent.

24. Что такое серверный рендеринг (SSR) в React?

Ответ:
Серверный рендеринг (SSR) — это процесс рендеринга React-компонентов на сервере перед отправкой HTML-кода на клиент. Это улучшает SEO и ускоряет первоначальную загрузку приложения.

25. Что такое React Router и как он работает?

Ответ:
React Router — это библиотека для маршрутизации в React-приложениях. Она позволяет управлять навигацией между страницами, используя компоненты Route, Link и BrowserRouter.

jsxКопировать код<BrowserRouter>
  <Link to="/home">Home</Link>
  <Route path="/home" component={Home} />
</BrowserRouter>

Эти вопросы покрывают основные концепции React и соответствующие технологии. Готовность отвечать на них уверенно поможет вам показать свои знания и навыки на собеседовании для позиции React-разработчика.

25 Вопросов с Ответами для Собеседования Frontend Разработчика

Собеседования для frontend-разработчиков обычно охватывают широкий спектр тем — от основ HTML, CSS и JavaScript до современных технологий, таких как фреймворки (React, Vue, Angular), а также вопросы, связанные с производительностью, оптимизацией и архитектурой приложений. Ниже приведены 25 вопросов, которые часто задают на собеседованиях для frontend-разработчиков, с подробными ответами.

1. Что такое DOM?

Ответ:
DOM (Document Object Model) — это программный интерфейс для работы с HTML и XML документами. Он представляет страницу в виде структуры, состоящей из узлов, каждый из которых представляет собой элемент, атрибут или текстовый контент. Взаимодействие с DOM позволяет изменять содержимое, структуру и стиль веб-страницы.

2. Что такое событие `DOMContentLoaded`?

Ответ:
Событие DOMContentLoaded срабатывает, когда HTML-документ полностью загружен и разобран, но до загрузки внешних ресурсов, таких как изображения и стили. Это событие часто используется для выполнения кода, который манипулирует DOM, когда структура страницы готова.

javascriptКопировать кодdocument.addEventListener('DOMContentLoaded', function() {
  console.log('DOM полностью загружен');
});

3. Что такое CORS и как с ним работать?

Ответ:
CORS (Cross-Origin Resource Sharing) — это механизм, который позволяет или запрещает веб-страницам из одного домена запрашивать ресурсы с другого домена. CORS помогает предотвратить атаки типа CSRF (Cross-Site Request Forgery). Сервер должен отправить заголовки, разрешающие доступ к ресурсам, например:

httpКопировать кодAccess-Control-Allow-Origin: *

Для работы с CORS можно использовать прокси-сервер или настраивать серверную часть с необходимыми заголовками.

4. Как работает асинхронность в JavaScript?

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

Асинхронные операции можно обрабатывать с использованием:

Коллбеков: функции, передаваемые в другие функции для выполнения после завершения операции.
Promises: объекты, представляющие будущее значение асинхронной операции.
async/await: синтаксический сахар для работы с промисами, упрощающий асинхронный код.

Пример с async/await:

javascriptКопировать кодasync function fetchData() {
  const response = await fetch('https://api.example.com');
  const data = await response.json();
  console.log(data);
}

5. Что такое “hoisting” в JavaScript?

Ответ:
Hoisting — это механизм в JavaScript, при котором объявления переменных и функций “поднимаются” вверх своей области видимости до того, как выполнится код. Это влияет на работу переменных и функций.

Пример:

javascriptКопировать кодconsole.log(a);  // undefined
var a = 10;

В отличие от переменных, объявленных с помощью let или const, которые не поднимаются.

javascriptКопировать кодconsole.log(b);  // ReferenceError: Cannot access 'b' before initialization
let b = 10;

6. Что такое “debouncing” и “throttling”?

Ответ:

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

javascriptКопировать кодfunction debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

Throttling — это техника, которая ограничивает выполнение функции не чаще, чем через заданный интервал времени. Это полезно, когда нужно ограничить количество запросов или обработку событий.

javascriptКопировать кодfunction throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

7. Что такое “flexbox” и как его использовать?

Ответ:
Flexbox (Flexible Box Layout) — это модель компоновки, предназначенная для создания гибких и адаптивных макетов. Она позволяет легко управлять выравниванием, распределением пространства и размерами элементов в контейнере.

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

cssКопировать код.container {
  display: flex;
  justify-content: space-between; /* Равномерное распределение пространства */
}

.item {
  flex: 1; /* Каждый элемент растягивается на одинаковое пространство */
}

8. Что такое “grid layout” в CSS?

Ответ:
CSS Grid Layout — это мощная система компоновки, которая позволяет создавать сетки для размещения элементов. Она предоставляет более сложные и точные возможности для создания сеточных макетов.

Пример:

cssКопировать код.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 колонки одинаковой ширины */
}

.item {
  grid-column: span 2; /* Элемент занимает 2 колонки */
}

9. Что такое `this` в JavaScript?

Ответ:
this — это ключевое слово, которое ссылается на объект, в контексте которого была вызвана функция. В JavaScript контекст this может изменяться в зависимости от того, как была вызвана функция.

Пример:

javascriptКопировать кодconst obj = {
  value: 42,
  showValue: function() {
    console.log(this.value);  // this указывает на obj
  }
};
obj.showValue();

10. Что такое `closure` в JavaScript?

Ответ:
Closure (замыкание) — это функция, которая “запоминает” окружение, в котором она была создана. Это позволяет функции доступ к переменным из внешней функции даже после того, как внешняя функция завершила выполнение.

Пример:

javascriptКопировать кодfunction outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}

const counter = outer();
counter(); // 1
counter(); // 2

11. Как работает `event delegation` в JavaScript?

Ответ:
Event delegation — это техника, при которой обработчик событий привязывается к родительскому элементу, а не к каждому дочернему. Это позволяет эффективно обрабатывать события на динамически добавляемых элементах.

Пример:

javascriptКопировать кодdocument.querySelector('#parent').addEventListener('click', function(event) {
  if (event.target && event.target.matches('button')) {
    console.log('Button clicked!');
  }
});

12. Что такое `localStorage` и `sessionStorage`?

Ответ:

localStorage — это объект Web API, который позволяет сохранять данные в браузере в виде ключ-значение. Данные сохраняются даже после закрытия вкладки или браузера.
sessionStorage — аналогичен localStorage, но данные сохраняются только в рамках одной сессии браузера и удаляются при закрытии вкладки.

Пример:

javascriptКопировать кодlocalStorage.setItem('key', 'value');
console.log(localStorage.getItem('key')); // 'value'

13. Что такое “responsive design”?

Ответ:
Responsive design (отзывчивый дизайн) — это подход к созданию веб-страниц, который позволяет интерфейсу адаптироваться под различные устройства и размеры экрана. Используются медиазапросы, гибкие макеты и элементы, которые изменяют свой размер в зависимости от ширины экрана.

Пример медиазапроса:

cssКопировать код@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

14. Что такое `async` и `await`?

Ответ:
async и await — это синтаксический сахар для работы с промисами, который делает асинхронный код более читаемым. async перед функцией указывает, что функция возвращает промис, а await позволяет ожидать результат выполнения асинхронной операции.

Пример:

javascriptКопировать кодasync function fetchData() {
  const response = await fetch('https://api.example.com');
  const data = await response.json();
  console.log(data);
}

25 Вопросов с Ответами для Собеседования Frontend Разработчика

1. Что такое DOM?

2. Что такое событие `DOMContentLoaded`?

javascriptКопировать кодdocument.addEventListener('DOMContentLoaded', function() {
  console.log('DOM полностью загружен');
});

3. Что такое CORS и как с ним работать?

httpКопировать кодAccess-Control-Allow-Origin: *

4. Как работает асинхронность в JavaScript?

Асинхронные операции можно обрабатывать с использованием:

Коллбеков: функции, передаваемые в другие функции для выполнения после завершения операции.
Promises: объекты, представляющие будущее значение асинхронной операции.
async/await: синтаксический сахар для работы с промисами, упрощающий асинхронный код.

Пример с async/await:

javascriptКопировать кодasync function fetchData() {
  const response = await fetch('https://api.example.com');
  const data = await response.json();
  console.log(data);
}

5. Что такое “hoisting” в JavaScript?

Пример:

javascriptКопировать кодconsole.log(a);  // undefined
var a = 10;

В отличие от переменных, объявленных с помощью let или const, которые не поднимаются.

javascriptКопировать кодconsole.log(b);  // ReferenceError: Cannot access 'b' before initialization
let b = 10;

6. Что такое “debouncing” и “throttling”?

Ответ:

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

javascriptКопировать кодfunction debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

Throttling — это техника, которая ограничивает выполнение функции не чаще, чем через заданный интервал времени. Это полезно, когда нужно ограничить количество запросов или обработку событий.

javascriptКопировать кодfunction throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

7. Что такое “flexbox” и как его использовать?

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

cssКопировать код.container {
  display: flex;
  justify-content: space-between; /* Равномерное распределение пространства */
}

.item {
  flex: 1; /* Каждый элемент растягивается на одинаковое пространство */
}

8. Что такое “grid layout” в CSS?

Пример:

cssКопировать код.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 колонки одинаковой ширины */
}

.item {
  grid-column: span 2; /* Элемент занимает 2 колонки */
}

9. Что такое `this` в JavaScript?

Пример:

javascriptКопировать кодconst obj = {
  value: 42,
  showValue: function() {
    console.log(this.value);  // this указывает на obj
  }
};
obj.showValue();

10. Что такое `closure` в JavaScript?

Пример:

javascriptКопировать кодfunction outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}

const counter = outer();
counter(); // 1
counter(); // 2

11. Как работает `event delegation` в JavaScript?

Пример:

javascriptКопировать кодdocument.querySelector('#parent').addEventListener('click', function(event) {
  if (event.target && event.target.matches('button')) {
    console.log('Button clicked!');
  }
});

12. Что такое `localStorage` и `sessionStorage`?

Ответ:

localStorage — это объект Web API, который позволяет сохранять данные в браузере в виде ключ-значение. Данные сохраняются даже после закрытия вкладки или браузера.
sessionStorage — аналогичен localStorage, но данные сохраняются только в рамках одной сессии браузера и удаляются при закрытии вкладки.

Пример:

javascriptКопировать кодlocalStorage.setItem('key', 'value');
console.log(localStorage.getItem('key')); // 'value'

13. Что такое “responsive design”?

Пример медиазапроса:

cssКопировать код@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

14. Что такое `async` и `await`?

Пример:

javascriptКопировать кодasync function fetchData() {
  const response = await fetch('https://api.example.com');
  const data = await response.json();
  console.log(data);
}

15. Как работает `var`, `let` и `const` в JavaScript?

Ответ:

var: Переменная с var имеет функциональную область видимости и может быть переобъявлена.
let: Переменная с let имеет блочную область видимости и не может быть переобъявлена в той же области.
const: Переменная с const имеет блочную область видимости и не может быть переназначена, но объект или массив, объявленный с const, может быть изменен.

16. Что такое `JSON`?

Ответ:
JSON (JavaScript Object Notation) — это текстовый формат обмена данными, основанный на JavaScript, который используется для представления структурированных данных. Он широко используется для обмена данными между клиентом и сервером.

Пример:

jsonКопировать код{
  "name": "John",
  "age": 30,
  "city": "New York"
}

17. Что такое `Promises` в JavaScript?

Ответ:
Promise (обещание) — это объект, представляющий асинхронную операцию, которая может завершиться успешно (resolved) или с ошибкой (rejected). Он используется для работы с асинхронным кодом, позволяя избегать “callback hell”.

Пример:

javascriptКопировать кодconst promise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve('Data loaded');
  } else {
    reject('Error');
  }
});

promise.then(response => console.log(response)).catch(error => console.log(error));

18. Что такое `webpack`?

Ответ:
Webpack — это модульный бандлер для JavaScript-приложений. Он обрабатывает и собирает ресурсы (JS, CSS, изображения и другие файлы) в бандлы, которые могут быть загружены в браузере. В процессе сборки webpack может использовать плагины для оптимизации и преобразования файлов.

19. Что такое `Babel` и зачем он используется?

Ответ:
Babel — это транспайлер, который позволяет использовать современные возможности JavaScript (например, ES6+ синтаксис) в старых браузерах. Он преобразует новый JavaScript код в более старую версию, поддерживаемую большинством браузеров.

20. Что такое `SASS` и чем он отличается от CSS?

Ответ:
SASS (Syntactically Awesome Stylesheets) — это расширение CSS, которое добавляет дополнительные возможности, такие как переменные, вложенность, миксины и наследование. SASS позволяет писать более чистый и удобный код для стилей.

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

scssКопировать код$primary-color: #333;

body {
  color: $primary-color;
}

21. Что такое `service worker`?

Ответ:
Service Worker — это скрипт, который работает в фоновом режиме, отдельно от веб-страницы, и может перехватывать запросы, кэшировать ресурсы, работать в оффлайн-режиме и отправлять push-уведомления. Это используется для создания Progressive Web Apps (PWA).

22. Что такое “virtual DOM”?

Ответ:
Virtual DOM — это абстракция, используемая во многих современных фреймворках (например, React). Он представляет собой копию реального DOM, которая используется для минимизации операций с реальным DOM, ускоряя обновление UI.

23. Что такое `npm`?

Ответ:
npm (Node Package Manager) — это менеджер пакетов для JavaScript, который используется для установки и управления зависимостями в проектах. Он также позволяет публиковать и устанавливать пакеты, такие как библиотеки и утилиты.

24. Что такое “single page application” (SPA)?

Ответ:
SPA (Single Page Application) — это веб-приложение, которое загружает одну HTML-страницу и динамически обновляет содержимое, не перезагружая страницу. Это позволяет создавать быстрые и интерактивные пользовательские интерфейсы.

25. Что такое `CSS specificity`?

Ответ:
CSS specificity (специфичность) — это система, которая определяет, какой из конфликтующих стилей будет применяться к элементу. Специфичность рассчитывается на основе селекторов: id, классов и элементов.

Пример:

ID-селектор имеет большую специфичность, чем класс.
Класс имеет большую специфичность, чем элемент.

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

Просмотры: 2 630

1. Что такое замыкание (closure) в JavaScript? Приведи пример использования.

2. Чем отличается var, let и const в JavaScript?

3. Что такое «this» в JavaScript? Как он работает?

4. Что такое “hoisting” в JavaScript?

5. Что такое асинхронность в JavaScript? Как работают setTimeout и setInterval?

6. Что такое промисы (Promises) в JavaScript и как они работают?

7. Что такое async/await? Чем это отличается от работы с промисами?

8. Что такое event loop и как работает очередь событий в JavaScript?

9. Объясни разницу между null и undefined.

10. Что такое прототипы в JavaScript?

11. Что такое map, filter, reduce и в чем их отличие?

12. Что такое деструктуризация в JavaScript?

13. Что такое REST и Spread операторы?

14. Как работает оператор typeof?

15. Что такое call, apply и bind?

16. Что такое promise chaining?

17. Что такое модульная система в JavaScript?

18. Что такое Symbol в JavaScript?

19. Что такое мемоизация?

20. Что такое “event delegation”?

21. Как работают дебаунсинг и троттлинг?

22. Что такое прокси (Proxy) в JavaScript?

23. Объясни, как работают стрелочные функции.

24. Какие способы клонирования объектов существуют в JavaScript?

25. Что такое гибридные приложения?

26. Что такое Event Loop в JavaScript?

27. Что такое замыкания (closures)?

28. Что такое промисы (Promises) и как они работают?

29. Чем отличается == от === в JavaScript?

30. Что такое “hoisting” в JavaScript?

31. Что такое “this” в JavaScript?

32. Что такое стрелочные функции в JavaScript и как они отличаются от обычных функций?

33. Что такое “debouncing” и “throttling”?

34. Что такое “prototype” в JavaScript?

35. Что такое “async/await” и как их использовать?

36. Как работает механизм обработки ошибок с использованием try/catch?

37. Что такое “IIFE” (Immediately Invoked Function Expression)?

38. Как работает механизм событий в JavaScript (Event Bubbling и Capturing)?

39. Что такое “modules” в JavaScript?

40. Что такое “memoization” и когда её стоит использовать?

Дополнительные Вопросы с Ответами для Senior JavaScript Разработчика

41. Что такое “defer” и “async” в тегах <script>?

42. Что такое мемоизация и когда её стоит использовать?

43. Объясните, что такое прототипное наследование в JavaScript?

44. Что такое “this” в стрелочных функциях?

45. Как работает система модулей в JavaScript?

46. Что такое Shadow DOM?

47. Объясните разницу между bind(), call() и apply() в JavaScript.

48. Что такое “currying” в JavaScript?

49. Что такое “event delegation” и зачем она используется?

50. Что такое “polyfill” и зачем он нужен?

51. Что такое “webpack” и как он работает?

52. Что такое “service workers” в JavaScript?

20 Вопросов с Ответами для Собеседования Angular Разработчика

1. Что такое Angular и чем он отличается от других фреймворков (например, React или Vue)?

2. Что такое компоненты в Angular?

3. Что такое директивы в Angular и чем они отличаются от компонентов?

4. Что такое двухсторонняя привязка данных (two-way data binding) в Angular?

5. Что такое сервисы и инъекция зависимостей в Angular?

6. Что такое маршрутизация в Angular?

7. Что такое RxJS и как он используется в Angular?

8. Что такое шаблонные переменные в Angular?

9. Что такое жизненный цикл компонента в Angular?

10. Что такое Angular CLI и как его использовать?

11. Что такое анимации в Angular?

12. Что такое Angular Forms и чем отличаются template-driven формы от reactive forms?

13. Что такое ngIf и ngFor в Angular?

14. Что такое интерцепторы HTTP в Angular?

15. Что такое lazy loading в Angular?

16. Что такое ngOnChanges() и когда оно вызывается?

17. Как управлять состоянием в Angular?

18. Что такое providedIn: 'root' в Angular?

19. Что такое Change Detection в Angular?

20. Как работают модули в Angular?

25 Вопросов с Ответами на Собеседовании для React Разработчика

1. Что такое React?

2. Что такое JSX?

3. Что такое Virtual DOM и как он работает?

4. Что такое компонент в React?

5. Что такое props и state в React?

2. Чем отличается `var`, `let` и `const` в JavaScript?

5. Что такое асинхронность в JavaScript? Как работают `setTimeout` и `setInterval`?

9. Объясни разницу между `null` и `undefined`.

11. Что такое `map`, `filter`, `reduce` и в чем их отличие?

14. Как работает оператор `typeof`?

15. Что такое `call`, `apply` и `bind`?

18. Что такое `Symbol` в JavaScript?

25.
Что такое гибридные приложения?

29. Чем отличается `==` от `===` в JavaScript?

36. Как работает механизм обработки ошибок с использованием `try/catch`?

41. Что такое “defer” и “async” в тегах `<script>`?

47. Объясните разницу между `bind()`, `call()` и `apply()` в JavaScript.

13. Что такое `ngIf` и `ngFor` в Angular?

16. Что такое `ngOnChanges()` и когда оно вызывается?

18. Что такое `providedIn: 'root'` в Angular?

6. Как работает метод `setState`?

9. Как работает хук `useState`?

10. Что такое хук `useEffect`?

11. Как работает хук `useContext`?

15. Что такое `key` в списках React?

2. Что такое событие `DOMContentLoaded`?

9. Что такое `this` в JavaScript?

10. Что такое `closure` в JavaScript?

11. Как работает `event delegation` в JavaScript?

12. Что такое `localStorage` и `sessionStorage`?

14. Что такое `async` и `await`?

2. Что такое событие `DOMContentLoaded`?

9. Что такое `this` в JavaScript?

10. Что такое `closure` в JavaScript?

11. Как работает `event delegation` в JavaScript?

12. Что такое `localStorage` и `sessionStorage`?

14. Что такое `async` и `await`?

15. Как работает `var`, `let` и `const` в JavaScript?

16. Что такое `JSON`?

17. Что такое `Promises` в JavaScript?

18. Что такое `webpack`?

19. Что такое `Babel` и зачем он используется?

20. Что такое `SASS` и чем он отличается от CSS?

21. Что такое `service worker`?

23. Что такое `npm`?

25. Что такое `CSS specificity`?