Frontend | Вопросы собесов

🤔 Какие отличия между новым и старым js?

JavaScript, как язык программирования, претерпел значительные изменения с момента своего создания. Основные изменения и улучшения в языке были введены с обновлениями спецификации ECMAScript (ES). Давайте рассмотрим ключевые отличия между "старым" JavaScript (ES5) и "новым" JavaScript (ES6 и более поздние версии):

🚩Основные отличия между ES5 и ES6+ (ES2015+)

🟠Объявление переменных: `var` vs `let` и `const`
ES5: Объявление переменных с помощью var. Переменные, объявленные с var, имеют функциональную область видимости (function scope) и подлежат хостингу.

var x = 10;
if (true) {
 var x = 20;
 console.log(x); // 20
}
console.log(x); // 20   

ES6+: Объявление переменных с помощью let и const. Переменные, объявленные с let и const, имеют блочную область видимости (block scope) и не подлежат хостингу в том виде, как var.

let y = 10;
if (true) {
let y = 20;
console.log(y); // 20
}
console.log(y); // 10

const z = 30;
// z = 40; // Ошибка: Assignment to constant variable.

🟠Стрелочные функции
ES5: Определение функций с использованием ключевого слова function.

var add = function(a, b) {
  return a + b;
};   

ES6+: Стрелочные функции, которые предоставляют более краткий синтаксис и не имеют собственного значения this.

const add = (a, b) => a + b;   

🟠Шаблонные строки
ES5: Конкатенация строк с использованием оператора +.

var name = 'Alice';
var greeting = 'Hello, ' + name + '!';   

ES6+: Использование шаблонных строк с обратными кавычками (`` ` ``) и интерполяцией.

const name = 'Alice';
const greeting = `Hello, ${name}!`;   

🟠Деструктуризация
ES5: Извлечение значений из массивов и объектов с использованием точечной нотации.

var arr = [1, 2, 3];
var first = arr[0];
var second = arr[1];

var obj = {a: 1, b: 2};
var a = obj.a;
var b = obj.b;   

ES6+: Деструктуризация массивов и объектов.

const [first, second] = [1, 2, 3];
const {a, b} = {a: 1, b: 2};   

🟠Промисы
ES5: Обработка асинхронных операций с использованием колбэков.

function fetchData(callback) {
setTimeout(function() {
callback('data');
}, 1000);
}

fetchData(function(data) {
console.log(data); // 'data'
});

ES6+: Введение промисов для более удобной работы с асинхронными операциями.

const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
};

fetchData().then(data => {
console.log(data); // 'data'
});

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое inline стили, и какой они имеют приоритет?

Инлайн-стили — это CSS-правила, прописанные непосредственно в HTML-элементе через атрибут style. Они имеют более высокий приоритет, чем стили из таблиц стилей или встроенные теги <style>, но уступают !important. Использование инлайн-стилей снижает переиспользуемость и усложняет поддержку.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое хостинг js?

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

🟠Хостинг переменных
Переменные, объявленные с помощью var, поднимаются в начало своей функции или глобальной области видимости. При этом они инициализируются значением undefined.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

На самом деле, вышеуказанный код интерпретируется JavaScript движком следующим образом:

var a;
console.log(a); // undefined
a = 10;
console.log(a); // 10

🟠Хостинг с использованием let и const
Переменные, объявленные с помощью let и const, также поднимаются, но они не инициализируются. Попытка доступа к ним до объявления приведет к ошибке ReferenceError из-за временной мертвой зоны (Temporal Dead Zone, TDZ).

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(b); // 20

🟠Хостинг функций
Функции, объявленные с помощью Function Declaration, поднимаются полностью, включая тело функции. Это позволяет вызывать функции до их фактического объявления в коде.

console.log(sum(2, 3)); // 5

function sum(a, b) {
  return a + b;
}

На самом деле, вышеуказанный код интерпретируется JavaScript движком следующим образом:

function sum(a, b) {
  return a + b;
}

console.log(sum(2, 3)); // 5

🟠Хостинг функциональных выражений
Функции, объявленные с помощью Function Expression, поднимаются как обычные переменные. То есть их объявления поднимаются, но сами функции остаются неинициализированными до выполнения строки, где они определены.

console.log(subtract); // undefined
console.log(subtract(5, 3)); // TypeError: subtract is not a function

var subtract = function(a, b) {
  return a - b;
};

console.log(subtract(5, 3)); // 2

🚩Важные аспекты хостинга

🟠Понимание и использование хостинга
Хостинг позволяет писать код, который может использовать функции и переменные до их фактического объявления, что может быть полезно в некоторых случаях. Однако злоупотребление этим механизмом может привести к путанице и трудноуловимым ошибкам.
🟠Лучшие практики
Рекомендуется объявлять все переменные и функции в начале их соответствующей области видимости. Это улучшает читаемость и поддержку кода. Используйте let и const вместо var, чтобы избежать проблем с хостингом и повысить безопасность и предсказуемость кода.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как отцентровать блок по горизонтали и по вертикали?

Блок можно отцентрировать с помощью flexbox (свойства justify-content: center и align-items: center) или grid. Также используются свойства position: absolute с вычислением смещения или transform: translate. Выбор метода зависит от контекста верстки.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое function decloration?

Это способ определения функции в JavaScript, при котором функция объявляется явно с помощью ключевого слова function, за которым следует имя функции. Функции, определенные таким образом, подлежат "поднятию" (hoisting), что означает, что их можно использовать до их фактического объявления в коде.

🚩Синтаксис Function Declaration

function имяФункции(параметр1, параметр2, ...) {
  // Тело функции
  // Инструкции
}

🚩Примеры использования Function Declaration

Основное объявление функции

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Alice')); // Hello, Alice!

🟠Поднятие (Hoisting)
Функции, объявленные с помощью Function Declaration, поднимаются, что позволяет вызывать их до объявления в коде.

console.log(sum(2, 3)); // 5

function sum(a, b) {
  return a + b;
}

🚩Отличия между Function Declaration и Function Expression

🟠Поднятие (Hoisting)
Function Declaration: Функции поднимаются и могут быть вызваны до их объявления.

console.log(multiply(2, 3)); // 6

function multiply(a, b) {
  return a * b;
}
     

Function Expression: Функциональные выражения не поднимаются, поэтому их можно использовать только после их определения.

console.log(divide(6, 3)); // Ошибка: divide is not defined

const divide = function(a, b) {
return a / b;
};

🟠Именование
Function Declaration: Обязательно имеют имя.

function subtract(a, b) {
return a - b;
}

Function Expression: Могут быть анонимными или именованными.

const modulo = function(a, b) {
return a % b;
};

🟠Использование в коде
Function Declaration: Часто используются для определения основных функций, которые нужны на протяжении всего кода. Они удобны для структурирования кода и обеспечения доступности функций в любом месте программы.
Function Expression: Более гибкий способ определения функций, который часто используется для создания замыканий, обработки событий и в функциональных конструкциях, таких как методы массивов (map, filter и т.д.).


Function Declaration

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Alice')); // Hello, Alice!

Function Expression

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet('Alice')); // Hello, Alice!

🚩Когда использовать

🟠Замыкания и колбэки
Когда вам нужно создать функцию в контексте другой функции, например, передать её как аргумент или вернуть как результат.
🟠Модули и объекты
Когда функции являются частью модуля или объекта и вы хотите ограничить их видимость или управление.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что ты знаешь про специфичность селекторов?

Специфичность определяет приоритет CSS-правил при конфликте стилей. Она зависит от типов селекторов: инлайновые стили имеют самый высокий приоритет, за ними следуют ID, классы и псевдоклассы, и, наконец, теги. Чем выше специфичность, тем больше вероятность применения стиля.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое function expression?

Это способ определения функции в JavaScript, при котором функция создается как часть выражения и может быть присвоена переменной, объекту или передана в качестве аргумента другой функции. В отличие от Function Declaration (функционального объявления), функциональные выражения не подлежат "поднятию" (hoisting), что означает, что их можно использовать только после их определения.

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

Присваивание функции переменной

const add = function(a, b) {
  return a + b;
};

console.log(add(2, 3)); // 5

Анонимные функции

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet('Alice')); // Hello, Alice!

Именованные функции

const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1);
};

console.log(factorial(5)); // 120

Использование функции в качестве аргумента другой функции

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(function(number) {
  return number * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

IIFE (Immediately Invoked Function Expression)

(function() {
  const message = 'Hello, World!';
  console.log(message);
})();
// Hello, World!

Использование стрелочных функций

const multiply = (a, b) => a * b;

console.log(multiply(2, 3)); // 6

🚩Основные отличия

🟠Поднятие (Hoisting)
Функции, определенные с помощью функционального объявления, поднимаются, то есть могут быть вызваны до их определения в коде.

console.log(add(2, 3)); // 5

function add(a, b) {
  return a + b;
}     

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

console.log(add(2, 3)); // Ошибка: add is not defined

const add = function(a, b) {
  return a + b;
};     

🟠Именование
Обязательно имеют имя.

function subtract(a, b) {
  return a - b;
}
     

Могут быть анонимными или именованными.

const divide = function(a, b) {
  return a / b;
};     

🟠Использование в коде
Подходит для определения основных функций на верхнем уровне программы. Более гибкий способ определения функций, особенно полезен для создания замыканий, обработки событий и использования в функциональных конструкциях.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Расскажи про области видимости?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

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

Это приложения, которые сочетают в себе элементы как веб-приложений, так и нативных мобильных приложений. Они разрабатываются с использованием веб-технологий (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 для создания мобильных приложений.

🚩Минусы

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

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое методология bem?

BEM (Block, Element, Modifier) — это методология для написания читаемого и структурированного CSS-кода. Блоки представляют независимые компоненты, элементы — их части, а модификаторы — изменения состояния или внешнего вида. BEM помогает упорядочить стили и улучшить масштабируемость кода.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 В чём разница в работе eventloop на сервере и в браузере?

Это механизм, используемый для обработки и выполнения асинхронных операций. Он позволяет JavaScript выполнять неблокирующие операции, несмотря на то, что JavaScript является однопоточным. Хотя принципы работы Event Loop в браузере и на сервере (например, в Node.js) схожи, есть некоторые важные различия в их реализации и окружении.

🚩Event Loop в браузере

В браузере Event Loop отвечает за обработку событий, выполнение асинхронного кода и обновление пользовательского интерфейса.

🟠DOM и рендеринг
Браузер должен обновлять и перерисовывать пользовательский интерфейс. Это включает в себя обработку изменений в DOM и применение стилей. Рендеринг обычно происходит между итерациями Event Loop.

🟠Очередь макрозадач
Включает такие задачи, как обработка пользовательских событий (нажатие кнопок, ввод текста), setTimeout, setInterval, сетевые запросы (XHR, fetch) и другие. Эти задачи обрабатываются в порядке их поступления.

🟠Очередь микрозадач
Включает такие задачи, как промисы (Promise), MutationObserver. Микрозадачи выполняются перед макрозадачами в рамках одной итерации Event Loop.

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

🚩Event Loop в Node.js

Node.js, как серверная платформа, использует Event Loop для обработки асинхронных операций, таких как I/O, таймеры и сетевые запросы.

🟠Фазы Event Loop
Node.js Event Loop состоит из нескольких фаз, каждая из которых обрабатывает определённые типы задач: timers, I/O callbacks, idle, poll, check, и close callbacks.
🟠Timers
Эта фаза обрабатывает колбэки от setTimeout и setInterval.
🟠I/O callbacks
Обрабатывает почти все колбэки от асинхронных операций ввода-вывода, за исключением close callbacks, таймеров и setImmediate.
🟠Poll
Извлекает новые I/O события; выполняет I/O-колбэки (почти все, за исключением тех, которые закроют сервер); и если ничего не происходит, ждет в этой фазе.
🟠Check
Обрабатывает колбэки от setImmediate.
🟠Close callbacks
Обрабатывает колбэки от закрытия всех I/O операций.
🟠Microtasks (process.nextTick и Promises)
Выполняются после каждой фазы Event Loop, перед переходом к следующей фазе

🚩Различия

🟠Окружение
В браузере Event Loop управляет как асинхронными задачами, так и обновлением пользовательского интерфейса. В Node.js Event Loop больше ориентирован на обработку I/O операций и серверных задач.

🟠Фазы Event Loop
В браузере Event Loop менее детализирован по фазам по сравнению с Node.js. В Node.js Event Loop разделён на более детализированные фазы для обработки различных типов асинхронных задач.

🟠Микрозадачи
И в браузере, и в Node.js микрозадачи выполняются перед макрозадачами, но реализация и использование могут слегка отличаться.

🟠Рендеринг
В браузере Event Loop включает в себя шаги, связанные с рендерингом и обновлением DOM. В Node.js этого аспекта нет, так как он работает на сервере и не имеет дела с рендерингом пользовательского интерфейса.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как делается http запрос?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое wrapper компонента?

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

🚩Задачи

🟠Повторное использование логики
Обертка может инкапсулировать общую логику, которая должна быть доступна нескольким компонентам.

🟠Добавление функциональности
Wrapper-компоненты могут добавлять новые функциональные возможности к обернутым компонентам.

🟠Стилизация
Обертка может использоваться для применения стилей к компонентам или для организации их в определенной структуре.

🟠Управление состоянием
Wrapper-компоненты могут управлять состоянием, которое затем передается обернутым компонентам через пропсы.

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

🟠Простая обертка для стилизации
Рассмотрим пример, где мы создаем обертку для применения стилей к любому компоненту.

import React from 'react';

// Wrapper-компонент для стилизации
const StyledWrapper = (props) => {
  const style = {
    border: '1px solid black',
    padding: '10px',
    margin: '10px'
  };

  return <div style={style}>{props.children}</div>;
};

// Компонент для обертки
const Content = () => {
  return <p>This is some content inside a styled wrapper.</p>;
};

// Использование Wrapper-компонента
const App = () => {
  return (
    <StyledWrapper>
      <Content />
    </StyledWrapper>
  );
};

export default App;

🟠Wrapper-компонент для управления состоянием
Рассмотрим пример, где обертка управляет состоянием и передает его обернутому компоненту через пропсы.

import React, { useState } from 'react';

// Wrapper-компонент для управления состоянием
const StateWrapper = (WrappedComponent) => {
  return (props) => {
    const [count, setCount] = useState(0);

    const increment = () => {
      setCount(count + 1);
    };

    return (
      <WrappedComponent count={count} increment={increment} {...props} />
    );
  };
};

// Обычный компонент
const Counter = ({ count, increment }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

// Использование Wrapper-компонента
const EnhancedCounter = StateWrapper(Counter);

const App = () => {
  return <EnhancedCounter />;
};

export default App;

🟠Wrapper-компонент для авторизации
Рассмотрим пример, где обертка проверяет, авторизован ли пользователь, и отображает либо обернутый компонент, либо сообщение о необходимости авторизации.

import React from 'react';

// Wrapper-компонент для проверки авторизации
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = /* логика проверки авторизации */ true;

    if (!isAuthenticated) {
      return <p>Please log in to view this content.</p>;
    }

    return <WrappedComponent {...props} />;
  };
};

// Обычный компонент
const Dashboard = () => {
  return <h1>Welcome to the Dashboard</h1>;
};

// Использование Wrapper-компонента
const ProtectedDashboard = withAuth(Dashboard);

const App = () => {
  return <ProtectedDashboard />;
};

export default App;

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое rest api?

REST API — это архитектурный стиль взаимодействия между системами, основанный на протоколе HTTP. Он использует стандартные методы, такие как GET, POST, PUT и DELETE, для работы с ресурсами, представляемыми в виде URL. REST API обеспечивает простую и гибкую интеграцию между клиентом и сервером.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Для чего нужен централизованный режим событий?

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

🚩Плюсы

➕Упрощение управления событиями
➕Повышение поддерживаемости
➕Масштабируемость
➕Избежание дублирования кода
➕Лучшая организация взаимодействия между компонентами

🚩Примеры централизованного режима событий:

🟠Vue.js и Vuex
В приложениях, использующих Vue.js, централизованное управление состоянием и событиями часто реализуется с помощью Vuex. Vuex позволяет управлять состоянием приложения и событиями в одном месте.

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('setMessage', message);
    }
  }
});

// Component.vue
<template>
  <div>
    <input v-model="message" @input="updateMessage(message)">
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['updateMessage'])
  }
};
</script>

🟠Redux в React
Это библиотека для управления состоянием в приложениях React, которая также предоставляет централизованный механизм для управления событиями и состоянием.

// actions.js
export const setMessage = message => ({
  type: 'SET_MESSAGE',
  payload: message
});

// reducer.js
const initialState = {
  message: ''
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_MESSAGE':
      return {
        ...state,
        message: action.payload
      };
    default:
      return state;
  }
};

export default reducer;

// store.js
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

// Component.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setMessage } from './actions';

const Component = () => {
  const message = useSelector(state => state.message);
  const dispatch = useDispatch();

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

  return (
    <div>
      <input value={message} onChange={handleChange} />
      <p>{message}</p>
    </div>
  );
};

export default Component;

🟠EventEmitter в Node.js
В Node.js можно использовать EventEmitter для централизованного управления событиями.

const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}

const myEmitter = new MyEmitter();

// Обработчик события
myEmitter.on('event', (message) => {
  console.log('Received:', message);
});

// Генерация события
myEmitter.emit('event', 'Hello, World!');

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое dom дерево?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 В каких случаях однопоточность лучше многопоточности?

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

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

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

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

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

🟠Избежание накладных расходов
Управление потоками имеет свои накладные расходы: создание, переключение контекста и синхронизация потоков. В некоторых случаях эти накладные расходы могут перевесить преимущества многопоточности. Приложения с короткими и нечастыми задачами, где накладные расходы на многопоточность не оправданы. Приложения, работающие в условиях высокой конкуренции за ресурсы, где использование нескольких потоков может привести к деградации производительности.

🚩Примеры в реальной жизни

🟠Однопоточное веб-приложение на Node.js
Node.js использует однопоточную модель с событиями и обратными вызовами для обработки запросов. Благодаря асинхронной модели ввода-вывода, Node.js может эффективно обрабатывать большое количество одновременных соединений, не создавая новые потоки для каждого запроса.

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello, world!\n');
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

🟠Однопоточное приложение на Python
Для простых задач, таких как чтение и обработка файла, однопоточность может быть вполне достаточной и проще в реализации.

def process_file(file_path):
    with open(file_path, 'r') as file:
        data = file.read()
        # Обработка данных
        print(data)

if __name__ == '__main__':
    process_file('example.txt')

Ставь 👍 и забирай 📚 Базу знаний

🤔Различие методов call apply bind?

Методы `call` и `apply` выполняют функцию с заданным контекстом `this`, но `call` принимает аргументы по отдельности, а `apply` — в виде массива. Метод `bind` возвращает новую функцию с предустановленным значением `this`, которую можно вызвать позже. В отличие от `call` и `apply`, `bind` не вызывает функцию немедленно. `bind` часто используется для создания копий функций с привязкой контекста.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое инверсия управления?

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

🚩Идеи инверсии управления

🟠Отделение логики приложения от деталей реализации
В традиционном подходе компоненты создают и управляют своими зависимостями напрямую. С IoC компоненты делегируют эту ответственность внешней системе.

🟠Улучшение модульности и повторного использования
Компоненты становятся более независимыми и легко заменяемыми, что способствует повторному использованию и тестируемости.

🚩Реализация

IoC может быть реализована несколькими способами, в том числе через Dependency Injection (внедрение зависимостей) и Service Locator (локатор служб).

🟠Dependency Injection (DI)
Это наиболее распространенный способ реализации IoC, где зависимости объекта передаются ему извне, а не создаются внутри. Пример на Java с использованием Spring. В этом примере Spring фреймворк автоматически внедряет зависимость Repository в Service через конструктор.

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

@Component
public class Service {

    private final Repository repository;

    @Autowired
    public Service(Repository repository) {
        this.repository = repository;
    }

    public void performAction() {
        repository.doSomething();
    }
}

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

public class ServiceLocator {

    private static final Map<Class<?>, Object> services = new HashMap<>();

    public static <T> void registerService(Class<T> serviceClass, T service) {
        services.put(serviceClass, service);
    }

    public static <T> T getService(Class<T> serviceClass) {
        return serviceClass.cast(services.get(serviceClass));
    }
}

// Использование Service Locator
ServiceLocator.registerService(Repository.class, new RepositoryImpl());

Repository repository = ServiceLocator.getService(Repository.class);
repository.doSomething();

🚩Плюсы

➕Улучшение тестируемости
IoC позволяет легко заменять реальные зависимости на моки или стабы в тестах.

➕Уменьшение связности кода
Компоненты становятся менее зависимыми друг от друга, что упрощает их замену и модификацию.

➕Повышение гибкости и расширяемости
Легко добавлять новые зависимости или изменять существующие без изменения кода, использующего эти зависимости.

➕Явное управление зависимостями
Зависимости становятся явными, что улучшает понимание и документирование системы.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое promise и какие состояния у него есть?

Promise в JavaScript — это объект, который представляет результат асинхронной операции. Он может находиться в одном из трёх состояний: pending (ожидание), fulfilled (выполнено) и rejected (отклонено). Fulfilled означает, что операция завершилась успешно, а rejected — что произошла ошибка. Это удобный способ работы с асинхронным кодом и упрощает обработку результатов таких операций.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚Базу Знаний