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

Что такое функция в js ? Спросят с вероятностью 7% Функция — это блок кода, предназначенный для выполнения конкретной задачи, который может быть вызван многократно в разных местах программы. Функции позволяют структурировать код, повышать его читаемость и повторно использовать части кода. Зачем они нужны 1️⃣Повторное использование кода: Один раз написав функцию, можно вызывать её множество раз с разными аргументами, не переписывая один и тот же код. 2️⃣Упрощение и структурирование кода: Функции помогают разбивать программу на логические блоки, что делает код более понятным и поддерживаемым. 3️⃣Инкапсуляция: Функции могут скрывать внутреннюю реализацию и предоставлять только необходимый интерфейс. Как они создаются Есть несколько способов создания функций: 1️⃣Function Declaration (Объявление функции):

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('Alice')); // Hello, Alice!

Функция объявляется с помощью ключевого слова function, за которым следуют имя функции, список параметров в круглых скобках и тело функции в фигурных скобках. 2️⃣Function Expression (Функциональное выражение):

const greet = function(name) {
  return

ни нужны

1️⃣Повтор

};
console.log(greet('Bob')); // Hello, Bob!

Функция создается и присваивается переменной. Такие функции могут быть анонимными (без имени). 3️⃣Arrow Function (Стрелочная функция):

const greet = (name) => {
  return

 Hello, ${name}!;

};
console.log(greet('Carol')); // Hello, Carol!

Стрелочные функции имеют более короткий синтаксис и не имеют своего контекста this. Вызов функции Функцию можно вызвать, используя её имя и передавая необходимые аргументы в круглых скобках:

function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // 5

Параметры и аргументы ✅Параметры — это переменные, которые перечислены в круглых скобках при объявлении функции. ✅Аргументы — это значения, которые передаются функции при её вызове. Возвращаемое значение Функция может возвращать значение с помощью ключевого слова return. Если return отсутствует, функция возвращает undefined.

function multiply(a, b) {
  return a * b;
}
console.log(multiply(4, 5)); // 20

Область видимости Переменные, объявленные внутри функции, имеют локальную область видимости и недоступны за её пределами:

function scopeExample() {
  let localVar = 'I am local';
  console.log(localVar); // I am local
}
scopeExample();
console.log(localVar); // ReferenceError: localVar is not defined

Замыкания (Closures) Функции имеют доступ к переменным из внешних функций благодаря замыканиям:

function outerFunction() {
  let outerVar = 'I am outside!';
  function innerFunction() {
    console.log(outerVar);
  }
  return innerFunction;
}
const inner = outerFunction();
inner(); // I am outside!

Функция — это блок кода, который можно многократно использовать. Функции помогают делать код структурированным, повторно используемым и более читаемым. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Кибербезопасность на высшем уровне для вашего бизнеса Защита мобильных устройств сотрудников от всех видов угроз. – Совместимость с iOS, Android и Avrora OS – Защита от вредоносных ПО и антифишинг – Контроль функциональности (запрет камеры, Bluetooth и т.д.) и приложений – Управление безопасностью через единую консоль Перейти на сайт #реклама 16+ go.kaspersky.com О рекламодателе

Когда используются переменные, var, let, const ? Спросят с вероятностью 7% Переменные объявляются с помощью ключевых слов var, let и const. Они имеют разные особенности и используются в разных ситуациях. var Использовался до появления ES6 (ECMAScript 2015) и обладает следующими особенностями: 1️⃣Область видимости: var имеет функциональную область видимости, то есть она видна внутри функции, где была объявлена, или в глобальной области, если объявлена вне функций. 2️⃣Поднятие (hoisting): Объявления с var поднимаются вверх своей области видимости, но присвоение значения происходит в том месте, где оно записано. Это значит, что переменную можно использовать до ее объявления. 3️⃣Повторное объявление: Переменные, объявленные с var, могут быть переобъявлены в пределах одной и той же области видимости. Пример:

function exampleVar() {
  console.log(x); // undefined
  var x = 10;
  console.log(x); // 10
}
exampleVar();

let Появился в ES6 и решает многие проблемы, связанные с var: 1️⃣Область видимости: let имеет блочную область видимости, то есть виден только внутри блока {}, в котором объявлен. 2️⃣Поднятие (hoisting): Хотя объявления с let поднимаются, доступ к ним возможен только после строки, где они объявлены (временная мертвая зона). 3️⃣Повторное объявление: Нельзя переобъявить переменную, объявленную с let, в той же области видимости. Пример:

function exampleLet() {
  console.log(y); // ReferenceError: y is not defined
  let y = 10;
  console.log(y); // 10
}
exampleLet();

const Также введённый в ES6, используется для объявления констант: 1️⃣Область видимости: Как и let, имеет блочную область видимости. 2️⃣Поднятие (hoisting): Ведет себя аналогично let в плане поднятия и временной мертвой зоны. 3️⃣Изменение значения: Переменная, объявленная с const, должна быть инициализирована при объявлении и её значение нельзя изменить после этого. Однако, если const используется для объявления объекта или массива, можно изменять их содержимое. Пример:

function exampleConst() {
  const z = 10;
  console.log(z); // 10
  z = 20; // TypeError: Assignment to constant variable.
}
exampleConst();

function exampleConstObject() {
  const obj = { key: 'value' };
  obj.key = 'new value'; // Изменение допустимо
  console.log(obj.key); // 'new value'
}
exampleConstObject();

Когда использовать ✅`var`: Обычно рекомендуется избегать, так как let и const обеспечивают лучшую управляемость кода. ✅`let`: Используется для переменных, которые могут изменяться в процессе выполнения программы. ✅`const`: Используется для значений, которые не будут переназначены. Это помогает предотвратить ошибки и делает код более предсказуемым. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Jobski - твой помощник при поиске работы в IT Сервис индивидуально подбирает вакансии, учитывая ваш опыт, навыки и стек технологий. Узнать больше #реклама jobski.ru О рекламодателе

❓React-компоненты работают медленно и требуют оптимизации? Хотите узнать, как сделать их быстрыми и эффективными? Ждем вас на открытом вебинаре «Оптимизация работы компонентов в React.js» 6 августа в 19:00 мск, где мы разберём: - как работать с оптимизацией в React.js; - особенности работы функциональных компонентов и хуков; - трюк с мемоизацией коллбеков для списка элементов. Урок будет полезен как начинающим разработчикам React, так и опытным специалистам, которые хотят глубже изучить процесс мемоизации. Встречаемся в рамках курса «React.js Developer». Все участники вебинара получат специальную цену на обучение! 👉 Регистрация открыта: https://otus.pw/sAIa/?erid=LjN8JtKYb Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

Как сравнить объекты в js ? Спросят с вероятностью 7% Сравнение объектов требует особого внимания, поскольку объекты являются ссылочными типами данных. Это значит, что при сравнении объектов вы фактически сравниваете их ссылки в памяти, а не их содержимое. Вот несколько способов сравнения объектов: 1️⃣Сравнение ссылок на объекты При сравнении объектов с использованием оператора равенства (== или ===), сравниваются их ссылки, а не содержимое.

const obj1 = { a: 1 };
const obj2 = { a: 1 };
const obj3 = obj1;

console.log(obj1 === obj2); // false
console.log(obj1 === obj3); // true

2️⃣Глубокое сравнение объектов Для сравнения содержимого объектов необходимо проверять каждое свойство. Один из способов — написать рекурсивную функцию для глубокого сравнения.

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) {
    return true;
  }

  if (obj1 == null || typeof obj1 !== 'object' ||
      obj2 == null || typeof obj2 !== 'object') {
    return false;
  }

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  for (let key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }

  return true;
}

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(deepEqual(obj1, obj2)); // true
console.log(deepEqual(obj1, obj3)); // false

3️⃣Использование библиотек Существуют библиотеки, которые предоставляют функции для глубокого сравнения объектов, например, lodash или deep-equal.

const _ = require('lodash');

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(_.isEqual(obj1, obj2)); // true
console.log(_.isEqual(obj1, obj3)); // false

4️⃣Проверка свойств с учетом порядка и типов Для простых случаев можно использовать сериализацию объектов с помощью JSON.stringify, однако этот метод имеет ограничения и может не работать с более сложными структурами (например, с функциями, undefined, или символами).

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true
console.log(JSON.stringify(obj1) === JSON.stringify(obj3)); // false

Для сравнения объектов можно использовать: ✅Сравнение ссылок с ===, если нужно проверить, указывают ли переменные на один и тот же объект. ✅Глубокое сравнение с помощью рекурсивной функции или библиотек (например, lodash), чтобы проверить равенство содержимого объектов. ✅Сериализация с JSON.stringify для простых случаев, хотя этот метод имеет ограничения и может не работать с более сложными структурами. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

🔥 Битый код - канал для настоящих кодеров! 🔴 Тебе надоело сталкиваться с багами и ошибками в коде? 🔴 Хочешь прокачать свои навыки и узнать, как эффективно решать сложные задачи? ⭐️ Тогда тебе к нам! На канале Битый код ты найдешь: 🟡 Советы по оптимизации кода 🟡 Практические примеры и решения 🧠 Развивай свои навыки программирования вместе с нами и становись настоящим профессионалом! 🔥 Присоединяйся к Битому коду и учись исправлять ошибки как настоящий мастер.

Бесплатный курс по дизайну в FIGMA Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По результату обучения у вас будет портфолио из нескольких работ. Сертификат о прохождении курса. Возможность пройти полное обучение и получить гарантированное трудоустройство! Учитесь дизайну у профессионалов. Переходи по кнопки: "Узнать больше" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤯 Чтобы не сидеть в творческом беспорядке, структурируй его с помощью Куб прогресса. Тут ты найдешь кучу советов для ITшника: 🟡 пользуйся полезными сайтами 🟡 подчеркивай интересные мысли 🛞 Начинай внедрять лайфхаки - создай структуру внутри себя

В приватной базе собесов уже больше 100 записей. Яндекс, Тиньков, Сбербанк, Самокат, Озон и другие крупные компании в базе.

Почему важно указывать ширину и высоту для картинок ? Спросят с вероятностью 7% Указание ширины и высоты для изображений в HTML имеет несколько важных преимуществ, которые влияют на производительность, рендеринг и пользовательский опыт: 1️⃣Улучшение производительности и оптимизация рендеринга ✅Предотвращение перерисовок и переформатирования (reflows): Когда браузер загружает страницу, он сначала строит DOM (Document Object Model) и CSSOM (CSS Object Model). Если размеры изображений не указаны, браузеру приходится ждать, пока изображения загрузятся, чтобы узнать их размеры. Это может вызвать переформатирование страницы, когда элементы перемещаются, чтобы освободить место для изображений. Указание размеров заранее позволяет браузеру зарезервировать нужное пространство, избегая дополнительных перерисовок и улучшая производительность. 2️⃣Улучшение пользовательского опыта ✅Стабильная компоновка (layout stability): Когда размеры изображений указаны, браузер может зарезервировать пространство для каждого изображения до его загрузки. Это предотвращает смещение контента во время загрузки страницы, обеспечивая более плавный и предсказуемый пользовательский опыт. 3️⃣Быстрая загрузка страниц ✅Эффективное использование сетевых ресурсов: Знание точных размеров изображений позволяет браузеру более эффективно обрабатывать загрузку и отображение контента, уменьшая задержки и улучшая общую производительность страницы. 4️⃣Сокращение времени до первого отрисовки (First Contentful Paint, FCP) ✅Оптимизация рендеринга: Когда браузер знает размеры изображений, он может быстрее отрисовать контент страницы, даже если изображения еще не загружены. Это сокращает время до первого отрисовки (FCP), что является важным показателем производительности. Рассмотрим пример HTML-кода, в котором указаны размеры изображения:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Size Example</title>
  <style>
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <h1>Example Image</h1>
  <img src="image.jpg" width="600" height="400" alt="Example Image">
</body>
</html>

В этом примере: ✅Атрибуты width и height задают фиксированные размеры для изображения. Это позволяет браузеру зарезервировать нужное пространство до загрузки изображения. ✅CSS-правило max-width: 100%; height: auto; гарантирует, что изображение будет масштабироваться в зависимости от ширины контейнера, сохраняя пропорции. Указание ширины и высоты для изображений в HTML улучшает производительность и пользовательский опыт. Оно позволяет браузеру зарезервировать пространство для изображений, предотвращает переформатирование страницы и смещение контента, ускоряет рендеринг и снижает время до первого отрисовки. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

👩‍💻 Программирование теперь в телеграм! Вот обширная база материалов, которая ежедневно обновляется, выбирай своё направление: Обучение JavaScript с нуля Обучение Python с нуля Обучение Java с нуля Обучение HTML/CSS с нуля Обучение C/С++ с нуля Обучение С# с нуля Обучение SQL/GO/PHP с нуля Обучение Kotlin/Swift с нуля ⛓ Архив на 3489ГБ: Курсы, книги, шпаргалки, статьи, видео, ресурсы — всё собрано в одном месте: @roadmap_ready

Сообщество IT-специалистов в Telegram от Selectel. Канал крупнейшего независимого провайдера IT-инфраструктуры и облаков. Шесть причин подписаться на канал: - железные новости; - обзоры продуктов; - разборы кейсов; - актуальные IT-статьи; - анонсы митапов; - бесплатные курсы. Подписаться #реклама О рекламодателе

Откуда берется контекст функции ? Спросят с вероятностью 7% Контекст функции — это значение, которое доступно через ключевое слово this. Контекст функции определяется способом ее вызова, а не тем, где функция была определена. Вот основные способы, которыми определяется контекст функции: 1️⃣Глобальный контекст и контекст функций ✅Глобальный контекст: В глобальной области видимости this ссылается на глобальный объект. В браузере это объект window.

    console.log(this); // В браузере это будет window
  

✅Контекст функции: При обычном вызове функции this ссылается на глобальный объект (в строгом режиме — undefined).

    function showThis() {
    console.log(this);
  }

  showThis(); // В браузере это будет window (или undefined в строгом режиме)
  

2️⃣Контекст методов объекта Когда функция вызывается как метод объекта, this ссылается на объект, которому принадлежит метод.

const obj = {
  name: 'Alice',
  showThis: function() {
    console.log(this);
  }
};

obj.showThis(); // { name: 'Alice', showThis: [Function: showThis] }

3️⃣Конструкторы и классы При вызове функции-конструктора с ключевым словом new, this ссылается на новый созданный объект.

function Person(name) {
  this.name = name;
}

const alice = new Person('Alice');
console.log(alice.name); // Alice

4️⃣call, apply и bind Эти методы позволяют явно устанавливать контекст this при вызове функции. ✅call: вызывает функцию с указанным значением this и аргументами, переданными по отдельности.

    function showThis() {
    console.log(this);
  }

  const obj = { name: 'Alice' };
  showThis.call(obj); // { name: 'Alice' }
  

✅apply: вызывает функцию с указанным значением this и аргументами, переданными в виде массива.

showThis.apply(obj); // { name: 'Alice' }

✅bind: возвращает новую функцию, которая при вызове будет иметь указанный контекст this.

const boundShowThis = showThis.bind(obj);
  boundShowThis(); // { name: 'Alice' }

5️⃣Стрелочные функции Не имеют собственного контекста this. Вместо этого они захватывают this из окружающего лексического контекста.

const obj = {
  name: 'Alice',
  showThis: function() {
    const arrowFunc = () => console.log(this);
    arrowFunc();
  }
};

obj.showThis(); // { name: 'Alice' }

6️⃣Обработчики событий В обработчиках событий this ссылается на элемент, к которому прикреплен обработчик.

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // <button> элемент
});

Контекст функции (this) определяется способом вызова функции. В глобальной области видимости this ссылается на глобальный объект. В методах объекта this ссылается на сам объект. В функциях-конструкторах this ссылается на новый созданный объект. Методы call, apply и bind позволяют явно задавать значение this. Стрелочные функции захватывают this из окружающего контекста. В обработчиках событий this ссылается на элемент, к которому прикреплен обработчик. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Обучаем Java-разработчиков оплата после выхода на работу В Kata Academy можно выучиться на Java-разработчика бесплатно, а заплатить уже после трудоустройства по специальности из фактической зарплаты. Если задуматься, то все в выигрыше: — ты получаешь работу в Москве или Санкт-Петербурге с хорошей зарплатой, мы получаем процент за инвестиции в тебя; — в наших интересах научить тебя так, чтобы твоя зарплата была как можно выше; — мы прокачиваем твои навыки еще 2 года после курса: проводим выездные мероприятия и мастер-классы — и доходы наших выпускников растут; — мы не зависим от банков и их рассрочек — кризис не повлиял на доступность курсов. Чтобы попасть на курс, нужно выполнить небольшое тестовое задание. Переходи по ссылке и оставляй заявку! Узнать больше #реклама 16+ kata.academy О рекламодателе