В чем различие методов call apply bind ?
Спросят с вероятностью 20%

Методы call, apply и bind принадлежат к функциональному объекту Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении.

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

Пример:

function greet(message, name) {
  console.log(${message}, ${name}. This is ${this});
}

greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"

Здесь он используется для вызова функции greet с this, установленным в "Earth", и двумя дополнительными аргументами "Hello" и "Alice".

apply
Очень похож на call, но принимает аргументы в виде массива, а не по отдельности.

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"

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

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

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"

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

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

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Для чего нужно замыкание ?
Спросят с вероятностью 10%

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

Для чего нужны замыкания:

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

2️⃣ Создание приватных переменных: До введения классов с модификаторами доступа (private поля в классах, предложенные в ES2020) замыкания были основным способом создания приватных переменных для объектов и функций.

3️⃣ Фабрики функций: Позволяют создавать функции, которые могут генерировать другие функции, уже с предустановленными параметрами или конфигурациями. Это полезно для настройки поведения функций в зависимости от контекста.

4️⃣ Модульность и управление состоянием: Обеспечивают механизм для создания модулей и библиотек, позволяя определить приватные переменные и функции, которые недоступны извне, и предоставить публичное API через возвращаемые функции.

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

Пример:

function createCounter() {
  let count = 0; // Приватная переменная, доступная только внутри createCounter
  return function() {
    count += 1;
    return count;
  };
}

const counter = createCounter(); // counter — это функция, замыкающая в себе переменную count
console.log(counter()); // 1
console.log(counter()); // 2
// Переменная count остается доступной для counter(), но недоступна напрямую извне

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

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

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

Контекст выполнения (Execution Context) относится к окружению, в котором выполняется текущий код. Он содержит информацию о том, где и как выполняется код, включая значения переменных и this. Однако, когда говорят о нем в более узком смысле, чаще всего имеют в виду контекст this.

this

Ключевое слово ссылается на объект, в контексте которого выполняется текущий код. Значение его зависит от того, как вызывается функция:

1️⃣ В глобальном контексте выполнения (вне любых функций), он ссылается на глобальный объект. В браузере глобальным объектом является window.

2️⃣ Внутри функции, вызванной как обычная функция (например, myFunction()), он ссылается на глобальный объект в нестрогом режиме и на undefined в строгом режиме ('use strict';).

3️⃣ В методе объекта Он ссылается на объект, к которому принадлежит метод.

4️⃣ В конструкторе (функции, вызванной с ключевым словом new), он ссылается на вновь созданный объект.

5️⃣ Через методы call,apply и bind можно явно задать данное значение для вызова функции.


Примеры:

function show() {
  console.log(this);
}

const obj = {
  show: function() {
    console.log(this);
  }
};

show(); // В глобальном контексте, this будет глобальным объектом или undefined в строгом режиме
obj.show(); // В контексте объекта, this будет ссылаться на obj

function Person(name) {
  this.name = name;
}

const person = new Person('Alice'); // Здесь this внутри Person будет ссылаться на новый объект person

const externalShow = show.bind(obj);
externalShow(); // this будет ссылаться на obj благодаря bind

Зачем нужен контекст this

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

Понимание работы контекста this является ключевым для глубокого понимания языка и эффективной разработки, особенно при работе с объектно-ориентированным кодом и функциями обратного вызова.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что известно о различии между function expression и function declaration ?
Спросят с вероятностью 20%

Существует два основных способа объявления функций: Function Declaration (Объявление Функции) и Function Expression (Функциональное Выражение). Хотя оба подхода определяют функции, между ними есть несколько ключевых различий, влияющих на поведение и использование функций в коде.

Function Declaration (Объявление Функции)
Способ объявления функции, при котором используется ключевое слово function, за которым следует имя функции.

function sum(a, b) {
  return a + b;
}

Особенности:

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

Function Expression (Функциональное Выражение)
Способ объявления функции, при котором функция создаётся в рамках выражения. Функциональные выражения могут быть анонимными или именованными.

const sum = function(a, b) {
  return a + b;
};

Особенности:
- Поднятие (Hoisting): Переменные, объявленные через var, поднимаются, но инициализируются значением undefined, поэтому функциональное выражение не будет доступно до его объявления в коде. Если функциональное выражение объявлено через let или const, то оно вообще не будет доступно до объявления из-за временной мертвой зоны.
- Анонимные и именованные функции: Функциональные выражения могут быть анонимными (не иметь имени) или именованными. Именованные функциональные выражения могут быть полезны для улучшения читаемости кода и при отладке.
- Использование в выражениях: Функциональные выражения могут использоваться в любых местах, где допустимы выражения, например, в качестве аргументов для других функций.

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Какими способами можно скрыть элемент ?
Спросят с вероятностью 10%

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

1️⃣ display: none

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

.element {
  display: none;
}

2️⃣ visibility: hidden

Элемент остаётся в потоке документа и продолжает занимать своё пространство, но становится невидимым. В отличие от display: none, visibility: hidden сохраняет место элемента в макете.

.element {
  visibility: hidden;
}

3️⃣ opacity: 0

Устанавливает уровень прозрачности элемента. Значение 0 делает элемент полностью прозрачным, но, как и в случае с visibility: hidden, элемент остаётся видимым для DOM и продолжает занимать место.

.element {
  opacity: 0;
}

4️⃣ Использование абсолютного позиционирования

Можно абсолютно позиционировать элемент за пределами видимой области экрана, сделав его таким образом невидимым для пользователя.

.element {
  position: absolute;
  left: -9999px;
}

5️⃣ height: 0 и overflow: hidden

Если задать элементу высоту 0 и установить overflow: hidden, содержимое элемента скроется, но сам элемент по-прежнему будет присутствовать в потоке документа, не занимая при этом видимого пространства.

.element {
  height: 0;
  overflow: hidden;
}

6️⃣ clip или clip-path

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

.element {
  position: absolute;
  clip: rect(0 0 0 0);
}

Выбор метода зависит от конкретной задачи:
✅ Если элемент не должен занимать место в макете и его не нужно восстанавливать с помощью JavaScript, подходит display: none.
✅ Если элемент должен сохранить своё место, но быть невидимым, используйте visibility: hidden или opacity: 0.
✅ Для временного скрытия элемента с возможностью быстрого восстановления без изменения макета страницы можно использовать visibility: hidden или opacity: 0.

Каждый метод имеет свои особенности и подходит для определённых ситуаций, поэтому выбор зависит от целей скрытия элемента и требований к взаимодействию с ним.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

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

CORS (Cross-Origin Resource Sharing — «совместное использование ресурсов между разными источниками») — это механизм, который позволяет веб-страницам запрашивать ресурсы с другого домена, отличного от домена, с которого была загружена сама страница. По умолчанию, в целях безопасности, веб-браузеры ограничивают кросс-доменные запросы с использованием так называемой политики одного источника (Same-Origin Policy). Он предоставляет веб-серверам возможность явно разрешить некоторые кросс-доменные запросы, сохраняя при этом безопасность.

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

Когда веб-приложение пытается сделать запрос к ресурсу, который находится на другом домене (кросс-доменный запрос), браузер автоматически добавляет к запросу заголовок Origin. Этот заголовок содержит домен, с которого был сделан запрос. Веб-сервер, к которому направлен запрос, затем проверяет этот заголовок и решает, разрешить ли запрос. Если сервер разрешает запросы из этого источника, он отвечает с соответствующими CORS заголовками, указывающими, какие действия разрешены. Один из таких заголовков — Access-Control-Allow-Origin, который может быть установлен в (что означает разрешение для всех доменов) или в конкретный домен.

Примеры:

✅ Access-Control-Allow-Origin: Указывает, какие домены могут получать доступ к ресурсу. Может быть установлен в конкретный домен или для разрешения всех доменов.
✅ Access-Control-Allow-Methods: Указывает, какие HTTP методы разрешены при доступе к ресурсу.
✅ Access-Control-Allow-Headers: Указывает, какие HTTP заголовки могут быть использованы во время запроса.

Почему CORS важен

Решает важную проблему безопасности, позволяя контролировать, какие веб-сайты могут использовать ресурсы вашего веб-сайта. Это предотвращает множество видов атак, таких как CSRF (Cross-Site Request Forgery — подделка межсайтовых запросов), позволяя при этом легитимным сайтам запрашивать данные через браузер.

Проблемы с CORS

Хотя он повышает безопасность, неправильная настройка CORS может привести к уязвимостям. Например, слишком широкое использование Access-Control-Allow-Origin: * может случайно разрешить небезопасные кросс-доменные запросы. Разработчики должны тщательно настраивать политики CORS, чтобы избежать потенциальных проблем с безопасностью.

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

В чём разница между классической функцией и стрелочной ?
Спросят с вероятностью 20%

Классические функции (объявленные через ключевое слово function) и стрелочные функции (введённые в ES6 через => синтаксис) являются двумя способами объявления функций, но между ними есть несколько важных различий:

1️⃣ Синтаксис

Классическая функция:

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

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

const add = (a, b) => a + b;

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

2️⃣ Контекст this

В классических функциях контекст определяется тем, как функция была вызвана. В стрелочных функциях контекст наследуется из окружающего контекста (лексический контекст this), где функция была объявлена.

Пример с классической функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(function() {
      console.log(this.id); // this ссылается на глобальный объект или undefined в строгом режиме, а не на obj
    }, 1000);
  }
};

Пример со стрелочной функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(() => {
      console.log(this.id); // this корректно ссылается на obj, так как стрелочная функция наследует this из окружения
    }, 1000);
  }
};

3️⃣ Конструктор

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

Пример с классической функцией:

function Person(name) {
  this.name = name;
}
const person = new Person("Alice");

Попытка использовать стрелочную функцию как конструктор:

const Person = (name) => {
  this.name = name;
};
// const person = new Person("Alice"); // Ошибка: Person не является конструктором

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

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Зачем нужен менеджер состояния ?
Спросят с вероятностью 10%

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

Зачем нужен менеджер состояния:

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

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

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

4️⃣ Отладка и разработка: Большинство предлагают инструменты для отладки, которые позволяют просматривать изменения состояния в реальном времени, отслеживать действия, вызывающие эти изменения, и даже перемещаться по истории изменений состояния.

5️⃣ Повышение производительности: Централизованное управление состоянием позволяет оптимизировать обновления интерфейса, минимизируя ненужные рендеринги и улучшая общую производительность приложения.

6️⃣ Повышение масштабируемости приложения: Предоставляет структурированный подход к управлению состоянием, который облегчает масштабирование приложения и добавление новых функций.

Примеры:

- Redux: Один из самых популярных менеджеров состояния для React, использующий концепцию однонаправленного потока данных.
- Vuex: Специализированный менеджер состояния для Vue.js.
- MobX: Альтернатива Redux, предлагающая более гибкий подход к управлению состоянием через наблюдаемые объекты.
- Context API и useReducer (React Hook): Встроенные механизмы в React для управления состоянием без добавления внешних библиотек.

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Какие есть типы переменных ?
Спросят с вероятностью 10%

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

1️⃣ Примитивные типы:
- Number: представляет числа (целые или с плавающей точкой), включая специальные числовые значения Infinity, -Infinity и NaN (Not-a-Number).
- String: представляет строки текста.
- Boolean: имеет два значения true и false.
- null: указывает на отсутствие какого-либо значения.
- undefined: указывает, что значение переменной не было установлено.
- Symbol: представляет уникальные идентификаторы, введен в ECMAScript 2015.
- BigInt: представляет целые числа произвольной точности.

2️⃣ Ссылочные типы (объекты):
- Объекты (Object): коллекция ключ/значение, включая встроенные объекты, такие как Function, Array, Date, RegExp и другие.
- Массивы (Array): упорядоченная коллекция значений.
- Функции (Function): блоки кода, предназначенные для многократного выполнения.

Способы объявления переменных

-var: Исторический способ объявления переменных. Обладает функциональной областью видимости и поднимается в начало области видимости (hoisting).
-let: Введен в ES6 (ECMAScript 2015), позволяет объявлять переменные с блочной областью видимости, что делает их доступными только в рамках блока {}.
-const: Также введен в ES6, позволяет объявлять константы, т.е. переменные, значение которых не может быть изменено после инициализации. Имеет блочную область видимости.

