Output formatting basics in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this template literal?

Consider the following JavaScript code using template literals. What will be printed to the console?

Javascript

const name = "Alice";
const age = 30;
console.log(`Name: ${name}, Age: ${age}`);

A Name: name, Age: age

B Name: ${name}, Age: ${age}

C Name: Alice Age: 30

D Name: Alice, Age: 30

💡 Hint

Remember that template literals use backticks and ${} to insert variables.

Template literals allow embedding variables inside strings using ${variable}. The output replaces these placeholders with actual values.

❓ Predict Output

intermediate

What does this code print with number formatting?

Look at this code that formats a number to two decimal places. What is the output?

Javascript

const price = 5;
console.log(`Price: $${price.toFixed(2)}`);

A Price: $5

B Price: $5.00

C Price: $5.0

D Price: $5.000

💡 Hint

toFixed(2) formats the number with exactly two decimal places.

The toFixed(2) method converts the number to a string with two digits after the decimal point.

❓ Predict Output

advanced

What is the output of this code using padStart?

This code uses padStart to format a string. What will it print?

Javascript

const id = "42";
console.log(id.padStart(5, '0'));

A 00042

B 42

C 42000

D 43

💡 Hint

padStart adds characters to the start until the string reaches the given length.

padStart(5, '0') adds zeros to the left of '42' until the total length is 5 characters.

❓ Predict Output

advanced

What is the output of this code using Intl.NumberFormat?

This code formats a number as currency. What will it print?

Javascript

const amount = 1234.56;
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
console.log(formatter.format(amount));

A USD 1,234.56

B 1234.56 USD

C $1,234.56

D 1,234.56

💡 Hint

Intl.NumberFormat formats numbers according to locale and options.

The formatter formats the number as US dollars with commas and two decimals.

🧠 Conceptual

expert

Which option causes a runtime error when formatting output?

Which of the following code snippets will cause a runtime error when executed?

A console.log(`Result: ${undefinedVariable}`);

B console.log('Value: ' + (10).toFixed(2));

C console.log(`Sum: ${5 + 3}`);

D console.log('Price: $' + (20).toLocaleString('en-US'));

💡 Hint

Check if all variables are defined before using them in output.

Using an undefined variable inside a template literal causes a ReferenceError at runtime.

Practice

1. What is the correct way to include a variable name inside a string using template literals in JavaScript?

easy

A. console.log(`Hello, ${name}!`);

B. console.log('Hello, ' + name + '!');

C. console.log("Hello, ${name}!");

D. console.log('Hello, ${name}!');

Solution

1. Step 1: Understand template literals syntax

   Template literals use backticks (`) and ${} to insert variables inside strings.

2. Step 2: Identify correct usage

   console.log(`Hello, ${name}!`); uses backticks and ${name} correctly to embed the variable.

3. Final Answer:

   console.log(`Hello, ${name}!`); -> Option A

4. Quick Check:

   Backticks + ${} = correct template literal [OK]

Hint: Use backticks and ${variable} for easy variable insertion [OK]

Common Mistakes:

• Using quotes instead of backticks for template literals
• Forgetting ${} around variable
• Using single or double quotes with ${} which won't interpolate

2. Which of the following is the correct syntax to print the number 5 and the word 'apples' in one line using template literals?

easy

A. console.log(`5 apples`);

B. console.log(`5 + apples`);

C. console.log('5 apples');

D. console.log(`5 ${apples}`);

Solution

1. Step 1: Check the use of template literals

   Backticks allow strings with variables inside ${}, but here no variable is needed.

2. Step 2: Identify correct string

   console.log(`5 apples`); correctly uses backticks with plain text '5 apples'.

3. Final Answer:

   console.log(`5 apples`); -> Option A

4. Quick Check:

   Backticks with plain text = valid string [OK]

Hint: Use backticks for strings even without variables [OK]

Common Mistakes:

• Using quotes instead of backticks when template literals expected
• Trying to insert undefined variable apples
• Adding plus sign inside template literal as text

3. What will be the output of the following code?

const count = 3;
console.log(`You have ${count} new messages.`);

medium

A. You have ${count} new messages.

B. You have count new messages.

C. You have 3 new messages.

D. SyntaxError

Solution

1. Step 1: Understand template literal variable insertion

   The variable count inside ${} is replaced by its value 3.

2. Step 2: Evaluate the console.log output

   The string becomes 'You have 3 new messages.' and prints exactly that.

3. Final Answer:

   You have 3 new messages. -> Option C

4. Quick Check:

   Variable inside ${} = replaced by value [OK]

Hint: Variables inside ${} show their value in template strings [OK]

Common Mistakes:

• Thinking ${count} prints literally
• Confusing quotes and backticks
• Expecting variable name instead of value

4. Find the error in this code snippet:

let user = 'Anna';
console.log('Welcome, ${user}!');

medium

A. Missing semicolon after let declaration

B. Single quotes do not allow variable interpolation

C. Variable user is not declared

D. Backticks are missing around the string

Solution

1. Step 1: Check string quotes for interpolation

   Single quotes ('') do not process ${} as variable placeholders.

2. Step 2: Identify correct string type for template literals

   Backticks (`) are needed to enable variable interpolation.

3. Final Answer:

   Single quotes do not allow variable interpolation -> Option B

4. Quick Check:

   Use backticks for ${} interpolation [OK]

Hint: Use backticks, not single quotes, for ${} variables [OK]

Common Mistakes:

• Thinking single quotes support ${} interpolation
• Ignoring missing backticks
• Assuming variable is undeclared

5. You want to print a message showing a user's name and age using template literals. The variables are name = 'Sam' and age = 25. Which code correctly formats the output as:
Hello, Sam! You are 25 years old.

hard

A. console.log(`Hello, ${name}! You are age years old.`);

B. console.log('Hello, ' + name + '! You are ' + age + ' years old.');

C. console.log(`Hello, name! You are age years old.`);

D. console.log(`Hello, ${name}! You are ${age} years old.`);

Solution

1. Step 1: Use template literals with variables

   Backticks and ${} allow embedding variables name and age inside the string.

2. Step 2: Check each option for correct variable usage

   console.log(`Hello, ${name}! You are ${age} years old.`); correctly uses ${name} and ${age} to insert values.

3. Final Answer:

   console.log(`Hello, ${name}! You are ${age} years old.`); -> Option D

4. Quick Check:

   Backticks + ${var} for each variable = correct [OK]

Hint: Use ${variable} inside backticks for multiple variables [OK]

Common Mistakes:

• Using variable names without ${} inside template literals
• Mixing quotes and backticks incorrectly
• Concatenating strings instead of using template literals