Назад

March 3, 2025

📊 Як вивести масив у консоль красиво за допомогою console.table

У JavaScript ми часто використовуємо console.log для виводу даних у консоль. Але коли працюємо з масивами або об’єктами, набагато зручніше використовувати console.table. Цей метод створює табличний вивід, що робить перегляд даних значно зручнішим.

📌 Приклад використання

const writers = [
  {
    name: 'Тарас Шевченко',
    birthYear: 1814,
    works: ['Кобзар', 'Гайдамаки'],
  },
  {
    name: 'Леся Українка',
    birthYear: 1871,
    works: ['Лісова пісня', 'Бояриня'],
  },
  {
    name: 'Іван Франко',
    birthYear: 1856,
    works: ['Захар Беркут', 'Каменярі'],
  },
  {
    name: 'Михайло Коцюбинський',
    birthYear: 1864,
    works: ['Тіні забутих предків', 'Fata Morgana'],
  },
  {
    name: 'Василь Стус',
    birthYear: 1938,
    works: ['Палімпсести', 'Веселий цвинтар'],
  },
];

console.table(writers);

📊 Результат у консолі:

┌─────────┬──────────────────────────┬───────────┬─────────────────────────────────────────┐
│ (index) │ name                     │ birthYear │ works                                   │
├─────────┼──────────────────────────┼───────────┼─────────────────────────────────────────┤
│    0    │ 'Тарас Шевченко'         │   1814    │ ['Кобзар', 'Гайдамаки']                 │
│    1    │ 'Леся Українка'          │   1871    │ ['Лісова пісня', 'Бояриня']             │
│    2    │ 'Іван Франко'            │   1856    │ ['Захар Беркут', 'Каменярі']            │
│    3    │ 'Михайло Коцюбинський'   │   1864    │ ['Тіні забутих предків', 'Fata Morgana' │
│    4    │ 'Василь Стус'            │   1938    │ ['Палімпсести', 'Веселий цвинтар']      │
└─────────┴──────────────────────────┴───────────┴─────────────────────────────────────────┘

🎯 Вибірковий вивід колонок Якщо вам не потрібні всі колонки, ви можете вказати лише необхідні:

console.table(writers, ['name', 'birthYear']);

📊 Результат у консолі:

┌─────────┬──────────────────────────┬───────────┐
│ (index) │ name                     │ birthYear │
├─────────┼──────────────────────────┼───────────┤
│    0    │ 'Тарас Шевченко'         │   1814    │
│    1    │ 'Леся Українка'          │   1871    │
│    2    │ 'Іван Франко'            │   1856    │
│    3    │ 'Михайло Коцюбинський'   │   1864    │
│    4    │ 'Василь Стус'            │   1938    │
└─────────┴──────────────────────────┴───────────┘

🚀 Додаткові можливості console.table Окрім виводу масивів, console.table також чудово працює з об’єктами:

const writer = {
  name: 'Ольга Кобилянська',
  birthYear: 1863,
  works: ['Царівна', 'Земля', 'Людина'],
};

console.table(writer);

Висновок:

Метод console.table – чудовий спосіб виводу табличних даних у консоль. Використовуйте його замість console.log, щоб покращити читабельність вашого дебагінгу! 🚀