Выбор типа переменной и типа данных зависит от задачи, которую вы решаете. Использование let и const предпочтительнее из-за более предсказуемой области видимости и лучшей поддержки модульности кода. Различие между типами данных помогает эффективно управлять информацией в программе, обеспечивая её гибкость и выразительность.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что такое макро и микро задачи ?
Спросят с вероятностью 20%

Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач. Давайте разберемся, что они собой представляют и как работают.

1️⃣ Микро-задачи (Microtasks)
Это задачи, которые запланированы для выполнения сразу после текущего выполненного скрипта, но до того, как event loop продолжит обрабатывать следующую макро-задачу. Примеры:
- Обещания (Promises): then, catch, finally
- queueMicrotask()

2️⃣ Макро-задачи (Macrotasks)
Это задачи, которые обрабатываются event loop, каждая макро-задача извлекается из очереди и выполняется до конца, прежде чем event loop перейдет к следующей макро-задаче. Примеры:
- setTimeout
- setInterval
- setImmediate (Node.js)
- I/O операции
- Интерактивные действия, такие как клики мыши и нажатия клавиш

✅ Различия и порядок выполнения
Основное различие между макро- и микро-задачами заключается в их приоритете выполнения:
- После каждой макро-задачи, перед тем как переходить к следующей макро-задаче, event loop обрабатывает все микро-задачи в очереди микро-задач. Это означает, что микро-задачи выполняются чаще и имеют более высокий приоритет по сравнению с макро-задачами.
- Если во время выполнения микро-задач добавляются новые микро-задачи, они также будут выполнены в текущем цикле, перед переходом к следующей макро-задаче. Это может привести к "голоданию" макро-задач, если микро-задачи постоянно добавляются.

Пример:

setTimeout(() => console.log('Макро-задача 1'), 0);
Promise.resolve().then(() => console.log('Микро-задача 1'));

setTimeout(() => console.log('Макро-задача 2'), 0);
Promise.resolve().then(() => console.log('Микро-задача 2'));

В этом примере порядок вывода будет следующим:
1️⃣ Микро-задача 1
2️⃣ Микро-задача 2
3️⃣ Макро-задача 1
4️⃣ Макро-задача 2

Это демонстрирует, как микро-задачи имеют приоритет и выполняются до того, как event loop переходит к следующей макро-задаче.

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Чем let отличается от var ?
Спросят с вероятностью 27%

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

Область видимости (Scope)
- var: Объявления переменных с использованием var имеют функциональную область видимости, что означает, что переменная, объявленная с помощью нее внутри функции, доступна везде в этой функции.
- let: В отличие от var, let имеет блочную область видимости. Это означает, что переменная, объявленная с помощью нее в блоке (например, в цикле или условном операторе), будет доступна только в пределах этого блока.

Поднятие (Hoisting)
- var: Переменные, объявленные с ее помощью, поднимаются в начало функции или скрипта. Это означает, что они могут быть использованы до своего объявления, хотя до инициализации они будут иметь значение undefined.
- let: Переменные, объявленные с ее помощью, также поднимаются, но не инициализируются. Попытка доступа к такой переменной до её объявления приведет к ошибке ReferenceError. Это поведение известно как "временная мертвая зона" (temporal dead zone, TDZ).

Создание в глобальном контексте
- var: Переменные, объявленные с ее помощью в глобальном контексте, становятся свойствами глобального объекта (window в браузерах).
- let: Переменные, объявленные с ее помощью в глобальном контексте, не становятся свойствами глобального объекта.

Примеры

if (true) {
  var varVariable = "Я доступен везде в функции";
  let letVariable = "Я доступен только в этом блоке";
}

console.log(varVariable); // Работает, потому что var имеет функциональную область видимости
console.log(letVariable); // Ошибка, потому что let имеет блочную область видимости

console.log(a); // undefined из-за поднятия
var a = 3;

console.log(b); // ReferenceError из-за временной мертвой зоны
let b = 4;

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

