Why 90% of JavaScript Devs Don’t Use These Game-Changing Features 🎯

Meet Shawpnendu, a JavaScript developer who writes code daily but misses out on powerful JavaScript features. Just like most developers, he repeats old coding habits without realizing how much easier his life could be! 😱

Do you want to make the same mistake? If not then learn Shawpnendu’s mistakes and become a rock solid JS developer soon.

So without wasting your time let’s begin hidden JavaScript features that 90% of devs never use – but should! 🚀

🚀 1. Optional Chaining (?.)

Problem:

When accessing deeply nested properties, we often check if an object exists before accessing its properties. This makes our code more messy with full of conditions and lengthy unnecessarily.

Solution:

Use ?. to safely access properties without errors.

❌ Old way:

let user = { profile: { name: "Alice" } };

if (user && user.profile && user.profile.name) {
  console.log(user.profile.name);
} else {
  console.log("Name not found");
}
// Output: Alice

✅ New way:

let user = { profile: { name: "Alice" } };

console.log(user?.profile?.name || "Name not found");
// Output: Alice

Code Explanation:

• ?. checks if the previous property exists.
• If user.profile doesn’t exist, it returns undefined instead of an error.
• The || "Name not found" ensures a fallback value.

⚡ 2. Nullish Coalescing (??)

Problem:

Using || for fallback values treats 0, "", and false as falsy, even when they are valid.

Solution:

Use ?? to check only null or ****undefined.

❌ Old way:

let count = 0;

console.log(count || 10); 
// Output: 10 (Incorrect, because 0 is valid!)

✅ New way:

let count = 0;

console.log(count ?? 10); 
// Output: 0 (Correct!)

Code Explanation:

• || sees 0 as falsy, so it replaces it with 10.
• ?? only checks for null or undefined, keeping 0 as valid.

🔍 Special Note: Nullish coalescing is useful when handling user inputs where values like 0 should be preserved instead of being replaced.

🎯 **3. Object.hasOwn() Instead of **hasOwnProperty()

Problem:

hasOwnProperty() can be tricked by overridden methods.

Solution:

Use Object.hasOwn() for a safer check.

❌ Risky way:

const obj = Object.create(null);
obj.hasOwnProperty = () => false;

console.log(obj.hasOwnProperty("key")); 
// Output: TypeError! ❌

✅ Safe way:

const obj = { key: "value" };

console.log(Object.hasOwn(obj, "key")); 
// Output: true ✅

🔥 4. The at() Method for Arrays

Problem:

Getting the last item in an array is messy and hard to read.

Solution:

Use .at(-1) for cleaner code.

❌ Old way:

const arr = ["apple", "banana", "cherry"];
console.log(arr[arr.length - 1]); 
// Output: "cherry" 🎉

✅ New way:

const arr = ["apple", "banana", "cherry"];
console.log(arr.at(-1)); 
// Output: "cherry" ✅

🛠️ 5. structuredClone() for Deep Copying Objects

Problem:

JSON.parse(JSON.stringify()) fails for complex objects.

Solution:

Use structuredClone() for a real deep copy.

✅ New way:

const obj = { name: "Alice", skills: ["JS", "React"] };

const clone = structuredClone(obj);
clone.skills.push("Node.js");

console.log(obj.skills); 
// Output: ["JS", "React"] ✅ (Original remains unchanged)

📊 Comparison Table

Feature	Old Method	New Method	Why It’s Better?
Optional Chaining	Long if conditions	?. operator	Cleaner & safer code
Nullish Coalescing	Checks all falsy values	?? only checks null & undefined	Avoids unwanted overrides
Object.hasOwn()	hasOwnProperty()	Object.hasOwn()	More reliable security
Array.at()	arr[arr.length - 1]	arr.at(-1)	Easier to read & use
structuredClone()	JSON.parse(JSON.stringify())	structuredClone()	Proper deep copying

📢 FAQs

🚀 Conclusion

Shawpnendu wasted hours writing old-style JavaScript. Don’t be like him! Use these modern JavaScript features to write cleaner, smarter, and faster code. 😃

💡 Did you learn something new? Share this with your fellow developers! 🎉

Would you like me to add more examples or refine any section? 🚀