DEV Community: Victor Mugisha Shyaka

🧠Mastering Debouncing in TypeScript: Enhance Your App's Performance

Victor Mugisha Shyaka — Sun, 04 May 2025 16:00:16 +0000

Ever noticed how some applications wait for you to pause typing before fetching or updating search results? That's debouncing in action—a technique that ensures that certain "expensive" operations aren't done too frequently, optimizing performance and resource utilization.

Expensive operations are those that consume significant amount of computer resources, such as CPU time, memory, or disk I/O, making it slow and potentially impacting the overall performance of a program.

🔍 What is Debouncing?
Debouncing delays the execution of a function until a specified time has passed since the last time it was invoked. It's particularly useful for (but not limited to):

1. Search Inputs: Preventing API calls on every keystroke.
2. Window Resizing: Avoiding performance hits from rapid resize events.
3. Scrolling Events: Ensuring listener's callbacks aren't triggered multiple times every time a user scrolls a page.

Here's how you can implement this powerful technique:

🛠️ TypeScript Implementation
The TypeScript debounce function below creates a reusable utility that wraps any function with a timing mechanism. In the example below, the handleSearch function is invoked only after the user stops typing for 300 milliseconds, reducing unnecessary function calls and enhancing performance.

function debounce<T extends (...args: any[]) => void>(
  func: T,
  delay: number,
): (...args: Parameters<T>) => void {
  let timeoutId: ReturnType<typeof setTimeout>
  return (...args: Parameters<T>): void => {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => func(...args), delay)
  }
}

// Usage Example
const handleSearch = (query: string) => {
  console.log(`Searching for: ${query}`)
}

const debouncedSearch = debounce(handleSearch, 300)

const searchInput = document.getElementById("search") as HTMLInputElement
searchInput.addEventListener("input", (event) => {
  debouncedSearch((event.target as HTMLInputElement).value)
})

In a recent project, implementing this pattern reduced our API calls by 85% during search interactions, significantly improving both server load and user experience.

💬 Let's Collaborate!
Have you implemented debouncing in your projects? Share your specific use cases or how it improved your application's performance metrics in the comments below. Let's learn and grow together! 🚀

JavaScript Functions for Beginners: Quick Guide

Victor Mugisha Shyaka — Wed, 16 Oct 2024 11:33:04 +0000

Functions are one of the fundamental building blocks of JavaScript. They allow you to write reusable pieces of code that can be called multiple times throughout your program. Whether you're just starting out with JavaScript or looking to solidify your understanding, mastering functions is crucial for becoming a proficient developer.

In this article, we'll explore the basics of JavaScript functions, including:

What functions are and why they're important
How to declare and define functions
Different ways to create functions in JavaScript
Function parameters and arguments
Return values and their significance
The concept of function scope

By the end of this guide, you'll have a solid foundation in working with JavaScript functions and be ready to use them in your own projects.

Let's get started in exploring the world of JavaScript functions!

1. What Are Functions and Why Are They Important?

Functions in JavaScript are reusable blocks of code designed to perform a specific task. Think of them as little machines that take input, process it, and produce an output. They are a fundamental concept in programming and serve several important purposes:

Reusability

Functions allow you to write a piece of code once and use it multiple times throughout your program. This saves time and reduces the amount of code you need to write.

Abstraction

Functions allow you to hide the details of how a task is performed. You can call a function without needing to know how it works internally. This makes your code more organized and easier to understand.

Modularity

Functions allow you to break down complex problems into smaller, more manageable pieces. This modular approach makes your code more flexible and easier to maintain.

2. How to declare and define functions

There are sevelar ways of creating and defining functions in JavaScript, we have different types of functions which also determines how the function is created according to it's type.

Before we dive in on how to define functions, there are few things all functions have in common that you should know first:

Function name: Almost every function in JavaScript must have a name, otherwise, it wouldn't really be usable. Not all functions have names though, some special types of functions can be created and used without names (we will see this in other chapter).
Optional parameters: These are inputs that a function can receive and use them to produce output. A function can receive one or more parameters depending on what it does and the input it needs, but they are optional which means you can create a function that produce output without input (sounds interesting!)
Function body: Every function in JavaScript should have a body. This is a block of statement enclosed in curly braces {} after the function parameters. It is what a function uses to process the input and produce the result (output).
function keyword: Again almost every function in JavaScript are defined using the function keyword, but not all of them.
return statement: The return statement is used in a function to make the function produce the output, this is how the function produces the result of its calculation or the output of its operation(s). This is statement is also optional in JavaScript, when omitted, a function will return undefined
Function signature: This is nothing than the combination of a function keyword, functionName and the list of parameters. If you take all these three parts together, they form what we call function signature.
Function call: Some people call it function invokation, but I prefer function call. This is when you have defined your function, and then you want to use that function. To do this you write functionName(optionalParameters) and this will give you the result from the function. For example, printValue('hello'), this statement calls the function called printValue and pass 'hello' as parameter to that function.

a. Functions with `function` keyword

This is more popular and straightforward way of creating a function in JavaScript using the function keyword.

// Syntax
function functionName(parameters) {
  // function body
}

This is the basic syntax of creating a function. The functionName can be anything you want just like a variable name, but it is a good practice to name the function after what it does. For example, if a function calcualates the sum of two numbers, you can name it addTwoNumbers or addNumbers so that whoever reads the name of the function, they immediately get a basic idea of what your function does.

Let's see a simple example to help you understand this syntax:

function addNumbers(number1, number2) {
  return number1 + number2;
}

console.log(addNumbers(3, 4)); // 7

In this example, we defined a function called addNumbers that accepts two inputs number1 and number2, and return their sum. Then we called the function with 3 and 4 hence the function will give us 7 in the console.

b. Arrow Functions

Arrow functions, introduced in ES6, provide a more concise syntax for writing functions. They are especially useful for short, simple functions.

// Arrow function syntax
const functionName = (parameters) => {
  // function body
};

// Example
const multiplyNumbers = (a, b) => {
  return a * b;
};

console.log(multiplyNumbers(5, 3)); // 15

For simple, one-line functions, you can use an even more concise syntax:

const square = (x) => x * x;
console.log(square(4)); // 16

c. Function Expressions

Function expressions involve assigning a function to a variable. This can be done with either traditional function syntax or arrow functions.

// Traditional function expression
const greet = function (name) {
  return `Hello, ${name}!`;
};

// Arrow function expression
const greetArrow = (name) => `Hello, ${name}!`;

console.log(greet("Alice")); // Hello, Alice!
console.log(greetArrow("Bob")); // Hello, Bob!

3. Function Parameters and Arguments

Parameters are variables listed in the function definition, while arguments are the actual values passed to the function when it's called.

function introduce(name, age) {
  console.log(`My name is ${name} and I'm ${age} years old.`);
}

introduce("Charlie", 30); // My name is Charlie and I'm 30 years old.

Default Parameters

ES6 introduced default parameters, allowing you to specify default values for parameters if no argument is provided.

function greetUser(name = "Guest") {
  console.log(`Welcome, ${name}!`);
}

greetUser(); // Welcome, Guest!
greetUser("David"); // Welcome, David!

Rest Parameters

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array.

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

4. Return Values

Functions can return values using the return statement. If no return statement is used, the function returns undefined.

function calculateArea(width, height) {
  return width * height;
}

const area = calculateArea(5, 3);
console.log(area); // 15

5. Function Scope

Variables declared inside a function are only accessible within that function, creating a local scope.

function exampleScope() {
  const localVar = "I'm local";
  console.log(localVar); // I'm local
}

exampleScope();
// console.log(localVar); // This would cause an error

6. Higher-Order Functions

Higher-order functions are functions that can take other functions as arguments or return functions.

function applyOperation(x, y, operation) {
  return operation(x, y);
}

const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

console.log(applyOperation(5, 3, add)); // 8
console.log(applyOperation(5, 3, multiply)); // 15

Conclusion

Understanding functions is crucial for JavaScript development. They allow you to write reusable, modular, and efficient code. As you continue your JavaScript journey, you'll find that mastering functions opens up powerful programming paradigms and patterns.

Practice creating and using functions in your projects to solidify your understanding.

I know this wasn't all about functions, but I hope it gave you a good overview of what functions are and how they work in JavaScript.

In my next articles, I will be breaking down some of the advanced concepts of functions such as closures, first-class functions, higher-order functions, currying, partial application, memoization, etc. and how they work behind the scenes. Don't miss them out!

If you found this article helpful, please leave a comment and share it with your friends and colleagues.
And if you wish me to write about something specific, please let me know in the comments below.

Happy coding!

Arrays In JavaScript: Everything You Need To Know

Victor Mugisha Shyaka — Mon, 07 Oct 2024 06:47:26 +0000

Arrays in JavaScript

Arrays in JavaScript can initially be confusing and challenging to grasp, especially when dealing with advanced concepts. I, too, struggled with understanding arrays in JavaScript at first. In this article, I aim to demystify arrays in JavaScript, breaking down everything you need to know so you can work with them confidently.

Definition

What Is an Array

An array is a data structure that stores a collection of elements, each accessible by an index. In many programming languages, arrays store elements in contiguous memory locations. In JavaScript, arrays are high-level, list-like objects used to store multiple values in a single variable. They are zero-indexed, meaning the first element is at index 0.

Arrays in JavaScript

Since JavaScript is a dynamically typed language, arrays can hold elements of different types. An array can contain numbers, strings, booleans, objects, and even other arrays. This differs from statically typed languages like Java or C++, where arrays are typically homogeneous and must contain elements of the same data type.

Why use an array?

Arrays help manage data efficiently by allowing you to store, access and manipulate values. They are used for anything that involves lists or collections, like managing items in an e-commerce cart or keeping track of user inputs.

How to create an array in JavaScript

There are multiple ways to create arrays in JavaScript, I will go over few of them:

1. Using array literals `[]`

In JavaScript, you can simply create an array by assigning [] to a variable or a constant

const numbers = [1, 2, 3];
const fruits = ["Apple", "Banana", "Orange"];

Notice that elements of an array are separated by comma ,

2. Using `Array` constructor

You can also create an array as an instance of a native JavaScript Array constructor using the following this syntax:
const myArray = new Array()
The Array constructor takes one or more arguments (they have to be numbers), and it behaves differently according to the numbers of arguments you pass in!
If you pass one argument: const myArray = new Array(4), this will create a new array with 4 empty elements!

If you pass more that one arguments: const myArray = new Array(1, 2, 3), this creates an array of 3 numbers 1, 2 and 3 respectively and it is simiral to writing const myArray = [1, 2, 3]!

I know this looks confusing but trust me it is easy if you make some more exercises with them!

3. Using `Array.of` method

Arrays can also be created using this method Array.of and it will just create an array containing all elements you pass to it as arguments. The difference betwee using Array.of and Array constructor lies in how they behave when they receive one argument!

const array1 = Array.of(1); // This returns [1]
const array2 = Array.of(2, true, "hello"); // This returns [2, true, 'hello']

Notice how Array.of behaves when it receives one parameter, unlike Array constructor which just creates an array of n empty elements, the Array.of just creates an array with single element which is the one you passed in!

4. Using `Array.from` method

You can also use Array.from(iterable) method, which receives one argument which also must be an iterable and creates an array out of it! For example, you can pass a set to this method and creates an array from the values of that set!

const mySet = new Set([2, 3, 4, 5, 5]);
const arrayFromSet = Array.from(mySet);

Arrays manipulation in JavaScript

We've seen what is an array and how you can create arrays in JavaScript, now the remaining problem you might be asking yourself is, how do I use and work with arrays?
Well, that's a good question!

Traditional way of working with arrays in JavaScript

Traditionally, we use loops to iterate over the elements stored in an array and use them!
The following example shows how you can loop over an array of numbers and display the double of every number inside the array:

const numbers = [1, 2, 3, 4];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i] * 2);
}

Using modern JavaScript array method syntax

JavaScript comes with many array methods (higher-order functions) out of the box, they are accessible to all array instances through Array.prototype object, we use those methods provided by JavaScript to manipulate and work with data stored in arrays! We can even create our own array methods (we will look at this on next chapter)

They are higher-order methods, because they take other functions as arguments and use those functions to manipulate the data stored in arrays!

Those array methods are also categorized into two categories:

Mutating: These loop over the array and while applying the callback function, they also mutate the original array!
Non-mutating: These iterate over the array and apply the callback function, but instead of mutating the original array, they return new array

1. `forEach()` method

forEach() is an array higher-order method used to loop over elements of an array and apply a callback function on every element without either modifying the original array or creating a new array!

The syntax of the callback functions which is usually anonymous function (usually the same in all other methods):

function (currentElement[, index, targetArray]) {}

This means that on every iteration, the array method has access to the current element in iteration (currentElement), it's index in the array index which is optional, and the reference to the target array in which the method is being executed over targetArray which is also optional. But you can call those parameters however you want, you just need to pay attention on their positions.

const numbers = [1, 2, 3, 4];
numbers.forEach((element) => {
  console.log(element * 2);
});

2. `map()` method

Just like forEach map is also another way of iterating over the elements of the array and apply the callback function on every element, but unlike forEach map is non-mutating method and hence it creates and return the new array as a result of iteration and does not change the original array!

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((element) => element * 2);
console.log(squaredNumbers);

3. `filter()` method

filter() method is used when you want to filter the array by removing the elements you don't want, this is non-mutating method and it returns a new array!
For every iteration, the callback inside the filter() must return a boolean value indicating whether or not the current element is to be included in the new filtered array

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter((element) => element % 2 === 0);
console.log(evenNumber); // [2, 4]

4. `reduce()` method

reduce() method is a bit different from those above. Think of it as a way to combine all the elements in an array into a single value by applying a function to each element, one by one. It returns a single value from all elements of the array, you will use it when you want a single value from all elements of an array like sum, average, maximum or minimum just to name a few!

The syntax is a also different
Array.reduce(function(accumulator, element[, index, targetArray]) [, initialValue])

This method takes two arguments, the first one is the callback function just like other methods, and the second one will be the initial value of the accumutator variable. This second argument is optional, if it is not provided, the reduce will use the first element of an array as the initial value of accumulator

The accumulator holds the result returned by the callback function on each iteration and will be the final result returned from the reduce once the iteration is over!

Let's try to find a sum from an array of numbers:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, element) => accumulator + element);
console.log(sum);

4. `slice()` method

slice() is another useful array method in JavaScript, which is used to extract a small portion of an array! slice() creates a new array by copying a section of an existing array without modifying the original array.

The syntax for the slice() method is as the following:
Array.slice(startIndex, endIndex) startIndex represents a starting point of extraction and it is inclusive and the endIndex represents the ending element of extraction, it is optional and exclusive. When it is not provided, the slice methods copies an array from startIndex to the end of an array!

const fruits = ["apple", "banana", "orange", "mango"];
const slicedFruits = fruits.slice(1, 3); // ['banana', 'orange']

5. `splice()` method

splice() is an array method in JavaScript, which is used for adding, removing and replacing elements in array. splice() changes the content of an array by adding, removing or replacing elements in array.

The syntax for the splice() method is as the following:
Array.splice(index, elementsToRemove, newElement1, newElement2, ..., newElementn)
This might look confusing but, let me try to explain:
index means the starting index in the array in which the removing of element is supposed to begin and it is inclusive.
elementsToRemove represents the number of elements from index in which you want to remove from array, if you only want to add new elements, you can provide 0 in this position.
newElement1, newElement2 etc. These can be any number of elements you want to add in your array and they will replace elementsToRemove elements you specified in your array!

Much of talking, let's see an example:

const fruits = ["apple", "banana", "orange", "mango"];
// If we want to replace 'banana' with 'pineapple'
const splicedFruits = fruits.splice(1, 1, "pineapple"); // This will return ['apple', 'pineapple', 'orange', 'mango']

fruits.splice(1, 1, "pineapple") this means from index of 1, remove 1 elements and add 'pineapple'
If we only wanted to add pineapple in array not replacing other value with it, we could have written this as
fruits.splice(1, 0, "pineapple") this would add pineapple after element at index1 and will not remove any other element from this array.

Conclusion

Arrays are a fundamental and versatile feature in JavaScript, offering an essential structure to store and manipulate collections of data. From simple array creation using literals to more advanced methods like Array.of() and Array.from(), JavaScript arrays provide a range of ways to handle different types of data. By mastering array manipulation through loops or modern methods like forEach(), map(), filter(), reduce(), slice(), and splice(), you can efficiently perform complex operations. Understanding these array features is key to becoming proficient in JavaScript, allowing you to write cleaner, more concise, and powerful code.

DEV Community: Victor Mugisha Shyaka

🧠Mastering Debouncing in TypeScript: Enhance Your App's Performance

JavaScript Functions for Beginners: Quick Guide

1. What Are Functions and Why Are They Important?

Reusability

Abstraction

Modularity

2. How to declare and define functions

a. Functions with function keyword

b. Arrow Functions

c. Function Expressions

3. Function Parameters and Arguments

Default Parameters

Rest Parameters

4. Return Values

5. Function Scope

6. Higher-Order Functions

Conclusion

Arrays In JavaScript: Everything You Need To Know

Arrays in JavaScript

Definition

What Is an Array

Arrays in JavaScript

Why use an array?

How to create an array in JavaScript

1. Using array literals []

2. Using Array constructor

3. Using Array.of method

4. Using Array.from method

Arrays manipulation in JavaScript

Traditional way of working with arrays in JavaScript

Using modern JavaScript array method syntax

1. forEach() method

2. map() method

3. filter() method

4. reduce() method

4. slice() method

5. splice() method

Conclusion

a. Functions with `function` keyword

1. Using array literals `[]`

2. Using `Array` constructor

3. Using `Array.of` method

4. Using `Array.from` method

1. `forEach()` method

2. `map()` method

3. `filter()` method

4. `reduce()` method

4. `slice()` method

5. `splice()` method