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

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

📌 Что такое this? 💬 Спрашивают в 17% собеседований this является ключевым словом, которое используется в функциях и методах и указывает на объект, в контексте которого они были вызваны.Его значение зависит от того, как именно вызывается функция, и может изменяться в различных контекстах выполнения. 🤔Контексты использования: 1️⃣ Глобальный контекст: В глобальном контексте (вне каких-либо функций) он ссылается на глобальный объект. В браузере глобальным объектом является window, в Node.js — global.

console.log(this === window); // в браузере вернет true

2️⃣ Функции (не строгий режим): В функциях, вызванных обычным способом (не как методы объекта), он ссылается на глобальный объект. В строгом режиме ("use strict") this будет undefined, если функция вызвана не как метод объекта.

   function show() {
      console.log(this === window); // true в браузере в нестрогом режиме
      console.log(this); // undefined в строгом режиме
    }
    show();

3️⃣ Методы объекта: Когда функция вызывается как метод объекта, он ссылается на объект, частью которого является метод.

const obj = {
      myMethod() {
        console.log(this);
      }
    };
    obj.myMethod(); // this ссылается на obj

4️⃣ Конструкторы: В функции-конструкторе, вызванной с new, он ссылается на вновь созданный объект.

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

5️⃣ Стрелочные функции: Стрелочные функции не имеют собственного контекста, вместо этого они захватывают его из внешнего лексического окружения.

const obj = {
      method: function() {
        const arrowFunc = () => console.log(this);
        arrowFunc(); // this ссылается на obj
      }
    };
    obj.method();

6️⃣ Явное привязывание: С помощью методов call, apply и bind можно явно указать контекст для функции.

function show() {
      console.log(this);
    }
    const obj = {name: "Explicit context"};
    show.call(obj); // this в show() ссылается на obj

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

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

📌 Что такое макро и микро задачи? 💬 Спрашивают в 20% собеседований Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач. Давайте разберемся, что они собой представляют и как работают. 1️⃣ Микро-задачи (Microtasks) Это задачи, которые запланированы для выполнения сразу после текущего выполненного скрипта, но до того, как event loop продолжит обрабатывать следующую макро-задачу. 🤔 Примеры: ➕ then, catch, finally ➕ queueMicrotask() 2️⃣ Макро-задачи (Macrotasks) Это задачи, которые обрабатываются event loop, каждая макро-задача извлекается из очереди и выполняется до конца, прежде чем event loop перейдет к следующей макро-задаче. 🤔 Примеры: ➕ setTimeout ➕ setInterval ➕ setImmediate (Node.js) ➕ I/O операции ➕ Интерактивные действия, такие как клики мыши и нажатия клавиш 🤔 Различия и порядок выполнения Основное различие между макро- и микро-задачами заключается в их приоритете выполнения: ➕ После каждой макро-задачи, перед тем как переходить к следующей макро-задаче, event loop обрабатывает все микро-задачи в очереди микро-задач. Это означает, что микро-задачи выполняются чаще и имеют более высокий приоритет по сравнению с макро-задачами. ➕ Если во время выполнения микро-задач добавляются новые микро-задачи, они также будут выполнены в текущем цикле, перед переходом к следующей макро-задаче. Это может привести к "голоданию" макро-задач, если микро-задачи постоянно добавляются. ➕ Пример:

setTimeout(() => console.log('Макро-задача 1'), 0);
Promise.resolve().then(() => console.log('Микро-задача 1'));

setTimeout(() => console.log('Макро-задача 2'), 0);
Promise.resolve().then(() => console.log('Микро-задача 2'));

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

Помощь в трудоустройстве в 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