Awesome. This chapter is a collection of small features that you'll use every single day. They aren't difficult, but they make your code much cleaner.
Chapter 12 — Template Literals, Default Parameters, Optional Chaining & Nullish Coalescing ⭐⭐⭐⭐⭐
🎯 Goal (1 line)
Learn four modern JavaScript features that make your code shorter, safer, and easier to read.
1. Template Literals
Before ES6:
const name = "Pramod";
console.log("Hello " + name);
Modern JavaScript:
const name = "Pramod";
console.log(`Hello ${name}`);
Output
Hello Pramod
Why use it?
Imagine this:
const product = "Laptop";
const price = 65000;
console.log(`${product} costs ₹${price}`);
Output
Laptop costs ₹65000
Much easier to read than:
console.log(product + " costs ₹" + price);
2. Default Parameters
Sometimes a function is called without all the arguments.
Without defaults:
const greet = (name) => {
console.log(`Hello ${name}`);
};
greet();
Output
Hello undefined
Better:
const greet = (name = "Guest") => {
console.log(`Hello ${name}`);
};
greet();
Output
Hello Guest
If you pass a value:
greet("Pramod");
Output
Hello Pramod
3. Optional Chaining (?.)
This prevents many runtime errors.
Without it:
const user = {};
console.log(user.address.city);
❌ Error
Because address doesn't exist.
Modern JavaScript:
const user = {};
console.log(user.address?.city);
Output
undefined
Instead of crashing, JavaScript safely returns undefined.
4. Nullish Coalescing (??)
Provides a default value only when the value is null or undefined.
const username = undefined;
console.log(username ?? "Guest");
Output
Guest
Another example:
const username = "Pramod";
console.log(username ?? "Guest");
Output
Pramod
Difference Between || and ??
This is a favorite interview question.
const count = 0;
console.log(count || 10);
Output
10
Why?
Because 0 is considered falsy.
Now:
const count = 0;
console.log(count ?? 10);
Output
0
Because ?? only replaces null or undefined.
MCQs
Q1
Which symbol starts a template literal?
A.
"
B.
'
C.
`
D.
#
✅ Answer
C (Backticks)
Q2
Output?
const name = "Alice";
console.log(`Hello ${name}`);
A.
Hello Alice
B.
Hello ${name}
C.
Alice
D. Error
✅ Answer
A
Q3
Output?
const greet = (name = "Guest") => {
console.log(name);
};
greet();
A.
Guest
B.
undefined
C. null
D. Error
✅ Answer
A
Q4
Output?
const greet = (name = "Guest") => {
console.log(name);
};
greet("Tom");
A.
Guest
B.
Tom
C.
undefined
D. Error
✅ Answer
B
Q5
What does ?. help prevent?
A. Loops
B. Runtime errors when a property doesn't exist
C. Arrays
D. Sorting
✅ Answer
B
Q6
Output?
const user = {};
console.log(user.profile?.email);
A. Error
B.
undefined
C.
null
D.
email
✅ Answer
B
Q7
Output?
const value = undefined;
console.log(value ?? "Default");
A.
Default
B.
undefined
C.
null
D. Error
✅ Answer
A
Q8
Output?
const value = "JavaScript";
console.log(value ?? "Default");
A.
Default
B.
JavaScript
C.
undefined
D. Error
✅ Answer
B
Q9
Output?
const score = 0;
console.log(score || 100);
A.
0
B.
100
C.
undefined
D. Error
✅ Answer
B
Q10
Output?
const score = 0;
console.log(score ?? 100);
A.
0
B.
100
C.
undefined
D. Error
✅ Answer
A
Q11
Which is cleaner?
A.
"Hello " + name
B.
`Hello ${name}`
✅ Answer
B
Q12
Find the bug.
const user = {};
console.log(user.address.city);
A. No bug
B. address doesn't exist
C. Missing let
D. Missing return
✅ Answer
B
Safer version:
console.log(user.address?.city);
Q13
Output?
const age = null;
console.log(age ?? 18);
A.
18
B.
null
C.
undefined
D. Error
✅ Answer
A
Q14
Output?
const product = "Laptop";
const price = 50000;
console.log(`${product} - ₹${price}`);
A.
Laptop - ₹50000
B.
product - price
C. Error
D.
₹50000
✅ Answer
A
Q15 (Hardest)
Predict the output.
const user = {
name: "Pramod"
};
console.log(user.address?.city ?? "Unknown");
A.
Unknown
B.
undefined
C. Error
D.
Pramod
✅ Answer
A
Step by step:
user.address→undefined?.city→ safely returnsundefinedundefined ?? "Unknown"→"Unknown"
Mini Coding Challenge
const product = {
name: "Laptop"
};
console.log(
`${product.name} - ${product.price ?? "Price not available"}`
);
✅ Solution
Output
Laptop - Price not available
Mini Project — User Greeting
const user = {
name: "Pramod"
};
const greet = (name = "Guest") => {
console.log(`Welcome ${name}!`);
};
greet(user.name);
console.log(user.address?.city ?? "City not provided");
✅ Output
Welcome Pramod!
City not provided
🚨 Common Beginner Mistakes
❌ Using quotes instead of backticks
Wrong:
console.log("Hello ${name}");
Output:
Hello ${name}
Correct:
console.log(`Hello ${name}`);
❌ Using || when 0 is a valid value
Wrong:
const quantity = 0;
console.log(quantity || 1);
Output:
1
Correct:
console.log(quantity ?? 1);
Output:
0
❌ Forgetting optional chaining
Wrong:
console.log(user.profile.email);
If profile doesn't exist, your app crashes.
Correct:
console.log(user.profile?.email);
🧠 The 80/20 Cheat Sheet
// Template literals
`Hello ${name}`
// Default parameter
const greet = (name = "Guest") => {};
// Optional chaining
user.address?.city
// Nullish coalescing
value ?? "Default"
🎯 Interview Tip
One of the most common interview questions is:
0 || 10
vs.
0 ?? 10
Remember:
| Operator | Replaces |
|---|---|
| ` | |
?? | Only null and undefined |
📊 Your Progress
You now know about 70% of the JavaScript used in modern React projects.
You've covered:
✅ Variables
✅ Conditions
✅ Functions
✅ Arrays
✅ Objects
✅ Loops
✅ Array methods
✅ String methods
✅ Scope
✅ Destructuring
✅ Spread & Rest
✅ Template literals
✅ Default parameters
✅ Optional chaining
✅ Nullish coalescing
🚀 Next Chapter (One of the Biggest Milestones)
Chapter 13 — Async JavaScript (fetch, Promises, async/await) ⭐⭐⭐⭐⭐
This is where JavaScript starts interacting with the real world.
You'll learn how to:
🌐 Call APIs
📦 Fetch data from servers
⏳ Handle waiting without freezing your app
✨ Use
asyncandawait(the modern way)
After that, we'll move to DOM Manipulation and then React, where all these concepts come together in real projects.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.