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

🤔 Какие отличия между новым и старым js? JavaScript, как язык программирования, претерпел значительные изменения с момента своего создания. Основные изменения и улучшения в языке были введены с обновлениями спецификации ECMAScript (ES). Давайте рассмотрим ключевые отличия между "старым" JavaScript (ES5) и "новым" JavaScript (ES6 и более поздние версии): 🚩Основные отличия между ES5 и ES6+ (ES2015+) 🟠Объявление переменных: `var` vs `let` и `const` ES5: Объявление переменных с помощью var. Переменные, объявленные с var, имеют функциональную область видимости (function scope) и подлежат хостингу.

var x = 10;
if (true) {
 var x = 20;
 console.log(x); // 20
}
console.log(x); // 20   

ES6+: Объявление переменных с помощью let и const. Переменные, объявленные с let и const, имеют блочную область видимости (block scope) и не подлежат хостингу в том виде, как var.

let y = 10;
if (true) {
let y = 20;
console.log(y); // 20
}
console.log(y); // 10

const z = 30;
// z = 40; // Ошибка: Assignment to constant variable.

🟠Стрелочные функции ES5: Определение функций с использованием ключевого слова function.

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

ES6+: Стрелочные функции, которые предоставляют более краткий синтаксис и не имеют собственного значения this.

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

🟠Шаблонные строки ES5: Конкатенация строк с использованием оператора +.

var name = 'Alice';
var greeting = 'Hello, ' + name + '!';   

ES6+: Использование шаблонных строк с обратными кавычками (`` ` ``) и интерполяцией.

const name = 'Alice';
const greeting = `Hello, ${name}!`;   

🟠Деструктуризация ES5: Извлечение значений из массивов и объектов с использованием точечной нотации.

var arr = [1, 2, 3];
var first = arr[0];
var second = arr[1];

var obj = {a: 1, b: 2};
var a = obj.a;
var b = obj.b;   

ES6+: Деструктуризация массивов и объектов.

const [first, second] = [1, 2, 3];
const {a, b} = {a: 1, b: 2};   

🟠Промисы ES5: Обработка асинхронных операций с использованием колбэков.

function fetchData(callback) {
setTimeout(function() {
callback('data');
}, 1000);
}

fetchData(function(data) {
console.log(data); // 'data'
});

ES6+: Введение промисов для более удобной работы с асинхронными операциями.

const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
};

fetchData().then(data => {
console.log(data); // 'data'
});

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое inline стили, и какой они имеют приоритет? Инлайн-стили — это CSS-правила, прописанные непосредственно в HTML-элементе через атрибут style. Они имеют более высокий приоритет, чем стили из таблиц стилей или встроенные теги <style>, но уступают !important. Использование инлайн-стилей снижает переиспользуемость и усложняет поддержку. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

🤔 Что такое хостинг js? Это механизм, при котором объявления переменных и функций поднимаются (hoisted) в верхнюю часть своей области видимости перед выполнением кода. Это означает, что переменные и функции могут быть использованы до того, как они были фактически объявлены в коде. Однако важно понимать, что хостинг поднимает только объявления, а не инициализации. 🟠Хостинг переменных Переменные, объявленные с помощью var, поднимаются в начало своей функции или глобальной области видимости. При этом они инициализируются значением undefined.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

На самом деле, вышеуказанный код интерпретируется JavaScript движком следующим образом:

var a;
console.log(a); // undefined
a = 10;
console.log(a); // 10

🟠Хостинг с использованием let и const Переменные, объявленные с помощью let и const, также поднимаются, но они не инициализируются. Попытка доступа к ним до объявления приведет к ошибке ReferenceError из-за временной мертвой зоны (Temporal Dead Zone, TDZ).

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(b); // 20

🟠Хостинг функций Функции, объявленные с помощью Function Declaration, поднимаются полностью, включая тело функции. Это позволяет вызывать функции до их фактического объявления в коде.

console.log(sum(2, 3)); // 5

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

На самом деле, вышеуказанный код интерпретируется JavaScript движком следующим образом:

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

console.log(sum(2, 3)); // 5

🟠Хостинг функциональных выражений Функции, объявленные с помощью Function Expression, поднимаются как обычные переменные. То есть их объявления поднимаются, но сами функции остаются неинициализированными до выполнения строки, где они определены.

console.log(subtract); // undefined
console.log(subtract(5, 3)); // TypeError: subtract is not a function

var subtract = function(a, b) {
  return a - b;
};

console.log(subtract(5, 3)); // 2

🚩Важные аспекты хостинга 🟠Понимание и использование хостинга Хостинг позволяет писать код, который может использовать функции и переменные до их фактического объявления, что может быть полезно в некоторых случаях. Однако злоупотребление этим механизмом может привести к путанице и трудноуловимым ошибкам. 🟠Лучшие практики Рекомендуется объявлять все переменные и функции в начале их соответствующей области видимости. Это улучшает читаемость и поддержку кода. Используйте let и const вместо var, чтобы избежать проблем с хостингом и повысить безопасность и предсказуемость кода. Ставь 👍 и забирай 📚 Базу знаний

😱 Вот и всё! Теперь вам не нужно сливать деньги на дорогие курсы по фронтенд-разработке — всё необходимое для обучения доступно совершенно бесплатно! Всё, что нужно для изучения фронтенда: полное руководство по HTML, CSS, а также практические гайды — @made_in_html_css. Детальный анализ материалов по FRONTEND-разработке. При этом информация представлена в лёгком и доступном формате, который делает процесс обучения увлекательным и ненадоедливым! Не упустите шанс подписаться на этот уникальный канал — Made in HTML/CSS

Расширить свой стек и поднять скиллы на следующий грейд просто! ➡️Gitlab CI/CD, Docker, RabbitMQ, JavaScript, Python, Linux для разработчиков, инструменты DevOps для разработчиков сами себя не изучат, но вы можете! А курсы Слёрма самых разных востребованных направлений помогут вам сэкономить время, повысить грейд и прокачать навыки. Учёба в Слёрм это: 🔵бесплатное начало: вы получите демодоступ к курсу на 1 день 🔵старт в любое время и обучение в своем темпе без привязки ко времени 🔵фокус на практику: она занимает до 80% обучения 🔵знания от ведущих экспертов современного IT рынка 🔵удобные условия оплаты: рассрочка, налоговый вычет, оплата зарубежной картой и даже оформление оплаты от работодателя. Становитесь востребованным и высокооплачиваемым специалистом на рынке вакансий и прокачивайте свои навыки с нами! Программу и полный список курсов смотрите ➡️ на сайте Реклама ООО «Слёрм» ИНН 3652901451

🤔 Как отцентровать блок по горизонтали и по вертикали? Блок можно отцентрировать с помощью flexbox (свойства justify-content: center и align-items: center) или grid. Также используются свойства position: absolute с вычислением смещения или transform: translate. Выбор метода зависит от контекста верстки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

🤔 Что такое function decloration? Это способ определения функции в JavaScript, при котором функция объявляется явно с помощью ключевого слова function, за которым следует имя функции. Функции, определенные таким образом, подлежат "поднятию" (hoisting), что означает, что их можно использовать до их фактического объявления в коде. 🚩Синтаксис Function Declaration

function имяФункции(параметр1, параметр2, ...) {
  // Тело функции
  // Инструкции
}

🚩Примеры использования Function Declaration Основное объявление функции

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

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

🟠Поднятие (Hoisting) Функции, объявленные с помощью Function Declaration, поднимаются, что позволяет вызывать их до объявления в коде.

console.log(sum(2, 3)); // 5

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

🚩Отличия между Function Declaration и Function Expression 🟠Поднятие (Hoisting) Function Declaration: Функции поднимаются и могут быть вызваны до их объявления.

console.log(multiply(2, 3)); // 6

function multiply(a, b) {
  return a * b;
}
     

Function Expression: Функциональные выражения не поднимаются, поэтому их можно использовать только после их определения.

console.log(divide(6, 3)); // Ошибка: divide is not defined

const divide = function(a, b) {
return a / b;
};

🟠Именование Function Declaration: Обязательно имеют имя.

function subtract(a, b) {
return a - b;
}

Function Expression: Могут быть анонимными или именованными.

const modulo = function(a, b) {
return a % b;
};

🟠Использование в коде Function Declaration: Часто используются для определения основных функций, которые нужны на протяжении всего кода. Они удобны для структурирования кода и обеспечения доступности функций в любом месте программы. Function Expression: Более гибкий способ определения функций, который часто используется для создания замыканий, обработки событий и в функциональных конструкциях, таких как методы массивов (map, filter и т.д.). Function Declaration

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

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

Function Expression

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

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

🚩Когда использовать 🟠Замыкания и колбэки Когда вам нужно создать функцию в контексте другой функции, например, передать её как аргумент или вернуть как результат. 🟠Модули и объекты Когда функции являются частью модуля или объекта и вы хотите ограничить их видимость или управление. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что ты знаешь про специфичность селекторов? Специфичность определяет приоритет CSS-правил при конфликте стилей. Она зависит от типов селекторов: инлайновые стили имеют самый высокий приоритет, за ними следуют ID, классы и псевдоклассы, и, наконец, теги. Чем выше специфичность, тем больше вероятность применения стиля. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

ТОП-4 Курса по Программированию ⚡Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. ✅Хотите стать программистом, но не знаете с какого языка начать? Помогаем разобраться в самых популярных и востребованных языках программирования. Подарок в конце подборки! Выбрать #реклама 16+ tutortop.ru О рекламодателе

🤔 Что такое function expression? Это способ определения функции в JavaScript, при котором функция создается как часть выражения и может быть присвоена переменной, объекту или передана в качестве аргумента другой функции. В отличие от Function Declaration (функционального объявления), функциональные выражения не подлежат "поднятию" (hoisting), что означает, что их можно использовать только после их определения. 🚩Примеры использования Присваивание функции переменной

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

console.log(add(2, 3)); // 5

Анонимные функции

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

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

Именованные функции

const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1);
};

console.log(factorial(5)); // 120

Использование функции в качестве аргумента другой функции

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(function(number) {
  return number * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

IIFE (Immediately Invoked Function Expression)

(function() {
  const message = 'Hello, World!';
  console.log(message);
})();
// Hello, World!

Использование стрелочных функций

const multiply = (a, b) => a * b;

console.log(multiply(2, 3)); // 6

🚩Основные отличия 🟠Поднятие (Hoisting) Функции, определенные с помощью функционального объявления, поднимаются, то есть могут быть вызваны до их определения в коде.

console.log(add(2, 3)); // 5

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

Функциональные выражения не поднимаются, поэтому они могут быть использованы только после их определения.

console.log(add(2, 3)); // Ошибка: add is not defined

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

🟠Именование Обязательно имеют имя.

function subtract(a, b) {
  return a - b;
}
     

Могут быть анонимными или именованными.

const divide = function(a, b) {
  return a / b;
};     

🟠Использование в коде Подходит для определения основных функций на верхнем уровне программы. Более гибкий способ определения функций, особенно полезен для создания замыканий, обработки событий и использования в функциональных конструкциях. Ставь 👍 и забирай 📚 Базу знаний

🤔 Расскажи про области видимости? Области видимости определяют, где переменные доступны в коде. В языках, таких как JavaScript, есть глобальная, функциональная, блочная и модульная области видимости. Эти области помогают организовывать код, избегая конфликтов имен. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Попробуйте себя в мобильной разработке и аналитике Студенты, готовы прокачивать навыки программирования вместе с опытными преподавателями Т-Банка? Узнайте, как создавать приложения, анализировать данные и автоматизировать рутинные задачи, на одном из онлайн-курсов Т-Образования. Для учебы нужно 2—3 часа в неделю. Подайте заявку сейчас. Подать заявку #реклама 16+ education.tbank.ru О рекламодателе

😎 База IT собеседований – твоё секретное оружие для успешного прохождения этапов отбора! Собеседования от реальных компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и многие другие! 🏢 Мы собрали 230 собесов, чтобы ты мог подготовиться к интервью с уверенностью и успехом. 🎯 Присоединяйся к базе и прокачай свои шансы на успешное трудоустройство!

🤔 Что такое гибридные приложения? Это приложения, которые сочетают в себе элементы как веб-приложений, так и нативных мобильных приложений. Они разрабатываются с использованием веб-технологий (HTML, CSS, JavaScript) и затем оборачиваются в нативные контейнеры, что позволяет запускать их на различных мобильных платформах (iOS, Android и др.). 🚩Основные характеристики 🟠Кроссплатформенность Одним из главных преимуществ гибридных приложений является возможность работы на различных платформах без необходимости писать отдельный код для каждой платформы. 🟠Использование веб-технологий Гибридные приложения разрабатываются с использованием стандартных веб-технологий (HTML, CSS, JavaScript), что упрощает процесс разработки для веб-разработчиков. 🟠Нативные контейнеры Эти приложения оборачиваются в нативные контейнеры (например, с помощью Apache Cordova или Capacitor), что позволяет им использовать функции и API нативных платформ. 🚩Примеры технологий и фреймворков 🟠Apache Cordova (ранее PhoneGap) Фреймворк для создания мобильных приложений с использованием веб-технологий. Позволяет оборачивать веб-приложения в нативные контейнеры. 🟠Ionic Популярный фреймворк для разработки гибридных мобильных приложений. Основан на Angular и Cordova, но также поддерживает другие фреймворки, такие как React и Vue. 🟠Capacitor Современная альтернатива Cordova, разработанная командой Ionic. Предоставляет более мощные и гибкие возможности для интеграции с нативными функциями. 🟠React Native Хотя React Native обычно рассматривается как фреймворк для кроссплатформенной разработки нативных приложений, его можно использовать для создания гибридных приложений, интегрируя веб-контент. 🚩Пример создания 1⃣Установка Ionic CLI

npm install -g @ionic/cli   

2⃣Создание нового проекта

ionic start myApp tabs --type=angular   

3⃣Запуск приложения в браузере

cd myApp
ionic serve   

4⃣Сборка и запуск на мобильном устройстве

ionic capacitor add android
ionic capacitor run android   

🚩Плюсы ➕Снижение затрат на разработку Разработка и поддержка единой кодовой базы для нескольких платформ позволяет сократить затраты на разработку и время выхода на рынок. ➕Кроссплатформенность Возможность запуска на различных платформах без необходимости переписывать код для каждой платформы. ➕Использование существующих навыков Веб-разработчики могут использовать свои знания HTML, CSS и JavaScript для создания мобильных приложений. 🚩Минусы ➖Производительность Гибридные приложения могут работать медленнее по сравнению с нативными приложениями, особенно при выполнении сложных графических операций или интенсивного использования ресурсов. ➖Ограниченный доступ к нативным функциям Хотя большинство нативных функций доступны через плагины, некоторые из них могут быть ограничены или требовать дополнительных усилий для интеграции. ➖Пользовательский интерфейс Достижение нативного пользовательского интерфейса может быть сложным, и гибридные приложения могут не всегда соответствовать ожиданиям пользователей по внешнему виду и поведению. Ставь 👍 и забирай 📚 Базу знаний

Ресурсы для фронтендеров разного уровня. Выбирай свой и забирай 👀 Через 48 часов список исчезнет: 👩‍💻👩‍💻 Вёрстка HTML/CSS Приватные курсы HTML/CSS Книги по вёрстке Макеты для вёрстки Инструменты верстальщика Вопросы с собесов по вёрстке 👩‍💻 JavaScript Приватные курсы JS Книги по JS и фронтенду Простые JavaScript-задачи Инструменты фронтендера Вопросы с собесов по JS 👩‍💻👩‍💻👩‍💻 Фреймворки Приватные курсы по React, Vue, Angular Книги по фреймворкам Инструменты мидла Подготовка к собесам на фронтендера Если хочешь быть в курсе происходящего в IT — нажми сюда 🟡

🤔 Что такое методология bem? BEM (Block, Element, Modifier) — это методология для написания читаемого и структурированного CSS-кода. Блоки представляют независимые компоненты, элементы — их части, а модификаторы — изменения состояния или внешнего вида. BEM помогает упорядочить стили и улучшить масштабируемость кода. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Как экономить с Low-code от СберТеха 5 декабря в 11:00 приглашаем на бесплатный вебинар «Полный цикл low-code разработки под ключ: от базы данных до бизнес-процессов» от СберТеха. Поделимся реальным опытом low-code разработки. Разберем кейсы для банковского, финтех-сегментов и не только. Покажем в реальном времени возможности продуктов Platform V Flow и Platform V DataSpace для low-code разработки. Расскажем о лучших практиках использования low-code инструментов. А еще вы узнаете: ✅ Как решения, созданные с использованием low-code инструментов, выдерживают highload-нагрузки ✅ Как сэкономить ресурсы senior-разработчиков ✅ Как быстро и дешево создать прототип готового решения / enterprise-grade бэкенда приложений Регистрируйтесь и приходите! Зарегистрироваться #реклама 16+ platformv.sbertech.ru О рекламодателе

🤔 В чём разница в работе eventloop на сервере и в браузере? Это механизм, используемый для обработки и выполнения асинхронных операций. Он позволяет JavaScript выполнять неблокирующие операции, несмотря на то, что JavaScript является однопоточным. Хотя принципы работы Event Loop в браузере и на сервере (например, в Node.js) схожи, есть некоторые важные различия в их реализации и окружении. 🚩Event Loop в браузере В браузере Event Loop отвечает за обработку событий, выполнение асинхронного кода и обновление пользовательского интерфейса. 🟠DOM и рендеринг Браузер должен обновлять и перерисовывать пользовательский интерфейс. Это включает в себя обработку изменений в DOM и применение стилей. Рендеринг обычно происходит между итерациями Event Loop. 🟠Очередь макрозадач Включает такие задачи, как обработка пользовательских событий (нажатие кнопок, ввод текста), setTimeout, setInterval, сетевые запросы (XHR, fetch) и другие. Эти задачи обрабатываются в порядке их поступления. 🟠Очередь микрозадач Включает такие задачи, как промисы (Promise), MutationObserver. Микрозадачи выполняются перед макрозадачами в рамках одной итерации Event Loop. 🟠UI события Браузер должен обрабатывать события, связанные с пользовательским интерфейсом, такие как рендеринг и взаимодействие с пользователем. 🚩Event Loop в Node.js Node.js, как серверная платформа, использует Event Loop для обработки асинхронных операций, таких как I/O, таймеры и сетевые запросы. 🟠Фазы Event Loop Node.js Event Loop состоит из нескольких фаз, каждая из которых обрабатывает определённые типы задач: timers, I/O callbacks, idle, poll, check, и close callbacks. 🟠Timers Эта фаза обрабатывает колбэки от setTimeout и setInterval. 🟠I/O callbacks Обрабатывает почти все колбэки от асинхронных операций ввода-вывода, за исключением close callbacks, таймеров и setImmediate. 🟠Poll Извлекает новые I/O события; выполняет I/O-колбэки (почти все, за исключением тех, которые закроют сервер); и если ничего не происходит, ждет в этой фазе. 🟠Check Обрабатывает колбэки от setImmediate. 🟠Close callbacks Обрабатывает колбэки от закрытия всех I/O операций. 🟠Microtasks (process.nextTick и Promises) Выполняются после каждой фазы Event Loop, перед переходом к следующей фазе 🚩Различия 🟠Окружение В браузере Event Loop управляет как асинхронными задачами, так и обновлением пользовательского интерфейса. В Node.js Event Loop больше ориентирован на обработку I/O операций и серверных задач. 🟠Фазы Event Loop В браузере Event Loop менее детализирован по фазам по сравнению с Node.js. В Node.js Event Loop разделён на более детализированные фазы для обработки различных типов асинхронных задач. 🟠Микрозадачи И в браузере, и в Node.js микрозадачи выполняются перед макрозадачами, но реализация и использование могут слегка отличаться. 🟠Рендеринг В браузере Event Loop включает в себя шаги, связанные с рендерингом и обновлением DOM. В Node.js этого аспекта нет, так как он работает на сервере и не имеет дела с рендерингом пользовательского интерфейса. Ставь 👍 и забирай 📚 Базу знаний