91

Is there a way to get new lines in console.log when printing multiple objects?

Suppose we have console.log(a, b, c) where a, b, and c are objects. Is there a way to get a line break between the objects?

I tried console.log(a, '\n', b, '\n', c), but that does not work in Node.js.

7
  • 2
    console.log(a, '\n', b, '\n', c); Commented Apr 4, 2018 at 21:02
  • 3
    console.log(a); console.log(b); console.log(c) works as well Commented Apr 4, 2018 at 21:03
  • Use this- console.log('a','\n','b','\n','c'); Put a, b and c inside single quotes. Commented Apr 4, 2018 at 21:18
  • 1
    What OS and which version of node do you use (node --version)? Commented Apr 4, 2018 at 21:22
  • @OriDrori — There's no mention of node in the question. This might be about a browser-based implementation of console.log. Commented Apr 4, 2018 at 21:24

12 Answers 12

61

Add \n (newline) between them:

console.log({ a: 1 }, '\n', { b: 3 }, '\n', { c: 3 })

Sign up to request clarification or add additional context in comments.

1 Comment

it just print the " '\n' " in the console too!
41

I have no idea why this works in Node.js, but the following seems to do the trick:

console.log('', a, '\n', b, '\n', c)

3 Comments

Because console.log has two variations. When you use string as first arg, it considers the string as format string with other arguments as substitutions (so its one giant string ultimately). If you use any other type as first argument, it just dumps the string representations of all the arguments as is.
Thank you so much for this explanation; if it was an answer I'd give it a bounty! Also, /rude to the Node devs for such a terribly inconsistent console.log design!
What is "theBlueFish"? A user here? A website? The text editor? Something else?
18

Without adding white space at the start of a new line:

console.log("one\ntwo");

Output:

one
two

This will add white space at the start of a new line:

console.log("one", "\n", "two");

Output:

one
two

Comments

12

You can use a template literal:

console.log(`a is line 1
b is line 2
c is line 3`)

To activate a template literal, you need to click on the character to the left of number 1 (on my keyboard - Microsoft Wired 600).

Do not confuse: The ' symbol is the same as Shift + @ on my keyboard with `.

' and " will create strings and ` will create template literals.

1 Comment

this seems to be the best solution. Why is this not the top answer?
5

An alternative is creating your own logger along with the original logger from JavaScript.

var originalLogger = console.log;
console.log = function() {
  for (var o of arguments) originalLogger(o);
}

console.log({ a: 1 }, { b: 3 }, { c: 3 })

If you want to avoid any clash with the original logger from JavaScript:

console.ownlog = function() {
  for (var o of arguments) console.log(o);
}

console.ownlog({ a: 1 }, { b: 3 }, { c: 3 })

2 Comments

This is a similar approach I would take as well, although, perhaps it was downvoted because it kind of mangles console.log. It may be better to offer an alternative name for the function instead of overwriting console.log.
@TravisJ yes, probably.
3

Using one call avoids code duplication -> no multiple calls

Using a template literal works, but is sensitive to formatting -> no template literal

I guess browsers pick their own way to delimit arguments, and there is no way to specify the delimiter. It seems to be a space. -> no specify '\n' as delimiter

After considering these solutions, we arrive at what @Vasan has pointed out in a comment - console has powerful printf-style formatting capabilities.

const s1 = "foo";
const s2 = "bar";

const a = { a: 1 };
const b = { b: 2 };

console.info("Remove space delimiter");
console.log("%s%s", s1, s2);

console.info("Separate with newline");
console.log("%s\n%s", s1, s2);

// Interactive object and label
// See https://developer.mozilla.org/en-US/docs/Web/API/console/log#logging_objects
console.info("Interactive object and label");
console.log(
  "%s\n%o",
  "`a` object",
  a,
);

// Object snapshot and label
// See https://developer.mozilla.org/en-US/docs/Web/API/console/log#logging_objects
console.info("Object snapshot and label");
console.log(
  "%s\n%o",
  "`a` object is",
  JSON.parse(JSON.stringify(a)),
);

console.info("Multiple objects *");
console.log("%o\n%o", a, b);

* Awkwardly, in Firefox, it seems that objects that are not the first nor last replacement argument have spaces on both sides no matter what. This does not seem to be the case in Chrome.

See console and particularly console string substitutions.

Aside

console output can even be styled using some CSS properties.

See https://gitlab.com/users/sign_in for an example of this.

See https://developer.mozilla.org/en-US/docs/Web/API/console#styling_console_output

Comments

2

Another way would be a simple:

console.log(a);
console.log(b);
console.log(c);

Comments

2

Just do console.log({ a, b, c });

Example:

var a = 'var a';
var b = 'var b';
var c = 'var c';

console.log({ a, b, c });

This will add an expandable area in the console:

Enter image description here

Comments

1

You need to use \n inside the console.log like this:

console.log('one','\n','two');

Comments

1

With backticks, you can simply add variables and "\n":

const a = {k1: 'key1', k2: 2};
const b = "string";
const c = 123;
console.log(`${JSON.stringify(a)}\n${b}\n${c}`);

will log:

{"k1":"key1","k2":2}
string
123

Comments

1

Try:

 const a = {k1: 'key1', k2: 2};
 const b = "string";
 const c = 123;
 console.log(`${JSON.stringify(a)}
 ${b}
 ${c}`);

`` takes multiline input and produce output with multilines.

Comments

1

New line character:

console.log("\n");

You can try this:

console.log(a + "\n" + b + "\n" + c);

1 Comment

This has already been mentioned in some other answers. When answering older questions that already have answers, please make sure you provide either a novel solution or a significantly better explanation than existing answers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.