Tutorials Tonight
Follow Us

Difference between console.log and console.dir

Console in javascript is used for debugging application for the developers.

It is an object in JavaScript with various methods for different use cases some of which are explained in the console tutorial.

2 of such methods of console object are console.log and console.dir.

console log vs console dir

console log

console.log is the most commonly used logging method in javascript. It provides us access to the browser's console where you can output any string, number, boolean, object, etc.

It can accept multiple objects or messages at a time.

console.log("Hello World!");//string
console.log(10 + 20);//expression
console.log(new Date());//object
▶ Try It

console dir

console.dir method outputs the list of properties of an object in an interactive manner.

'dir' in console.dir stands for the directory which represents the listing of elements or objects properties.

The output of console.dir represent a list of properties of an object in a hierarchical manner. Means console.dir let us see all the properties of a specific javascript object in console using which developers can easily check properties of the object.

const arr = [1,2,3,4,5];

console.log vs console.dir

  1. Reference to object: console.log take direct reference of the object it is logging while console.dir makes a copy of the object before logging.
  2. DOM interaction: Using console.log you can interact with document object (DOM) but using console.dir you can not.
  3. Output type: console.log prints the object in an HTML like a tree while console.dir prints the element in a JSON like a tree.
  4. console.log vs console.dir

Here is an example that shows the output difference between console.log and console.dir.

const arr = [1, 2, 3, 4, 5];
difference between console.log and console.dir

Follow Us