📌 Как браузер обрабатывает ссылки?

💬 Спрашивают в 3% собеседований

Браузер обрабатывает ссылки (теги <a>) следующим образом:

🤔 Основные этапы обработки ссылки браузером:

1️⃣ Рендеринг HTML:

➕ Когда браузер загружает HTML-документ, он разбирает его и создает DOM (Document Object Model). В этом процессе браузер встречает тег <a> и определяет, что это ссылка.

2️⃣ Наведение и щелчок по ссылке:

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

➕ При щелчке по ссылке браузер проверяет атрибуты ссылки (href, target, и др.), чтобы определить, как обработать этот клик.

3️⃣ Проверка атрибута `href`:

➕ Если href отсутствует или равно #, браузер не будет переходить на другую страницу.

➕ Если href содержит URL, браузер начинает процесс навигации.

4️⃣ Обработка атрибута `target`:

➕ Если target установлен в _self или не указан, браузер загружает новую страницу в текущем окне.

➕ Если target установлен в _blank, браузер открывает новую страницу в новой вкладке или окне.

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

5️⃣ Выполнение возможных JavaScript обработчиков событий:

➕ Браузер проверяет наличие событий, таких как onclick, onmousedown, onmouseup и т.д.

➕ Если обработчик события вызвал event.preventDefault(), переход на новую страницу не произойдет.

6️⃣ Отправка HTTP-запроса:

➕ Браузер отправляет HTTP-запрос к серверу, если ссылка ведет на другой ресурс.

➕ Сервер обрабатывает запрос и отправляет ответ.

7️⃣ Обработка ответа от сервера:

➕ Если ответ сервера содержит HTML, браузер начнет разбор нового HTML-документа.

➕ Если ответ сервера является перенаправлением (статусы 3xx), браузер отправит новый запрос по указанному адресу.

➕ Если ответ сервера является ошибкой (статусы 4xx или 5xx), браузер отобразит страницу ошибки.

8️⃣ Загрузка ресурсов:

➕ После получения нового HTML-документа браузер загружает все связанные ресурсы (CSS, JS, изображения и т.д.).

9️⃣ Отображение новой страницы:

➕ Браузер обновляет DOM и перерисовывает страницу, отображая новый контент пользователю.

🤔 Пример работы с ссылкой

HTML:

<a href="https://example.com" target="_blank" id="myLink">Перейти на example.com</a>

JavaScript:

document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Ссылка была нажата, но переход не произошел');
  // Можно выполнить дополнительную логику здесь
});

🤔 Атрибуты ссылки и их значение

➕ `href`: определяет URL, на который ведет ссылка.

➕ `target`: определяет, где открыть связанный документ.

➕ _self: в текущем окне/вкладке.

➕ _blank: в новом окне/вкладке.

➕ _parent: в родительском фрейме.

➕ _top: во всем текущем окне.

➕ `rel`: определяет отношения между текущим документом и связанным документом. Полезно для SEO и безопасности (например, rel="noopener noreferrer" для ссылок с target="_blank").

🤔 Резюме

Когда вы нажимаете на ссылку, браузер проверяет её атрибуты (href, target и другие), может выполнить JavaScript-обработчики событий, отправляет HTTP-запрос, обрабатывает ответ от сервера и отображает новую страницу.


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

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

📌 Что такое доступность интерфейсов?

💬 Спрашивают в 3% собеседований

Доступность интерфейсов (или веб-доступность, англ. web accessibility) — это практика создания веб-сайтов и приложений, которые могут быть использованы всеми людьми, включая людей с ограниченными возможностями. Цель доступности — сделать так, чтобы любой пользователь, независимо от его физических или когнитивных особенностей, мог получить доступ к контенту и функциональности веб-ресурса.

🤔 Зачем нужна доступность

1️⃣ Социальная значимость:

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

➕ Это способствует социальному включению и поддерживает права всех людей на доступ к информации и услугам.

2️⃣ Юридические требования:

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

➕ Несоблюдение этих требований может привести к юридическим последствиям и штрафам.

3️⃣ Расширение аудитории:

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

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

🤔 Основные принципы доступности

1️⃣ Воспринимаемость (Perceivable):

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

➕ Пример: использование альтернативного текста (alt) для изображений, чтобы они могли быть восприняты пользователями экранных читалок.

2️⃣ Управляемость (Operable):

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

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

3️⃣ Понимаемость (Understandable):

➕ Информация и управление интерфейсом должны быть понятными.

➕ Пример: использование простого и понятного языка, предсказуемое поведение интерфейсов.

4️⃣ Надежность (Robust):

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

➕ Пример: использование семантически правильного HTML-кода.

🤔 Примеры улучшений доступности

1️⃣ Альтернативный текст для изображений:

   <img src="example.jpg" alt="Описание изображения">
   

2️⃣ Подписи и описания для форм:

   <label for="username">Имя пользователя:</label>
   <input type="text" id="username" name="username">
   

3️⃣ Доступная навигация:
- Обеспечение возможности перемещения по странице с помощью клавиши Tab и указание фокуса для элементов.

   :focus {
     outline: 2px solid blue;
   }
   

4️⃣ Использование ARIA (Accessible Rich Internet Applications):
- ARIA атрибуты помогают сделать сложные веб-приложения доступными.

   <button aria-label="Закрыть меню">X</button>
   

🤔 Инструменты и ресурсы для проверки доступности

1️⃣ Screen readers (экранные читалки):

➕ JAWS, NVDA, VoiceOver — программы, которые озвучивают содержимое экрана и помогают пользователям с нарушением зрения.

2️⃣ Линтеры и валидаторы:

➕ WAVE (Web Accessibility Evaluation Tool), Axe, Lighthouse — инструменты для автоматической проверки доступности веб-страниц.

3️⃣ Руководства и стандарты:

➕ WCAG (Web Content Accessibility Guidelines) — международные рекомендации по обеспечению доступности веб-контента.

🤔 Резюме

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

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

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

📌 Как происходит отрисовка сайта для пользователя?

💬 Спрашивают в 3% собеседований

Отрисовка сайта для пользователя включает несколько этапов. Давайте разберём их подробнее.

1️⃣ Запрос к серверу:

Когда пользователь вводит URL-адрес в браузере и нажимает Enter, браузер отправляет HTTP-запрос к серверу, где находится сайт.

2️⃣ Ответ сервера:

Сервер получает запрос и отправляет обратно нужные файлы. Обычно это HTML-документ, стили (CSS) и скрипты (JavaScript).

3️⃣ Парсинг HTML:

Браузер начинает читать (парсить) HTML-документ. Он строит дерево DOM (Document Object Model), которое представляет структуру HTML. Каждый элемент HTML становится узлом в этом дереве.

4️⃣ Загрузка и применение CSS:

После парсинга HTML браузер загружает и применяет стили из CSS-файлов. Это позволяет создать дерево CSSOM (CSS Object Model), которое описывает, как каждый элемент должен выглядеть. Затем DOM и CSSOM объединяются, чтобы создать render tree (дерево рендеринга).

5️⃣ Загрузка и выполнение JavaScript:

Когда браузер находит теги <script>, он загружает и выполняет JavaScript. Скрипты могут изменять DOM, что потребует обновления render tree. JavaScript может также изменять CSSOM и запрашивать новые данные с сервера (например, с помощью AJAX).

6️⃣ Отрисовка (рендеринг):
На основе render tree браузер рассчитывает расположение каждого элемента (layout) и отрисовывает (paint) их на экране. Этот процесс называется layout и painting.

7️⃣ Оптимизации и обновления:

Браузеры используют различные оптимизации, такие как кэширование ресурсов, асинхронную загрузку скриптов и отложенную загрузку изображений. JavaScript и CSS могут вызывать изменения в DOM, которые требуют перерисовки (repaint) или перерасчета расположения элементов (reflow).

🤔 Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мой Сайт</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это пример простого HTML-документа.</p>
  <script src="script.js"></script>
</body>
</html>

В этом примере браузер сначала загрузит HTML, создаст DOM, затем загрузит CSS и создаст CSSOM, а потом загрузит и выполнит JavaScript.

🤔 **Вкратце**: Браузер загружает HTML, CSS и JavaScript с сервера, создаёт внутренние структуры данных (DOM и CSSOM), рассчитывает расположение элементов и отрисовывает их на экране пользователя.

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

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

📌 Как строки кода преобразуются в сайт?

💬 Спрашивают в 3% собеседований

Преобразование строк кода в сайт включает несколько ключевых этапов. Рассмотрим этот процесс подробно.

1️⃣ Получение исходного кода:

Когда вы создаете сайт, вы пишете исходный код на языках HTML, CSS и JavaScript. Этот код хранится на сервере, готовый для отправки пользователю по запросу.

2️⃣ Запрос к серверу и ответ:

Когда пользователь вводит URL в браузере, браузер отправляет HTTP-запрос к серверу. Сервер отвечает, отправляя обратно файлы с кодом.

3️⃣ Парсинг HTML:

Браузер начинает анализировать HTML-документ. Он считывает строки HTML-кода и строит дерево DOM (Document Object Model). DOM представляет собой иерархическую структуру всех элементов на странице.

4️⃣ Загрузка и парсинг CSS:

При обнаружении ссылок на CSS-файлы в HTML (тег <link>), браузер загружает эти файлы и анализирует их, создавая CSSOM (CSS Object Model). CSSOM описывает стили и правила для каждого элемента на странице.

5️⃣ Создание дерева рендеринга:

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

6️⃣ Загрузка и выполнение JavaScript:

Когда браузер встречает теги <script> в HTML, он загружает и выполняет JavaScript-код. Скрипты могут изменять DOM и CSSOM, добавляя интерактивность и динамические элементы на страницу.

7️⃣ Вывод на экран (рендеринг):

Браузер рассчитывает положение и размеры каждого элемента (layout) на основе дерева рендеринга. Затем он отрисовывает (paint) элементы на экране, используя графические ресурсы.

8️⃣ Рефлоу и репейнт:

Если JavaScript изменяет структуру DOM или стили CSS, браузер может повторно вычислить расположение элементов (reflow) и обновить их отрисовку (repaint). Эти процессы могут быть ресурсоемкими, поэтому важно оптимизировать код для их минимизации.

🤔 Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример страницы</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Заголовок</h1>
  <p>Параграф текста.</p>
  <script src="script.js"></script>
</body>
</html>

🤔 В этом примере:

➕ HTML создаёт базовую структуру страницы.

➕ CSS-файл задаёт стили для элементов.

➕ JavaScript добавляет интерактивность.

🤔 Вкратце: Браузер получает исходный код, анализирует HTML и CSS для создания внутренней структуры данных (DOM и CSSOM), затем выполняет JavaScript, рассчитывает расположение элементов и отображает их на экране.

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

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

📌 Как задать последовательность выполнения скриптов?

💬 Спрашивают в 3% собеседований

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

1️⃣ Порядок размещения в HTML:

Скрипты выполняются в порядке их появления в документе.

   <script src="script1.js"></script>
   <script src="script2.js"></script>
   

2️⃣ Атрибут `defer`:

Скрипты с атрибутом defer выполняются в порядке их появления после загрузки и парсинга HTML.

   <script src="script1.js" defer></script>
   <script src="script2.js" defer></script>
   

3️⃣ Атрибут `async`:

Скрипты с атрибутом async выполняются по мере их загрузки, независимо от порядка в HTML.

   <script src="script1.js" async></script>
   <script src="script2.js" async></script>
   

🤔 Вкратце: Скрипты выполняются в порядке их размещения в HTML. Атрибуты defer и async позволяют управлять этим процессом: defer сохраняет порядок, async выполняет скрипты по мере загрузки.

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

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

📌 Что такое event loop?

💬 Спрашивают в 67% собеседований

Event Loop (цикл событий) — это один из ключевых аспектов асинхронного программирования, обеспечивающий возможность выполнения JavaScript-кода в однопоточном режиме, не блокируя выполнение других операций. Это достигается за счёт использования цикла, который постоянно проверяет, есть ли задачи для выполнения, и если они есть, то выполняет их одну за другой.

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

🤔 Работает Event Loop следующим образом:

1️⃣ Call Stack (Стек вызовов):

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

2️⃣ Callback Queue (Очередь обратных вызовов):

Когда асинхронная операция завершается, её callback (функция обратного вызова) помещается в очередь обратных вызовов.

3️⃣ Event Loop:

Цикл событий непрерывно проверяет стек вызовов на наличие функций для выполнения. Если стек вызовов пуст, Event Loop извлекает первую функцию из очереди обратных вызовов и помещает её в стек вызовов для выполнения.

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

➕ Пример кода:

console.log('Первое сообщение');
setTimeout(() => {
    console.log('Сообщение из setTimeout');
}, 0);
console.log('Второе сообщение');

В этом примере, несмотря на то что setTimeout имеет задержку в 0 миллисекунд, вывод в консоль будет следующим:

Первое сообщение
Второе сообщение
Сообщение из setTimeout

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

🤔 Итог:

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

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

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

📌 Что такое замыкание ?

💬 Спрашивают в 47% собеседований

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

1️⃣ Инкапсуляция данных:

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

2️⃣ Сохранение состояния:

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

3️⃣ Кадрирование и функциональное программирование:

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

➕ Пример:

function создатьСчетчик() {
    let количество = 0; // переменная количество "замкнута" внутри функции увеличить

    function увеличить() {
        количество += 1;
        return количество;
    }

    return увеличить;
}

const счетчик = создатьСчетчик();
console.log(счетчик()); // 1
console.log(счетчик()); // 2

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

🤔 Итог:

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

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

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

📌 Что такое promise и какие состояния у него есть?

💬 Спрашивают в 47% собеседований

Promise (обещание) — это объект, представляющий завершение (или неудачу) асинхронной операции и её результат. Он позволяет ассоциировать обработчики с асинхронным действием, тем самым избавляя от необходимости использовать обратные вызовы (callback-функции). Они упрощают работу с асинхронными операциями, такими как AJAX-запросы или чтение файлов, позволяя написать код, который проще понять и поддерживать.

🤔 Состояния:

1️⃣ Pending (Ожидание):

Начальное состояние; асинхронная операция не завершена.

2️⃣ Fulfilled (Исполнено):

Операция завершена успешно, и promise возвращает результат.

3️⃣ Rejected (Отклонено):

Операция завершена с ошибкой, и promise возвращает причину отказа.

➕ Пример:

let обещание = new Promise(function(resolve, reject) {
    // Эмуляция асинхронной операции, например, запроса к серверу
    setTimeout(() => {
        // Условие успешного выполнения операции
        if (/* условие успеха */) {
            resolve("данные получены");
        } else {
            reject("ошибка при получении данных");
        }
    }, 1000);
});

обещание.then(
    function(результат) { console.log(результат); }, // обработчик успеха
    function(ошибка) { console.log(ошибка); } // обработчик ошибки
);

Promise поддерживает цепочки вызовов (then), что позволяет организовывать асинхронный код последовательно и читабельно. Кроме того, существуют вспомогательные методы, такие как Promise.all, Promise.race, Promise.resolve, и Promise.reject, которые облегчают работу с группами асинхронных операций.

🤔 Итог:

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

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

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

📌 Какие типы данных существуют?

💬 Спрашивают в 27% собеседований

Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты.

🤔 Примитивные типы:

➕ Number: представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14.

➕ String: представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!".

➕ Boolean: имеет два значения, true и false, и используется для работы с логическими операциями.

➕ Undefined: переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения.

➕ Null: специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript.

➕ Symbol: уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах.

➕ BigInt: тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number.

🤔 Объекты:

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

🤔 Специальные типы:

➕ Массивы: используются для хранения упорядоченных коллекций данных.

➕ Функции: объекты первого класса, поддерживающие вызов.

➕ Дата: для работы с датами и временем.

➕ Регулярные выражения: для работы с регулярными выражениями.

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

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

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

📌 Что такое virtual dom?

💬 Спрашивают в 27% собеседований

Virtual DOM (виртуальный Document Object Model) - это концепция, широко используемая в разработке интерфейсов, особенно в библиотеке React от Facebook, а также в других современных фронтенд-фреймворках. DOM - это структура данных, используемая браузерами для представления веб-страниц. Она позволяет программам изменять структуру, стиль и содержание веб-страницы, взаимодействуя с HTML и CSS. Проблема обычного DOM заключается в том, что он может быть довольно медленным при частых обновлениях, поскольку изменения в нем приводят к перерисовке элементов страницы, что может быть ресурсоёмким процессом.

Эта концепция призвана решить данную проблему. Вместо того чтобы напрямую взаимодействовать с реальным DOM при каждом изменении, изменения сначала применяются к виртуальному, который является лёгкой копией реального DOM. После этого, с помощью процесса, называемого согласованием (reconciliation), виртуальный DOM сравнивается с предыдущей его версией, чтобы определить, какие именно изменения необходимо внести в реальный. Это позволяет минимизировать количество операций с реальным DOM, что значительно увеличивает производительность приложения.

🤔 Пример без Virtual DOM:

const element = document.getElementById('myElement');
element.textContent = 'Новый текст';

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

🤔 Пример с использованием Virtual DOM (пример на React):

class MyComponent extends React.Component {
  render() {
    return <div>Новый текст</div>;
  }
}

В этом случае, при изменении состояния компонента, React сначала применяет изменения к виртуальному DOM, а затем, используя согласование, оптимально обновляет реальный.

Виртуальный Document Object Model позволяет писать код, как если бы можно было менять любую часть веб-страницы в любой момент, не беспокоясь о производительности. Это делает разработку интерфейсов более интуитивно понятной и эффективной.

🤔 Итог:

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

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

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

📌 Чем 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 ограничивает видимость переменной блоком, в котором она объявлена.

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

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

📌 Чем var отличается от const ?

💬 Спрашивают в 23% собеседований

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

🤔 Область видимости (Scope)

➕ Var:

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

➕ Const:

Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена.

🤔 Переназначение и изменение

➕ Var:

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

➕ Const:

Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений.

🤔 Поднятие (Hoisting)

➕ Var:

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

➕ Const:

Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона".

🤔 Инициализация

➕ Var:

Эти переменные можно объявить без инициализации, и их начальное значение будет undefined.

➕ Const:

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

🤔 Примеры:

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

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

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

🤔 Итог:

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

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

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

📌 В чем разница == и === ?

💬 Спрашивают в 20% собеседований

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

🤔 Оператор == (равно)

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

➕ Примеры:

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

🤔 Оператор ===(строго равно)

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

➕ Примеры:

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

🤔 Почему важно знать разницу

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

🤔 Итог:

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


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

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