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

📌 Вопрос из таблицы?

💬 Спрашивают в ЦИФРА% собеседований

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

1️⃣ Клиент-серверные приложения

🤔 Веб-приложения (JavaScript/TypeScript)

Для веб-приложений запросы к серверу обычно выполняются на стороне клиента (в браузере) с использованием JavaScript или TypeScript. Чаще всего это делается с помощью API, таких как fetch или axios.

Пример с использованием fetch:

function fetchData() {
    fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            console.log(data);
        })
        .catch(error => {
            console.error('Error:', error);
        });
}

🤔 Веб-приложения с использованием библиотек/фреймворков

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

Пример с использованием React:

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

function MyComponent() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error('Error:', error));
    }, []);

    return (
        <div>
            {data ? <div>Data: {data}</div> : <div>Loading...</div>}
        </div>
    );
}

🤔 Мобильные приложения

Для мобильных приложений, разработанных с использованием таких технологий, как React Native, Swift или Kotlin, запросы к серверу также выполняются в коде приложения.

Пример с использованием React Native:

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';

function MyComponent() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error('Error:', error));
    }, []);

    return (
        <View>
            {data ? <Text>Data: {data}</Text> : <Text>Loading...</Text>}
        </View>
    );
}

2️⃣ Серверные приложения

🤔 Серверные скрипты (Node.js)

В случае серверных приложений на Node.js запросы к другим серверам могут выполняться для интеграции с внешними API или микросервисами.

Пример с использованием axios:

const axios = require('axios');

axios.get('https://api.example.com/data')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

🤔 Бэкенд-фреймворки (Django, Flask)

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

Пример с использованием Django (Python):

import requests
from django.http import JsonResponse

def fetch_data(request):
    response = requests.get('https://api.example.com/data')
    if response.status_code == 200:
        return JsonResponse(response.json())
    else:
        return JsonResponse({'error': 'Failed to fetch data'}, status=response.status_code)

🤔 Заключение

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

🤔 Краткое объяснение

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

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

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

В чем разница между get и post ?
Спросят с вероятностью 7%

Методы GET и POST — это два из наиболее часто используемых HTTP-методов для взаимодействия с веб-серверами. Они имеют разные цели и характеристики, которые делают их подходящими для различных задач.

GET

1️⃣Основное использование: Метод используется для запроса данных с сервера. Например, загрузка веб-страницы, получение данных из базы данных и т. д.
2️⃣Параметры в URL: Данные передаются в URL строки в виде параметров. Пример:

      GET /search?query=javascript&page=2 HTTP/1.1
   Host: www.example.com
   

3️⃣Кеширование: Запросы GET могут быть закешированы браузером и прокси-серверами, что повышает производительность при повторных запросах.
4️⃣Букмарклеты: Запросы GET могут быть сохранены в закладках (букмарклеты) и легко шарятся.
5️⃣Идемпотентность: Запросы GET должны быть идемпотентными, то есть выполнение одного и того же запроса несколько раз не должно изменять состояние сервера.
6️⃣Ограничение по длине: URL имеет ограничение по длине (в зависимости от браузера и сервера, обычно около 2000 символов).

POST

1️⃣Основное использование: Метод используется для отправки данных на сервер, например, при отправке формы, загрузке файла и т. д.
2️⃣Параметры в теле запроса: Данные передаются в теле HTTP-запроса, а не в URL. Пример:

      POST /submit-form HTTP/1.1
   Host: www.example.com
   Content-Type: application/x-www-form-urlencoded
   Content-Length: 27

   username=john&password=1234
   

