#js30.09 Console methods

This chapter of js30 is a round-up of console methods; some are perhaps more fun than useful, but a few are essential.

// Interpolations
var ping = "pong";
console.log("suppose I want to say %s", "buzz"); // suppose I want to say buzz
console.log("suppose I want to say %s", "'buzz'"); // suppose I want to say 'buzz'
console.log("suppose I want to say %s", ping); // suppose I want to say pong
console.log(`suppose I want to say ${ping}`); // suppose I want to say pong

console.info(), console.warn() & console.error() prefix log messages with corresponding icons

// Info
console.info("console.info(), console.warn() & console.error() prefix log messages with corresponding icons");

// warning!
console.warn("warning: low on coffee!");

// Error :|
console.error("uh-oh, an error!!!");

Now this could be very useful: console.assert();

// console.assert(); only logs if false, e.g.:
console.assert(3 === 3, "*** your condition is false ***"); // nope, nada, nuthin'
console.assert(3 === 6, "*** your condition is false ***"); // '***your condition is false***'

const p = document.querySelector('p');
console.assert(p.classList.contains('ping'), "nope, p doesn't have class 'ping'"); // "nope, p doesn't have class 'ping'"

Grouping console messages using console.group() & console.groupEnd() is also handy (). Of course the payoff of console.group() is the pretty results shown below:

const drummers = [
	{ name: 'Art Blakey', "b.": '1919.10.11', "d.": '1990.10.16' },
	{ name: 'Philly Joe Jones', "b.": '1923.07.15', "d.": '1985.08.30' },
	{ name: 'Max Roach', "b.": '1924.01.10', "d.": '2007.08.16' },
	{ name: 'Elvin Jones', "b.": '1927.09.09', "d.": '2004.05.18' },
	{ name: 'Ed Thigpen', "b.": '1930.12.28', "d.": '2010.01.13' },
	{ name: 'Clifford Jarvis', "b.": '1941.08.26', "d.": '1999.11.26' },
	{ name: 'Tony Williams', "b.": '1945.12.12', "d.": '1997.02.23' }
];

drummers.forEach(drummer => {
  console.groupCollapsed(`${drummer.name}`);
    console.log(`${drummer.name}`);
    console.log(`born: ${drummer['b.']}`);
    console.log(`died: ${drummer['d.']}`);
  console.groupEnd(`${drummer.name}`);
}
);

‘Cleanup in Aisle 9’:

console.clear();

console.count() counts instances:

console.count(ping); // 1
console.count(ping); // 2
console.count(ping); // 3

And console.time() & console.timeEnd():

console.time('fetching data');
fetch('https://api.github.com/users/wesbos')
	.then(data => data.json())
	.then(data => {
		console.timeEnd('fetching data');
		console.log(data);
	});