DEV Community: Tymek Zapała

5 JavaScript tricks only experienced developers know... Until now! 🧙‍

Tymek Zapała — Sat, 11 Jan 2025 12:18:57 +0000

JavaScript is a versatile and powerful language, but even experienced developers sometimes overlook its lesser-known features. These tricks can help you write more efficient, cleaner code that stands out. Let's dive into these five secret JavaScript maneuvers that will elevate your coding craft.

1. Destructuring for cleaner code

Destructuring is an elegant way to unpack values from arrays or objects into distinct variables. It's a must-have for making your JavaScript code more readable and concise.

Say goodbye to repetitive syntax:

// Before destructuring
const user = { name: 'Alice', age: 25 };
const name = user.name;
const age = user.age;

// With destructuring
const { name, age } = user;

This nifty trick reduces boilerplate, letting you grab just what you need.

2. Optional chaining to avoid errors

Tired of TypeError when accessing deep nested properties? Enter optional chaining. By using the ?. operator, you can safely navigate through nested objects, only accessing properties if they exist.

const user = { profile: { email: 'alice@example.com' } };

// Without optional chaining
const email = user.profile && user.profile.email;

// With optional chaining
const email = user?.profile?.email;

This approach makes your code cleaner and reduces the need for multiple checks.

3. The nullish coalescing operator

The ?? operator provides a convenient way to set default values only if the left-hand side is null or undefined. Often confused with the logical OR ||, this operator is a hidden gem for default fallbacks.

const input = undefined;

// Logical OR
const result = input || 'default'; // unwanted behavior with false, 0, ''

// Nullish coalescing
const result = input ?? 'default'; // better for truly null/undefined cases

This gives more control over defaults, preventing unexpected falls to falsy values like 0 or ''.

4. Immediately Invoked Function Expressions (IIFE)

An IIFE is a function that runs as soon as it is defined. It's perfect for avoiding polluting the global scope and encapsulating code logic in a neat, self-contained package.

// IIFE Syntax
(function() {
  console.log("I'm executed immediately!");
})();

Use IIFEs to create private scopes in your JavaScript files, preventing unwanted interference.

5. Sort without mutating: `Array.toSorted()`

The toSorted() method is a recent addition to JavaScript that allows you to sort an array without modifying the original. This is especially useful when you need to maintain immutability in your code.

const numbers = [3, 1, 4];
const sorted = numbers.toSorted((a, b) => a - b);

console.log(sorted); // [1, 3, 4]
console.log(numbers); // [3, 1, 4] (unchanged)

Unlike Array.sort(), which modifies the array in place, toSorted() returns a new array, keeping the original intact and avoiding errors when we try to update immutable array.

Conclusion

Implementing these advanced JavaScript tricks can significantly improve the readability and maintainability of your codebase. By leveraging destructuring, optional chaining, nullish coalescing, IIFEs, and array toSorted(), you'll transform how you approach complex problems.

3 very simple React patterns to immediately improve your codebase 🪄

Tymek Zapała — Fri, 10 Jan 2025 16:10:43 +0000

React is powerful.

But with power comes the risk of messy codebases. Over time, components can become bloated, hard to read, and even harder to maintain.

Thankfully, we can apply three very simple patterns can immediately make your codebase cleaner, more modular, and easier to scale - making way for further more advanced adjustments.

1. Composition pattern for flexible components

Overloading components with props to handle every variation makes them rigid and hard to maintain.

Let's say your Button has an icon prop. To support icons on the left and right, you add leftIcon and rightIcon. Then, to add a separator, you introduce hasSeparator. You get the idea - before you know it, your button has 15 props.

The composition pattern solves this by splitting components into smaller, focused subcomponents that consumers can arrange as needed. For example, instead of adding leftIcon or rightIcon props to a Button, you can split it into Button, Button.Icon, and Button.Text for full customization.

function Button({ children }) {
  return <button>{children}</button>;
}

function ButtonIcon({ icon }) {
  return <span>{icon}</span>;
}

function ButtonText({ children }) {
  return <span>{children}</span>;
}

<Button>
  <Button.Icon icon="🚀" />
  <Button.Text>Launch</Button.Text>
</Button>

This approach keeps components clean, reusable, and easy to adapt.

2. Component hooks for separating logic from UI

One of the most effective and surprisingly simple ways to clean up bloated components is by using component hooks.

This pattern involves extracting the logic of a component into a custom hook, allowing the component to focus solely on rendering the UI. By doing so, you decouple the business logic from the presentation layer, making your code easier to read, maintain, and test.

For example, if you have a component that handles input validation, formatting, and other logic-heavy tasks, you can move all of that logic into a dedicated hook.

I wrote a detailed example of how to apply this pattern in a real-world scenario on my blog. Check out the article to see how this approach can dramatically simplify your components while improving scalability.

3. Render props for component customization

When you need to customize a component's behavior or content, the Render Props pattern can come in handy. It allows you to pass a rendering function or ReactNode to a component to customize what it renders, without modifying the component itself.

For example, let’s say you have a MobileNavigation component that needs to render social media icons, but the icons may vary depending on the app:

function MobileNavigation({ socialMediaIcons }) {
  return (
    <nav>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
      <div>{socialMediaIcons}</div>
    </nav>
  );
}

// Usage:
<MobileNavigation
  socialMediaIcons={
    <div>
      <a href="https://twitter.com">🐦</a>
      <a href="https://facebook.com">📘</a>
    </div>
  }
/>

This approach keeps the MobileNavigation component reusable while allowing full customization of its social media section. Render Props ensure that you can tailor parts of the component without duplicating code or introducing unnecessary props.

Conclusion

Improving your React codebase doesn't require a complete overhaul - just a few simple patterns can make a huge difference. By *, *, and using render props, you'll write cleaner, more maintainable code that's easier to scale.

Start applying these patterns today and see how they transform your workflow.

Good luck! 🔥

🍯 Honeypot field: an easy to implement React security technique

Tymek Zapała — Mon, 09 Dec 2024 12:30:12 +0000

If you've ever had your web forms spammed by bots, you know how frustrating (and potentially dangerous) it can be. Bots don't just clog your inbox with spam. They can also exploit vulnerabilities, overload servers, and even submit malicious data.

While captchas are a common solution, they often frustrate real users too. Honeypot field is an easy to implement, user-friendly alternative.

What is a honeypot field?

It's basically a hidden input field added to your form. It's designed to bait bots into filling it out while remaining invisible to genuine users. If the hidden field contains data upon submission, you can safely reject it as bot-generated.

Why use honeypot field?

Bot spamming isn't just an annoyance - it's a real security issue:

Server overload: High bot traffic can lead to performance issues.
Data exploits: Bots might inject malicious code or junk data.
Wasted resources: Managing spam submissions wastes time and effort.

Honeypot field alternatives

The honeypot technique is great for blocking basic bots at practically no cost, but it might not work against more advanced bots. For stronger security, consider combining honeypots with these alternatives:

CAPTCHA: interactive challenges (like identifying objects in images) that effectively block bots but can frustrate users.
Time-based validation: detects bots by tracking how quickly a form is submitted—bots typically fill forms almost instantly.
Rate limiting and IP blocking: limits form submissions from abusive IPs without affecting genuine users.
Authentication-gated forms: makes forms available only to authenticated users - a strong but restrictive solution.

How to implement honeypot fields?

I’ve written a detailed guide on how to implement honeypot fields in React. You can read it here.

Hope this article was useful to you. Good luck!

Arrow function vs regular function in JavaScript. Which one to use? 🤷‍♂️

Tymek Zapała — Wed, 30 Oct 2024 16:07:21 +0000

Syntax differences

Arrow functions are shorter and use an => symbol. Here’s how they look compared to regular functions:

// Regular function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

With an arrow function, you can skip the return keyword if you're returning a single expression. This makes arrow functions popular for shorter, simpler functions.

`this` binding

In regular functions, this refers to the object that calls the function. However, arrow functions don’t have their own this context. Instead, they inherit this from the surrounding code where they’re defined.

Here's an example to show how this difference affects behavior:

const object = {
  name: 'JavaScript',
  regularFunction: function() {
    console.log(this.name); // 'JavaScript'
  },
  arrowFunction: () => {
    console.log(this.name); // undefined
  }
};

obj.regularFunction(); // 'JavaScript'
obj.arrowFunction();   // undefined

This might be useful when you pass function to event listeners, take a look:

document.querySelector('button').addEventListener('click', function() {
  console.log(this); // refers to the button element!
});

`arguments` object

Regular functions have access to the arguments object, which holds all arguments passed to the function. Arrow functions don't have this; they use rest parameters ...args instead.

// regular function with arguments
function sum() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

// arrow function with rest parameters
const sum = (...args) => args.reduce((a, b) => a + b);

Usage in callbacks

Arrow functions can simplify your code, especially when dealing with things requiring callbaks - for example promises or array methods like .map() and .filter().

// using arrow functions in array methods
const numbers = [1, 2, 3];
const squares = numbers.map(number => number * n); // [1, 4, 9]

When to use arrow functions vs regular functions

In general, arrow functions work well for:

Short, concise functions like in array methods or callbacks
Situations where this should stay consistent, like in class methods or closures

Regular functions are useful when:

You need a specific this binding, like in object methods or event listeners
You want to use the arguments object without defining rest parameters

Let's notice something interesting here. As you can see, the differences are quite subtle. In most of the cases, it won't matter which one you choose, unless your codebase make heavy usages of this or arguments (unlikely).

The bottom line is that just choose whichever you prefer, just be consistent across your project.

Still don't get React server components? Read this one sentence

Tymek Zapała — Tue, 29 Oct 2024 15:54:54 +0000

I used to confuse React server components with server-side rendering. One day I was watching the video on server components from Kodaps Academy, and heard a line that really made me think:

The interesting word in "server components" is "components", not "server".

What does it mean?

In server-side rendering (SSR), the full component tree is built on the server, with the resulting HTML sent to the client and hydrated. We have no control over which parts of the app are rendered on the server, and which are not.

With server components, only specific parts of the tree (specific components) are rendered on the server. We can choose what is rendered on the server and what on the client!

Pretty simple.

Of course, this is not the only difference. You can read more about server-side rendering vs server components on my blog.

Don’t ever use if-else. Use this instead

Tymek Zapała — Fri, 25 Oct 2024 17:36:48 +0000

Let’s talk about a coding trick that makes your code easier to read and keeps things organized: early returns.

Lots of coders rely on if-else statements to check different conditions, but stacking them up can get messy. Instead, early returns let us handle all the error cases up front, so we can save the ideal scenario for the end of the function.

Example

Here’s a function that checks if a user can get a discount:

function getDiscountMessage(user) {
  if (user.isActive) {
    if (user.hasDiscount) {
      return `Discount applied for ${user.name}!`;
    } else {
      return `${user.name} does not qualify for a discount.`;
    }
  } else {
    return `User ${user.name} is inactive.`;
  }
}

This code is filled with nested if-else statements. 🤮

Instead, we can cover the error cases first with early returns and then focus on the "perfect scenario" at the end:

function getDiscountMessage(user) {
  if (!user.isActive) {
    return `User ${user.name} is inactive.`;
  }

  if (!user.hasDiscount) {
    return `${user.name} does not qualify for a discount.`;
  }

  // Perfect scenario: user is active and qualifies for a discount
  return `Discount applied for ${user.name}!`;
}

Each error condition is handled in a single line right at the start. This keeps our code neat and straightforward, without all the if-else blocks of different nesting levels to follow. Our pattern is also very helpful for keeping one level abstraction per function, which I covered in another article.

So next time, skip the if-else and give early returns a try. 😎

DEV Community: Tymek Zapała

5 JavaScript tricks only experienced developers know... Until now! 🧙‍

1. Destructuring for cleaner code

2. Optional chaining to avoid errors

3. The nullish coalescing operator

4. Immediately Invoked Function Expressions (IIFE)

5. Sort without mutating: Array.toSorted()

Conclusion

3 very simple React patterns to immediately improve your codebase 🪄

1. Composition pattern for flexible components

2. Component hooks for separating logic from UI

3. Render props for component customization

Conclusion

🍯 Honeypot field: an easy to implement React security technique

What is a honeypot field?

Why use honeypot field?

Honeypot field alternatives

How to implement honeypot fields?

Arrow function vs regular function in JavaScript. Which one to use? 🤷‍♂️

Syntax differences

this binding

arguments object

Usage in callbacks

When to use arrow functions vs regular functions

Still don't get React server components? Read this one sentence

Don’t ever use if-else. Use this instead

Example

5. Sort without mutating: `Array.toSorted()`

`this` binding

`arguments` object