Методы map и forEach используются для работы с массивами.

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

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

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

const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num)); // Выводит 1, 2, 3

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

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

Синтаксис:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

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

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🔥 Создание таблицы в HTML осуществляется с помощью тега <table>, который содержит строки <tr>, ячейки заголовков <th> и ячейки данных <td>.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Здесь <thead> используется для заголовка таблицы, а <tbody> для основного содержимого.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Типы void и never в TypeScript имеют принципиальные различия.

1⃣ void используется для функций, которые не возвращают значение. При этом функция с типом void может вернуть undefined или выполнить какое-то действие без возврата значения.

2⃣ never представляет значения, которые никогда не могут произойти. Функция с типом never никогда не завершит свое выполнение нормально - она либо выбросит ошибку, либо будет выполняться бесконечно.

Пример void:

function logMessage(): void {
  console.log("Hello");
}

Пример never:

function throwError(): never {
  throw new Error("Something went wrong");
}

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Spread operator (оператор расширения) - это синтаксис с тремя точками (...), который позволяет "распаковать" элементы массива или свойства объекта.

⏩ С массивами:

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

⏩ С объектами:

const person = { name: 'John' };
const details = { age: 30 };
const fullPerson = { ...person, ...details }; // { name: 'John', age: 30 }

⏩ Spread также удобен для создания копий массивов и объектов, передачи аргументов в функции:

const copy = [...array];
Math.max(...numbers);

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🔥Сброс стилей (CSS Reset) — это техника, используемая для устранения различий в отображении элементов HTML в разных браузерах. Каждый браузер имеет свои собственные стили по умолчанию, которые могут влиять на внешний вид веб-страницы. Сброс стилей помогает создать единообразную основу для дальнейшей разработки.

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

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🌿 Создание новой ветки — это процесс, который позволяет работать над отдельными фичами или фиксами без влияния на основную кодовую базу.

▶️Для создания новой ветки используется команда git branch <имя_ветки>. Это создаст новую ветку с указанным именем, но не переключит на неё.

▶️Чтобы сразу создать и переключиться на новую ветку, используется команда git checkout -b <имя_ветки>. Эта команда создаёт ветку и делает её текущей.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🔥 Хук useState используется для добавления состояния в функциональные компоненты. Он возвращает пару значений: текущее состояние и функцию для его обновления.

При вызове useState передается начальное значение состояния. Важно помнить, что обновление состояния асинхронно и может быть объединено с другими обновлениями.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

➡️В этом примере useState инициализирует состояние count значением 0. Функция setCount обновляет это состояние при нажатии на кнопку.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

В HTML-формах атрибуты action и method играют ключевую роль в определении поведения формы при отправке данных.

1⃣ Атрибут action указывает URL, куда будут отправлены данные формы. Это может быть скрипт или API, который обработает полученные данные.

2⃣ Атрибут method определяет HTTP-метод, используемый для отправки данных. Чаще всего используются методы GET и POST. GET отправляет данные в URL-строке, а POST — в теле запроса.

<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">Отправить</button>
</form>

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

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

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

🔘CSS-модули интегрируются с большинством современных сборщиков. Для использования достаточно импортировать CSS-файл как модуль и применять стили через объект, где ключи — это имена классов, а значения — уникальные строки.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

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

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

Пример простого компонента на Vue.js:

Vue.component('example-component', {
  template: '<div>Hello, Vue!</div>'
});

▶️ Vue.js активно используется для создания одностраничных приложений (SPA), где требуется высокая интерактивность и отзывчивость интерфейса.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Функция — это блок кода, предназначенный для выполнения определенной задачи. Использование функций улучшает читаемость и повторное использование кода.

Объявление функции в JavaScript можно осуществить несколькими способами:

1⃣ Функциональное объявление:

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

2⃣ Функциональное выражение:

const greet = function(name) {
    return

 Hello, ${name}!;

};

3⃣ Стрелочная функция:

const greet = (name) =>

 Hello, ${name}!;

🟥 Каждый из этих методов позволяет создавать функции, которые можно вызывать с разными аргументами для выполнения заданных действий.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

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

⚫️JSX не является валидным JavaScript, поэтому он компилируется в вызовы React.createElement(). Например, <div>Hello</div> преобразуется в React.createElement('div', null, 'Hello'). Это позволяет React создавать виртуальное DOM-дерево, оптимизируя обновления реального DOM. JSX поддерживает JavaScript-выражения внутри фигурных скобок {}.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

➡️ Margin — это внешний отступ элемента, который определяет пространство вокруг него. Он позволяет управлять расстоянием между элементами на странице. Margin может быть задан для каждой стороны элемента отдельно: margin-top, margin-right, margin-bottom, margin-left, или с помощью сокращенной записи margin, где значения указываются по часовой стрелке, начиная с верхнего отступа.

.element {
  margin: 10px 20px 15px 5px; /* top, right, bottom, left */
}

➡️ Margin может принимать значения в пикселях, процентах и других единицах измерения.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🟢Атрибут placeholder используется в HTML для предоставления подсказки или примера ввода в текстовых полях формы. Он отображает текст внутри поля ввода, когда оно пустое и не в фокусе, помогая пользователю понять, какую информацию следует ввести.

<input type="text" placeholder="Enter your name">

🟢Этот атрибут улучшает пользовательский интерфейс, делая формы более интуитивно понятными. Однако текст placeholder исчезает при вводе данных.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

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

enum Direction {
  Up,
  Down,
  Left,
  Right
}

const move: Direction = Direction.Up;

🟠 По умолчанию перечисления имеют числовые значения, начиная с 0. Можно задавать свои значения:

enum Status {
  Active = 1,
  Inactive,
  Pending
}

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

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Блочная модель в CSS описывает структуру и расположение элементов на веб-странице, включая их содержимое, внутренние отступы (padding), границы (border) и внешние отступы (margin). Она позволяет управлять размерами и позиционированием элементов, что является ключевым аспектом при создании интерфейсов.

✈️ Frontend собеседования

Конкатенация строк в JavaScript может быть выполнена с помощью оператора +, который объединяет две или более строки в одну. Также можно использовать метод concat(), который принимает несколько строк в качестве аргументов и возвращает новую строку. В современных версиях JavaScript часто применяются шаблонные строки с использованием обратных кавычек, что позволяет вставлять переменные и выражения внутрь строк.

👉 Тут еще больше JS

✈️ Frontend собеседования

⏩ Функциональные компоненты проще и легче для понимания. Они представляют собой функции, которые принимают props и возвращают JSX. С введением хуков функциональные компоненты могут управлять состоянием и жизненным циклом, что раньше было доступно только в классовых компонентах.

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

Пример функционального компонента:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Пример классового компонента:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Атрибут id и класс используются для идентификации и стилизации элементов, но имеют разные назначения и ограничения.

1⃣ id — уникальный идентификатор элемента на странице. Он должен быть уникальным в пределах документа и часто используется для JavaScript манипуляций и CSS селекторов:

<div id="header"></div>

2⃣ Класс (class) позволяет группировать элементы для применения общих стилей или поведения. Один элемент может иметь несколько классов, и один класс может быть применен к нескольким элементам:

<div class="button primary"></div>

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования