{"id":5254,"date":"2019-02-17T15:20:41","date_gmt":"2019-02-17T14:20:41","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=5254"},"modified":"2019-02-17T15:20:41","modified_gmt":"2019-02-17T14:20:41","slug":"learn-pure-functions-with-javascript-cristi-salcescu-medium","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2019\/02\/17\/learn-pure-functions-with-javascript-cristi-salcescu-medium\/","title":{"rendered":"Learn pure functions with JavaScript \u2013 Cristi Salcescu \u2013 Medium"},"content":{"rendered":"

Pure functions are easier to read, understand, test, debug and munch more.<\/p><\/blockquote>\n

Source: Learn pure functions with JavaScript \u2013 Cristi Salcescu \u2013 Medium<\/a><\/em><\/p>\n

<\/p>\n

\n

Learn pure functions with JavaScript<\/h1>\n
\n
\n
\"Go<\/p>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Cristi Salcescu<\/a><\/div>\n
\n
<\/div>\n
<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
<\/div>\n<\/div>
Photo by Ren\u00e9 Reichelt<\/a> on\u00a0Unsplash<\/a><\/figcaption><\/figure>\n

Pure functions are easier to read, understand, test, debug and munch more. You may have already heard all of that before. A few questions are: what are these pure functions? how do they look like? or can we write the whole application using only pure functions?<\/p>\n

Here are two definitions of a pure function:<\/p>\n

A pure function is a function that given the same input always returns the same output and has no side\u00a0effects.<\/span><\/p><\/blockquote>\n

A pure function is a function that has referential transparency.<\/p><\/blockquote>\n

Reading<\/h3>\n

Pure functions make code easier to read. Let\u2019s see how.<\/p>\n

From the\u00a0inside<\/h4>\n

We don\u2019t need to look outside the function scope to understand what is the value of some variable.<\/p>\n

There is no need to think how changing the value of the variable in the current function will affect other functions. There is no need to think how changing the value of a variable in other functions will affect the current function.<\/p>\n

Look at a pure function:<\/p>\n

function isPriorityTodo(task) {\n  return task.type === \"RE\" && !task.completed;\n}<\/pre>\n
When reading a pure function you can focus in one place, the current function. Pure functions give the reader less code to read.<\/p>\n
From the\u00a0outside<\/h4>\n
Look at the code below:<\/p>\n
const arr = [1,2,3];\nconst newValue = compute(arr);<\/pre>\n
console.log(arr);\n\/\/[1,2,3]<\/pre>\n
When compute()<\/code> is a pure function, we are sure that console<\/code> will log [1,2,3]<\/code>, we don\u2019t need to read and understand the compute()<\/code> function.<\/p>\n
Code can be read faster when you read less. Less things to read and understand makes code easier to read.<\/p>\n
Side effects<\/h3>\n
A side effect is a change of a variable from outside the local environment or an interaction with the outside environment that happens during the computation of the result. In short, any interaction with the outside world is a side-effect.<\/p>\n
Here are some examples of side-effects:<\/p>\n