Frontend | Вопросы собесов
@easy_javascript_ru
19.3K subscribers
32 photos
2 videos
909 links
Сайт easyoffer.ru
Реклама @easyoffer_adv
ВП @easyoffer_vp

Тесты t.me/+T0COHtFzCJkwMDUy
Задачи t.me/+_tcX2w2EmvdmMTgy
Вакансии t.me/+CgCAzIyGHHg0Nzky
Download Telegram
About
Blog
Apps
Platform
Join
Frontend | Вопросы собесов
19.3K subscribers
Frontend | Вопросы собесов
🤔 Как сделать вращения по оси x и y заметными?

Чтобы сделать вращения по осям X и Y заметными, нужно учитывать перспективу. Перспектива добавляет глубину к элементам, позволяя визуально различать вращение по осям X и Y. В CSS для этого используются свойства perspective и transform.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            perspective: 800px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 50px;
            transform-style: preserve-3d;
            transition: transform 1s;
        }
        .rotate-x {
            transform: rotateX(45deg);
        }
        .rotate-y {
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box rotate-x"></div>
        <div class="box rotate-y"></div>
    </div>
</body>
</html>


🚩Объяснение

🟠Контейнер с перспективой
Определяет глубину перспективы. Меньшие значения делают перспективу более выраженной, большие значения — более плоской. 
.container {
    perspective: 800px;
}


🟠Элемент с трехмерной трансформацией
Обеспечивает сохранение трехмерных преобразований для потомков элемента. Добавляет плавный переход при изменении трансформации.
.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 50px;
    transform-style: preserve-3d;
    transition: transform 1s;
}


🟠Вращение по оси X
Вращает элемент на 45 градусов вокруг оси X.
.rotate-x {
    transform: rotateX(45deg);
}



🟠Вращение по оси Y
Вращает элемент на 45 градусов вокруг оси Y.
.rotate-y {
    transform: rotateY(45deg);
}


🚩Зачем это нужно

🟠Перспектива
Добавляет визуальную глубину, делая трехмерные эффекты более реалистичными.
🟠Трехмерные эффекты
Вращение по осям X и Y без перспективы не будет выглядеть объемным. Перспектива помогает зрительно отличить, что элемент вращается в трехмерном пространстве.

Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17
5.42K views
Frontend | Вопросы собесов
🤔 Что такое хук?

Хук — это функция в React, которая позволяет использовать состояние и другие возможности React в функциональных компонентах (например, useState, useEffect).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥6
4.91K views
Frontend | Вопросы собесов
🤔 Как сделать анимацию бесконечно повторяющейся?

Чтобы создать бесконечно повторяющуюся анимацию в CSS, используется свойство animation вместе с параметром infinite, который указывает, что анимация должна повторяться бесконечно.

🚩Основные шаги

1⃣Определение ключевых кадров анимации
с помощью @keyframes.
2⃣Применение анимации к элементу с использованием свойства animation и указанием параметра infinite.

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

Сначала создайте анимацию с ключевыми кадрами. Допустим, мы хотим, чтобы элемент плавно изменял цвет и возвращался к исходному состоянию.
@keyframes changeColor {
    0% {
        background-color: lightblue;
    }
    50% {
        background-color: lightgreen;
    }
    100% {
        background-color: lightblue;
    }
}


Теперь применим эту анимацию к элементу и укажем, что она должна повторяться бесконечно.
.animated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    animation: changeColor 3s infinite;
}


🚩Зачем это нужно

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

Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15💊4
5.13K views
Frontend | Вопросы собесов
🤔 В чём отличие хранения данных в local storage от сессий?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍39🔥9❤2
4.42K views
Frontend | Вопросы собесов
🤔 Для чего используются препроцессоры?

Препроцессоры используются для расширения возможностей CSS, упрощения написания стилей и улучшения организации кода. Они добавляют функциональность, которая отсутствует в стандартном CSS, такую как переменные, вложенные правила, миксины, функции и операции. Основные препроцессоры, такие как Sass, LESS и Stylus, помогают разработчикам писать более чистый, структурированный и поддерживаемый код.

🚩Основные преимущества препроцессоров

🟠Переменные
Препроцессоры позволяют использовать переменные для хранения значений, таких как цвета, размеры и другие повторяющиеся значения. Это упрощает изменение стилей, поскольку изменения нужно вносить только в одном месте.
// Пример на Sass
$primary-color: #3498db;
$font-size: 16px;

