Найти в Дзене

Вопросы для собеседования в IT (React, JS, CSS, Typescript, общие вопросы) Часть 2

💬 Простыми словами:
Объекты — основа всего в JavaScript. Есть несколько способов создать объект с данными и методами. 🛠 Способы создания: 🧪 Пример: const obj1 = { name: 'Аня' }; // через литерал
const obj2 = new Object(); // редко используется
const proto = { sayHi() { console.log('Привет!'); } };
const obj3 = Object.create(proto); // с заданным прототипом 💡 Полезно знать:
Литерал — самый распространённый способ. Object.create() полезен при контроле над прототипами. 💬 Простыми словами:
Falsy — это значения, которые в логических условиях ведут себя как false. 🛠 Список falsy значений: 🧪 Пример: if (!0) console.log('0 — falsy');
if (!'') console.log('пустая строка — falsy');
if (!undefined) console.log('undefined — falsy'); 💡 Полезно знать:
Любое значение, не входящее в этот список, будет truthy, то есть воспринимается как true. 💬 Простыми словами:
Promise — это объект, который помогает работать с асинхронными операциями (например, запросами к серверу). 🛠 Состояния: 🧪
Оглавление

🔹 Блок 2: JavaScript — структура и поведение объектов

11. 📌 Какие способы создания объекта вы знаете?

💬 Простыми словами:

Объекты — основа всего в JavaScript. Есть несколько способов создать объект с данными и методами.

🛠 Способы создания:

  • Литерал: { ключ: значение }
  • Конструктор: new Object()
  • С помощью Object.create(proto)
  • Через функции-конструкторы
  • Через классы (ES6+)

🧪 Пример:

const obj1 = { name: 'Аня' }; // через литерал

const obj2 = new Object(); // редко используется

const proto = { sayHi() { console.log('Привет!'); } };
const obj3 = Object.create(proto); // с заданным прототипом

💡 Полезно знать:
Литерал — самый распространённый способ. Object.create() полезен при контроле над прототипами.

12. 📌 Какие значения являются falsy?

💬 Простыми словами:

Falsy — это значения, которые в логических условиях ведут себя как false.

🛠 Список falsy значений:

  • false
  • 0
  • '' (пустая строка)
  • null
  • undefined
  • NaN

🧪 Пример:

if (!0) console.log('0 — falsy');
if (!'') console.log('пустая строка — falsy');
if (!undefined) console.log('undefined — falsy');

💡 Полезно знать:
Любое значение, не входящее в этот список, будет truthy, то есть воспринимается как true.

13. 📌 Что такое Promise?

💬 Простыми словами:

Promise — это объект, который помогает работать с асинхронными операциями (например, запросами к серверу).

🛠 Состояния:

  • pending — ожидание
  • fulfilled — успешно
  • rejected — ошибка

🧪 Пример:

const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('Готово!'), 1000);
});

promise.then(data => console.log(data)); // "Готово!"

💡 Полезно знать:
Promise можно объединять в цепочки через .then(), .catch(), .finally().

14. 📌 Как использовать async/await?

💬 Простыми словами:
Это способ писать асинхронный код, как будто он обычный (синхронный).

🛠 Как работает:

  • async перед функцией → функция возвращает Promise
  • await — "ждёт", пока Promise завершится

🧪 Пример:

async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
}

💡 Полезно знать:
await работает только внутри async функции. Ошибки можно ловить через try...catch.

15. 📌 Для чего нужен оператор spread (...)?

💬 Простыми словами:

Позволяет "развернуть" массив, объект или строку — будто мы вручную перечислили их содержимое.

🛠 Где применяют:

  • При объединении массивов
  • При клонировании объектов
  • При передаче аргументов

🧪 Пример:

const arr1 = [1, 2];
const arr2 = [3, ...arr1, 4]; // [3, 1, 2, 4]

const obj = { a: 1, b: 2 };
const copy = { ...obj, c: 3 }; // { a: 1, b: 2, c: 3 }

💡 Полезно знать:
Удобно использовать spread для поверхностного копирования, но он не делает глубокую копию.

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

💬 Простыми словами:

Если вы просто присвоите объект другому, они будут "связаны" — изменения в одном повлияют на другой.

🛠 Поверхностное копирование:

const copy = { ...original };
const copy2 = Object.assign({}, original);

🛠 Глубокое копирование:

const deepCopy = JSON.parse(JSON.stringify(obj)); // простой способ

💡 Полезно знать:

Для сложных объектов используйте lodash (cloneDeep) или рекурсивную функцию.

17. 📌 Как поменять контекст функции (this)?

💬 Простыми словами:

Иногда нужно, чтобы функция использовала this от другого объекта.

🛠 Способы:

  • call — вызывает с передачей аргументов
  • apply — то же, но аргументы — массив
  • bind — возвращает новую функцию с привязанным this

🧪 Пример:

function showName() {
console.log(this.name);
}

const user = { name: 'Иван' };

showName.call(user); // Иван
showName.apply(user); // Иван

const bound = showName.bind(user);
bound(); // Иван

18. 📌 Что такое тернарный оператор?

💬 Простыми словами:

Это сокращённая форма конструкции if...else.

🛠 Синтаксис:

условие ? значениеЕслиИстина : значениеЕслиЛожь;

🧪 Пример:

const age = 18;
const access = age >= 18 ? 'Разрешено' : 'Запрещено';

💡 Полезно знать:

Тернарный оператор удобен для коротких условий, но лучше избегать вложенности ради читаемости.

19. 📌 Что такое деструктуризация?

💬 Простыми словами:

Это способ "распаковать" значения из объекта или массива в переменные.

🛠 Примеры:

const user = { name: 'Оля', age: 28 };
const { name, age } = user;

const arr = [1, 2, 3];
const [a, b] = arr;

💡 Полезно знать:

Можно указывать значения по умолчанию:

const { city = 'Москва' } = user;

20. 📌 Какие есть способы работы с асинхронным кодом?

💬 Простыми словами:

Асинхронный код — это код, который выполняется не сразу (например, загрузка с сервера). Есть три способа его обрабатывать:

🛠 Способы:

  • Callbacks (функции обратного вызова)
  • Promises
  • async/await

🧪 Пример callback'ов:

setTimeout(() => {
console.log('1 секунда прошла');
}, 1000);

🧪 Пример с Promise:

fetch('/data')
.then(response => response.json())
.then(data => console.log(data));

🧪 Пример с async/await:

async function loadData() {
const res = await fetch('/data');
const json = await res.json();
console.log(json);
}

💡 Полезно знать:

Использование async/await делает код проще и легче читается.