Long Pham

I think I speak for a lot of web developers when I say we underutilized the console object. Recently, I found out that the JavaScript console object offers a wide range of functionalities that would help during development. I knew that there are things outside of log, namely warn and error. But these are the things that everyone knew, nothing special here, right? Let's go through the more interesting usages.

1. console.count()

The count function is used to specify the amount of times it was called. It offers an optional parameter label. It specified, the count will be separate for each label. A case where the count function can be helpful is as follow: The code above counts the amount of registered students and employees. Unsure how useful this is in a production environment but I can see this coming in handy when debugging code during development. Try to copy and test the code above in the browser's console tab or a transpiler.

javascript

	const PersonType = {
		STUDENT: 'Student',
		EMPLOYEE: 'Employee'
	};
	
	function registerPerson(personType) {
		console.count(personType);
	}
	
	registerPerson(PersonType.STUDENT);
	registerPerson(PersonType.STUDENT);
	
	registerPerson(PersonType.EMPLOYEE);
	registerPerson(PersonType.EMPLOYEE);
	registerPerson(PersonType.EMPLOYEE);
	
	/* Output:
	
	Student: 1
	Student: 2
	Employee: 1
	Employee: 2
	Employee: 3
	*/

javascript

const PersonType = {
	STUDENT: 'Student',
	EMPLOYEE: 'Employee'
};

function registerPerson(personType) {
	console.count(personType);
}

registerPerson(PersonType.STUDENT);
registerPerson(PersonType.STUDENT);

registerPerson(PersonType.EMPLOYEE);
registerPerson(PersonType.EMPLOYEE);
registerPerson(PersonType.EMPLOYEE);

/* Output:

Student: 1
Student: 2
Employee: 1
Employee: 2
Employee: 3
*/

To reset the count, use countReset. The function also takes an optional parameter label to determine which label to be reset.

2. console.table()

I find the table function specifically helpful when logging nested object types, such as array of objects. An example usage:

javascript

	const menu = [
	    { dish: "Pizza", image: "🍕", price: "10$" },
	    { dish: "Spaghetti", image: "🍝", price: "12$" },
	    { dish: "Sushi", image: "🍣", price: "5$" },
	    { dish: "Ice cream", image: "🍦", price: "3$" }
	];
	
	console.table(menu);
	
	/* Output:
	┌─────────┬─────────────┬───────┬───────┐
	│ (index) │    dish     │ image │ price │
	├─────────┼─────────────┼───────┼───────┤
	│    0    │   'Pizza'   │ '🍕'  │ '10$' │
	│    1    │ 'Spaghetti' │ '🍝'  │ '12$' │
	│    2    │   'Sushi'   │ '🍣'  │ '5$'  │
	│    3    │ 'Ice cream' │ '🍦'  │ '3$'  │
	└─────────┴─────────────┴───────┴───────┘
	*/

javascript

const menu = [
    { dish: "Pizza", image: "🍕", price: "10$" },
    { dish: "Spaghetti", image: "🍝", price: "12$" },
    { dish: "Sushi", image: "🍣", price: "5$" },
    { dish: "Ice cream", image: "🍦", price: "3$" }
];

console.table(menu);

/* Output:
┌─────────┬─────────────┬───────┬───────┐
│ (index) │    dish     │ image │ price │
├─────────┼─────────────┼───────┼───────┤
│    0    │   'Pizza'   │ '🍕'  │ '10$' │
│    1    │ 'Spaghetti' │ '🍝'  │ '12$' │
│    2    │   'Sushi'   │ '🍣'  │ '5$'  │
│    3    │ 'Ice cream' │ '🍦'  │ '3$'  │
└─────────┴─────────────┴───────┴───────┘
*/

The output is formatted in a beautified table format. This is way better in my opinion as usually objects with multiple properties will be folded in the console like this: ▼ Array(4).

3. console.time()

The time function is used to measure the execution time of a particular part of the program or the whole program itself. Its principles are quite similar to the count function. It also takes an optional label argument for the name of the timer.

javascript

	const NMBR = 10000000;
	
	console.time(`Loop over ${NMBR} items`);
	for(let i = 0; i < NMBR; ++i);
	console.timeEnd(`Loop over ${NMBR} items`);
	
	/* Output:
	Loop over 10000000 items: 6.733ms
	*/

javascript

const NMBR = 10000000;

console.time(`Loop over ${NMBR} items`);
for(let i = 0; i < NMBR; ++i);
console.timeEnd(`Loop over ${NMBR} items`);

/* Output:
Loop over 10000000 items: 6.733ms
*/

The logged time will be the amount of time it took to execute statements between the time() and timeEnd() calls. This signifies that it took 6.733ms to do 10 millions iterations.

4. console.dir()

The dir function list properties of a JavaScript object to the console.

javascript

	console.dir(console);
	
	/* Output
	console
	assert: ƒ assert()
	clear: ƒ clear()
	context: ƒ context()
	count: ƒ count()
	countReset: ƒ countReset()
	createTask: ƒ createTask()
	debug: ƒ debug()
	dir: ƒ dir()
	dirxml: ƒ dirxml()
	error: ƒ error()
	group: ƒ group()
	groupCollapsed: ƒ groupCollapsed()
	groupEnd: ƒ groupEnd()
	info: ƒ info()
	log: ƒ log()
	memory: MemoryInfo {totalJSHeapSize: 19300000, usedJSHeapSize: 15200000, jsHeapSizeLimit: 3760000000}
	profile: ƒ profile()
	profileEnd: ƒ profileEnd()
	table: ƒ table()
	time: ƒ time()
	timeEnd: ƒ timeEnd()
	timeLog: ƒ timeLog()
	timeStamp: ƒ timeStamp()
	trace: ƒ trace()
	warn: ƒ warn()
	Symbol(Symbol.toStringTag): "console"
	[[Prototype]]: Object
	*/

javascript

console.dir(console);

/* Output
console
assert: ƒ assert()
clear: ƒ clear()
context: ƒ context()
count: ƒ count()
countReset: ƒ countReset()
createTask: ƒ createTask()
debug: ƒ debug()
dir: ƒ dir()
dirxml: ƒ dirxml()
error: ƒ error()
group: ƒ group()
groupCollapsed: ƒ groupCollapsed()
groupEnd: ƒ groupEnd()
info: ƒ info()
log: ƒ log()
memory: MemoryInfo {totalJSHeapSize: 19300000, usedJSHeapSize: 15200000, jsHeapSizeLimit: 3760000000}
profile: ƒ profile()
profileEnd: ƒ profileEnd()
table: ƒ table()
time: ƒ time()
timeEnd: ƒ timeEnd()
timeLog: ƒ timeLog()
timeStamp: ƒ timeStamp()
trace: ƒ trace()
warn: ƒ warn()
Symbol(Symbol.toStringTag): "console"
[[Prototype]]: Object
*/

I do recommend trying this out in the browser console so you'd be able to inspect the properties more clearly.

5. console.group()

The console object also comes with a grouping mechanism to help organize logs in the console. This is especially helpful when the amount of logs grows and they need to be separated from each other for the sake of keeping the developers sane. See example below:

javascript

	console.log("############################################");
	console.group("Group 1");
	console.group("Nested group 1");
	console.info("Logging from nested group 1");
	console.groupEnd("Nested group 1");
	console.info("Now I'm under group 1");
	console.groupEnd("Group 1");
	console.group("Group 2");
	console.groupEnd("Group 2");
	console.log("############################################");
	
	/* Output
	############################################
	Group 1
	  Nested group 1
	    Logging from nested group 1
	  Now I'm under group 1
	Group 2
	############################################
	*/

javascript

console.log("############################################");
console.group("Group 1");
console.group("Nested group 1");
console.info("Logging from nested group 1");
console.groupEnd("Nested group 1");
console.info("Now I'm under group 1");
console.groupEnd("Group 1");
console.group("Group 2");
console.groupEnd("Group 2");
console.log("############################################");

/* Output
############################################
Group 1
  Nested group 1
    Logging from nested group 1
  Now I'm under group 1
Group 2
############################################
*/

We can see from the code above that group uses indentations to group logs and nested logs. This is simple yet quite effective. If your code is full of logs, be sure to give group a try.

6. Pretty-print

One of the fun things about JavaScript is that it integrates well with everything in the web and CSS is one of those things. You can style logs with CSS. For example:

javascript

	console.log(
	  "Colors of a rainbow %cred %corange %cyellow %cgreen %cblue %cindigo %cviolet",
	  "color: red",
	  "color: orange",
	  "color: yellow",
	  "color: green",
	  "color: blue",
	  "color: indigo",
	  "color: violet"
	);

javascript

console.log(
  "Colors of a rainbow %cred %corange %cyellow %cgreen %cblue %cindigo %cviolet",
  "color: red",
  "color: orange",
  "color: yellow",
  "color: green",
  "color: blue",
  "color: indigo",
  "color: violet"
);

I suggest running this in the terminal or browser console and see the effect yourself, or just spend time playing around with it.

Hopefully you learned something you didn't know from this post, or simple had a good time. I was amazed when I found these as it makes my experience with JavaScript a bit less boring. I'll definitely use some of these in my projects in the future and so should you 😉

Mode

JavaScript's console object is more than just a console.log()

1. console.count()

2. console.table()

3. console.time()

4. console.dir()

5. console.group()

6. Pretty-print