Разбор задачи с собеседования: Реализация Promise.race

На собеседованиях разработчиков часто просят показать свое понимание асинхронного программирования, предложив написать собственную версию стандартных функций. Одна из таких интересных задач - реализация метода Promise.race.

Что такое Promise.race
Promise.race - это метод, который принимает массив промисов и возвращает новый промис, который разрешается или отклоняется, как только первый промис в массиве разрешается или отклоняется. Он возвращает результат или ошибку этого первого промиса.

Задача
Написать функцию promiseRace, ведущую себя аналогично Promise.race.
Функция должна:
1. Возвращать промис.
2. Разрешаться или отклоняться с результатом или ошибкой первого завершенного промиса из массива.

Реализация promiseRace

function promiseRace(promises) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promises)) {
      return reject(new TypeError('Аргумент должен быть массивом'));
    }

    for (const promise of promises) {
      Promise.resolve(promise)
        .then(resolve)
        .catch(reject);
    }
  });
}

Объяснение реализации:
1. Функция promiseRace принимает массив промисов promises.
2. Если promises не является массивом, функция отклоняется с TypeError.
3. Используется цикл for...of для перебора всех промисов.
4. Каждый промис оборачивается в Promise.resolve для поддержки как промисов, так и обычных значений.
4. resolve и reject передаются непосредственно в .then() и .catch() каждого промиса.
5. Как только любой промис из массива завершается, возвращается его результат или ошибка.

Заключение
Умение реализовать Promise.race показывает понимание работы промисов и асинхронного программирования в JavaScript. Это популярный вопрос на собеседованиях, который проверяет способность кандидата эффективно работать с асинхронным кодом.

#interview #javascript

Паттерн Singleton в JavaScript

Ранее мы обсуждали различные шаблоны проектирования, и сегодня я хочу поговорить о одном из них: паттерне Синглтон. Этот шаблон чрезвычайно полезен в определенных ситуациях, и его понимание может значительно улучшить вашу архитектуру кода.

Что такое Синглтон?
Синглтон - это шаблон проектирования, который обеспечивает создание только одного экземпляра класса. Этот единственный экземпляр затем становится легко доступным в глобальном масштабе. Чрезвычайно полезен в сценариях, где требуется централизованное управление ресурсами или информацией.

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

Реализация Синглтона для аналитики:

class Analytics {
    constructor() {
        if (Analytics.instance) {
            return Analytics.instance;
        }
        Analytics.instance = this;
        this.eventLog = [];
    }

    logEvent(event) {
        this.eventLog.push(event);
        console.log('Logged:', event);
    }

    // Другие методы аналитики
}

// Использование
const analytics = new Analytics();
analytics.logEvent('UserLoggedIn');

const anotherAnalytics = new Analytics();
anotherAnalytics.logEvent('PageViewed');

console.log(analytics === anotherAnalytics); // true
console.log(analytics.eventLog); // ['UserLoggedIn', 'PageViewed']

Объяснение Реализации
В классе Analytics проверяется, существует ли уже экземпляр.
Если экземпляр существует, он возвращается, иначе создается новый.
Метод logEvent демонстрирует добавление событий в общий лог.

Заключение
Паттерн синглтон идеален для создания уникальных объектов, где необходима единственность и глобальный доступ. Он позволяет избежать дублирования и обеспечивает централизованное управление, что особенно важно в системах аналитики.

#javascript #patterns

Погружение в Big O Notation

В программировании часто возникают вопросы о производительности и оптимизации кода. Один из ключевых инструментов, помогающих понять и оценить эффективность алгоритмов, - это Big O Notation. Сегодня мы разберем, что это такое и почему каждому разработчику важно это знать.

Что такое Big O Notation?
Big O Notation - это математическая нотация, используемая для описания сложности алгоритма. Она помогает оценить, как изменяется время выполнения или занимаемый объем памяти в зависимости от размера входных данных. В Big O акцентируется внимание на худшем сценарии выполнения алгоритма.

Почему это важно?
Понимание Big O помогает разработчикам:
1. Предсказывать производительность алгоритмов.
2. Определять потенциальные узкие места в коде.
3. Выбирать наиболее эффективные алгоритмы и структуры данных для конкретной задачи.

Примеры big O
- O(1) представляет константную сложность, где время выполнения остается неизменным независимо от размера входных данных. Пример - доступ к элементу массива по индексу.
- O(n) отражает линейную сложность, при которой время выполнения растет пропорционально размеру входных данных. Пример - линейный поиск в массиве.
- O(n²) означает квадратичную сложность, когда время выполнения увеличивается пропорционально квадрату размера входных данных. Типичный пример - двойной цикл для перебора элементов матрицы.
- O(log n) соответствует логарифмической сложности, при которой время выполнения увеличивается логарифмически с увеличением размера входных данных. Пример - бинарный поиск.
- O(n log n) представляет линейно-логарифмическую сложность, часто встречающуюся в алгоритмах сортировки, таких как быстрая сортировка. Время выполнения увеличивается не так стремительно, как в квадратичных или экспоненциальных алгоритмах.
- O(2^n) соответствует экспоненциальной сложности, где время выполнения растет очень быстро с увеличением размера входных данных. Примеры - рекурсивные вычисления, такие как вычисление чисел Фибоначчи.
- O(n!) относится к факториальной сложности, одной из самых высоких форм сложности. Пример - задача коммивояжера, где количество возможных путей растет факториально с увеличением числа точек маршрута.

Заключение
Big O Notation является фундаментальным инструментом в арсенале каждого разработчика. Она не только помогает лучше понимать алгоритмы, но и способствует написанию более эффективного и оптимизированного кода. В будущих постах мы более детально разберем каждую из этих сложностей и их применение на практике.

#algorithm #optimization

HTML элемент dialog для создания модальных окон

В этой статье мы разберемся с HTML элементом dialog, который играет важную роль в создании модальных окон. Этот элемент является мощным инструментом в арсенале разработчиков, позволяющим упростить реализацию модальных окон без сложного JavaScript или CSS.

-> Читать статью

#javascript #html

Всем привет! В этом посте хочу рассмотреть способы общения между окнами. Общение между разными окнами или вкладками браузера представляет собой важный элемент в создании интерактивных приложений.

Что такое общение между окнами?
Это процесс взаимодействия между страницами, находящимися в разных окнах или вкладках. Такое общение необходимо для различных задач, например, для аутентификации пользователей, обмена информацией и синхронизации данных.

Методы общения между окнами:
1. Метод postMessage позволяет окнам безопасно обмениваться данными. Это один из самых безопасных способов общения, поскольку он позволяет избежать проблем, связанных с кросс-доменными запросами. Всегда проверяйте источник (origin) и содержимое сообщений.

// В дочернем окне:
window.opener.postMessage('Привет от дочернего окна!', 'https://telegram.org');

// В родительском окне:
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://telegram.org') return;
  console.log('Сообщение от дочернего окна: ', event.data);
});

2. Изменения в localStorage одного окна могут быть отслежены в другом окне через события storage.

// В одной вкладке:
localStorage.setItem('data', 'Некоторые данные');

// В другой вкладке:
window.addEventListener('storage', (event) => {
  if (event.key === 'data') {
    console.log('Обновленные данные: ', event.newValue);
  }
});

3. BroadcastChannel позволяет разным контекстам браузера, включая вкладки и iframe, обмениваться сообщениями. Хочу отметить, что поддержка BroadcastChannel может варьироваться в разных браузерах.

// В одной вкладке:
const channel = new BroadcastChannel('channel_name');
channel.postMessage('Привет от вкладки 1!');

// В другой вкладке:
const channel = new BroadcastChannel('channel_name');
channel.onmessage = (event) => {
  console.log('Получено сообщение: ', event.data);
};

4. SharedWorker используется для создания общего контекста, который может быть доступен для нескольких скриптов, даже работающих в разных окнах. Его поддержка браузерами ограничена.

// Воркер (shared-worker.js):
onconnect = function(e) {
  const port = e.ports[0];
  port.onmessage = function(event) {
    port.postMessage('Получено: ' + event.data);
  };
};

// В главном скрипте:
const worker = new SharedWorker('shared-worker.js');
worker.port.start();
worker.port.postMessage('Сообщение в SharedWorker');
worker.port.onmessage = function(event) {
  console.log('Ответ от SharedWorker: ', event.data);
};

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

#javascript

Привет! Сегодня я хочу вместе с вами поглубже погрузиться в изучение DOM. Это понятие встречается на каждом шагу нашей работы и играет важную роль в подготовке к собеседованиям.

Что такое DOM?
DOM (Document Object Model) представляет собой структуру, которая отображает HTML-документ как иерархическое дерево узлов. Каждый элемент страницы, будь то тег, текст или атрибут, становится узлом в этом дереве. Эта структура позволяет JavaScript коду взаимодействовать с элементами страницы - читать их, изменять, добавлять или удалять.
Когда браузер загружает страницу, он создает DOM и сохраняет его в переменной document, после чего генерирует событие DOMContentLoaded, сигнализируя о том, что DOM полностью построен и готов к манипуляциям. Именно с переменной document начинается вся работа JavaScript с HTML-разметкой страницы, позволяя управлять содержимым и структурой страницы.

Особенности работы с DOM в JavaScript
- DOM представляет HTML-документ в виде дерева узлов, где каждый узел является частью веб-страницы.
- Через JavaScript можно изменять элементы DOM, добавляя или удаляя узлы, изменяя стили и атрибуты.
- События в DOM позволяют отслеживать действия пользователя на странице, такие как клики мыши и нажатия клавиш, для создания интерактивных интерфейсов.

Важные аспекты DOM:
1. Автоисправление позволяет браузерам исправлять ошибки в HTML-коде в процессе построения DOM, обеспечивая корректное отображение страницы.
2. Влияние на производительность может быть значительным при частых манипуляциях с DOM. Оптимизация таких операций помогает улучшить скорость и отзывчивость веб-приложений.
3. Кроссбраузерная совместимость играет важную роль, так как разные браузеры могут по-разному интерпретировать DOM. Тестирование в различных браузерах обеспечивает стабильность работы веб-приложений.
4. Безопасность в работе с DOM особенно важна при обработке пользовательских данных для защиты от XSS-атак.
5. Доступность должна быть учтена при взаимодействии с DOM, чтобы веб-страницы были удобны для всех пользователей, включая тех, кто использует вспомогательные технологии.

Заключение
Владение навыками работы с DOM в JavaScript открывает широкие возможности для создания интерактивных страниц.

#html #javascript #interview

Привет всем! Вероятно, вы уже прочитали множество статей о git, но я хочу предложить вам прочитать еще и мой пост) Сегодня я поделюсь своими мыслями о лучших практиках, а также предоставлю вам пару ссылок на интересные ресурсы.

Что такое Git?
Git - это система управления версиями, позволяющая отслеживать изменения в файлах и координировать работу над ними между несколькими людьми. Основное преимущество Git - его распределенная природа, позволяющая каждому участнику проекта иметь свою локальную копию репозитория.

Лучшие практики использования Git:
- Регулярно сохраняйте изменения, делая мелкие коммиты. Это упрощает навигацию по истории изменений и откат к более ранним версиям при необходимости.
- Пишите понятные и подробные сообщения к коммитам. Описательные сообщения помогают другим членам команды понять сделанные изменения и причины этих изменений.
- Работайте в отдельных ветках для новых функций или исправлений. Это предотвращает возможные конфликты в основной ветке кода и способствует более организованной работе.
- Понимайте разницу между merge и rebase для эффективного объединения изменений. merge соединяет ветки, сохраняя историю изменений, в то время как rebase переформатирует историю для более чистой линейной последовательности.
- Используйте файл .gitignore для исключения временных или локальных файлов из репозитория. Это предотвращает добавление ненужных или конфиденциальных файлов в общий репозиторий.

Полезные ссылки:
1. Learn Git Branching - интерактивный туториал, который помогает понять концепции ветвления и слияния в git.
2. Visualizing Git - можно посмотреть, как команды git влияют на структуру репозитория. Отлично подходит для визуализации сложных процессов в git.

#git

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

Что такое паттерн "Строитель"?
Строитель - это порождающий паттерн проектирования, который позволяет создавать сложные объекты, разделяя их создание на разные этапы. Это полезно, когда объект должен быть создан в несколько этапов или имеет множество возможных конфигураций.

Применение
Паттерн часто применяется для создания сложных UI компонентов. Например, при создании формы с множеством полей, кнопок и валидационных правил. Использование паттерна помогает упростить и структурировать процесс.

Преимущества:
Чистый код - использование этапов в процессе создания обеспечивает повышенную читаемость и облегчает поддержку кода.
Гибкость - возможность добавлять новые этапы и компоненты, не затрагивая уже написанный код.
Изоляция - сложные аспекты создания объектов удобно управляются и инкапсулируются.

Пример реализации
Допустим, у нас есть задача создания сложного интерактивного диалогового окна. Используя паттерн "Строитель", мы можем разделить этот процесс на этапы: создание основного контейнера, добавление кнопок, настройка обработчиков событий и так далее.
Пример с кодом на прикрепленном изображении.

В этом примере:
1. ModalBuilder - класс, реализующий паттерн "Строитель". Он позволяет пошагово создавать модальное окно с заголовком, содержимым и кнопками.
2. Методы setTitle, addButton, и setContent позволяют задавать соответствующие части модального окна.
3. Метод build создает и возвращает готовый элемент модального окна, который затем может быть добавлен в DOM.

Заключение
Паттерн "Строитель" является мощным инструментом для упрощения создания сложных объектов. Он обеспечивает чистоту и структурированность кода, делая его более поддерживаемым и расширяемым. Использование этого паттерна поможет вам управлять сложными задачами создания интерфейса и повысит качество вашего кода.

#patterns

Всем привет! Хочу вместе с вами разобрать интересную задачу с собеседований: создание функции sum, которая позволяет выполнять цепочку вызовов вида sum(1)(2, 4)(3) и так далее. Эта задача является отличным тестом на понимание работы замыканий в JavaScript.

Требования к функции:
1. Функция должна корректно обрабатывать несколько последовательных вызовов с любым количеством аргументов.
2. Каждый вызов функции с аргументами должен добавлять эти значения к общей сумме.
3. Если функция вызвана без аргументов, она должна возвращать текущее значение суммы.

Решение:

function sum(...args) {
  let total = args.reduce((acc, cur) => acc + cur, 0);

  function innerSum(...innerArgs) {
    if (!innerArgs.length) return total;
    total += innerArgs.reduce((acc, cur) => acc + cur, 0);
    return innerSum;
  }

  return innerSum;
}

В этом решении ключевым является использование замыкания для накопления суммы чисел между вызовами. Если innerSum вызывается без аргументов, она возвращает накопленный результат.

Пример использования:

console.log(sum(1)(2, 4)(3)()); // Выведет 10

Заключение
Такие задачи позволяют показать глубокое понимание важных концепций JavaScript и умение применять их в практических задачах.

А какие необычные или запоминающиеся задачи вам доводилось решать на собеседованиях?

#interview #javascript

Привет! Наконец-то наступила пятница 🍺 Я, как и многие, всегда жду выходные, потому что можно чуть дольше посидеть за компом и не волноваться о том, что просплю дейли. Сейчас, буквально за пару секунд, я поделился с вами частью своих планов на выходные. Так же быстро и легко можно делиться информацией с помощью Web Share API, о котором пойдет речь сегодня.

Что такое Web Share API?
Web Share API - это интерфейс программирования приложений, который позволяет приложениям использовать нативный механизм обмена данных операционной системы. Проще говоря, это позволяет пользователям делиться контентом, таким как текст, ссылки или файлы, напрямую через встроенные в их устройство функции обмена.

Как это работает?
Вызов navigator.share() открывает нативное диалоговое окно обмена устройства. Этот метод принимает объект, который может содержать 4 свойства:
1. title - заголовок
2. text - текст
3. url - ссылка
4. files - массив файлов

Пример использования:

const shareData = {
  title: '@TrueFrontender',
  text: 'Подпишись!',
  url: 'https://t.me/TrueFrontender'
};

shareButton.addEventListener('click', () => {
  if (!navigator.canShare) {
    console.log('Браузер не поддерживает Web Share API')
  }
  
  if (navigator.canShare && navigator.canShare(shareData)) {
    navigator.share(shareData)
      .then(() => console.log('Поделились!'))
      .catch((error) => console.log('Ошибка:', error));
  } else {
    console.log('Браузер не поддерживает Web Share API для данного типа данных.');
  }
});

canShare - этот метод позволяет проверить, поддерживает ли браузер обмен определенными типами данных, что предотвращает возможные ошибки.

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

Заключение
Web Share API - это мощный и простой инструмент, который может оказать значительное влияние на взаимодействие пользователей с вашим сайтом.

#javascript #webapi

Привет! Сегодня рассмотрим простой алгоритм сортировки. Сортировка вставками (Insertion Sort) — один из базовых, но в то же время эффективных алгоритмов сортировки. Этот метод часто используется из-за его простоты и эффективности на небольших массивах данных.

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

Пример из жизни
Представьте, что у вас есть рука, полная игральных карт. Вы берете карту и, просматривая уже отсортированные в руке карты, вставляете ее в нужное место. Точно так же работает сортировка вставками с массивами данных.

Преимущества:
- Простота реализации.
- Хорошая производительность на небольших массивах.
- Эффективна для массивов, которые уже частично отсортированы.
- Не требует дополнительной памяти.

Пример реализации:

function insertionSort(array) {
  // Проходим по массиву, начиная со второго элемента,
  // так как первый элемент уже считается отсортированным
  for (let currentIndex = 1; currentIndex < array.length; currentIndex++) {
    let currentValue = array[currentIndex]; // Текущий элемент для вставки
    let previousIndex = currentIndex - 1; // Индекс предыдущего элемента

    // Идём назад по массиву и ищем подходящее место для текущего элемента.
    // Элементы, которые больше текущего значения, сдвигаем на один шаг вправо.
    while (previousIndex >= 0 && array[previousIndex] > currentValue) {
      array[previousIndex + 1] = array[previousIndex]; // Сдвигаем элемент вправо
      previousIndex--; // Переходим к следующему элементу для сравнения
    }

    // Вставляем текущий элемент в найденную позицию.
    array[previousIndex + 1] = currentValue;
  }
  return array;
}

// Пример использования
console.log(insertionSort([9, 1, 15, 4, 0]));

Когда использовать?
Сортировка вставками идеально подходит для небольших массивов или для массивов, которые уже частично отсортированы. Она также может быть полезна в ситуациях, где входные данные поступают последовательно и необходимо поддерживать отсортированное состояние данных.

Заключение
Сортировка вставками является хорошим инструментом. Она обеспечивает хорошую производительность на небольших массивах и проста в понимании и реализации.

#interview #javascript #algorithm