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

🤔 Что такое DOM дерево - DOM (Document Object Model) — это программный интерфейс для HTML-документов, представляющий структуру страницы в виде дерева узлов. - DOM позволяет программам читать и изменять документ структурно, стилистически и содержательно, реагируя на пользовательские взаимодействия. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие значения будут являться falsy значениями? В JavaScript значения, которые при приведении к логическому типу (boolean) становятся false, называются "falsy" значениями. Существует всего семь таких значений: 🟠`false` Логическое значение false.

console.log(Boolean(false)); // false    

🟠`0` Число ноль.

console.log(Boolean(0)); // false    

🟠`-0` Отрицательное число ноль (хотя это редко встречается на практике).

console.log(Boolean(-0)); // false    

🟠`0n` Число BigInt с значением ноль.

console.log(Boolean(0n)); // false    

🟠`""` (пустая строка) Строка без символов.

console.log(Boolean("")); // false    

🟠`null` Специальное значение, обозначающее отсутствие какого-либо значения.

console.log(Boolean(null)); // false    

🟠`undefined` Специальное значение, обозначающее необъявленное или неприсвоенное значение.

console.log(Boolean(undefined)); // false    

🟠`NaN` Специальное значение, обозначающее не число (Not-a-Number).

console.log(Boolean(NaN)); // false    

🚩Примеры использования 🟠Проверка значений на falsy В условиях (if statements) все falsy значения интерпретируются как false.

const values = [false, 0, -0, 0n, "", null, undefined, NaN];

values.forEach(value => {
    if (!value) {
        console.log(`${value} is falsy`);
    }
});

Примеры в условиях

if (!false) {
    console.log('false is falsy'); // выводится
}

if (!0) {
    console.log('0 is falsy'); // выводится
}

if (!"") {
    console.log('"" is falsy'); // выводится
}

if (!null) {
    console.log('null is falsy'); // выводится
}

if (!undefined) {
    console.log('undefined is falsy'); // выводится
}

if (!NaN) {
    console.log('NaN is falsy'); // выводится
}

🟠Использование в логических операторах Falsy значения также учитываются в логических операциях.

const value = null;

const result = value || 'default value';
console.log(result); // 'default value', потому что value является falsy

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое Git-flow? Git-flow — это модель ветвления в Git для управления разработкой, предложенная Винсентом Дриссеном. Она включает основные ветки (`main`, `develop`) и временные ветки (`feature`, `release`, `hotfix`) для разработки, тестирования и исправления ошибок. Git-flow делает процесс разработки структурированным, но может быть избыточным для небольших или быстрых проектов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Миграция в облако? Это легко! Собственная инфраструктура устарела или не справляется с нагрузками? Используйте облачные ресурсы! Эксперты Yandex Cloud помогут перейти в облако быстро, легко и безопасно. ✅ Мы полностью сопровождаем процесс. ✅ От вас — только инженер с доступом к инфраструктуре. ✅ Архитектура под ваши задачи, миграция и поддержка на каждом шагу — всё включено. ⚡Переходите в Yandex Cloud и забудьте о старом железе. А если успеете подать заявку до 31 декабря, мы покроем расходы на инженеров и тестовую инфраструктуру. Подать заявку #реклама 16+ yandex.cloud О рекламодателе Реклама на Яндексе

🤔 Какие способы создания объекта знаешь? 🟠Литерал объекта (Object Literal) Самый простой и распространенный способ создания объекта.

const obj = {
    name: 'Alice',
    age: 25
};

🟠Конструктор `Object` Создание объекта с помощью конструктора Object.

const obj = new Object();
obj.name = 'Alice';
obj.age = 25;

🟠Функция-конструктор (Constructor Function) Использование функции-конструктора для создания объектов.

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

const alice = new Person('Alice', 25);
const bob = new Person('Bob', 30);

🟠Метод `Object.create` Создание нового объекта с указанным прототипом.

const proto = {
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

const obj = Object.create(proto);
obj.name = 'Alice';
obj.age = 25;

obj.greet(); // Hello, my name is Alice

🟠Класс (Class) Использование классов (синтаксический сахар над функцией-конструктором).

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

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const alice = new Person('Alice', 25);
const bob = new Person('Bob', 30);

alice.greet(); // Hello, my name is Alice
bob.greet(); // Hello, my name is Bob

🟠Фабричная функция (Factory Function) Использование функции для создания и возврата объектов.

function createPerson(name, age) {
    return {
        name: name,
        age: age,
        greet: function() {
            console.log(`Hello, my name is ${this.name}`);
        }
    };
}

const alice = createPerson('Alice', 25);
const bob = createPerson('Bob', 30);

alice.greet(); // Hello, my name is Alice
bob.greet(); // Hello, my name is Bob

🟠JSON.parse Создание объекта из JSON-строки.

const jsonString = '{"name": "Alice", "age": 25}';
const obj = JSON.parse(jsonString);

console.log(obj.name); // Alice
console.log(obj.age); // 25

🟠Использование Spread/Rest операторов Создание копий объектов или объединение объектов.

const obj1 = { name: 'Alice' };
const obj2 = { age: 25 };

const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { name: 'Alice', age: 25 }

const copiedObj = { ...obj1 };
console.log(copiedObj); // { name: 'Alice' }

🟠Функции-генераторы объектов Использование функций для динамического создания объектов.

function createPerson(name, age) {
    return {
        name,
        age,
        greet() {
            console.log(`Hello, my name is ${this.name}`);
        }
    };
}

const alice = createPerson('Alice', 25);
alice.greet(); // Hello, my name is Alice

Ставь 👍 и забирай 📚 Базу знаний

✅️ GitHub теперь в Telegram! Подписывайтесь: @GitHub

🤔 Что такое HTTP? HTTP (Hypertext Transfer Protocol) — это протокол для передачи данных между клиентом (браузером) и сервером. Он работает на основе запросов (GET, POST, PUT, DELETE) и ответов, предоставляя возможность обмениваться текстом, медиа и другими данными. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как определить наличие свойства в объекте? 🚩Оператор `in` Оператор in проверяет, существует ли указанное свойство в объекте или его прототипе.

const obj = {
    name: 'Alice',
    age: 25
};

console.log('name' in obj); // true
console.log('age' in obj); // true
console.log('gender' in obj); // false

🚩Метод `hasOwnProperty` Метод hasOwnProperty проверяет, существует ли указанное свойство непосредственно в объекте (не в его прототипе).

const obj = {
    name: 'Alice',
    age: 25
};

console.log(obj.hasOwnProperty('name')); // true
console.log(obj.hasOwnProperty('age')); // true
console.log(obj.hasOwnProperty('gender')); // false

🚩Оператор `undefined` Вы также можете проверить, является ли значение свойства undefined. Однако этот метод не отличает отсутствие свойства от свойства, имеющего значение undefined.

const obj = {
    name: 'Alice',
    age: 25,
    gender: undefined
};

console.log(obj.name !== undefined); // true
console.log(obj.age !== undefined); // true
console.log(obj.gender !== undefined); // false, хотя свойство есть, его значение undefined
console.log(obj.height !== undefined); // false, так как свойство отсутствует

🚩Примеры использования 🟠Оператор `in` и наследование Если свойство находится в цепочке прототипов, оператор in вернет true.

const parentObj = {
    inheritedProperty: 'I am inherited'
};

const childObj = Object.create(parentObj);
childObj.ownProperty = 'I am own property';

console.log('inheritedProperty' in childObj); // true
console.log('ownProperty' in childObj); // true
console.log(childObj.hasOwnProperty('inheritedProperty')); // false
console.log(childObj.hasOwnProperty('ownProperty')); // true

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

const nestedObj = {
    user: {
        name: 'Alice',
        address: {
            city: 'Wonderland'
        }
    }
};

console.log('user' in nestedObj && 'name' in nestedObj.user); // true
console.log('user' in nestedObj && 'age' in nestedObj.user); // false
console.log('user' in nestedObj && 'address' in nestedObj.user && 'city' in nestedObj.user.address); // true

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое IIFE? IIFE (Immediately Invoked Function Expression) — это функция в JavaScript, которая вызывается сразу после определения. Она используется для создания изолированного пространства имён, чтобы избежать конфликтов в глобальной области видимости. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как мерить скорость работы и отзывчивость сайта? 🟠Web Vitals Google разработал набор метрик, называемых Web Vitals, которые оценивают ключевые аспекты пользовательского опыта: Largest Contentful Paint (LCP): Время загрузки основного контента страницы. First Input Delay (FID): Время от первого взаимодействия пользователя с сайтом до момента, когда браузер начинает обработку этого взаимодействия. Cumulative Layout Shift (CLS): Стабильность макета страницы (измеряет неожиданные сдвиги контента). 🟠Инструменты для измерения производительности Google Lighthouse: Инструмент, встроенный в Chrome DevTools, который анализирует страницу и предлагает улучшения. PageSpeed Insights: Онлайн-сервис от Google, который предоставляет отчеты о производительности сайта на мобильных и десктопных устройствах. WebPageTest: Позволяет проводить детализированные тесты производительности с разными настройками сети и устройства. 🟠Встроенные инструменты браузера Chrome DevTools: Включает вкладку "Performance" для записи и анализа производительности загрузки страницы и исполнения скриптов. Network Panel: Показывает время загрузки различных ресурсов, что помогает найти "узкие места". 🟠Мониторинг в реальном времени Google Analytics: Предоставляет отчеты о скорости загрузки страниц. New Relic, Datadog: Платформы для мониторинга производительности приложений и сайтов в реальном времени. 🟠Оптимизация и анализ Использование CDN (Content Delivery Network): Ускоряет доставку контента пользователям, снижая задержки. Минимизация и сжатие ресурсов: Уменьшение размеров файлов CSS, JavaScript и изображений. Кэширование: Хранение копий статических ресурсов для ускорения повторных посещений. 🚩Пример использования 1⃣Откройте сайт в браузере Google Chrome. 2⃣Нажмите F12, чтобы открыть DevTools. 3⃣Перейдите на вкладку "Performance". 4⃣Нажмите "Record" и обновите страницу. 5⃣После завершения загрузки остановите запись. Вы получите детальный отчет о производительности страницы. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что приоритетнее использовать TS или JS? TypeScript предпочтительнее для больших проектов, так как он предоставляет типизацию, которая предотвращает ошибки на этапе компиляции. JS используется в более простых сценариях или там, где требуется гибкость и нет необходимости в строгой типизации. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое шаблонные литералы, и для чего они нужны? Были введены в ECMAScript 2015 (ES6) и представляют собой улучшение стандартных строк в JavaScript. Они облегчают работу с строками, предоставляя более удобный синтаксис для создания многострочных строк, интерполяции переменных и встроенных выражений. 🚩Примеры использования 🟠Интерполяция переменных и выражений Шаблонные литералы позволяют встраивать переменные и выражения внутрь строк с помощью синтаксиса ${}.

const name = 'Alice';
const age = 25;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting);
// Вывод: Hello, my name is Alice and I am 25 years old.

🟠Многострочные строки Шаблонные литералы позволяют создавать многострочные строки без необходимости использования символов переноса строки (\n).

const multiLineString = `This is a string
that spans across
multiple lines.`;

console.log(multiLineString);
// Вывод:
// This is a string
// that spans across
// multiple lines.

🟠Встроенные выражения Внутри шаблонных литералов можно использовать любые JavaScript-выражения.

const a = 5;
const b = 10;

const result = `The sum of ${a} and ${b} is ${a + b}.`;

console.log(result);
// Вывод: The sum of 5 and 10 is 15.

🟠Вызов функций внутри шаблонных литералов Можно вызывать функции и методы внутри шаблонных литералов.

function toUpperCase(str) {
    return str.toUpperCase();
}

const name = 'Alice';

const loudGreeting = `Hello, ${toUpperCase(name)}!`;

console.log(loudGreeting);
// Вывод: Hello, ALICE!

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

function tag(strings, ...values) {
    console.log(strings);
    console.log(values);
    return 'Tagged template';
}

const name = 'Alice';
const age = 25;

const taggedResult = tag`Name: ${name}, Age: ${age}`;

console.log(taggedResult);
// Вывод:
// [ 'Name: ', ', Age: ', '' ]
// [ 'Alice', 25 ]
// Tagged template

Ставь 👍 и забирай 📚 Базу знаний

Как живет айтишник, который зарабатывает 5000$ в мес? Живет хорошо! За глубокие знания и умение решать самые сложные задачи его ценят в любой команде: от стартапа до крупной корпорации. А он умеет продавать себя, получать лучшие предложения на работу и эффективно распределять время. Для этого нужно всего 5 минут в день читать канал айтишника. Здесь вы найдёте практические советы, инсайды и секреты от разработчика с 11+ лет опыта, о которых не рассказывают на курсах. 5 минут на канале заменят месяцы самостоятельного изучения. Подписывайтесь: https://t.me/+gWRY7DmrzpRhOWVi

🤔 Что такое псевдоэлемент? Псевдоэлемент — это CSS-конструкция, которая позволяет стилизовать определённые части элемента, например, ::before для добавления контента перед элементом или ::after для добавления после. Это удобно для оформления, не изменяя HTML-структуру. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Map filter reduce foreach, для чего нужны, особенности использования? Методы map, filter, reduce и forEach в JavaScript предназначены для обработки массивов и предоставляют мощные инструменты для работы с данными. Эти методы упрощают и делают код более читаемым и декларативным. 🚩forEach Метод forEach выполняет указанную функцию один раз для каждого элемента в массиве.

const array = [1, 2, 3, 4, 5];

array.forEach((element) => {
    console.log(element);
});

🚩Особенности 🟠Не возвращает значение forEach просто выполняет функцию для каждого элемента и не возвращает новый массив или значение. 🟠Использование Подходит для выполнения побочных эффектов, таких как логирование или изменение элементов массива. 🚩map Метод map создаёт новый массив с результатом вызова указанной функции для каждого элемента массива.

const array = [1, 2, 3, 4, 5];

const doubled = array.map((element) => {
    return element * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

🟠Возвращает новый массив Каждый элемент нового массива является результатом вызова функции. 🟠Использование Подходит для преобразования данных, не изменяя исходный массив. 🚩filter Метод filter создаёт новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции.

const array = [1, 2, 3, 4, 5];

const evenNumbers = array.filter((element) => {
    return element % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

🟠Возвращает новый массив Включает только те элементы, которые соответствуют условию. 🟠Использование Подходит для фильтрации данных на основе заданного условия. 🚩reduce Метод reduce выполняет функцию редуктора (сборщика) для каждого элемента массива, сводя массив к одному значению.

const array = [1, 2, 3, 4, 5];

const sum = array.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 0);

console.log(sum); // 15

🟠Возвращает одно значение Результат выполнения функции редуктора. 🟠Начальное значение Второй аргумент функции reduce задает начальное значение аккумулятора. 🟠Использование Подходит для агрегирования данных, например, для вычисления суммы, произведения или объединения значений. Ставь 👍 и забирай 📚 Базу знаний

– Помощь с pet-проектом – Составление roadmap – Общая консультация – Проведение код-ревью и mock-собеседования – Помощь с трудоустройством Все это и многое другое может Ментор. Он обеспечит вам необходимый boost, ускорит и упростит вход в IT. 🔥 Здесь размещен список менторов, и многие из них предлагают бесплатную первую консультацию

🤔 В чём разница между макро- и микро-задачами? Макро-задачи (например, setTimeout, setInterval) выполняются в основном цикле событий после выполнения текущего стека. Микро-задачи (например, Promise, queueMicrotask) имеют более высокий приоритет и выполняются сразу после текущего выполнения кода, до обработки макро-задач. Микро-задачи используются для обработки данных в реальном времени, а макро-задачи — для отложенных действий. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое bootstrap? Это популярный фреймворк для разработки интерфейсов веб-приложений. Он включает в себя набор инструментов для создания адаптивных и удобных для пользователя веб-страниц. Bootstrap предоставляет готовые CSS и JavaScript компоненты. 🚩Основные компоненты 🟠Сетка (Grid System) Bootstrap использует гибкую сеточную систему, основанную на 12 колонках, что позволяет создавать адаптивные макеты. Вы можете легко управлять расположением элементов на странице для различных размеров экранов.

<div class="container">
    <div class="row">
        <div class="col-md-4">Колонка 1</div>
        <div class="col-md-4">Колонка 2</div>
        <div class="col-md-4">Колонка 3</div>
    </div>
</div>   

🟠Компоненты Bootstrap включает множество готовых компонентов, таких как кнопки, формы, карточки, навигационные панели, модальные окна и многое другое. Эти компоненты можно легко стилизовать и настроить.

<button type="button" class="btn btn-primary">Основная кнопка</button>   

🟠JavaScript плагины В Bootstrap также включены JavaScript плагины, которые добавляют интерактивность и динамичность. Например, модальные окна, карусели, выпадающие меню и другие.

<!-- Кнопка для вызова модального окна -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Запустить модальное окно
</button>

<!-- Модальное окно -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Название модального окна</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Содержимое модального окна.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">Сохранить изменения</button>
            </div>
        </div>
   </div>
</div>   

🟠Утилиты В Bootstrap имеются утилиты для быстрого добавления часто используемых стилей, таких как отступы, цвета, выравнивание текста и другие. Эти утилиты позволяют быстро применять стили без написания дополнительных CSS-классов.

<div class="p-3 mb-2 bg-primary text-white">Основной фон с отступами и белым текстом</div>   

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие селекторы знаешь? CSS-селекторы включают: Простые: селекторы тегов (div), классов (.class), ID (#id), атрибутов ([type="text"]). Комбинаторы: потомок (A B), прямой потомок (A > B), сосед (A + B), все последующие (A ~ B). Псевдоклассы: :hover, :nth-child(n), :first-of-type. Псевдоэлементы: ::before, ::after, ::placeholder. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое миксины в препроцессорах? Миксины в препроцессорах CSS, таких как Sass, LESS и Stylus, представляют собой переиспользуемые блоки кода, которые можно вставлять в другие блоки стилей. Они позволяют группировать наборы стилей, которые можно повторно использовать по всему CSS-файлу. Это помогает уменьшить дублирование кода и упростить его поддержку. 🚩Примеры использования миксинов 1⃣Определение миксина

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}   

2⃣Использование миксина

.box {
    @include border-radius(10px);
}

.button {
    @include border-radius(5px);
}   

🚩Пример на LESS 1⃣Определение миксина

.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

2⃣Использование миксина

.box {
.border-radius(10px);
}

.button {
.border-radius(5px);
}

🚩Пример на Stylus 1⃣Определение миксина

border-radius(radius)
  -webkit-border-radius: radius
  -moz-border-radius: radius
 border-radius: radius   

2⃣Использование миксина

.box
border-radius(10px)

.button
border-radius(5px

Ставь 👍 и забирай 📚 Базу знаний