DEV Community: Douglas Modena

JavaScript beyond Simple Functions

Douglas Modena — Thu, 08 Feb 2024 21:34:12 +0000

Wether you are new to programming or not, functions are at the core of many programming languages, especially JavaScript. Simple functions encapsulate logic, execute actions according to parameters and allow for returning some result or not. But JavaScript enables you to expand the trivial use of functions with some features.

In this article we will explore how to go beyond the use of simple functions, understanding the concept and usage of higher order functions, closures and generators.

Simple Functions

A function is a "set of statements that perform a task or calculates a value"¹. We can see below an example of a function in JavaScript:

function multiply(numberA, numberB, numberC) {
    return numberA * numberB * numberC;
}

This function receives three parameters: numberA, numberB and numberC. It multiplies them and returns the result. This is the standard syntax for creating functions in JavaScript, but we could also write using the Arrow function syntax:

const multiply = (numberA, numberB, numberC) => numberA * numberB * numberC;

Arrow functions provide a cleaner syntax, which in some cases may improve readability. Just keep in mind that this syntax has some limitations².

Pure Functions and Side Effects

You may have already heard the term "Pure Function", but what is that exactly?

Due to the flexibility that functions provide, nothing would prevent us from creating the following function:

let someValue = 7;

function sum(a, b) {
    someValue = a;
    return a + b;
}

By looking at the function name, you would expect it to return the sum of a and b, but it is also changing a value from a variable that was not passed as parameter. We refer to this as a side effect of the function.

In order to be considered pure³, a function must comply with the following rules:

Given the same inputs, the function must always return the same output;
The function must not have any side effects.

We've already seen an example of a pure function, the one used to multiply three values. That function does not act on anything outside of it's scope and always returns the same values for the same input (for example, given the values 1, 2, and 3, it will always return 6).

It is easier to reason about and debug pure functions, but sometimes we actually want to have impure functions, such as one that returns a different value every time it is called, as we will see later in the article.

Higher order functions

Functions may receive different types of parameters. In the examples we've seen so far, we are always passing numbers as parameters. But functions can receive several other types, such as strings, arrays, booleans, objects and even functions.

You read that right: you can pass a function as a parameter to another function. Let's see how that is done:

function add2(number) {
    return number + 2;
}

function subtract2(number) {
    return number - 2;
}

function calculate(a, b, fn) {
    let c = a + b;
    return fn(c);
}

calculate(3, 4, add2); // 9
calculate(3, 4, subtract2); // 5

The add2 function simply adds 2 to any number it receives, while the subtract2 subtracts 2 from its parameter.

The calculate function does 2 things: first it sums the values of a and b. Then the result of this sum (c) is passed to the function it receives as fn, to be returned at the end. This provides the flexibility of performing different types of calculations according to the provided function.

After the function definitions we execute calculate twice, with the same numbers: 3 and 4. The first time we are passing the add2 function as parameter, and the result is 3 + 4 = 7 => 7 + 2 = 9, therefore it returns 9.

The second time we pass the subtract2 function as parameter, and the result is 3 + 4 = 7 => 7 - 2 = 5, therefore it returns 5.

A function that receives another function as parameter is called a Higher Order Function⁴, and it is a very useful feature of JavaScript. One popular higher order function in JavaScript is the sort() function.

const users = [
    { id: 1, age: 21, name: 'John Doe' },
    { id: 2, age: 26, name: 'Mark Johnson' },
    { id: 3, age: 19, name: 'Jack Smith' },
    { id: 4, age: 25, name: 'Mary Doe' },
    { id: 5, age: 30, name: 'Abigail David' },
    { id: 6, age: 29, name: 'Stuart Fox' }
];

const compareByAge = (a, b) => {
    if (a.age < b.age)
        return -1;

    if (a.age > b.age)
        return 1;

    return 0;
}

const compareByLastName = (a, b) => {
    const lastNameA = a.name.split(' ')[1];
    const lastNameB = b.name.split(' ')[1];

    return lastNameA.localeCompare(lastNameB);
}

users.sort((a, b) => a.id > b.id ? -1 : 1); // users ordered by descending id
users.sort(compareByAge); // users ordered by age 
users.sort(compareByLastName); // users ordered by last name

The Array.prototype.sort() function is a higher order function that can have a comparer function passed as parameter⁵. It can sort an array in different ways, depending on the function it receives. In our example, the first time we called sort() we passed a simple arrow function to sort the items by id in descending order. The second time we passed a function that compares the ages, and sorts by age in ascending order. The third time we compared last names, using the built-in string function localCompare()⁶.

Closures

Functions have scopes for accessing variables. In one of our examples, we were able to change a value that was defined outside of our function. Closures follow the same idea, which means that it provides access to variables within its scope.

According to MDN, a closure is "the combination of a function and the lexical environment within which that function was declared"⁷. Let's see how we could make use of a Closure with an example.

function sumAllMaker() {
    let total = 0;

    function sumAll(a, b) {
        total += (a + b);
        return total;
    }

    return sumAll;
}

const totalSum = sumAllMaker();

totalSum(1, 2); // 3
totalSum(1, 2); // 6
totalSum(3, 1); // 10

To understand what is going on with our example, let's start by looking at the inner function, called sumAll(). This function receives 2 parameters, and sums them. The result is then aggregated to total, which is a variable outside of sumAll(). The variable was declared in the outer function, but just like we could previously access global variables, here we have access to variables in the outer function. So, subsequent calls to this function will always update the value stored in total.

Now let's look at the outer function: sumAllMaker(). It's starts by assigning 0 to our variable total. Then it defines the function sumAll() which is where the logic to update the total resides, and at the end it returns a reference to the function sumAll. That is important because now we can declare a variable, and by assigning sumAllMaker() to it we get access to the sumAll function.

In other words, now that we declared const totalSum = sumAllMaker(), calling totalSum() is the same as calling the sumAll() function.

Finally we call the function 3 times. Notice that the first time we call it with the values 1 and 2, it returns 3. The second time we call it with the same values, it returns 6. That is because the total is being kept and updated every time we call the function.

That is our closure in action! We called it once more, and it returned 10. Any subsequent calls will continue to update total and return it appropriately. Notice that this closure cannot be considered a pure function, because calling the same function twice with the same parameters return different results.

Generator Functions

Imagine that you are creating objects and you want each of them to have a different id. You don't want to manually assign ids, instead you would like to create a function to generate them.

One way to solve it would be to create a random⁸ number generator.

function getRandomInteger(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

getRandomInteger(100, 999); // 926
getRandomInteger(100, 999); // 508

Just as an exercise, would you be able to explain wether getRandomInteger() is a pure function, and why?

Using this function would not work for our scenario because nothing guarantees that the function would return unique numbers. At some point I could get the same id again, since it's random, there is no control on which number is returned.

As we've seen previously, we could use a closure to solve that.

function idMaker() {
    let id = 100;
    return function getId() { return ++id; }
}

const getId = idMaker();
getId(); // 101
getId(); // 102
getId(); // 103

That's awesome! Now we know how to use a closure to generate ids. But there is another way to achieve this, by using a generator.

A generator function uses a special notation, including an asterisk after the function keyword: function*⁹. This type of function returns an object that can be iterated upon. Think of it as a function that can be paused and resumed. Within the function, the yield statement is what "pauses" the function, returning some value. Subsequent calls to the generator will resume from the last yield until the next one, and so on.

Let's see an example using a simple generator that returns the vowels.

function* generateVowels() {
    yield 'a';
    yield 'e';
    yield 'i';
    yield 'o';
    yield 'u';
}

const vowels = generateVowels();
vowels.next().value; // 'a'
vowels.next().value; // 'e'
vowels.next().value; // 'i'
vowels.next().value; // 'o'
vowels.next().value; // 'u'
vowels.next().value; // undefined

As you can see, every time we call the next() function and get the value, a subsequent yield is executed, until the iterator completes. After that, any further execution returns undefined.

Considering what we've seen so far, would you be able to create a generator that returns ids from 101 until 999? If you feel like it, pause reading and go try it for yourself! Otherwise, the answer follows below.

function* generateIds() {
    let id = 100;
    while (id < 999) { yield ++id; }
}

const ids = generateIds();
ids.next().value; // 101
ids.next().value; // 102
ids.next().value; // 103

Conclusion

JavaScript is a powerful language, and it provides flexible ways of working with functions. Try to find opportunities in your routine to integrate some of these options, and go beyond the use of simple functions.

References

Difference between JOIN and WHERE clauses in SQL

Douglas Modena — Thu, 24 Aug 2023 00:00:40 +0000

In SQL, JOIN is used to link two or more tables together in a single result set, and the WHERE clause is used to filter the results based on some criteria. That seems simple, but do we really understand how they affect our queries?

In order to take a deeper look at it, we'll create a simple database as an example. And the best example I can think of now is pizza! 🍕

The database structure

Our Pizza Shop database has 2 main tables: customers and pizzas. The only other table is orders, which connects the other two.

The contents of the three tables follow below. If you'd like, you can create the same database on your end, and verify that you get the same results.



customers        pizzas                          orders
==============   =============================   ===================================
id | name        id | flavor           | price   date       | customer_id | pizza_id
-- | ---------   -- | ---------------- | -----   ---------- | ----------- | --------
1  | Beatrice    1  | Americana        | 7.10    2023-03-08 | 6           | 6
2  | Enrico      2  | Caprese          | 7.00    2023-03-15 | 3           | 7
3  | Francesco   3  | Funghi           | 7.80    2023-03-22 | 1           | 4
4  | Giovanni    4  | Margherita       | 5.70    2023-04-12 | 2           | 4
5  | Giuseppe    5  | Napoletana       | 5.80    2023-04-21 | 2           | 7
6  | Maria       6  | Nutella          | 6.90    2023-05-08 | 7           | 1
7  | Nina        7  | Prosciutto       | 7.90    2023-05-09 | 2           | 4
                 8  | Quattro Formaggi | 7.00    2023-05-15 | 3           | 4
                 9  | Tonno            | 7.70    2023-06-03 | 1           | 9
                 10 | Verdure          | 7.00    2023-06-10 | 2           | 8
                                                 2023-06-14 | 7           | 6
                                                 2023-06-22 | 7           | 8
                                                 2023-06-26 | 3           | 10

Filtering results with WHERE

Let's start with the simpler, and dare I say, one of the most common keywords in SQL: WHERE.

You could select all Customers with a simple query:

SELECT * FROM shop.customers



id | name
-- | ---------
1  | Beatrice
2  | Enrico
3  | Francesco
4  | Giovanni
5  | Giuseppe
6  | Maria
7  | Nina

But if you only want to see the customers starting with the letter G, you could add this condition and filter the results:

SELECT * FROM shop.customers WHERE name LIKE 'G%'



id | name
-- | --------
4  | Giovanni
5  | Giuseppe

You can have all kinds of conditions in a WHERE clause, for example comparing strings (like we did for the name), dates (WHERE birthday > '1989-01-01'), boolean (WHERE is_premium IS FALSE), number (WHERE price < 5.50), and these are just a few examples.

The WHERE clause can be used not only with SELECT statements. Actually you must use it with DELETE statements - unless your intent is to wipe out all the data from a table, but even then, you're better off using TRUNCATE instead of DELETE. So, don't forget to use WHERE in your DELETE statements.

Linking tables with JOIN

There are several types of JOINs, but let's look at the most common ones: INNER JOIN, LEFT JOIN and RIGHT JOIN.

Let's represent our tables with circles. Circle A represents our customers, B represents our pizzas, and the intersection represents customers who actually bought pizzas, from our orders.

To view all values from A, we simply select from our customers table:

SELECT * FROM shop.customers

Similarly, we can retrieve B by selecting from pizzas:

SELECT * FROM shop.pizzas

Now to the JOINs.

INNER JOIN

If I want to see all customers who ordered pizzas, I could do so using an INNER JOIN. Notice: if I only use JOIN in my query, INNER JOIN is implied.



SELECT DISTINCT c.id, c."name"
FROM shop.customers c
JOIN shop.orders o ON c.id = o.customer_id
ORDER BY c."name"

Similarly I could view all pizzas that were ever ordered:



SELECT DISTINCT p.id, p.flavor, p.price
FROM shop.pizzas p
JOIN shop.orders o ON p.id = o.pizza_id
ORDER BY p.flavor

These 2 can be represented by the intersection between the circles.

LEFT JOIN

To view how many pizzas each customer ordered, I could COUNT the number of orders for each customer:



SELECT c.id, c."name", COUNT(o.customer_id) AS pizzas_ordered
FROM shop.customers c
JOIN shop.orders o ON c.id = o.customer_id
GROUP BY c.id, c."name"
ORDER BY c."name"

Running this query returns the following result:



id | name      | pizzas_ordered
-- | --------- | --------------
1  | Beatrice  | 2
2  | Enrico    | 4
3  | Francesco | 3
6  | Maria     | 1
7  | Nina      | 3

As you can see, only 5 rows were returned, but we know we have 7 customers. What happened? Well, the other 2 customers have not ordered any pizzas yet, and since we're using INNER JOIN in our query, they are not returned.

If we want to see all customers, including those who haven't ordered yet, we just have to replace the INNER JOIN in our query with LEFT JOIN:



SELECT c.id, c."name", COUNT(o.customer_id) AS pizzas_ordered
FROM shop.customers c LEFT JOIN shop.orders o ON c.id = o.customer_id
GROUP BY c.id, c."name"
ORDER BY c."name"

LEFT JOIN returns all rows from the table on the LEFT, even if they don't match any records on the table from the right. I left the two tables on the same line of the query to better show which table is on the left of the JOIN and which is on the right.

We can represent the results with the A and B circles, resulting with the full set of A, including the intersection between A and B.

Now we get the results we were expecting:



id | name      | pizzas_ordered
-- | --------- | --------------
1  | Beatrice  | 2
2  | Enrico    | 4
3  | Francesco | 3
4  | Giovanni  | 0
5  | Giuseppe  | 0
6  | Maria     | 1
7  | Nina      | 3

RIGHT JOIN

Works just like the LEFT JOIN, but brings all records from the table on the RIGHT, even if they don't match any records on the table from the LEFT. We could rewrite the same query to use RIGHT JOIN by just changing positions:



SELECT c.id, c."name", COUNT(o.customer_id) AS pizzas_ordered
FROM shop.orders o RIGHT JOIN shop.customers c ON o.customer_id = c.id
GROUP BY c.id, c."name"
ORDER BY c."name"



id | name      | pizzas_ordered
-- | --------- | --------------
1  | Beatrice  | 2
2  | Enrico    | 4
3  | Francesco | 3
4  | Giovanni  | 0
5  | Giuseppe  | 0
6  | Maria     | 1
7  | Nina      | 3

Just like the LEFT JOIN, this can be represented with the A and B circles, this time with the full set of B, and the intersection between A and B.

Let's see another example. The following query will return how many pizzas of each flavor were sold, including the flavors that were not sold at all:



SELECT p.id, p.flavor, COUNT(o.pizza_id) AS pizzas_ordered
FROM shop.orders o
RIGHT JOIN shop.pizzas p ON o.pizza_id = p.id
GROUP BY p.id, p.flavor
ORDER BY p.flavor



id | flavor           | pizzas_ordered
-- | ---------------- | --------------
1  | Americana        | 1
2  | Caprese          | 0
3  | Funghi           | 0
4  | Margherita       | 4
5  | Napoletana       | 0
6  | Nutella          | 2
7  | Prosciutto       | 2
8  | Quattro Formaggi | 2
9  | Tonno            | 1
10 | Verdure          | 1

The result shows that Margherita was the most ordered flavor, while Caprese, Funghi and Napoletana were not ordered at all.

Combining JOIN and WHERE

This is where it could get tricky. If we're not attentive, we could end up writing redundant queries or even wrong queries according to the result we're expecting.

Let's say we're trying to retrieve the customers who bought pizzas, ordering by the amount of pizzas per customer.



SELECT c.id, c."name", COUNT(o.customer_id) AS pizzas_ordered
FROM shop.customers c
JOIN shop.orders o ON c.id = o.customer_id
GROUP BY c.id, c."name"
HAVING COUNT(o.customer_id) > 0
ORDER BY COUNT(o.customer_id)



id | name      | pizzas_ordered
-- | --------- | --------------
6  | Maria     | 1
1  | Beatrice  | 2
3  | Francesco | 3
7  | Nina      | 3
2  | Enrico    | 4

In this query we are using the keyword HAVING instead of WHERE since we're dealing with an aggregate function. You can think of HAVING as the WHERE clause used for columns that use functions such as COUNT, SUM, etc.

The query above brings the correct results, but we don't actually need the HAVING there. Why not? Well, we're already using a JOIN (INNER JOIN), which only returns results when there is a match between the 2 tables, hence no customers without orders will ever be returned. That's why the HAVING clause is redundant, and can be removed.



SELECT c.id, c."name", COUNT(o.customer_id) AS pizzas_ordered
FROM shop.customers c
JOIN shop.orders o ON c.id = o.customer_id
GROUP BY c.id, c."name"
ORDER BY COUNT(o.customer_id)

This query is shorter and returns the exact same result.



id | name      | pizzas_ordered
-- | --------- | --------------
6  | Maria     | 1
1  | Beatrice  | 2
3  | Francesco | 3
7  | Nina      | 3
2  | Enrico    | 4

Now let's say we're creating a report and we want to see how much money we made from the orders of each flavor of pizza during the month of May.



SELECT p.id, p.flavor, COUNT(o.pizza_id) * p.price AS total
FROM shop.pizzas p
JOIN shop.orders o ON p.id = o.pizza_id
WHERE o."date" BETWEEN '2023-05-01' AND '2023-05-31'
GROUP BY p.id, p.flavor
ORDER BY p.flavor



id | flavor     | total
-- | ---------- | -----
1  | Americana  |  7.10
4  | Margherita | 11.40

We can see from the result that during May we made 7.10 by selling Americana pizzas and 11.40 from Margherita pizzas. But how about the other flavors?

Well, we're using INNER JOIN in our query, so we're not bringing all flavors of pizza. Let's replace that with LEFT JOIN.



SELECT p.id, p.flavor, COUNT(o.pizza_id) * p.price AS total
FROM shop.pizzas p
LEFT JOIN shop.orders o ON p.id = o.pizza_id
WHERE o."date" BETWEEN '2023-05-01' AND '2023-05-31'
GROUP BY p.id, p.flavor
ORDER BY p.flavor



id | flavor     | total
-- | ---------- | -----
1  | Americana  |  7.10
4  | Margherita | 11.40

We changed our JOIN, but still got the same result. Why was that? This is the reason for writing this article, understanding how our JOINs and WHERE clauses affect our result.

In our query we used LEFT JOIN, so we should be getting all pizzas, including those that were not sold. Considering circle A as our customers table, B as pizzas and the intersection as the orders. We should be getting something like this:

And we are indeed getting it, we could verify that by removing the WHERE clause:



SELECT p.id, p.flavor, COUNT(o.pizza_id) * p.price AS total
FROM shop.pizzas p
LEFT JOIN shop.orders o ON p.id = o.pizza_id
GROUP BY p.id, p.flavor
ORDER BY p.flavor



id | flavor           | total
-- | ---------------- | -----
1  | Americana        |  7.10
2  | Caprese          |  0.00
3  | Funghi           |  0.00
4  | Margherita       | 22.80
5  | Napoletana       |  0.00
6  | Nutella          | 13.80
7  | Prosciutto       | 15.80
8  | Quattro Formaggi | 14.00
9  | Tonno            |  7.70
10 | Verdure          |  7.00

We saw that we're retrieving all the pizzas, but our WHERE clause is filtering out the results, and this is exactly the purpose of the WHERE clause.

Keep this in mind: in order to bring the correct results, we need to understand how to link our tables with the correct JOIN (if we should use LEFT, RIGHT, INNER, or other types of JOINs), and after that, how we're filtering the results with our WHERE clause.

Solution to this problem

Whenever we face a situation in which we believe the query is not returning the expected result, my tip is to remove the WHERE clauses, and review the JOINs. Check to see if you're linking the tables correctly. After that, think of how you could be limiting your results to your needs.

One way to solve the pizza problem is to not use WHERE at all. Instead we can add the condition for the date in our JOIN:



SELECT p.id, p.flavor, COUNT(o.pizza_id) * p.price AS total
FROM shop.pizzas p
LEFT JOIN shop.orders o ON p.id = o.pizza_id
    AND o."date" BETWEEN '2023-05-01' AND '2023-05-31'
GROUP BY p.id, p.flavor
ORDER BY p.flavor



id | flavor           | total
-- | ---------------- | -----
1  | Americana        |  7.10
2  | Caprese          |  0.00
3  | Funghi           |  0.00
4  | Margherita       | 11.40
5  | Napoletana       |  0.00
6  | Nutella          |  0.00
7  | Prosciutto       |  0.00
8  | Quattro Formaggi |  0.00
9  | Tonno            |  0.00
10 | Verdure          |  0.00

With this new query we're limiting our results to the records from May, but we're still returning all pizzas even for those flavors without orders, which is the expected result.

Review your queries: verify you are linking your tables with the correct JOINs and filtering the results with appropriate WHERE clauses. Keep that in mind, and you'll spend less time fixing your queries, and more time appreciating good pizza! 🍕

Hacktoberfest 2020

Douglas Modena — Tue, 10 Nov 2020 02:00:25 +0000

Hi everyone! This was my second year participating in Hacktoberfest. Last year I got great support from a local dev community, and I was able to contribute to some open source projects.

Hacktoberfest helped me understand better how to contribute to open source software, and help the community.

This year I was not only able to contribute to some projects, but also help people who were willing to contribute to one of my projects. It was fun, and a satisfying experience. It even helped me understand better the role of a project maintainer.

I'm grateful for dev.to, DigitalOcean and Intel for organizing this amazing event!