Equivalent of Python's dir in Javascript

Question:

when I write Python code from the interpreter I can type dir() to have a list of names defined in the current scope. How can achieve to have the same information, programmatically, when I develop Javascript code from a browser using an interactive console like firebug, chrome console, etc?

Asked By: Paolo

||

Answers:

There are a couple of functions which do just this in the code for ChatZilla, you’ll have to check the licence properly to see if you can just rip them out and use them wherever.

The relevant functions can be found at
http://hg.mozilla.org/chatzilla/file/59b46c0bf716/js/lib/utils.js#l136
dumpObject and dumpObjectTree

Answered By: Glenjamin

The global variables are kept in an easily accessible object (window) and so you can inspect/iterate over them easily. (Using something like the functions suggested by Glenjamin)

On the other hand, I don’t know of any way to inspect local variables defined in functions or closures – if this is possible I’d at least guess it would be highly browser/console specific.

Answered By: hugomg

This may work for you, if you need a simple solution:

function dir(object) {
    stuff = [];
    for (s in object) {
        stuff.push(s);
    }
    stuff.sort();
    return stuff;
}
Answered By: dmitry_romanov

The Google Chrome developer tools console has a predefined dir: https://developers.google.com/chrome-developer-tools/docs/console

Firebug has console.dir: http://getfirebug.com/logging

Answered By: Protector one

There is keys method in Object, for example:

Object.keys(object)

But this return object’s own properties and methods only.
To list all properties and methods of an object I know 2 possibilities:

  1. console.dir(object) method in firebug console for Firefox and
  2. dir(object) method in Google Chrome development tools.
Answered By: Andrey

well you can see object contains like its own properties only : By
it can work in any console not only google chrome web browser look for the img enter image description here
console.dir(obj);
here link: https://developers.google.com/web/tools/chrome-devtools/console/console-reference

Answered By: AmitNayek

(just to see that list)

you can use the operator ".", for example:

> var a = "asdfg";
> a. // -> show the list
  • in the chrome console it will show you the list of options for autocompletion
  • in node.js console you can do the same and press tab twice to see the list
Answered By: regor

The Real Solution

First, create a function that lists out all the properties of an object:

function dir(object) {
    props = [];
    for (prop in object) {
        props.push(prop);
    }
    props.sort();
    return props;
}

Then, as easy as it is, call the function like console.log(dir(console))

Answered By: Marco El-Korashy

There are a couple of functions that you you can use to get the data that you need.

Object.keys()

This function will return all enumerable, owned properties that are not Symbols.

> let person = {name: 'John Doe', age: 25, [Symbol('Test')] : 'value'}
> Object.keys(person);
['name'] // Note that the Symbol('Test') is not in the returned array!

Object.getOwnPropertyNames()

This function will return all properties that both enumerable and non-enumerable which are not Symbols.

> Object.getOwnPropertyNames(Set)
[ 'length', 'name', 'prototype' ]

Why is this function useful when we have Object.keys()?

> Object.keys(Set)
[] // Because keys doesn't give you non-enumerable properies

As an aside, why doesn’t Object.getOwnPropertyNames(Set) doesn’t give you the methods on Set like add, has, etc., ? Because they are on Set.prototype. Object.getOwnPropertyNames(Set.prototype) will yield a much better result.

Object.getOwnPropertySymbols()

This will return all the owned properties that are Symbols in the Object you pass it to.

> let person = {x: 10, Symbol('Test'): 'Test-value' };
> Object.getOwnPropertySymbols(person);
[Symbol(Test)]

Reflect.ownKeys()

This will return all the owned properties that are strings/Symbols in the object you pass it to.

> let person = {x: 1, [Symbol('Test')]: 'Test-value'};
> Reflect.ownKeys(person);
[ 'x', Symbol(Test) ]

Bonus:

Object.getPrototypeOf()

This will return the Prototype of the Object that is passed to it.

> let nameable = { name: 'name' };
> let ageable = Object.create(nameable);
> ageable.age = 0;
> let person = Object.create(ageable);
> let proto_of_person = Object.getPrototypeOf(person);
> proto_of_person === ageable;
true
> let proto_of_ageable = Object.getPrototypeOf(proto_of_person);
> proto_of_ageable === nameable
true

Using this we can enumerate all the properties of an object and its prototype chain recursively.