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

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

Концептуальные офисы в БЦ RUNOVSKY 14 Концептуальное офисное пространство для работы, расположенное в историческом центре Москвы в районе Замоскворечье. Проект имеет свой неповторимый характер. Переосмысление стиля ар-деко нашло свое отражение в черных фасадах с арочным остеклением. БЦ находится в 2 минутах ходьбы от метро "Новокузнецкая", через которую проходят основные пешие маршруты до Третьяковской галереи, парка Зарядья и Московкского Кремля. Проектом предусмотрено большое количество планировочных решений офисов площадью от 27 м2 с возможностью объединения смежных помещений. Тех, кто решит купить лот в "RUNOVSKY 14", ждет премиальный сервис, безопасность и комфортная атмосфера. Перейти на сайт #реклама зиккурат.рф О рекламодателе

🤔 Как отслеживать и обрабатывать ошибки в javascript? 🟠Использование try...catch Оператор try...catch позволяет обрабатывать ошибки, возникающие в блоке try. Если возникает ошибка, выполнение кода переходит к блоку catch.

try {
    // Код, который может вызвать ошибку
    let result = riskyOperation();
    console.log(result);
} catch (error) {
    // Обработка ошибки
    console.error('Произошла ошибка:', error.message);
}

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

function riskyOperation() {
    throw new Error('Что-то пошло не так');
}

try {
    riskyOperation();
} catch (error) {
    console.error('Произошла ошибка:', error.message); // Произошла ошибка: Что-то пошло не так
}

🟠Использование блока finally Блок finally выполняется после того, как были выполнены блоки try и catch. Он выполняется независимо от того, произошла ли ошибка.

try {
    let result = riskyOperation();
    console.log(result);
} catch (error) {
    console.error('Произошла ошибка:', error.message);
} finally {
    console.log('Этот блок выполнится в любом случае');
}

🟠Обработка ошибок в асинхронных функциях Для обработки ошибок в асинхронных функциях, использующих async/await, также можно использовать try...catch.

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Произошла ошибка при получении данных:', error.message);
    }
}

fetchData();

🟠Использование промисов При работе с промисами можно использовать методы catch и finally для обработки ошибок.

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Произошла ошибка при получении данных:', error.message);
    })
    .finally(() => {
        console.log('Запрос завершен');
    });

🟠Глобальная обработка ошибок Для глобальной обработки ошибок можно использовать обработчики событий window.onerror и window.onunhandledrejection. Обработка ошибок выполнения

window.onerror = function(message, source, lineno, colno, error) {
    console.error('Произошла глобальная ошибка:', message);
    return true; // предотвращает вывод ошибки в консоль браузера
};

Обработка неотловленных промисов

window.onunhandledrejection = function(event) {
    console.error('Неотловленный отказ в промисе:', event.reason);
};

🟠Пользовательские ошибки Можно создавать собственные ошибки с помощью класса Error.

class CustomError extends Error {
    constructor(message) {
        super(message);
        this.name = 'CustomError';
    }
}

try {
    throw new CustomError('Это пользовательская ошибка');
} catch (error) {
    console.error(error.name + ': ' + error.message); // CustomError: Это пользовательская ошибка
}

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

Бесплатный практический вебинар: Веб-разработчик: с нуля до мини-игры за 2 часа. ⏰ Когда: 23 декабря в 19:00 по мск. Погрузитесь в решение реальной задачи и напишите небольшую игру на HTML, JS и CSS, которая работает прямо в браузере 🎮 Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии. 🎁 Всем, кто зарегистрировался - гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  карта компетенций начинающего Frontend-разработчика и гайд «Как опубликовать страницу в интернете при помощи GitHub Pages»

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

Elax готов к любому вашему отдыху! С Elax на диване: от прыжков до просмотра. С Elax на кровати: хоть лежать, хоть работать. Отдыхай как хочешь, если внутри Elax! Познакомься с инновационным наполнителем для мягкой мебели и матрасов! Узнать больше #реклама elax.ru О рекламодателе

🤔 Как избежать ссылочной зависимости при копировании объекта? Чтобы избежать ссылочной зависимости при копировании объекта в JavaScript, необходимо создать глубокую копию объекта. Глубокая копия означает, что все вложенные объекты и массивы также будут скопированы, а не просто ссылки на них. 🟠Использование JSON.stringify и JSON.parse Этот метод подходит для простых объектов, не содержащих функций, специальных объектов (например, Date) или циклических ссылок.

const original = {
    name: 'Alice',
    age: 25,
    address: {
        city: 'Wonderland',
        zip: '12345'
    }
};

const copy = JSON.parse(JSON.stringify(original));
copy.address.city = 'Otherland';

console.log(original.address.city); // Wonderland
console.log(copy.address.city);     // Otherland

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

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    if (Array.isArray(obj)) {
        const arrCopy = [];
        obj.forEach((item, index) => {
            arrCopy[index] = deepClone(item);
        });
        return arrCopy;
    }

    const objCopy = {};
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            objCopy[key] = deepClone(obj[key]);
        }
    }
    return objCopy;
}

const original = {
    name: 'Alice',
    age: 25,
    address: {
        city: 'Wonderland',
        zip: '12345'
    }
};

const copy = deepClone(original);
copy.address.city = 'Otherland';

console.log(original.address.city); // Wonderland
console.log(copy.address.city);     // Otherland

🟠Использование библиотеки lodash Lodash предоставляет удобную функцию cloneDeep для глубокого копирования объектов.

const _ = require('lodash');

const original = {
    name: 'Alice',
    age: 25,
    address: {
        city: 'Wonderland',
        zip: '12345'
    }
};

const copy = _.cloneDeep(original);
copy.address.city = 'Otherland';

console.log(original.address.city); // Wonderland
console.log(copy.address.city);     // Otherland

🟠Использование структурированной клонирования (Structured Clone) Метод structuredClone позволяет создавать глубокие копии объектов. Этот метод является частью HTML Living Standard и поддерживается в некоторых современных браузерах и средах исполнения.

const original = {
    name: 'Alice',
    age: 25,
    address: {
        city: 'Wonderland',
        zip: '12345'
    }
};

const copy = structuredClone(original);
copy.address.city = 'Otherland';

console.log(original.address.city); // Wonderland
console.log(copy.address.city);     // Otherland

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

А вы знали что?... 🕵️В Windows есть папка, которая собирает на вас компромат! Посмотрите видео выше — насколько легко узнать всю информацию о вас Простых способов узнать о вас практически всё — сотни, и если вы хотите соблюдать хотя бы минимум сетевой гигиены — подпишитесь на IT ВЕДОМСТВО Они рассказывает о признаках майнеров, как удалить трояны и порно-баннеры за 5 минут Помимо всего этого, сейчас владелец канала проводит розыгрыш умной колонки, для всех новоприбывших подписчиков 💻 Подписываемся на IT ВЕДОМСТВО — выигрываем призы и соблюдаем цифровую гигиену

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

Премиальное кросс-купе EXEED RX. От 45 000 ₽ в месяц Создавайте будущее в новом году вместе с EXEED RX. Система стабилизации курсовой устойчивости, полный пакет систем безопасности и интеллектуальный полный привод позволят чувствовать себя уверенно в любом путешествии. Автомобили отлично подготовлены к условиям российской зимы: максимальный пакет теплых опций и система EXEED Connect - двигатель и салон будут прогреты к началу поездки, Вы сможете выбрать необходимую температуру салона, прогреть сиденья водителя и пассажиров. Открывайте новые места и путешествуйте с удовольствием! Чудеса обитают там, где в них верят - пусть эта зима станет началом счастливого приключения, а EXEED поможет в этом! Получить предложение #реклама exeed.ru О рекламодателе

🤔 Как использовать async await для асинхронных запросов? async и await — это синтаксический сахар в JavaScript, предназначенный для упрощения работы с промисами и асинхронными операциями. Они позволяют писать асинхронный код, который выглядит как синхронный, улучшая его читаемость и удобство использования. 🚩Основные концепции 🟠`async` Ключевое слово, которое используется перед функцией для обозначения её как асинхронной. Асинхронная функция всегда возвращает промис. 🟠`await` Ключевое слово, которое используется внутри асинхронной функции для ожидания выполнения промиса. Оно приостанавливает выполнение функции до тех пор, пока промис не будет выполнен. 🚩Пример использования для асинхронных запросов Пример с fetch

// Асинхронная функция для выполнения запроса и обработки данных
async function fetchData(url) {
    try {
        // Ожидание выполнения запроса
        const response = await fetch(url);
        
        // Проверка статуса ответа
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }

        // Ожидание преобразования ответа в JSON
        const data = await response.json();

        // Работа с данными
        console.log(data);
    } catch (error) {
        // Обработка ошибок
        console.error('Fetch error:', error);
    }
}

// Вызов асинхронной функции
fetchData('https://api.example.com/data');

1⃣Объявление асинхронной функции

async function fetchData(url) { ... }   

2⃣Использование await для ожидания выполнения запроса

const response = await fetch(url);   

3⃣Обработка ошибок с использованием try...catch

try {
    ...
} catch (error) {
    ...
}   

4⃣Ожидание преобразования ответа в JSON

const data = await response.json();   

🚩Плюсы ➕Читаемость Код выглядит как синхронный, что упрощает его понимание и сопровождение. ➕Управление ошибками Использование блоков try...catch делает обработку ошибок более явной и удобной. ➕Последовательность выполнения синхронные операции выполняются в логической последовательности, что упрощает написание сложных асинхронных цепочек. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое 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, которая вызывается сразу после определения. Она используется для создания изолированного пространства имён, чтобы избежать конфликтов в глобальной области видимости. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний