Привет! Хотя регулярность постов и изменилась, неделя по-прежнему начинается с разбора задач с собеседований)

У нас есть пример типизированого массива:

interface Student {
  name: string;
  age: number;
  hasScar: boolean;
}

const students: Student[] = [
  { name: "Harry", age: 17, hasScar: true },
  { name: "Ron", age: 17, hasScar: false },
  { name: "Hermione", age: 16, hasScar: false },
];

И дана функция поиска по массиву, которую нужно типизировать:

function getBy(arr, prop, value) {
  return arr.find(item => item[prop] === value) || null;
}

Пример использования этой функции с массивом:

const result = getBy(students, "name", "Hermione");
console.log(result);

Задача:
Типизировать функцию getBy.

Решение:

function getBy<T, K extends keyof T>(arr: T[], prop: K, value: T[K]) {
  return arr.find(item => item[prop] === value) || null;
}

1. <T, K extends keyof T> — дженерик:
- T — это универсальный тип, который представляет тип объекта внутри массива arr.
- K extends keyof T — означает, что K — это ключ объекта T. Тип keyof T — это объединение всех ключей объекта T.

2. Параметры функции:
- arr: T[] — массив объектов типа T.
- prop: K — ключ, по которому будем искать совпадение.
- value: T[K] — значение, с которым будем сравнивать. Тип значения автоматически подтягивается из типа свойства prop.


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

#JavaScript #interview #typescript

Сегодня у нас очередная задача с собеседования, связанная с рекурсией)

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

Пример вызова функции:

const obj = { red: { fast: { fancy: { car: "lamba" } } } };

console.log(objParse(obj)); // "lamba"

Решение:

function objParse(obj) {
  const [value] = Object.values(obj); // 1, 2

  if (typeof value !== "object") { // 3
    return value;
  }

  return objParse(value); // 4
}

1. Object.values(obj) возвращает массив всех значений объекта.
2. Берём первое значение — value.
3. Если это значение — не объект, возвращаем его.
4. Если это объект, вызываем objParse рекурсивно.

Для кого-то эта задача может показаться совсем простой, но на практике некоторые мидлы задумываются над ней.

#interview #JavaScript

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

Вместо обычного Error можно создать свой класс, унаследованный от него:

class ValidationError extends Error { // 1
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

function validateUser(user) { // 2
  if (!user.name) {
    throw new ValidationError("Поле 'name' обязательно");
  }
}

try {
  validateUser({}); // 3
} catch (error) {
  if (error instanceof ValidationError) { // 4
    console.error("Ошибка валидации:", error.message);
  } else {
    throw error;
  }
}

Что происходит?
1. Мы наследуемся от встроенного Error, чтобы определить новый тип ошибки — ValidationError.

2. Функция validateUser проверяет, есть ли у объекта поле name. Если его нет — выбрасывает кастомную ошибку ValidationError с понятным сообщением.

3. В блоке try вызываем validateUser, передавая объект без name.

4. В блоке catch ловим ошибку и проверяем, является ли она экземпляром ValidationError с помощью instanceof.

Зачем это нужно?
1. Проще различать типы ошибок
2. Можно точечно обрабатывать нужные ошибки с помощью instanceof.
3. Можно сделать более детальные ошибки.

#JavaScript #BestPractices

Привет! Начнем эту 3-дневную рабочую неделю с небольшой алгоритмической задачи.

Задача
Напишите функцию, которая возвращает массив уникальных значений, отсортированных:
1. по количеству повторений (по убыванию),
2. если количество совпадает — по алфавиту.

Пример входных данных:

const words = [
  'banana', 'grapefruit', 'banana', 'grapefruit',
  'banana', 'orange', 'banana', 'grapefruit',
  'grapefruit', 'grapefruit'
];

Ожидаемый результат:

['grapefruit', 'banana', 'orange']

Решение:

function getSortedUnique(words) {
  const freq = {};

  for (let word of words) {
    freq[word] = (freq[word] || 0) + 1;
  }

  return Object.keys(freq).sort((a, b) => {
    if (freq[b] !== freq[a]) {
      return freq[b] - freq[a]; // по убыванию частоты
    }
    
    return a.localeCompare(b); // по алфавиту
  });
}

Разбор:
1. Сначала считаем количество повторений через объект freq.
2. Сортируем ключи — по убыванию количества, а при равенстве — по алфавиту.


Часто в подобных задачах просят не только написать решение, но и посчитать сложность алгоритма.
Предлагаю вам самим попробовать оценить её и, если есть желание, поделиться в комментариях или в нашем чате)

#interview #JavaScript

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

Как это?
Вместо статического импорта:

import { heavyFunc } from './heavyModule.js';

button.addEventListener('click', () => {
  heavyFunc();
});

Используем динамический:

button.addEventListener('click', async () => {
  const module = await import('./heavyModule.js');
  module.heavyFunc();
});

Здесь модуль heavyModule.js загрузится только после клика по кнопке, а не сразу при загрузке страницы.

Зачем?
- Ускоряет загрузку.
- Уменьшает размер основного бандла.

Импорт в React
В React для динамической загрузки компонентов есть React.lazy.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Здесь MyComponent загрузится только при первом рендере LazyComponent.


Когда стоит использовать?
Например, если в приложении есть библиотека для работы с PDF, которую что-то делает по клику на кнопку, то нет смысла грузить её сразу. Такие библиотеки обычно тяжёлые, и динамическая загрузка позволяет сэкономить время и ресурсы.
Не забывайте, что никто не любит ждать. Если ваш сайт долго загружается, пользователь просто уйдёт к конкурентам

#BestPractices #react #JavaScript

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

Пример работающего, но проблемного кода:

async function getData() {
  try {
    const user = await fetch('/user');
    const posts = await fetch('/posts');
    const comments = await fetch('/comments');

    console.log('Все данные получены');
  } catch (error) {
    console.error('Ошибка:', error);
  }
}

Здесь каждый запрос дожидается ответа от предыдущего. Время выполнения функции — сумма времени всех запросов.

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

Более правильная реализация:

async function getData() {
  try {
    const userPromise = fetch('/user');
    const postsPromise = fetch('/posts');
    const commentsPromise = fetch('/comments');

    const [user, posts, comments] = await Promise.all([
      userPromise,
      postsPromise,
      commentsPromise
    ]);

    console.log('Все данные получены');
  } catch (error) {
    console.error('Ошибка:', error);
  }
}

Теперь все запросы отправляются одновременно, и время выполнения функции — это время самого долгого запроса. Такой подход значительно ускоряет загрузку.

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


Помните, что при разработке важно всегда думать о пользователе и его удобстве. Ускорение загрузки и отзывчивость интерфейса делают продукт лучше 🙌

#JavaScript #BestPractices