DEV Community: aboutandre

Why go functional? A practical example

aboutandre — Wed, 27 Jan 2021 20:27:22 +0000

What is functional programming?

There are just so many great articles out there that I would not bother to pretend that I could write one better than those. Go read at least this one article. But if you're too lazy I'll leave you with this quote from Mary Rose Cook, which summarises the intent behind FP perfectly:

Functional code is characterised by one thing: the absence of side effects. It doesn’t rely on data outside the current function, and it doesn’t change data that exists outside the current function. Every other “functional” thing can be derived from this property.

Ok. But why?

Your code is more predictable. And since this is a short article I'll dive right in. This was the problem that I encountered this week:

const users = [
  {
    id: 1,
    firstName: "Doug",
    lastName: "Funnie",
    status: "Playing with Porkchop",
  },
  {
    id: 2,
    firstName: "Patti",
    lastName: "Mayonnaise",
    status: "Friendzoning Doug",
  },

  {
    id: 3,
    firstName: "Roger",
    lastName: "Klotz",
    status: "Making fun of Doug",
  },
];

function getUserById(id) {
  return this.users.find(u => u.id === id);
}

function setUserStatus(id, status) {
  const user = this.getUserById(id);
  user.status = status;
}

If you already spotted the problem congratulations! You can leave now 😉

For everyone else (including me until recently) the problem is on this line:

return this.users.find(u => u.id === id);

According to the MDN Docs the Array.prototype.find() method "returns the value of the first element **in the provided array* that satisfies the provided testing function."* (emphasis mine).

This means that the element that you are getting is only a reference to the real element. So that on this line:

const user = this.getUserById(id);

You are not creating/duplicating the element that you are getting. But rather creating an alias to that element. So changing the status here:

user.status = status;

Is de facto changing the original element in the array.

So?

Let's pretend that you don't have this code all laid out nicely as the example. Maybe the array is coming from a service in another module (that you might not even have access to). The same could be said to the getUserById() which could be in a utilities library for example.

This would make your code very unpredictable to reason to.

A better approach would be to use the Array.prototype.filter() if you want to return just this one element or the Array.prototype.map() to modify the status of the user that you want. Like so:

function setUserStatus(id, status) {
  const modifiedUsers = this.users.map(user => {
    if ([user.id](http://u.id/) === id) {
      return { ...user, status: status };
    }
    return user;
  });
  this.users = modifiedUsers;
};

True functional programming

For the attentive reader this is not a pure function. I am modifying the users array directly. But this is for the sake of this small article. Probably the function setUserStatus would be used inside a callback from an API call or something similar. Which would look like this:

function setUserStatus(usersArr, id, status) {
  return usersArr.map(user => {
    if (user[.id](http://u.id/) === id) {
      return { ...user, status: status };
    }
    return user;
  });
};

Now that is a pure function.

Wrapping up

Dealing with unexpected side-effects in a huge code base is a day-to-day task of a developer. However you should treat your code as if you are writing an API to be used by a broad audience of developers world wide. This should include good comments as (e.g. JS Docs), Typescript and a README.

Grow as a dev and get better. But let your code stay immutable 😎

Addendum

It is late at night as I am writing this. If you found any typos let me know. Also, we are all here on this green Earth to learn. If you would do this differently let me know in the comments.

How to access build time assets during run time with Webpack

aboutandre — Fri, 20 Dec 2019 18:28:38 +0000

TL;DR;
How to retrieve information that is only available during build time when you are running your app.

I want to share a solution to a problem I had last week. I have hundreds of icons that can be used inside a component and these icons should be available inside Storybook.

This is a perfect task to automate.

Everyone that has worked with Webpack, knows that you have global variables that can be used in runtime. Usually isDevelopment or isProduction will be used to check which environment the app is running and deliver the proper assets.

My solution was to retrieve all the icons' names during build time and save them inside a global scoped variable that would then be accessible during run time. For this example I used Vue, but this is something that Webpack would offer in any environment.

// config/storybook/config.js

export const STORYBOOK_ICONS = require
    .context('../../src/assets/icons', true, /^.*\.svg$/) // Comment 1
    .keys()                                               // Comment 2
    .toString()                                           // Comment 3
    .match(/\b(?!svg)\b[^,./].+?(?=\.)/g)

Comment 1
We use here the context API from Webpack. This is a function that receives four parameters (I only used the first three):

require.context(directory, useSubdirectories = true, regExp = /^\.\/.*$/, mode = 'sync');

Comment 2
Then we access all the keys with .keys():

keys is a function that returns an array of all possible requests that the context module can handle.

At the moment this is looking like this:

STORYBOOK_ICONS = [
  "./about.svg",
  "./accept_database.svg",
  "./add_column.svg",
  "./add_database.svg",
  "./add_image.svg",
  "./add_row.svg",
  "./address_book.svg",
  "./advance.svg",
  "./advertising.svg",
  "./alarm_clock.svg",
  ...
]

Thats no good, we want to use the variables inside our component. We need to filter the name out.

Regex to the rescue!

Comment 3
I preferred here to use the .toString() method instead of .filter since I would need to create a new Regex variable and use that to compare with each passed value (as seen in this SO answer). With a string we can then use the .match function that will return an array for every item that it finds with a certain regex.

Talk about killing two birds with one stone!

This creates an array without the file format.

STORYBOOK_ICONS = [
    "about",
    "accept_database",
    "add_column",
    "add_database",
    "add_image",
    "add_row",
    "address_book",
    "advance",
    "advertising",
    "alarm_clock",
    ...
]

Then in the Story that I wanted to have the icons available. I import the variable from the global scope and using reduce and ES6 Dynamic Property Keys to create a shiny new object with key and value pairs that are identical.
Like this:

// src/components/IconSelector/IconSelector.stories.js

import {STORYBOOK_ICONS} from '../../../config/storybook/config';

const iconList = STORYBOOK_ICONS.reduce(function (result, item) {
    result[item] = item;
    return result;
}, {});

Our new object looks like this:

iconList = {
    "about": "about",
    "accept_database": "accept_database",
    "add_column": "add_column",
    "add_database": "add_database",
    "add_image": "add_image",
    "add_row": "add_row",
    "address_book": "address_book",
    "advance": "advance",
    "advertising": "advertising",
    "alarm_clock": "alarm_clock",
    ...
}

Which is then used inside the story:

// src/components/IconSelector/IconSelector.stories.js

storiesOf("Icon Selector", module)
  .addDecorator(withKnobs)
  .add("default", () => {
    return {
      components: { IconSelector },
      props: {
        selectedIcon: {
          default: select(
            'Icons', iconList, Object.keys(iconList)[0]), // <- here
        },
      },
      template: `<IconSelector :icon-name='selectedIcon'/>`
    };
  });

And the final results:

Repo

I published a demo repo that can be found here.

PS

This is my first post ever. If you have any comments or pointers I would be glad to receive feedback! =)

JavaScript mastered. As a FE Dev now what?

aboutandre — Mon, 11 Nov 2019 16:38:33 +0000

This year I came to to realization that I'm quite comfortable with JavaScript ("vanilla" or frameworks). But I want to expand either going to the Backend or with Apps or something else entirely.

I know that the question is very vague, but surely there are others here that started with JS and moved to/learned another language.

What would your suggestions/experience be?

Thanks!