Какие ошибки могут возникнуть при обращении к первому элементу массива после фильтрации и как их избежать?

Что проверяют

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

Как отвечать

Сама ошибка простая: arr.filter(fn)[0] на пустом результате даёт undefined, и обращение к его полю роняет код с TypeError: Cannot read properties of undefined. В React это белый экран, если выше нет Error Boundary. Особенно часто падает первый рендер: данные ещё не пришли, массив пуст.

Как избежать:

• find вместо filter()[0]: возвращает первый подходящий элемент или undefined, останавливается на первом совпадении и не создаёт промежуточный массив;
• optional chaining и ??: users.find(isAdmin)?.name ?? "Гость". Оператор ?? подставляет значение только для null и undefined, а || заменит ещё 0, false и пустую строку;
• явная ветка: если отсутствие элемента это отдельное состояние интерфейса, покажите заглушку, а не прячьте его в дефолтное значение;
• деструктуризация: const [first] = list читается приятнее, но проблему undefined не решает.

В TypeScript главная ловушка в типах. find честно возвращает T | undefined, а доступ по индексу arr[0] типизирован как T, пока не включён флаг noUncheckedIndexedAccess. С ним компилятор заставит обработать пустой случай. Для фильтра с сужением типа пишут предикат (x): x is Admin => ..., а с TypeScript 5.5 компилятор выводит такой предикат из простых колбэков сам.

Можно добавить at(-1) для последнего элемента и findLast для поиска с конца.

Где спотыкаются

Отвечают «проверю length», но оставляют filter()[0] там, где нужен find. Работает, но выдаёт незнание API и лишний проход по массиву.

Путают ?? и || и теряют валидные значения вроде 0.

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