DEV Community: Rova Ranaivo

JavaScript: Discovering Hidden Gems For Advanced Developers

Rova Ranaivo — Tue, 18 Jul 2023 07:44:28 +0000

As a vibrant language used by millions of developers, JavaScript is continually evolving and improving. Though you may be well-acquainted with its common syntax and usage, let's venture off the beaten path and explore some lesser-known aspects of JavaScript. These might help you write more expressive, elegant, and efficient code.

1. Proxies

The Proxy object in JavaScript is a powerful feature, which is not as frequently used as it should be. Proxies allow you to create a placeholder for another object, which can intercept and redefine fundamental operations for that object.

Here's an example of a proxy being used to intercept a property access operation

let handler = {
    get: function(target, name) {
        return name in target ? target[name] : 42;
    }
};

let p = new Proxy({}, handler);
p.a = 1;

console.log(p.a, p.b); // 1, 42

In the above code, p is a proxy for an empty object. The handler object defines a get method which provides a custom behavior whenever a property is accessed on the proxy object.

2. Tagged Template Literals

While many developers use template literals for string interpolation, not everyone knows they can be 'tagged'. This means applying a function to the template literal, which allows for string parsing customization.

Here's an example

function tagged(strings, ...values) {
    return strings.reduce((result, string, i) => 
        `${result}${string}${values[i] || ''}`, '');
}

let adjective = "better";
console.log(tagged`You will be a ${adjective} JS developer after this article.`); 
// "You will be a better JS developer after this article."

The tagged function gets the literal strings as its first argument and the substitutions as its remaining arguments.

3. Optional Chaining Operator

Optional chaining (.) allows you to read the value of a property located deep within a chain of connected objects without having to check each property in the chain.

let book = {
  title: "The Art of JavaScript",
  author {
    firstName: "John",
    lastName: "Doe"
  }
};

console.log(book.author.firstName); // John

In this example, JavaScript will evaluate the expression up to the point where the first undefined or null value is located, making code more readable and less prone to runtime errors.

4. Using in Operator

The in operator checks whether an object has a specific property. It can also check if an index exists in an array. Here's a simple demonstration

let car = {make: Tesla, model: Model 3};
console.log("make" in car); // returns true

let arr = [10, 20, 30];
console.log(2 in arr); // returns true

This operator is often overlooked but can be a handy tool in your JavaScript toolkit.

5. Using Async Generators and Iterators

With the advent of AsyncAwait, asynchronous code in JavaScript has become more straightforward to write and understand. This is further simplified by Async Generators and Iterators, although they're not often used by many developers.

Here's a simple example of an async generator function

async function asyncGenerator() {
    yield Hello;
    yield World;
}

let generator = asyncGenerator();
console.log(await generator.next()); // { value 'Hello', done false }
console.log(await generator.next()); // { value 'World', done false }

The function asyncGenerator is an asynchronous generator function that yields two values.

These hidden gems are just a tip of the iceberg. JavaScript is a language with a lot of depth, and even advanced developers might not be familiar with all of its nuances. However, the exploration of its lesser-known features can lead to cleaner and more efficient code, enhancing your journey as a JavaScript developer.

I hope that this article has offered some inspiration to dive deeper into JavaScript and explore the treasures it holds. Happy coding!

Tell me what you think about it!

Understanding JavaScript Debounce and Throttling

Rova Ranaivo — Sun, 16 Jul 2023 13:16:38 +0000

Javascript, a dynamic and versatile language, provides several powerful features. Two such features, debounce and throttling, help enhance the performance of your web applications, particularly when dealing with events like scrolling, resizing, or key presses. However, many developers find these concepts somewhat tricky to grasp. Let's simplify them.

What is Debouncing?

Imagine you're in an elevator. You keep pressing the button, but the elevator won't close any faster. It waits until there's a noticeable pause between button presses. This is debouncing. In JavaScript, debouncing is a technique where we group multiple sequential calls in one single call.

For example, if you're listening to the scroll event, which fires hundreds of times per minute, using a debounce function will ensure that your actual event handling function only runs once after the user has stopped scrolling.

Here's an example of a debounce function in JavaScript:

function debounce(func, delay) {
  let debounceTimer;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => func.apply(context, args), delay);
  }
}

window.addEventListener('scroll', debounce(function() {
  console.log('Scrolling');
}, 300));

In this example, our debounce function will execute the console log only once every 300ms during a scroll, rather than for every pixel scrolled.

What is Throttling?

Throttling, on the other hand, ensures that a function doesn't run more often than the delay time. It's like a pipe, limiting the amount of water flowing through it. This is useful for situations where you don't want to wait until the event stops firing, but still want to limit the amount of times your function runs.

Here's a basic throttling function:

function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  }
}

window.addEventListener('scroll', throttle(function() {
  console.log('Scrolling');
}, 300));

In this case, the console log will only fire every 300ms during a scroll, not waiting for the scroll to end.

Conclusion

Debouncing and throttling are powerful techniques that can optimize the performance of your web applications. By controlling the rate at which events trigger function execution, you can significantly enhance user experience and efficiency. Remember, debouncing is like waiting for the elevator door to close, and throttling is like controlling the flow of water through a pipe.

Next time you're faced with rapidly firing events, consider using debouncing or throttling to optimize your function calls.

CSS's :root Variables. Use it!

Rova Ranaivo — Wed, 05 Jul 2023 16:57:29 +0000

CSS's :root selector lets you define global variables that can be used in your stylesheets. These variables, also known as custom CSS properties, provide a convenient way of storing and reusing values, making your stylesheets more modular and easier to maintain.

1. Defining :root variables

To define a :root variable, use the :root selector followed by the variable name and value, surrounded by double dashes (--).
Here is an example:

:root {
  --primary-color: #fff;
  --font-size: 14px;
}

2. Using :root Variables

To use a :root variable, you can refer to it using the var() function and the variable name, as following:

body {
  color: var(--primary-color);
  font-size: var(--font-size);
}

3. Overriding :root Variables

You can override :root variables at any point in your stylesheets by redefining them. This flexibility allows you to update the variable value globally, affecting all the styles that rely on it.

4. Benefits of :root Variables

Reusability: Use variables throughout your stylesheets, reducing code duplication.
Consistency: Maintain a consistent look and feel by centralizing values in variables.
Dynamic Updates: Change variable values dynamically, resulting in global style changes.

Conclusion:
Using :root variables in CSS is a powerful way of defining and reusing values in your style sheets. By centralizing your values and making them easily modifiable, you can improve code maintenance, achieve consistent styling and create more flexible designs.

Remember to update your stylesheets to take advantage of :root variables and enjoy the benefits they provide in your CSS development process.