В то время как var объявляет переменную, доступную во всей функции, а let ограничивает видимость переменной блоком, в котором она объявлена.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Зачем нужны сборщики ?
Спросят с вероятностью 10%

Сборщики (или бандлеры) играют критически важную роль в процессе создания современных веб-приложений и сайтов. Они автоматизируют и оптимизируют множество задач, связанных с подготовкой кода к продакшену. Сборщики, такие как Webpack, Rollup, Parcel и другие, обеспечивают эффективное управление зависимостями, минификацию кода, транспиляцию и множество других возможностей. Вот основные причины, по которым сборщики являются неотъемлемой частью современной веб-разработки:

1️⃣ Управление зависимостями

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

2️⃣ Модульность и организация кода

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

3️⃣ Транспиляция

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

4️⃣ Оптимизация производительности

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

5️⃣ Автоматизация задач

Могут автоматизировать множество рутинных задач, таких как компиляция SASS/LESS в CSS, оптимизация изображений, генерация исходных карт (source maps) для упрощения отладки и другие.

6️⃣ Горячая замена модулей (HMR)

Поддерживают горячую замену модулей (Hot Module Replacement), что позволяет разработчикам видеть изменения в коде в реальном времени без полной перезагрузки страницы, ускоряя процесс разработки.

7️⃣ Поддержка ассетов

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

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

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

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

Контексты использования:

1️⃣ Глобальный контекст: глобальном контексте (вне каких-либо функций) он ссылается на глобальный объект. В браузере глобальным объектом является window, в Node.js — global.

console.log(this === window); // в браузере вернет true

2️⃣ Функции (не строгий режим): В функциях, вызванных обычным способом (не как методы объекта), он ссылается на глобальный объект. В строгом режиме ("use strict") this будет undefined, если функция вызвана не как метод объекта.

   function show() {
      console.log(this === window); // true в браузере в нестрогом режиме
      console.log(this); // undefined в строгом режиме
    }
    show();

3️⃣ Методы объекта: Когда функция вызывается как метод объекта, он ссылается на объект, частью которого является метод.

const obj = {
      myMethod() {
        console.log(this);
      }
    };
    obj.myMethod(); // this ссылается на obj

4️⃣ Конструкторы: В функции-конструкторе, вызванной с new, он ссылается на вновь созданный объект.

function Person(name) {
      this.name = name;
    }
    const person = new Person("Alice");
    console.log(person.name); // Alice

5️⃣ Стрелочные функции: Стрелочные функции не имеют собственного контекста, вместо этого они захватывают его из внешнего лексического окружения.

const obj = {
      method: function() {
        const arrowFunc = () => console.log(this);
        arrowFunc(); // this ссылается на obj
      }
    };
    obj.method();

6️⃣ Явное привязывание: С помощью методов call, apply и bind можно явно указать контекст для функции.

function show() {
      console.log(this);
    }
    const obj = {name: "Explicit context"};
    show.call(obj); // this в show() ссылается на obj

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

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

Операторы сравнения используются для сравнения двух значений и возвращают логическое значение: true (истина), если сравнение верно, и false (ложь), если нет. Они играют ключевую роль в управлении потоком выполнения программы, позволяя выполнить определённый код в зависимости от результатов сравнения.

Виды:

- Равенство (==): Проверяет равенство двух значений после приведения их к одному типу. Например, 5 == '5' вернёт true.

- Не равно (!=): Проверяет, не равны ли два значения после приведения их к одному типу. Например, 5 != '5' вернёт false.

- Строгое равенство (===): Проверяет равенство двух значений без приведения типов, то есть значения должны быть одного типа. Например, 5 === '5' вернёт false.

- Строгое не равенство (!==): Проверяет, не равны ли два значения без приведения типов. Например, 5 !== '5' вернёт true.

- Больше (>): Проверяет, больше ли первое значение, чем второе. Например, 5 > 3 вернёт true.

- Больше или равно (>=): Проверяет, больше ли первое значение или равно второму. Например, 5 >= 5 вернёт true.

- Меньше (<): Проверяет, меньше ли первое значение, чем второе. Например, 3 < 5 вернёт true.

- Меньше или равно (<=): Проверяет, меньше ли первое значение или равно второму. Например, 5 <= 5 вернёт true.

Примеры:

console.log(5 == '5');   // true, потому что значения равны после приведения типов
console.log(5 === '5');  // false, потому что значения разных типов
console.log(5 != '4');   // true, потому что значения не равны после приведения типов
console.log(5 !== '5');  // true, потому что значения разных типов
console.log(5 > 3);      // true
console.log(5 >= 5);     // true
console.log(3 < 5);      // true
console.log(5 <= 5);     // true

Важные моменты:

- При использовании операторов равенства (== и !=) происходит автоматическое приведение типов, что может привести к неожиданным результатам. Поэтому рекомендуется использовать строгие операторы равенства (=== и !==) для точного сравнения значений.
- Операторы сравнения часто используются в условных операторах (if, else if, switch) и циклах (while, for), позволяя управлять потоком выполнения программы в зависимости от результатов сравнения.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что такое чистая функция ?
Спросят с вероятностью 10%

Чистая функция — это концепция, особенно популярная в функциональном программировании, которая описывает функцию, обладающую следующими характеристиками:

1️⃣ Детерминированность: Возвращаемое значение зависит только от её входных параметров и не изменяется при повторных вызовах с теми же параметрами. Это означает, что функция всегда возвращает один и тот же результат при одинаковых входных данных, не обращаясь при этом к внешним состояниям или данным.

2️⃣ Отсутствие побочных эффектов: Не вызывает побочных эффектов в приложении, то есть не изменяет состояние программы или внешнего окружения (например, не изменяет глобальные переменные, не записывает данные на диск, не выводит информацию на экран и т.д.). Все, что делает чистая функция — это обрабатывает входные данные и возвращает результат.

Пример:

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

Функция 

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

Пример нечистой функции:

let counter = 0;

function incrementCounter(value) {
  counter += value;
}

Функция incrementCounter не является чистой, так как она изменяет глобальную переменную counter, что является побочным эффектом. Также результат выполнения функции зависит от внешнего состояния (значения counter), что нарушает принцип детерминированности.

Преимущества чистых функций:

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

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

В чём отличие null от undefined ?
Спросят с вероятностью 17%

null и undefined оба представляют значения, которые указывают на "отсутствие значения", но между ними есть ключевые отличия:

undefined
- Переменная была объявлена, но не была инициализирована, то есть ей не было присвоено какое-либо значение. Это значение по умолчанию для переменных, объявленных с помощью var, let или const, а также для аргументов функций, которым не были переданы значения, и для возвращаемого значения функций, которые не возвращают явно какое-либо значение.
- Также является типом данных. То есть typeof undefined вернёт "undefined".

null
- Используется для явного указания на отсутствие объекта или значения. Это сигнал для программиста о том, что переменная должна служить для хранения объекта, но в данный момент она "пуста" или не указывает на какой-либо объект.
- В отличие от undefined, он является объектом. То есть typeof null вернёт "object", что может быть немного запутывающим. Это известная особенность языка, сохраняемая для обратной совместимости.

Когда использовать
✅ Используйте undefined для проверки, была ли переменная инициализирована или определена функция/параметр.
✅ Используйте null в качестве намеренного отсутствия какого-либо объектного значения. Это полезно, например, при инициализации переменной, которая позже должна быть назначена объекту.

Сравнение
- При нестрогом сравнении (==) null и undefined считаются равными, потому что оба представляют отсутствие значения. То есть null == undefined вернёт true.
- При строгом сравнении (===), которое учитывает тип данных, они считаются различными: null === undefined вернёт false.

В целом, null и undefined играют важную роль в представлении и обработке отсутствия данных, но их семантическое значение и использование различаются, что важно учитывать при разработке программ.

➡️ Примеры ответов
➡️Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Какие основные используемые теги в html есть ?
Спросят с вероятностью 10%

HTML (HyperText Markup Language) использует множество тегов для структурирования веб-страниц. Вот некоторые из наиболее часто используемых тегов и их назначение:

Структурные и семантические:

- <!DOCTYPE>: Определяет тип документа и версию HTML.
- <html>: Корневой элемент веб-страницы.
- <head>: Содержит метаинформацию о документе, такую как заголовок, ссылки на стили и скрипты.
- <title>: Задаёт заголовок веб-страницы, отображаемый в заголовке вкладки браузера.
- <body>: Содержит всё содержимое веб-страницы, видимое пользователю.
- <header>: Определяет заголовок веб-страницы или раздела.
- <footer>: Определяет подвал веб-страницы или раздела.
- <nav>: Определяет навигационные ссылки.
- <article>: Определяет независимый контент.
-<section>: Определяет раздел в документе.
- <aside>: Определяет контент, отделённый от основного содержимого (как правило, боковые панели).

Текстовые и форматирующие:

- <h1> - <h6>: Заголовки разного уровня, где <h1> — самый важный заголовок.
- <p>: Определяет абзац.
- <br>: Перенос строки.
- : Выделяет текст жирным шрифтом.
- : Выделяет текст курсивом.
- : Цитата.
- <ol>: Нумерованный список.
- <ul>: Маркированный список.
- <li>: Элемент списка.
- : Гиперссылка.
- <img>: Изображение.
- <figure> и <figcaption>: Используются для вставки изображений или иллюстраций с подписями.

Для работы с формами:

- <form>: Определяет форму для сбора пользовательского ввода.
- <input>: Поле ввода.
- <textarea>: Многострочное поле ввода текста.
- <button>: Кнопка.
- <select> и <option>: Выпадающий список и его элементы.
-<label>: Метка для элемента формы.

Для работы с таблицами:

- <table>: Таблица.
- <tr>: Строка таблицы.
- <td>: Ячейка таблицы.
- <th>: Заголовочная ячейка таблицы.
- <thead>, <tbody>, <tfoot>: Группируют заголовки, основное тело и подвал таблицы соответственно.

Специальные и мультимедийные:

- <video> и <audio>: Для встраивания видео и аудио контента.
- <canvas>: Используется для рисования графики с помощью JavaScript.
- <svg>: Для встраивания векторной графики.

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Как работает наследование ?
Спросят с вероятностью 10%

Наследование — это механизм, с помощью которого элементы веб-страницы могут наследовать стилевые свойства от своих родительских элементов. Не все свойства наследуются, но многие из тех, которые влияют на текст, такие как color, font-family, font-size, являются такими. Это значит, что если вы установите одно из этих свойств для элемента, то оно автоматически применится ко всем его дочерним элементам, если только для них явно не заданы свои значения этих свойств.

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

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

Пример:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            color: blue; /* Все текстовые элементы внутри body будут синими, если только не задано иное /
            font-family: Arial, sans-serif; / Все текстовые элементы наследуют этот шрифт */
        }
    </style>
</head>
<body>

<p>Этот текст будет синим и Arial, потому что он наследует стили от body.</p>

<div style="color: green;">
    <p>Этот текст будет зеленым и Arial, потому что цвет переопределен на зеленый, а шрифт наследуется от body.</p>
</div>

</body>
</html>

Способы контроля

✅ Явное задание свойств: Вы можете явно задать свойства для элемента, переопределив наследуемые значения.
✅ Использование inherit: Значение inherit можно присвоить любому CSS-свойству, чтобы указать элементу наследовать значение этого свойства от своего родителя, даже если это свойство обычно не наследуется.
✅ Использование initial: Сбрасывает свойство к его значению по умолчанию, игнорируя наследование.
✅ Использование unset: Действует как inherit, если свойство наследуемое, и как initial в противном случае.

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что такое семантическое вресионирование ?
Спросят с вероятностью 17%

Семантическое версионирование (Semantic Versioning, часто сокращается как SemVer) — это система управления версиями, которая стремится быть как можно более предсказуемой и прозрачной. Она основана на трех цифрах, разделенных точками, например, 1.4.8, где каждая из цифр обозначает определенный тип изменений в ПО:

1️⃣ Мажорная версия (Major version) — первая цифра. Увеличивается, когда вносятся изменения, совместимые только в одну сторону. Это означает, что новая версия может содержать изменения, которые не будут работать с предыдущими версиями программного обеспечения без модификации кода. Например, удаление функций или изменение их поведения так, что старый код перестает работать.

2️⃣ Минорная версия (Minor version) — вторая цифра. Увеличивается, когда добавляются новые функциональности, которые не нарушают обратную совместимость с более старыми версиями. Это означает, что вы можете обновиться до этой версии без изменений в существующем коде, и все будет работать.

3️⃣ Патч-версия (Patch version) — третья цифра. Увеличивается при внесении исправлений ошибок, которые не влияют на API и не добавляют новых функций, сохраняя обратную совместимость. Эти изменения обычно безопасны и рекомендуется обновляться как можно скорее.

Эта система также может включать дополнительные обозначения для пре-релизов (например, 1.0.0-alpha.1) и сборок (например, 1.0.0+20130313144700), которые предоставляют дополнительную информацию о версии.

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

✅ Предсказуемость: Можно определить характер изменений по номеру версии, что упрощает управление зависимостями.
✅ Прозрачность: Легко понять, какие изменения были внесены между разными версиями.
✅ Совместимость: Помогает в поддержании совместимости между разными версиями библиотек или приложений.

Пример:

// Версия 1.0.0: Исходная версия вашей библиотеки
// Версия 1.1.0: Добавление новой функции, совместимой с предыдущими версиями
// Версия 1.1.1: Исправление ошибки в новой функции, не влияющее на существующий API
// Версия 2.0.0: Удаление старой функции, что делает эту версию несовместимой с кодом, написанным для версии 1.x.x

Семантическое версионирование — это система управления версиями, основанная на трех числах: мажорной, минорной и патч-версии, которые указывают на уровень изменений в программе. Это помогает легче управлять зависимостями и обеспечивает прозрачность изменений в ПО.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что означает слово каскад ?
Спросят с вероятность 10%

Слово "каскад" относится к системе приоритетов, которая определяет, какие стили будут применены к HTML-элементам в случае конфликта. Эта система позволяет управлять стилем документа на нескольких уровнях, начиная от браузерных стилей по умолчанию до пользовательских стилей.

Основные аспекты каскадности в CSS:

1️⃣ Приоритеты источников стилей: Позволяет стилизовать элементы с помощью различных источников стилей (браузерные стили по умолчанию, стили пользователя, стили автора веб-страницы). Каскад определяет порядок, в котором эти стили объединяются и применяются, придавая приоритет одним стилям над другими.

2️⃣ Специфичность селекторов: В случае, если на один и тот же элемент применяются различные стили от разных селекторов, специфичность селектора определяет, какие стили будут применены. Специфичность измеряется на основе типа селектора (например, селекторы тегов, классов, идентификаторов имеют разный "вес").

3️⃣ Важность (Importance): Свойство, объявленное как !important, имеет наивысший приоритет независимо от специфичности селектора. Использование !important следует минимизировать, поскольку это может затруднить дальнейшее управление стилями.

4️⃣ Порядок объявления: Если два стиля имеют одинаковую специфичность, то применяется стиль, который объявлен последним в коде. Это означает, что порядок, в котором стили объявлены в CSS-файле или в документе, также влияет на итоговый вид элемента.

Пример:

/* Браузерный стиль по умолчанию /
p {
  color: black;
}

/ Стиль пользователя /
p {
  color: blue;
}

/ Стиль автора /
p {
  color: green;
}

/ Специфичный селектор имеет больший приоритет /
.special-p {
  color: red;
}

/ Использование !important */
p {
  color: purple !important;
}

В этом примере, несмотря на то что для параграфов (p) заданы разные цвета, применится цвет purple, так как он объявлен с использованием !important. Однако для параграфа с классом .special-p цвет будет red, поскольку специфичность селектора .special-p выше, чем у простого тегового селектора p, и !important не влияет на селекторы с более высокой специфичностью, если они объявлены после.

Каскад в CSS позволяет разработчикам эффективно управлять стилями, определяя, какие правила будут применены к элементам в случае конфликтов. Понимание механизма каскадности помогает создавать предсказуемые и управляемые стили для веб-страниц.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые