JavaScirpt Tutorial Index

JavaScript Tutorial Javascript Example Javascript comment Javascript Variable Javascript Data Types Javascript Operators Javascript If Else Javascript Switch Statement Javascript loop JavaScript Function Javascript Object JavaScript Arrays Javascript String Javascript Date Javascript Math Javascript Number Javascript Dialog Box Javascript Window Object Javascript Document Object Javascript Event Javascript Cookies Javascript getElementByID Javascript Forms Validation Javascript Email Validation Javascript Password Validation Javascript Re-Password Validation Javascript Page Redirect Javascript Print

Misc

JavaScript P5.js JavaScript Minify JavaScript redirect URL with parameters Javascript Redirect Button JavaScript Ternary Operator JavaScript radio button checked value JavaScript moment date difference Javascript input maxlength JavaScript focus on input Javascript Find Object In Array JavaScript dropdown onchange JavaScript Console log Multiple variables JavaScript Time Picker Demo JavaScript Image resize before upload Functional Programming in JavaScript JavaScript SetTimeout() JavaScript SetInterval() Callback and Callback Hell in JavaScript Array to String in JavaScript Synchronous and Asynchronous in JavaScript Compare two Arrays in JavaScript Encapsulation in JavaScript File Type Validation while Uploading Using JavaScript or jquery Convert ASCII Code to Character in JavaScript Count Character in string in JavaScript Get First Element of Array in JavaScript How to convert array to set in JavaScript How to get current date and time in JavaScript How to Remove Special Characters from a String in JavaScript Number Validation in JavaScript Remove Substring from String in JavaScript

Interview Questions

JavaScript Interview Questions

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:

SpecifierDescription
%sUsed for string elements
%d or %iUsed for integer elements
%fUsed for float type of elements
%oUsed for optimally useful formatting in elements
%OUsed for generic JavaScript object formatting in elements
%cUsed 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:

JavaScript Console Log Multiple Variables

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"}