10 Tips to Code Like a Pro in JavaScript

Photo by Mohammad Rahmani on Unsplash

If you are not a medium member, please read this from here.

Today’s world is dominated by the web. What is the programming language behind the web you see with your favorite browsers? Yes. It is JavaScript. It is the only language that all modern web browsers inherently understand and execute directly without needing additional translation.

If you suddenly get HTML and CSS into your mind, they are essential to building the web but are not considered programming languages. There are tons of libraries and frameworks available today to make your life easier, but JavaScript remains the engine driving it all. So can you imagine how powerful JavaScript is?

No matter which library or framework you work with, these essential tips will help you code like a pro in JavaScript, especially in modern JS libraries and frameworks. Let’s dive in!

1. Destructuring Objects and Arrays

Destructuring makes it easy to extract data from objects and arrays.

// Destructuring objects
const person = { name: 'Alice', age: 25, city: 'New York' };
const { name, age } = person; // Extract 'name' and 'age'
console.log(name, age); // Output: Alice 25

// Destructuring arrays
const colors = ['red', 'green', 'blue'];
const [first, second] = colors; // Extract first and second elements
console.log(first, second); // Output: red green

2. Default Function Parameters

Avoid undefined values by setting default parameters for functions.

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

console.log(greet()); // Output: Hello, Guest!
console.log(greet('John')); // Output: Hello, John!

3. Optional Chaining

Safely access deeply nested properties without worrying about undefined errors.

const user = { profile: { email: 'user@example.com' } };
console.log(user.profile?.email); // Output: user@example.com
console.log(user.address?.city); // Output: undefined

4. Short-Circuit Evaluation

Simplify conditional assignments using logical operators.

const isLoggedIn = true;
const welcomeMessage = isLoggedIn && 'Welcome back!';
console.log(welcomeMessage); // Output: Welcome back!

const username = null;
const displayName = username || 'Guest';
console.log(displayName); // Output: Guest

5. Template Literals for Multiline Strings

Create cleaner, multiline strings with template literals.

const paragraph = `This is a long paragraph
that spans multiple lines
without using concatenation.`;

console.log(paragraph);

6. Dynamic Property Keys

Use variables as property keys in object literals.

const key = 'role';
const user = { name: 'Alice', [key]: 'Admin' };

console.log(user.role); // Output: Admin

7. Array Spread for Cloning and Merging

Duplicate or combine arrays effortlessly.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const clone = [...arr1];
const merged = [...arr1, ...arr2];

console.log(clone); // Output: [1, 2, 3]
console.log(merged); // Output: [1, 2, 3, 4, 5, 6]

8. Object Spread for Shallow Copying

Create shallow copies of objects using the spread operator.

const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 };

console.log(copy); // Output: { a: 1, b: 2, c: 3 }

9. Flattening Arrays with flat()

Easily flatten nested arrays using the flat() method.

const nestedArray = [1, [2, 3], [4, 5, 6]];
const flatArray = nestedArray.flat(); // Flattens one level deep

console.log(flatArray); //Output: [1, 2, 3, 4, 5, 6]

10. Array Methods Map, Filter & Reduce for Cleaner Code

Use array methods like map, filter, and reduce for common operations.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]
const sum = numbers.reduce((acc, num) => acc + num, 0); // 15

Final Thoughts

JavaScript is filled with many hidden tips that can simplify your code and boost productivity. By incorporating these into your toolkit, you will be able to write cleaner, more efficient, and more readable JavaScript.

What’s your favorite tip? Let me know in the comments!

Happy Coding!