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

Можете ли вы описать основное различие между циклом `.forEach` и циклом `.map()`? Чтобы понять разницу между ними, давайте посмотрим, что делает каждая функция. forEach - Перебирает элементы в массиве. - Вызывает callback-функцию для каждого элемента. - Не возвращает значение.

 const a = [1, 2, 3];
 const doubled = a.forEach((num, index) => {
   // Делаем что-либо с num и/или index.
 });
 // doubled = undefined

map - Перебирает элементы в массиве. - “Сопоставляет” каждый элемент с новым элементом, вызывая функцию для каждого элемента, создавая в результате новый массив.

 const a = [1, 2, 3];
 const doubled = a.map(num => {
   return num * 2;
 });
 // doubled = [2, 4, 6]

Основное различие между .forEach и .map() состоит в том, что .map() возвращает новый массив. Если вам нужен результат, но вы не хотите изменять исходный массив, .map() — очевидный выбор. Если вам просто нужно перебрать массив, то стоит воспользоваться forEach.

Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT. Опыт в программировании не нужен. С 6 по 12 апреля проводим бесплатный онлайн-интенсив по Frontend-разработке, где будем учить, как разрабатывать сайты и веб-приложения. За эти 7 дней обучения ты: 1. Создашь полноценный веб-сайт на HTML и CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Узнаешь сколько можно зарабатывать и как работать; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в следующем году зарабатывать от 1000$ на вёрстке сайтов. 👉 Проскочить на интенсив бесплатно

👉 @frontendInterview

Что делает и для чего нужна функция `Function.prototype.bind`? Метод bind() создаёт новую функцию, которая при вызове устанавливает в качестве контекста выполнения this предоставленное значение. В метод также передаётся набор аргументов, которые будут установлены перед переданными в привязанную функцию аргументами при её вызове. 👉 @frontendInterview

Разбить camelCase Напишите функцию, которая будет разбивать строки в camelCase на отдельные слова. Примеры: "camelCasing" => "camel Casing" "identifier" => "identifier" "" => "" 👉 @frontendInterview

Грокаем функциональное мышление Кодовые базы разрастаются, становясь всё сложнее и запутаннее, что не может не пугать разработчиков. Как обнаружить код, изменяющий состояние вашей системы? Как сделать код таким, чтобы он не увеличивал сложность и запутанность кодовой базы? Большую часть «действий», изменяющих состояние, можно превратить в «вычисления», чтобы ваш код стал проще и логичнее. Вы научитесь бороться со сложными ошибками синхронизации, которые неизбежно проникают в асинхронный и многопоточный код, узнаете, как компонуемые абстракции предотвращают дублирование кода, и откроете для себя новые уровни его выразительности. Книга предназначена для разработчиков среднего и высокого уровня, создающих сложный код. Примеры, иллюстрации, вопросы для самопроверки и практические задания помогут надежно закрепить новые знания. 👉 @frontendInterview

​Объясните, почему это не является IIFE: `function foo(){ }();`. Что необходимо изменить, чтобы это стало IIFE?? IIFE расшифровывается как Immediately Invoked Function Expression — немедленно вызываемое функциональное выражение. Синтаксический анализатор JavaScript читает function foo(){ } (); как function foo(){ } и ();, где первое выражение — это объявление функции, а второе (пара скобок) — попытка вызова функции, но так как имя не указано, он выдает ошибку Uncaught SyntaxError: Unexpected token. Вот два способа исправить это, которые заключаются добавление дополнительных скобок: (function foo(){ })() и (function foo(){ }()). Выражения, начинающиеся с function, считаются объявлениями функций. Оборачивая эту функцию внутри (), она становится функциональным выражением, которое затем может быть выполнено с последующим (). Подобные функции не отображаются в глобальной области видимости, и вы можете даже не указывать им имя, если вы не будете на них ссылаться. Вы также можете использовать оператор void — void function foo(){ }(). К сожалению, с таким подходом есть одна проблема. Выполнение данного выражения всегда возвращает undefined, поэтому, если ваше IIFE возвращает что-либо, вы не можете его использовать. Пример: const foo = void function bar() { return ‘foo’; }(); console.log(foo); // undefined 👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Открыта регистрация на серию митапов для начинающих разработчиков Intern Meetup Week в Яндексе с 17 по 20 апреля🎉 18 апреля состоится митап для направления Frontend. Будет доступен офлайн и онлайн формат. Регистрация по ссылке: https://clck.ru/33qVyG При отборе на митап у вас есть шанс получить приглашение на пробное собеседование на стажировку в Яндекс 🔥 В программе лекции экспертов о технологиях, общение с руководителями команд и рекрутерами, нетворкинг и подарки. 📆Когда: 18 апреля 18:00 - 21:30, сбор гостей с 17:30 🌐Где: офис Яндекса, ул. Льва Толстого, 16, м.Парк Культуры и трансляция онлайн Все подробности и регистрация по ссылке: https://clck.ru/33qVyG А чтобы быть в курсе всех новостей Young&&Yandex, подписывайтесь на чат-бот.

Расскажите, как работает прототипное наследование Этот вопрос очень часто задают на собеседованиях. Все объекты в JavaScript имеют свойство prototype, которое является ссылкой на другой объект. Когда происходит обращение к свойству объекта, и если свойство не найдено в этом объекте, то механизм JavaScript просматривает прототип объекта, затем прототип прототипа и т.д. До тех пор, пока не найдет определенное свойство на одном из прототипов или до тех пор, пока он не достигнет конца цепочки прототипов. Такое поведение имитирует классическое наследование, но на самом деле это скорее делегирование, чем наследование. 👉 @frontendInterview

В телеге появился канал, где платят за вёрстку макетов Figma. Нет, это не прикол. На канале каждый день публикуются макеты сайтов в Figma. Верстаешь их, сдаёшь и получаешь свои деньги. Подробности в закрепе. Залетай, пока не поздно!

👉 @frontendInterview

Планируете начать настраивать среды разработки с Vite.js? 🚀Приходите 30 марта в 20:00 на урок, который пройдет в рамках онлайн-курса «Vue.js разработчик». Vite отлично подходит для сложных проектов, где требуется взаимодействие с сервером. В отличие от других инструментов, он легко встраивается через терминал и может быстро разворачиваться. Приглашаем всех желающих на открытый урок, на котором рассмотрим миграцию на Vite с Vue CLI, а также его преимущества: - Мгновенное время запуска сервера разработки - Горячая замена модулей из коробки - Простая конфигурация - Поддержка модулей ES из коробки 👉🏻 Чтобы записаться на урок, пройдите вступительное тестирование https://otus.pw/3kKa/ Курс доступен в рассрочку. Реклама. Информация о рекламодателе на сайте www.otus.ru

​Объясните, как this работает в JavaScript Говоря максимально простым языком, значение this зависит от того, как вызывается функция. Применяются следующие правила: 1. Если ключевое слово new используется при вызове функции, this внутри функции является совершенно новым объектом. 2. Если для вызова/создания функции используются apply, call или bind, то this внутри функции — это объект, который передается в качестве аргумента. 3. Если функция вызывается как метод, например, obj.method(), то this — это объект, к которому принадлежит функция. 4. Если функция вызывается без контекста, то есть она вызывается без условий, описанных в пунктах выше, то this является глобальным объектом. В браузере это объект window. В строгом режиме (’use strict’), this будет undefined вместо глобального объекта. 5. Если применяются несколько из вышеперечисленных правил, то правило, которое выше выигрывает и устанавливает значение this. 6. Если функция является стрелочной функцией, то она игнорирует все вышеописанные правила и получает значение this из лексического окружения во время ее создания. 👉 @frontendInterview