Gernar
Frontend DeveloperJavaScript

Интервью-вопрос

Как проверить, является ли значение массивом в JavaScript

Короткий ответ: используйте Array.isArray(value). Это спасает от частой ошибки, когда вы ждете список, а получаете другой формат и UI падает на работе со списком.

Добавлен
Редакция

Подготовьте короткий ответ и пару деталей на случай уточняющих вопросов.

🐰0
🥚0

Мини-квиз

Проверка перед разбором

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

Вопрос 1 из 50 правильно

Что ответить, если вас спрашивают про проверку массива?

Вы сейчас объясняете надежный способ понять, что значение является массивом.

Варианты ответа

Разбор

Разобраться, а не зазубрить

Дальше разбираем суть, типичные уточнения и места, где легко сказать лишнее или перепутать термины.

Базовая идея

На интервью начните с прямого ответа. Для проверки массива используйте Array.isArray(value). Эта функция отвечает именно на заданный вопрос, а не проверяет косвенные признаки.

const users = [{ id: 1, name: "Ada" }];
const config = { length: 1 };

console.log(Array.isArray(users)); // true
console.log(Array.isArray(config)); // false

Практический вывод простой. Если дальше вы собираетесь вызвать map, filter, spread или рендерить список, сначала убедитесь, что у вас действительно массив. Иначе ошибка появится уже во время работы интерфейса.

Почему typeof не подходит

typeof полезен для примитивов, но плохо подходит для точного различения объектных типов. Массив в JavaScript является объектом, поэтому результат будет не array, а object.

console.log(typeof []); // "object"
console.log(typeof {}); // "object"
console.log(typeof null); // "object"

Не отвечайте, что проверите через typeof value === 'array'. Такой код никогда не сработает, потому что typeof не возвращает строку array. Даже проверка на object слишком широкая. Туда попадут обычные объекты и null.

Что не так с instanceof

value instanceof Array проверяет, есть ли Array.prototype в цепочке прототипов значения. В одном обычном контексте это часто даст ожидаемый результат.

Проблема в том, что в браузере могут быть разные realm: главное окно, iframe, popup. У каждого realm свой глобальный объект и свой конструктор Array. Массив из iframe может быть настоящим массивом, но не экземпляром Array из текущего окна.

Поэтому на интервью лучше формулировать аккуратно. instanceof Array возможен в простых случаях, но как надежный ответ я выберу Array.isArray(value).

Безопасная проверка перед рендером

Частый frontend-сценарий выглядит так. API должно вернуть список, но из-за ошибки контракта приходит объект, null или другой формат. Если сразу вызвать map, компонент упадет.

function UsersList({ data }) {
  if (!Array.isArray(data)) {
    return <p role="alert">Не удалось загрузить список пользователей.</p>;
  }

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

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

Старый способ через Object.prototype.toString

До широкого использования Array.isArray часто применяли такой прием:

function isArray(value) {
  return Object.prototype.toString.call(value) === "[object Array]";
}

Он вызывает базовый метод toString для переданного значения и получает внутреннюю метку типа. Такой вариант можно упомянуть как основу полифила для старых окружений. Но если вы пишете современный frontend без специальных ограничений, Array.isArray(value) проще и понятнее.

Как сформулировать ответ на интервью

Хорошая короткая формулировка может звучать так:

Я использую Array.isArray(value). typeof здесь не подходит, потому что для массива вернет object. instanceof Array может сработать в простом случае, но может ошибиться с массивами из другого realm, например iframe. Поэтому в frontend-коде, особенно перед рендером списка, я выбираю Array.isArray.

Такой ответ показывает не только знание метода, но и понимание риска. Вы связываете проверку с реальным кодом. Это безопасный рендер списка, обработка ответа API и защита от падения компонента.

Частые ошибки

Где обычно ошибаются

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

  1. 1

    Проверять через typeof

    typeof [] возвращает object, поэтому такая проверка пропустит обычные объекты и не даст точного ответа. На практике после этого легко получить падение на value.map is not a function. Лучше сразу использовать Array.isArray(value).
  2. 2

    Считать instanceof универсальным

    value instanceof Array может вернуть false для массива из другого realm, например из iframe. Это редкий, но реальный браузерный кейс. В ответе лучше сказать, что instanceof возможен локально, но не является самым надежным вариантом.
  3. 3

    Проверять по length или методам массива

    Объект может иметь length, push или map, но от этого он не становится массивом. Такая проверка ломается на похожих объектах и делает код хрупким. Если нужен именно массив, проверяйте массив, а если нужна итерируемость, проверяйте другой контракт.
  4. 4

    Не нормализовать ответ API

    Если компонент ожидает массив, а сервер иногда присылает объект или null, проверка должна быть на границе данных. Иначе ошибка всплывет уже в рендере списка и даст плохой UX. Безопаснее привести данные к ожидаемой форме или показать понятное состояние ошибки, которое заметят и пользователь, и ассистивные технологии.

Follow-up

Что могут спросить дальше

Короткие ответы на вопросы, которыми проверяют понимание проверки массивов в JavaScript.

Живые ответы

Видео с похожим вопросом

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

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

Содержание