Покорение this в JavaScript

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

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

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

const cat = {
  name: 'Барсик',
  greet: function() {
    console.log(`Мур, меня зовут ${this.name}!`);
  }
};

cat.greet(); // Выведет "Мур, меня зовут Барсик!"

В этом примере this внутри функции greet ссылается на объект cat, и мы можем получить доступ к его свойству name через this.name.

Как работает this?
Значение this определяется тем, как вызывается функция. Существует несколько правил, определяющих контекст this:
- В глобальной области this ссылается на глобальный объект (в браузере это window)
- Когда функция вызывается как метод объекта, this указывает на сам объект(слева от точки), в контексте которого она вызывается
- При использовании конструктора (с помощью new) this относится к только что созданному экземпляру объекта
- Когда функция передается в качестве обработчика события, this указывает на элемент, к которому привязано событие
- При привязке через call, apply или bind можно явно указать, на что должен ссылаться this

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

const cat = {
  name: 'Барсик',
  greet: function() {
    setTimeout(function() {
      console.log(`Мур, меня зовут ${this.name}!`);
    }, 1000);
  }
};

cat.greet(); // Выведет "Мур, меня зовут undefined!"

В этом примере this внутри setTimeout указывает не на объект cat, а на глобальный объект (в браузере это window). Это происходит из-за потери контекста this во вложенной функции.

Как избежать проблем с this?
- Используя стрелочные функции, мы можем избежать потери контекста, так как они не имеют собственного this и берут его из окружающего контекста.
- Переменные или методы объекта могут быть сохранены в других переменных для сохранения контекста this.
- Явно привязать контекст с помощью методов call, apply, или bind, чтобы присвоить this определенному контексту

Итого:
Понимание this в JavaScript является важным навыком для любого разработчика. Он может быть запутанным, но при правильном понимании и использовании он становится мощным инструментом в руках разработчика JavaScript.

#javascript

Как работает React.memo и когда его следует использовать? В этой статье мы рассмотрим основы мемоизации компонентов в React.

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

#react

В этой статье мы разберем два ключевых типа в TypeScript: unknown и any. Их часто обсуждаются на собеседованиях и они важны для понимания разработчиками. Вы узнаете о ключевых различиях между unknown и any и расширите ваше понимание TypeScript.

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

#typescript

Погружение в области видимости JavaScript

Область видимости является фундаментальныой концепцией, которая определяет доступность переменных и функций в различных частях вашего кода. Давайте разберемся с этой важной темой более детально. Эта тема часто встречается на технических собеседованиях, что делает её понимание важным для разработчика.

Что такое область видимости?
Область видимости относится к контексту, в котором переменные и функции объявлены и доступны для использования. В зависимости от места объявления, переменные могут иметь глобальную, функциональную или блочную область видимости.

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

const globalVar = "Я глобальная переменная";
function testScope() {
    console.log(globalVar); // Доступ к глобальной переменной
}
testScope();

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

function testLocalScope() {
    const localVar = "Я локальная переменная";
    console.log(localVar); // Доступна только внутри функции
}
testLocalScope();
console.log(localVar); // Ошибка: localVar не определена

Блочная область видимости:
Введенная в ES6, блочная область видимости позволяет переменным, объявленным с помощью let и const, быть ограниченными блоками кода (например, циклами или условными операторами). Это дает больше контроля над тем, где и как переменные должны использоваться.

if (true) {
    const blockVar = "Я в блочной области видимости";
    console.log(blockVar); // Доступна внутри блока
}
console.log(blockVar); // Ошибка: blockVar не доступна вне блока

До ES6, var был основным способом объявления переменных в JavaScript. Переменные, объявленные через var, имеют некоторые уникальные особенности. Они подчиняются функциональной области видимости, а не блочной, и подвержены "всплытию" (hoisting).

function testVar() {
    if (false) {
        var functionScopedVar = "Я в функциональной области видимости";
    }
    console.log(functionScopedVar); // Доступна внутри функции
}
testVar();

Замыкания и области видимости:
Замыкания в JavaScript - это мощный паттерн, который позволяет функциям запоминать и доступать к переменным из области видимости, в которой они были созданы, даже после того, как эта область была закрыта.

function outerFunction() {
    const outerVar = "Я из внешней функции";

    function innerFunction() {
        console.log(outerVar); // Доступ к outerVar из внутренней функции
    }

    return innerFunction;
}

const myInnerFunction = outerFunction();
myInnerFunction(); // Выводит "Я из внешней функции"

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

#javascript

Замыкания в JavaScript

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

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

Как работают замыкания?
Давайте рассмотрим простой пример:

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

В этом примере, counter является замыканием. Оно сохраняет доступ к переменной count, которая определена во внешней функции createCounter.

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

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

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

#javascript

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

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

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

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

Реализация promiseAll

function promiseAll(promises) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promises)) {
      return reject(new TypeError('Arguments must be an array'));
    }

    const resolvedValues = [];
    let resolvedCount = 0;
    const promisesCount = promises.length;

    if (promisesCount === 0) {
      resolve(resolvedValues);
    }

    promises.forEach((promise, index) => {
      Promise.resolve(promise)
        .then(value => {
          resolvedValues[index] = value;
          resolvedCount += 1;
          if (resolvedCount === promisesCount) {
            resolve(resolvedValues);
          }
        })
        .catch(reject);
    });
  });
}

Объяснение реализации
1. Функция promiseAll принимает массив промисов promises.
2. Если promises не является массивом, функция отклоняется с TypeError.
3. Создаются переменные для хранения разрешенных значений и счетчика разрешенных промисов.
4. Промисы перебираются с помощью forEach, обрабатываясь через Promise.resolve для поддержки не-промисов.
5. Каждый раз, когда промис разрешается, его значение записывается в resolvedValues, и увеличивается resolvedCount.
6. При достижении resolvedCount значения promisesCount массив resolvedValues возвращается.
7. В случае отклонения любого промиса, основной промис отклоняется.

Заключение
Понимание и реализация Promise.all отражает хорошие знания асинхронности в JavaScript. Это типичный вопрос на собеседованиях, который проверяет умение кандидата работать с промисами и асинхронным кодом.

#interview #javascript

Разбираемся с схлопыванием отступов в CSS

Схлопывание отступов, является интересной особенностью CSS, которая часто становится источником вопросов для разработчиков. Это явление возникает, когда два вертикальных отступа (margin) находятся рядом друг с другом, и, вместо того чтобы складываться, они объединяются в один, принимая значение большего отступа. Этот процесс может существенно влиять на макет веб-страницы, делая понимание схлопывания отступов важным для правильной вёрстки.

Почему это происходит?
Схлопывание отступов - это часть спецификации CSS. Оно помогает предотвратить излишние отступы между элементами, что особенно полезно в потоковых макетах.

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

Как управлять схлопыванием:
- Добавление границы или паддинга к элементам помогает предотвратить схлопывание отступов, так как наличие этих свойств изменяет условия, при которых происходит схлопывание.
- Использование flex или grid вместо блочной модели позволяет избежать схлопывания отступов, обеспечивая более точный контроль над расстояниями между элементами.

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

#css

Использование useRef в React и почему createRef не подходит для функциональных компонентов

В React, рефы представляют мощный инструмент для работы с DOM-элементами и React-компонентами. Хотя createRef и useRef оба предназначены для работы с ref, их применение различается, особенно когда речь идет о функциональных компонентах.

useRef в Функциональных Компонентах
useRef - это хук, предлагающий универсальный и стабильный способ для хранения ссылок в функциональных компонентах. Он обладает следующими качествами:
- Сохраняет один и тот же объект ref между рендерами, обеспечивая стабильность.
- Можно использовать для хранения любых изменяемых данных, не приводящих к перерендеру - компонента.
Изменения в .current свойстве не вызывают перерендер компонента, что обеспечивает более эффективное управление состоянием

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

function Component() {
  const ref = useRef(null);

  useEffect(() => {
    ref.current.focus();
  }, []);

  return <input ref={ref} />;
}

Ограничения createRef в функциональных компонентах
createRef обычно используется в классовых компонентах и при каждом рендере создает новый ref объект. В функциональных компонентах это приводит к проблемам:
- Создает новый ref при каждом рендере, что приводит к потере состояния ref между обновлениями.
- Не сочетается с концепцией хуков и функциональными компонентами.

Заключение
Для функциональных компонентов в React всегда стоит выбирать useRef из-за его стабильности и совместимости с хуками. В классовых компонентах подходящим выбором остается createRef

Софт скиллы для программистов

Софт скиллы играют важную роль в карьере, наравне с техническими навыками. Они включают общение, командную работу, решение проблем и множество других компетенций, ключевых для успеха в любой сфере, особенно в IT. Эти навыки охватывают все, что связано с коммуникацией, взаимодействием и личностными качествами, которые способствуют более эффективной и успешной профессиональной деятельности. На собеседованиях обычно большое внимание уделяется техническим навыкам. Однако, мягкие навыки часто играют не менее важную, а иногда и решающую роль в процессе отбора.

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

Ключевые причины:
- Коммуникативные навыки играют важную роль, так как умение четко и ясно выражать свои мысли необходимо для эффективного общения. Кандидаты, способные эффективно общаться, легко вписываются в команду и быстрее адаптируются к рабочему процессу.
- Командная работа необходима в IT-проектах, где совместная работа и способность достигать общих целей ценятся особенно высоко.
- Решение проблем часто важнее глубоких технических знаний, так как способность к творческому подходу и нахождению нестандартных решений помогает эффективно справляться с непредвиденными ситуациями.
- Адаптивность в быстро меняющемся мире технологий означает, что способность быстро обучаться и адаптироваться ценится выше узкоспециализированных навыков.
- Эмоциональный интеллект важен для создания гармоничной рабочей среды, так как он включает понимание и управление как собственными, так и чужими эмоциями.

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

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

Разбор задачи с собеседования: Потеря this в методе объекта

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

Исходный код:

const todoService = {
  activeStatus: 'progress',
  todoItems: [
    { task: 'Подписаться на канал True Frontender', status: 'completed' },
    { task: 'Выучить JavaScript', status: 'progress' },
  ],
  getFilteredTodosByStatus: function() {
    return this.todoItems.filter(function(todo) {
        return todo.status === this.activeStatus;
    });
  }
};

console.log(todoService.getFilteredTodosByStatus());

Что делает код:
- Объявляется объект todoService, который содержит текущий фильтр для задач (activeStatus), массив объектов задач (todoItems), и метод getFilteredTodosByStatus.
- Метод getFilteredTodosByStatus предназначен для возврата задач, чей статус совпадает с activeStatus.
- В методе filter используется обычная функция, что может привести к потере контекста this.


Проблема:
Внутри функции, переданной в filter, this не будет ссылаться на объект todoService, а будет undefined или ссылаться на window, в зависимости от строгого режима (use strict).
Это означает, что this.activeStatus будет undefined, и метод getFilteredTodosByStatus не сможет корректно отфильтровать пользователей.

Как исправить:
Используйте стрелочную функцию для сохранения контекста this из внешней функции:

getFilteredTodosByStatus: function() {
  return this.todoItems.filter((todo) => {
    return todo.status === this.activeStatus;
  });
}

Или используйте переменную для сохранения контекста перед вызовом filter:

getFilteredTodosByStatus: function() {
  const currentActiveStatus = activeStatus;
  return this.todoItems.filter(function(todo) {
    return todo.status === currentActiveStatus;
  });
}

Итого:
Эта задача проверяет понимание особенностей работы с контекстом в JavaScript и способности решать распространенные проблемы, связанные с потерей контекста.

#interview #javascript

Введение в паттерны

Паттерны проектирования - это общепризнанные решения, предлагаемые для стандартных задач. Они помогают разработчикам организовать код, облегчая тем самым процесс разработки и поддержки. В JavaScript, как и в других языках программирования, паттерны делятся на три основные категории: порождающие, структурные и поведенческие.

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

Эти паттерны находят применение, например, в ситуациях, где требуется создать группы тесно связанных объектов.

Структурные паттерны
Структурные паттерны помогают создавать большие структуры из объектов и классов. Они обеспечивают эффективное взаимодействие между различными частями, используя наследование и композицию.
Структурные паттерны включают:
- Адаптер
- Мост
- Декоратор
- Фасад
- Компоновщик
- Прокси
- Приспособленец

Эти паттерны позволяют, например, объединять процессы различных библиотек для создания единой системы.

Поведенческие паттерны
Поведенческие паттерны фокусируются на взаимодействиях и обязанностях между объектами. Они помогают определить, как различные компоненты системы взаимодействуют друг с другом.
В их число входят:
- Цепочка обязанностей
- Команда
- Итератор
- Посредник/Медиатор
- Наблюдатель
- Состояние
- Стратегия
- Посетитель
- Хранитель
- Шаблонный метод

Эти паттерны решают задачи координации и делегирования обязанностей между объектами.

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

#patterns

Разница между useEffect и useLayoutEffect в React

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

useEffect
useEffect используется для выполнения побочных эффектов в компоненте, таких как запросы данных, подписки или ручные изменения в DOM, которые не требуют немедленного выполнения и не блокируют визуальные обновления.

Особенности:
- Выполняется после отрисовки и коммита компонента в DOM.
- Не блокирует визуальные обновления, что делает его идеальным для большинства побочных эффектов.
- Используется для взаимодействий с внешними API и выполнения асинхронных операций.

useLayoutEffect
useLayoutEffect работает аналогично useEffect, но вызывается синхронно после всех изменений DOM, но перед перерисовкой на экране. Это значит, что все изменения, выполненные в useLayoutEffect, будут отражены на экране сразу после его выполнения.

Особенности:
- Выполняется синхронно после всех изменений DOM, но до перерисовки.
- Используется для чтения или изменения DOM до того, как пользователь увидит обновления.
- Может вызывать блокировку визуальных обновлений, если содержит тяжелые вычисления.

Ключевые различия:
- useEffect выполняется после отрисовки компонента, позволяя выполнять побочные эффекты без блокировки визуальных обновлений, в то время как useLayoutEffect выполняется непосредственно после изменений в DOM и перед перерисовкой, что идеально подходит для задач, требующих немедленного чтения или изменения DOM.
- Использование useLayoutEffect может привести к заметным задержкам в визуальных обновлениях, особенно если в нем содержатся тяжелые вычисления, тогда как useEffect не оказывает такого влияния на процесс рендеринга.
- В большинстве случаев предпочтительнее использовать useEffect для обработки побочных эффектов, а useLayoutEffect следует использовать только тогда, когда необходимо синхронно взаимодействовать с DOM, например для измерения размеров элемента перед его отображением.

Заключение
Выбор между useEffect и useLayoutEffect зависит от требований к побочным эффектам в вашем компоненте. Хотя useEffect является наиболее часто используемым хуком для побочных эффектов из-за его не блокирующего поведения, useLayoutEffect предоставляет необходимую синхронность для определенных сценариев работы с DOM. Важно правильно выбирать между ними, чтобы обеспечить эффективную работу приложения и хороший пользовательский опыт.

#react

Default Export vs Named Export

В JavaScript есть два основных типа экспорта: default (по умолчанию) и named (именованный). Понимание их различий важно для эффективной организации кода и его повторного использования.

Default Export
Default export - применяется для экспорта одного основного элемента из модуля, идеально подходя для экспорта уникальных или специализированных компонентов. Этот тип экспорта позволяет импортирующему файлу выбрать имя для компонента, добавляя гибкость.

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

// Экспорт
export default function Component() { ... }

// Импорт
import Component from './Component';

Named Export
Named export - используется для экспорта нескольких элементов из одного файла. Это идеально подходит для библиотек компонентов, утилит или когда один файл содержит несколько связанных функций или компонентов.

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

// Экспорт
export const utility1 = () => { ... };
export const utility2 = () => { ... };

// Импорт
import { utility1, utility2 } from './Utilities';

Какой тип экспорта использовать
- Использование default export рекомендуется для основных компонентов или функций в файле, особенно если в нем только один экспортируемый элемент. Это упрощает импорт и поддерживает чистоту кода.
- Named export лучше использовать для файлов, содержащих несколько функций, утилит или компонентов. Это обеспечивает ясность и консистентность в именах экспортируемых элементов и упрощает их поддержку и обновление.

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

#javascript

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

В одном из наших прошлых постов(тык) мы разбирали реализацию Promise.all. Продолжая тему асинхронного программирования, на этот раз мы сосредоточимся на Promise.allSettled - еще одном ключевом методе для управления промисами в JavaScript. Эта задача на собеседовании проверяет умение кандидата работать с асинхронными операциями и его способность создавать комплексные решения.

Что такое Promise.allSettled
Promise.allSettled - это метод, который принимает массив промисов и возвращает промис, который разрешается после завершения всех промисов в массиве. В отличие от Promise.all, который отклоняется при первом же отклоненном промисе в массиве, Promise.allSettled предоставляет результат каждого промиса, независимо от его состояния.

Задача
Написать функцию promiseAllSettled, имитирующую поведение Promise.allSettled.
Функция должна:
1. Возвращать промис.
2. Разрешаться с массивом результатов всех промисов, независимо от их состояния.
3. Каждый результат в массиве должен быть объектом с полями status и value (для выполненных промисов) или status и reason (для отклоненных промисов).

Реализация promiseAllSettled

function promiseAllSettled(promises) {
  return new Promise(resolve => {
    const results = new Array(promises.length).fill(null);
    let completed = 0;
    promises.forEach((promise, index) => {
      Promise.resolve(promise)
        .then(value => {
          results[index] = { status: 'fulfilled', value };
        })
        .catch(reason => {
          results[index] = { status: 'rejected', reason };
        })
        .finally(() => {
          completed++;
          if (completed === promises.length) {
            resolve(results);
          }
        });
    });
  });
}

Объяснение реализации
1. Функция promiseAllSettled принимает массив промисов promises.
2. Создается массив results для хранения результатов каждого промиса.
3. Каждый промис в массиве обрабатывается с помощью Promise.resolve, чтобы поддержать как промисы, так и не-промисные значения.
4. Для каждого промиса результат (успешное выполнение или отклонение) записывается в results.
5. После обработки всех промисов функция возвращает промис, разрешенный с массивом результатов.

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

#interview #javascript

useImperativeHandle в React: хук, о котором Вы, возможно, не знали

Если вы работаете с React, вероятно, вы использовали множество различных хуков. Но есть один хук, о котором многие разработчики даже не слышали, не говоря уже о его использовании - useImperativeHandle. Этот хук часто остается в тени более популярных хуков, но он может быть неоценимым инструментом в определенных сценариях, особенно когда требуется более тонкое управление взаимодействиями между родительскими и дочерними компонентами.

Как работает useImperativeHandle
useImperativeHandle обычно используется в сочетании с forwardRef и позволяет родительскому компоненту вызывать специфические функции дочернего компонента. Это может быть полезно для управления фокусом, триггеринга анимаций или других действий, которые должны быть инициированы родительским компонентом, но выполнены дочерним.

Пример использования
Давайте рассмотрим пример, где у нас есть TextInput, и мы хотим, чтобы родительский компонент мог вызывать его метод focus.

import React, { useRef, useImperativeHandle } from 'react';

const TextInput = React.forwardRef((props, ref) => {
  const inputRef = useRef();
  
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} type="text" />;
});

function ParentComponent() {
  const textInputRef = useRef();

  const focusTextInput = () => {
    textInputRef.current.focus();
  };

  return (
    <>
      <TextInput ref={textInputRef} />
      <button onClick={focusTextInput}>Focus on Input</button>
    </>
  );
}

В этом примере useImperativeHandle используется для предоставления родительскому компоненту метода focus, позволяя управлять фокусом текстового поля.

Заключение
useImperativeHandle в React может оказаться необходимым в определенных сценариях, особенно когда требуется более тонкое управление поведением дочерних компонентов. Его использование должно быть оправданным и целенаправленным, так как чрезмерное увлечение императивными подходами может привести к усложнению архитектуры и уменьшению гибкости компонентов.

#react