Геттеры и сеттеры
Геттеры и сеттеры в JavaScript — это методы, которые позволяют вам контролировать доступ к свойствам объекта. Они используются для получения (геттеры) и установки (сеттеры) значений свойств объекта. Геттеры и сеттеры предоставляют возможность добавлять дополнительную логику при доступе к свойствам, например, для валидации данных или преобразования значений.
📌 Геттеры (Getters)
Геттер — это метод, который вызывается при обращении к свойству объекта. Он позволяет вам вычислить и вернуть значение свойства вместо того, чтобы просто его хранить.
📌 Сеттеры (Setters)
Сеттер — это метод, который вызывается при попытке установить значение свойства. Он позволяет вам контролировать, какие значения могут быть присвоены свойству, и выполнять дополнительные действия при присвоении.
📌 Применение
Геттеры и сеттеры часто используются, когда необходимо:
✔️ Добавить логику в момент чтения или записи свойства.
✔️ Контролировать доступ к приватным данным.
✔️ Создать свойства, значение которых вычисляется на основе других данных.
✔️ Обеспечить валидацию данных при установке значений.
#frontend #javascript
Геттеры и сеттеры в JavaScript — это методы, которые позволяют вам контролировать доступ к свойствам объекта. Они используются для получения (геттеры) и установки (сеттеры) значений свойств объекта. Геттеры и сеттеры предоставляют возможность добавлять дополнительную логику при доступе к свойствам, например, для валидации данных или преобразования значений.
Геттер — это метод, который вызывается при обращении к свойству объекта. Он позволяет вам вычислить и вернуть значение свойства вместо того, чтобы просто его хранить.
const person = {
firstName: 'John',
get fullName() {
return `${this.firstName}`;
}
};
console.log(person.fullName); // "John"
Сеттер — это метод, который вызывается при попытке установить значение свойства. Он позволяет вам контролировать, какие значения могут быть присвоены свойству, и выполнять дополнительные действия при присвоении.
const person = {
firstName: 'John',
lastName: 'Doe',
set fullName(name) {
const [first, last] = name.split(' ');
this.firstName = first;
this.lastName = last;
}
};
person.fullName = 'Jane Smith';
console.log(person.firstName); // "Jane"
console.log(person.lastName); // "Smith"
Геттеры и сеттеры часто используются, когда необходимо:
#frontend #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Проблема изменения вложенных объектов при использовании map
При использовании метода map для создания нового массива объектов, возникает проблема, если объекты содержат вложенные объекты. Хотя map возвращает новый массив, вложенные объекты внутри элементов массива остаются ссылками на те же объекты, что и в оригинальном массиве.
⚠️ Что происходит:
- В исходном массиве persons есть объект с вложенным объектом address.
- Метод map создает новый массив newPersons, в котором каждый элемент копируется с использованием оператора расширения {...person}.
- Однако, несмотря на создание нового объекта верхнего уровня, вложенный объект address в обоих массивах (persons и newPersons) ссылается на один и тот же объект.
📌 Результат
Изменения, внесенные в newPersons, также повлияют на оригинальный массив persons, так как вложенные объекты не были скопированы глубоко.
✔️ Решение
Чтобы избежать этого, нужно использовать глубокое копирование вложенных объектов, например, с использованием JSON.parse(JSON.stringify(person)) или библиотек, которые поддерживают глубокое копирование.
В реальных проектах стараются избегать необходимости глубокого клонирования на каждом шаге. Вместо этого можем частично склонировать
#frontend #javascript
При использовании метода map для создания нового массива объектов, возникает проблема, если объекты содержат вложенные объекты. Хотя map возвращает новый массив, вложенные объекты внутри элементов массива остаются ссылками на те же объекты, что и в оригинальном массиве.
const persons = [{
name: 'Ivan',
address: {
ul: 1
}
}]
const newPersons = persons.map(person => {
person.address.ul = 2
return {...person}
})
console.log(persons)
console.log(newPersons)
- В исходном массиве persons есть объект с вложенным объектом address.
- Метод map создает новый массив newPersons, в котором каждый элемент копируется с использованием оператора расширения {...person}.
- Однако, несмотря на создание нового объекта верхнего уровня, вложенный объект address в обоих массивах (persons и newPersons) ссылается на один и тот же объект.
Изменения, внесенные в newPersons, также повлияют на оригинальный массив persons, так как вложенные объекты не были скопированы глубоко.
Чтобы избежать этого, нужно использовать глубокое копирование вложенных объектов, например, с использованием JSON.parse(JSON.stringify(person)) или библиотек, которые поддерживают глубокое копирование.
В реальных проектах стараются избегать необходимости глубокого клонирования на каждом шаге. Вместо этого можем частично склонировать
const newPersons = persons.map(person => {
return {
...person,
address: { ...person.address, ul: 2 }
}
})
#frontend #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Типы и структуры данных
Типы данных и структуры данных часто путают, но это две разные концепции, которые играют важную роль в программировании.
📌 Типы данных — это категории, в которые классифицируются данные. Они определяют, какие операции можно выполнять с этими данными и как они хранятся в памяти. В JavaScript есть примитивные и ссылочные типы данных:
📌 Структуры данных — это способы организации и хранения данных в памяти таким образом, чтобы к ним было удобно обращаться и эффективно работать. В JavaScript структуры данных включают:
❓ В чем разница?
Типы данных — это отдельные значения (например, число или строка), тогда как структуры данных — это контейнеры, организующие и хранящие эти значения для более сложных операций (например, массив или объект).
Тип данных определяет, что это за значение, а структура данных — как эти значения организованы.
#frontend #javascript
👍 Менторство | 🔝 Сообщество
Типы данных и структуры данных часто путают, но это две разные концепции, которые играют важную роль в программировании.
Примитивные типы данных: Number, String, Boolean, Null, Undefined, Symbol, BigInt.
Ссылочные типы данных: Object (включая массивы, функции и даты).
Массивы (Array): Упорядоченные списки элементов, доступ к которым осуществляется по индексу.
Объекты (Object): Коллекции пар "ключ-значение", где ключи — это строки (или символы), а значения могут быть любыми типами данных.
Наборы (Set): Коллекции уникальных значений, где каждое значение может появляться только один раз.
Карты (Map): Коллекции пар "ключ-значение", где ключи могут быть любого типа, не только строками.
Типы данных — это отдельные значения (например, число или строка), тогда как структуры данных — это контейнеры, организующие и хранящие эти значения для более сложных операций (например, массив или объект).
Тип данных определяет, что это за значение, а структура данных — как эти значения организованы.
#frontend #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Сравнение объектов и Map в JavaScript
📌 Тип ключей:
Объект: Ключи приводятся к строкам. Любой нестроковый ключ, например объект, будет преобразован в строку.
Map: Ключи могут быть любого типа, включая объекты, функции и числа.
📌 Порядок ключей:
Объект: Порядок ключей не гарантирован.
Map: Порядок ключей сохраняется в том порядке, в котором они были добавлены.
📌 Итерация:
Объект: Нужно использовать Object.keys(), Object.values(), или Object.entries() для итерации.
Map: Поддерживает методы для итерации по умолчанию, включая map.keys(), map.values(), и map.entries().
📌 Дополнительные методы:
Объект: Ограниченные возможности, требует использования Object.keys(), Object.values(), и других вспомогательных функций для работы с данными. Для очистки свойств нужно явно удалять каждое свойство.
Map: Обладает множеством удобных методов:
set(key, value): Добавляет элемент.
get(key): Получает значение по ключу.
has(key): Проверяет наличие ключа.
delete(key): Удаляет элемент.
clear(): Удаляет все элементы.
#frontend #javascript #map #object
Объект: Ключи приводятся к строкам. Любой нестроковый ключ, например объект, будет преобразован в строку.
Map: Ключи могут быть любого типа, включая объекты, функции и числа.
const obj = {};
const map = new Map();
const keyObj = {};
obj[keyObj] = 'value'; // Ключ преобразуется в "[object Object]"
map.set(keyObj, 'value'); // Ключ остается объектом
console.log(obj[keyObj]); // 'value'
console.log(map.get(keyObj)); // 'value'
Объект: Порядок ключей не гарантирован.
Map: Порядок ключей сохраняется в том порядке, в котором они были добавлены.
const obj = { b: 2, a: 1 };
const map = new Map([['b', 2], ['a', 1]]);
console.log(Object.keys(obj)); // ['b', 'a'] (порядок не гарантирован)
console.log([...map.keys()]); // ['b', 'a'] (порядок гарантирован)
Объект: Нужно использовать Object.keys(), Object.values(), или Object.entries() для итерации.
Map: Поддерживает методы для итерации по умолчанию, включая map.keys(), map.values(), и map.entries().
const obj = { a: 1, b: 2 };
const map = new Map([['a', 1], ['b', 2]]);
for (const key in obj) {
console.log(key, obj[key]);
}
for (const [key, value] of map) {
console.log(key, value);
}
Объект: Ограниченные возможности, требует использования Object.keys(), Object.values(), и других вспомогательных функций для работы с данными. Для очистки свойств нужно явно удалять каждое свойство.
Map: Обладает множеством удобных методов:
set(key, value): Добавляет элемент.
get(key): Получает значение по ключу.
has(key): Проверяет наличие ключа.
delete(key): Удаляет элемент.
clear(): Удаляет все элементы.
#frontend #javascript #map #object
Please open Telegram to view this post
VIEW IN TELEGRAM
Чем отличаются циклы for...in и for...of в JavaScript
Цикл for...in используется для перебора свойств объекта (ключей), а также всех индексов массива, если он используется с массивом. Это важно: for...in перебирает ключи (индексы массива), а не значения.
Пример с объектом:
Пример с массивом:
Цикл for...of используется для перебора значений итерируемых объектов, таких как массивы, строки, Map, Set и т.д. Он перебирает значения.
Пример с массивом:
Пример со строкой:
❓ Как запомнить
Используйте for...in для обхода ключей объектов или индексов массива. Используйте for...of для обхода значений массивов, строк или других итерируемых объектов.
#frontend #javascript
for...in
Цикл for...in используется для перебора свойств объекта (ключей), а также всех индексов массива, если он используется с массивом. Это важно: for...in перебирает ключи (индексы массива), а не значения.
Пример с объектом:
const car = {
make: 'Toyota',
model: 'Corolla',
year: 2020
};
for (const key in car) {
console.log(key, car[key]);
}
// make Toyota
// model Corolla
// year 2020
Пример с массивом:
const fruits = ['apple', 'banana', 'cherry'];
for (const index in fruits) {
console.log(index, fruits[index]);
}
// 0 apple
// 1 banana
// 2 cherry
for...of
Цикл for...of используется для перебора значений итерируемых объектов, таких как массивы, строки, Map, Set и т.д. Он перебирает значения.
Пример с массивом:
const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
console.log(fruit);
}
// apple
// banana
// cherry
Пример со строкой:
const name = 'Alice';
for (const char of name) {
console.log(char);
}
// A
// l
// i
// c
// e
for...in
– для индексов и свойств объекта.for...of
– для объектов итерируемых, значений.Используйте for...in для обхода ключей объектов или индексов массива. Используйте for...of для обхода значений массивов, строк или других итерируемых объектов.
#frontend #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Она позволяет задавать шаблон для объектов, чтобы каждый новый объект, созданный через этот конструктор, имел определенные свойства и методы. Давайте разберем, как работает функция-конструктор.
Функция-конструктор выглядит как обычная функция, но она пишется с заглавной буквы по соглашению, чтобы отличаться от других функций. Внутри конструктора используется this для задания свойств создаваемого объекта.
function Person(name, age) {
this.name = name; // свойство name
this.age = age; // свойство age
}
Чтобы создать объект с помощью конструктора, используется оператор new. Он:
- Создает новый пустой объект.
- Связывает его с this внутри конструктора.
- Возвращает этот объект.
const person1 = new Person("Alice", 25);
console.log(person1.name); // Alice
console.log(person1.age); // 25
Если мы добавим метод прямо в конструктор, то он будет копироваться в каждый новый объект, что может тратить память.
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log(`Hi, I'm ${this.name}`);
};
}
const person1 = new Person("Alice", 25);
person1.sayHello(); // Hi, I'm Alice
Для методов можно использовать prototype, чтобы метод существовал в одном экземпляре и не копировался для каждого объекта.
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function() {
console.log(`Hi, I'm ${this.name}`);
};
const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);
person1.sayHello(); // Hi, I'm Alice
person2.sayHello(); // Hi, I'm Bob
В функции-конструкторе this указывает на новый объект, который создается при вызове через new. Это позволяет настраивать свойства и методы нового объекта.
- Наследование. Используя прототипы, можно создавать наследуемые свойства и методы.
- Проверка с instanceof. Для проверки, создан ли объект через конструктор, можно использовать instanceof.
console.log(person1 instanceof Person); // true
#javascript #this #function
Please open Telegram to view this post
VIEW IN TELEGRAM
В этом видео мы разберем 5 главных правил использования this в JavaScript, которые помогут вам не запутаться и успешно пройти собеседование на фронтенд-разработчика!
- Как работает this в стрелочных функциях.
- Почему важно, как вызывается функция, а не где она создается.
- Как this ведет себя в методах объектов.
- Как режим выполнения (strict или нестрогий) влияет на значение this.
- Как управлять this с помощью методов bind, call и apply.
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#this #frontend #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Каким будет вывод этого фрагмента кода?
function f() {
this.x = 5;
console.log(this);
}
var o = new f();
console.log(o.x);
Каким будет вывод этого фрагмента кода?
var o = {
f: function() {
return this;
}
}
console.log(o.f())
Каким будет вывод этого фрагмента кода?
var o = {
f: function() {
return this;
}
}
var o2 = {f: o.f};
console.log(o.f());
console.log(o2.f())
Каким будет вывод этого фрагмента кода?
function f() {
console.log( this );
}
let user = {
g: f.bind(null)
};
user.g();
Каким будет вывод этого фрагмента кода?
function sayHi() {
alert( this.name );
}
sayHi.test = 5;
let bound = sayHi.bind({
name: "Вася"
});
alert( bound.test );
#this #frontend #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Одна из самых важных тем в JavaScript - это функции. Без них трудно создать даже простое приложение. Мы используем их для обработки событий, логики и асинхронных операций. С помощью функций мы пишем переиспользуемый и чистый код
Все концепции которые мы рассмотрим в этом видео спрашивают на собеседованиях
- Колбеки (Callbacks)
- Замыкания (Closures)
- Чистые функции (Pure Functions)
-
this
в функциях- Асинхронные функции (async/await)
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #javascript #функции
Please open Telegram to view this post
VIEW IN TELEGRAM
1. Реализуйте функцию throttle. throttle позволяет "ограничить" количество вызовов функции до одного раза в заданный период времени, даже если функция была вызвана множество раз.
2. Реализуйте функцию debounce. Дебаунсинг позволяет "задержать" выполнение функции до тех пор, пока не пройдет определенный период времени без ее вызова.
3. Реализуйте функцию sleep. Функция sleep позволяет задержать выполнение кода на определенное количество времени.
4. Реализуйте функцию memoize, которая принимает функцию fn в качестве аргумента и возвращает новую функцию. Новая функция должна кэшировать результаты вызовов fn для уникальных наборов аргументов.
Начальный код:
function memoize(fn) {
}
// Пример использования
function slowFunction(num) {
// Симуляция тяжелых вычислений
for (let i = 0; i < 1e9; i++) {}
return num * 2;
}
const memoizedSlowFunction = memoize(slowFunction);
console.log(memoizedSlowFunction(5)); // Вычисляет и кэширует результат
console.log(memoizedSlowFunction(5)); // Возвращает закэшированный результат
#javascript #livecoding
Please open Telegram to view this post
VIEW IN TELEGRAM
1. Каким будет вывод этого фрагмента кода?
var foo = 1;
function bar() {
if (!foo) {
var foo = 10;
}
console.log(foo);
}
bar();
2. Каким будет вывод этого фрагмента кода?
function foo() {
var x = 1;
if (x) {
(function () {
var x = 2;
}());
}
console.log(x)
}
3. Каким будет вывод этого фрагмента кода?
function f() {
console.log( this );
}
let user = {
g: f.bind(null)
};
user.g();
4. Каким будет вывод этого фрагмента кода?
function greetWaitAndAgain() {
console.log(`Hello, ${this.name}!`)
setTimeout(() => {
console.log(`Hello again, ${this.name}!`)
})
}
const user = { name: 'Alex' }
user.greetWaitAndAgain = greetWaitAndAgain;
user.greetWaitAndAgain()
5. Каким будет вывод этого фрагмента кода?
function f() {
this.x = 5;
console.log(this);
}
var o = new f();
console.log(o.x);
#this #javascript #замыкание #собеседование
Please open Telegram to view this post
VIEW IN TELEGRAM
В этом видео мы разберем 5 типичных задач по JavaScript, которые могут встретиться на собеседовании на фронтенд-разработчика!
- Задача на строки, методы и циклы
- Задача на строки, циклы и условия
- Задача на колбек, массивы, прототип и циклы
- Задача на объекты, массивы, графы и цепочки
- Задача на промисы, замыкания и асинхронность
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #javascript #функции
Please open Telegram to view this post
VIEW IN TELEGRAM
Как и обещал в видео, предоставляю задачи с собеседований
1. Реализуйте полифил myFilter точно копирующий filter метод
Array.prototype.myFilter = function(callback) {
};
const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.myFilter(x => x > 2);
console.log(filteredArr); // [3, 4, 5]
2. Найти все индексы начала вхождения анаграмм подстроки в строке
function searchAllAnagramsInString(str, substr) {
}
// Пример использования:
console.log(searchAllAnagramsInString("cbaebabacd", "abc")); // [0, 6]
3. Найти самый загруженный день в отеле
function findMaxDayWithClients(bookings) {
// Реализуйте логику поиска самого загруженного дня
}
findMaxDayWithClients([[1, 5], [2, 4], [3, 6]]); // 3
// В день 3 отель был максимально загружен (3 клиента)
4. Представим, что у нас нет встроенных промис-комбинаторов, как можно реплицировать функциональность Promise.all?
function customPromiseAll(promises) {
}
// Пример использования
const promise1 = Promise.resolve(3);
const promise2 = Promise.resolve(42);
const promise3 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));
customPromiseAll([promise1, promise2, promise3])
.then(results => console.log(results)) // [3, 42, 'foo']
.catch(error => console.error(error));
5. Необходимо сгруппировать транзакции по userID.
const transactions = [
{ userID: "user1", amount: 200, date: "2023-01-01" },
{ userID: "user2", amount: 500, date: "2023-01-02" },
{ userID: "user1", amount: 300, date: "2023-01-03" },
{ userID: "user3", amount: 400, date: "2023-01-01" },
{ userID: "user2", amount: 150, date: "2023-01-04" },
{ userID: "user3", amount: 250, date: "2023-01-02" },
{ userID: "user4", amount: 100, date: "2023-01-01" }
];
function topThreeUsersByTotalAmount(transactions) {
//тут
}
#javascript #лайвкодинг
Please open Telegram to view this post
VIEW IN TELEGRAM
В этом видео мы подробно разберем выполнение кода в задачах по Event Loop шаг за шагом. Мы визуализируем процесс на схеме, чтобы показать, что происходит с кодом в момент его выполнения. Разберемся, как работает стек вызовов, что такое микротаски, макротаски и как они взаимодействуют в процессе обработки событий. Это видео поможет вам глубже понять внутреннюю работу Event Loop в JavaScript, что критически важно для собеседований и практических задач.
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #javascript #eventloop
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯 Подборка сложных вопросов с собеседований
1. Какая разница в tree-shaking у CJS и ESM?
ESM (ECMAScript Modules):
- Статический анализ на этапе сборки → можно точно определить неиспользуемый код.
- Импорты (import/export) фиксированы, что позволяет оптимизировать бандл.
CJS (CommonJS):
- Динамические require() → сборщик не может заранее знать, какие части модуля будут использоваться.
- Загружает модуль целиком, что мешает tree-shaking.
2. Какую часть спецификации ES нельзя реализовать через полифиллы и транспиляцию?
Proxy – требует нативной поддержки браузера, так как работает на низком уровне (перехват операций с объектами). Vue 2 для старых браузеров использовал Object.defineProperty вместо Proxy.
3. Для чего используется <picture>, кроме выбора формата изображения?
Адаптивные изображения:
- Разные версии картинки под разные размеры экрана (media-атрибуты).
- Оптимизация под ретину (srcset).
- Fallback для старых браузеров (<img> внутри).
- Разгрузка мобильных сетей (легкие версии).
4. Зачем нужен тег <base>?
Задает базовый URL для всех относительных ссылок на странице.
5. Как в runtime проверить поддержку CSS-свойства?
Альтернатива: @supports в CSS.
6. Как называется реактивность в React?
Не настоящая реактивность (как в Svelte/Solid/Vue). React использует "pull-based" модель (перерисовка по изменению состояния). Гранулярная реактивность (сигналы, Proxy) – когда обновляются только зависимые части.
7. Как определить системную тему (dark/light)?
В JS:
В CSS:
8. Что такое CSS Container Query?
Аналог @media, но зависящий от размера контейнера, а не viewport. Позволяет адаптировать стили для компонентов (например, карточка меняет layout в узком контейнере).
9. Что будет с padding: 1,5px?
Непредсказуемо! Это синтаксическая ошибка (запятая вместо точки), но браузер попытается "починить". Может интерпретироваться как 1px, 15px или проигнорироваться.
Вывод: так писать нельзя, только padding: 1.5px.
10. Как из массива [1, 2, 3] получить тип 1 | 2 | 3?
Без as const тип будет number[].
11. Разница между import { ReactNode } и import { type ReactNode }?
Обычный импорт:
Импорт типа (TypeScript 4.5+):
Полезно для оптимизации бандла (импорты только для типов не включаются в JS-код).
#собеседования #react #javascript #typescript
1. Какая разница в tree-shaking у CJS и ESM?
ESM (ECMAScript Modules):
- Статический анализ на этапе сборки → можно точно определить неиспользуемый код.
- Импорты (import/export) фиксированы, что позволяет оптимизировать бандл.
CJS (CommonJS):
- Динамические require() → сборщик не может заранее знать, какие части модуля будут использоваться.
- Загружает модуль целиком, что мешает tree-shaking.
2. Какую часть спецификации ES нельзя реализовать через полифиллы и транспиляцию?
Proxy – требует нативной поддержки браузера, так как работает на низком уровне (перехват операций с объектами). Vue 2 для старых браузеров использовал Object.defineProperty вместо Proxy.
3. Для чего используется <picture>, кроме выбора формата изображения?
Адаптивные изображения:
- Разные версии картинки под разные размеры экрана (media-атрибуты).
- Оптимизация под ретину (srcset).
- Fallback для старых браузеров (<img> внутри).
- Разгрузка мобильных сетей (легкие версии).
4. Зачем нужен тег <base>?
Задает базовый URL для всех относительных ссылок на странице.
<base href="https://example.com/assets/">
<img src="logo.png"> <!-- Загрузится https://example.com/assets/logo.png -->
5. Как в runtime проверить поддержку CSS-свойства?
if (CSS.supports('display', 'grid')) {
console.log('Grid поддерживается!');
}
Альтернатива: @supports в CSS.
6. Как называется реактивность в React?
Не настоящая реактивность (как в Svelte/Solid/Vue). React использует "pull-based" модель (перерисовка по изменению состояния). Гранулярная реактивность (сигналы, Proxy) – когда обновляются только зависимые части.
7. Как определить системную тему (dark/light)?
В JS:
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Следить за изменением темы
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
console.log(e.matches ? 'Тёмная тема' : 'Светлая тема');
});
В CSS:
@media (prefers-color-scheme: dark) {
body { background: #000; color: #fff; }
}
8. Что такое CSS Container Query?
Аналог @media, но зависящий от размера контейнера, а не viewport. Позволяет адаптировать стили для компонентов (например, карточка меняет layout в узком контейнере).
.container { container-type: inline-size; }
@container (max-width: 500px) {
.card { flex-direction: column; }
}
9. Что будет с padding: 1,5px?
Непредсказуемо! Это синтаксическая ошибка (запятая вместо точки), но браузер попытается "починить". Может интерпретироваться как 1px, 15px или проигнорироваться.
Вывод: так писать нельзя, только padding: 1.5px.
10. Как из массива [1, 2, 3] получить тип 1 | 2 | 3?
const arr = [1, 2, 3] as const; // Делаем кортеж
type T = typeof arr[number]; // 1 | 2 | 3
Без as const тип будет number[].
11. Разница между import { ReactNode } и import { type ReactNode }?
Обычный импорт:
import { ReactNode } from 'react'; // Может попасть в бандл.
Импорт типа (TypeScript 4.5+):
import { type ReactNode } from 'react'; // Удаляется при компиляции.
Полезно для оптимизации бандла (импорты только для типов не включаются в JS-код).
#собеседования #react #javascript #typescript