console.group and groupEnd

JavaScript course · Beginner · Lesson 114/133

Learn to group console output and create nested groups.

console.group and groupEnd

With console.group you can collect console outputs under a heading. You close the group with console.groupEnd. All outputs in between appear indented.

Example: console.group("Order"); console.log("Item: Pen"); console.groupEnd();. This structure is useful for keeping many logs organized; you can create separate groups for each order or user.

groupCollapsed and nested groups

console.groupCollapsed works like console.group but the group is collapsed (closed) by default. The user clicks to expand it. This is ideal for keeping the screen uncluttered in long outputs.

You can also nest groups: open one group, open another inside it, then close the inner one, then the outer one. Every opening must have a closing; order matters.

Exercise Create an order group

Open a group with console.group("Order #1"). Inside the group add console.log("Item: Pen") and console.log("Qty: 3"). Then close the group with console.groupEnd().

Show example solution

console.group("Order #1");
console.log("Item: Pen");
console.log("Qty: 3");
console.groupEnd();

Test yourself

What is the main purpose of console.group?
- To measure an operation's duration
- To show an error in red
- To group outputs under a heading
- To display an array as a table
Show answer

To group outputs under a heading — Correct. group puts outputs in headed, indented blocks.

Close the group

console.group("Sipariş #1");
console.log("Ürün: Kalem");
console.____();

Show answer

console.group("Sipariş #1");
console.log("Ürün: Kalem");
console.groupEnd();

Match the method to its behavior

console.group

Starts a group
console.groupEnd

Closes a group
console.groupCollapsed

Starts a collapsed group
console.log

Writes a line in a group

All lessons in Beginner

1 Variables and data types

console.group and groupEnd