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

Какие проблемы решает react ? Спросят с вероятностью 10% React — это популярная библиотека для разработки пользовательских интерфейсов. Она предлагает разработчикам эффективный и гибкий способ создавать интерактивные веб-приложения. React решает множество задач и проблем, с которыми разработчики сталкиваются при построении современных веб-приложений: 1️⃣ Создание динамических интерфейсов Позволяет легко создавать динамические веб-интерфейсы с использованием компонентов. Благодаря декларативному подходу и использованию JSX (синтаксис, похожий на HTML внутри JavaScript), разработка становится более интуитивно понятной и менее подверженной ошибкам. 2️⃣ Управление состоянием компонентов Предоставляет механизмы для управления состоянием (state) внутри компонентов, что позволяет разработчикам легко отслеживать и управлять изменениями данных в приложении. Это упрощает создание интерактивных интерфейсов, таких как формы, фильтры, навигация и т.д. 3️⃣ Оптимизация производительности Использует виртуальный DOM (Virtual DOM), что позволяет оптимизировать обновления в реальном DOM. Это снижает затраты производительности при обновлении пользовательского интерфейса, особенно при работе с большими объемами данных и сложными интерфейсами. 4️⃣ Компонентный подход Поощряет использование компонентного подхода к разработке, что позволяет разбивать интерфейс на мелкие, повторно используемые части. Это улучшает организацию кода, облегчает его поддержку и тестирование. 5️⃣ Универсальность и изоморфизм Код может выполняться как на клиенте, так и на сервере, что позволяет создавать изоморфные (универсальные) приложения. Это улучшает SEO, скорость загрузки и обеспечивает лучший пользовательский опыт. 6️⃣ Мощный экосистема и сообщество Обладает большим и активным сообществом разработчиков, а также мощной экосистемой инструментов и библиотек, таких как Redux для управления состоянием приложения, React Router для навигации, Next.js для серверного рендеринга и многих других. 7️⃣ Гибкость и интеграция Может быть интегрирован в существующие приложения постепенно, что делает его удобным выбором для поэтапной модернизации проектов. Также он хорошо сочетается с другими библиотеками и фреймворками. React предлагает разработчикам удобные инструменты для создания эффективных, масштабируемых и поддерживаемых веб-приложений, решая множество проблем современной веб-разработки, начиная от управления состоянием и заканчивая производительностью интерфейсов. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

▫️ Как пройти собеседование на английском  ▫️ Подборка выражений для описания коллег  ▫️ Weird English Idioms Еще больше английского для работы и жизни на канале «Гапонова и ее английский». Лена Гапонова — автор курсов Gaponova school, преподаватель с 16-летним стажем и опытом в международных IT-компаниях — объясняет сложное в английской грамматике, знакомит с интересными выражениями, учит правильному произношению и помогает подружиться с английским языком.  Помимо английского, Лена рассказывает про методику, эффективное обучение, собеседование на английском и жизнь в других странах. 📌Еще больше про английский на @gaponova erid: LjN8JuHUC

Что такое замыкание ? Спросят с вероятностью 7% Замыкание — это мощная концепция, которая позволяет функции доступ к переменным из области видимости, в которой она была создана, даже после того, как эта область видимости становится недоступной. Это один из ключевых механизмов языка, и понимание замыканий необходимо для эффективной работы, особенно при работе с асинхронным кодом, обработчиками событий и функциями высшего порядка. Как они работают Когда функция объявляется, она замыкает в себе переменные из своей лексической области видимости. Это означает, что функция сохраняет доступ к переменным из области, в которой она была создана, даже если эта область выполнения уже завершила свою работу.

function создатьФункциюПриветствия(имя) {
  var приветствие = 'Привет';
  return function() {
    console.log(приветствие + ', ' + имя);
  };
}

var приветАлиса = создатьФункциюПриветствия('Алиса');
приветАлиса(); // Выводит: "Привет, Алиса"

В этом примере приветАлиса является функцией, замыкающей в себе переменные приветствие и имя из области видимости функции создатьФункциюПриветствия, даже после того, как выполнение функции создатьФункциюПриветствия завершено. Зачем нужны замыкания 1️⃣ Инкапсуляция данных: Позволяют скрывать переменные внутри функции, делая их недоступными извне, что способствует созданию приватных переменных и методов. 2️⃣ Создание функций с привязанными параметрами: Могут использоваться для создания новых функций на основе существующих, но с заранее заданными или "зафиксированными" аргументами. 3️⃣ Работа с асинхронным кодом: Часто используются в обработчиках событий и колбэках для доступа к переменным из внешней области видимости. 4️⃣ Модульность и управление состоянием: Позволяют создавать модули и фабрики функций, которые могут иметь собственное внутреннее состояние, недоступное напрямую извне. Важные моменты: ✅ Замыкания могут привести к утечкам памяти, если они неправильно используются, особенно в старых браузерах. Современные движки обладают сборщиками мусора, которые минимизируют эту проблему. ✅ Понимание замыканий необходимо для глубокого освоения, поскольку они используются во многих шаблонах и библиотеках. Замыкания являются одной из фундаментальных концепций, обеспечивающей гибкость и мощь при работе с функциями и асинхронным кодом. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

🔥 Годнота Недавно заметил канал, где автор с нуля раскрывает весь процесс разработки веб-приложений, создания анимаций, публикует шпаргалки и готовый код для ваших проектов. Каждый пост выходит с наглядными объяснениями и примерами. Считайте что @code_ready — это готовая библиотека кода для каждого фронтенд разработчика.

Что делает box-sizing: border-box ? Спросят с вероятностью 7% Свойство box-sizing определяет, как будут рассчитываться размеры элемента: включая ли в эти размеры внутренние отступы (padding) и границы (border) или нет. Данное значение изменяет традиционное поведение расчета ширины и высоты элемента. Как работает Когда вы устанавливаете для элемента box-sizing: border-box;, ширина и высота элемента начинают включать в себя внутренние отступы и толщину границ. Это означает, что фактический размер элемента (как он отображается на странице) будет соответствовать заданным ширине (width) и высоте (height), независимо от толщины границ и размеров внутренних отступов. Без border-box По умолчанию, если не указано значение, используется значение content-box. Это означает, что указанные ширина и высота применяются только к контентной области элемента. Внутренние отступы и границы добавляются к этим размерам, увеличивая общий размер элемента. Например:

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  /* box-sizing: content-box; по умолчанию */
}

Здесь фактический размер элемента будет 350px по ширине (300px контент + 40px отступы + 10px границы) и 250px по высоте. C border-box Если вы установите такое значение, размеры элемента будут включать в себя и внутренние отступы, и границы:

.box {
  box-sizing: border-box;
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
}

В этом случае фактический размер элемента останется 300px по ширине и 200px по высоте, несмотря на наличие внутренних отступов и границ. Это делает расчет размеров более предсказуемым и упрощает верстку, особенно при работе с гибкими и адаптивными макетами. Зачем использовать Использование border-box упрощает работу с макетами, так как разработчику не нужно постоянно пересчитывать размеры элементов при изменении внутренних отступов или толщины границ. Это делает код более чистым и понятным, а процесс разработки — более быстрым и эффективным. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Лучшие практики React-разработки собраны на бесплатном вебинаре Optimizing React: Web & Beyond! 13 марта команда разработчиков Social Discovery Group на примере реальных кейсов расскажут про: Как оптимизировать React-приложения и снизить нагрузку на устройства; Как основные «фичи» React нашли себе применение в монтаже видео, 3D графике и написании ботов; Как не сломать мемоизацию в React. 📅 Дата: 13 марта, 19:00 (GMT+4) 🔉 Язык: русский Регистрируйтесь на вебинар 👉🏻 здесь 👈🏻

В чем разница == и === ? Спросят с вероятностью 20% Операторы == (равно) и === (строго равно) используются для сравнения значений, но работают по-разному, что важно понимать для написания надёжного и предсказуемого кода. Оператор == (равно) Сравнивает значения двух переменных, но перед сравнением производит приведение типов, если переменные относятся к разным типам. Это означает, что если вы сравниваете число с строкой, JavaScript попытается преобразовать строку в число, а затем сравнить эти два значения. Этот процесс может привести к неинтуитивным результатам. Примеры:

'2' == 2 // true, так как строка '2' преобразуется в число 2 перед сравнением
0 == false // true, так как 0 и false считаются эквивалентными
null == undefined // true, специальное правило языка

Оператор ===(строго равно) В отличие от ==, он сравнивает и значения, и типы без приведения типов. Если типы различаются, оператор немедленно возвращает false, не пытаясь преобразовать один тип в другой. Это делает сравнение более строгим и предсказуемым. Примеры:

'2' === 2 // false, так как типы различаются
0 === false // false, разные типы: число и булево значение
null === undefined // false, разные типы

Почему важно знать разницу Понимание разницы между == и === критически важно, чтобы избежать ошибок, связанных с неожиданным приведением типов. Использование === помогает гарантировать, что сравниваемые значения совпадают по типу и значению, что является более безопасным подходом в большинстве случаев. В целом, рекомендуется использовать === для сравнения значений, чтобы код был более читабельным и предсказуемым. == сравнивает значения, приводя их к общему типу, что может привести к неожиданным результатам из-за неявного приведения типов. === сравнивает как значения, так и типы без приведения типов, обеспечивая более строгое и предсказуемое сравнение. Использование === рекомендуется для большей надёжности и читабельности кода. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Какие есть компоненты ? Спросят с вероятностью 7% Компоненты являются основными строительными блоками для построения пользовательских интерфейсов. Они позволяют разбивать интерфейс на независимые, переиспользуемые части, которые можно разрабатывать, тестировать и поддерживать отдельно друг от друга. Компоненты в React могут быть как простыми и представлять собой один элемент интерфейса (например, кнопку или поле ввода), так и сложными и включать в себя другие компоненты, формируя иерархию. Типы: 1️⃣ Функциональные компоненты: - Самый простой способ определить компонент. - Это JavaScript-функции, которые принимают пропсы (свойства) в качестве аргумента и возвращают элемент, описывающий, что должно отображаться на экране. - С появлением хуков, функциональные компоненты получили возможность использовать состояние и другие возможности React, аналогичные классовым компонентам.

      function Welcome(props) {
     return <h1>Привет, {props.name}</h1>;
   }

2️⃣ Классовые компоненты: - Перед введением хуков классовые компоненты были единственным способом использования состояния и жизненного цикла компонентов . - Они определяются путем расширения React.Component и требуют метода render(), который возвращает элемент React.

      class Welcome extends React.Component {
     render() {
       return <h1>Привет, {this.props.name}</h1>;
     }
   }

Пропсы и состояние - Пропсы (Props): Коротко для "свойств", пропсы передаются от родительских компонентов к дочерним. Они неизменяемы в пределах компонента, что означает, что дочерний компонент не может изменять пропсы, полученные от родителя. - Состояние (State): Состояние позволяет компонентам реагировать на ввод пользователя, серверные запросы и любые другие действия, сохраняя и изменяя данные во времени. В отличие от пропсов, состояние управляется и изменяется внутри самого компонента. Жизненный цикл компонента Классовые компоненты имеют несколько "жизненных циклов" — методов, которые автоматически вызываются в разные моменты жизни компонента, такие как монтирование (компонент вставляется в DOM), обновление (компонент реагирует на изменения пропсов или состояния) и размонтирование (компонент удаляется из DOM). Хуки позволяют использовать аналогичные возможности в функциональных компонентах. Компоненты обеспечивают эффективный способ организации пользовательского интерфейса, делая код более читабельным, легким для тестирования и поддержки. Они позволяют разработчикам строить сложные приложения из простых частей, облегчая разработку и обеспечивая лучший пользовательский опыт. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Зачем используется директива usestate ? Спросят с вероятностью 7% Директива useState является одним из хуков, который позволяет добавлять состояние к функциональным компонентам. В предыдущих версиях React для управления состоянием можно было использовать только классовые компоненты. Однако с введением хуков в React 16.8, функциональные компоненты получили возможность использовать состояние и другие возможности React, аналогичные классовым компонентам. Как работает useState Принимает начальное значение состояния как аргумент и возвращает массив из двух элементов: текущее значение состояния и функцию для его обновления. Это позволяет компоненту реагировать на изменения данных и перерисовываться с новыми значениями.

import React, { useState } from 'react';

function Counter() {
  // Объявляем новую переменную состояния "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Кликни меня
      </button>
    </div>
  );
}

В этом примере он используется для отслеживания количества кликов по кнопке. Компонент Counter хранит значение счетчика в count и обновляет его при помощи функции setCount, когда пользователь нажимает на кнопку. Зачем использовать useState 1️⃣ Упрощение кода: Функциональные компоненты с хуками часто более лаконичны и проще для понимания, чем классовые компоненты. 2️⃣ Переиспользование логики состояния: Хуки позволяют легко переиспользовать логику управления состоянием между компонентами без необходимости создавать высшие компоненты (HOC) или использовать рендер-пропы. 3️⃣ Разделение ответственности: Он и другие хуки позволяют разделять различные аспекты логики компонента (например, управление состоянием, эффекты, контекст) на мелкие, независимые блоки кода. 4️⃣ Улучшение производительности: Функциональные компоненты могут быть меньше и быстрее, чем классовые, особенно когда используется правильное разделение логики на хуки. Использование useState делает компоненты React более модульными и удобными, а также облегчает управление состоянием в приложениях. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Зачем появились promise ? Спросят с вероятностью 7% Промисы (Promises) были введены как решение проблемы "callback hell" (также известного как "pyramid of doom"), когда асинхронный код становится сложным для понимания, поддержки и расширения из-за глубокой вложенности обратных вызовов (callbacks). Они предоставляют более удобный и гибкий способ организации асинхронного кода, делая его более читаемым и легким в управлении. Основные причины появления промисов: 1️⃣ Улучшение читаемости асинхронного кода: Позволяют писать асинхронный код, который выглядит более последовательным и легко читается, по сравнению с вложенными обратными вызовами. 2️⃣ Упрощение обработки ошибок: Вместо того, чтобы обрабатывать ошибки в каждом обратном вызове, они позволяют использовать единую конструкцию catch для перехвата ошибок в любом месте цепочки промисов. 3️⃣ Синхронизация асинхронных операций: Упрощают выполнение нескольких асинхронных операций параллельно и обработку их результатов с помощью методов Promise.all, Promise.race, Promise.allSettled и Promise.any. 4️⃣ Стандартизация асинхронного кода: Стандартизируют способ работы с асинхронностью, предоставляя универсальный интерфейс для различных асинхронных операций, таких как работа с сетевыми запросами, таймерами и т.д. Как работают промисы Может находиться в одном из трех состояний: - Ожидание (pending): начальное состояние, не выполнено и не отклонено. - Выполнено (fulfilled): операция завершена успешно. - Отклонено (rejected): операция завершена с ошибкой. Когда он переходит из состояния ожидания в состояние выполнено или отклонено, он вызывает соответствующие обработчики, добавленные с помощью методов then, catch и finally. Эти методы возвращают новый промис, позволяя строить цепочки промисов. Пример:

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("данные получены"), 1000);
});

promise
  .then(result => {
    console.log(result); // "данные получены"
    return result + " обработаны";
  })
  .then(result => {
    console.log(result); // "данные получены обработаны"
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    console.log("Промис завершил выполнение");
  });

Промисы существенно улучшили способ работы с асинхронностью, предоставив более мощный и гибкий инструмент для организации асинхронного кода по сравнению с традиционными обратными вызовами. Они сделали код более читабельным, упростили обработку ошибок и синхронизацию асинхронных операций. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Как работает settimeout ? Спросят с вероятностью 10% Функция setTimeout используется для выполнения кода или функции спустя заданный интервал времени, однократно. Она является частью Web API в браузерах и глобального объекта global в Node.js, что делает её доступной для использования в любом окружении. Синтаксис

let timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
let timeoutID = setTimeout(functionCode[, delay]);

- function: Будет вызвана после задержки. - functionCode: Строка кода для выполнения (использование этой формы не рекомендуется по соображениям безопасности). - delay: Задержка в миллисекундах, после которой будет выполнена функция. Если не указать, по умолчанию будет использовано значение 0. - arg1, arg2, ...: Аргументы, которые будут переданы в функцию при её вызове. Пример:

function sayHello() {
  console.log('Привет!');
}

// Вызывает функцию sayHello после задержки в 2000 миллисекунд (2 секунды)
setTimeout(sayHello, 2000);

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

let timerId = setTimeout(sayHello, 2000);

// Отменяет выполнение
clearTimeout(timerId);

Особенности поведения - Минимальная задержка: В HTML5 спецификация предусматривает минимальную задержку в 4ms для вложенных таймеров и в некоторых других случаях, что может повлиять на ожидаемое время выполнения. - Задержка в неактивных вкладках: Браузеры могут изменять поведение таймеров для неактивных вкладок для оптимизации производительности и энергопотребления. Это может привести к значительно большей задержке, чем указано. - Асинхронность: setTimeout не блокирует выполнение кода, который следует за ним. Он лишь запланирует выполнение функции на будущее, позволяя остальному коду продолжать выполняться без ожидания. setTimeout широко используется для создания задержек, анимаций, отложенного выполнения кода (например, для дебаунсинга ввода пользователя) и решения других задач, где необходимо управление временем выполнения. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Чем var отличается от const ? Спросят с вероятностью 23% Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде. Область видимости (Scope) - var: Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена. - const: Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена. Переназначение и изменение - var: Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение. - const: Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений. Поднятие (Hoisting) - var: Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение undefined. - const: Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона". Инициализация - var: Эти переменные можно объявить без инициализации, и их начальное значение будет undefined. - const: Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке. Примеры:

var varVariable = 1;
varVariable = 2; // Переназначение возможно

const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку

if (true) {
  var varScope = "доступна везде в функции";
  const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена

Использование var, let и const зависит от нужд разработки. var предоставляет функциональную область видимости и большую гибкость за счёт возможности переназначения, но это может привести к ошибкам из-за непреднамеренных изменений или переназначений. const используется для объявления переменных, значение которых не должно изменяться, что помогает предотвратить случайное переназначение и делает код более предсказуемым. Сейчас let и const являются предпочтительными для блочной области видимости и контроля за изменяемостью данных. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Какая бывает работа с тестами ? Спросят с вероятностью 10% Работа с тестами — это процесс проверки того, что ваш код работает корректно и делает именно то, что от него ожидается. Оно помогает обнаружить ошибки и недочеты в программе до того, как она будет запущена в производство или передана пользователям. Существует несколько типов тестирования, каждый из которых ориентирован на проверку различных аспектов приложения. Типы: 1️⃣ Модульное тестирование (Unit Testing): Проверка отдельных модулей или компонентов программы на корректность выполнения их функций. Каждый тест оценивает работу отдельной части кода в изоляции от остальной программы. 2️⃣ Интеграционное тестирование (Integration Testing): Проверка взаимодействия между различными модулями или внешними системами и сервисами. Цель — убедиться, что компоненты системы корректно работают вместе. 3️⃣ Функциональное тестирование (Functional Testing): Проверка того, что функциональные требования, предъявляемые к программе, выполняются. Эти тесты фокусируются на пользовательских сценариях и возможностях программы. 4️⃣ Тестирование производительности (Performance Testing): Оценка скорости, стабильности и масштабируемости приложения под нагрузкой. 5️⃣ Тестирование безопасности (Security Testing): Проверка на наличие уязвимостей, которые могут быть использованы для несанкционированного доступа или повреждения данных. Инструменты Для автоматизации процесса тестирования существует множество инструментов и библиотек. Выбор инструмента зависит от языка программирования, среды разработки и конкретных требований проекта. Например: ✅ Mocha, Jest, и Cypress для JavaScript. Процесс 1️⃣ Планирование: Определение целей тестирования, выбор инструментов и методик. 2️⃣ Написание тестов: Создание тестовых сценариев, которые проверяют различные аспекты работы кода. 3️⃣ Выполнение тестов: Запуск тестов и сбор результатов. 4️⃣ Анализ результатов: Интерпретация результатов тестирования, выявление и исправление ошибок. 5️⃣ Рефакторинг: Улучшение структуры и качества кода без изменения его функциональности на основе результатов тестирования. 6️⃣ Регрессионное тестирование: Повторное тестирование после изменений, чтобы убедиться, что исправления не привели к новым ошибкам. Преимущества ✅ Улучшение качества кода: Помогают обнаружить и исправить ошибки на ранних этапах разработки. ✅ Документация: Могут служить формой документации, показывая, как предполагается использовать код. ✅ Уверенность в коде: Позволяют разработчикам вносить изменения в код, не боясь случайно нарушить его работу. ✅ Упрощение рефакторинга: Наличие их облегчает рефакторинг кода, поскольку они могут быстро показать, сломалось ли что-то после внесения изменений. Тестирование — это неотъемлемая часть процесса разработки ПО, позволяющая повысить его качество, надежность и безопасность. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Что знаешь о примитивных типах данных ? Спросят с вероятностью 7% Примитивные типы данных — это данные, которые не являются объектами и не имеют методов. Всего существует семь типов: 1️⃣ String (Строка): Представляет собой последовательность символов, используется для работы с текстом. Пример: "Привет, мир!". 2️⃣ Number (Число): Представляет собой числовое значение. Числа могут быть как целыми, так и с плавающей точкой. Примеры: 42, 3.14. Включает в себя специальные числовые значения, такие как Infinity, -Infinity и NaN (Not-a-Number — результат некорректной математической операции). 3️⃣ BigInt: Представляет целые числа произвольной длины. Был введен для работы с числами, размер которых превышает пределы Number. Пример: 9007199254740991n. 4️⃣ Boolean (Логический тип): Имеет два значения: true (истина) и false (ложь), используется для логических операций. 5️⃣ undefined: Обозначает отсутствие значения. Переменная, которой не было присвоено значение, автоматически получает значение undefined. 6️⃣ null: Также обозначает отсутствие значения. В отличие от undefined, null обычно присваивается переменной явно в качестве индикатора того, что значение отсутствует. 7️⃣ Symbol: Представляет уникальный и неизменяемый идентификатор, часто используется для создания уникальных ключей объектов. Каждый созданный Symbol гарантированно уникален. Особенности примитивных типов ✅ Неизменяемость: Значения не могут быть изменены. Операции над примитивными значениями возвращают новые значения, но не изменяют исходные. ✅ Сравнение по значению: Сравниваются по значению. Два значения считаются равными, если они имеют одинаковый тип и значение. ✅ Преобразование типов: Автоматически преобразует примитивные типы данных при необходимости (например, при арифметических операциях или конкатенации строк). Работа с примитивными типами Хотя они и не имеют методов, позволяет временно оборачивать их в объекты-обертки (например, new String(), new Number(), new Boolean()), чтобы предоставить доступ к различным методам и свойствам, таким как .length для строк или .toFixed() для чисел. Однако это редко используется на практике, поскольку примитивные значения и так автоматически преобразуются в объекты при доступе к их свойствам или методам. Примитивные типы данных являются основой для создания более сложных структур данных и логики. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Канал Frontend Tests & Tasks разыгрывает среди подписчиков 10 подписок Premium Telegram ⭐ Друзья,у нас есть для вас очень крутые новости!У ребят в канале проводится розыгрыш, главным призом в котором будет подписка на Premium Telegram ⭐ 🥇 1⃣ 🔤🔤🔤🔤 🥈 6⃣ 🔤🔤🔤🔤🔤🔤🔤 🥉 🔤 🔤🔤🔤🔤🔤🔤 10 призовых мест , в которых - 8 подписок на 3 месяца, и по одной подписке на год и 6 месяцев. Условия участия максимально простые - нужно быть подписанным на телеграмм канал и чат Жми на кнопку «Участвовать» внизу поста и следуй инструкции бота.

Что такое семантика ? Спросят с вероятностью 13% Семантика в контексте веб-разработки относится к использованию HTML-тегов в соответствии с их предназначением и значением. Это означает выбор подходящих тегов для разметки различных частей контента на веб-странице таким образом, чтобы они отражали его смысл и структуру. Такая разметка помогает не только людям, но и поисковым системам и другим машинным агентам понимать структуру и содержание веб-страницы, что влияет на доступность сайта и его поисковую оптимизацию (SEO). Примеры в HTML: - <article>: Для независимого контента, который имеет смысл сам по себе (например, статья в блоге). - <aside>: Для контента, слабо связанного с основным содержимым страницы (например, боковая панель). - <details>: Для контента, который можно скрыть или показать по запросу пользователя. - <figcaption>: Для подписи к изображению в элементе <figure>. - <figure>: Для самостоятельных элементов, таких как изображения, диаграммы, коды, которые сопровождаются подписью. - <footer>: Для нижнего колонтитула документа или раздела. - <header>: Для верхнего колонтитула документа или раздела. - <main>: Для основного содержимого документа. - <mark>: Для выделения частей текста. - <nav>: Для навигационных ссылок. - <section>: Для разделов содержимого, которые связаны с определенной темой. - <summary>: Для заголовка элемента <details>. Значение семантики: ✅ Доступность: Делает веб-контент более доступным для людей с ограниченными возможностями, использующих вспомогательные технологии, такие как экранные читалки, поскольку эти технологии могут интерпретировать структуру и предоставлять контент в более понятной форме. ✅ SEO: Поисковые системы используют ее для лучшего понимания структуры и содержания веб-страницы, что может улучшить индексацию и ранжирование сайта. ✅ Улучшенная поддержка и разработка: Делает код более читаемым и легким для понимания, что облегчает сопровождение и дальнейшую разработку сайта. Семантика в веб-разметке означает использование элементов HTML в соответствии с их смыслом и назначением. Это способствует созданию более доступного, SEO-оптимизированного и легкого для поддержки веб-контента. Включение семантических элементов в разметку веб-страницы является лучшей практикой. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Какие есть компоненты ? Спросят с вероятностью 7% Компоненты являются основными строительными блоками для построения пользовательских интерфейсов. Они позволяют разбивать интерфейс на независимые, переиспользуемые части, которые можно разрабатывать, тестировать и поддерживать отдельно друг от друга. Компоненты в React могут быть как простыми и представлять собой один элемент интерфейса (например, кнопку или поле ввода), так и сложными и включать в себя другие компоненты, формируя иерархию. Типы: 1️⃣ Функциональные компоненты: - Самый простой способ определить компонент. - Это JavaScript-функции, которые принимают пропсы (свойства) в качестве аргумента и возвращают элемент, описывающий, что должно отображаться на экране. - С появлением хуков, функциональные компоненты получили возможность использовать состояние и другие возможности React, аналогичные классовым компонентам.

      function Welcome(props) {
     return <h1>Привет, {props.name}</h1>;
   }

2️⃣ Классовые компоненты: - Перед введением хуков классовые компоненты были единственным способом использования состояния и жизненного цикла компонентов . - Они определяются путем расширения React.Component и требуют метода render(), который возвращает элемент React.

      class Welcome extends React.Component {
     render() {
       return <h1>Привет, {this.props.name}</h1>;
     }
   }

Пропсы и состояние - Пропсы (Props): Коротко для "свойств", пропсы передаются от родительских компонентов к дочерним. Они неизменяемы в пределах компонента, что означает, что дочерний компонент не может изменять пропсы, полученные от родителя. - Состояние (State): Состояние позволяет компонентам реагировать на ввод пользователя, серверные запросы и любые другие действия, сохраняя и изменяя данные во времени. В отличие от пропсов, состояние управляется и изменяется внутри самого компонента. Жизненный цикл компонента Классовые компоненты имеют несколько "жизненных циклов" — методов, которые автоматически вызываются в разные моменты жизни компонента, такие как монтирование (компонент вставляется в DOM), обновление (компонент реагирует на изменения пропсов или состояния) и размонтирование (компонент удаляется из DOM). Хуки позволяют использовать аналогичные возможности в функциональных компонентах. Компоненты обеспечивают эффективный способ организации пользовательского интерфейса, делая код более читабельным, легким для тестирования и поддержки. Они позволяют разработчикам строить сложные приложения из простых частей, облегчая разработку и обеспечивая лучший пользовательский опыт. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

У моего хорошего знакомого тоже есть канал с разбором вопросов с собеседований — @prog_way_blog Ведёт канал Денис, разработчик с опытом менторинга и подготовки к собеседованиям более 4 лет. В канале он расписывает сложную теорию простым языком. У нас похожий контент, вам точно понравится) @prog_way_blog

Какие есть компоненты ? Спросят с вероятностью 7% Компоненты являются основными строительными блоками для построения пользовательских интерфейсов. Они позволяют разбивать интерфейс на независимые, переиспользуемые части, которые можно разрабатывать, тестировать и поддерживать отдельно друг от друга. Компоненты в React могут быть как простыми и представлять собой один элемент интерфейса (например, кнопку или поле ввода), так и сложными и включать в себя другие компоненты, формируя иерархию. Типы: 1️⃣ Функциональные компоненты: - Самый простой способ определить компонент. - Это JavaScript-функции, которые принимают пропсы (свойства) в качестве аргумента и возвращают элемент, описывающий, что должно отображаться на экране. - С появлением хуков, функциональные компоненты получили возможность использовать состояние и другие возможности React, аналогичные классовым компонентам.

      function Welcome(props) {
     return <h1>Привет, {props.name}</h1>;
   }

2️⃣ Классовые компоненты: - Перед введением хуков классовые компоненты были единственным способом использования состояния и жизненного цикла компонентов . - Они определяются путем расширения React.Component и требуют метода render(), который возвращает элемент React.

      class Welcome extends React.Component {
     render() {
       return <h1>Привет, {this.props.name}</h1>;
     }
   }

Пропсы и состояние - Пропсы (Props): Коротко для "свойств", пропсы передаются от родительских компонентов к дочерним. Они неизменяемы в пределах компонента, что означает, что дочерний компонент не может изменять пропсы, полученные от родителя. - Состояние (State): Состояние позволяет компонентам реагировать на ввод пользователя, серверные запросы и любые другие действия, сохраняя и изменяя данные во времени. В отличие от пропсов, состояние управляется и изменяется внутри самого компонента. Жизненный цикл компонента Классовые компоненты имеют несколько "жизненных циклов" — методов, которые автоматически вызываются в разные моменты жизни компонента, такие как монтирование (компонент вставляется в DOM), обновление (компонент реагирует на изменения пропсов или состояния) и размонтирование (компонент удаляется из DOM). Хуки позволяют использовать аналогичные возможности в функциональных компонентах. Компоненты обеспечивают эффективный способ организации пользовательского интерфейса, делая код более читабельным, легким для тестирования и поддержки. Они позволяют разработчикам строить сложные приложения из простых частей, облегчая разработку и обеспечивая лучший пользовательский опыт. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

❓ Какие есть методы life cycle ? Спросят с вероятностью 7% Жизненный цикл компонента описывает серию событий, которые происходят с момента его создания до момента его удаления из DOM. Эти методы предоставляют хуки, которые позволяют выполнять код в определенные моменты жизни компонента. Важно отметить, что методы жизненного цикла доступны только в классовых компонентах. В функциональных компонентах для работы с ним используются хуки, например, useEffect. Монтирование Вызываются в следующем порядке при создании компонента и его добавлении в DOM: 1️⃣ constructor(props) - Конструктор компонента, где можно инициализировать состояние и привязывать методы. 2️⃣ static getDerivedStateFromProps(props, state) - Вызывается непосредственно перед рендерингом как при первом монтировании, так и при последующих обновлениях. Используется для обновления состояния в ответ на изменение пропсов. 3️⃣ render() - Единственный обязательный метод в классовом компоненте. Описывает, что отображается на экране. 4️⃣ componentDidMount() - Вызывается сразу после монтирования (вставки компонента в DOM). Идеальное место для инициализации запросов к удаленным данным. Обновление Вызываются при обновлении компонента из-за изменений в пропсах или состоянии: 1️⃣ static getDerivedStateFromProps(props, state) - Так же, как и при монтировании. 2️⃣ shouldComponentUpdate(nextProps, nextState) - Позволяет оптимизировать приложение, предотвращая ненужные обновления. 3️⃣ render() - Вызывается для повторного рендеринга в ответ на изменения. 4️⃣ getSnapshotBeforeUpdate(prevProps, prevState) - Вызывается перед тем, как измененный компонент будет отрисован в DOM. Используется для сохранения информации о DOM (например, позиции скролла). 5️⃣ componentDidUpdate(prevProps, prevState, snapshot) - Вызывается сразу после обновления. Не вызывается при первом рендере. Используется для выполнения сетевых запросов в ответ на изменения состояния или пропсов. Размонтирование 1️⃣ componentWillUnmount() - Вызывается перед удалением компонента из DOM. Используется для выполнения любой необходимой очистки, такой как отмена таймеров, отмена запросов к сети или удаление подписок. Ошибки 1️⃣ static getDerivedStateFromError(error) - Используется для отлавливания ошибок во время рендеринга дочерних компонентов. 2️⃣ componentDidCatch(error, info) - Используется для регистрации ошибок, произошедших во время рендеринга, в методах жизненного цикла или в конструкторах дочерних компонентов. Эти методы позволяют контролировать поведение компонентов на различных этапах их жизни, оптимизировать производительность и обрабатывать ошибки. ➡ Примеры ответов ➡ Список всех вопросов на Frontend Developer