​Как работает boxing/unboxing в JavaScript?

Boxing (также известный как wrapping) происходит, когда примитивное значение (такое как число, строка или логическое значение) преобразуется в соответствующий объект-обертку (класс-оболочку). В JavaScript есть объект-обертки для каждого из примитивных типов данных: Number, String и Boolean. Например:

 const number = 42;
 const boxedNumber = new Number(number);
 console.log(typeof boxedNumber); // "object"

В этом примере мы берем число 42 и упаковываем его, создавая объект Number. В результате получается объект-обертка boxedNumber.

JavaScript выполняет boxing автоматически в течение времени выполнения, когда примитивные значения требуются в качестве объектов. Например, при вызове методов объектов-оберток или доступе к свойствам. В таких случаях JavaScript автоматически упакует (забоксирует) примитивное значение во временный объект-обертку.

Unboxing происходит наоборот - когда значение извлекается из объекта-обертки и преобразуется обратно в примитивный тип данных. Это может происходить автоматически или явным образом с помощью методов преобразования типов данных, таких как valueOf() или toString(). Например:

 const boxedString = new String("Hello");
 const unboxedString = boxedString.valueOf();
 console.log(typeof unboxedString); // "string"

В этом примере мы создаем объект String с помощью new String("Hello"), а затем с помощью метода valueOf() извлекаем значение из объекта и преобразуем его обратно в примитивный тип данных.

Важно отметить, что boxing и unboxing в JavaScript могут быть прозрачными и неочевидными при работе с примитивными типами данных и объектами-обертками. JavaScript позволяет нам работать с примитивами, как если бы они были объектами, автоматически выполняя boxing или unboxing при необходимости.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

​Расскажите о паттерне Observer. Приведите примеры реализации этих паттернов в известных фреймворках (библиотеках, браузерных API).

Паттерн Observer представляет собой модель, в которой объекты наблюдатели (observers) зависят от состояния и изменений, происходящих в объекте-субъекте (subject) и автоматически получают уведомления об этих изменениях. Наблюдатели подписываются на события или изменения в объекте-субъекте и реагируют на них. Паттерн Observer является промежуточной компоновкой между отправителем (subject) и получателем (observer). Когда состояние отправителя изменяется, это приводит к автоматическому уведомлению о состоянии всем подписчикам (наблюдателям).

В Vue.js можно использовать функцию watch или опцию computed, чтобы наблюдать за изменением определенных данных. Вот пример:

 const app = new Vue({
  data() {
    return {
      message: 'Hello, World!',
    };
  },
  watch: {
    message(newMessage) {
      console.log('Новое сообщение:', newMessage);
    },
  },
 });

Здесь мы создали новый экземпляр Vue и объявили свойство message. Затем мы использовали опцию watch для создания наблюдателя, который реагирует на изменение свойства message.

👉 @frontendInterview

Ultimate Typenoscript Handbook: Build, scale and maintain Modern Web Applications with Typenoscript (2023)

Эта книга представляет собой исчерпывающее руководство по TypeScript, языку программирования, расширяющему JavaScript такими мощными возможностями, как статическая типизация, классы и интерфейсы. Книга состоит из тринадцати глав, в которых рассматривается все, начиная с настройки среды разработки и заканчивая созданием приложения на языке Angular с использованием TypeScript.

👉 @frontendInterview

Two Sum

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

Пример:
twoSum([1, 2, 3], 4) // returns [0, 2] or [2, 0]

👉 @frontendInterview

​Почему не стоит использовать краткую запись свойств CSS?

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

Когда мы пишем что-то вроде этого:

 .btn {
   background: red;
 }

Мы всего лишь хотим, чтобы у нашей кнопки был красный фоновый цвет. Но на самом деле мы задаем целый набор правил:
.btn {
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: red;
}

За счет простого использования краткой записи, мы безоговорочно решили, что не хотим использовать фоновое изображение, заодно указав для него стартовую позицию с левого верхнего края, повторение по осям x и y и прокрутку вместе с элементом и т.д.

Почти все проблемы, баги и регрессии в CSS происходят из-за того, что мы делаем слишком многое слишком рано, а через некоторое время сталкиваемся с последствиями этого. Из этого факта следует один простой вывод: в CSS вам нужно делать лишь то, что нужно и ничего более.

👉 @frontendInterview

👉 @frontendInterview

​Расскажите про паттерн "адаптер".

Это структурный паттерн проектирования, который позволяет объектам с несовместимыми интерфейсами работать вместе.

Проблема
Представьте, что вы делаете приложение для торговли на бирже. Ваше приложение скачивает биржевые котировки из нескольких источников в XML, а затем рисует красивые графики.
В какой-то момент вы решаете улучшить приложение, применив стороннюю библиотеку аналитики. Но вот беда — библиотека поддерживает только формат данных JSON, несовместимый с вашим приложением.

Решение
Вы можете создать адаптер. Это объект-переводчик, который трансформирует интерфейс или данные одного объекта в такой вид, чтобы он стал понятен другому объекту.

При этом адаптер оборачивает один из объектов, так что другой объект даже не знает о наличии первого. Например, вы можете обернуть объект, работающий в метрах, адаптером, который бы конвертировал данные в футы.

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

👉 @frontendInterview

👉 @frontendInterview

👉 @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