3️⃣Безопасность: Данные, передаваемые с помощью POST, не видны в URL, что делает этот метод более безопасным для передачи чувствительных данных (например, паролей). Однако данные все равно могут быть перехвачены, если не используется HTTPS.
4️⃣Кеширование: Запросы POST не кешируются браузером по умолчанию.
5️⃣Нет ограничений по длине: Метод POST не имеет таких же строгих ограничений по длине данных, как GET, что делает его подходящим для отправки больших объемов данных.
6️⃣Неидемпотентность: Запросы POST могут изменять состояние сервера, и выполнение одного и того же запроса несколько раз может привести к разным результатам (например, повторная отправка формы может создать дубликаты данных).

Примеры

GET:

<form action="/search" method="get">
  <input type="text" name="query" />
  <button type="submit">Search</button>
</form>

POST:

<form action="/submit-form" method="post">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button type="submit">Submit</button>
</form>

Сравнение

| Характеристика | GET | POST |
|--------------------------|-----------------------------------|-----------------------------------|
| Цель | Получение данных | Отправка данных |
| Параметры | В URL | В теле запроса |
| Кеширование | Да | Нет |
| Безопасность | Менее безопасный для чувствительных данных | Более безопасный для чувствительных данных (при использовании HTTPS) |
| Ограничение по длине | Да (обычно около 2000 символов) | Нет |
| Идемпотентность | Да | Нет |
| Возможность закладок | Да | Нет |

GET используется для получения данных и передает параметры в URL, может кешироваться и имеет ограничение по длине URL. POST используется для отправки данных, передает параметры в теле запроса, не кешируется и не имеет строгих ограничений по длине данных.

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

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

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

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

Синхронный код

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

Синхронного кода:

function syncTask() {
  console.log('Начало');
  for (let i = 0; i < 1000000000; i++) { /* Длительная операция */}
  console.log('Конец');
}

syncTask();
console.log('Это будет выполнено после syncTask');

В этом примере, пока длительная операция (цикл) не завершится, программа не продолжит выполнение и следующий console.log не будет вызван.

Асинхронный код

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

С использованием коллбеков:

console.log('Начало');

setTimeout(() => {
  console.log('Асинхронная операция');
}, 1000);

console.log('Конец');

В этом примере setTimeout ставит задачу на выполнение через 1 секунду, но код продолжает выполняться дальше, и console.log('Конец') вызывается до завершения асинхронной операции.

С использованием промисов:

console.log('Начало');

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Асинхронная операция завершена');
  }, 1000);
}).then(message => {
  console.log(message);
});

console.log('Конец');

С использованием async/await:

console.log('Начало');

async function asyncTask() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('Асинхронная операция завершена');
}

asyncTask();
console.log('Конец');

Основные отличия

1️⃣Выполнение:
✅Синхронный код: Выполняется последовательно. Каждая операция должна завершиться до начала следующей.
✅Асинхронный код: Позволяет выполнять другие операции, пока текущая не завершится.

2️⃣Блокировка:
✅Синхронный код: Может блокировать выполнение всей программы, если операция длительная.
✅Асинхронный код: Не блокирует выполнение программы. Другие операции могут выполняться параллельно.

3️⃣Управление временем ожидания:
✅Синхронный код: Время ожидания одной операции может замедлить всю программу.
✅Асинхронный код: Ожидание длительных операций не мешает выполнению других задач.

4️⃣Простота понимания:
✅Синхронный код: Проще для понимания и отладки, так как выполняется последовательно.
✅Асинхронный код: Может быть сложнее для понимания из-за необходимости управления состоянием и ожиданием результатов асинхронных операций.

Примеры

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

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

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

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

Какие знаешь способы центрирования ?
Спросят с вероятностью 7%

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

Центрирование по горизонтали

1️⃣Использование `text-align` для строчных и встроенно-блочных элементов

.container {
  text-align: center;
}

2️⃣Использование margin: auto для блочных элементов с фиксированной шириной

.element {
  width: 50%;
  margin: 0 auto;
}

Центрирование по вертикали

1️⃣Использование Flexbox

Позволяет легко центрировать элементы по горизонтали и вертикали.

