Frontend Interview - собеседования по Javascript / Html / Css

undefined и null В JavaScript есть два отдельных типа для представления ничего. Тип undefined Это тип с единственным возможным значением: undefined. Кроме этого, в языке определена глобальная переменная со значением undefined, и эта переменная так и называется — undefined. Не являясь константой, она не является и ключевым словом. Из этого следует, что её значение можно с лёгкостью переопределить. Несколько случаев, когда возвращается undefined: - При попытке доступа к глобальной переменной undefined (если она не изменена). - Неявный возврат из функции при отсутствии в ней оператора return. - Из операторов return, которые ничего не возвращают. - В результате поиска несуществующего свойства у объекта (и доступа к нему). - Параметры, которые не были переданы в функцию явно. - При доступе ко всему, чьим значением является undefined. Обработка изменений значения undefined Поскольку глобальная переменная undefined содержит копию настоящего значения undefined, присвоение этой переменной нового значения не изменяет значения типа undefined. Но при этом, чтобы сравнить что-либо со значением undefined, прежде нужно получить значение самой переменной undefined. Чтобы защитить код от переопределения переменной undefined, часто используется техника анонимной обёртки, которая использует отсутствующий аргумент.

var undefined = 123;
(function(something, foo, undefined) {
    // в локальной области видимости `undefined`
    // снова ссылается на правильное значене.

})('Hello World', 42);

Другой способ достичь того же эффекта — использовать определение внутри обёртки.

var undefined = 123;
(function(something, foo) {
    var undefined;
    ...

})('Hello World', 42);

Единственная разница между этими вариантами в том, что последняя версия будет больше на 4 байта при минификации, а в первом случае внутри анонимной обёртки нет дополнительного оператора var. Использование null Значение null записывается литералом null. Оно является самостоятельным, а не свойством глобального объекта (как undefined). В API, null часто присутствует в местах где ожидается объект, но подходящего объекта нет. null является определённым значением отсутствия объекта, тогда как undefined обозначает неопределённость. Например:

var element;
// значение переменной element до её инициализации не определённо: undefined

element = document.getElementById("not-exists");
// здесь при попытке получения несуществующего элемента, метод getElementById возвращает null
// переменная element теперь инициализирована значением null, её значение определено

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

Fix My Phone Numbers! Номер телефона должен состоять из 11 цифр и всегда начинаться с 0. Вам дана строка, где в номер телефона подмешаны различные символы. Очистите строку от лишних символов и верните номер. 👉 @frontendInterview

Как устроен JavaScript Большинство языков программирования выросли из древней парадигмы, порожденной еще во времена Фортрана. Гуру Javascript — Дуглас Крокфорд — выкорчевывает эти засохшие корни, позволяя нам задуматься над будущим программирования, перейдя на новый уровень понимания требований к Следующему Языку (The Next Language). Автор начинает с основ: имен, чисел, логических значений, символов и другой базовой информации. Вы узнаете не только о проблемах и трудностях работы с типами в JavaScript, но и о том как их можно обойти. Затем вы приступите к знакомству со структурами данных и функции, чтобы разобраться с механизмами, лежащими в их основе, и научитесь использовать функции высшего порядка и объектно-ориентированный стиль программирования без классов. 👉 @frontendInterview

ТОП-4 Курса по UX/UI-дизайну по версии Tutortop Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. Освойте востребованную профессию с нуля за 4-5 месяцев. Соберите портфолио из 10+ проектов. Выйдите на заработок 100 000₽+ и работайте удаленно в гибком графике. Выбрать #реклама 16+ tutortop.ru О рекламодателе

Что такое Компонент высшего порядка (Higher-Order Component, HOC)? Говоря просто, компонент высшего порядка — это функция, которая принимает компонент и возвращает новый компонент. HOC часто встречаются в сторонних библиотеках, например connect в Redux и createFragmentContainer в Relay.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Давайте реализуем функцию withSubscription — она будет создавать компоненты и подписывать их на обновления DataSource (наподобие CommentList и BlogPost). Функция будет принимать оборачиваемый компонент и через пропсы передавать ему новые данные:

const CommentListWithSubscription = withSubscription(
  CommentList,
  (DataSource) => DataSource.getComments()
);

const BlogPostWithSubscription = withSubscription(
  BlogPost,
  (DataSource, props) => DataSource.getBlogPost(props.id)
);

Первый параметр — это оборачиваемый компонент. Второй — функция, которая извлекает нужные нам данные, она получает DataSource и текущие пропсы. Заметьте, что HOC ничего не меняет и не наследует поведение оборачиваемого компонента, вместо этого HOC оборачивает оригинальный компонент в контейнер посредством композиции. HOC является чистой функцией без побочных эффектов. Вот и всё! Оборачиваемый компонент получает все пропсы, переданные контейнеру, а также проп data. Для HOC не важно, как будут использоваться данные, а оборачиваемому компоненту не важно, откуда они берутся. 👉 @frontendInterview

Самая сложная часть собеседования 👉 @frontendInterview

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

Фронтендеры, го бустить скиллы в CodeRun: будем решать скриншотные задачки и выигрывать призы в турнирах CodeRun — бесплатный онлайн-тренажер Яндекса с огромным каталогом задач от разработчиков Яндекса и внешних экспертов. Здесь можно учиться, готовиться к техническим собесам и получать призы за победу в сезонных турнирах: мерч, сертификаты и даже возможность попасть в Яндекс по упрощенному формату найма. Одна из топовых фич — наличие скриншотных задач для фронтенд-направления. В подборке заданий от руководителя проектов Контеста Никиты Дубко можно пройти путь от рисования простых примитивов до полноценных CSS-иллюстраций. Залетай в CodeRun, проходи подборки от экспертов, отслеживай прогресс и лутай призы в турнирах: 2 сезон сейчас в самом разгаре!

Офер в Яндекс для опытных фронтендеров за два дня 24–25 августа приглашаем фронтендеров с опытом работы от четырёх лет получить офер в Яндекс через multitrack за 2 дня. Достаточно решить задачи онлайн до 20 августа и пройти несколько технических секций 24 августа, чтобы уже 25-го получить офер и выбрать три команды, к которым вам было бы интересно присоединиться. Как правило, за несколько собеседований сложно понять, подходит ли вам команда и наоборот. Multitrack позволит вам поработать в трёх разных командах Яндекса и выбрать подходящую. Вы сможете погрузиться в рабочие процессы, познакомиться с будущими коллегами и понять, с какими задачами и технологиями хотите работать. Узнать подробности и зарегистрироваться. Реклама. ООО "Яндекс". ИНН 7736207543

Как вернуть энергию и интерес В этой статье автор постарался честно и вдумчиво проанализировать свой опыт выгорания и последующего восстановления нормального уровня энергии. Если что-то упустил, спрашивайте в комментариях. 👉 @frontendInterview

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

Как сделать отступ первой строки абзаца? Отступ первой строки называется также «красная строка» и применяется для выделения отдельных абзацев и быстрого к ним перехода. Для создания красной строки предназначено стилевое свойство text-indent, значение которого управляет величиной отступа. Причём значение может быть положительным, и тогда первая строка сдвигается вправо В качестве значения text-indent можно использовать пиксели, em, rem и другие единицы размера CSS. Само свойство пишется для селектора P, тем самым все абзацы будут иметь указанный отступ первой строки.

p {
  text-indent: 15px;
}

В примере на картинке применяется единица ch, которая определяет ширину символа 0. Для моноширинного шрифта (вроде Courier), где все буквы имеют одинаковую ширину, 2ch показывает что первая строка абзаца сдвигается на две буквы вправо. 👉 @frontendInterview

Успейте заскочить на фронтенд-практику к фулстак-разработчику. Скоро начало. https://itlogia.ru/intensive/front?utm_source=tg&utm_medium=group&utm_campaign=fr_2907&utm_content=230724_seniorFront&erid=LjN8Juyoz

👉 @frontendInterview

Портфолио, которое хотят видеть рекрутеры Не тратьте время на пет-проекты. Сделайте проект на микросервисной структуре на Kafka и заберите свой оффер в крупную IT-компанию. Все потому что проект не должен быть стандартным crud-приложением, а иметь в основе то, чего ждет каждый работодатель – микросервисы. Ребята из FAANG School подготовили полезную лекцию, где расскажут, как собрать идеальный проект для портфолио: – что ждет работодатель и какие темы выбрать для проекта – какой стек технологий самый востребованный – как перейти от древнего монолита к современным микросервисам – когда и зачем добавлять Kafka в проект-портфолио Участников ждут подарки: классный мерч, полезные материалы, возможность пройти индивидуальную карьерную сессию и грант на обучение. Переходите и забирайте Большую Шпаргалку по Kafka с подробной информацией об основных концепциях, характеристиках и способах использования одной из самых популярных технологий в разработке.

Что такое статический метод класса (static)? Ключевое слово static используется в классах для определения статичных методов. Статичные методы функции, принадлежащие объекту класса, но не доступные другим объектам того же класса.

 class Repo {
    static getName() {
      return "Repo name is modern-js-cheatsheet"
    }
  }

  // нам не нужно создавать объект класса Repo
  console.log(Repo.getName()) // "Repo name is modern-js-cheatsheet"

  let r = new Repo();
  console.log(r.getName()) // необработанная ошибка TypeError: r.getName не является функцией

Cтатические методы вызываются через имя класса. Вызывать статические методы через имя объекта запрещено. Статические методы часто используются для создания вспомогательных функций приложения. 👉 @frontendInterview