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

Помощь в трудоустройстве в IT-сфере! По всей России объявили бесплатную программу на шестимесячное обучение по IT-cпециальностям. Запись на участие в программе продлится до конца июля, но чтобы туда попасть, нужно пройти специальный профтест. По результату тестирования сразу узнаете, какая профессия вам подойдет, и проходите ли вы на бесплатное обучение. Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

📌В чём разница между классической функцией и стрелочной? 💬 Спрашивают в 20% собеседований Классические функции (объявленные через ключевое слово function) и стрелочные функции (введённые в ES6 через => синтаксис) являются двумя способами объявления функций, но между ними есть несколько важных различий: 1️⃣ Синтаксис ➕ Классическая функция:

function add(a, b) {
  return a + b;
}

➕Стрелочная функция:

const add = (a, b) => a + b;

Предлагают более краткий синтаксис для написания функций, особенно если функция состоит из одного выражения. 2️⃣ Контекст this В классических функциях контекст определяется тем, как функция была вызвана. В стрелочных функциях контекст наследуется из окружающего контекста (лексический контекст this), где функция была объявлена. ➕ Пример с классической функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(function() {
      console.log(this.id); // this ссылается на глобальный объект или undefined в строгом режиме, а не на obj
    }, 1000);
  }
};

➕Пример со стрелочной функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(() => {
      console.log(this.id); // this корректно ссылается на obj, так как стрелочная функция наследует this из окружения
    }, 1000);
  }
};

3️⃣ Конструктор Классические функции могут использоваться с помощью ключевого слова new. Стрелочные функции не могут быть использованы как конструкторы, и попытка это сделать приведет к ошибке. ➕ Пример с классической функцией:

function Person(name) 
{
  this.name = name;
}
const person = new Person("Alice");

➕ Попытка использовать стрелочную функцию как конструктор:

const Person = (name) => {
  this.name = name;
};
// const person = new Person("Alice"); // Ошибка: Person не является конструктором

4️⃣ Аргументы В классических функциях можно использовать объект arguments, который содержит аргументы, переданные функции. В стрелочных функциях нет объекта arguments, но можно использовать оператор расширения ... для достижения аналогичного результата. 🤔 Итог: Основные различия между классическими и стрелочными функциями заключаются в синтаксисе, поведении this, использовании в качестве конструктора и доступе к аргументам функции. Стрелочные функции предлагают более краткий синтаксис и удобны для написания коротких функций, а также при работе с контекстом this в обратных вызовах и замыканиях. Однако для более сложных сценариев, требующих использования this в различных контекстах или создания конструкторов, предпочтительнее использовать классические функции. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

📌 Что известно о различии между function expression и function declaration? 💬 Спрашивают в 20% собеседований Существует два основных способа объявления функций: Function Declaration (Объявление Функции) и Function Expression (Функциональное Выражение). Хотя оба подхода определяют функции, между ними есть несколько ключевых различий, влияющих на поведение и использование функций в коде. 🤔 Function Declaration (Объявление Функции) Способ объявления функции, при котором используется ключевое слово function, за которым следует имя функции.

function sum(a, b) {
  return a + b;
}

🤔 Особенности: ➕ Поднятие (Hoisting): Поднимаются вверх их области видимости перед выполнением кода, что позволяет вызывать функции до их объявления в коде. ➕ Область видимости: Определяется её местом в коде: в глобальной области видимости, в области видимости другой функции или в блочной области видимости (в строгом режиме). ➕ Мутабельность: Имя функции является неизменным и не может быть переназначено. 🤔 Function Expression (Функциональное Выражение) Способ объявления функции, при котором функция создаётся в рамках выражения. Функциональные выражения могут быть анонимными или именованными.

const sum = function(a, b) {
  return a + b;
};

🤔 Особенности: ➕ Поднятие (Hoisting): Переменные, объявленные через var, поднимаются, но инициализируются значением undefined, поэтому функциональное выражение не будет доступно до его объявления в коде. Если функциональное выражение объявлено через let или const, то оно вообще не будет доступно до объявления из-за временной мертвой зоны. ➕ Анонимные и именованные функции: Функциональные выражения могут быть анонимными (не иметь имени) или именованными. Именованные функциональные выражения могут быть полезны для улучшения читаемости кода и при отладке. ➕ Использование в выражениях: Функциональные выражения могут использоваться в любых местах, где допустимы выражения, например, в качестве аргументов для других функций. 🤔 Итог: Основное различие между Function Declaration и Function Expression заключается в том, что объявления функций поднимаются и доступны в своей области видимости до выполнения кода, в то время как функциональные выражения доступны только после своего объявления в коде. Выбор между этими двумя способами объявления функций зависит от конкретной задачи, стиля программирования и предпочтений разработчика. Function Expression предоставляет большую гибкость, особенно когда необходимо использовать анонимные функции или присваивать функции переменным. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

📌 Какие способы создания функций знаешь? 💬 Спрашивают в 3% собеседований В JavaScript существует несколько способов создания функций. Каждый способ имеет свои особенности и применяется в зависимости от контекста. Рассмотрим основные из них: функциональные выражения, функциональные объявления, стрелочные функции и методы объекта. 1️⃣ Функциональное объявление (Function Declaration) Это наиболее традиционный способ объявления функции. Функция, объявленная таким образом, доступна во всем блоке кода благодаря поднятию (hoisting). 🤔 Пример:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Alice")); // "Hello, Alice!"

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

const greet = function(name) {
  return `Hello, ${name}!`;
};

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

🤔 Особенности: ➕ Функция не поднимается, доступна только после её объявления. ➕ Может быть анонимной или именованной. 3️⃣ Стрелочные функции (Arrow Functions) Стрелочные функции введены в ES6. Они имеют более короткий синтаксис и не имеют своего this, arguments, super, или new.target. 🤔 Пример:

const greet = (name) => `Hello, ${name}!`;

console.log(greet("Charlie")); // "Hello, Charlie!"

🤔 Особенности: ➕ Не имеют своего this, используют значение this из внешнего контекста. ➕ Не могут быть использованы в качестве конструкторов. ➕ Подходят для коротких функций и коллбеков. 4️⃣ Методы объекта (Object Methods) Функции могут быть объявлены как методы объекта. В ES6 для этого используется сокращенный синтаксис. 🤔 Пример:

const person = {
  name: "David",
  greet() {
    return `Hello, ${this.name}!`;
  }
};

console.log(person.greet()); // "Hello, David!"

🤔 Особенности: ➕ Метод объекта имеет доступ к свойствам объекта через this. ➕ Поддерживается краткий синтаксис в ES6. 5️⃣ Конструкторные функции (Constructor Functions) Конструкторные функции используются для создания объектов с помощью ключевого слова new. 🤔 Пример:

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

Person.prototype.greet = function() {
  return `Hello, ${this.name}!`;
};

const person = new Person("Eve");
console.log(person.greet()); // "Hello, Eve!"

🤔 Особенности: ➕ Используются с ключевым словом new для создания новых объектов. ➕ Создают экземпляры объектов с общими методами. 6️⃣ Генераторные функции (Generator Functions) Генераторные функции возвращают объект-итератор и могут приостанавливать своё выполнение с помощью ключевого слова yield. 🤔 Пример:

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = generateSequence();

console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3

🤔 Особенности: ➕ Возвращают объект-итератор. ➕ Могут приостанавливать и возобновлять выполнение. 🤔 Вкратце: 1️⃣ Функциональное объявление: Классический способ, функция доступна во всём блоке. 2️⃣ Функциональное выражение: Функция объявляется в выражении, не поднимается. 3️⃣ Стрелочные функции: Краткий синтаксис, нет своего this. 4️⃣ Методы объекта: Функции, объявленные внутри объекта. 5️⃣ Конструкторные функции: Используются с new для создания объектов. 6️⃣ Генераторные функции: Возвращают итераторы, могут приостанавливать выполнение. Короткий ответ: В JavaScript можно создавать функции разными способами: обычные функции, функции внутри переменных, стрелочные функции, функции внутри объектов, функции для создания объектов и специальные функции, которые могут делать паузы. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

🥰 Как улучшить свой код 🥰 Настрой среду, в которой ты работаешь! 🥰 Многие программисты пишут код на настройках по умолчанию - ошибка. 🥰 Не подключают плагины, которые ускорят работу и увеличат эффективность - фатальная ошибка. 👩‍💻 Канал Visual Studio Сode | Плагины сделает твою рабочую среду универсальным и мощным инструментом. 🥰 Повышай свою эффективность и подписывайся на канал Visual Studio Сode | Плагины

📌 В чем различие методов call apply bind? 💬 Спрашивают в 20% собеседований Методы call, apply и bind принадлежат к функциональному объекту Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении. 🤔 Сall Вызывает функцию, явно устанавливая this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть. ➕ Пример:

function greet(message, name) {
  console.log(${message}, ${name}. This is ${this});
}

greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"

Здесь он используется для вызова функции greet с this, установленным в "Earth", и двумя дополнительными аргументами "Hello" и "Alice". 🤔 Apply Очень похож на call, но принимает аргументы в виде массива, а не по отдельности. ➕ Пример:

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"

В этом случае он вызывает функцию greet с this, установленным в "Earth", и аргументами, переданными в виде массива. 🤔 Bind Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст this, указанный в первом аргументе. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже. ➕ Пример:

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"

Здесь он используется для создания новой функции greetEarth, которая при вызове выводит тот же результат, что и предыдущие примеры, но с тем отличием, что контекст this и аргументы были заранее заданы. 🤔 Итог: ➕ call вызывает функцию с указанным контекстом this и отдельными аргументами. ➕ apply аналогичен call, но принимает аргументы в виде массива. ➕ bind создаёт новую функцию с предустановленным контекстом this и аргументами, если они были предоставлены, но не вызывает её немедленно. Эти методы позволяют более гибко управлять контекстом выполнения функций, что является мощным инструментом, особенно при работе с объектно-ориентированным кодом и асинхронными вызовами. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Курс «Разработчик 1С» от Яндекса. За 6 месяцев освоите один из самых простых языков программирования и пройдёте стажировку Зарегистрироваться #реклама 16+ practicum.yandex.ru О рекламодателе

Партнёрская программа рекрутинга в Яндекс Еду Станьте партнёром Яндекс Еды по привлечению курьеров и получите кучу преимуществ: 💰Платим до 25 000 ₽ за успешного кандидата 📞Поддержка на всех этапах 📅Свободное расписание 📊Удобные инструменты для работы Приводите новых курьеров и получайте в среднем 187 000 ₽ в месяц! Зарегистрироваться #реклама eda.yandex.ru О рекламодателе

📌 Какие способы изоляции стилей существуют? 💬 Спрашивают в 20% собеседований Изоляция стилей в веб-разработке важна для предотвращения конфликтов CSS и обеспечения того, чтобы стили одного компонента или раздела страницы не влияли на другие. Существует несколько таких подходов: 1️⃣ Использование уникальных имен классов Это самый простой способ избежать конфликтов. Может быть достигнуто с помощью методологий именования, таких как BEM (Блок, Элемент, Модификатор), которая предлагает чёткую структуру для именования классов. 2️⃣ CSS-модули Они представляют собой подход, при котором классы и идентификаторы, определенные в CSS-файле, автоматически преобразуются в уникальные имена. Это позволяет избежать конфликтов имен классов между различными компонентами. Они поддерживаются в сборщиках, таких как Webpack, и во фреймворках, например, в Create React App. 3️⃣ CSS-in-JS Библиотеки CSS-in-JS, такие как Styled-components и Emotion, позволяют писать CSS прямо в JavaScript-файлах. Это обеспечивает полную изоляцию стилей, поскольку стили применяются непосредственно к компонентам, и конфликты имен классов исключаются. 4️⃣ Shadow DOM Технология, позволяющая инкапсулировать DOM-дерево и стили компонента так, что они не влияют на основной документ. Это ключевая часть Web Components и позволяет создавать полностью изолированные компоненты. 5️⃣ Scoped CSS Некоторые современные фреймворки и инструменты, такие как Vue.js, предлагают возможность использования scoped стилей, где CSS применяется исключительно к компоненту, в котором он объявлен, без воздействия на остальную часть приложения. 6️⃣ Использование IFRAME Размещение контента внутри <iframe> позволяет полностью изолировать его стили от остальной части страницы. Это крайний способ, который может быть полезен для встраивания стороннего контента, но он приносит дополнительную сложность и ограничения. 7️⃣ CSS-переменные для темизации Сами по себе не обеспечивают изоляцию, их можно использовать для создания гибкой системы тем, которая позволяет контролировать влияние глобальных стилей на компоненты и облегчает поддержание стилевой согласованности. 🤔 Итог: Изоляция стилей — важный аспект разработки надёжных и масштабируемых веб-приложений. Выбор метода зависит от конкретных требований проекта, технологического стека и предпочтений разработчика. Использование современных инструментов и подходов, таких как CSS-модули, CSS-in-JS и Web Components, может значительно упростить управление стилями и повысить качество конечного продукта. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Онлайн-интенсив от НИУ ВШЭ: начните свой путь в веб-разработку Изучить фронтенд с нуля, научиться верстке и работе с современными инструментами и создать свой первый мини-проект для портфолио — все это можно сделать на бесплатном онлайн-интенсиве «Frontend с нуля: первый шаг в веб-разработку» от Центра непрерывного образования факультета компьютерных наук НИУ ВШЭ. Интенсив подойдет: ➖➖➖➖➖➖ ▫️Начинающим во фронтенд-разработке: изучите основы фронтенда и сделаете первые шаги в новой области ▫️Тем, кто хочет работать в IT: погрузитесь в направление и поймете, подходит ли вам фронтенд-разработка ▫️Тем, кто рассматривает возможность дальнейшего обучения: углубитесь в изучение веб-технологий и сделаете первый проект для портфолио Программа: ➖➖➖➖ ▫️Буткемп: лекция о том, как устроен фронтенд, его технологиях и инструментах, а также воркшопы по верстке и React ▫️Практика: задания с автоматической проверкой на Stepik для закрепления навыков ▫️Мини-проект для портфолио: создание своего первого сайта в рамках интенсива Спикер: Андрей Сухов, Frontend-разработчик Evocargo и эксперт Центра непрерывного образования ФКН Онлайн-интенсив пройдет с 9 по 13 сентября. Участие бесплатное для всех желающих, нужно только зарегистрироваться. Реклама: Федеральное государственное автономное образовательное учреждение высшего образования «Национальный исследовательский университет «Высшая школа экономики». Erid: 2SDnjc4B7Vt

📌 В чем разница == и === ? 💬 Спрашивают в 20% собеседований Операторы == (равно) и === (строго равно) используются для сравнения значений, но работают по-разному, что важно понимать для написания надёжного и предсказуемого кода. 🤔 Оператор == (равно) Сравнивает значения двух переменных, но перед сравнением производит приведение типов, если переменные относятся к разным типам. Это означает, что если вы сравниваете число с строкой, JavaScript попытается преобразовать строку в число, а затем сравнить эти два значения. Этот процесс может привести к неинтуитивным результатам. ➕ Примеры:

'2' == 2 // true, так как строка '2' преобразуется в число 2 перед сравнением
0 == false // true, так как 0 и false считаются эквивалентными
null == undefined // true, специальное правило языка

🤔 Оператор ===(строго равно) В отличие от ==, он сравнивает и значения, и типы без приведения типов. Если типы различаются, оператор немедленно возвращает false, не пытаясь преобразовать один тип в другой. Это делает сравнение более строгим и предсказуемым. ➕ Примеры:

'2' === 2 // false, так как типы различаются
0 === false // false, разные типы: число и булево значение
null === undefined // false, разные типы

🤔 Почему важно знать разницу Понимание разницы между == и === критически важно, чтобы избежать ошибок, связанных с неожиданным приведением типов. Использование === помогает гарантировать, что сравниваемые значения совпадают по типу и значению, что является более безопасным подходом в большинстве случаев. В целом, рекомендуется использовать === для сравнения значений, чтобы код был более читабельным и предсказуемым. 🤔 Итог: == сравнивает значения, приводя их к общему типу, что может привести к неожиданным результатам из-за неявного приведения типов. === сравнивает как значения, так и типы без приведения типов, обеспечивая более строгое и предсказуемое сравнение. Использование === рекомендуется для большей надёжности и читабельности кода. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Ищем людей, которые пройдут по нехоженым тропам тревел-теха и предложат оригинальные решения. Собираемся на О!Хакатоне — мероприятии от Островка с призовым фондом в один миллион рублей.  Тебя ждут задания на двух треках: 👉🏻 динамическое ценообразование, 👉🏻 система ранжирования отелей.          Также можно будет посетить лекции, мок-интервью и AMA-сессии с разработчиками Островка. Все активности пройдут в онлайн-формате с 28 сентября по 5 октября 2024 года. Участвовать можно из любой точки мира.  Регистрируйся по ссылке до 19 сентября и стань автором лучшего тревел-тех-решения. Реклама. ООО "БРОНИРОВАНИЕ ГОСТИНИЦ". ИНН 7703389880.

Обучайся ИТ и строй карьеру уже во время учебы Это возможно в «Школе 21» — школе цифровых технологий от Сбера Вот лишь несколько особенностей: — обучение в школе бесплатное, от тебя нужна только мотивация — 100% выпускников работают в крутых ИТ-компаниях — стажировка входит в образовательный трек — во время обучения соберешь портфолио и получишь реальный опыт Кампусы школы находятся в Москве, Ярославле, Сургуте, Казани и других городах России и работают 24/7. Узнавай больше и подавай заявку на сайте «Школы 21» уже сейчас! Реклама. Заказчик АНО "Школа 21" ИНН 7736316133

📌 Чем var отличается от const ? 💬 Спрашивают в 23% собеседований Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде. 🤔 Область видимости (Scope) ➕ Var: Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена. ➕ Const: Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена. 🤔 Переназначение и изменение ➕ Var: Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение. ➕ Const: Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений. 🤔 Поднятие (Hoisting) ➕ Var: Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение undefined. ➕ Const: Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона". 🤔 Инициализация ➕ Var: Эти переменные можно объявить без инициализации, и их начальное значение будет undefined. ➕ Const: Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке. 🤔 Примеры:

var varVariable = 1;
varVariable = 2; // Переназначение возможно

const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку

if (true) {
  var varScope = "доступна везде в функции";
  const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена

🤔 Итог: Использование var, let и const зависит от нужд разработки. var предоставляет функциональную область видимости и большую гибкость за счёт возможности переназначения, но это может привести к ошибкам из-за непреднамеренных изменений или переназначений. const используется для объявления переменных, значение которых не должно изменяться, что помогает предотвратить случайное переназначение и делает код более предсказуемым. Сейчас let и const являются предпочтительными для блочной области видимости и контроля за изменяемостью данных. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых