DEV Community: Damian Cipolat

Refactoring IF, a real exercise

Damian Cipolat — Fri, 02 Apr 2021 18:36:42 +0000

Introduction

Hello, this article is based on a real refactor situation of a javascript software argentine team.

At work we found a code aka "legacy", this made the team of developers go crazy 😲 😱.

There was only one way to solve this, a refactoring competition 😎💪.

The challenge

Five developers were the competitors:

and many other spectators.

The goal was to refactor this evil code:

const get_data_type = code => {

    if (
        code === 702 ||
        code === 1082 ||
        code === 1083 ||
        code === 1114 ||
        code === 1184 ||
        code === 1266 ||
        code === 12403
    ) {
        return "DATE";
    } else if (
        code === 20 ||
        code === 21 ||
        code === 23 ||
        code === 24 ||
        code === 26 ||
        code === 700 ||
        code === 701 ||
        code === 790 ||
        code === 1700 ||
        code === 2202 ||
        code === 2203 ||
        code === 2204 ||
        code === 2205 ||
        code === 2206 ||
        code === 3734 ||
        code === 3769 ||
        code === 12396
    ) {
        return "NUMERIC";
    } else {
        return "STRING";
    }
};

Evaluation points:

semantics
performance

The contest prize

None just the HONOR and respect from all and and the opportunity to participate in this article of dev.to, because we don't have a budget for these things hahaha.

3, 2, 1, go!

These were the proposals presented by the participants:

@pabsource - Pablo:

const codeDate = [20, 21, 23, 24, 26, 700, 701, 790, 1700, 2202, 2203, 2204, 2205, 2206, 3734, 3769, 12396];
const codeNumeric = [702, 1082, 1083, 1114, 1184, 1266, 12403];
const codeInput = 505;

const get_data_type = (codeInput)=>{
  const codeResponse = [codeInput].reduce((acc, item) => {
    const date = codeDate.includes(item) && 'DATE'
    const numeric = codeNumeric.includes(item) && 'NUMERIC'
    return date ? date : numeric || acc
  }, 'STRING');
}

Analysis:
He creates an array and a reducer and includes to get the value of the
type and then a ternary to return a default.

Semantic:
It has a complicated semantics implies mastering the use of reduces and includes.

TIME:
get_data_type(20); - 0.068115234375 ms
get_data_type(702);- 0.008056640625 ms
get_data_type(0); - 0.0068359375 ms

@adelysalberto - Adelys:

const codeNumeric = [702, 1082, 1083, 1114, 1184, 1266, 12403];
const codeDate = [20, 21, 23, 24, 26, 700, 701, 790, 1700, 2202, 2203, 2204, 2205, 2206, 3734, 3769, 12396];
const get_data_type = (code) => {
  const codeNum = codeNumeric.includes(code) && 'NUMERIC';
  const codeD = !codeNum && codeDate.includes(code) && 'DATE';
  return codeNum ? codeNum : codeD || "STRING"
}

Analysis:
He use two includes to get the data type, and a single ternary to return the default.

Semantic:
It has a simpler semantics, it uses only the same operator and a ternary, the default is understood at first glance.

TIME:
get_data_type(20); - 0.041015625 ms
get_data_type(702);- 0.00390625 ms
get_data_type(0); - 0.00390625 ms

@eddovj - Edu:

const codeNumeric = [702, 1082, 1083, 1114, 1184, 1266, 12403];
const codeDate = [20, 21, 23, 24, 26, 700, 701, 790, 1700, 2202, 2203, 2204, 2205, 2206, 3734, 3769, 12396];
const get_data_type = (code) => codeDate.includes(code)?(
        'Date' 
        ): (
            codeNumeric.includes(code) ? 'Numeric' : 'String'
        );

Analysis:
He two ternarys one as main validator and other to return the default.

Semantic:
It implies knowing includes, it makes a more intensive user of the ternary generates confusion if it is not mastered.

TIME:
get_data_type(20); - 0.034912109375 ms
get_data_type(702);- 0.001953125 ms
get_data_type(0); - 0.003173828125 ms

@cris_198422 - Cris:

const dates = [20, 21, 23, 24, 26, 700, 701, 790, 1700, 2202, 2203, 2204, 2205, 2206, 3734, 3769, 12396];
const numerics = [702, 1082, 1083, 1114, 1184, 1266, 12403];
const get_data_type = (code) =>
  dates.includes(code)
    ? 'DATE'
    : numerics.includes(code)
    ? 'NUMERIC'
    : 'STRING';

Analysis:
He use a firts ternary and another ternary to return the default.

Semantich:
Solution in a line is read as a sentence, it implies mastering concatenated ternaries, it is a little more semantic than the previous one.

TIME:
get_data_type(20); - 0.03369140625 ms
get_data_type(702);- 0.0048828125 ms
get_data_type(0); - 0.032958984375 ms

@pascualmj - Manu:
He did'nt present a code but communicate an idea, the code was written by me, as an exception it is accepted for this article.

const NUMBER='NUMERIC';
const DATE='DATE';
const dataValues = {
  20:DATE,21:DATE,23:DATE,24:DATE,26:DATE,700:DATE,701:DATE,790:DATE,
  1700:DATE,2202:DATE,2203:DATE,2204:DATE,2205:DATE,2206:DATE,3734:DATE,
  3769:DATE,12396:DATE,702:NUMBER,1082:NUMBER,1083:NUMBER,1114:NUMBER,
  1184:NUMBER,1266:NUMBER,12403:NUMBER
};

const get_data_type = (code)=>dataValues[code]||'STRING';

Analysis:
Well this is a very different solution, I have decided not to use includes instead it creates a map to avoid doing array operations and the default is when a value is not found in the map.

Semantic:
Easy to understand solution does not imply knowing array prototypes, only the operator in the default.

TIME:
get_data_type(20); - 0.02587890625 ms
get_data_type(702);- 0.0029296875 ms
get_data_type(0); - 0.002197265625 ms

Conclusion:

Comparing all the cases, the more performance codes:

Code	Author	Time
get_data_type(20);	manu	0.02587890625 ms
get_data_type(702);	edu	0.001953125 ms
get_data_type(0);	manu	002197265625 ms

The most efficient solution is the one that uses a map to obtain the results created by @pascualmj with a good semantic.

The solution created by @cris_198422 and @eddovj they have a good performance too.

The solution created by @adelysalberto have a good performance for date values but suffer in the default and the numeric scenario, but I think that not having used ternary concatenation and a simple default like the includes gives you the best semantic.

Learnings:

Use a object map or the JS MAP for this type of scenario.
Avoid using unnecessary array operations.
Avoiding the if / else with two ternarys is efficient but we lose semantics.
Concatenating ternaries can be dangerous if you do not master their use.

JS projects version and Our custom Git tools 😎😛💪

Damian Cipolat — Thu, 30 Apr 2020 01:39:06 +0000

I have been working on javascript projects for a long time, I have worked in different ways and have gathered a lot of experience from different companies and teams, leaders, etc. I have found that there is a part of javascript projects that not all developers and leaders care about. It is the version management, in this article I will tell you how I have handled it and the successful results that I achieve and a nice bash script that can help us to use it as a githook.

The points to work.

Git.
Version control of each commit.
Know the different software version in each environment.
Put in the developer mind the idea of manage the version.
Create the release manager rol into the team.
Custom GIT TOOLS.

GIT:

There are many ways to use git, I have successfully worked using git flow and I recommend it but slight variations can be made for each team.I was recently using the nex branch strategy.

Production: Replace the master branch.
Stage: For QA testing.
Develop: Is the develop environment and the feature branches born from here.

A new feature path look like this:
feature/dev_1 >> develop >> stage >> production

Version Control:

I think, that the best way is follow the npm packages strategy, use the package.json to track the changes and update the version before publish
a new release. I'm using SEMVER for it.

{
  "name": "api",
  "version": "1.0.6", <------
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "build": "tsc"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^13.13.4",
    "express": "^4.17.1",
    "redis": "^3.0.2",
    "typescript": "^3.8.3"
  }
}

I have created two things for be used as tools:

Githook: Is a bash script to detect changes in package.json before a commit or a push.
Dashboard: (only for gitlab) to track the changes in each branch of differentes repositories / environment.

We can see in the diagram the current version of each environment, this versions is from the package.json{version} attribute. Each environment maps with the name of each git branch.

┌─────────────────┬────────────────────┬────────────────────┬────────────────┐
│ Projects        │      develop       │        staging     │       prod     │
├─────────────────┼────────────────────┼────────────────────┼────────────────┤
│ ms-config       │ 1.0.9              │ 1.0.3              │ 1.0.3          │
├─────────────────┼────────────────────┼────────────────────┼────────────────┤
│ ms-api          │ 2.0.9              │ 2.0.6              │ 2.0.6          │
├─────────────────┼────────────────────┼────────────────────┼────────────────┤
│ ms-processor    │ 1.0.8              │ 1.0.1              │ 1.0.0          │
└─────────────────┴────────────────────┴────────────────────┴────────────────┘

Version per environment

Looks like this, the image is from my dashboard. If we know the state of each environment we will be able to know how far or attracted our features are from the system in production.

It is important to understand that a good flow of git without problems will serve us to have an efficient delivery of our products.

Developer mind:

Why is this important to a developer? because he is the main actor here, not the leaders, the qa etc. He is the protagonist in making changes to the software and being in continuous contact, so it is his responsibility to accompany this and to reflect what changes the ah introduced ..

There are many tools to make your job simpler and avoid mistakes, some of which are those that I have proposed, but most of the repositories have api-rest so it is feasible to develop the appropriate tools for each team to your liking.

Release manager rol:

This is a role that can be carried out by anyone on the team and not just by the leader. It is an extra responsibility that can change, from being the person who makes the releases every time that is necessary and watches over that period of time for the delivery. It is a good opportunity that this responsibility changes so that all members feel involved in acquiring that experience.

GIT Tools:

Dashboard:

I have created this tool because I need to be able to quickly see the different versions of my JS projects, in a single view. So using the GITLAB api and a bit of HTML + JS + CSS I can build a web dashboard to visualize this. We are using the GITLAB api version 4.0.

Project link:
https://github.com/damiancipolat/js-repo-versions

Git Hook:

This easy bash script will help us in controlling the changes before a git push. The objective is detect changes in the package.json version of our developing branch and the develop branch.

Steps:

Goto to /.gits/hooks and create the file pre-push.
Edit the file with the content of this gist. https://gist.github.com/damiancipolat/d2c3fc196b25a93d7b440b7d685ed451
Configure the develop branchs, the scripts is prepared to be used with "gitflow"

Copy & paste:

#!/bin/bash
set -o nounset
set -o errexit

RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
ORANGE='\033[0;33m'
BLUE='\033[0;34m'
NC='\033[0m'

#This is our develop branch name.
DEVELOP_BRANCH="origin/develop"

#Get the current branch name.
CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD)

printf "${BLUE}* Comparing branches *${NC}\n"
printf "* The current branch is: ${GREEN}$CURRENT_BRANCH${NC}\n"
printf "* The develop branch is: ${YELLOW}$DEVELOP_BRANCH${NC}\n"

#Get number of differences.
NUM_CHANGES=$(git diff ${DEVELOP_BRANCH}  -- ./package.json | grep version | wc -l)
printf "\n${BLUE}* Number of changes = ${NC} ${YELLOW}${NUM_CHANGES}${NC} ${BLUE}*${NC}\n\n"

#Check if the package.json version of the develop and the current branches are different
if [ "$NUM_CHANGES" != 2 ]; then
 printf "${RED}😿 - Version has not been changed, push not available 🙀.${NC}\n"
 printf "${RED}Please go to package.json and update the version attribute 🙏.${NC}\n\n"
 exit 1
else
 printf "${GREEN}😎 - Version control OK!! - 😎${NC}\n"
 printf "${GREEN}😜   Git push starting...${NC}\n"
 printf "${GREEN}...${NC}\n\n"
 exit 0
fi

Output:
The output look like this

Why a==1&&a==2&&a==3 is true in JS?

Damian Cipolat — Sun, 12 Apr 2020 17:21:07 +0000

Maybe you have seen this as a meme or in some JS forum.

I'm sure you have thought, this is impossible to happen, in a code language can this return "true". It's a joke? - Not this returns "true" and there are many reasons for this to happen.

Introduction:

To explain this, is necessary to understand some concepts.

Implicit and explicit coercion.
Objects type coercion.
Functions toString and valueOf.
Explanation.

1) Implicit and explicit coercion.

There are two types of coercion explicit and explicit.

Type coercion:

Is the process of converting value from one type to another (such as string to number, object to boolean, and so on). Any type, be it primitive or an object, is a valid subject for type coercion. To recall, primitives are: number, string, boolean, null, undefined + Symbol (added in ES6).

Explicit type coercion:

When a developer expresses the intention to convert between types by writing the appropriate code, like Number(value).

Implicit type coercion:

Values can also be converted between different types automatically, and it is called implicit type coercion. It usually happens when you apply operators to values of different types, like 1 == null, 2/’5', null + new Date(), or it can be triggered by the surrounding context, like with if (value) {…}, where value is coerced to boolean.

There are only three types of conversion in JavaScript:

to string
to boolean
to number

2) Objects, type coercion.

When a JS engine encounters expression like [1] + [4,5], first it needs to convert an object to a primitive value, which is then converted to the final type. And still there are only three types of conversion: numeric, string and boolean.

Numeric and string conversion make use of two methods of the input object: valueOf and toString . Both methods are declared on Object.prototype and thus available for any derived types, such as Date, Array, etc.

In general the algorithm is as follows:

If input is already a primitive, do nothing and return it.
Call input.toString(), if the result is primitive, return it.
Call input.valueOf(), if the result is primitive, return it.
If neither input.toString() nor input.valueOf() yields primitive, throw TypeError.

3) Functions toString and valueOf

Take a look of two object prototype methods.

object.toString()

The method .toString() is used when an object is coerced into a string. This is helpful when you want to get a nice string representation of an object vs. the not-so-useful "[object Object]".

const s = {
  name: 'Damian',
  surname: 'Cipolat',
  toString: function() {
    console.log('LOG', this.name,this.surname);
    return `Fullname: ${this.name},${this.surname}`;
  }
}
console.log(s);
// { x: 7, y: 3, toString: [Function: toString] }
console.log(s + '');
// 'Square: 7,3'
console.log(+s);
// NaN

object.valueOf()

The method .valueOf() is used when an object is coerced into a primitive value such as a number. If you’ve ever added a number to an object and ended up with a value of NaN, then this method is your friend.

const box = {
  l: 7,
  w: 3,
  h: 4,
  valueOf: function() {
    return this.l * this.w * this.h
  }
}
console.log(box)
// { [Number: 84] l: 7, w: 3, h: 4, valueOf: [Function: valueOf] }
console.log(String(box))
// [object Object]
console.log(+box)
// 84

Explanation:

Ok, it's time to discover the magic, why a==1&&a==2&&a==3 is "true"? To make this expression success, we can override the function toString, this function is used in the implicit type coercion of the operator "==".

This is the full code:

const a = {
  tmp: 1,
  toString: function () {
    console.log('TO STRING');
    return a.tmp++;
  }
}

if(a == 1 && a == 2 && a == 3) {
  console.log('JS Magic!');
}

So the reason here is the toString function is called 3 times and the TO STRING appears in the console output.

Readings

Some interesting links to continue reading.

Refactoring the diagnosis of CORONA VIRUS in JS.

Damian Cipolat — Fri, 27 Mar 2020 04:47:48 +0000

Refactoring excercise.

I'm going to make this article to show various ways of how we can refactor a validation, we will see step by step
how we can simplify the expression until we see how we can reach scenarios that we do'nt need to use
the if operator, the focus of the code is 100% functional .

Code origin:

This code comes from the application of the Argentine government to make a corona virus self-diagnosis.
In LinkedIn part of its source code was filtered and went viral due to the excess of validations when performing the if.

The idea here is to use the code in the image, as example to explore the way of how to make a refactor.

Note:
I will show many combinations of doing this. Sure some will like more than others. It is for practical purposes,
everyone is free to choose the one they prefer or to propose a new one.

Option 1 - Direct solution, agroup and split in and / OR.

if ((bodyTemperature >= 38)&&(difficultyBreathing||diabetes||cancer||isPregnant||isOver60yearsOld||hepatic||kidneyDisease||respiratoryDisease)){
    history.replace(`/diagnostico/${provincia}`);
} else if (hasFever){
    history.replace(`/cuarentena/`);
} else if (!hasFever){
    history.replace(`/diagnostico_bueno/`);
} else {
    history.replace(`/diagnostico_bueno/`);
}

Option 2 - split in two functions.

We split the logic conditions into functions.

const isRiskCondition = ()=> diabetes||
cancer||
isPregnant|
isOver60yearsOld||
hepatic||
kidneyDisease||
respiratoryDisease;

const hasFever = bodyTemperature >= 38;

//Check corona virus
if ((hasFever() && difficultyBreathing)||(hasFever() and isRiskCondition()) || (hasFever() && isRiskCondition() && difficultyBreathing)){
    history.replace(`/diagnostico/${provincia}`);
} else if (hasFever){
    history.replace(`/cuarentena/`);
} else if (!hasFever){
    history.replace(`/diagnostico_bueno/`);
} else {
    history.replace(`/diagnostico_bueno/`);
}

Option 3 - split in two functions and simplify logic.

We can try to simplify this loginc following this rules.

Rules:

fever and breatheBad
fever and riskcondition
fever and riskcondition and breatheBad

Simplificated expression: fever and (breatheBad or riskcondition)

const isRiskCondition = ()=> diabetes||
cancer||
isPregnant||
isOver60yearsOld||
hepatic||
kidneyDisease||
respiratoryDisease;

const hasFever = bodyTemperature >= 38;

//Check corona virus
if (hasFever() && (difficultyBreathing || isRiskCondition())){
    history.replace(`/diagnostico/${provincia}`);
} else if (hasFever){
    history.replace(`/cuarentena/`);
} else if (!hasFever){
    history.replace(`/diagnostico_bueno/`);
} else {
    history.replace(`/diagnostico_bueno/`);
}

Option 4 - split into functions + create a corona detectiob function

Simplify and encapsulate the corona virus detection in one function.

const isRiskCondition = ()=> diabetes||
cancer||
isPregnant||
isOver60yearsOld||
hepatic||
kidneyDisease||
respiratoryDisease;

const hasFever = bodyTemperature >= 38;
const isPossitive = ()=> hasFever() && (difficultyBreathing || isRiskCondition());

if (isPossitive()) {
    history.replace(`/diagnostico/${provincia}`);
} else if (hasFever){
    history.replace(`/cuarentena/`);
} else {
    history.replace(`/diagnostico_bueno/`);
}

Option 5 - unificate risk conditions & avoid use else / else if.

The idea here is show, how avoid use else / else if, and unificate the risk conditions in only one function.

const isRiskCondition = ()=> difficultyBreathing||
diabetes||
cancer||
isPregnant||
isOver60yearsOld||
hepatic||
kidneyDisease||
respiratoryDisease;

const hasFever = bodyTemperature >= 38;
const isPossitive = ()=> hasFever && isRiskCondition;

if (isPossitive())
    history.replace(`/diagnostico/${provincia}`);

if (!isPossitive() && hasFever())
    history.replace(`/cuarentena/`);

if (!isPossitive() && !hasFever())
    history.replace(`/diagnostico_bueno/`);

Option 6 - Avoid use IF / else / else if.

The idea here is do'nt use if-else-else if, so we will create a special function that detect the success logical condition
and return the parameter number, the purpose of it is to have a index to map a value in an array.

const isRiskCondition = ()=> difficultyBreathing||
diabetes||
cancer||
isPregnant||
isOver60yearsOld||
hepatic||
kidneyDisease||
respiratoryDisease;

const hasFever = bodyTemperature >= 38;
const isPossitive = ()=> hasFever && isRiskCondition;

//Urls map.
const urls = [
    `/diagnostico/${provincia}`,
    `/cuarentena/`,
    `/diagnostico_bueno/`
];

//Create a inline boolean validator, that return a index.
const triple = (a,b,c)=> a?0:(b?1:(c?2:null));

//Get the url from the map.
const path = triple(isPossitive(),(!isPossitive() && hasFever()),(!isPossitive() && !hasFever()))||2;

//Redirect.
history.replace(path);

Option 7 - (if - else - else) if as function.

The idea in this point to create a special function that make the (if-else-else if) as function, using the ternary operator.

const isRiskCondition = ()=> difficultyBreathing|
 diabetes||
 cancer||
 isPregnant||
 isOver60yearsOld||
 hepatic||
 kidneyDisease||
 respiratoryDisease;

const hasFever = bodyTemperature >= 38;
const isPossitive = ()=> hasFever && isRiskCondition;

//Return a index to use in a map.
const elseIf = (a,b)=>a?0:(b?1:(!a&!b)?2:null);

//Urls map.
const urls = [
    `/diagnostico/${provincia}`,
    `/cuarentena/`,
    `/diagnostico_bueno/`
];

//Get the url from the map.
const path = elseIf(isPossitive(),(!isPossitive() && hasFever()))||2;

//Redirect.
history.replace(path);

Javascript vs memes

Damian Cipolat — Tue, 17 Mar 2020 06:23:49 +0000

I am going to analyze several internet memes that make fun of javascript. It is a good opportunity to explain each one of them and that the results obtained are not language errors, but there are very specific and serious explanations behind it.

Is important to study first a concept called "type coercion", is about the conversion of
data types in different situations. Continue reading in this link:
https://2ality.com/2019/10/type-coercion.html#what-is-type-coercion%3F

Thanks for JS - meme

Here there are a lot of concept to study.

1) typeof NaN = "number"

Is true, in JS the NaN is a number and can't be compared with any other NaN.
Some read: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/NaN
Example: NaN==NaN - false

2) 9999999999999999 -> 10000000000000000

Javascript doesn't have integers, only 64-bit floats - and you've ran out of floating-point precision represented with the
constant Number.MAX_SAFE_INTEGER constant.

3) 0.5+0.1==0.6 - true

Is a classic operation, 0.5+0.1 is realized and the result is 0.6 and the value is the same so is true.

4) 0.1+0.2==0.3 - false

0.1+0.2 = 0.30000000000000004
0.30000000000000004 = 0.6 - false

5) Math.max() = - Infinity

The result is “-Infinity” if no arguments are passed and the result is NaN if at least
one of the arguments cannot be converted to a number.

6) Math.min() = Infinity

The smallest of the given numbers. If any one or more of the parameters cannot be converted into a number, NaN is returned. The result is Infinity if no parameters are provided.

7) []+[]=""

This happen, because the empty array is casted to "" so ""+"" is equal "".

8) []+{}="[object object]"

The [] is in the left so is casted as string.

[]+{}
""+{}
"[object object]""

9) {}+[]=0

The {} is in the left, so the empty structure is casted to number.

{} is casted to 0.
[] is casted to 0.
0+0 = 0.

10) true+true+true === 3 - true

true is casted to 1 when is used with the + operator, so is converted to 1+1+1.

11) true-true = 0

true is casted to 1 for the minus operator, so is converted to 1-1.

12) true==1 - true

1 is casted to boolean, Boolean(1) = true, so true==true.

13) true===1 - false

This is beacuse the == operator don't make conversion so the boolean and number are'nt differnt data types.

14) (!+[]+[]+![]).length = 9

Some thins to analize.

[]+[]="".
![] = false.
(!+[]): true, ([]+![]): "false" as string.
"truefalse" two string concatenated.
"truefalse".length = 9

15) 9+"1"

"91" the nine is casted to string, so is string+string concatenation = "91".

15) 91-"1" = 90

The 1 is casted from string to number for the use of the operator minus "-". 91-1 = 90.

16) []==0 - true

Array to number conversion, Number([]) is 0, so 0==0.

Fav language JS - meme

Classic meme, here there are one concept.

1) "11"+1 = "111"

Concatenation between string and number the, last is casted to string, easy.

2) "11"-1 = 10

OK, in this case there a string and a number with the minus operator, the string is casted to number, and later
a normal arithmetic operation between two numbers.

"11" - 1
11 - 1
10

Patricio - meme

I will analyze this meme, has 3 points.

1) 0 == "0" - true

Converts the variable values to the same type before performing comparison, for this reason the "0" is cast
from string to number and later compare 0 == 0 is the same.

2) 0 == [] - true

hahaha this is very strange, but the explanation is the next:

The left operand is number.
The rigth operand is casted to array to number.
Number([]) = false, the false is casted to number.
Number(false) = 0.
0 == 0 is true.

3) Here they assume that there is a transitivity between 1 and 2.

The logic is if 0 == "0" and 0 == [] then "0" = [], the problem is that the "0" is a string casted to int when is compared,
for this reason the transitive property can't be applyed here.

4) "0" == [] - false

Is correct because the [] is casted to string, String([])="" so "0" == "" is false.

Mind explosion JS - meme

I will analyze this meme, has 4 points.

1) 2+2 = 4

A very normal arithmetic operation, nothing strange.

2) "2"+"2"="22"

A string concatenation, happen when the "+" is used with STRING+STRING.

3) 2+2-2 = 2

Another arithmetic operation, in this case all number are used.

(2+2)-2
4-2
2

4) "2"+"2"-"2" = 20

We mix string concatenation and type coercion.

"2"+"2" = "22 string concatenation
"22"-"2" = 20
- Type coercion to int, caused by the minus operator.
- "22" - "2", cast "string-string" to "int-int".
- 22 - 2 = 20

Handle money with JS

Damian Cipolat — Mon, 16 Mar 2020 02:51:26 +0000

Handle money with JS

Differentes ways of how to handle money values using JS, some recommended libraries and a custom implementation

I makes this project because I consider that it is necessary to demonstrate how JS can be a technology reliable to use in systems that handle money.JS is not known to have the best reputation in what is the handling of numbers, this in part is due to certain inaccuracies in operations floating point.

Origin:

Surely everyone saw this example: 0.1 + 0.2 = 0.30000000000000004, wow it is something very rare and one would say WTF? But why is this happening? This is due to the IEEE 754 standard, which proposes the use of point numbers
floating binary. I am not going to explain here about this standard, there are hundreds of links that have already
done I leave some.

Does this happen only in JS?

NO! It happens exactly in python and JAVA:

Python code:

The same situation in python.

Java code:

The same situation in JAVA!!

Surprised?

These two languages are reliable to work with numbers, surely yes! so javascript too. They all use the IEEE 754 standard.

How to handle money?

Use decimals and floating point is the best way? I think it is the most natural way when we think about it, but
not necessarily the best, due to the imprecision and rounding of this standard. Here you can read a little about
this https://husobee.github.io/money/float/2016/09/23/never-use-floats-for-currency.html.

Example:
I sell 165 apples at $1.40 per apple. My accounting software uses floating point numbers for the calculation.



>>> 165 * 1.40
230.99999999999997

As you can see in this example, you would need to perform rounding yourself to get the correct number. Here is another common example, you are changing the the price of bananas from $1.01 to $0.99 and need to calculate the lost revenue.



>>> 1.01 - 0.99
0.020000000000000018

Then what do I do?

Well there is a pattern created by Martin fowler https://martinfowler.com/eaaCatalog/money.html, in which
Money is considered as a type of data and not just a simple number.

There is a technique to solve these problems and it is simple, maybe not the best, but it is simple to develop.
and effective. We can transform a decimal value into its representation in cents. In this way we avoid
floating point details.



EXPECTED RESULT
===============
1     ===   $0.01;
10    ===   $0.10;
100   ===   $1.00;
1000  ===  $10.00;
10000 === $100.00;

$1.00 *  $0.01 ===  $0.01
$1.00 *  $0.10 ===  $0.10
$1.00 *  $1.00 ===  $1.00
$1.00 * $10.00 === $10.00

Problems with use INTEGERS?

We do extra operations.
JS does not offer an infinite range of integers Number.MIN_SAFE_INTEGER and Number.MAX_SAFE_INTEGER.

How to do this?

We have to add two values 0.2 and 0.1, if we do it directly with JS we already know that there will be problems.

1) Multiply each value by 100: (0.2 * 100 + 0.1 * 100) = 30 cents.
2) Recover the value to money: (0.2 * 100 + 0.1 * 100) / 100 = 0.3.

Code:

There are several ways we can use libraries like:

Dinero.js, https://dinerojs.com/
Finance.js, http://financejs.org/
Money.js, https://www.npmjs.com/package/moneyjs
Money Safe. https://github.com/ericelliott/moneysafe

Or perform a custom implementation ourselves, if we do we will have to worry about giving support
to these operations. For the moment, we are going to avoid making conversions to other types of currency.

Sum
Subtraction
Division
Multiplication
Same
Minor / Less equal
Greater / Greater equal.

In this link you can see an implementation made by me in vanilla JS of this. https://github.com/damiancipolat/handle_money_in_js/blob/master/simple_money.js



const {
    money,
    isEqual,
    isGt,
    add,
    sub,
    mul 
} = require('./simple_money.js');

const payment = money(100.20);
const loan    = money(15000);
const bill    = money(6000);
const debth   = money(2000.60);

const addRes = add(payment,bill);
console.log(`${payment.number} + ${bill.number} = ${addRes.number}`);

const subRes = sub(loan,debth);
console.log(`${loan.number} + ${debth.number} = ${subRes.number}`);

console.log(`${payment.number} + ${debth.number} = `,isEqual(payment,bill));
console.log(`${payment.number} + ${payment.number} = `,isEqual(payment,payment));

To run:



$ node test.js
100.2 + 6000 = 6100.2
15000 + 2000.6 = 12999.4
100.2 + 2000.6 =  false
100.2 + 100.2 =  true

Basically magic consists in some basic functions:




const Money = (ammount, value) => ammount?{ammount,value:ammount*100}:{ammount:value/100,value};

//Sum function.
const sum = (a,b) => Money(null,a.value+b.value);

//Payment
const payment = Money(30.342141);

//Bill
const bill = Money(30.342141);

//Test
sum(payment,bill) = {ammount: 60.684282, value: 6068.4282}

There is no need for major operations to work with money in a simple system.

Strings and money.

In several countries the representation of money is not standard and differs from how it is in the USA, so how is it handled?

It is very common to have a field in our frontend to deposit money. For example in Argentina, money is represented: $ 100,000.85 the "." Is used as a thousands separator and the "," to separate decimals.

It is very convenient in this case, to take the money to the same way that is how JS uses it. $ 100,000.85 -> 100000.85 with two decimal digits, with this we can save it to our BD or use it for calculations. I call this normalization and it is important that you keep that in mind.

Now having said that we should use the monetary value as its representation in cents, We can also choose to save it in this same form in a database or to do operations.

Round out:

Use two numbers, three numbers? the reality that that depends on the system we are using, in general it is usually rounded up and with two numbers. Math.floor (). The advantage of using pennies is that it gives us a greater degree of certainty than if we used decimals.

Caution! In JS the integers are not infinite, numerical representations can be made between these two values.

Number.MIN_SAFE_INTEGER = -9007199254740991
Number.MAX_SAFE_INTEGER = 9007199254740991

Outside this range, accurate results cannot be assured.

Continure reading

This list of links, was the material used for this project, there are very interesting articles abount number in JS and after how to use it for handle money.

Numbers

Money

Custom exceptions with JS

Damian Cipolat — Fri, 06 Mar 2020 01:07:04 +0000

It is very common languages such as java and c # to create custom exceptions, to differentiate error situations from one another. In JS there is the error object and several other types, but they are for very limited uses.

For that reason there is also the possibility of creating our types of exceptions. To simulate that there is a typing for them. We can do this in a 100% OOP or functional way.

Using CLASS:

We can create custom exceptions for our programs, in this case using OOP class in JS.

Demostration code

class ValidationError extends Error {
  constructor(message) {
    super(message)
    this.name = 'VALIDATION_ERROR'
    this.message = message
  }
}

class PermissionError extends Error {
  constructor(message) {
    super(message)
    this.name = 'PERMISSION_ERROR'
    this.message = message
  }
}

class ExecutionError extends Error {
  constructor(message) {
    super(message)
    this.name = 'EXECUTION_ERROR'
    this.message = message
  }
}

module.exports = {
  ValidationError,
  PermissionError,
  DatabaseError
}

How to use it?

function myThrow(input) {

   if (!input)
     throw new ExecutionError('A execution error');

   return input
}

Using FUNCTIONS:

We can create custom exceptions using a functional programming style.

Demostration code

const ValidationError = (message)=>({
  error: new Error(message),
  code: 'VALIDATION_ERROR'
});

const PermissionError = (message)=>({
  error: new Error(message),
  code: 'PERMISSION_ERROR'
});

const ExecutionError = (message)=>({
  error: new Error(message),
  code: 'EXECUTION_ERROR'
});

Example

const {
  ValidationError,
  PermissionError,
  DatabaseError
} = require('./exceptions.js');

function myThrow(input) {

   if (!input)
     throw ExecutionError('A execution error');

   return input
}

Extending the exception methods:
"Serializing Error objects", I use function to can use the constructor later.

//Define exceptions.
function MyError(message){
  const internal = {
    error: new Error(message),
    code: 'MY_CUSTOM_ERROR'
  };

  return {
    ...internal,
    toJSON:()=>({
      code: internal.code,
      stack: internal.error.stack,
      message
    })
  }
}

MyError.prototype = Object.create(Error.prototype);

Example:

//Launch
throw new MyError('So bad configuration');

//Capturing.
try{

  //.....
  throw new MyError('So bad configuration');  
  //.....

} catch(err){
  console.log('Error',err.toJSON());
}

Real life examples:

Having read the previous examples, it is time to find real examples of exceptions that we could create. I am going to propose some that I have used in past projects.

HTTP error codes

Bad Request
Unauthorized
Not Found
Internal Server Error
Bad Gateway

//Definif exceptions.
const BadRequest = ()=>({
  message: 'Bad Request',
  code:400
});

const Unauthorized = ()=>({
  message: 'Unauthorized',
  code:401
});

const NotFound = ()=>({
  message: 'Not Found',
  code: 404
});

const InternalServerError = ()=>({
  message: 'Internal Server Error',
  code: 500
});

const BadGateWay = ()=>({
  message: 'Bad Gateway',
  code: 502
});

//Define exceptions map.
const exceptionMap = {
  502: BadGateway,
  500: InternalServerError,
  404: NotFound,
  401: Unauthorized,
  400: BadRequest
};

//Using it.
const getUser = async(userId)=>{

  //Make request, this line is just an example, use a real rest client.
  const response = await fetch('http://user.mock/'+userId);

  //Get httpcode.
  const {
    status,
    body
  } = response;

  //Get the exception.
  const exception = exceptionMap[status];

  if (!exception)
    throw exception();
  else
    return body;
}

Bussiness operations

Loan rejected
Loan exced
Loan pending

//We have this custom exceptions
const LoanRejected = (motive, clientId)=>({
  message: 'The loan was rejected',
  code:'LOAN_REJECTED',
  motive,
  clientId
});

const LoanExced = (clientId)=>({
  message: 'The loan ammount exced the limits',
  code:'LOAN_EXCED',
  clientId
});

const LoanPending = ()=>({
  message: 'The client has a loan pending for payment',
  code:'LOAN_PENDING'
});

//I simulate a loan process.
const processate = async(clientId,ammount)=>{

  const status = await getLoanStatus(clientId,ammount);

  //Detect status to reject the loan.
  if (status.code=='REJECTED')
    throw LoanRejected('Status not ready to calc',clienId);

  if (status.code=='UNAVAILABLE')
    throw LoanRejected('Clien banned',clienId);

  if (status.code=='EXCED')
    throw LoanExced();

  //If the client has debts.
  if (status.code=='PENDING')
    throw LoanPending();

  const loanId = await createLoan(clientId);

  return loanId;

}

//And we detect the type of exceptions.
const loanFlow = async (clientId,ammount)=>{

  try{

    const loanId = procesate(clientId,ammount);
    console.log('New loan create',loanId);

  } catch(err){

    if (err.code.includes['LOAN_REJECTED','LOAN_EXCED','LOAN_PENDING'])
      console.log('Loan rejected!!');
    else
      console.log('Problem in process try again later...');

  }

}

Pure dynamic Type check in javascript

Damian Cipolat — Tue, 03 Mar 2020 23:29:43 +0000

Dynamic type check techniques using vanilla JS

In this article I will show 3 ways to make dynamic type check only using Javascript.

What is Dynamic type checking?

Dynamic type checking is the process of verifying the type safety of a program at runtime. Implementations of dynamically type-checked languages generally associate each runtime object with a type tag (i.e., a reference to a type) containing its type information.

So we know that in JS don't exists Type checking, and make STATIC type check maybe is'nt the best idea.

I am going to show you three different ways of how to do this, some are simpler than others but you will surely understand all of them.

1) Assert + Typeof

We will use the typeof function and the nodejs native module ASSERT(https://nodejs.org/api/assert.html).

The idea is to use typeof to validate the content of a variable's primitives vs a parameter that is the type with which we are going to compare. We will use ASSERT to generate an exception that interrupts the normal flow of execution in the scope where the script is executed.

//Include assert.
const assert = require('assert');

//Define datatype constants, to basic js primitive types.
const NUMBER = 'number';
const STRING = 'string';
const DATE   = 'date';
const BOOL   = 'boolean';
const OBJECT = 'object';

//I have created a basic function to avoid use the typeof many times.
const matchType = (data,type) => typeof data===type;

//NUMBER - success
assert(matchType(money,NUMBER),'Bad number format');

//NUMBER - throw exception
assert(matchType(name,NUMBER),'Bad number format');

The example continue in this file https://github.com/damiancipolat/dynamicy-type-check-in-js/blob/master/techniques/using_assert.js

2) Custom validators

In this case I show you an example of how we can create an extensible enumerable with the validations of the types of data we need. Only valid primitive types here.

The idea is to use ASSERT as in point 1 to throw an exception when the rule is not met. We will create a structure in which the types of data that we will use will go as attributes, each one is a function that knows how to validate if the last parameter complies with this type of data or not.

const assert = require('assert');

//Declare our custom type enum with his custom type validators, this could be extended if you want.
const types = {
  NUMBER: (data)=>(typeof data)==='number'&&!isNaN(data),
  STRING: (data)=>(typeof data)==='string',
  DATE:   (data)=>(typeof data)==='date',
  BOOL:   (data)=>(typeof data)==='boolean',
  OBJECT: (data)=>(typeof data)==='object'
};

//This function handle the variable assignation if this is succed return the value if fail throw exception.
const matchType = (value,validator)=>validator(value)?value:assert(false,'INVALID TYPE ASSIGNATION');

/*
  How to use this in a function?
*/
const calcSalary = (baseValue, extraHsValue, workedHs,extraHs)=>{

  const salary = matchType(baseValue*workedHs,types.NUMBER);
  const extras = matchType(extraHsValue*extraHs,types.NUMBER);
  const total  = salary+extras;

  return total;

}

console.log('TEST 1 calc with rigth values, result:',calcSalary(100,150,300,50));

The example continue in this file https://github.com/damiancipolat/dynamicy-type-check-in-js/blob/master/techniques/check_vars.js

3) Function decorator

The idea here is to mix point 1 and 2 in a function decorator, which dynamically extends a new function that mixes its normal behavior with an aggregate of data type validation.

In this case I aim to create a security layer for existing functions, in which we can ensure that at the time of execution, the type check is first performed and if it fails not to continue with the execution.

What is a decorator? OOP definition

In object-oriented programming, the decorator pattern is a design pattern that allows behavior to be added to an individual object, dynamically, without affecting the behavior of other objects from the same class. Ok but Js is not OOP, so we have to adapt this concept in something similar.

How to decorate a function?

With something like that:

const decorate = (types) => (fn)=>(...args)=>{

  //...Do something with the types...

  //Run the parameter function
  return fn(...args);

}

//Test function.
const hello = (name)=>console.log('Hello',name);

//Crate a new function.
const newTest = decorate(['string'],hello);

//Run the new function.
newTest('Damian');

What is a higher order function?

A higher order function is a function that takes a function as an argument, or returns a function . Higher order function is in contrast to first order functions, which don't take a function as an argument or return a function as output

This is an example:

//TYPE ENUMERATOR.
const types = {
  NUMBER: (data)=>(typeof data)==='number'&&!isNaN(data),
  STRING: (data)=>(typeof data)==='string',
  DATE:   (data)=>(typeof data)==='date',
  BOOL:   (data)=>(typeof data)==='boolean',
  OBJECT: (data)=>(typeof data)==='object'
};

//Parameter type validator.
const validate = (types,args)=>{

  if (types.length!=args.length)
    throw new Error('Type array and parameter length dont match');

  const matchAll = types.every((typeFn,i)=>typeFn(args[i]));

  if (!matchAll)
    throw new Error('Error in parameter validation',args,Object.keys(types));

  return true;

}

//Decorator function receive a type list and a function to process.
const decorate = (types) => (fn)=>(...args)=>{

  validate(types,args);  
  return fn(...args);

}

//TEST

//Business logic function.
const calculateTaxes = (baseAmmount,workedHs,extraHs) => (baseAmmount*workedHs)+((extraHs/2)*baseAmmount);

//Decorate business function with a dynamic type check LAYER.
const typedTaxesFn = decorate([
  types.NUMBER,
  types.NUMBER,
  types.NUMBER
])(calculateTaxes);

//Execute the function using the new layers.
console.log('TAXES',typedTaxesFn(1000,20,10));

The example continue in this file https://github.com/damiancipolat/dynamicy-type-check-in-js/blob/master/techniques/function_decorator.js

BONUS:

The typedef function is very limited, I have founded a way of how to create a better typedef function, this is the code "typeofB":

const typeOfB = (value)=>Object.prototype.toString.call(value).split("]")[0].split(" ")[1].toLowerCase();

Using "typeOfB", please take a look in response using an array, undefined and null types.

typeOfB(true);
"boolean"
typeOfB(1);
"number"
typeOfB(100.22);
"number"
typeOfB("Hello");
"string"
typeOfB(new Date());
"date"
typeOfB([1,2,3,4]);
"array"
typeOfB({name:'Damian',age:32});
"object"
typeOfB(undefined);
"undefined"
typeOfB(null);
"null"

Avoid use IF on our JS scripts

Damian Cipolat — Mon, 02 Mar 2020 01:37:58 +0000

Well, I write this article because lately I was dealing with source code in js that had an excessive amount of if statement,
at levels that I had never seen. That is why I think it is very important to share these simple techniques that will help us to write code without having to think about the "if" when deciding.

I am going to explain 6 ways on how to do this. The idea of this is not to enter into paranoia of never using IF, it is to open the head to new ways of thinking about our decisions in JS.

1) Ternary operator:

We are talking about this "condition ? expr1 : expr2", very easy.

Example 1:

Code with IF:

function saveCustomer(customer) {
  if (isCustomerValid(customer)) {
    database.save(customer)
  } else {
    alert('customer is invalid')
  }
}

Refactored code:

function saveCustomer(customer) {
  return isCustomerValid(customer)
    ? database.save(customer)
    : alert('customer is invalid')
}

ES6 style:

const saveCustomer = customer =>isCustomerValid(customer)?database.save(customer):alert('customer is invalid')

Example 2:

Code with IF:

function customerValidation(customer) {
  if (!customer.email) {
    return error('email is require')
  } else if (!customer.login) {
    return error('login is required')
  } else if (!customer.name) {
    return error('name is required')
  } else {
    return customer
  }
}

Refactored code:

// ES6 style custom formatted ternary magic
const customerValidation = customer =>
  !customer.email   ? error('email is required')
  : !customer.login ? error('login is required')
  : !customer.name  ? error('name is required')
                    : customer

Example 3:

Code with IF:

function getEventTarget(evt) {
    if (!evt) {
        evt = window.event;
    }
    if (!evt) {
        return;
    }
    const target;
    if (evt.target) {
        target = evt.target;
    } else {
        target = evt.srcElement;
    }
    return target;
}

Refactored code:

function getEventTarget(evt) {
  evt = evt || window.event;
  return evt && (evt.target || evt.srcElement);
}

⮬ back to top

2) Short circuit:

It is a technique that uses the AND and OR operators to evaluate expressions.

https://codeburst.io/javascript-short-circuit-conditionals-bbc13ac3e9eb

true || true;
// true
true || false;
// true
false || false;
// false

Example 1:

Code with IF:

const isOnline = true;
const makeReservation= ()=>{};
const user = {
    name:'Damian',
    age:32,
    dni:33295000
};

if (isOnline){
    makeReservation(user);
}

Refactored code:

const isOnline = true;
const makeReservation= ()=>{};
const user = {
    name:'Damian',
    age:32,
    dni:33295000
};

//Apply the short circuit to avoid the if.
isOnline&&makeReservation(user);

Example 2:

Code with IF:

const active = true;
const loan = {
    uuid:123456,
    ammount:10,
    requestedBy:'rick'
};

const sendMoney = ()=>{};

if (active&&loan){
    sendMoney();
}

Refactored code:


const active = true;
const loan = {
    uuid:123456,
    ammount:10,
    requestedBy:'rick'
};

const sendMoney = ()=>{};

//Apply short circuit in this case, the loan is evaluated true because !=undefined
active && loan && sendMoney();

⮬ back to top

3) Function delegation:

This technique mix the short circuit and separation code block with functions.

Example 1:

Code with IF:

function itemDropped(item, location) {
    if (!item) {
        return false;
    } else if (outOfBounds(location) {
        var error = outOfBounds;
        server.notify(item, error);
        items.resetAll();
        return false;
    } else {
        animateCanvas();
        server.notify(item, location);
        return true;
    }
}

Refactored code:

function itemDropped(item, location) {
    const dropOut = function() {
        server.notify(item, outOfBounds);
        items.resetAll();
        return false;
    }

    const dropIn = function() {
        server.notify(item, location);
        animateCanvas();
        return true;
    }

    return !!item && (outOfBounds(location) ? dropOut() : dropIn());
}

⮬ back to top

4) Non branching strategy:

This technique try to avoid the use of switch statemente. The idea is to create a map with keys/values and using a function
to access the value of the key passed as parameter.

The idea came from this link: https://medium.com/chrisburgin/rewriting-javascript-replacing-the-switch-statement-cfff707cf045

Example 1:

Code with SWITCH:

switch(breed){
    case 'border':
        return 'Border Collies are good boys and girls.';
        break;  
    case 'pitbull':
        return 'Pit Bulls are good boys and girls.';
        break;  
    case 'german':
        return 'German Shepherds are good boys and girls.';
        break;
    default:
        return 'Im default'

}

Refactored code:


const dogSwitch = (breed) =>({
  "border": "Border Collies are good boys and girls.",
  "pitbull": "Pit Bulls are good boys and girls.",
  "german": "German Shepherds are good boys and girls.",  
})[breed]||'Im the default';


dogSwitch("border xxx")

⮬ back to top

5) Functions as Data:

We know that in JS the function are first class, so using it we can split the code into a function objects.

Example 1:

Code with IF:


const calc = {
    run: function(op, n1, n2) {
        const result;
        if (op == "add") {
            result = n1 + n2;
        } else if (op == "sub" ) {
            result = n1 - n2;
        } else if (op == "mult" ) {
            result = n1 * n2;
        } else if (op == "div" ) {
            result = n1 / n2;
        }
        return result;
    }
}

calc.run("sub", 5, 3); //2

Refactored code:

const calc = {
    add : function(a,b) {
        return a + b;
    },
    sub : function(a,b) {
        return a - b;
    },
    mult : function(a,b) {
        return a * b;
    },
    div : function(a,b) {
        return a / b;
    },
    run: function(fn, a, b) {
        return fn && fn(a,b);
    }
}

calc.run(calc.mult, 7, 4); //28

⮬ back to top

5) Polymorphism:

Polymorphism is the ability of an object to take on many forms. The most common use of polymorphism in OOP occurs when a parent class reference is used to refer to a child class object.

Example 1:

Code with IF:

const bob = {
  name:'Bob',
  salary:1000,
  job_type:'DEVELOPER'
};

const mary = {
  name:'Mary',
  salary:1000,
  job_type:'QA'
};

const calc = (person) =>{

    if (people.job_type==='DEVELOPER')
        return person.salary+9000*0.10;

    if (people.job_type==='QA')
        return person.salary+1000*0.60;
}

console.log('Salary',calc(bob));
console.log('Salary',calc(mary));

Refactored code:

//Create function to different behaviour, same parameter call.
const qaSalary  = (base) => base+9000*0.10;
const devSalary = (base) => base+1000*0.60;

//Add function to the object.
const bob = {
  name:'Bob',
  salary:1000,
  job_type:'DEVELOPER',
  calc: devSalary
};

const mary = {
  name:'Mary',
  salary:1000,
  job_type:'QA',
  calc: qaSalary
};

//Same call.
console.log('Salary',bob.calc(bob.salary));
console.log('Salary',mary.calc(mary.salary));

⮬ back to top

Readings:

A list of interesting links about this same topic.

Visit my github for more projects!!
https://github.com/damiancipolat?tab=repositories

TL;DR - Docker

Damian Cipolat — Fri, 28 Feb 2020 01:12:36 +0000

Learning-Docker

Usare este artículo para compartir comandos / notas / codigos / etc, que vengo usando para aprender docker.

Instalación:

Forma 1 de instalar docker:


  apt-key adv --keyserver \
  hkp://pgp.mit.edu:80 \
  --recv-keys 58118E89F3A912897C070ADBF76221572C52609D

  nano /etc/apt/sources.list.d/docker.list
  #agregar: deb https://apt.dockerproject.org/repo debian-jessie main

  apt-get install apt-transports-https

  apt-get update
  apt-cache policy docker-engine
  apt-get install docker-engine

Forma 2 de instalar docker:

sudo apt-get remove docker-engine
curl -sSL https://get.docker.com/ | bash

Lista de comandos:

Agregar usuario para docker:

  groupadd docker
  usermod -aG docker damianlimux
  id damianlinux

Version de docker:

  docker --version

Imagenes descargadas:

  docker --images

Ver containers activos:

  docker ps

Ver containers y detalles:

  docker ps -a

Ejecutar un container:

  docker run <img> <cmd>

Ejecutar definiendo el nombre a un container:

  docker run -d -P --name web <img> <cmd>

Ejecutar un container pero sin que termine y acceso por terminal:

  docker run -t -i <img> <cmd>

Ejecuntar un container pero como daemon:

  docker run -d <img> <cmd>

Ejecutar un container bindeando puertos (bindea puertos de forma random):

  docker run -d -P <img> <cmd>

Ejecutar un container definiendo que puertos bindear (portHost:portContainer):

  docker run -d -p 5000:5000 <img> <cmd>

Ejecutar un container bindeando ip/puerto/protocolo del host:

  docker run -d -p 127.0.0.1:5000:5000/tcp 27.0.0.1:514:514/udp <img> <cmd>

Detener un container:

  docker stop <id>

Reinicar un container:

  docker restart <id container>

Ver log de ejecución de un container:

  docker logs <container_name>/id

Ver que puerto esta bindeado un container:

  docker port <id container>

Eliminar un container:

  docker rm <id container>/<container name>

Ver que procesos se ejecuta dentro de un container:

  docker top <id container>

Inspeccionar contenido de un container:

  docker inspect <id container>

Usefull command list:


#List running or stopped containers.
docker ps -a

#List the images downloaded.
docker images

#Download an image, example linux alpine.
docker pull alpine

#Remove an image.
docker rmi alpine

#Remove all images.
docker rmi $(docker images -q)

#Create a container.
docker run alpine

#Delete container.
docker rm <container_name/container_id>

#Remove all containers
docker rm $(docker ps -aq)

#Restart container.
docker container restart <container_name/container_id>

#Stop container
docker stop <container_id>

#Stop all containers
docker stop $(docker ps -aq)

#Run container define custom name.
docker run --name web

#Run container detached mode
docker run -d alpine

#Run container port mapping.
docker run -p 8080:3000 alpine

¿How to include custom source code in container?, use a volume

#Run container and define volume mapping.
docker run -p 8080:3000 /var/www:/var/test node

#Run container and define volumen and start commnad and working directory
docker run -p 8080:9000 /var/test:/var/test -w "/var/test" --name api node npm start

¿How to create a custom image?

#Create a docker file
touch dockerfile

#Add this content to the dockerfile
FROM node:latest

MAINTAINER damian.cipolat@gmail.com

ENV NODE_ENV=production
ENV PORT=3000

COPY    . /var/www
WORKDIR /var/www

VOLUME ["/var/www"]

RUN    npm install

EXPOSE 3000

ENTRYPOINT ["npm","start"]

#Buil the image, set the name 'damcipolat/node'
docker build -f dockerfile -t damcipolat/node .

docker login
username: damcipolat
password: sxxxxx

¿How to publish images in docker hub?, is necesesary stay logged.

docker push damcipolat/node

Algunos links de mi repositorio en GITHUB:

Nodejs Design Pattern

Damian Cipolat — Fri, 28 Feb 2020 01:06:14 +0000

Nodejs-Design-Pattern

"Este repositorio esta pensado para que sea más como un resumen de contenidos que alojar proyectos de codígo."

Pondre ejemplos base de cada patron y agregados por mi.

Lista de patrones:

Factory
Proxy
Decorator
Adapter
Strategy
State
Template
Middleware
Command
Singleton
Universal

La forma de escribir estos patrones de diseño no es igual que en JAVA y C#, pero la escencia es la misma, es es debido a que en este lenguaje predominan más los conceptos de la programación funcional que de la programación orientada a objetos.

Voy adaptar los ejemplos de codigo js del libro al estandar ES6.

Factory:

Una fabrica nos permite separarm la creación dew un objeto de su implementación, esencialmente, la fabrica encapsula la creación de una nueva instancia, dandonos más flexibilidad y control en la manera de que hacemos esto.

Un ejemplo base es el siguiente, para ver otros ir a factory.js:


class person{

    constructor(name,surname,age,sex){

      this.name = name;
      this.surname = surname;
      this.age = age;
      this.sex = sex;

    }

}

class personFactory{

   constructor(name,surname,age,sex){

      this.name    = null;
      this.surname = null;
      this.age = null;
      this.sex = null;

    }

    setName(name){
        this.name = name;
    }

    setSurname(surname){
        this.surname = surname;
    }

    setAge(age){
        this.age = age;
    }    

    setSex(sex){
        this.sex = sex;
    }

    build(){

        return new person(this.name,this.surname,this.age,this.sex);

    }

}

let fabrica = new personFactory();
fabrica.setName('Damián');
fabrica.setSurname('Cipolat');
fabrica.setAge(30);
fabrica.setSex('M');

let damian = fabrica.build();

console.log(damian);

Proxy:

Un proxy es un objeto que controla el acceso a otro llamado sujeto.
El proxy y el sujeto llamado tienen una interaz identica y estos nos permite trabajar trasparentemente con el,
intercerpta todas o algunas operaciones que se pretenden ejecutar al objeto sujeto.

Podemos considerar usar proxy para estos ejemplos:

Validación de datos: El proxy valida la entrada antes de enviarla al sujeto.
Seguridad: El proxy verifica que el cliente este autorizado a realizar una operación al sujeto antes de pasarselo.
Cache: El proxy mantiene una cache interna de las operaciones ejecutadas en el sujeto, la operación es ejecutada si no se encuentra en la cache.
Lazy initialization: Si la creación del sujeto es muy complicada, el proxy puede frenar esto solo cuando es necesario.
Logeo: El proxy intercepta la invocación a metodos del sujeto y graba los parametros de entrada y las salidas.
Objetos remotos: El proxy puede tomar el objeto que esta ubicado remotamente y lo hace aparecer como si fuera local.

Un ejemplo base es el siguiente, para ver otros ir a proxy.js:


class subject{

  hello(){
    return 'hello';
  }

  goodbye(){
    return 'Goodbye people!';
  }

}

class Proxy(subject){

  constructor(subject){
    this.subject = subject;
  }

  hello(){
    return this.subject.hello()+' world!';
  }

  goodbye(){
    return this.subject.goodbye();
  }

}

let tmpsubj = new subject();
let proxy   = new Proxy(tmpsubj);

console.log(proxy.hello());
console.log(proxy.goodbye());

Decorator:

Decorator es un patron estructural, consiste en aumentar dinamicamente el comportamiento de un objeto existente.
Es diferente de la herencia claisca, por que el comportamiento no es agregado a todos los objetos de la misma clase.

La implementación es muy similar al patron proxy, pero en lugar de mejorar o modificar el comportamiento de la interfaz existente del objeto, este incrementea con nuevas funcionaliodades.

Un ejemplo base es el siguiente, para ver otros ir a decorator.js:

class person(){

  hello(){
    return 'hello world';
  }

  greetings(){
    return 'greetings people';
  }

}

class personDecorator{

  constructor(component){
    this.component = component;
  }

  hello(){
    return this.component.hello();
  }

  greetings(){
    return this.component.greetings();
  }

  jump(){
    return this.component.hello() + this.component.greetings();
  }

}

let damian      = new person();
let decorPeople = new personDecorator(damian);

damian.hello();
damian.greetings();

console.log(damian.jump());

Adapter:

El patron adaptador nos permite acceder a la funcionalidad de un objeto que usa una interfaz diferente.
Como el nombre nos dice adapta al objeto que usa una interfaz distinta, para que podamos usarlo con una misma interfaz.

Un ejemplo base es el siguiente, para ver otros ir a adapter.js:

//Interfaz antigua
class shipping{
  request(zipStart, zipEnd, weight)=>{        
        return "$49.75";
  }
}

//Interfaz nueva.
class AdvancedShipping() {
    login(credentials){ /* ... */ };
    setStart(start){ /* ... */ };
    setDestination(destination) { /* ... */ };
    calculate(weight) { return "$39.50"; };
}

//Adaptador 
class ShippingAdapter(credentials) {

  constructor(){
    this.shipping = new AdvancedShipping();  
    this.shipping.login(credentials);
  }

  request(zipStart, zipEnd, weight) {    
    this.shipping.setStart(zipStart);
    this.shipping.setDestination(zipEnd);

    return this.shipping.calculate(weight);
  }

}

let credentials = {token: "30a8-6ee1"};
let adapter     = new ShippingAdapter(credentials);
let cost        = adapter.request("78701", "10010", "2 lbs"); 

console.log(cost);

Strategy:

El patron strategy permite encapsular un algoritmo en una clase, los cuales tienen la misma interfaz y son
intercambiables según la situacion. Podemos definir una familia de algormitmos encapsulados en un objeto.

Un ejemplo base es el siguiente, para ver otros ir a strategy.js:


class alumnHard{

  constructor(){
    this.iq = 90;
    this.studyPower = 100;
  }

  studyStat(){
    return this.iq+this.studyPower;
  }

}

class alumnLazy{
  constructor(){
    this.iq = 20;
    this.studyPower = 50;
    this.funLevelr  = 90;
  }

  studyStat(){
    return (this.iq+this.studyPower)-this.funLevel;
  }
}

class test{  
  constructor(){
    this.alumn = null;
  }

  setAlumn(alumn){
    this.alumn = alumn;
  }

  make(){
    this.alumn.study();
  }
}

let mathTest = new test();

mathTest.setAlumn(new alumnLazy());
mathTest.make();

mathTest.setAlumn(new alumnHard());
mathTest.make();

State:

El patron state es una variacón del patron strategy, donde los cambios dependen del estado y hay un algoritmo encapsulado
que es usando en cada estado.

Un ejemplo base es el siguiente, para ver otros ir a state.js:

const OfflineState = require('./offlineState');
const OnlineState  = require('./onlineState');

const FailsafeSocket =(options)=>{ 
   this.options = options;
   this.queue = [];
   this.currentState = null;
   this.socket = null;
   this.states = {
   offline: new OfflineState(this),
   online: new OnlineState(this)
   }

  this.changeState('offline');

}

FailsafeSocket.prototype.changeState = (state)=>{

 console.log('Activating state: ' + state);
 this.currentState = this.states[state];
 this.currentState.activate();
}

FailsafeSocket.prototype.send = (data)=>{
 this.currentState.send(data);
}

exports default (options)=>{
  return new FailsafeSocket(options);
}

Template:

El patron template consiste en definir una clase abstracta que representa el esquelete de un algoritmo donde alguno
de sus pasos no son definidos, las subclases que lo hereden implementaran estos pasos sin definir.

Un ejemplo base es el siguiente, para ver otros ir a template.js:

var fs = require('fs');
var objectPath = require('object-path');

class ConfigTemplate{

  read(file)=>{
   console.log('Deserializing from ' + file);
   this.data = this._deserialize(fs.readFileSync(file, 'utf-8'));
  }

  save(file){
   console.log('Serializing to ' + file);
   fs.writeFileSync(file, this._serialize(this.data));    
  }

  get(path){
    return objectPath.get(this.data, path);
  }

  set(path, value){
    return objectPath.set(this.data, path, value);   
  }

  _serialize(){
    throw new Error('_serialize() must be implemented');   
  }

  _deserialize(){
     throw new Error('_deserialize() must be implemented');
 }

}

export default ConfigTemplate;

Middleware:

El patron consiste en definir una lista de funciones, en las que se define un pipe, en que la salida de una función es la entrada de la siguiente.

Un ejemplo base es el siguiente, para ver otros ir a middleware.js:

class product{
  constructor(country,price,type){
    this.country = country;
    this.prices  = price;
    this.type    = type;
  }
}

const totalTax = 0;

const taxOrigin = (product) =>{

  if (product.country=='ARG')
    totalTax += 100;
  else
    totalTax += 300;

}

const taxPrices = (product) =>{

  if (product.prices>100)
    totalTax += 80;
  else
    totalTax += 200;

}

const taxType = (product)=>{

  if (product.type=='ELECTRO')
    totalTax += 80;

  if (product.type=='FOOD')
    totalTax += 280;

  if (product.type=='DRINKS')
    totalTax += 580;

}

let articles = [new product('ARG',100,'ELECTRO'),
                new product('USA',400,'FOOD'),
                new product('EUA',40,'DRINKS')];

let functions = [taxOrigin,taxPrices,taxType];

articles.forEach((article)=>{

  functions.forEach((funcCalc)=>{
    totalTax += funcCalc(article);
  });

});

Command:

En su mayor definición genérica, podemos considerar un comando como cualquier objeto que encapsula todo el
información necesaria para realizar una acción en un momento posterior. Entonces, en lugar de invocar un método o una función directamente, creamos un objeto que representa la intención de realizar tal invocación; será responsabilidad de otro componente
materializar la intención, transformándola en una acción real.

Un ejemplo base es el siguiente, para ver otros ir a command.js:


const add=(x, y)=> { return x + y; }
const sub=(x, y)=> { return x - y; }
const mul=(x, y)=> { return x * y; }
const div=(x, y)=> { return x / y; }

const Command = (execute, undo, value)=> {
    this.execute = execute;
    this.undo = undo;
    this.value = value;
}

const AddCommand = (value)=>{
    return new Command(add, sub, value);
};

const SubCommand = (value)=>{
    return new Command(sub, add, value);
};

const MulCommand =  (value)=> {
    return new Command(mul, div, value);
};

const DivCommand =  (value)=> {
    return new Command(div, mul, value);
};

const Calculator = function () {
    let current = 0;
    let commands = [];

    const action=(command)=> {
        var name = command.execute.toString().substr(9, 3);
        return name.charAt(0).toUpperCase() + name.slice(1);
    }

    return {
        execute: function (command) {
            current = command.execute(current, command.value);
            commands.push(command);
            log.add(action(command) + ": " + command.value);
        },

        undo: function () {
            var command = commands.pop();
            current = command.undo(current, command.value);
            log.add("Undo " + action(command) + ": " + command.value);
        },

        getCurrentValue: function () {
            return current;
        }
    }
}



function run() {

    var calculator = new Calculator();

    calculator.execute(new AddCommand(100));
    calculator.execute(new SubCommand(24));
    calculator.execute(new MulCommand(6));
    calculator.execute(new DivCommand(2));

    calculator.undo();
    calculator.undo();

}

Singleton:

El Singleton es quizás el más sencillo de los patrones que se presentan en el catálogo del GoF (disponible en el libro Patrones de Diseño y analizado previamente en "Patrones y Antipatrones: una introducción"). Es también uno de los patrones más conocidos y utilizados. Su propósito es asegurar que sólo exista una instancia de una clase.

En nodejs los modulos pueden considerarse también como implementaciones del patron singleton.

Un ejemplo base es el siguiente, para ver otros ir a singleton.js:

exports = module.exports = (function () {

  var instance;

  function init() {
    return {

      extend: function extend(extension, obj){
        for (var key in extension){
          obj[key] = extension[key];
        }
      }
    };
  };

  return {

    getInstance: function () {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

Universal:

En Node.js, sabemos perfectamente que los módulos CommonJS son los predeterminados
mecanismo para establecer dependencias entre componentes. La situación en
el espacio del navegador lamentablemente está mucho más fragmentado:

Es posible que tengamos un entorno sin ningún sistema de módulos, que significa que los globales son el mecanismo principal para acceder a otros módulos.
Es posible que tengamos un entorno basado en un Asincrónico Cargador de definición de módulo (AMD), como por ejemplo, RequireJS
(http://requirejs.org)
Es posible que tengamoszun entorno que abstraiga el sistema del módulo CommonJS.

Afortunadamente, hay un conjunto de patrones llamado Universal Module Definition (UMD) que puede ayudarnos a abstraer nuestro código del sistema de módulos utilizado en el entorno.

Un ejemplo base es el siguiente, para ver otros ir a universal.js:

(function(root, factory) { //[1]
 if(typeof define === 'function' && define.amd) { //[2]
 define(['mustache'], factory);
 } else if(typeof module === 'object' && //[3]
 typeof module.exports === 'object') {
 var mustache = require('mustache');
 module.exports = factory(mustache);
 } else { //[4]
 root.UmdModule = factory(root.Mustache);
 }
}(this, function(mustache) { //[5]
 var template = '<h1>Hello <i>{{name}}</i></h1>';
 mustache.parse(template);

 return {
 sayHello:function(toWhom) {
 return mustache.render(template, {name: toWhom});
 }
 };
}));

Functional programming in Javascript

Damian Cipolat — Fri, 28 Feb 2020 01:00:04 +0000

Functional programming in Javascript

I have been a javascript programmer for a long time and I have seen this language grow, from a simple tool to validate forms with jquery, to be able to create large backend platforms. Since ES6 appeared and the ability to add "classes" I see that it has only caused a confusion in the way of programming, making a javascript code as a migration from java.

Since I came across functional programming I saw how it adapts perfectly to the potential of javascript and how it achieves a much better clarity in the way of writing code.

What is functional programming (FP)?:

In computer science, functional programming is a programming paradigm—a style of building the structure and elements of computer programs—that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. It is a declarative programming paradigm in that programming is done with expressions or declarations instead of statements. In functional code, the output value of a function depends only on its arguments, so calling a function with the same value for an argument always produces the same result. This is in contrast to imperative programming where, in addition to a function's arguments, global program state can affect a function's resulting value. Eliminating side effects, that is, changes in state that do not depend on the function inputs, can make understanding a program easier, which is one of the key motivations for the development of functional programming.

https://en.wikipedia.org/wiki/Functional_programming

In this repository we will learn about this concepts:

Lazy evaluation
Monoid
Monad
Functor
Curry
Lambda
Recursion
Closure
Stateless
Compose
High order functions
Pure functions
First Class
Side effects

Readings

There are some very interesting links to read after my notes:

Lazy evaluation

Definition:

Lazy evaluation, or call-by-need is an evaluation strategy which delays the evaluation of an expression until its value is needed (non-strict evaluation) and which also avoids repeated evaluations.

Code example:

Lazy evaluation is the process of deferring the evaluation of an expression until later, and this can be done with thunks.

Example 1:

// Not lazy
var value = 1 + 1  // immediately evaluates to 2

// Lazy
var lazyValue = () => 1 + 1  // Evaluates to 2 when lazyValue is *invoked*

Example 2:

// Not lazy
var add = (x, y) => x + y
var result = add(1, 2)  // Immediately evaluates to 3

// Lazy
var addLazy = (x, y) => () => x + y;
var result = addLazy(1, 2)  // Returns a thunk which *when evaluated* results in 3.

Example 3:

// Curried add (not lazy)
var add = x => y => x + y
var add3 = add(3)
var result = add3(7)  // Immediately evaluates to 10

Example 4:

// Not lazy
var callApi = spec => fetch(spec.url, spec.options);
var result = callApi({url: '/api', options: {}});

// Lazy
var callApiLazy = spec => () => fetch(spec.url, spec.options);
var result = callApiLazy({url: '/api', options: {}});

Monoid:

Definition:

It describes a set of elements which has 3 special properties when combined with a particular operation, often named concat.

The operation must combine two values of the set into a third value of the same set. If a and b are part of the set, then concat(a, b) must also be part of the set. In category theory, this is called a magma.
The operation must be associative: concat(x, concat(y, z)) must be the same as concat(concat(x, y), z) where x, y, and z are any value in the set. No matter how you group the operation, the result should be the same, as long as the order is respected.
The set must possess a neutral element in regard to the operation. If that neutral element is combined with any other value, it should not change it. concat(element, neutral) == concat(neutral, element) == element.

Code example:

Monoid examples, could be STRING concat, NUMBER addition, FUNCTIONS composition, Async composition.

Example 1 - Strings:

const concat = (a, b) => a.concat(b);

concat("hello", concat(" ", "world")); // "hello world"
concat(concat("hello", " "), "world"); // "hello world"

concat("hello", ""); // 'hello'
concat("", "hello"); // 'hello'

Example 2 - Numbers

(1 + 2) + 3 == 1 + (2 + 3); // true

x + 0; // x

Example 2 - Functions

const compose = (func1, func2) => arg => func1(func2(arg));

const add5   = a => a + 5;
const double = a => a * 2;

const doubleThenAdd5 = compose(add5,double);
doubleThenAdd5(3); // 11

Monad:

Definition:

todo pending

Code example:

todo pending

Example 1:

todo pending

Functor:

Definition:

A functor is simply something that can be mapped over. Is anything that can be use a map, in practice a functor represents a type that can be mapped over..

Code example:

In other words, is any object we can MAP and apply a function generating another object instance of the same type and connections.

Example 1:

[1, 2, 3].map(val => val * 2); //generates [2, 4, 6], Array  is a functor.

Example 2:

// A map of Number -> String
const numberToString = num => num.toString()

Example 3:

const Identity = value => ({
  map: fn => Identity(fn(value)),
});
const myFunctor = Identity(1);
myFunctor.map(trace); // 1
myFunctor.map(myFunction).map(trace); // 2

Pure functions:

Definition:

A function is a process which takes some input, called arguments, and produces some output called a return value.

Code example:

There are Impure and pure functions, if a function modify something extern to the return cause a side effect.

Given the same input, will always return the same output.
Produce no side effects.

Example 1:

//Some examples of pure functions.
const add = (x, y) => x+y;
const sub = (x, y) => x-y;

//Not pure functions
let tmp = 2;

const concat = (a,b)=>{
 tmp = 3;
 return a+b;
};

Example 2:

const double = x => x * 2;

Example 3:

function add(a, b) {
  return a + b;
}

function mul(a, b) {
  return a * b;
}

let x = add(2, mul(3, 4));

Side effects:

Definition:

A side effect is any application state change that is observable outside the called function other than its return value.

Modifying any external variable or object property (e.g., a global variable, or a variable in the parent function scope chain).
Logging to the console.
Writing to the screen.
Writing to a file.
Writing to the network.
Triggering any external process.
Calling any other functions with side-effects.

Code example:

Side effects are mostly avoided in functional programming, which makes the effects of a program much easier to understand, and much easier to test.

Example 1:

let default = '';

const run = ()=>{
 default = '1111;
 return 'aaaaaaaa';
}

run();

Example 2:

let counter = 0;

const sum = (a,b)=>{
  counter++;
  return a+b;
}

Referential transparency:

Definition:

In programming, referential transparency is generally defined as the fact that an expression, in a program, may be replaced by its value (or anything having the same value) without changing the result of the program. This implies that methods should always return the same value for a given argument, without having any other effect.

Code example:

Side effects are mostly avoided in functional programming, which makes the effects of a program much easier to understand, and much easier to test.

Example 1:

int add(int a, int b) {
    return a + b
}

int mult(int a, int b) {
    return a * b;
}

// 1) The expression is add(2, mult(3, 4)).
// 2) If we replace mult(3,4) with his result 12.
// 3) We can make this add(2, 12) === add(2, mult(3, 4))

High order functions:

Definition:

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

Code example:

In Javascript, functions are values ( first-class citizens ). This means that they can be assigned to a variable and/or passed as a value..

Example - Map:

const double = n => n * 2

//The map function is a high order function.
[1, 2, 3, 4].map(double); // [ 2, 4, 6, 8 ]

Example - Filter:

let isBoy = student => student.sex === 'M';

//Filter is high order function.
let getBoys = grades =>grades.filter(isBoy);

Example - Custom:

const ivaTax = (a)=> ((a*21)/100);

//Calc is high order function.
const calc = (ammount, tax) => tax(ammount);

//Use
calc(100.50,ivaTax);

First-Class function:

Definition:

I think is important to write about this concept, maybe is'nt from a Fp, but is interesting. First-class functions, meaning that functions are treated like any other first-class object — they can be stored in variables, passed around, returned from other functions, and even hold their own properties. Sometimes referred to as a first-class citizen, is an object that supports all of the operations generally allowed to other objects.

In fact, JavaScript functions are themselves types of objects. A first-class function can thus be expected to support the same operations we would expect from other objects.

Be stored in a variable.
Be passed as arguments to functions.
Be returned by functions.
Be stored in some data structure.
Hold their own properties and methods.

Code example:

For the JavaScript programmer this means that you can take advantage of powerful design patterns such as higher-order functions, partial function application, callbacks, and more.

Example - stored function:

const sayHi = (name)=>console.log('HI',name);
sayHi('Damian');

Example - passed as argument:

const tax = (tax)=>(tax*21)/100;
const buy = (value,taxes)=> value+taxes(value);

//Use
buy(100,tax);

Example - stored in structures:

const tax = (tax)=>(tax*21)/100;
const buy = (value,taxes)=> value+taxes(value);

const scooter = {
 ammount:100,
 buy,
 tax
};

//Use
scooter.buy(scooter.value,scooter.tax);

Recursion:

Definition:

Recursion is a technique for iterating over an operation by having a function call itself repeatedly until it arrives at a result. Most loops can be rewritten in a recursive style, and in some functional languages this approach to looping is the default.

Code example:

JavaScript’s functional coding style does support recursive functions, we need to be aware that most JavaScript compilers are not currently optimized to support them safely.

We can use filter, map, reduce, foreach high order functions to make recursion in JS.

Example 1:

const countdown = (value) => (value>0)?countdown(value-1):value;

Example 2:

const factorial = (number) => (number<=0)?1:(number*factorial(number-1));

CAUTION:

Could be possible, using this functions to cause a stackoverflow in the call stack of the JS engine.

RangeError: Maximum call stack size exceeded:

countdown(100000)

Uncaught RangeError: Maximum call stack size exceeded
    at countdown (<anonymous>:1:19)
    at countdown (<anonymous>:1:40)
    at countdown (<anonymous>:1:40)
    at countdown (<anonymous>:1:40)
    at countdown (<anonymous>:1:40)
    at countdown (<anonymous>:1:40)
    at countdown (<anonymous>:1:40)
    at countdown (<anonymous>:1:40)
    at countdown (<anonymous>:1:40)
    at countdown (<anonymous>:1:40)

SOLUTION - TRAMPOLINE:

Exists a technique call TRAMPOLINE to solve this situation.

Some links of this topic:
https://eddmann.com/posts/recursive-functions-using-a-trampoline-in-javascript/
https://medium.com/@cukejianya/functional-js-trampolines-tails-88723b4da320
https://en.wikipedia.org/wiki/Trampoline_%28computing%29
https://raganwald.com/2013/03/28/trampolines-in-javascript.html

Code examples:


//TRAMPOLINE
const trampoline = (fn) => {
    while (typeof fn === 'function') {
        fn = fn();
    }
    return fn;
};

//Test functions
const odd  = (n) => () => n === 0 ? false : even(n - 1);
const even = (n) => () => n === 0 ? true : odd(n - 1);

//Use
trampoline(factorial(100000)) // BigInt required

Closure:

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
https://developer.mozilla.org/es/docs/Web/JavaScript/Closures

Stateless:

Definition:

Stateless programming is a paradigm in which the operations (functions, methods, procedures, whatever you call them) you implement are not sensitive to the state of the computation. That means all the data used in an operation are passed as inputs to the operation, and all the data used by whatever operations invoked that operation are passed back as outputs.
https://stephen-young.me.uk/2013/01/20/functional-programming-with-javascript.html

Code example:

This is a form of function composition since this is the result of the multiplication that is passed to the add function.

Example

const isEven = x => x % 2 === 0
const filterOutOdd = collection => collection.filter(isEven)

const add = (x, y) => x + y
const sum = collection => collection.reduce(add)

const sumEven = collection => compose(sum, filterOutOdd)(collection)

sumEven([1, 2, 3, 4])

Compose:

Definition:

In the most general terms, we can break the whole discipline of programming down into a couple of stages:

Understanding complex business logic of a problem.
Bbreaking the problem down to a set of smaller problems.
Solving the smaller problems one at a time, and putting it back together to form a coherent solution.

Code example:

This is a form of function composition since this is the result of the multiplication that is passed to the add function. In maths we know it as the same way: f(x)0g(x) = f(g(x)), example. f(x)=2x+5 and g(X)=1x+2 => f(g(x))=2.(1x+2)+5

Example - Function composition:

const isEven = x => x % 2 === 0
const filterOutOdd = collection => collection.filter(isEven)

const add = (x, y) => x + y
const sum = collection => collection.reduce(add)

const sumEven = collection => compose(sum, filterOutOdd)(collection)

sumEven([1, 2, 3, 4])

Curry

Definition:

Currying is the process of taking a function with multiple arguments and turning it into a sequence of functions each with only a single argument.

Code example:

A curried function is a function that takes multiple arguments one at a time.

Example - Curry 1:

const notCurry = (x, y, z) => x + y + z; // a regular function
const curry    = x => y => z => x + y + z; // a curry function

Example - Curry 2:

const divisible = mod => num => num % mod;

//Call
divisible(10)(2);

//Call 2
const divisibleEn3 = divisible(3);
divisibleEn3(10)

You can continue riding in this link: https://medium.com/front-end-weekly/javascript-es6-curry-functions-with-practical-examples-6ba2ced003b1

Lambda:

Definition:

Lambda expressions are present in most of modern programming languages (Python, Ruby, Java...). They are simply expressions that create functions. This is really important for a programming language to support first-class functions which basically means passing functions as arguments to other functions or assigning them to variables.

What is a Lambda?

In computer science, the most important, defining characteristic of a lambda expression is that it is used as data. That is, the function is passed as an argument to another function, returned as a value from a function, or assigned to variables or data structures. Is a classic in programming language when we talk about lambda use => or -> simbols.

Lambda vs anonymous functions:

An anonymous function is, as its name implies, a function without a name.

const hello = function(name){console.log('Hi '+name);}

Or using arrow functions
const hello = (name) => {console.log('Hi '+name);}

Other example:
[1,2,3,4,6].filter((num)=>num>=3); //(num)=>num>=3 is an anonymous function

A lambda function is a function used as parameter:

[1,2,3,4,5,6,7,8].map(e=>({value:e})); //e=>({value:e}) Is a LAMBDA.

$('#el').on('click',()=>{.....});       //Is a LAMBDA and anonymous and arrow function.
$('#el').on('click',function(){.....}); //Is a LAMBDA and anonymous function.
$('#el').on('click',function clickHandler()=>{.....}); //Is a LAMBDA and a named functions.

Code example:

So a Lambda not always is an anonymous function, looks like some people are still confused, because you've accepted "lambda = anonymous" as gospel. While it is a somewhat useful concept to understand that anonymous functions have interesting uses, such as points-free-style (tacit programming), that is not the salient point of lambdas. It's mostly syntactical sugar.

Example - arrow functions:

const isChildren = (person)=>person.age<18;
const isTeen     = (person)=>person.age>18 and person.age<25;

const course = [{name:'bob',age:18},{name:'Damian',age:32},{name:'Alexander',age:19}];

//Get childrens.
course.filter(person=>isChildren(person));

//Get teens.
course.filter(person=>isTeen(person));

Example - named functions:

$('#el').on('click',function clickHandler()=>{.....}); //Is a LAMBDA and a named functions.

Example - anonymousfunctions:

$('#el').on('click',()=>{.....});

The resources come from this websites and talks

Specialy from Anjana Vakil - JSCONF:

From many websites: