Difference between console.log and console.dir
2 of such methods of console object are console.log and console.dir.
It can accept multiple objects or messages at a time.
console.log(123);//number console.log("Hello World!");//string console.log(10 + 20);//expression console.log(new Date());//object
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.
const arr = [1,2,3,4,5]; console.dir(arr); console.dir(document.location);
console.log vs console.dir
- 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.
- DOM interaction: Using console.log you can interact with document object (DOM) but using console.dir you can not.
- 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.
Here is an example that shows the output difference between console.log and console.dir.
const arr = [1, 2, 3, 4, 5]; console.log(arr); console.dir(arr); console.log(document.head); console.dir(document.head);