👉 @frontendInterview

​Почему стоит изучать ФП на JavaScript?

Если вы опытный разработчик, уже знакомый с JavaScript или с каким-то чисто функциональным языком, то вы можете подумать, что JavaScript это весьма забавный способ открыть для себя мир ФП. В оригинальной статье, автор показывает, почему JS подходит для изучения ФП.

JavaScript имеет в своем составе важные особенности, необходимые для ФП:
1. Функции первого класса. Это возможность использовать функции как данные, т.е. передавать функции в качестве входных параметров, возвращать функции и присваивать функции переменным и свойствам объектов.

2. Анонимные функции и лямбда-синтаксис. Например, запись вида x => x * 2 является валидным выражением в JavaScript. Такой синтаксис значительно упрощает работу с функциями высшего порядка.

3. Замыкания. Замыкание - это комбинация функции и ее лексического окружения. Замыкания создаются в момент создания функции. Когда функция создается внутри другой функции, то она имеет доступ к переменным, объявленным во внешней функции, даже после того, как будет осуществлен возврат из этой внешней функции.

Список вещей, которые присущи некоторым функциональным языкам и которых нет в JavaScript:
1. Чистота
2. Иммутабельность
3. Рекурсия

Чистота: В JavaScript "чистота" может быть достигнута только по соглашению (т.е. все участники должны договориться использовать только чистые функции). К сожалению, в JavaScript слишком просто сбиться с пути случайно начав создавать и использовать не "чистые" функции.

Иммутабельность: В ФП языках иммутабельность зачастую дана по умолчанию. В JavaScript отсутствуют эффективные структуры данных, используемые в большинстве ФП языков, но существуют библиотеки, которые могут помочь в этом вопросе, например Immutable.js и Mori.

Рекурсия: Технически, JavaScript поддерживает рекурсию, однако большинство функциональных языков имеют такую особенность как "оптимизация хвостовой рекурсии". Такая особенность позволяет рекурсивным функциям переиспользовать фреймы стека для последующих рекурсивных вызовов (фактически рекурсия преобразуется в плоскую итерацию).

👉 @frontendInterview

React 18 Design Patterns and Best Practices: Design, build, and deploy production-ready web applications with ease and create powerful user experiences, 4th Edition (2023)

Книга состоит из трех частей: в первой вы узнаете об основах паттернов React, во второй погрузитесь во внутреннюю работу React, а в третьей сосредоточитесь на практическом применении. Все примеры кода обновлены в соответствии с последней версией React, а также добавлены новые возможности React 18 и Node 18, архитектура MonoRepo и обширная глава по TypeScript.

👉 @frontendInterview

Capitals first!

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

Пример:
capitalsFirst("hey You, Sort me Already!")
// "You, Sort Already! hey me"

👉 @frontendInterview

​Как работает сборка мусора в JS?

Управление памятью в JavaScript выполняется автоматически и незаметно. Мы создаём примитивы, объекты, функции… Всё это занимает память.
Но что происходит, когда что-то больше не нужно? Как движок JavaScript обнаруживает, что пора очищать память?

Основной концепцией управления памятью в JavaScript является принцип достижимости.
Если упростить, то «достижимые» значения – это те, которые доступны или используются. Они гарантированно находятся в памяти.

1. Существует базовое множество достижимых значений, которые не могут быть удалены.
Например:
- Выполняемая в данный момент функция, её локальные переменные и параметры.
- Другие функции в текущей цепочке вложенных вызовов, их локальные переменные и параметры.
- Глобальные переменные.
- (некоторые другие внутренние значения)
Эти значения мы будем называть корнями.

2. Любое другое значение считается достижимым, если оно доступно из корня по ссылке или по цепочке ссылок.
Например, если в глобальной переменной есть объект, и он имеет свойство, в котором хранится ссылка на другой объект, то этот объект считается достижимым. И те, на которые он ссылается, тоже достижимы. Далее вы познакомитесь с подробными примерами на эту тему.

В движке JavaScript есть фоновый процесс, который называется сборщиком мусора. Он отслеживает все объекты и удаляет те, которые стали недоступными.

👉 @frontendInterview

👉 @frontendInterview

​Что такое пулреквест и как его сделать на GitHub?

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

Для того, чтобы сделать пулреквест, нужно создать отдельную ветку и внести все правки именно в неё. Название ветки можно выбрать произвольным образом, но лучше отразить суть изменений в нескольких английских словах, перечисленных через знак переноса (-). Например, чтобы внести изменения (пофиксить), можно использовать слово fix или hotfix (для срочных изменений) в качестве первого слова:
git checkout -b hotfix

Эта команда создаст ветку с именем hotfix, и Git переключит репозиторий на новую ветку. Теперь можно вносить изменения с помощью коммитов, например:
git commit -m 'Вносит правки в описание'

Когда все правки внесены, необходимо отправить изменения на GitHub. Для этого нужно выполнить команду:
git push -u origin hotfix

После этого нужно перейти на сайт GitHub и зайти там в репозиторий. Сверху появится сообщение на жёлтом фоне, в котором вам предложат создать пулреквест. Можно нажать кнопку «Compare & pull request» в этом сообщении или создать пулреквест «вручную» на странице со списком пулреквестов с помощью кнопки «New pull request»

Далее вас перекинет на страницу с настройками будущего пулреквеста. На ней можете добавить название и описать изменения, выбрать ветку, в которую хотите внести изменения (по умолчанию выбирается ветка, из которой создавали текущую ветку с изменениями) или связать ваш запрос с текущими нуждами.

👉 @frontendInterview

👉 @frontendInterview

​Тег <samp>

Он используется для оформления вывода данных, которые показываются пользователю в результате выполнения программы. Содержимое этого элемента воспринимается устройствами как простой текст.

Внутри тега <samp> размещается информация, которую пользователь может получить в процессе взаимодействия с программой:
- вывод информации о ходе выполнения программы;
- ошибки, предупреждения и подсказки инструментов разработчика или операционной системы;
- приглашение к вводу данных.
В браузерах текст внутри <samp> по умолчанию отображается моноширинным шрифтом.

Если нужно показать пользователю результат работы программы в реальном времени, лучше использовать тег <output>, например:
- информация, которую пользователь вводит или изменяет в форме;
- вывод расчётов по данным, которые указал пользователь (калькулятор, гороскоп и т. п.).

При оформлении вывода данных <samp> часто комбинируют с тегами <var>, <kbd> и <code>:

 <div>
   <p>
     В ходе выполнения программы вам будет предложено указать расстояние:
   </p>
   <p>
     <samp>
       Введите значение для переменной <var>Distance</var>:
     </samp>
   </p>
 </div>

 <div>
   <p>
     Следующая команда выведет в консоли браузера результат сложения
     двух чисел:
   </p>
   <pre>
   <code>console.log(2.3 + 2.4)</code>
   <samp>4.699999999999999</samp></pre>
 </div>

 <div>
   <p>
     Неправильно введённая команда не будет выполнена и в консоли отобразится
     ошибка:
   </p>
   <samp>
     <span class="console-name">user@machine:~$</span> <kbd>ckear</kbd>
     <br>
     ckear: The term 'ckear' unidentified as a name of a cmdlet, function,
     noscript file, or executable program.
     <br>
     <span class="console-name">user@machine:~$</span>
     <span class="console-cursor">_</span>
   </samp>
 </div>

👉 @frontendInterview

You don't know JS - Замыкания и объекты

Каким бы опытом программирования на JavaScript вы ни обладали, скорее всего, вы не понимаете язык в полной мере. Это лаконичное, но при этом глубоко продуманное руководство познакомит вас с областями видимости, замыканиями, ключевым словом this и объектами – концепциями, которые необходимо знать для более эффективного и производительного программирования на JS. Вы узнаете, как и почему они работают, и как замыкания могут стать эффективной частью вашего инструментария разработки.
Как и в других книгах серии «Вы не знаете JS», здесь рассматриваются нетривиальные аспекты языка, от которых программисты JavaScript предпочитают держаться подальше. Вооружившись этими знаниями, вы достигнете истинного мастерства JavaScript.

👉 @frontendInterview

Converting 12-hour time to 24-hour time

Создайте функцию, которая принимает время в 12-часовом формате в виде трёх параметров (Часы, минуты, am/pm). И возвращает время в 24-часовом формате.

Примеры:
to24hourtime( 1, 0, "am") => "0100", "Input = 1:00 am"
to24hourtime( 1, 0, "pm") => "1300", "Input = 1:00 pm"
to24hourtime(12, 0, "am") => "0000", "Input = 12:00 am"
to24hourtime(12, 0, "pm") => "1200", "Input = 12:00 pm"
to24hourtime( 6, 30, "am") => "0630", "Input = 6:30 am"
to24hourtime( 9, 45, "pm") => "2145", "Input = 9:45 pm"

👉 @frontendInterview

Расскажите как соотносятся с размером шрифта px, em и rem?

Пиксель px – это абсолютная единица измерения. 1px интерпретируется как 1/96 дюйма. Главное достоинство использования пикселей для определения размера – чёткость и понятность. Однако, пиксель является фиксированной величиной и не позволяет устанавливать соотношение между различными размерами.

В отличие от px, единицы em и rem – относительные величины.

При задании размера шрифта в em он считается относительно размера шрифта родительского блока.
1em равен размеру шрифта, установленному в родительском элементе.

Размер шрифта в rem рассчитывается относительно размера шрифта корневого элемента. Для веб-страницы это <html>.

👉 @frontendInterview

👉 @frontendInterview

Почему typeof null возвращает object?

В JavaScript, typeof null возвращает строку "object", что может показаться странным, поскольку null является специальным значением, обозначающим отсутствие значения или пустую ссылку.

Причина, по которой typeof null возвращает "object", связана с историческими особенностями реализации JavaScript в браузерах.

На самом деле, в начальной версии JavaScript, null был представлен в виде 0 в памяти и интерпретировался как указатель на объект. В этом случае, вернув "object" при typeof null, создатели JavaScript дали возможность понять, что значение является "пустой ссылкой", указывающей на отсутствие объекта.

👉 @frontendInterview