.container {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center; /* Центрирование по вертикали */
  height: 100vh; /* Высота контейнера */
}

2️⃣Использование Grid Layout

Также предоставляет простые способы для центрирования.

.container {
  display: grid;
  place-items: center; /* Центрирование по горизонтали и вертикали */
  height: 100vh; /* Высота контейнера */
}

HTML:

<div class="container">
  <div>Центрированный элемент</div>
</div>

Комбинированное центрирование (по горизонтали и вертикали)

1️⃣Flexbox

Удобен для центрирования по обеим осям.

.container {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center; /* Центрирование по вертикали */
  height: 100vh; /* Высота контейнера */
}

HTML:

<div class="container">
  <div>Центрированный элемент</div>
</div>

2️⃣Grid Layout

Предоставляет способ центрирования по горизонтали и вертикали с использованием place-items.

.container {
  display: grid;
  place-items: center; /* Центрирование по горизонтали и вертикали */
  height: 100vh; /* Высота контейнера */
}

HTML:

<div class="container">
  <div>Центрированный элемент</div>
</div>

3️⃣Абсолютное позиционирование

В сочетании с трансформацией.

.container {
  position: relative;
  height: 100vh; /* Высота контейнера */
}
.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Центрирование с учетом размеров элемента */
}

HTML:

<div class="container">
  <div class="element">Центрированный элемент</div>
</div>

Центрировать элементы можно с помощью различных методов: text-align для строчных элементов, margin: auto для блочных элементов, Flexbox и Grid для универсального центрирования, а также абсолютного позиционирования с трансформацией.

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

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

Почему не пишем все стили в style ?
Спросят с вероятностью 7%

Написание всех стилей непосредственно в атрибуте style не является хорошей практикой по ряду причин:

1️⃣Разделение структуры и презентации

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

2️⃣Переиспользование стилей

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

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

3️⃣Упрощение изменений и обновлений

Изменение стилей в одном месте (CSS-файл) проще и быстрее, чем изменение атрибутов style для каждого элемента. Это особенно важно для больших проектов.

/* CSS файл */
.text-red {
  color: red;
}

HTML:

<p class="text-red">This text is red.</p>
<p class="text-red">This text is also red.</p>

Если нужно изменить цвет, достаточно поменять его в одном месте в CSS-файле.

4️⃣Улучшение производительности

Браузеры кешируют CSS-файлы, что уменьшает время загрузки страницы. Инлайновые стили загружаются каждый раз, когда загружается HTML-документ, что увеличивает нагрузку на сеть.

5️⃣Семантика и поддержка инструментов разработки

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

6️⃣Поддержка медиа-запросов и адаптивного дизайна

CSS-файлы позволяют легко использовать медиа-запросы для адаптивного дизайна. Это сложно и неэффективно делать с инлайновыми стилями.

/* CSS файл */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Плохо vs Хорошо

Плохо (все стили в `style`):

<p style="color: red; font-size: 16px;">This is a paragraph.</p>
<p style="color: red; font-size: 16px;">This is another paragraph.</p>

Хорошо (использование CSS):

/* CSS файл */
.red-text {
  color: red;
  font-size: 16px;
}

HTML:

<p class="red-text">This is a paragraph.</p>
<p class="red-text">This is another paragraph.</p>

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

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

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

Зачем необходим dom ?
Спросят с вероятностью 7%

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

Зачем он нужен

1️⃣Доступ к элементам страницы: Позволяет программно получать доступ к элементам HTML-документа (теги, текст, атрибуты) и манипулировать ими.
2️⃣Изменение содержимого: С помощью него можно изменять содержимое страницы динамически, например, обновлять текст, менять изображения, добавлять или удалять элементы.
3️⃣Обработка событий: Позволяет обрабатывать события, такие как клики, нажатия клавиш, прокрутка и другие взаимодействия пользователя с веб-страницей.
4️⃣Динамическое изменение структуры страницы: Предоставляет методы для добавления, удаления и изменения элементов и атрибутов, что позволяет динамически изменять структуру страницы.
5️⃣Интерактивность: С помощью него можно создавать интерактивные веб-приложения, которые реагируют на действия пользователя без перезагрузки страницы.

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

Представляет собой древовидную структуру, где каждый элемент страницы является узлом дерева. Вершиной дерева является объект document, который представляет весь HTML-документ. Узлы могут быть элементами (<div>, <p>, <a> и т.д.), текстом, комментариями и другими типами.

Пример HTML-документа:

<!DOCTYPE html>
<html>
<head>
  <title>Document Object Model</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Структура для этого документа:

document
 └── html
     ├── head
     │   └── title
     │       └── "Document Object Model"
     └── body
         ├── h1
         │   └── "Hello, world!"
         └── p
             └── "This is a paragraph."

Основные методы и свойства

1️⃣Доступ к элементам:
✅document.getElementById(id): Возвращает элемент по его id.
✅document.getElementsByClassName(className): Возвращает все элементы с указанным классом.
✅document.getElementsByTagName(tagName): Возвращает все элементы с указанным тегом.
✅document.querySelector(selector): Возвращает первый элемент, соответствующий CSS селектору.
✅document.querySelectorAll(selector): Возвращает все элементы, соответствующие CSS селектору.

2️⃣Создание и удаление элементов:
✅document.createElement(tagName): Создает новый элемент.
✅parentElement.appendChild(childElement): Добавляет элемент в конец дочерних элементов родителя.
✅parentElement.removeChild(childElement): Удаляет элемент из дочерних элементов родителя.

3️⃣Изменение содержимого и атрибутов:
✅element.innerHTML: Изменяет или получает HTML-содержимое элемента.
✅element.textContent: Изменяет или получает текстовое содержимое элемента.
✅element.setAttribute(name, value): Устанавливает значение атрибута элемента.
✅element.getAttribute(name): Получает значение атрибута элемента.

Пример:

// Изменение текста заголовка
const header = document.querySelector('h1');
header.textContent = 'Hello, DOM!';

// Добавление нового параграфа
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
document.body.appendChild(newParagraph);

// Изменение атрибута
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');

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

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

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

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

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

Зачем они нужны

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

Как они создаются

Есть несколько способов создания функций:

1️⃣Function Declaration (Объявление функции):

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('Alice')); // Hello, Alice!

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

2️⃣Function Expression (Функциональное выражение):

const greet = function(name) {
  return

ни нужны

1️⃣Повтор

};
console.log(greet('Bob')); // Hello, Bob!

Функция создается и присваивается переменной. Такие функции могут быть анонимными (без имени).

3️⃣Arrow Function (Стрелочная функция):

const greet = (name) => {
  return

 Hello, ${name}!;

};
console.log(greet('Carol')); // Hello, Carol!

Стрелочные функции имеют более короткий синтаксис и не имеют своего контекста this.

Вызов функции

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

function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // 5

Параметры и аргументы

✅Параметры — это переменные, которые перечислены в круглых скобках при объявлении функции.
✅Аргументы — это значения, которые передаются функции при её вызове.

Возвращаемое значение

Функция может возвращать значение с помощью ключевого слова return. Если return отсутствует, функция возвращает undefined.

function multiply(a, b) {
  return a * b;
}
console.log(multiply(4, 5)); // 20

Область видимости

Переменные, объявленные внутри функции, имеют локальную область видимости и недоступны за её пределами:

function scopeExample() {
  let localVar = 'I am local';
  console.log(localVar); // I am local
}
scopeExample();
console.log(localVar); // ReferenceError: localVar is not defined

Замыкания (Closures)

Функции имеют доступ к переменным из внешних функций благодаря замыканиям:

function outerFunction() {
  let outerVar = 'I am outside!';
  function innerFunction() {
    console.log(outerVar);
  }
  return innerFunction;
}
const inner = outerFunction();
inner(); // I am outside!

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

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

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

Когда используются переменные, var, let, const ?
Спросят с вероятностью 7%

Переменные объявляются с помощью ключевых слов var, let и const. Они имеют разные особенности и используются в разных ситуациях.

var

Использовался до появления ES6 (ECMAScript 2015) и обладает следующими особенностями:
1️⃣Область видимости: var имеет функциональную область видимости, то есть она видна внутри функции, где была объявлена, или в глобальной области, если объявлена вне функций.
2️⃣Поднятие (hoisting): Объявления с var поднимаются вверх своей области видимости, но присвоение значения происходит в том месте, где оно записано. Это значит, что переменную можно использовать до ее объявления.
3️⃣Повторное объявление: Переменные, объявленные с var, могут быть переобъявлены в пределах одной и той же области видимости.

Пример:

function exampleVar() {
  console.log(x); // undefined
  var x = 10;
  console.log(x); // 10
}
exampleVar();

let

Появился в ES6 и решает многие проблемы, связанные с var:
1️⃣Область видимости: let имеет блочную область видимости, то есть виден только внутри блока {}, в котором объявлен.
2️⃣Поднятие (hoisting): Хотя объявления с let поднимаются, доступ к ним возможен только после строки, где они объявлены (временная мертвая зона).
3️⃣Повторное объявление: Нельзя переобъявить переменную, объявленную с let, в той же области видимости.

Пример:

function exampleLet() {
  console.log(y); // ReferenceError: y is not defined
  let y = 10;
  console.log(y); // 10
}
exampleLet();

const

Также введённый в ES6, используется для объявления констант:
1️⃣Область видимости: Как и let, имеет блочную область видимости.
2️⃣Поднятие (hoisting): Ведет себя аналогично let в плане поднятия и временной мертвой зоны.
3️⃣Изменение значения: Переменная, объявленная с const, должна быть инициализирована при объявлении и её значение нельзя изменить после этого. Однако, если const используется для объявления объекта или массива, можно изменять их содержимое.

Пример:

function exampleConst() {
  const z = 10;
  console.log(z); // 10
  z = 20; // TypeError: Assignment to constant variable.
}
exampleConst();

function exampleConstObject() {
  const obj = { key: 'value' };
  obj.key = 'new value'; // Изменение допустимо
  console.log(obj.key); // 'new value'
}
exampleConstObject();

Когда использовать

✅`var`: Обычно рекомендуется избегать, так как let и const обеспечивают лучшую управляемость кода.
✅`let`: Используется для переменных, которые могут изменяться в процессе выполнения программы.
✅`const`: Используется для значений, которые не будут переназначены. Это помогает предотвратить ошибки и делает код более предсказуемым.

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

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

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

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

1️⃣Сравнение ссылок на объекты

При сравнении объектов с использованием оператора равенства (== или ===), сравниваются их ссылки, а не содержимое.

const obj1 = { a: 1 };
const obj2 = { a: 1 };
const obj3 = obj1;

console.log(obj1 === obj2); // false
console.log(obj1 === obj3); // true

2️⃣Глубокое сравнение объектов

Для сравнения содержимого объектов необходимо проверять каждое свойство. Один из способов — написать рекурсивную функцию для глубокого сравнения.

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) {
    return true;
  }

  if (obj1 == null || typeof obj1 !== 'object' ||
      obj2 == null || typeof obj2 !== 'object') {
    return false;
  }

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  for (let key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }

  return true;
}

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(deepEqual(obj1, obj2)); // true
console.log(deepEqual(obj1, obj3)); // false

3️⃣Использование библиотек

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

const _ = require('lodash');

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(_.isEqual(obj1, obj2)); // true
console.log(_.isEqual(obj1, obj3)); // false

4️⃣Проверка свойств с учетом порядка и типов

Для простых случаев можно использовать сериализацию объектов с помощью JSON.stringify, однако этот метод имеет ограничения и может не работать с более сложными структурами (например, с функциями, undefined, или символами).

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true
console.log(JSON.stringify(obj1) === JSON.stringify(obj3)); // false

Для сравнения объектов можно использовать:
✅Сравнение ссылок с ===, если нужно проверить, указывают ли переменные на один и тот же объект.
✅Глубокое сравнение с помощью рекурсивной функции или библиотек (например, lodash), чтобы проверить равенство содержимого объектов.
✅Сериализация с JSON.stringify для простых случаев, хотя этот метод имеет ограничения и может не работать с более сложными структурами.

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

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

Почему важно указывать ширину и высоту для картинок ?
Спросят с вероятностью 7%

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

1️⃣Улучшение производительности и оптимизация рендеринга

✅Предотвращение перерисовок и переформатирования (reflows):
Когда браузер загружает страницу, он сначала строит DOM (Document Object Model) и CSSOM (CSS Object Model). Если размеры изображений не указаны, браузеру приходится ждать, пока изображения загрузятся, чтобы узнать их размеры. Это может вызвать переформатирование страницы, когда элементы перемещаются, чтобы освободить место для изображений. Указание размеров заранее позволяет браузеру зарезервировать нужное пространство, избегая дополнительных перерисовок и улучшая производительность.

2️⃣Улучшение пользовательского опыта

✅Стабильная компоновка (layout stability):
Когда размеры изображений указаны, браузер может зарезервировать пространство для каждого изображения до его загрузки. Это предотвращает смещение контента во время загрузки страницы, обеспечивая более плавный и предсказуемый пользовательский опыт.

3️⃣Быстрая загрузка страниц

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

4️⃣Сокращение времени до первого отрисовки (First Contentful Paint, FCP)

✅Оптимизация рендеринга:
Когда браузер знает размеры изображений, он может быстрее отрисовать контент страницы, даже если изображения еще не загружены. Это сокращает время до первого отрисовки (FCP), что является важным показателем производительности.

Рассмотрим пример HTML-кода, в котором указаны размеры изображения:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Size Example</title>
  <style>
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <h1>Example Image</h1>
  <img src="image.jpg" width="600" height="400" alt="Example Image">
</body>
</html>

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

✅Атрибуты width и height задают фиксированные размеры для изображения. Это позволяет браузеру зарезервировать нужное пространство до загрузки изображения.
✅CSS-правило max-width: 100%; height: auto; гарантирует, что изображение будет масштабироваться в зависимости от ширины контейнера, сохраняя пропорции.

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

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

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

Откуда берется контекст функции ?
Спросят с вероятностью 7%

Контекст функции — это значение, которое доступно через ключевое слово this. Контекст функции определяется способом ее вызова, а не тем, где функция была определена. Вот основные способы, которыми определяется контекст функции:

1️⃣Глобальный контекст и контекст функций

✅Глобальный контекст:
В глобальной области видимости this ссылается на глобальный объект. В браузере это объект window.

    console.log(this); // В браузере это будет window
  

✅Контекст функции:
При обычном вызове функции this ссылается на глобальный объект (в строгом режиме — undefined).

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

  showThis(); // В браузере это будет window (или undefined в строгом режиме)
  

2️⃣Контекст методов объекта

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

const obj = {
  name: 'Alice',
  showThis: function() {
    console.log(this);
  }
};

obj.showThis(); // { name: 'Alice', showThis: [Function: showThis] }

3️⃣Конструкторы и классы

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

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

const alice = new Person('Alice');
console.log(alice.name); // Alice

4️⃣call, apply и bind

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

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

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

  const obj = { name: 'Alice' };
  showThis.call(obj); // { name: 'Alice' }
  

✅apply: вызывает функцию с указанным значением this и аргументами, переданными в виде массива.

showThis.apply(obj); // { name: 'Alice' }

✅bind: возвращает новую функцию, которая при вызове будет иметь указанный контекст this.

const boundShowThis = showThis.bind(obj);
  boundShowThis(); // { name: 'Alice' }

5️⃣Стрелочные функции

Не имеют собственного контекста this. Вместо этого они захватывают this из окружающего лексического контекста.

const obj = {
  name: 'Alice',
  showThis: function() {
    const arrowFunc = () => console.log(this);
    arrowFunc();
  }
};

obj.showThis(); // { name: 'Alice' }

6️⃣Обработчики событий

В обработчиках событий this ссылается на элемент, к которому прикреплен обработчик.

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // <button> элемент
});

Контекст функции (this) определяется способом вызова функции. В глобальной области видимости this ссылается на глобальный объект. В методах объекта this ссылается на сам объект. В функциях-конструкторах this ссылается на новый созданный объект. Методы call, apply и bind позволяют явно задавать значение this. Стрелочные функции захватывают this из окружающего контекста. В обработчиках событий this ссылается на элемент, к которому прикреплен обработчик.

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

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

Что такое репозиторий ?
Спросят с вероятностью 3%

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

Основные типы

1️⃣Локальные:
✅Хранятся на локальной машине разработчика.
✅Используются для разработки и тестирования кода до его отправки в удаленный репозиторий.

2️⃣Удаленные:
✅Хранятся на удаленных серверах или в облачных сервисах.
✅Обеспечивают совместную работу нескольких разработчиков, доступность и резервное копирование кода.
✅Примеры: GitHub, GitLab, Bitbucket.

Основные функции

1️⃣Управление версиями:
✅Отслеживание всех изменений в коде с помощью системы контроля версий (например, Git).
✅Позволяет вернуться к любой предыдущей версии кода, сравнивать изменения и анализировать историю.

2️⃣Совместная работа:
✅Обеспечивает возможность совместной работы над проектом, слияния изменений от разных разработчиков и разрешения конфликтов.
✅Поддерживает рабочие процессы, такие как ветвление (branching) и слияние (merging).

3️⃣Резервное копирование и безопасность:
✅Хранение кода в удаленных репозиториях обеспечивает его сохранность и доступность.
✅Поддерживает механизмы контроля доступа для защиты кода от несанкционированного доступа.

Основные команды для работы

1️⃣Создание репозитория:
✅Локальный репозиторий: git init
✅Клонирование удаленного репозитория: git clone <url>

2️⃣Отслеживание и фиксация изменений:
✅Добавление изменений в индекс: git add <file>
✅Фиксация изменений: git commit -m "Сообщение коммита"

3️⃣Работа с ветками:
✅Создание новой ветки: git branch <branch-name>
✅Переключение на другую ветку: git checkout <branch-name>
✅Создание и переключение на новую ветку: git checkout -b <branch-name>

4️⃣Слияние изменений:
✅Слияние ветки в текущую ветку: git merge <branch-name>

5️⃣Работа с удаленными репозиториями:
✅Добавление удаленного репозитория: git remote add origin <url>
✅Отправка изменений в удаленный репозиторий: git push origin <branch-name>
✅Получение изменений из удаленного репозитория: git pull origin <branch-name>

Пример

1️⃣Создание локального репозитория:

      mkdir my-project
   cd my-project
   git init
   

2️⃣Добавление файла и фиксация изменений:

      echo "# My Project" > README.md
   git add README.md
   git commit -m "Initial commit"
   

3️⃣Подключение к удаленному репозиторию на GitHub:

      git remote add origin https://github.com/username/my-project.git
   git push -u origin master
   

4️⃣Создание новой ветки и работа в ней:

      git checkout -b new-feature
   echo "New feature" > feature.txt
   git add feature.txt
   git commit -m "Add new feature"
   git push origin new-feature
   

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

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

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

Какие функции есть в js ?
Спросят с вероятностью 7%

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

1️⃣Функциональные выражения и объявленные функции

Объявленные функции (Function Declaration)

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

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Alice')); // Hello, Alice!

Функциональные выражения (Function Expression)

Не "всплывают" и не могут быть вызваны до их определения.
const greet = function(name) {
  returned 
};

console.log(greet('Bob')); // Hello, Bob!

2️⃣Стрелочные функции (Arrow Functions)

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

const greet = (name) => Hello, ${name}!;

console.log(greet('Charlie')); // Hello, Charlie!

3️⃣Анонимные функции

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

setTimeout(function() {
  console.log('This will run after 1 second');
}, 1000);

4️⃣Функции-конструкторы

Для создания объектов. Они вызываются с ключевым словом new и обычно имеют заглавную букву в названии.

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

const alice = new Person('Alice', 30);
console.log(alice.name); // Alice

5️⃣Методы объекта

Являются свойствами объекта.

const person = {
  name: 'Alice',
  greet: function() {
    return Hello, my name is ${this.name};
  }
};

console.log(person.greet()); // Hello, my name is Alice

6️⃣Генераторы (Generators)

Могут быть приостановлены и возобновлены в любой момент. Они объявляются с помощью function* и используют ключевое слово yield.

function* generatorFunction() {
  yield 'First';
  yield 'Second';
  yield 'Third';
}

const gen = generatorFunction();
console.log(gen.next().value); // First
console.log(gen.next().value); // Second
console.log(gen.next().value); // Third

7️⃣Асинхронные функции (Async/Await)

Возвращают промис и позволяют использовать синтаксис await для упрощения работы с асинхронным кодом.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

fetchData().then(data => console.log(data));

8️⃣Функции обратного вызова (Callbacks)

Передаваемые в качестве аргументов в другие функции и вызываемые позже.

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'Alice' };
    callback(data);
  }, 1000);
}

fetchData(function(data) {
  console.log(data); // { name: 'Alice' }
});

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

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

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

Как расшифровывается css ?
Спросят с вероятностью 7%

CSS расшифровывается как Cascading Style Sheets, что в переводе означает "каскадные таблицы стилей". Давайте рассмотрим каждый элемент этого термина:

1️⃣Cascading (каскадные):
Этот термин указывает на то, что стили применяются к элементам HTML в определенном порядке приоритетов. Когда стили конфликтуют (например, когда одно и то же свойство задано несколькими стилями), CSS использует каскадные правила для разрешения этих конфликтов. Эти правила включают:
✅Специфичность селекторов (различные типы селекторов имеют разный приоритет).
✅Порядок расположения в коде (последний стиль имеет больший приоритет).
✅Использование ключевого слова !important (приоритет выше всех обычных правил).

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

3️⃣Sheets (таблицы):
CSS-правила обычно хранятся в файлах, которые называются таблицами стилей. Эти файлы могут быть внешними (подключенными к HTML-документу через элемент <link>), встроенными (внутри элемента <style> в самом HTML-документе) или инлайновыми (непосредственно в атрибутах стиля HTML-элементов).

Вот пример CSS, который показывает использование каскадных таблиц стилей для стилизации HTML-документа:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Example</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    .inline-style {
      color: red;
    }
  </style>
</head>
<body>
  <h1 class="heading inline-style">Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

В этом примере:
✅Внешний файл styles.css задает стили для body, h1 и элементов с классом .heading.
✅Встроенные стили в элементе <style> задают цвет текста для элементов с классом .inline-style.
✅Каскадные правила CSS определяют, что цвет текста элемента <h1> будет красным, так как инлайновые стили имеют наибольший приоритет.

CSS расшифровывается как Cascading Style Sheets, что означает "каскадные таблицы стилей". Это язык, используемый для описания внешнего вида и форматирования HTML-документов, поддерживающий каскадные правила для разрешения конфликтов между стилями.

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

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