What is the difference between properties of an constructor function that are visible with `console.log` vs those that are visible with `console.dir`?

Question

In console, when I define a constructor function and then add a property to it after the fact, running console.log(myConstructor) does not disclose that property. However, when I run console.dir(myConstructor) I can now see the property I added, as well as many others. What is the difference between the properties I can see with console.log and the ones I can't? Are there specific terms or vocabulary one can use to distinguish between those two types of properties?

function myConstructor(){
  this.sayHi = function(){
    console.log("hey")
  }
}

myConstructor.boop = "thing"

console.log(myConstructor)

=> ƒ myConstructor(){
       this.sayHi = function(){
         console.log("hey")
       }
     }

console.dir(myConstructor)

=> ƒ myConstructor()
       boop : "thing"
       arguments:null
       caller:null
       length:0
       name:"myConstructor"
       prototype:{constructor: ƒ}
       __proto__:ƒ ()
       [[FunctionLocation]]:VM123:1
       [[Scopes]]:Scopes[1]

That depends on the implementation of how the `console` is implemented by the browser/js environment. All browsers behave more or less differently for the logging. Even between the browser versions, there might be differences. — t.niese, Jun 01 '18 at 13:59
Have you checked MDN documentation on both [**.log**](https://developer.mozilla.org/en-US/docs/Web/API/Console/log) and [**.dir**](https://developer.mozilla.org/en-US/docs/Web/API/Console/dir) to see if that answers your question? — Nope, Jun 01 '18 at 14:00
@Nope Yes, I have. I'm not asking about the difference between the two methods; I'm asking what differentiates the properties that are shown by console.log vs the properties that are not. The MDN docs say that `console.log prints the element in an HTML-like tree while console.dir prints the element in a JSON-like tree.` This does not answer my question. — David Kennell, Jun 01 '18 at 14:07

score 0 · Answer 1 · answered Jun 01 '18 at 13:58

0

Please find the reference to console.dir to understand why that is happening: https://developer.mozilla.org/en-US/docs/Web/API/Console/dir

console.log logs whatever you throw there (in your case it will log the function) and dir logs the properties of the object; from the docs:

In other words, console.dir is the way to see all the properties of specified javascipt object in console by which developer can easily get the properties of object.

answered Jun 01 '18 at 13:58

A. Llorente

1,142
6
16

I think the issue I'm having is that I've always heard that `functions are objects in Javascript`. Why then am I able to print out 1) a function, using console.log and 2) an object, using console.dir? What is the difference between these two things, and what is their relationship? Are they just different representations of the same function? – David Kennell Jun 01 '18 at 14:16
I think console.log just does a "kind of" toString of that function. console.dir shows the properties of the function, see the difference on these two calls in the console: console.dir(function() {return'1'}) console.log(function() {return'1'}) – A. Llorente Jun 01 '18 at 14:26

What is the difference between properties of an constructor function that are visible with `console.log` vs those that are visible with `console.dir`?

1 Answers1