DEV Community: Matheus Costa

TCP vs. UDP: The Need for Speed vs. Reliable Delivery

Matheus Costa — Mon, 27 Mar 2023 13:49:46 +0000

When it comes to transmitting data over the internet, there are two main protocols: TCP (Transmission Control Protocol) and UDP (User Datagram Protocol). Both protocols have their own advantages and disadvantages, and understanding these differences can help you choose the right one for your specific needs.

What is TCP?

TCP is a reliable protocol that provides error-free data transmission by establishing a connection between two devices before sending data. TCP sends data in small packets called segments, and each segment requires an acknowledgement from the receiving device before it can send the next segment. This ensures that data is delivered in the correct order and without errors. However, the overhead associated with establishing a connection and error checking can slow down data transmission speeds.

Some pros and cons of TCP include:

Pros: Reliable data transmission, error correction, ordered data delivery
Cons: Slower speeds due to connection establishment, higher overhead

What about UDP?

UDP, on the other hand, is a faster and more efficient protocol that does not establish a connection before sending data. Instead, it simply sends packets of data, or datagrams, to the recipient. UDP does not perform error checking or retransmission of lost packets, making it less reliable than TCP but faster for real-time applications such as gaming or video streaming.

Some pros and cons of UDP include:

Pros: Fast data transmission, low overhead, suitable for real-time applications
Cons: Unreliable data transmission, no error correction or recovery, unordered data delivery

So which protocol should you use? It depends on your specific use case. If you need reliable data transmission, such as for file transfers or email, then TCP is the way to go. If you prioritize speed over reliability, such as for online gaming or video streaming, then UDP may be a better choice.

Conclusion

TCP and UDP have their own pros and cons, and choosing the right protocol depends on your specific data transmission needs. Understanding the differences between these two protocols can help you make better decisions for your application.

Performance API: A Guide to Measuring, Monitoring, and A/B Testing

Matheus Costa — Sat, 11 Mar 2023 15:14:18 +0000

As the web continues to grow in complexity and sophistication, it becomes increasingly important to ensure that web applications perform as well as possible. The Performance API is one tool that developers can use to monitor and improve the performance of their web applications.

Measuring Page Load Time

One of the most useful aspects of the Performance API is its ability to measure the time it takes for various events to occur during the page load process. For example, the API can be used to measure the time it takes for the DOM to be fully loaded, or the time it takes for all of the page's assets (such as images and scripts) to be downloaded and rendered.

Here's an example of how to use the Performance API to measure the time it takes for the DOM to be fully loaded:

// Get the current timestamp before the DOM starts loading
const startTime = window.performance.now();

// Wait for the DOM to be fully loaded
window.addEventListener('load', () => {
  // Get the current timestamp after the DOM is fully loaded
  const endTime = window.performance.now();

  // Calculate the time it took to load the DOM
  const loadTime = endTime - startTime;

  console.log(`DOM loaded in ${loadTime} milliseconds`);
});

This code waits for the load event to fire, which indicates that the DOM is fully loaded. When the event fires, the code calculates the time it took to load the DOM and logs it to the console.

Identifying Performance Bottlenecks

The information provided by the Performance API can be used to identify specific areas where a page's performance can be improved. For example, if the API shows that the page is taking a long time to load a particular image or script, a developer might be able to optimize that asset to reduce its load time.

Here's an example of how to use the Performance API to identify slow-loading assets:

// Wait for all page assets to finish loading
window.addEventListener('load', () => {
  const resources = window.performance.getEntriesByType('resource');

  // Loop through all page resources and log their load times
  for (const resource of resources) {
    console.log(`${resource.name} loaded in ${resource.duration} milliseconds`);
  }
});

This code waits for the load event to fire and then uses the getEntriesByType method to retrieve a list of all page resources (such as images and scripts). The code then loops through the resources and logs their load times to the console.

Monitoring Performance Over Time

Another use case for the Performance API is in monitoring the performance of web applications over time. By regularly measuring a page's performance using the API, developers can track changes in performance and identify when performance is deteriorating. This can be especially useful for large, complex applications that may be difficult to monitor manually.

Here's an example of how to use the Performance API to monitor page load time over time:

// Measure page load time every 5 seconds
setInterval(() => {
  const startTime = window.performance.now();

  // Reload the page to simulate a new user visit
  location.reload();

  window.addEventListener('load', () => {
    const endTime = window.performance.now();
    const loadTime = endTime - startTime;

    console.log(`Page loaded in ${loadTime} milliseconds`);
  });
}, 5000);

This code measures the page load time every 5 seconds by reloading the page and measuring the time it takes to load. The code then logs the load time to the console.

A/B Testing

One particularly cool use case for the Performance API is in A/B testing. A/B testing is the practice of comparing two versions of a web page (Version A and Version B) to see which one performs better. By using the Performance API to measure the performance of both versions, developers can determine which version is faster and more performant.

Here's an example of how to use the Performance API in an A/B testing scenario:

// Measure page load time for Version A
const startTimeA = window.performance.now();

// Load Version A
loadVersionA();

window.addEventListener('load', () => {
  const endTimeA = window.performance.now();
  const loadTimeA = endTimeA - startTimeA;

  console.log(`Version A loaded in ${loadTimeA} milliseconds`);
});

// Measure page load time for Version B
const startTimeB = window.performance.now();

// Load Version B
loadVersionB();

window.addEventListener('load', () => {
  const endTimeB = window.performance.now();
  const loadTimeB = endTimeB - startTimeB;

  console.log(`Version B loaded in ${loadTimeB} milliseconds`);
});

This code measures the page load time for two different versions of a web page (Version A and Version B). The code loads each version of the page and waits for the load event to fire. When the event fires, the code calculates the load time for each version and logs it to the console. By comparing the load times for both versions, developers can determine which one is faster and more performant.

Conclusion

The Performance API is a powerful tool that can be used to measure, monitor, and optimize the performance of web applications. Whether you're measuring page load times, identifying performance bottlenecks, monitoring performance over time, or conducting A/B testing, the Performance API provides valuable insights into how your web application is performing. By using this API, developers can improve the user experience and ensure that their web applications are fast, responsive, and efficient.

Hydration: What is it?

Matheus Costa — Thu, 09 Mar 2023 21:49:41 +0000

Besides the name, it has nothing to do with water. But still, hydrate yourself. Hydration is simply the process of attaching JavaScript behavior to HTML elements that have been generated on the server, it is necessary to make a web page interactive, allowing users to click buttons, fill out forms, and perform other actions. Without hydration, web pages would be static and unresponsive.

In SSR (Server-side Rendering), the HTML and JavaScript are generated on the server and sent to the client as a fully-formed document. However, this HTML is still just a static representation of the page. Hydration is still necessary to attach event listeners to the page and make it interactive and dynamic. Once the HTML and JavaScript bundles have been downloaded by the browser, the JavaScript takes over and attaches event listeners to the HTML, allowing for a fully interactive user experience.

Hydration isn't needed in client-side rendering (CSR) because the entire JavaScript bundle is loaded and executed on the client, which includes all the necessary event listeners and JavaScript behavior. This means that the JavaScript code can directly manipulate the HTML elements that it created, without the need for hydration. Unlike server-side rendering (SSR), where HTML is generated on the server and sent to the client as a fully-formed document.

Conclusion

Hydration is a key concept in web development, allowing for dynamic and interactive user experiences on the server. By understanding how hydration works in SSR, developers can build web applications that are fast, responsive, and accessible to a wide range of users.

Battle of the Cookies: Regular Cookies vs. HTTP-Only

Matheus Costa — Thu, 16 Feb 2023 17:20:34 +0000

Cookies are a common technique used by web developers to store information on the client's computer and maintain session state between HTTP requests. However, there are different types of cookies that developers can use, we'll cover two of them, regular cookies and HTTP-only cookies. In this article, we'll discuss the differences between these two approaches, where cookies are stored, common attacks on each approach, and how to mitigate these attacks.

Regular cookies

Regular cookies (or just cookies) are cookies that can be accessed by client-side scripts, such as JavaScript. Regular cookies are commonly used to store user preferences, track user behavior, and maintain session state between HTTP requests.

Where are regular cookies stored?

Cookies are stored in the browser's cookie storage, which can be accessed and modified by client-side scripts.

Common attacks on regular cookies

Cross-site scripting (XSS) attacks: In an XSS attack, a malicious script is injected into a web page, which then executes in the context of the victim's browser. If the script can access regular cookies, it can steal sensitive information such as session IDs or authentication tokens.

Cross-site request forgery (CSRF) attacks: In a CSRF attack, a victim is tricked into clicking on a link or submitting a form that performs an action on a web application without their knowledge or consent. If the application relies on regular cookies for authentication or session management, the attacker can use the victim's cookies to carry out the attack.

How do regular cookies work?

Regular cookies work by setting a cookie on the client's computer when a web page is loaded. The cookie is then sent back to the server with each subsequent HTTP request, allowing the server to maintain session state and track user behavior.

How to mitigate attacks on regular cookies

To mitigate attacks on regular cookies, developers should implement the following best practices:

Sanitize user input: Web applications should always validate and sanitize user input to prevent XSS attacks.
Use secure cookies: Cookies should be marked as "Secure" to ensure that they can only be transmitted over HTTPS, which helps prevent network-based attacks.
Use HTTP-only cookies: HTTP-only cookies cannot be accessed by client-side scripts, which makes them more secure against certain types of attacks like XSS.

HTTP-only cookies

HTTP-only cookies are cookies that are marked with the "HttpOnly" flag in the response headers when they are set. This flag indicates to the browser that the cookie cannot be accessed via client-side scripts like JavaScript, making it more secure against certain types of attacks like XSS.

Where are HTTP-only cookies stored?

HTTP-only cookies are stored in the same location as regular cookies, which is typically the browser's cookie storage. However, since HTTP-only cookies cannot be accessed by client-side scripts, they are not accessible via JavaScript or other client-side programming languages. Instead, they are only sent to the server with each HTTP request.

Common attacks on HTTP-only cookies

Even though HTTP-only cookies are not accessible to client-side scripts, they are still vulnerable to attacks that exploit vulnerabilities in the browser itself, such as XSS or CSRF attacks.

How do HTTP-only cookies work?

HTTP-only cookies work in the same way as regular cookies, but they are marked with the "HttpOnly" flag in the response headers when they are set. This flag indicates to the browser that the cookie cannot be accessed via client-side scripts like JavaScript, making it more secure against certain types of attacks like XSS.

How to mitigate attacks on HTTP-only cookies

To mitigate attacks on HTTP-only cookies, developers should implement the following best practices:

Use secure cookies: Cookies should be marked as "Secure" to ensure that they can only be transmitted over HTTPS, which helps prevent network-based attacks.
Use CSRF tokens: To prevent CSRF attacks, web applications should use CSRF tokens to ensure that requests can only be submitted by the user who originally submitted the form.
Limit cookie scope: Developers should limit the scope of cookies to the minimum necessary for session management and authentication, and avoid storing sensitive information like passwords or credit card details in cookies.
Implement proper access control: Web applications should implement proper access control to prevent unauthorized access to sensitive data or functionality.

In conclusion, both regular cookies and HTTP-only cookies are useful techniques for maintaining session state between HTTP requests. However, regular cookies can be vulnerable to client-side attacks like XSS and CSRF, while HTTP-only cookies are more secure against these types of attacks. Developers should use a combination of techniques like input validation, secure cookies, CSRF tokens, and proper access control to mitigate attacks on cookies and ensure the security of their web applications.

Concurrency and Parallelism: An Overview

Matheus Costa — Mon, 13 Feb 2023 14:57:28 +0000

Concurrency and parallelism are two important concepts in computer science that are often used interchangeably, but they have different meanings. Concurrency refers to the ability of a system to handle multiple tasks or processes at the same time, while parallelism refers to the ability of a system to run multiple tasks or processes simultaneously. While parallelism requires multiple processors or cores, concurrency can be achieved in a single-core system through the use of multiprogramming.

Single-core systems and multiprogramming

A single-core system is a computer system that has only one processing core. While such a system can only run one task at a time, it can appear to be running multiple tasks simultaneously through the use of multiprogramming. In multiprogramming, the operating system splits up the time available on the single core among multiple tasks, allowing each task to run for a short period of time. This makes it possible for a single-core system to handle multiple tasks at the same time, giving the illusion of concurrency.

An example of achieving this using the real world as example would be of a single parking space. Multiple cars can use it for an amount of time but not at the same time, a car has to leave for other one to use it. In JavaScript it is achieved with asynchronous programming and non-blocking I/O.

Context Switching

Context switching is the process of saving and restoring the state of a task or process when it is preempted or switched out by the operating system in favor of another task or process. In a single-core system, context switching plays an important role in enabling concurrency by allowing the operating system to switch between tasks or processes quickly and efficiently.

Older smartphones and basic mobile phones are often single-core systems, and they use context switching to manage multiple tasks. For example, when you switch from a game to a messaging app, the operating system saves the state of the game and switches to the messaging app.

How to achieve Parallelism

Parallelism can be achieved in a number of ways, including:

Multithreading: Multithreading involves dividing a task into smaller threads, which can be executed simultaneously by multiple processors or cores. This can be achieved through software techniques such as multithreading libraries or frameworks.
Multiprocessing: Multiprocessing involves executing multiple tasks simultaneously using multiple processors or cores. This can be achieved by using a multiprocessing operating system, which allows multiple processes to run simultaneously.
Cluster Computing: Cluster computing involves connecting multiple computers together to form a single, more powerful system. Each computer in a cluster can be used to execute different parts of a task in parallel, improving performance and scalability.
GPU Computing: Graphics Processing Units (GPUs) are specialized processors designed for performing graphical operations. GPUs can be used to execute tasks in parallel, improving performance and enabling the processing of complex computations.

Communication between threads

Threads can communicate with each other using a variety of methods, including shared memory, message passing, and semaphores. In shared memory, threads can access the same memory location, allowing them to exchange information by reading and writing to the same memory location. Message passing involves sending messages between threads, allowing them to exchange information without accessing the same memory location. Semaphores are a synchronization primitive used to manage access to shared resources, allowing threads to signal each other when a resource is available or when a resource has been acquired.

Mutexes

A mutex (short for "mutual exclusion") is a synchronization primitive used to protect shared resources from simultaneous access by multiple threads. A mutex allows only one thread to access the shared resource at a time, ensuring that the resource remains in a consistent state. Mutexes are often used to prevent race conditions, which can occur when two or more threads attempt to access the same shared resource simultaneously.

When multiple processes or threads want to print to a shared printer, a mutex can be used to ensure that only one process or thread can access the printer at a time. This ensures that the print jobs are printed in the order they were submitted, and prevents overlapping or garbled print output.

Deadlocks

A deadlock is a situation in which two or more threads are blocked, waiting for each other to release a resource. Deadlocks can occur when two or more threads attempt to access the same shared resource and each thread holds a lock on one resource while waiting for another resource to be released. This results in a situation where no thread can continue execution, as each thread is waiting for another thread to release a resource. To avoid deadlocks, it is important to implement proper synchronization primitives and to carefully manage the order in which threads access shared resources.

Security concerns in threaded systems

Threads can pose a security risk in some situations, particularly when they share memory. For example, consider a browser that uses threads to handle tabs. Each tab runs in a separate thread and shares the same memory, meaning that each tab has access to the information in other tabs. This can be a security risk, as one tab can access sensitive information in another tab, such as a password or other confidential information. To address this risk, it is important to implement proper security measures, such as memory protection, access control, and encryption, to protect sensitive information from being accessed by unauthorized threads.

In conclusion, concurrency and parallelism are important concepts in computer science, and they are widely used in many different applications. Understanding mutexes, deadlocks, and communication between threads is crucial for designing and implementing secure and reliable threaded systems. When working with threads, it is important to be aware of the security risks involved, and to implement proper security measures to protect sensitive information from being accessed by unauthorized threads.

ES Modules and CommonJS: An Overview

Matheus Costa — Fri, 03 Feb 2023 16:22:15 +0000

JavaScript has come a long way since its inception and has grown into one of the most widely used programming languages in the world. With the introduction of ECMAScript 6 (ES6) in 2015, a standardized module system was introduced in the form of ES modules.

CommonJS

CommonJS is an older module system for JavaScript that was designed for server-side JavaScript development with Node.js. It was later adopted by the front-end community as well (this way you don't need a gazillion script tags in your HTML). CommonJS modules work by using require statements to load dependencies, and module.exports statements to define the exports of a module.

Here's an example of using CommonJS modules:

// my-module.js
module.exports = {
  myValue: 42
};

// main.js
const myModule = require('./my-module.js');
console.log(myModule.myValue); // 42

ES Modules

ES modules are a standardized module system for JavaScript that was introduced in ES6. It provides a way to organize and reuse code in a modular and maintainable manner. ES modules allow developers to define exports (the values or functions they want to make available to other parts of their code), and import them into other parts of their code.

Here's an example of using ES modules:

// my-module.js
export const myValue = 42;

// main.js
import { myValue } from './my-module.js';
console.log(myValue); // 42

One of the main benefits of ES modules is that their import and export statements are designed to be statically analyzable, whereas CommonJS modules can be analyzed statically but require additional tooling to do so. This means that the import and export statements can be analyzed at build time, enabling tools like bundlers and compilers to optimize the code and generate smaller, more efficient bundles for production use.

ES modules also provide a way to specify the dependencies between different parts of your code, making it easier to understand and maintain your codebase. And since ES modules are natively supported in modern browsers and Node.js, there's no need for additional build tools or plugins to use them.

Advantages of ES Modules over CommonJS

Static Analysis: ES modules are designed to be statically analyzable, while CommonJS modules are not. This means that the import and export statements can be analyzed at build time, enabling tools to optimize the code and generate smaller, more efficient bundles.
Native Support in Browsers: ES modules are natively supported in modern browsers, while CommonJS modules are not. This means that there's no need for additional build tools or plugins to use ES modules in the browser.
Better Performance: ES modules are designed to be loaded statically, while CommonJS modules are mainly loaded dynamically and synchronously. This can lead to slower performance and a blocking of the main thread. Static analysis refers to the process of analyzing code without executing it, and dynamic imports introduce runtime behavior into a module system. This means that the exact module that will be imported cannot be determined until the code is executed, making it difficult to analyze the module dependencies and relationships ahead of time (AOT).
Improved Code Organization: ES modules provide a way to specify the dependencies between different parts of your code, making it easier to understand and maintain your codebase.

In conclusion, ES modules provide a powerful and flexible way to organize and reuse code in JavaScript, making it easier to build and maintain complex applications. With its advantages over CommonJS, ES modules are now the recommended way to organize and reuse code in JavaScript, and are widely adopted in the JavaScript community.

JavaScript Closures: Understanding the Power Behind the Scenes 🧐

Matheus Costa — Wed, 01 Feb 2023 20:56:23 +0000

Closures are one of the most powerful features of JavaScript, but they can also be a source of confusion for many developers. In a nutshell, a closure is a function that remembers values in the enclosing scope, even after the parent function has closed.

This allows us to create functions that have a private scope, and to maintain state and encapsulation in our code. Closures have some pretty neat use cases such as implementing private variables and methods, event handling, async operations. They're also fundamental to functional programming, used for implementing higher-order functions, currying and can also be used for performance optimization techniques such as memoization.

Creating OOP with closures:

function createPerson(name, age) {
  let person = { name, age };

  return {
    getName: function() {
      return person.name;
    },
    getAge: function() {
      return person.age;
    },
    setName: function(newName) {
      person.name = newName;
    },
    setAge: function(newAge) {
      person.age = newAge;
    }
  };
}

const person = createPerson("John Doe", 30);
console.log(person.getName()); // John Doe
console.log(person.getAge()); // 30
person.setName("Jane Doe");
person.setAge(32);
console.log(person.getName()); // Jane Doe
console.log(person.getAge()); // 32

In this example, we use a closure to create a createPerson function that returns an object with private state (the person object) and public methods for accessing and modifying that state (getName, getAge, setName, and setAge). This allows us to create objects with a defined interface and private state, just like in traditional OOP.

Closures provide a powerful and flexible way to implement many things in JavaScript, and they are widely used in many libraries and frameworks. If you're not already familiar with closures, I highly recommend taking the time to learn and understand this important concept. 💡

Ultimate guide to master JavaScript's reduce functions

Matheus Costa — Wed, 01 Feb 2023 13:13:28 +0000

The reduce function in JavaScript is a powerful tool for transforming an array of values into a single value. It is a higher-order function, which means that it takes one or more functions as arguments and returns a new function. In this article, we will cover the basics of how to use the reduce function and provide some examples to help you get started.

What is the reduce function and how does it work?

The reduce function is a method that can be called on an array object in JavaScript. It takes two arguments: a callback function and an optional initial value. The callback function is called on each element in the array, starting with the first element and continuing until all elements have been processed. The result of each call to the callback function is used as the input to the next call, and the final result of the last call is returned by the reduce function.

The initial value is an optional argument that can be used to set the starting value for the first call to the callback function. If an initial value is not provided, the first call to the callback function will be made with the first two elements in the array.

Cool right? Now let's see how to actually use it:

To use the reduce function, you must provide a callback function that takes two arguments: the accumulator and the current value. The accumulator is the result of the previous call to the callback function and the current value is the value of the current element in the array. The callback function should return a new value that will be used as the accumulator in the next call to the callback function.

Here is a simple example of how to use the reduce function to sum the elements in an array:

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum); // 15

In this example, the initial value is set to 0 and the callback function adds the current value to the accumulator. The result of each call to the callback function is used as the input to the next call, and the final result of the last call is returned by the reduce function.

More examples of the reduce function:

Finding the maximum value in an array:

const numbers = [1, 2, 3, 4, 5];

const max = numbers.reduce((acc, curr) => acc > curr ? acc : curr);

console.log(max); // 5

Counting the frequency of elements in an array:

const words = ['apple', 'banana', 'apple', 'cherry'];

const frequency = words.reduce((acc, curr) => {
  acc[curr] = (acc[curr] || 0) + 1;
  return acc;
}, {});

console.log(frequency); // { apple: 2, banana: 1, cherry: 1 }

Flattening an array of arrays:

const arrays = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const flattened = arrays.reduce((acc, curr) => acc.concat(curr), []);

console.log(flattened); // [1, 2, 3, 4, 5, 6, 7, 8, 9

Transforming an array of objects into a hashmap:

const users = [{ id: 143, name: 'Matheus' }, { id: 150, name: 'Lucas' }, { id: 181, name: 'Victor' }]

const usersHashMap = users.reduce((users, currentUser) => {
  const { id, ...rest } = currentUser;

  users[id] = rest

  return users
}, {})

console.log(usersHashMap)

/* {
    "143": {
        "name": "Matheus"
    },
    "150": {
        "name": "Lucas"
    },
    "181": {
        "name": "Victor"
    }
} */

BONUS: Typescript example of a dynamically created object with type inference from the input to the output

const usersRouter = {
    "getUser": "/users/get"
}

const createApi = <T extends {[key: string]: string}>(router: T) => {
    return Object.entries(router).reduce((api, [method, endpoint]: [keyof T, string]) => {
        api[method] = () => fetch(endpoint)

        return api
    }, {} as Record<keyof T, () => Promise<any>>)
}

const usersApi = createApi(usersRouter)

const result = usersApi.getUser() // You get autocomplete on the dynamic API methods

Final considerations

The reduce function is a powerful weapon that we can use to transform data with more freedom. With it, we can achieve the same results as map or filter but with more control to solve a lot of other problems. A reminder that reduce is a higher-order function, not exclusive to the JavaScript language. Let me know if you have any questions!

Ultimate guide to master JavaScript's reduce function

Matheus Costa — Wed, 01 Feb 2023 03:26:38 +0000

What is the reduce function and how does it work?

Cool right? Now let's see how to actually use it:

Here is a simple example of how to use the reduce function to sum the elements in an array:

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum); // 15

More examples of the reduce function:

Finding the maximum value in an array:

const numbers = [1, 2, 3, 4, 5];

const max = numbers.reduce((acc, curr) => acc > curr ? acc : curr);

console.log(max); // 5

Counting the frequency of elements in an array:

const words = ['apple', 'banana', 'apple', 'cherry'];

const frequency = words.reduce((acc, curr) => {
  acc[curr] = (acc[curr] || 0) + 1;
  return acc;
}, {});

console.log(frequency); // { apple: 2, banana: 1, cherry: 1 }

Flattening an array of arrays:

const arrays = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const flattened = arrays.reduce((acc, curr) => acc.concat(curr), []);

console.log(flattened); // [1, 2, 3, 4, 5, 6, 7, 8, 9

Transforming an array of objects into a hashmap:

const users = [{ id: 143, name: 'Matheus' }, { id: 150, name: 'Lucas' }, { id: 181, name: 'Victor' }]

const usersHashMap = users.reduce((users, currentUser) => {
  const { id, ...rest } = currentUser;

  users[id] = rest

  return users
}, {})

console.log(usersHashMap)

/* {
    "143": {
        "name": "Matheus"
    },
    "150": {
        "name": "Lucas"
    },
    "181": {
        "name": "Victor"
    }
} */

BONUS: Typescript example of a dynamically created API with autocomplete:

const usersRouter = {
    "getUser": "/users/get"
}

const createApi = <T extends {[key: string]: string}>(router: T) => {
    return Object.entries(router).reduce((api, [method, endpoint]: [keyof T, string]) => {
        api[method] = () => fetch(endpoint)

        return api
    }, {} as Record<keyof T, () => Promise<any>>)
}

const usersApi = createApi(usersRouter)

const result = usersApi.getUser() // You get autocomplete on the dynamic API methods

Final considerations

The reduce function is a powerful weapon that we can use to transform data more freely. With it, we can achieve the same results as map or filter but with more control to solve a lot of other problems. Let me know if you have any questions!

Leetcode: Best Time to Buy and Sell Stock II in JavaScript

Matheus Costa — Thu, 07 Jul 2022 03:31:43 +0000

You are given an integer array prices where prices[i] is the price of a given stock on the ith day.

On each day, you may decide to buy and/or sell the stock. You can only hold at most one share of the stock at any time. However, you can buy it then immediately sell it on the same day.

Find and return the maximum profit you can achieve.

var maxProfit = function(prices) {
    const profit = prices.reduce((acc, curr, index) => {
        const next = prices[index+1]

        // if there isn't a next price you're already on the last day, so return the current profit
        if(!next) {
            return acc
        }

        // if the stock is higher on the next day it means you'll have a profit
        if(next > curr) {
            acc += next - curr
        }

        return acc
    }, 0)

    return profit
};

Simple JSON to Excel in JavaScript - Code Snippet

Matheus Costa — Wed, 22 Jun 2022 17:11:33 +0000

const ExcelJS = require('exceljs');

const createWorkbook = async (worksheetName, jsonData) => {
  const workbook = new ExcelJS.Workbook()
  const worksheet = workbook.addWorksheet(worksheetName)

  const keys = [...new Set(jsonData.flatMap(item => {
    return Object.keys(item)
  }))]

  const values = jsonData.map(item => {
    return keys.map(key => {
      if(!item[key]) {
        return ''
      }

      return item[key]
    })
  })

  worksheet.columns = keys.map(entry => {
    return {
      header: entry,
      key: entry,
      width: 24
    }
  })

  values.forEach(value => worksheet.addRow(value))

  return workbook
}

Or use my npm package json-to-excel

Lonely Integer - Hackerrank Challenge in Javascript

Matheus Costa — Wed, 22 Jun 2022 03:55:50 +0000

function lonelyinteger(a) {

    // destructure the first (and only) element, sort then reduce
    const [lonely] = a.sort((a, b) => a - b).reduce((acc, curr) => {      
        // here we'll start the reduce with an empty array and check
        // if the current integer is already on the array
        if(!acc.includes(curr)) {
            // if not, we'll add it
            acc.push(curr)
        } else {
            // if so, we'll remove the last element.
            // This way we'll be removing all duplicates
            acc.pop()
        }

        // return the array to the next iteration
        return acc
    }, [])

    return lonely
}