JavaScript Console log Multiple variables

What does console.log() do in JavaScript?

The console.log() is a function in JavaScript language. It is used to:

• Print any message in the console which is visible to the user
• Print the values of variables defined

Advantages of console.log()

• Multiple browsers support this function, for example, Google Chrome, Safari, Microsoft Edge/Internet Explorer, Firefox, Opera etc.
• This function is primarily used for testing purposes.

NOTE: When F12 key is pressed on the website, the console view is visible.

Syntax:

console.log(“message”)

Here, “message” is any string.

Or

console.log(var)

Here, “var” denotes any variable which has a value stored in it.

The function can take any array, object or value as a Parameter. It then returns the value according to the parameter.

Example:

<script>
var name = "Javatpoint";
console.log(name);
</script>

Output:

Javatpoint

Example:

<script>
console.log(“Hello”);
</script>

Output:

Hello

Multiple variables in console.log()

We know, that when we pass a single variable to the console.log(), the following output is generated:

Example:

<script>
    let x = 2;
    console.log(x);
</script>

Output:

2

But suppose, if we have multiple variables, instead of writing the function of console.log() multiple times, we can include all the variables in a single line.

Example:

<script>
    let x = 2;
    let y = 3;
    let z = 6;
    console.log(x,y,z);
</script>

Output:

2 3 6

Tips to use while using multiple variables in console.log()

1. Referring the multiple variables by name

When multiple variables are passed in console.log(), it sometimes gets difficult to recognize which variable corresponds to a log in the console.

Example:

<script>
    		let x = 2;
    		let y = 3;
    		let z = 6;
   	 	console.log(x,y,z);
</script>

Output:

2 3 6

Here, it is difficult to identify what values corresponds to which variable.

To overcome that, use curly braces { } along with the variable to make an association between the variable and value.

Example:

<script>
    		let x = 2;
    		let y = 3;
    		let z = 6;
    		console.log( {x, y, z} );
</script>

Output:

{x: 2, y: 3, z: 6}

Similarly, curly braces can be used with the objects as well.

Example:

<script>
   		let obj1 = {
  		name: 'Javatpoint',
 		 age: 18
                       }
                       console.log(obj1)
                       console.log({obj1})
</script>

Output:

{name: "Javatpoint", age: 18}	
{obj1: {…}}

2. Formatting

When we want to print a message containing multiple variables along with a message, we can format console.log() accordingly by:

• Using specifiers like %s, %i, %f etc.

Example:

<script>
   let user = 'Rahul';
   let age = 25;
   console.log('%s is %i years old', user, age);
  </script>

Output:

Rahul is 25 years old

Here, we are formatting a message containing a string and an integer, therefore %s is used for “user” and %i is used for “age”.

Following is a list of other specifiers, that can be used as well:

Specifier	Description
%s	Used for string elements
%d or %i	Used for integer elements
%f	Used for float type of elements
%o	Used for optimally useful formatting in elements
%O	Used for generic JavaScript object formatting in elements
%c	Used to add additional CSS formatting

• Concatenating the variables

When we want to print two or more strings together,”+” operator can be used as well to combine them together.

Example:

<script>
let x = 'Java';
let y = 't';
let z = 'point';
let year = 2021;
console.log(x+y+z);
console.log(x+y+z+year);
</script>

Output:

Javatpoint
Javatpoint2021

NOTE: If all the variables contain integers, then “+” operator won’t concatenate the variables, it will simply add the integers and display the sum.

3. Adding CSS styles

By using the %c specifier in the console.log(), you add corresponding CSS styles along with specifier. Various browsers support the CSS formatting.

Example:

If we want to change the font size, font style and underline the text.

<script>
console.log('%cFormatted message', 'font-size: 25px; font-style: italic; text-decoration: underline;');
</script>

Output:

Here, The specifier %c applies the CSS styles , 'font-size: 25px; font-style: italic; text-decoration: underline;'.

4. Adding interactive logs along with the messages

The %o specifier (Used for optimally useful formatting in elements) can insert objects, DOM elements, and normal text into a textual message.

Example:

<script>
const obj = {
name: 'Rahul',
	surname: 'Gupta'
};
console.log('Hello, new user %o', obj);
</script>

Output:

Hello, new user {name: "Rahul", surname: "Gupta"}