👩‍💻 Как удалить свойство из объекта?

Удаление свойства из объекта в JavaScript осуществляется с помощью оператора delete. Этот оператор позволяет удалить указанное свойство из объекта, изменяя его структуру.

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

const car = {
  brand: 'Toyota',
  model: 'Corolla',
  year: 2020
};

delete car.year;

В этом примере свойство year удаляется из объекта car. После выполнения операции объект будет содержать только свойства brand и model.

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как настроить компилятор TypeScript с помощью файла tsconfig.json?

Настройка компилятора TypeScript осуществляется через файл tsconfig.json, который находится в корне проекта. Этот файл определяет корневые файлы и параметры компиляции.

Пример базового tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

В compilerOptions задаются параметры компиляции. Например, target определяет версию ECMAScript, в которую будет транслироваться код, а module указывает систему модулей.

Параметры include и exclude определяют, какие файлы и папки будут включены или исключены из компиляции.

Настройка tsconfig.json позволяет гибко управлять процессом компиляции и адаптировать его под нужды проекта.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое контекст в React?

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

Создание контекста начинается с React.createContext():

const ThemeContext = React.createContext('light');

Затем контекст предоставляет данные с помощью компонента Provider:

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

Компоненты, которым нужен доступ к контексту, используют useContext хук:

const theme = React.useContext(ThemeContext);

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое свойство overflow и какие значения оно принимает?

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

Основные значения свойства overflow:

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

- hidden: содержимое обрезается, и невидимая часть не отображается.

- scroll: содержимое обрезается, но появляется полоса прокрутки для просмотра скрытой части.

- auto: добавляет полосы прокрутки только при необходимости, если содержимое превышает размеры контейнера.

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

.container {
  width: 200px;
  height: 100px;
  overflow: auto;
}

Свойство overflow помогает контролировать внешний вид и поведение элементов, особенно в адаптивных интерфейсах.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Объясни использование атрибута placeholder в полях ввода

Атрибут placeholder в HTML используется в элементах <input> и <textarea> для отображения текстовой подсказки внутри поля ввода. Эта подсказка исчезает, когда пользователь начинает вводить данные.

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

<input type="text" placeholder="Введите ваше имя">

В этом примере текст "Введите ваше имя" будет отображаться в поле ввода до тех пор, пока пользователь не начнет вводить текст.

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое хуки в React? Перечисли основные

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

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

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

const [count, setCount] = React.useState(0);

- useEffect: выполняет побочные эффекты в компонентах, такие как загрузка данных или подписка на события. Заменяет методы жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount.

React.useEffect(() => {
  // эффект
}, []);

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

const value = React.useContext(MyContext);

- useMemo: мемоизирует вычисленные значения, чтобы избежать ненужных повторных вычислений при рендере.

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

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

const memoizedCallback = React.useCallback(() => {
  doSomething(a, b);
}, [a, b]);

- useRef: создает изменяемый объект, который сохраняется между рендерами. Часто используется для доступа к DOM-элементам или хранения любых изменяемых значений.

const inputRef = React.useRef(null);

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое функция обратного вызова (callback)?

Функция обратного вызова (callback) в JavaScript — это функция, переданная в другую функцию в качестве аргумента и вызываемая после завершения операции.

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

function fetchData(url, callback) {
  fetch(url)
    .then(response => response.json())
    .then(data => callback(data))
    .catch(error => console.error('Error:', error));
}

function handleData(data) {
  console.log('Received data:', data);
}

fetchData('https://api.example.com/data', handleData);

В этом примере fetchData принимает URL и функцию handleData в качестве callback. После получения данных handleData вызывается для обработки результата.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое Ambient Declarations и как они используются?

Ambient Declarations в TypeScript используются для описания типов, которые существуют в других файлах или библиотеках, но не определены в текущем коде. Они позволяют TypeScript понимать типы, предоставляемые внешними JavaScript библиотеками, без необходимости переписывать их.

Ambient Declarations создаются с помощью ключевого слова declare. Например, для использования глобальной переменной, определенной вне TypeScript:

declare const API_URL: string;

Для описания интерфейса библиотеки можно использовать declare module:

declare module 'my-library' {
  export function myFunction(): void;
}

Ambient Declarations часто находятся в файлах с расширением .d.ts, которые содержат только объявления типов. Эти файлы помогают интегрировать TypeScript с существующими JavaScript проектами и библиотеками, обеспечивая статическую проверку типов и автодополнение в редакторах.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Зачем были введены хуки?

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

Основные причины введения хуков:

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

- Повторное использование логики: хуки упрощают повторное использование логики состояния между компонентами без необходимости использовать HOC или render props.

- Управление побочными эффектами: useEffect заменяет методы жизненного цикла, упрощая управление побочными эффектами и улучшая читаемость кода.

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

Введение хуков значительно улучшило разработку на React, сделав её более гибкой и эффективной.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как подключить CSS в HTML-документ?

Подключение CSS к HTML-документу — важный шаг для стилизации веб-страницы. Существует несколько способов сделать это:

1. Внешний файл CSS: наиболее распространенный метод, который позволяет хранить стили отдельно от HTML. Используется тег <link> в разделе <head>:

<link rel="stylesheet" href="styles.css">

2. Встроенные стили: стили добавляются непосредственно в HTML-документ внутри тега <style> в разделе <head>:

<style>
  body {
    background-color: #f0f0f0;
  }
</style>

3. Inline-стили: стили применяются непосредственно к элементам через атрибут style. Этот метод менее предпочтителен из-за плохой читаемости и поддержки:

<div style="color: red;">Hello World</div>

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое прототипное наследование?

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

Когда обращение к свойству объекта происходит, JavaScript сначала ищет это свойство в самом объекте. Если оно не найдено, поиск продолжается в прототипе объекта, и так далее, по цепочке прототипов.

Пример создания объекта с прототипным наследованием:

const animal = {
  eat() {
    console.log('Eating');
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  console.log('Barking');
};

dog.eat(); // 'Eating'
dog.bark(); // 'Barking'

В этом примере объект dog наследует метод eat от объекта animal через прототип. Прототипное наследование позволяет создавать иерархии объектов, обеспечивая гибкость и повторное использование кода.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Для чего используется тег <link>?

Тег <link> в HTML используется для установления связей между текущим документом и внешними ресурсами. Он обычно располагается в разделе <head> и не отображается на странице. Основные применения тега <link> включают:

- Подключение CSS: наиболее распространенное использование — подключение внешних таблиц стилей для стилизации веб-страницы.

<link rel="stylesheet" href="styles.css">

- Фавикон: указание иконки сайта, отображаемой на вкладке браузера.

<link rel="icon" href="favicon.ico" type="image/x-icon">

- Шрифты и другие ресурсы: подключение шрифтов или других ресурсов, таких как RSS-ленты.

<link rel="alternate" type="application/rss+xml" href="feed.xml">

Тег <link> играет важную роль в управлении внешними ресурсами, обеспечивая гибкость и модульность веб-страниц.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое «use strict» и для чего он используется?

"use strict" — это директива в JavaScript, которая активирует строгий режим. Строгий режим изменяет семантику JavaScript, делая его более безопасным и оптимизированным. Он помогает выявлять потенциальные ошибки и улучшает производительность кода.

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

"use strict";

function example() {
  x = 10; // Ошибка: x не определена
}

example();

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Объясни назначение ключевого слова abstract?

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

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

abstract class Animal {
  abstract makeSound(): void; // Абстрактный метод без реализации

  move(): void {
    console.log("Moving...");
  }
}

class Dog extends Animal {
  makeSound(): void {
    console.log("Bark");
  }
}

const dog = new Dog();
dog.makeSound(); // Выводит "Bark"
dog.move(); // Выводит "Moving..."

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Каково назначение элемента <nav>?

Элемент <nav> в HTML используется для определения навигационных ссылок на веб-странице. Он служит контейнером для основных навигационных блоков, таких как меню, списки ссылок и другие элементы, которые помогают пользователям перемещаться по сайту.

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

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое CSS-переменные и как их использовать?

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

Определение CSS-переменной:

:root {
  --main-color: #3498db; // Определение переменной
  --padding: 10px;
}

Использование CSS-переменной:

.button {
  background-color: var(--main-color); // Применение переменной
  padding: var(--padding);
}

Переменные определяются с помощью префикса -- и доступны в пределах их области видимости. Обычно они объявляются в :root, чтобы быть доступными глобально. Для использования переменной применяется функция var(). CSS-переменные позволяют легко изменять темы и поддерживать консистентность стилей.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как работать с типами, определенными в сторонних библиотеках?

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

1. Установка типов: многие популярные библиотеки имеют отдельные пакеты с типами, которые можно установить через npm. Например, для библиотеки lodash:

npm install @types/lodash

2. Импорт типов: после установки типов можно использовать их в коде, импортируя необходимые функции или классы:

import _ from 'lodash';

const result: number = _.add(5, 10);

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как работает метод forEach?

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

Синтаксис:

array.forEach(function(element, index, array) {
  // Действия с элементом
});

Первый параметр — это текущий элемент массива, второй — индекс элемента, третий — сам массив. Индекс и массив являются необязательными параметрами.

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

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
  console.log(number * 2); // Умножает каждый элемент на 2 и выводит результат
});

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как использовать keyframes для создания анимаций?

@keyframes в CSS используется для создания анимаций, задавая последовательность стилей для анимируемого элемента. Анимация определяется с помощью ключевых кадров, которые описывают, как элемент должен изменяться в течение времени.

Синтаксис:

@keyframes animationName {
  from {
    /* Начальное состояние */
  }
  to {
    /* Конечное состояние */
  }
}

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

@keyframes animationName {
  0% {
    /* Начальное состояние */
  }
  50% {
    /* Промежуточное состояние */
  }
  100% {
    /* Конечное состояние */
  }
}

Для применения анимации к элементу используются свойства animation-name, animation-duration и другие.

Пример:

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation-name: slideIn; // Название анимации
  animation-duration: 2s; // Длительность анимации
  animation-timing-function: ease-in-out; // Функция времени
}

Этот пример создает анимацию, которая перемещает элемент снаружи экрана внутрь за 2 секунды.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как встроить видео в HTML?

Для встраивания видео в HTML используется элемент <video>. Он позволяет воспроизводить видеофайлы непосредственно на веб-странице. Элемент <video> поддерживает различные атрибуты, такие как controls, autoplay, loop и muted.

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

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Атрибут controls добавляет элементы управления воспроизведением, такие как кнопки паузы и перемотки. Атрибуты width и height задают размеры видео. Внутри элемента <video> можно указать несколько источников <source> для обеспечения поддержки разных форматов видеофайлов. Текст внутри тега <video> отображается, если браузер не поддерживает видео.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое useEffect?

useEffect — это хук в React, который позволяет выполнять побочные эффекты в функциональных компонентах. Он заменяет методы жизненного цикла классовых компонентов, такие как componentDidMount, componentDidUpdate и componentWillUnmount.

Синтаксис:

useEffect(() => {
  // Код эффекта
  return () => {
    // Очистка эффекта (опционально)
  };
}, [dependencies]);

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

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

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.noscript = `Count: ${count}`; // Обновляет заголовок документа
  }, [count]); // Эффект выполняется при изменении count

  return (
    <button onClick={() => setCount(count + 1)}>
      Increment
    </button>
  );
}

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