body {
    color: $primary-color;
    font-size: $font-size;
}


🟠Вложенные правила
В стандартном CSS вложенность не поддерживается, что может затруднять чтение и поддержку кода. Препроцессоры позволяют использовать вложенные правила, что делает структуру кода более логичной и читаемой.
// Пример на Sass
.nav {
    background: #eee;

    ul {
        margin: 0;
        padding: 0;

        li {
            display: inline-block;

            a {
                color: #333;
            }
        }
    }
}


🟠Миксины
Миксины позволяют определять повторяющиеся блоки стилей и использовать их в разных местах кода. Это помогает избежать дублирования и облегчает внесение изменений.
// Пример на Sass
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

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


🟠Функции и операции
Препроцессоры поддерживают использование функций и операций для выполнения вычислений и обработки значений непосредственно в CSS-коде.
// Пример на Sass
$base-font-size: 16px;

.large-text {
    font-size: $base-font-size * 1.5;
}


🟠Импорт файлов
Препроцессоры позволяют разбивать CSS на несколько файлов и импортировать их в основной файл стилей. Это улучшает организацию кода и его поддерживаемость.
// Пример на Sass
@import 'variables';
@import 'mixins';
@import 'base';
@import 'layout';
@import 'components';


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍34
5.12K views
Frontend | Вопросы собесов
🤔 Что такое CSS?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25😁8🔥2💊2
4.68K views
Frontend | Вопросы собесов
🤔 Что такое миксины в препроцессорах?

Миксины в препроцессорах 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


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25
5.01K views
Frontend | Вопросы собесов
🤔 Какие селекторы знаешь?

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.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍39🔥7🤯1
4.59K views
Frontend | Вопросы собесов
🤔 Что такое 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>


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17
4.75K views
Frontend | Вопросы собесов
🤔 В чём разница между макро- и микро-задачами?

Макро-задачи (например, setTimeout, setInterval) выполняются в основном цикле событий после выполнения текущего стека. Микро-задачи (например, Promise, queueMicrotask) имеют более высокий приоритет и выполняются сразу после текущего выполнения кода, до обработки макро-задач. Микро-задачи используются для обработки данных в реальном времени, а макро-задачи — для отложенных действий.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥10
4.54K views
Frontend | Вопросы собесов
🤔 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 задает начальное значение аккумулятора.
🟠Использование
Подходит для агрегирования данных, например, для вычисления суммы, произведения или объединения значений.

Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23❤1
5.42K views
Frontend | Вопросы собесов
🤔 Что такое псевдоэлемент?

Псевдоэлемент — это CSS-конструкция, которая позволяет стилизовать определённые части элемента, например, ::before для добавления контента перед элементом или ::after для добавления после. Это удобно для оформления, не изменяя HTML-структуру.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥1
4.93K views
Frontend | Вопросы собесов
🤔 Что такое шаблонные литералы, и для чего они нужны?

Были введены в 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


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23❤3
5.08K views
Frontend | Вопросы собесов
🤔 Что приоритетнее использовать TS или JS?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28🔥4❤3
4.59K views
Frontend | Вопросы собесов
🤔 Как мерить скорость работы и отзывчивость сайта?

🟠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⃣После завершения загрузки остановите запись. Вы получите детальный отчет о производительности страницы.

Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22❤1
5.58K views
Frontend | Вопросы собесов
🤔 Что такое IIFE?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥3🤯2💊1
4.73K views
Frontend | Вопросы собесов
🤔 Как определить наличие свойства в объекте?

🚩Оператор `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


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31❤1
5.14K views
Frontend | Вопросы собесов
🤔 Что такое HTTP?

HTTP (Hypertext Transfer Protocol) — это протокол для передачи данных между клиентом (браузером) и сервером. Он работает на основе запросов (GET, POST, PUT, DELETE) и ответов, предоставляя возможность обмениваться текстом, медиа и другими данными.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍34🔥2❤1💊1
4.6K views
Frontend | Вопросы собесов
🤔 Какие способы создания объекта знаешь?

🟠Литерал объекта (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


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍34🔥4
4.91K views
Frontend | Вопросы собесов
🤔 Что такое Git-flow?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25👍15
4.68K views