`console.log()`

Время чтения: меньше 5 мин

Кратко

console.log(); — это метод, предназначенный для вывода в консоль браузера.

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

Как пишется

Синтаксис написания крайне прост. console.log() выведет в консоль все переданные параметры:

        
          
          console.log("hello") // выведет "hello"console.log(true, { a: true }, 100) // выведет true {a: true} 100
          console.log("hello") // выведет "hello"
console.log(true, { a: true }, 100) // выведет true {a: true} 100

Как это понять

⚡️ В момент разработки все действия кажутся долгими, поэтому можно воспользоваться молниеносным выводом в консоль.

Почему консоль разработчика, а не alert?

Открой консоль и сравни:

        
          
          let a = { id: 1, value: "one text" }alert(a)
          let a = { id: 1, value: "one text" }
alert(a)

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

Другое дело если совершать эти действия в консоли:

        
          
          let a = { id: 1, value: "one text" }console.log(a)
          let a = { id: 1, value: "one text" }
console.log(a)

Результат представлен в виде древа, которое удобно раскрывается — видны все параметры.

💡 Если хочется вывести отладочное сообщение на страницу, то придётся воспользоваться или alert или создавать специальный textarea, чтобы записать туда свои вычисления. Также нужно будет перевести всё это в строку — проще будет читать.

Особенность работы в браузере

В браузере с помощью console.log можно проверить мутацию ссылочного типа. Этого можно добиться, раскрыв выведенное значение в консоли. Всё что нам нужно сделать — нажать на ►.

В качестве примера создадим массив с героями диснеевских мультфильмов. Изначально в нем будет располагаться только Микки Маус, а после вызова console.log, добавим и Плуто.

        
          
          const disneyCharacters = [{ name: 'Mickey Mouse', type: 'mouse' }]console.log(disneyCharacters)disneyCharacters.push({name: 'Pluto', type: 'dog' })
          const disneyCharacters = [{ name: 'Mickey Mouse', type: 'mouse' }]
console.log(disneyCharacters)
disneyCharacters.push({name: 'Pluto', type: 'dog' })

Нажмём на ► в консоли и увидим результат вывода:

В консоли отображается массив с обоими героями — В консоли выводится итоговый вид массива с добавленным Плуто

Причина в том, что значение ссылочного типа читается браузером только при его первом раскрытии. Этот процесс также называют ленивым чтением (lazy-read).

На практике

doka-dog

В пространстве console существуют различные инструменты. Рассмотрим console.log и console.dir.

🤖 console.log отражает любой объект в консоли в достаточно удобном виде. Если это примитив — то его значением, если объект — его древовидной формой, если DOM-элемент — его можно также раскрыть и увидеть, что внутри.

Но console.log показывает содержимое DOM, а не его свойства. Чтобы увидеть свойства DOM-элемента необходимо использовать console.dir:

        
          
          z = document.createElement("div")zz = document.createElement("div")zz.appendChild(z)console.log(z)console.dir(z)
          z = document.createElement("div")
zz = document.createElement("div")
zz.appendChild(z)
console.log(z)
console.dir(z)

⚡️Короче, console.log удобен для исследования объектов и их вложенных элементов, а console.dir удобен для просмотра свойств объекта.

Если делать console.log и console.dir простого объекта, то разница минимальна, ребят:

        
          
          let a = { cat: "miu", dog: "woof" }console.log(a)console.dir(a)
          let a = { cat: "miu", dog: "woof" }
console.log(a)
console.dir(a)

🛠 В каждом браузере свой набор инструментов работы с console. В целом, они похожи, но есть и различия. Узнать подробности и поддерживаемые методы можно по ссылкам:

https://developers.google.com/web/tools/chrome-devtools/console/console-write

https://developer.mozilla.org/en-US/docs/Web/API/Console

vitalybaev

🛠 Часто нам необходимо вывести в консоли содержимое переменных. Например, вывести переменные language и count можно так:

        
          
          const language = 'JavaScript'const count = 100console.log('language:', language, 'count:', count)// language: JavaScript count: 100
          const language = 'JavaScript'
const count = 100

console.log('language:', language, 'count:', count)
// language: JavaScript count: 100

Но можно сделать проще и быстрее. Сравните:

        
          
          const language = 'JavaScript'const count = 100console.log({ language, count })// { language: 'JavaScript', count: 100 }
          const language = 'JavaScript'
const count = 100

console.log({ language, count })
// { language: 'JavaScript', count: 100 }

🛠 Если у нас есть массив с каким-то количеством однотипных объектов, то можно воспользоваться console.table():

        
          
          const data = [  { section: 'HTML', count: 212 },  { section: 'CSS', count: 121 },  { section: 'JavaScript', count: 182 },  { section: 'Tools', count: 211 },]console.table(data);// ┌─────────┬──────────────┬───────┐// │ (index) │   section    │ count │// ├─────────┼──────────────┼───────┤// │    0    │    'HTML'    │  212  │// │    1    │    'CSS'     │  121  │// │    2    │ 'JavaScript' │  182  │// │    3    │   'Tools'    │  211  │// └─────────┴──────────────┴───────┘
          const data = [
  { section: 'HTML', count: 212 },
  { section: 'CSS', count: 121 },
  { section: 'JavaScript', count: 182 },
  { section: 'Tools', count: 211 },
]

console.table(data);
// ┌─────────┬──────────────┬───────┐
// │ (index) │   section    │ count │
// ├─────────┼──────────────┼───────┤
// │    0    │    'HTML'    │  212  │
// │    1    │    'CSS'     │  121  │
// │    2    │ 'JavaScript' │  182  │
// │    3    │   'Tools'    │  211  │
// └─────────┴──────────────┴───────┘