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

С помощью чего скопировал бы объект ?
Спросят с вероятностью 7%

Есть несколько способов скопировать объект. Важно понимать разницу между поверхностным (shallow) и глубоким (deep) копированием. Поверхностная копия копирует только сам объект и его непосредственные свойства, в то время как глубокая копия копирует весь объект и все его вложенные объекты.

Поверхностное копирование

1️⃣Object.assign

Метод Object.assign копирует все перечисляемые свойства из одного или более исходных объектов в целевой объект.

const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
console.log(copy); // { a: 1, b: 2 }

2️⃣Оператор расширения (spread operator)

Оператор расширения (...) также можно использовать для создания поверхностной копии объекта.

const original = { a: 1, b: 2 };
const copy = { ...original };
console.log(copy); // { a: 1, b: 2 }

Глубокое копирование

1️⃣JSON.parse и JSON.stringify

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

const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));
console.log(copy); // { a: 1, b: { c: 2 } }

2️⃣Рекурсивная функция

Можно написать свою рекурсивную функцию для глубокого копирования объекта.

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  if (Array.isArray(obj)) {
    const arrCopy = [];
    for (let i = 0; i < obj.length; i++) {
      arrCopy[i] = deepCopy(obj[i]);
    }
    return arrCopy;
  }

  const copy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

const original = { a: 1, b: { c: 2 } };
const copy = deepCopy(original);
console.log(copy); // { a: 1, b: { c: 2 } }

3️⃣Библиотеки для глубокого копирования

Существуют библиотеки, такие как lodash, которые предоставляют готовые функции для глубокого копирования объектов.

const _ = require('lodash');
const original = { a: 1, b: { c: 2 } };
const copy = _.cloneDeep(original);
console.log(copy); // { a: 1, b: { c: 2 } }

Для поверхностного копирования объектов можно использовать Object.assign или оператор расширения (...). Для глубокого копирования можно использовать JSON.parse и JSON.stringify, написать рекурсивную функцию или воспользоваться библиотекой, такой как lodash.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

Какие плюсы есть у ts ?
Спросят с вероятностью 7%

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

1️⃣Статическая типизация

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

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

// Ошибка на этапе компиляции, если передать нечисловые значения
// add('1', '2');

2️⃣Улучшенная поддержка инструментов и автодополнение

Статическая типизация и декларации типов позволяют редакторам кода (например, Visual Studio Code) предоставлять улучшенное автодополнение, подсказки и рефакторинг.

interface User {
  id: number;
  name: string;
}

const user: User = {
  id: 1,
  name: 'Alice'
};

// Автодополнение будет предлагать поля 'id' и 'name' для объекта 'user'

3️⃣Рефакторинг и поддержка кода

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

4️⃣Совместимость с JavaScript

Является надстройкой над JavaScript, поэтому любой корректный JavaScript-код также является корректным TypeScript-кодом. Это позволяет постепенно внедрять TypeScript в существующие проекты.

// Это корректный TypeScript-код, так как он также является корректным JavaScript-кодом
const message = "Hello, TypeScript!";
console.log(message);

5️⃣Расширенные возможности OOP

Добавляет возможности объектно-ориентированного программирования (ООП) к JavaScript, такие как классы, интерфейсы, абстрактные классы и модификаторы доступа (public, private, protected).

class Animal {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  public speak(): void {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  public speak(): void {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // Rex barks.

6️⃣Система модулей

Поддерживает современные стандарты модулей (ES6 и CommonJS), что упрощает организацию и управление зависимостями в проекте.

// module.ts
export function greet(name: string): string {
  return `Hello, ${name}`;
}

// main.ts
import { greet } from './module';

console.log(greet('TypeScript'));

7️⃣Поддержка современных возможностей JavaScript

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

8️⃣Сообщество и экосистема

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

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

Что такое call, apply и bind ?
Спросят с вероятностью 7%

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

1️⃣call

Вызывает функцию с указанным значением this и аргументами, переданными по отдельности.

Синтаксис:

func.call(thisArg, arg1, arg2, ...);

Пример:

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const user = { name: 'Alice' };

greet.call(user, 'Hello', '!'); // Hello, Alice!

2️⃣apply

Похож на call, но аргументы передаются в виде массива.

Синтаксис:

func.apply(thisArg, [arg1, arg2, ...]);

Пример:

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const user = { name: 'Alice' };

greet.apply(user, ['Hello', '!']); // Hello, Alice!

3️⃣bind

Создаёт новую функцию, которая при вызове будет иметь указанный контекст this и аргументы, переданные при создании. Он не вызывает функцию сразу, а возвращает новую функцию.

Синтаксис:

const boundFunction = func.bind(thisArg, arg1, arg2, ...);

Пример:

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const user = { name: 'Alice' };

const boundGreet = greet.bind(user, 'Hello');
boundGreet('!'); // Hello, Alice!

Сравнение методов

1️⃣`call` и `apply`:
✅Используются для немедленного вызова функции с заданным this.
✅call принимает аргументы по отдельности.
✅apply принимает аргументы в виде массива.

7️⃣`bind`:
✅Возвращает новую функцию с заданным this, которую можно вызвать позже.
✅Полезен для создания функции с постоянным контекстом.

Краткий ответ:

✅`call` вызывает функцию с указанным значением this и аргументами, переданными по отдельности.
✅`apply` вызывает функцию с указанным значением this и аргументами, переданными в виде массива.
✅`bind` создаёт новую функцию с указанным значением this и аргументами, которую можно вызвать позже.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

Что известно про утилити типы ?
Спросят с вероятностью 7%

Утилити типы (utility types) — это встроенные типы, которые помогают манипулировать другими типами и упрощают работу с ними. Они позволяют изменять, расширять, ограничивать и комбинировать типы, что делает код более гибким и безопасным. Вот некоторые из наиболее часто используемых утилити и их примеры:

1️⃣Partial

Делает все свойства типа T необязательными.

interface User {
  id: number;
  name: string;
  email: string;
}

const updateUser = (id: number, userUpdates: Partial<User>) => {
  // Обновление пользователя
};

updateUser(1, { name: 'Alice' }); // Можно передать только часть свойств

2️⃣Required

Делает все свойства типа T обязательными.

interface User {
  id?: number;
  name?: string;
  email?: string;
}

const user: Required<User> = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
}; // Все свойства должны быть указаны

3️⃣Readonly

Делает все свойства типа T только для чтения.

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Readonly<User> = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
};

user.id = 2; // Ошибка: свойство id доступно только для чтения

4️⃣Pick

Создает тип с набором свойств K из типа T.

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Pick<User, 'id' | 'name'> = {
  id: 1,
  name: 'Alice'
}; // Только свойства id и name

5️⃣Omit

Создает тип, исключающий свойства K из типа T.

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Omit<User, 'email'> = {
  id: 1,
  name: 'Alice'
}; // Все свойства, кроме email

6️⃣Record

Создает тип объекта, ключи которого из K, а значения типа T.

type Roles = 'admin' | 'user' | 'guest';

const roles: Record<Roles, string> = {
  admin: 'Admin User',
  user: 'Regular User',
  guest: 'Guest User'
};

7️⃣Exclude

Создает тип, исключая из T те типы, которые находятся в U.

type T = 'a' | 'b' | 'c';
type U = 'a';

type Result = Exclude<T, U>; // 'b' | 'c'

8️⃣Extract

Создает тип, включающий только те типы из T, которые также находятся в U.

type T = 'a' | 'b' | 'c';
type U = 'a' | 'c';

type Result = Extract<T, U>; // 'a' | 'c'

9️⃣NonNullable

Исключает null и undefined из типа T.

type T = string | number | null | undefined;

type NonNullableT = NonNullable<T>; // string | number

🔟ReturnType

Получает тип возвращаемого значения функции T.

function getUser() {
  return { id: 1, name: 'Alice' };
}

type User = ReturnType<typeof getUser>; // { id: number, name: string }

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

Основные утилити

1️⃣Partial: Делает все свойства типа необязательными.

      interface User {
     id: number;
     name: string;
     email: string;
   }

   const updateUser = (id: number, userUpdates: Partial<User>) => {
     // Обновление пользователя
   };

   updateUser(1, { name: 'Alice' }); // Можно передать только часть свойств
   

2️⃣Required: Делает все свойства типа обязательными.

      interface User {
     id?: number;
     name?: string;
     email?: string;
   }

   const user: Required<User> = {
     id: 1,
     name: 'Alice',
     email: 'alice@example.com'
   }; // Все свойства должны быть указаны
   

3️⃣Readonly: Делает все свойства типа только для чтения.

      interface User {
     id: number;
     name: string;
     email: string;
   }

   const user: Readonly<User> = {
     id: 1,
     name: 'Alice',
     email: 'alice@example.com'
   };

   user.id = 2; // Ошибка: свойство id доступно только для чтения

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

Зачем нужна функция iife ?
Спросят с вероятностью 7%

IIFE (Immediately Invoked Function Expression) — это функция, которая определяется и вызывается немедленно после ее создания. IIFE полезны по нескольким причинам:

Основные преимущества

1️⃣Изоляция кода:
Создают новую область видимости, что помогает избежать загрязнения глобального пространства имен. Это особенно полезно при работе с переменными, которые могут конфликтовать с другими частями кода.

2️⃣Создание приватных переменных:
Переменные, объявленные внутри IIFE, не доступны снаружи, что делает их приватными. Это помогает защитить данные и функции от нежелательного доступа или модификации.

3️⃣Предотвращение конфликтов переменных:
Поскольку IIFE создают собственную область видимости, переменные внутри них не конфликтуют с переменными в других частях программы.

4️⃣Инициализация кода:
IIFE часто используются для выполнения однократной инициализации, которая должна произойти сразу после загрузки кода.

Синтаксис IIFE

Может быть объявлена с помощью двух основных синтаксисов:

1️⃣Анонимная функция

(function() {
  console.log('This is an IIFE');
})();

2️⃣Функция с именем

(function namedIIFE() {
  console.log('This is a named IIFE');
})();

Примеры

1️⃣Изоляция переменных

var i = 10;

(function() {
  var i = 20;
  console.log(i); // 20
})();

console.log(i); // 10

В этом примере переменная i внутри IIFE не конфликтует с переменной i в глобальной области видимости.

2️⃣Создание приватных переменных

var counter = (function() {
  var count = 0;

  return {
    increment: function() {
      count++;
      return count;
    },
    reset: function() {
      count = 0;
    }
  };
})();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
counter.reset();
console.log(counter.increment()); // 1

Здесь переменная count является приватной и доступна только через методы increment и reset.

3️⃣Инициализация кода

(function() {
  console.log('IIFE for initialization');
  // Initialization code here
})();

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

Что такое ssr ?
Спросят с вероятностью 7%

SSR (Server-Side Rendering) — это технология рендеринга веб-страниц на сервере, а не на клиенте. В контексте современных JavaScript-фреймворков, таких как React или Vue.js, это означает, что HTML-код страницы генерируется на сервере и отправляется в браузер уже готовым для отображения. Это отличается от традиционного подхода клиентского рендеринга (Client-Side Rendering, CSR), где HTML генерируется непосредственно в браузере с использованием JavaScript.

Основные особенности и преимущества

1️⃣Улучшение производительности и скорости загрузки:
✅Первичный контент: Поскольку HTML генерируется на сервере, браузеры могут отображать готовый контент без необходимости ждать загрузки и выполнения JavaScript.
✅SEO: Поисковые системы лучше индексируют страницы, так как весь контент доступен сразу.

2️⃣Лучшая поддержка SEO:
✅Статические HTML-страницы, генерируемые сервером, легче индексируются поисковыми системами, что улучшает видимость сайта в поисковых результатах.

3️⃣Улучшенное восприятие пользователем (First Paint):
✅Пользователи видят контент быстрее, так как сервер отправляет уже готовую HTML-разметку.

Как он работает

1️⃣Запрос от клиента:
✅Браузер отправляет запрос на сервер для получения страницы.

2️⃣Генерация HTML на сервере:
✅Сервер запускает JavaScript-код для рендеринга компонента или всей страницы.
✅Сервер генерирует HTML-код и отправляет его клиенту.

3️⃣Отображение страницы в браузере:
✅Браузер получает готовую HTML-страницу и отображает её.
✅Затем JavaScript-фреймворк (например, React или Vue) «гидрирует» страницу, то есть связывает готовую HTML-разметку с JavaScript-кодом, чтобы сделать страницу интерактивной.

Next.js — популярный фреймворк для React, который поддерживает SSR из коробки.

1️⃣Установка Next.js:

      npx create-next-app my-ssr-app
   cd my-ssr-app
   npm run dev
   

2️⃣Создание страницы с SSR:

      // pages/index.js
   import React from 'react';

   const Home = ({ data }) => {
     return (
       <div>
         <h1>Server-Side Rendering Example</h1>
         <p>{data.message}</p>
       </div>
     );
   };

   // Эта функция вызывается на сервере при каждом запросе к странице
   export async function getServerSideProps() {
     // Выполняем запрос к API или базе данных
     const res = await fetch('https://api.example.com/data');
     const data = await res.json();

     // Передаем данные как пропсы в компонент
     return {
       props: {
         data
       }
     };
   }

   export default Home;
   

В этом примере Next.js использует функцию getServerSideProps для получения данных на сервере перед рендерингом страницы. Эти данные затем передаются в компонент как пропсы и используются для генерации HTML.

SSR (Server-Side Rendering) — это процесс рендеринга веб-страниц на сервере, а не в браузере. Это улучшает производительность, SEO и восприятие пользователем за счет отправки готового HTML-кода с сервера.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

Канал приближается к 20к подписчиков, а здесь так и нет нормального контент плана 😒

Ищу талантливых журналистов, способных писать клевые и авторские посты на тему "Карьера в IT" и все что с этим связано: поиск работы, повышение з/п, разбор кейсов, переезд в другие страны по рабочим визам, аналитика, исследование рынка и т.д.

Важно глубокое понимание IT индустрии, вы должны иметь опыт работы в ней

Если интересно отправьте мне свое резюме @kivaiko

Что такое всплытие ?
Спросят с вероятностью 7%

Всплытие (или бабблинг, event bubbling) — это механизм обработки событий в веб-разработке, при котором событие, происходящее на одном элементе, сначала обрабатывается этим элементом, а затем последовательно передаётся (всплывает) вверх по дереву DOM к его родительским элементам вплоть до корневого элемента (обычно document).

Как работает всплытие событий

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

Рассмотрим пример с вложенными элементами и обработчиками событий:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Bubbling</title>
</head>
<body>
  <div id="parent" style="padding: 20px; background-color: lightblue;">
    Parent
    <div id="child" style="padding: 20px; background-color: lightcoral;">
      Child
    </div>
  </div>

  <script>
    document.getElementById('parent').addEventListener('click', () => {
      alert('Parent clicked!');
    });

    document.getElementById('child').addEventListener('click', () => {
      alert('Child clicked!');
    });
  </script>
</body>
</html>

В этом примере, если вы кликнете на элемент #child, вы увидите два алерта: сначала "Child clicked!", затем "Parent clicked!". Это происходит потому, что событие клика всплывает от элемента #child к его родителю #parent.

Управление всплытием

Иногда нужно предотвратить всплытие события, чтобы оно не передавалось родительским элементам. Это можно сделать с помощью метода event.stopPropagation().

<script>
  document.getElementById('parent').addEventListener('click', () => {
    alert('Parent clicked!');
  });

  document.getElementById('child').addEventListener('click', (event) => {
    alert('Child clicked!');
    event.stopPropagation(); // предотвращает всплытие события
  });
</script>

Теперь, если вы кликнете на элемент #child, вы увидите только алерт "Child clicked!", так как всплытие события было остановлено.

Захват событий

Помимо всплытия, существует другой этап обработки событий, называемый захватом (event capturing). Событие сначала идет сверху вниз от корневого элемента к цели (начиная с document и заканчивая целевым элементом), а затем поднимается обратно вверх (всплытие).

Чтобы добавить обработчик на этапе захвата, нужно передать true в качестве третьего аргумента в addEventListener:

<script>
  document.getElementById('parent').addEventListener('click', () => {
    alert('Parent clicked!');
  }, true);

  document.getElementById('child').addEventListener('click', () => {
    alert('Child clicked!');
  }, true);
</script>

Всплытие событий — это механизм, при котором событие сначала обрабатывается целевым элементом, а затем передается его родителям по дереву DOM. Чтобы остановить всплытие, можно использовать event.stopPropagation().

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

В чем преимущество методологии bem ?
Спросят с вероятностью 7%

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

1️⃣Четкая структура и семантика

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

<div class="button button--primary">
  <span class="button__text">Click me</span>
</div>

2️⃣button — блок
✅button__text — элемент
✅button--primary — модификатор

2️⃣Изоляция компонентов

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

<div class="header">
  <div class="header__logo"></div>
  <div class="header__nav"></div>
</div>

<div class="footer">
  <div class="footer__logo"></div>
</div>

Классы .header__logo и .footer__logo не пересекаются и не влияют друг на друга.

3️⃣Легкость в переиспользовании

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

<div class="card">
  <div class="card__title">Title</div>
  <div class="card__content">Content</div>
</div>

<div class="profile">
  <div class="card">
    <div class="card__title">Profile Title</div>
    <div class="card__content">Profile Content</div>
  </div>
</div>

4️⃣Удобство в поддержке и масштабировании

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

5️⃣Унификация стилей

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

Пример
HTML:

<div class="menu">
  <div class="menu__item menu__item--active">Home</div>
  <div class="menu__item">About</div>
  <div class="menu__item">Contact</div>
</div>

CSS:

.menu {
  background-color: #fff;
  border: 1px solid #ccc;
}

.menu__item {
  padding: 10px;
  color: #333;
}

.menu__item--active {
  background-color: #007bff;
  color: #fff;
}

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

Что такое схлопывание границ ?
Спросят с вероятностью 7%

Схлопывание границ (или схлопывание отступов, margin collapsing) — это поведение CSS, при котором вертикальные отступы (margins) соседних блоков могут быть объединены (схлопнуты) в один отступ. Это позволяет избежать удвоения вертикальных отступов между элементами и упрощает их управление.

Основные правила

1️⃣Смежные вертикальные отступы:
Когда два вертикальных отступа соседних блоков соприкасаются, они схлопываются в один. Размер схлопнутого отступа равен наибольшему из двух схлопывающихся отступов.

      <div class="block1"></div>
   <div class="block2"></div>

В данном случае итоговый отступ между .block1 и .block2 будет 30px, а не 50px.

2️⃣Родитель и первый/последний дочерний элемент:
Если первый или последний дочерний элемент имеет вертикальный отступ, он схлопывается с отступом родительского элемента, если между ними нет границ, внутреннего отступа или контента.

      <div class="parent">
     <div class="child"></div>
   </div>

В этом случае итоговый отступ сверху для .child будет 20px, так как отступ .child схлопывается с отступом родителя.

3️⃣Пустые блоки:
Если блок не содержит контента, границ или внутреннего отступа, его вертикальные отступы также могут схлопываться.

Примеры

Схлопывание между соседними элементами

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

Итоговый отступ между .box1 и .box2 будет 30px.

Схлопывание границ родителя и первого/последнего дочернего элемента

<div class="container">
  <div class="content">Content</div>
</div>

Итоговый верхний отступ для .content будет 25px, так как отступы схлопываются.

Исключения и предотвращение схлопывания

✅Границы или внутренние отступы:
Если между элементами добавить границу или внутренний отступ, схлопывания не произойдет.

    .parent {
    padding-top: 1px;
  }
  

✅Flexbox и Grid:
Элементы, расположенные с помощью Flexbox или Grid, не схлопывают свои отступы.

✅Блоки с overflow: hidden, position: absolute, или display: inline-block:
Такие блоки не участвуют в схлопывании отступов.

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

Что такое usecontext ?
Спросят с вероятностью 7%

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

Как он работает

1️⃣Создание контекста

Для создания контекста используется функция createContext. Она возвращает объект контекста, который содержит два компонента: Provider и Consumer.

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

   const MyContext = createContext();
   

2️⃣Provider

Компонент Provider используется для предоставления значения контекста всем дочерним компонентам. Все компоненты внутри Provider могут получить доступ к значениям, переданным в value.

      const MyProvider = ({ children }) => {
     const [state, setState] = useState('Hello World');

     return (
       <MyContext.Provider value={{ state, setState }}>
         {children}
       </MyContext.Provider>
     );
   };
   

3️⃣useContext

Используется для подписки на контекст в функциональных компонентах. Он принимает объект контекста, возвращаемый из createContext, и возвращает текущее значение контекста.

      import React, { useContext } from 'react';

   const MyComponent = () => {
     const { state, setState } = useContext(MyContext);

     return (
       <div>
         <p>{state}</p>
         <button onClick={() => setState('New Value')}>Change Value</button>
       </div>
     );
   };
   

Полный пример

import React, { createContext, useState, useContext } from 'react';

// Создание контекста
const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [state, setState] = useState('Hello World');

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('New Value')}>Change Value</button>
    </div>
  );
};

const App = () => (
  <MyProvider>
    <MyComponent />
  </MyProvider>
);

export default App;

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

Какие главные особенности куки ?
Спросят с вероятностью 7%

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

1️⃣Хранение данных на клиенте
Хранятся на стороне клиента (в браузере) и используются для сохранения информации, которая может быть полезна при последующих посещениях веб-сайта.

2️⃣Ограниченный размер
Размер каждого куки ограничен (обычно до 4KB). Поэтому куки не подходят для хранения больших объемов данных.

3️⃣Срок действия (время жизни)
Каждая кука имеет время жизни, которое задается параметром Expires или Max-Age. По истечении этого времени кука автоматически удаляется браузером.

4️⃣Доступность по домену и пути
Доступны только для указанного домена и пути. Это позволяет ограничивать доступ к кукам для других страниц и поддоменов.

5️⃣Безопасность (HTTP-only и Secure)
✅HTTP-only: Куки, установленные с флагом HttpOnly, недоступны через JavaScript, что помогает защитить данные от XSS-атак.
✅Secure: Куки, установленные с флагом Secure, передаются только по защищенному HTTPS соединению.

6️⃣Передача с запросами
Автоматически отправляются серверу с каждым HTTP-запросом к соответствующему домену, что позволяет серверу узнавать пользователя и сохранять его сессию.

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

1️⃣Установка куки через JavaScript:

      document.cookie = "username=John Doe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
   

2️⃣Чтение куки через JavaScript:

      const getCookie = (name) => {
     const value = `; ${document.cookie}`;
     const parts = value.split(`; ${name}=`);
     if (parts.length === 2) return parts.pop().split(';').shift();
   }

   console.log(getCookie('username')); // 'John Doe'
   

3️⃣Удаление куки через JavaScript:

      document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
   

Примеры на сервере

1️⃣Установка куки на сервере (Node.js с Express):

      const express = require('express');
   const app = express();

   app.get('/', (req, res) => {
     res.cookie('username', 'John Doe', { maxAge: 900000, httpOnly: true });
     res.send('Cookie has been set');
   });

   app.listen(3000);
   

2️⃣Чтение куки на сервере (Node.js с Express):

      const express = require('express');
   const cookieParser = require('cookie-parser');
   const app = express();

   app.use(cookieParser());

   app.get('/', (req, res) => {
     const username = req.cookies.username;
     res.send(`Username is: ${username}`);
   });

   app.listen(3000);
   

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

Как проверить, что поле является массивом ?
Спросят с вероятностью 7%

Для проверки, является ли поле массивом, можно использовать несколько методов. Самый распространенный и рекомендуемый способ — это использование метода Array.isArray(). Этот метод проверяет, является ли переданное значение массивом, и возвращает true или false.

Пример

const arr = [1, 2, 3];
const notArr = "Hello";

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(notArr)); // false

Альтернативные методы

1️⃣Проверка с помощью instanceof:
Этот метод проверяет, является ли объект экземпляром конструктора Array.

      const arr = [1, 2, 3];
   const notArr = "Hello";

   console.log(arr instanceof Array); // true
   console.log(notArr instanceof Array); // false
   

2️⃣Проверка с помощью конструктора Object.prototype.toString.call():
Этот метод проверяет тип объекта, возвращаемый методом

Object.prototype.toString.

      const arr = [1, 2, 3];
   const notArr = "Hello";

   console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true
   console.log(Object.prototype.toString.call(notArr) === '[object Array]'); // false

Сравнение методов

Array.isArray():
✅Является самым современным и предпочтительным методом.
✅Поддерживается всеми современными браузерами.
✅Легко читается и понимается.

instanceof:
✅Работает корректно в большинстве случаев.

  - Может давать неверные результаты, если массив создан в другом контексте (например, в iframe).

- Object.prototype.toString.call():
  - Универсальный метод для проверки различных типов объектов.
  - Меньше подвержен проблемам с контекстом, но выглядит менее читаемым по сравнению с Array.isArray().

Для проверки, является ли поле массивом, рекомендуется использовать метод Array.isArray(), так как он простой, эффективный и работает корректно в большинстве ситуаций.

Чтобы проверить, является ли поле массивом, можно использовать метод Array.isArray(). Этот метод возвращает true, если значение является массивом, и false в противном случае.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

Расскажите о жизненном цикле компонента vue ?
Спросят с вероятностью 7%

Жизненный цикл компонента Vue.js описывает последовательность этапов, через которые проходит компонент от момента его создания до удаления. Каждый этап жизненного цикла сопровождается вызовом определенных хуков (методов), которые можно использовать для выполнения необходимых операций.

Основные этапы:

1️⃣Создание (Creation):
✅beforeCreate(): Вызывается сразу после инициализации экземпляра, до того как будут установлены реактивные свойства. На этом этапе к экземпляру нельзя получить доступ через this.
✅created(): Вызывается после создания экземпляра и установки реактивных свойств. На этом этапе уже можно получить доступ к данным и методам компонента, но ещё нет привязки к DOM.

        new Vue({
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeCreate() {
        console.log('beforeCreate');
      },
      created() {
        console.log('created');
        console.log(this.message); // 'Hello Vue!'
      }
    });
    

2️⃣Монтирование (Mounting):
✅beforeMount(): Вызывается перед монтированием компонента в DOM. На этом этапе шаблон ещё не скомпилирован и не вставлен в DOM.
✅mounted(): Вызывается после монтирования компонента в DOM. Здесь уже можно выполнять действия, зависящие от DOM, например, инициализировать сторонние библиотеки, работающие с DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeMount() {
        console.log('beforeMount');
      },
      mounted() {
        console.log('mounted');
        console.log(this.$el); // доступ к элементу DOM
      }
    });
    

3️⃣Обновление (Updating):
✅beforeUpdate(): Вызывается перед обновлением DOM, когда изменяется реактивное свойство. На этом этапе можно получить текущее состояние до обновления.
✅updated(): Вызывается после обновления DOM. Этот хук можно использовать для выполнения действий, зависящих от нового состояния DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeUpdate() {
        console.log('beforeUpdate');
      },
      updated() {
        console.log('updated');
      },
      methods: {
        updateMessage() {
          this.message = 'Hello World!';
        }
      }
    });
    

4️⃣Размонтирование (Unmounting):
✅beforeUnmount(): Вызывается перед размонтированием компонента и его удалением из DOM. Используется для выполнения очистки, например, отмены таймеров или отписки от событий.
✅unmounted(): Вызывается после того, как компонент был размонтирован и удалён из DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeUnmount() {
        console.log('beforeUnmount');
      },
      unmounted() {
        console.log('unmounted');
      },
      methods: {
        destroyComponent() {
          this.$destroy();
        }
      }
    });
    

Жизненный цикл компонента Vue.js включает создание, монтирование, обновление и размонтирование. Каждый этап сопровождается вызовом определенных хуков (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted), которые позволяют выполнять различные действия в нужные моменты жизни компонента.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Как работает реактивность в vue.Js ?
Спросят с вероятностью 7%

Реактивность — это одна из ключевых характеристик фреймворка, которая позволяет автоматически обновлять пользовательский интерфейс при изменении состояния. Вот как это работает:

Основные концепции

1️⃣Реактивные данные:
Vue использует объекты с реактивными свойствами, чтобы отслеживать изменения. Когда данные изменяются, Vue автоматически обновляет связанные с ними компоненты.

2️⃣Объект Vue:
При создании нового экземпляра Vue, он делает все данные, определенные в опции data, реактивными.

      var vm = new Vue({
     data: {
       message: 'Hello Vue!'
     }
   });
   

3️⃣Реактивность через геттеры и сеттеры:
Vue использует JavaScript Proxy (или Object.defineProperty в более старых версиях) для создания реактивных свойств. Каждый раз, когда свойство считывается, вызывается геттер, и когда свойство изменяется, вызывается сеттер.

Пример реактивности

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

При изменении vm.message интерфейс автоматически обновится:

vm.message = 'Hello World!';

Как это работает "под капотом"

1️⃣Инициализация:
При инициализации Vue.js обходит все свойства объекта data и преобразует их в геттеры и сеттеры с помощью Object.defineProperty. Этот процесс называется обсервацией.

2️⃣Детекторы изменений (Observers):
Каждый раз, когда создается реактивное свойство, создается объект наблюдателя (Observer), который следит за изменениями этого свойства.

3️⃣Депенденси трекинг (Dependency Tracking):
Во время рендера компонента, Vue регистрирует все зависимости (реактивные свойства), которые используются. Это означает, что Vue "запоминает", какие свойства нужно отслеживать для каждого компонента.

4️⃣Реактивное обновление:
Когда реактивное свойство изменяется, Vue уведомляет все компоненты, которые зависят от этого свойства, и они автоматически перерисовываются.

Реактивные системы в действиях

new Vue({
  el: '#app',
  data: {
    a: 1,
    b: 2
  },
  computed: {
    sum() {
      return this.a + this.b;
    }
  },
  watch: {
    a(newValue, oldValue) {
      console.log(`a изменилось с ${oldValue} на ${newValue}`);
    }
  }
});

✅Вычисляемые свойства: sum автоматически пересчитывается, когда a или b изменяются.
✅Наблюдатели (watchers): Реагируют на изменения данных и могут выполнять побочные эффекты.

Преимущества

1️⃣Простота использования: Можно сосредоточиться на логике приложения, а не на обновлении DOM.
2️⃣Высокая производительность: Vue эффективно отслеживает изменения и обновляет только те части DOM, которые изменились.
3️⃣Поддержка сложных приложений: Реактивная система Vue легко масштабируется для больших и сложных приложений.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых