DEV Community

Cover image for JavaScript Shortcuts, Tips & Tricks — Simple & Fun Examples for Everyone
Manikanta Ketha
Manikanta Ketha

Posted on

JavaScript Shortcuts, Tips & Tricks — Simple & Fun Examples for Everyone

#javascript #webdev #react #nextjs

Hey there! If you’re learning JavaScript or just want to code smarter (not harder), I’ve got some handy tips and tricks with examples that are easy to get — and maybe even a little fun.

Ready to speed up your JavaScript game? Let’s jump in!

1. Quick Decisions with the Ternary Operator — Pizza Edition 🍕 

const hungry = true;
const food = hungry ? 'Order pizza!' : 'Keep coding!';

console.log(food);  // Order pizza!
Enter fullscreen mode Exit fullscreen mode

Why?
No need to write an if-else just to decide what to eat or do. One line does the job!

2. Default Parameters — Don’t Leave Me Hanging! 🎁 

function gift(name = 'Friend') {
  console.log(`Here’s a gift for you, ${name}!`);
}

gift();          // Here’s a gift for you, Friend!
gift('Alex');    // Here’s a gift for you, Alex!
Enter fullscreen mode Exit fullscreen mode

Why?
If someone forgets to say their name, no worries — JavaScript fills it in for you!

3. Destructuring — Unpack Like a Pro 🎒 

const person = {
  firstName: 'Sam',
  lastName: 'Smith',
  age: 25
};

const { firstName, age } = person;
console.log(`${firstName} is ${age} years old.`);  // Sam is 25 years old.
Enter fullscreen mode Exit fullscreen mode

Why?
No need to write person.firstName over and over — grab what you want directly.

4. Template Literals — Talk to Your Variables Like a Friend 🗨️ 

const pet = 'dog';
const petName = 'Buddy';

const sentence = `My ${pet} is called ${petName} and he loves belly rubs.`;
console.log(sentence);
Enter fullscreen mode Exit fullscreen mode

Why?
No messy plus signs — just smooth sentences with variables inside.

5. Arrow Functions — Tiny & Sweet 🍬 

const multiply = (x, y) => x * y;
console.log(multiply(4, 5));  // 20
Enter fullscreen mode Exit fullscreen mode

Why?
Fast function writing without typing a lot. Perfect for quick math or little helpers.

6. Use || for Backup Plans — Like a Safety Net 🛟 

const userInput = '';
const defaultText = userInput || 'Please type something!';
console.log(defaultText);  // Please type something!
Enter fullscreen mode Exit fullscreen mode

Why?
If someone forgets to type, your code won’t crash — it’ll show a friendly message instead.

7. Spread Operator — Copy & Paste Magic ✂️📋 

const veggies = ['carrot', 'broccoli'];
const moreVeggies = [...veggies, 'spinach'];

console.log(moreVeggies);  // ['carrot', 'broccoli', 'spinach']
Enter fullscreen mode Exit fullscreen mode

Why?
Make a copy of an array, add stuff, and don’t mess up the original.

8. .map() — Turn Numbers Into Funny Messages 😂 

const scores = [3, 6, 9];
const funScores = scores.map(score => `You scored ${score} points! Yay!`);
console.log(funScores);
Enter fullscreen mode Exit fullscreen mode

Why?
Change an array of numbers into something more fun or meaningful with just one command.

9. Optional Chaining — Peek Safely Without Crashing 👀 

const car = { model: 'Tesla' };
console.log(car.owner?.name || 'Owner unknown');  // Owner unknown
Enter fullscreen mode Exit fullscreen mode

Why?
If something’s missing deep inside an object, don’t freak out — just move on smoothly.

10. for...of Loop — Perfect for Your Favorite Snacks 🍩 

const snacks = ['chips', 'cookies', 'pretzels'];

for (const snack of snacks) {
  console.log(`I love ${snack}!`);
}
Enter fullscreen mode Exit fullscreen mode

Why?
Easier to loop through arrays than with old-fashioned for loops. Plus, you get to shout your love for snacks!

Top comments (2)

Collapse
 
shifa_2 profile image
Shifa •

Nice article

Collapse
 
capture profile image
Capture •

This is really lit