🤔 Что такое миксины в препроцессорах?

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

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

🤔 Какие селекторы знаешь?

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.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое 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>   

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

🤔 В чём разница между макро- и микро-задачами?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 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 задает начальное значение аккумулятора.
🟠Использование
Подходит для агрегирования данных, например, для вычисления суммы, произведения или объединения значений.

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

🤔 Что такое псевдоэлемент?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое шаблонные литералы, и для чего они нужны?

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

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

🤔 Что приоритетнее использовать TS или JS?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как мерить скорость работы и отзывчивость сайта?

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

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

🤔 Что такое IIFE?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как определить наличие свойства в объекте?

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

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

🤔 Что такое HTTP?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие способы создания объекта знаешь?

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

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

🤔 Что такое Git-flow?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие значения будут являться 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

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

🤔 Что такое DOM дерево

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как использовать 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 делает обработку ошибок более явной и удобной.
➕Последовательность выполнения
синхронные операции выполняются в логической последовательности, что упрощает написание сложных асинхронных цепочек.

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

🤔 Что такое IIFE?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как избежать ссылочной зависимости при копировании объекта?

Чтобы избежать ссылочной зависимости при копировании объекта в 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

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

🤔 Что приоритетнее использовать TS или JS?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний