DEV Community: Anthony Petrides

JS: Destructuring

Anthony Petrides — Fri, 02 Jul 2021 08:18:30 +0000

A deep dive into the powerful world of javascript destructuring

Jump to:

Array Destructuring

Combining 2 Arrays

Destructuring with Functions

Destructuring with Default Values

Object Destructuring

Array Destructuring

Take the arrays called alphabet and numbers below.

const alphabet = ['A', 'B', 'C', 'D', 'E', 'F']
const numbers = [1, 2, 3, 4, 5, 6]

To destructure alphabet, you simply set what you want to destructure equal to the name of the array as follows:

const [a, b, c] = alphabet

Note that we wrap a, b and c in square brackets purely because we are destructuring an array. Had we been destructuring an object, they'd be wrapped in curly braces { }. We'll touch more on this later on.
For now, we have destructured the first 3 elements of the alphabet array, into variables called a, b and c. To prove this, if we run the below:

console.log(a);
console.log(b);
console.log(c);

We would get back in our development console:

A
B
C

What if I want to skip element?

If you wanted to, for example, skip the second element, you could simply leave an empty comma , when destructuring per below:

const [a,, c] = alphabet

Now logging the following:

console.log(a);
console.log(b);
console.log(c);

Would return:

A
C

What if I want the rest of the array?

If you wanted to print the rest of the array while destructuring, because maybe you want to return the array without the first element for example, you can do this by combining the spread operator ...

const alphabet = ['A', 'B', 'C', 'D', 'E', 'F']
const [,b, ...restOfTheElements] = alphabet

So in the above example, we destructure the alphabet on the second line, skipping the first element (as marked by the empty comma ,) then we assign the second element's value to b, and then we use the spread operator (...) to say we want the rest of the elements in the array thereafter. You need to suffix the spread operator (...) with the name you'd like to give the rest of the array. Above we've simply called it 'restOfTheElements'.

Now, What does this look like?

console.log(b);
console.log(restOfTheElements);

Would return:

B
['C', 'D', 'E', 'F']

Combining 2 Arrays

You can also use the spread operator to combine 2 arrays together per the below example:

const combinedArray = [...alphabet, ...numbers]
console.log(combinedArray);

This would return:

['A', 'B', 'C', 'D', 'E', 'F', 1, 2, 3, 4, 5, 6]

Granted this isn't the most useful feature when it comes to arrays, given you could achieve the same with:

const combinedArray = alphabet.concat(numbers)

However, this will come in handy when we touch on combining 2 or more objects together later on.

Destructuring with Functions

Lets take the below example:

function addAndMultiply(a, b) {
    return [a+b, a*b];
}

const array = addAndMultiply(4, 2);

console.log(array) //returns [6, 8]

We can apply array destructuring here per below:

function addAndMultiply(a, b) {
    return [a+b, a*b];
}

const [sum, multiply] = addAndMultiply(4, 2);

console.log(sum) //returns 6
console.log(multiply) //returns 8

What we're saying here is that we are destructuring the return from addAndMultiply(4, 2) as two different variables - one called sum, and one called multiply. Again, we destructure with [ ] because the return of addAndMultiply(4, 2) is an array, and we destructure into variables 'sum' and 'multiply' in that order, because that is the order that are returned in within the 'addAndMultiply' function.

Destructuring with Default Values

We can also take the previous example and demonstrate destructuring with default values. For example:

function addAndMultiply(a, b) {
    return [a+b, a*b];
}

const [sum, multiply, subtract = 'Subtraction Default'] = addAndMultiply(4, 2);

console.log(sum) //returns 6
console.log(multiply) //returns 8
console.log(subtract) // returns 'Subtraction Default'

Object Destructuring

The true power of destructuring in Javascript

Take the two simply objects below, personOne and personTwo:

const personOne = {
    name: 'Naruto',
    age: 29,
    address: {
        city: 'Tokyo'
        country: 'Japan'
    }
}

const personTwo = {
    name: 'Sasuke',
    age: 28,
    address: {
        city: 'Osaka'
        country: 'Japan'
    }
}

If we want to get the name and age of personOne, we can use destructuring as follows:

const { name, age } = personOne

 console.log(name); //returns 'Naruto'
 console.log(age); //returns 29

Note that we wrap name and age in curly braces { } because we are destructuring an object.

And unlike array destructuring, which grabs elements in the array in sequential order, object destructuring matches by the key. I.e. name had to match name in the personOne object.

You can however rename the variable that you're destructuring if you so desire.

For example, we can destructure name from the object, but call it firstName instead as follows:

const { name: firstName, age } = personOne

console.log(firstName); //returns 'Naruto'
console.log(name); //returns nothing as we remapped the var

Defaults

We can also still use defaults in object destructuring. Lets take personTwo for example:

const personTwo = {
    name: 'Sasuke',
    age: 28,
    address: {
        city: 'Osaka'
        country: 'Japan'
    }
}

const { name: firstName, age, job = 'Shinobi' } = personTwo

console.log(firstName); //returns 'Sasuke'
console.log(age); //returns 28
console.log(job); //returns 'Shinobi'

Above we can see we've added a property called job to the destructuring, and although it doesn't exist in the personTwo object, it has a default value set so it does return the value.

Similarly, if we added job to the object, it's default value would be overridden as follows:

const personTwo = {
    name: 'Sasuke',
    age: 28,
    job: 'ninja',
    address: {
        city: 'Osaka'
        country: 'Japan'
    }
}

const { name: firstName, age, job = 'Shinobi' } = personTwo

console.log(firstName); //returns 'Sasuke'
console.log(age); //returns 28
console.log(job); //returns 'ninja'

You can even add defaults to renamed object variables too, per the below example:

const personTwo = {
    name: 'Sasuke',
    age: 28,
    job: 'ninja',
    address: {
        city: 'Osaka'
        country: 'Japan'
    }
}

const { name: firstName = 'Tony', age, job = 'Shinobi' } = personTwo

console.log(firstName); //returns 'Sasuke'

As you can see above, we have name remapped to firstName, and have then also given it a default value of 'Tony'. Meaning if the name property did not exist within the personTwo object, then console.log(firstName) would return the default 'Tony'.

Spreading

We can also use the spread operator here (just like we did with array destructuring) in order to get back the rest of the object. For example:

const personTwo = {
    name: 'Sasuke',
    age: 28,
    job: 'ninja',
    address: {
        city: 'Osaka'
        country: 'Japan'
    }
}

const { name: firstName = 'Tony', age, ...rest } = personTwo

console.log(firstName); //returns 'Sasuke'
console.log(age); //returns 28

console.log(rest); 
//returns { job: "ninja", address: {city: "Osaka", country: "Japan"}}

As you can see, we've spread the rest of the object after destructuring the age, and we've mapped it to a variable called 'rest'. So when we log 'rest', we get the remainder of the object.

Destructuring Nested Objects

We can also destructure nested objects.
Let's say we want to get only the city from personTwo. We can do this as follows:

const personTwo = {
    name: 'Sasuke',
    age: 28,
    job: 'ninja',
    address: {
        city: 'Osaka'
        country: 'Japan'
    }
}

const { name: firstName = 'Tony', address: { city } } = personTwo

console.log(city); //returns 'Osaka'

Combining Objects

We can also use destructuring to combine objects.

Below, we will create a personThree using parts of personOne and personTwo.

Note that personTwo has been shortened to just age and job for the purposes of this example.

const personOne = {
    name: 'Naruto',
    age: 29,
    address: {
        city: 'Tokyo'
        country: 'Japan'
    }
}

const personTwo = {
    age: 28,
    job: 'ninja',
}

const personThree = {...personOne, ...personTwo}

Take everything inside personOne ---> put it in an object called personThree
Take everything inside personTwo --> also put it in the same personThree object, but overwrite anything that was already in personOne.

What does this give you?

console.log(personThree); 

//returns
const personThree = {
    name: 'Naruto',
    age: 28,
    job: 'ninja',
    address: {
        city: 'Tokyo'
        country: 'Japan'
    }
}

As you can see, the result of personThree is a spread personOne, overridden with anything that was in personTwo when it was spread into the same object thereafter.

Object Destructuring Inside Function Arguments

Object destructuring inside of function arguments can be a powerful tool when it comes to code simplicity.

Take the below example which demonstrates passing personOne into a printPerson function, and printing some text that grabs particular attributes from the object, such as name and age in this example:

const personOne = {
    name: 'Naruto',
    age: 29,
    address: {
        city: 'Tokyo'
        country: 'Japan'
    }
}

const printPerson = (person) => {
    console.log('Name: ${person.name}. Age: ${person.age}.);
}

printPerson(personOne);
//returns
"Name: Naruto. Age: 29"

If we used object destructuring within the function argument, we could avoid having to repeatedly prefix the attributes we want to pluck out with person.

Using object destructuring, we can rewrite the function as follows:

const printPerson = ({ name, age }) => {
    console.log('Name: ${name}. Age: ${age}.);
}

printPerson(personOne);
//returns
"Name: Naruto. Age: 29"

As you can see, the above returns the exact same output.

What's happening exactly?

Well, as you can see we're passing in personOne to printPerson when we call the function. And in the argument of the printPerson function we're destructuring personOne saying all we want is the name and the age.

We can also add defaults to the destructured arguments as follows:

const personOne = {
    name: 'Naruto',
    age: 29,
    address: {
        city: 'Tokyo'
        country: 'Japan'
    }
}

const printPerson = ({ name, age, favouriteFood = 'Ramen'}) => {
    console.log('Name: ${name}. Age: ${age}. Favourite Food: ${favouriteFood}.);
}

printPerson(personOne);
//returns
"Name: Naruto. Age: 29. Favourite Food: Ramen."

Above you can see we've added a default for favouriteFood which currently does not exist in personOne so is being used. But if we added it to personOne then it would not use the default we've specified per below:

const personOne = {
    name: 'Naruto',
    age: 29,
    favouriteFood: 'Takoyaki'
    address: {
        city: 'Tokyo'
        country: 'Japan'
    }
}

const printPerson = ({ name, age, favouriteFood = 'Ramen'}) => {
    console.log('Name: ${name}. Age: ${age}. Favourite Food: ${favouriteFood}.);
}

printPerson(personOne);
//returns
"Name: Naruto. Age: 29. Favourite Food: Takoyaki."

This is arguable the single most useful section of object destructuring - specifically when using it in React projects where you'll find object destructuring is heavily used in function calls.

Thanks for sticking through to the end! :)

JS: Working with Arrays of Objects

Anthony Petrides — Fri, 02 Jul 2021 07:53:20 +0000

In this post, I'll run through an example of working with a simple array of objects.

The Data

Take the following data as the foundation of our example:

const data = [
  {
    origin: 'London',
    destination: 'Paris',
    departureTime: '10:15 AM',
    departureDate: '10 February 2021',
    price: 156.45
  },
  {
    origin: 'London',
    destination: 'Paris',
    departureTime: '12:15 AM',
    departureDate: '10 February 2021',
    price: 106.99
  },
  {
    origin: 'London',
    destination: 'Paris',
    departureTime: '15:15 AM',
    departureDate: '10 February 2021',
    price: 217
  }
];

What we call data here is a constant equal to an array of objects.

So what do we want to do with this data?

Let's say our task is to find the cheapest trip.
As such, lets set our end goal as requiring a function that will return:

"London to Paris, departing on the 10 February 2021 at 12:15AM for £106.99"

This is the cheapest trip from our small subset of data.

The Approach

First of all, let's break this down into manageable chunks.

Let's say that to begin with, we simply want to figure out the cheapest price.

const findCheapestTrip = (trips) => {

    // map prices into an array of prices
    const prices = trips.map(trip => {
        return trip.price
       });

    return  prices;
}

Above, we use the in-built array.map method to create a new array of only the prices.

What we are doing in practice (assuming that trips is data when we call the function later on), is we are saying that for every element (which we are calling trip) in the array (i.e. every object in the array in this case), return the value of the property price (trip.price). And by default, the array.map method returns a new array with said values.

Lets call our findCheapestTrip function below, passing in our data to see this in action:

console.log(findCheapestTrip(data));

What we get back when we run this is a new array of only the prices:

[ 156.45, 106.99, 217 ]

This now makes it very easy for us to identify the cheapest price, as we can simply spread the values in this array to Math.min() as follows:

const findCheapestTrip = (trips) => {

    // map prices into an array of prices
    const prices = trips.map(trip => {
        return trip.price
       });

    // find lowest price
    const cheapestPrice = Math.min(...prices);

    return  cheapestPrice;
}

console.log(findCheapestTrip(data));

With the above alteration, running this would now give us the cheapest price and return:

106.99

What are we missing here?

So far we've neatly managed to work out the cheapest price, but this isn't enough to print out our end goal string of:

London to Paris, departing on the 10 February 2021 at 12:15AM for £106.99.

Why?

Because we still need access to the other properties in the object that has the cheapest price. E.g. we need know the values of the origin, destination, departureTime etc... in order to form our final string.

What does this mean?

It means we don't actually want to find the cheapest price. What we really want is to find and store the entire object that holds the cheapest price. This will allow us to reach our end goal.

Was our work above wasted?

No, because our key identifier for getting the whole object will in fact be based on the object with the cheapest price. So let's run through our next steps.

We want to update our code to return the object in our array of objects which has the lowest price. We already have this stored in our cheapestPrice variable, so all we have to do is filter our data for it using JavaScript's built-in array method, filter()

const findCheapestTrip = (trips) => {

    // map prices into an array of prices
    const prices = trips.map(trip => {
        return trip.price
       });

    // find lowest price
    const cheapestPrice = Math.min(...prices);

    // finds the element in the array that has the lowest 
    // price and returns the whole object
    const cheapestTrip = trips.filter(trip => trip.price === cheapestPrice) 

 return cheapestTrip;
}

console.log(findCheapestTrip(data));

Above, we've introduced a new variable called cheapestTrip, and inside it we run the array filter() method on our data, saying we want the element in our array who's trip.price is equal to the lowest value (a value we already have from our cheapestPrice variable).
We update the return to return cheapestTrip instead of cheapestPrice, and what we now get is an array with only the object holding the cheapest price:

[
  {
    origin: 'London',
    destination: 'Paris',
    departureTime: '12:15 AM',
    departureDate: '10 February 2021',
    price: 106.99
  }
]

Side Note: You could get back multiple objects in the array if they have the same price.

With this our goal is practically complete, as we now have access to all the data we need to print our end goal of:

"London to Paris, departing on the 10 February 2021 at 12:15AM for £106.99"

This is something we can produce simply now using string interpolation by updating our return to:

return `${cheapestTrip[0].origin} to ${cheapestTrip[0].destination}, departing on the ${cheapestTrip[0].departureDate} at ${cheapestTrip[0].DepartureTime} for £${cheapestTrip[0].price}`;

(We use [0] before calling each property because don't forget, we're still working in an array, and on the assumption that we only have one object element in the array with the lowest price (per our data set).

Still though, this is quite an ugly return, and we are repeating cheapestTrip[0] far too much. We can avoid this using destructuring.

Our finished code will look as follows:

const findCheapestTrip = (trips) => {

 // map prices into an array of prices --> [ 156.45, 106.99, 217 ]
 const prices = trips.map(trip => {
 return trip.price
     });

 // find lowest price
 const cheapestPrice = Math.min(...prices);

 // finds the element in the array that has the lowest price and returns the whole object
 const cheapestTrip = trips.filter(trip => trip.price === cheapestPrice) 

 // destructure properties we need to avoid repetition in the return string
 const { origin, destination, departureDate, departureTime, price } = cheapestTrip[0]

 return `${origin} to ${destination}, departing on the ${departureDate} at ${departureTime} for £${price}`;
}

console.log(findCheapestTrip(data));

This finally returns our end goal of:

London to Paris, departing on the 10 February 2021 at 12:15 AM for £106.99

We're Done!

But what's wrong with this solution now???

Although our solution is perfectly acceptable with working with such a small subset of data, it would not be as performant as possible should we have a larger dataset.

Why?

Because we are looping through our data on 2 separate occasions.
Once using map() when getting our array of prices, and a second time using filter() when grabbing our cheapest trip object. As such, we're creating a complexity level of 2n.

So the question is, can we achieve the above in a single loop through our data?
YES!

Here's a full working equivalent solution using the same dataset as before:

const data = [
  {
 origin: 'London',
 destination: 'Paris',
 departureTime: '10:15 AM',
 departureDate: '10 February 2021',
 price: 156.45
  },
  {
 origin: 'London',
 destination: 'Paris',
 departureTime: '12:15 AM',
 departureDate: '10 February 2021',
 price: 106.99
  },
  {
 origin: 'London',
 destination: 'Paris',
 departureTime: '15:15 AM',
 departureDate: '10 February 2021',
 price: 217
  }
];

const findCheapestTripIn1Loop = (trips) => {
 let lowestPrice = Infinity;
 let cheapestTrip;

 for (let i = 0; i < trips.length; i++) {
 if (trips[i].price < lowestPrice) {
 lowestPrice = trips[i].price;
 cheapestTrip = trips[i];
    }
  }

 const { origin, destination, departureTime, departureDate, price } = cheapestTrip;
 return `${origin} to ${destination}, departing ${departureDate} at ${departureTime} - £${price}`;
}

console.log(findCheapestTripIn1Loop(data));

In this solution, we've renamed our function to findCheapestTripIn1Loop - and here we use a traditional for() loop to conduct our logic in single iteration of the dataset.

TS: Nullish Coelescing (The TS Ternary Shortcut)

Anthony Petrides — Fri, 02 Jul 2021 07:41:48 +0000

Nullish Coelescing in TypeScript is practically a shortcut for the ternary operator, achieved by using ?? between statements or values.

The double question marks work from left to right. Take the basic example below:

const value1 = undefined;
const value2 = 6;

const result = value1 ?? value2;

console.log(result); // returns 6

This reads as follows:

"If value1 is not null or undefined and has an actual value, then return that value. However, if value1 does not have a value, then return value2"

It's important to note that in the case of nullish coelescing, only null or undefined are being checked specifically. This should not be confused with checking for "truthyness" like the logical || operator would.

Take the below examples as a final explanation on this:

const b = "" ?? 42;
console.log(b); // returns ""

const c = false ?? 42;
console.log(c); // returns false

const d = NaN ?? 42;
console.log(d); // returns NaN

const e = -0 ?? 42;
console.log(e) // returns -0

JS: Array Methods

Anthony Petrides — Fri, 02 Jul 2021 07:28:12 +0000

This post reviews the many available methods for handling Arrays in ES6 - with easy to understand examples that I hope will act as a reference whenever you need one of these methods.

Jump to:

Find

Filter

Map

Reduce

Find()

The find method, simply put, allows you to grab the first occurrence of an element from an array that matches the search criteria you provide it.

Bit of long sentence, but lets explain in a small example:

const items = [
  { name: 'naruto', age: 20 },
  { name: 'sakura', age: 22 },
  { name: 'naruto', age: 40 }
]

const naruto = items.find((item) => {
// The search criteria
 return item.name === 'naruto'
});

console.log(naruto);
// { name: 'naruto', age: 20 }

Above, we have our items array, which is an array containing 3 elements, of which each is an object containing a name and age property. [object, object, object]

The example then creates a function called ‘naruto’ which is where we run the find() method.

The find() itself takes a function as a parameter, and this is used as the search criteria.

So what we’re saying is:

Take my items array, run find on it, and search through each item until you find the first occurrence where item.name is equal to ‘naruto’.

Hence when the function runs, we get a return of:

{ name: ‘naruto’, age: 20 }

Note that despite having 2 elements which have the name property equal to ‘naruto’, find() by it’s very nature only returns the first occurrence.

Filter()

The filter method is pretty much exactly the same as the find() method as described above. The key difference being that instead of only returning the first occurrence that matches your provided search criteria, it returns a new array with all matching elements.

Take the below example:

const filterItems = [
  { name: 'naruto', age: 20 },
  { name: 'sakura', age: 22 },
  { name: 'naruto', age: 40 }
]

const results = filterItems.filter((item, index) => {
 // The search criteria
 return item.name === 'naruto';
});

console.log(results);
// [ { name: 'naruto', age: 20 }, { name: 'naruto', age: 40 } ]

Just like, find(), we run through each element in the array and search given our criteria (which is the function we pass into the filter method as that's simply what filter() requires to work). We search for each match in the array, and then return a new array with all matching elements. Hence when we log results, we get:

[ { name: 'naruto', age: 20 }, { name: 'naruto', age: 40 } ]

Why did you also pass index in the filter() functions arguments?

This is just to demonstrate that filter, unlike find, can take an optional second parameter for the index number of the item in the array. This can be useful in many scenarios, though we do not make user of it in our above example.

Map()

Map is probably the most frequently used of the ES6 Array Methods, given its frequently used in React component creation to generate a collection of component elements from an array of data.

It's similar to filter() in that it takes in a function along with 2 parameters, item and index (these can be called whatever you like, but the order matters).

Unlike find and filter though, map() goes though each element in your array and maps custom return values to each array element, returning a customised element (per each element) into a new array.

Take the below example for a clearer picture:

const employees = [
  { name: 'kakashi', id: 1 },
  { name: 'naruto', id: 2 },
  { name: 'sakura', id: 3 },
]

const elements = employees.map((item, index) => {
 // return each item back into a new array
 return `<div>${item.id} - ${item.name}</div>`;
});

console.log(elements);
// [
//   '<div>1 - kakashi</div>',
//   '<div>2 - naruto</div>',
//   '<div>3 - sakura</div>'
// ]

Reduce

Reduce, unlike the previous array methods, is an aggregator function.

This means it takes each element in an array, applies some provided logic to them and returns a single final value as the result.

Take the simplest of examples below:

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

sumOfNnumbers = numbers.reduce((total, currentNumber) => {
 total = total + currentNumber;
 return total;
});

console.log(sumOfNnumbers);
// 15

I find the clearest way to understand Reduce is breaking down the above example into steps:

We have an array of numbers.

We run reduce on the array.

reduce() takes in a function as it's argument.

The function requires 2 arguments, usually something for the accumulative value to be stored (i.e. total), and another for the current element (i.e. currentNumber).

We then set total = total + current number and return the result, given us a single sum of each value in our array - hence returning 15.

TS: Documenting Functions

Anthony Petrides — Thu, 03 Jun 2021 08:45:04 +0000

A useful feature in TypeScript that I seemed to have glossed over in my learnings has been 'documentation comments'.

In short, they enable you document functions in a clean and simply way and is understood by modern code editors such as VS Code.

Take the below function to demonstrate:

/**
 * Adds 2 numbers together
 *
 * @param value1 - The first number
 * @param value2 - The second number
 * @returns Returns the sum of 2 numbers
 *
 */
const sumIt = (value1: number, value2: number): number => {
  return value1 + value2;
}

If you open this in VS Code as a .ts file, then hover over your function name, you get the following interation:

Similarly, if you simply hover over one of the function arguments, you get the documentation comment specific to that argument:

To close, I find this a pretty awesome feature for situations where you may have a particularly complex function, where some human readable and interactive comments can really help to self-document and reduce complexity.

JS: Array.Sort()

Anthony Petrides — Mon, 24 May 2021 07:38:44 +0000

Overview

One of the only array manipulation methods that always threw me was the sort() method.

I always found its syntax pretty confusing, given elements in the array shift left or right based on results from a calculation being positive or negative (or zero).

It might just be me, but I hope this post clears up any shared confusion on the matter through some simple and concise examples that you can always come back to use as a reference point if you memory is as short-lived as mine.

Important Sidenote:
It's important to note that Sort() mutates the original array.

The Basics

Sort() alone sorts arrays alphabetically, and numerical by default.

Things to note however is that it takes the first digit of numbers for the sort, paying no attention to the second digit unless it has to. Strings are also sorted by their first character.

const teams = ['Arsenal', 'Manchester Utd', 'Liverpool', 'Chelsea'];

teams.sort(); 
// ['Arsenal', 'Chelsea', 'Liverpool', 'Manchester Utd']
teams.reverse();
// ['Manchester Utd', 'Liverpool', 'Chelsea', 'Arsenal']


const numbers = [3, 23, 12];

numbers.sort(); // --> 12, 23, 3
numbers.reverse(); // --> 3, 23, 12

Some further caveats are that Strings are sorted with capital letters taking the highest sorting priority after numbers. This can be seen in mixed arrays such as the following:

const numbersAndStrings = ['Arsenal', 12, 'Chelsea', 10, 'arsenal', 32, 1, 'chelsea'];

numbersAndStrings.sort();
// --> [ 1, 10, 12, 32, 'Arsenal', 'Chelsea', 'arsenal', 'chelsea' ]

So, the basic rules are:

numbers first (digit by by digit)
capital letters next (char by char)
lowercase letters last (char by char)

Although these rules are clear, they don't really add up for real world use cases, because sorting digit by digit means 100 will be sorted before 25...

What if we want a truly descending sort?

The Compare Function

The answer to above's problem is passing in a function to the sort() method. This is generally called a Compare Function when it comes to the sort() method.

How does it work?

You pass in a function, with two arguments (a and b), followed by a calculation. The result of the that calculation must be a positive or negative value, or zero.

If the result is negative, a is sorted before b.
If the result is positive, b is sorted before a.
If the result is 0, nothing changes.

What does this look like?

Take the below example:

const numbersWithCompareAscending = [3, 23, 12];

numbersWithCompareAscending.sort((a, b) => {
 return a - b;
});

console.log(numbersWithCompareAscending);
// --> 3, 12, 23

sort() takes in a function with arguments 'a' and 'b', and calculates 'a - b'.

So it follows these steps:

step 1: a (which is 3) subtract b (which is 23) = -20 (negative result so a(3) stays on the left.
step 2: a(which is 23 now) subtract b (which is 12) = 11 (positive result so a(23) swaps positions with b(12).
step 3: our sorted array is now [3, 12, 23]

You can achieve a reverse (descending) sorting order simply by returning b - a instead of a - b.

React: Creating a Dropdown

Anthony Petrides — Fri, 14 May 2021 15:28:11 +0000

Intro

In this post we’ll cover creating a Dropdown in React, and we’ll cover the following key touchpoints that you’ll come across day to day when building one:

Open/Close the dropdown menu when button clicked
Close the dropdown menu when clicking anywhere else on the page.

What we’ll be using to achieve this

React Hooks { useState, useRef, useEffect }
Css Modules

Prerequisite

A clean create-react-app project to use as the boilerplate. This also supports css modules out of the box.

Npx create-react-app Dropdowns

Creating the component

Create a Dropdown component along with its css module as follows:

src/components/Dropdown/Dropdown.js
src/components/Dropdown/Dropdown.modules.css

In Dropdown.js, lets start by setting up our barebones functional component:
[ src/components/Dropdown/Dropdown.js]

import React from "react";

import * as style from "./Dropdown.module.css";

export default function Dropdown() {
 return (
  <div className={style.container}>
     <button type="button" className={style.button}>
       Click me!
     </button>
  </div>
 );
}

As you can see, we simply have a button within a wrapping <div>. We've imported the component's css, and have associated the wrapping <div> with some 'container' styling, and the <button> with some 'button' specific styling which we'll discuss.

Our css file thus far looks as follows:
src/components/Dropdown/Dropdown.module.css

.container {
   position: relative;
   display: inline-block;
}
.button {
   padding: 0;
   width: 100px;
   border: 0;
   background-color: #fff;
   color: #333;
   cursor: pointer;
   outline: 0;
   font-size: 20px;
}

Our wrapping <div> has the ‘container’ style applied to it. Here we use ‘display: inline-block’ so that the width and hight will automatically adjust based in the size of the button.

Given we’re using the simply ‘Click me!’ text for our button, the ‘button’ styling here is purely for aesthetic purposes.

Adding the dropdown menu

Next up we need to add the dropdown menu to the component.

This is simply another <div> with a <ul> inside.

The important thing is that this dropdown menu is rendered as a child of the component’s wrapping <div> container. This looks as follows:

[ src/components/Dropdown/Dropdown.js]

import React from "react";

import * as style from "./Dropdown.module.css";

export default function Dropdown() {
 return (
  <div className={style.container}>
     <button type="button" className={style.button}>
       Click me!
     </button>
    <div className={style.dropdown}>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
       </ul>
     </div>
   </div>
 );
}

The menu here is simply an unordered list, nothing fancy going on. The magic here is within the css module’s ‘dropdown’ definition, which we’ve associated with the menu’s wrapping <div> using className={style.dropdown}.

The css is as follows:

[ src/components/Dropdown/Dropdown.module.css]

ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
li {
 padding: 8px 12px;
}

li:hover {
 background-color: rgba(0, 0, 0, 0.14);
 cursor: pointer;
}

Status Check

So far, our running application should look as follows:
(assuming you’ve imported and dropped the component onto an empty page)

https://static.wixstatic.com/media/4ee71b_9f199a43422d4015b563e68416de24dd~mv2.png

For now the dropdown menu is correctly positioned below our button.

Next we need to tackle opening and closing the menu – in other words hiding it until the button is clicked.

Clicking the `<button>` to hide/unhide the menu

For this piece of functionality, we want to hide/unhide the menu when the button is clicked.

As you can imagine, we’ll need to the following to items to achieve this:

An ‘onClick’ function to run when the button is clicked
Some state to keep track of whether the button should be open or not.

As mentioned at the start of this post, we will be using React’s useState hook for managing our state, so we need to ensure we import it beside React.

Below are the changes to our component to achieve the hide/unhide functionality. We’ll discuss them below updated code.

[ src/components/Dropdown/Dropdown.js]

import React, { useState } from "react";

import * as style from "./Dropdown.module.css";

export default function Dropdown() {
 const [dropdownState, setDropdownState] = useState({ open: false });

 const handleDropdownClick = () =>
 setDropdownState({ open: !dropdownState.open });


return (
 <div className={style.container}>
   <button
     type="button"
     className={style.button}
     onClick={handleDropdownClick}
    >
     Click me!
   </button>
  {dropdownState.open && (
  <div className={style.dropdown}>
   <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
   </ul>
  </div>
 )}
 </div>
 );
}

The first thing we’ve added above is state to keep track of whether the dropdown is open or not.

const [dropdownState, setDropdownState] = useState({ open: false });

Above, we say that the state is called ‘dropdownState’ and has a default value in the shape of an object; of which has an attribute called ‘open’ whose value is set to ‘false’ by default.

‘setDropdownState’ is simply the useState hook’s way of letting us alter the value of the ‘dropdownState’ whenever we need to.

Next up, we need to create a function to fire whenever our button is clicked.

const handleDropdownClick = () =>
 setDropdownState({ open: !dropdownState.open });

Above, we’ve created a simply ‘handleDropdownClick’ function, whose sole purpose is to update the value of our ‘dropdownState’ - initially from the default value of {open: false} to {open: true} and subsequently to simply flip the Boolean value, which is achieved with the ‘!’.

Next up, you can see we’ve added the onClick event to our button:

<button
 type="button"
 className={style.button}
 onClick={handleDropdownClick}
 >
 Click me!
 </button>

And finally, we needed to tell our dropdown menu (a.k.a the unordered list), to only render if the ‘dropdownState’ is set to {open: true}.

We have achieved this as follows:

{dropdownState.open && (
 <div className={style.dropdown}>
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
  </ul>
 </div>
 )}

This means that if dropdownState.open is truthy, continue to render the menu list, implicitly implying that if it’s falsey, it will not.

Status Check

At this point, our application should now be fully functioning.

On initial load, you button should render as follows:

dropdownState = {open: false}

And when the button is clicked, the menu should render as follows:

dropdownState = {open: true}

And when the button is clicked again, the menu should hide as follows:

dropdownState = {open: false}

The missing piece to the dropdown jigsaw - Outside Clicks?

One final caveat you may or may not have noticed, is that although our menu successfully opens and closes upon clicking our button, it does not close if you click anywhere else on the page.

The final piece we need to achieve is to ensure the menu closes when the user clicks on any part of the document that is not our component.

I specifically say ‘not our component’ because we don’t want the menu to close if the user clicks a menu item, as that would be a bad user experience. And we don’t have to worry about the button itself, because we already have an ‘onClick’ function handling this.

For this final piece of functionality (the outside clicking), we will be using the following features:

React’s useRef hook
React’s useEffect hook
Event Listeners

Adding a Ref

Firstly, we need to make sure we import the useRef and useEffect hook at the top of our file:

import React, { useState, useRef, useEffect } from "react";

Then we need to create a Ref using the useRef hook and assign it to our outermost <div>.

The <div> we’re assigning to the Ref to is the <div> with the container styling, which is also essentially the parent container of our component. So lets call the ref ‘container as below:

const container = useRef();

And then we assign it to the outermost <div> as such:

<div className={style.container} ref={container}>

What is this ref for?

We need the useRef hook to essentially get access to the DOM. So by assigning our wrapping <div> a ref, it means we can access the div’s RAW DOM node using the ref’s .current property.

This may become clearer when we actually use this next.

Outside Clicks

Next up we need to add EventListeners to the document (the page) in order to listen for user clicks (which we’ll use the in-built “mousedown” event for).

One key thing to note about adding EventListeners to the document, is that it’s always best practise to clean them up when done too.

For our EventListeners, we’ll be adding them to the document within the useEffect hook – which will essentially give us the equivalent functionality of componentDidMount() and componentWillUnmount().

Per the below code, we add the “mousedown” (a.k.a the click) EventListener within the useEffect – and by the very nature of the useEffect hook it means the listener will be added to the document (the page) when our Dropdown component mounts. This is efficient in the sense that we don’t need the EventListener until our component has mounted (is on the page).

Then, you can see we remove the EventListener in useEffect’s return. Why? This is again by nature of the useEffect hook. If you return a function within useEffect, it runs that function when the component unmounts (when it’s removed from the page).

// attaches an eventListener to listen when componentDidMount

 useEffect(() => {
  document.addEventListener("mousedown", handleClickOutside);

 // optionally returning a func in useEffect runs like componentWillUnmount to cleanup
  return () => document.removeEventListener("mousedown",  handleClickOutside);
 }, []);

Finally, we need to define our handleClickOutside function, which is what occurs above when our “mousedown” EventListener is fired once someone clicks on the page.

In our handleClickOutside function, we need to check and ensure that our ‘current’ is actually filled in with a DOM element. We do this with checking if ‘container.current’ is truthy, and if it is, we then check if we the event target of the DOM node that was clicked. (using ‘!container.current.contains(e.target)’)

If we do not have the clicked target, it means the click has occurred outside of our ‘container’ – so we close our menu by updating our dropdownState.

const handleClickOutside = (e) => {
 if (container.current && !container.current.contains(e.target)) {
 setDropdownState({ open: false });
 }
 };

Given that our ‘button’ is inside of our ‘container’, it still runs it’s onClick function as normal, so is unaffected by our additional code.

Finally, our finished component should look as follows:

[src/components/Dropdown/Dropdown.js]

import React, { useState, useRef, useEffect } from "react";

import * as style from "./Dropdown.module.css";

export default function Dropdown() {
 const container = useRef();
 const [dropdownState, setDropdownState] = useState({ open: false });

 const handleDropdownClick = () =>
 setDropdownState({ open: !dropdownState.open });

 const handleClickOutside = (e) => {
 if (container.current && !container.current.contains(e.target)) {
 setDropdownState({ open: false });
 }
 };

 // attaches an eventListener to listen when componentDidMount
 useEffect(() => {
 document.addEventListener("mousedown", handleClickOutside);
 // optionally returning a func in useEffect runs like componentWillUnmount to cleanup
 return () => document.removeEventListener("mousedown", handleClickOutside);
 }, []);

 return (
 <div className={style.container} ref={container}>
      <button
 type="button"
 className={style.button}
 onClick={handleDropdownClick}
 >
        Click me!
      </button>
 {dropdownState.open && (
 <div className={style.dropdown}>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
          </ul>
        </div>
      )}
    </div>
 );
}

JS: Recursion through a File Tree

Anthony Petrides — Thu, 13 May 2021 13:18:41 +0000

In this post we’ll discuss recursion in JavaScript through means of the classic file tree example.

Imagine we have the following file tree structure:

{
 type: "folder",
 name: "project",
 content: [
    {
    type: "folder",
    name: "components",
    content: [
          {
        type: "folder",
        name: "helpers",
        content: [
                  {
            type: "file",
            name: "dates.js",
                  },
          ],
        },
        {
        type: "file",
        name: "Button.jsx",
        },
        {
        type: "file",
        name: "Button.css",
        },
      ],
    },
    {
    type: "file",
    name: "index.js",
    },
    {
    type: "file",
    name: "App.jsx",
    },
  ],
};

Now what if we want to create a function that tells us if a specific file exists when we provide it the name of the file?

And what if we want this function to work no matter the depth of the tree?

And lastly, what if I told you that with recursion, we can achieve this in under 10 lines?

First of all, lets imagine our function call:

console.log(fileSearch(fileTree, "dates.js"));

We’ll be creating a function called fileSearch and it will take 2 arguments:

the file tree
the filename we want to search for

We’ll expect a boolean true or false as the output.

Process to the solution

Looking at our file tree structure, we can see there are 2 types of objects. A folder type and a file type.

We know if the type is a file, we have a filename available to compare to the filename we’ll be passing in to our function to search for — a.k.a the ‘searchTerm’.

However, if the type is a folder, we know we have a content attribute which has an array of one or more objects, which again could hold further folder types or filename types. We simply don’t know how many of these there will be depth wise. This alone is an indication that we need to use recursion for a scalable solution.

The first thing we want to do is check, at the root level of the tree, if we have a file or a folder.

If we have a file, compare the filename with our searchTerm, else, in the case we have a folder, we need drop into the content array and again, check if we have a folder or a file.

We’ve already checked folder or file in the first step, so we can reuse this code here recursively by calling our own function again.

Focus on the solution below and see how we call fileSearch within itself:

const fileSearch = (tree, searchTerm) => {
 switch (tree.type) {
   case "file":
     return tree.name === searchTerm;

   case "folder":
     return !!tree.content.find((element) => fileSearch(element, searchTerm));

   default:
     return "File Not Found";
  }
};

The simplicity of the above solution should in hope speak for itself given then steps we've followed to arrive here.

DEV Community: Anthony Petrides

JS: Destructuring

A deep dive into the powerful world of javascript destructuring

Array Destructuring

What if I want to skip element?

What if I want the rest of the array?

Now, What does this look like?

Combining 2 Arrays

Destructuring with Functions

Destructuring with Default Values

Object Destructuring

Defaults

Spreading

Destructuring Nested Objects

Combining Objects

Object Destructuring Inside Function Arguments

JS: Working with Arrays of Objects

The Data

So what do we want to do with this data?

The Approach

What are we missing here?

Why?

What does this mean?

Was our work above wasted?

We're Done!

But what's wrong with this solution now???

Why?

TS: Nullish Coelescing (The TS Ternary Shortcut)

JS: Array Methods

Find()

Filter()

Map()

Reduce

TS: Documenting Functions

JS: Array.Sort()

Overview

The Basics

So, the basic rules are:

The Compare Function

How does it work?

What does this look like?

React: Creating a Dropdown

Intro

What we’ll be using to achieve this

Prerequisite

Creating the component

Adding the dropdown menu

Status Check

Clicking the <button> to hide/unhide the menu

Status Check

The missing piece to the dropdown jigsaw - Outside Clicks?

Adding a Ref

Outside Clicks

Finally, our finished component should look as follows:

JS: Recursion through a File Tree

Process to the solution

Clicking the `<button>` to hide/unhide the menu