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

В чём разница между сессией и куком ? Спросят с вероятностью 7% Сессии и куки — это два различных способа хранения данных в веб-приложениях, и у них есть свои особенности и случаи применения. Вот основные различия между ними: Куки (Cookies) 1️⃣Хранение данных на клиенте: Куки хранятся в браузере пользователя. Это небольшие кусочки данных, которые веб-сервер отправляет браузеру, и браузер сохраняет их и отправляет обратно на сервер с каждым запросом. 2️⃣Долговременное хранение: Куки могут иметь установленный срок действия и могут сохраняться на длительное время (например, несколько дней, недель или даже лет), если это явно указано при их создании. 3️⃣Использование для идентификации: Куки часто используются для сохранения информации о пользователе, такой как предпочтения, идентификаторы сессий или данные для авторизации. 4️⃣Размер и количество ограничены: Обычно размер одной куки ограничен 4KB, и браузеры могут ограничивать количество куки (например, до 20-30 на один домен). 5️⃣Безопасность: Куки могут быть подвержены угрозам безопасности, таким как кража куки (cookie theft) или атаки с подделкой межсайтовых запросов (CSRF). Использование флага HttpOnly помогает защитить куки от доступа через JavaScript, а флаг Secure гарантирует их передачу только по HTTPS. Пример создания куки:

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

Сессии (Sessions) 1️⃣Хранение данных на сервере: Данные сессии хранятся на сервере, а не в браузере пользователя. Браузер хранит только идентификатор сессии (обычно в куке), который используется для связи данных сессии с конкретным пользователем. 2️⃣Кратковременное хранение: Сессии, как правило, предназначены для хранения данных в течение одного сеанса работы пользователя (например, до закрытия браузера или истечения времени бездействия). Данные сессии удаляются, когда сессия заканчивается. 3️⃣Использование для хранения состояния: Сессии используются для хранения состояния пользователя между запросами, таких как состояние авторизации, содержимое корзины покупок и другие временные данные. 4️⃣Размер и масштабируемость: Поскольку данные сессии хранятся на сервере, размер их ограничен только серверными ресурсами. Это позволяет хранить больше данных по сравнению с куки. 5️⃣Безопасность: Сессии обычно считаются более безопасными, так как данные не передаются с каждым запросом и хранятся на сервере. Однако нужно заботиться о безопасности идентификаторов сессий, чтобы предотвратить атаки, такие как угон сессий (session hijacking). Пример создания сессии на сервере (с использованием Express.js):

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

app.use(session({
  secret: 'mySecret',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true }
}));

app.get('/', (req, res) => {
  if (req.session.views) {
    req.session.views++;
    res.send(`Number of views: ${req.session.views}`);
  } else {
    req.session.views = 1;
    res.send('Welcome to the session demo. Refresh!');
  }
});

app.listen(3000);

✅Куки хранятся в браузере пользователя, могут быть долговременными и используются для хранения небольших данных, таких как идентификаторы и предпочтения. ✅Сессии хранятся на сервере, обычно кратковременные и используются для хранения состояния пользователя между запросами. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

С помощью чего скопировал бы объект ? Спросят с вероятностью 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. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

ТОП-4 Курса по веб-дизайну по версии Tutortop Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. Освойте востребованную профессию с нуля за 4-5 месяцев. Соберите портфолио из 10+ проектов. Выйдите на заработок 100 000₽+ и работайте удаленно в гибком графике. Выбрать #реклама 16+ tutortop.ru О рекламодателе

Какие плюсы есть у 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. Это делает код более надежным, удобным в поддержке и разработке. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Техническая поддержка сайтов на 1С-Битрикс Мы станем лучшими друзьями вашему сайту на 1С-Битрикс. Делаем: - устранение ошибок и неполадок сайта; - улучшение производительности и оптимизация работы сайта; - доработка функционала и добавление новых возможностей; - установка обновлений и патчей безопасности; - резервное копирование и восстановление данных. Время реакции от 3х минут! Перейти на сайт #реклама esdi.ru О рекламодателе

Что такое 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 и аргументами, которую можно вызвать позже. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Приглашаем специалистов по продажам Ищем менеджеров-консультантов в торговый зал. Средний ежемесячный доход 100 000 рублей. Работа в СТД «Петрович» – это официальное трудоустройство, своевременная выплата заработной платы! Присоединяйся к команде и открывай новые горизонты в своей карьере! Узнать больше #реклама petrovichjob.ru О рекламодателе

Методичка: как сделать онлайн-встречи эффективнее Надоело ждать коллег, которые постоянно забывают о встречах, а отсутствие повестки и потерянные договоренности мешают нормально работать? Команда МТС Линк собрала на 37 страницах полезные материалы, чек-листы и кейсы, которые помогают компаниям проводить эффективные совещания в онлайне с помощью сервиса Встречи. Из методички узнаете: - Как создать постоянную ссылку и подключаться на встречи в 2 клика, - Как делать заметки и работать с файлами, не переживая за качество связи и безопасность данных. - Как облегчает жизнь ИИ, который расшифровывает созвоны в текст и автоматически отправляет расшифровку на почту. Еще в методичке описаны 7 способов оценки текущей эффективности ваших онлайн-встреч. Получить гайд можно бесплатно на сайте. Скачать #реклама mts-link.ru О рекламодателе

Что известно про утилити типы ? Спросят с вероятностью 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 доступно только для чтения

Утилити типы — это встроенные типы, которые позволяют легко изменять, расширять и комбинировать другие типы. Они делают код более гибким, безопасным и удобным для поддержки. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

Как повысить эффективность вебинаров? Организация продающего вебинара - не простая задача, ведь необходимо предусмотреть множество деталей: удобную дату, вовлекающий контент, методы продвижения и взаимодействия с участниками. Вебинары от МТС Линк помогают привлекать новых клиентов и увеличивать конверсию из участника в лид. В сервисе доступен анализ поведения пользователей во время вебинара, синхронный перевод, автовебинары и интерактивные инструменты для вовлечения участников. Делимся методичкой с кейсами, чек-листами и инструкциями для маркетологов, PR и event-менеджеров, чтобы сделать вебинары эффективным инструментом для лидогенерации. Получите методичку бесплатно на сайте. Скачать #реклама 16+ mts-link.ru О рекламодателе

Зачем нужна функция 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 нужны для создания новой области видимости, изоляции кода, создания приватных переменных и предотвращения конфликтов переменных. Они выполняются сразу после объявления и часто используются для инициализации кода. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Техническая поддержка и доработка сайтов "под ключ" Обновление, доработка и развитие сайтов. Любая CMS и сложность. Гарантия! ✅ Выгодные цены ✅ Сертифицированные специалисты ✅ Полная безопасность ✅ Опыт 14 лет Мы делаем быстрые, красивые и фунциональные сайты 👌 Узнать больше #реклама ivit.pro О рекламодателе