Functional Programming - Pure Functions

Pramila Dalavai — Tue, 08 Sep 2020 21:47:42 +0000

Today we are gonna talk about pure functions, which is one of the core concepts of functional programming.No doubt pure functions make your life easier without affecting your application's state.
Rules for pure functions:

The function should take in at least one argument.
The function should return a value or another function.
The function should not change or mutate any of its arguments. Impure functions example:

function Header(text) {
let h1 = document.createElement('h1');
h1.innerText = text;
document.body.appendChild(h1);
}
Header("Header() caused side effects");

In React, the UI is expressed with pure functions. In the following example, you can see the function doesn't mutate DOM. This function
will create a heading-one element, and it is up to some other part of the application to use that element to change the DOM:

const Header = (props) => <h1>{props.title}</h1>

Hence pure functions do not cause side effects, set global variables, or change anything about the application state.

Functional Programming in Javascript - Imperative and Declarative

Pramila Dalavai — Sat, 05 Sep 2020 07:07:29 +0000

Hello there, in this post I will be talking about the imperative and declarative concepts. Whenever you have attempted to reduce or map the array without your knowledge, you are good to go to be a functional programmer in javascript. React, Flux, and redux all these are functional programming javascript frameworks.
Now talking of Declarative, its when your application is structured in a way that prioritizes describing what should happen over defining how it should happen.
It would be easier if you compare the imperative and declarative examples here:

var string = "hi there , I'm a web developer";
var removeSpace = "";
for (var i = 0; i < i.string.length; i++) {
  if (string[i] === " ") removeSpace += "-";
  else removeSpace += string[i]; 
}
console.log(removeSpace);

In this example, we loop through every character in the string, replacing spaces as they occur. Just looking at the code, it doesn't say much. Imperative requires lots of comments in order to understand code. Whereas in the declarative program, the syntax itself describes what should happen and the details of how things happen are abstracted way.

const string = "Hi there, I'm a web developer ";
const removeSpaces = string.replace(//g,"-");
console.log(removeSpaces);

Isn't this looks more readable and easier to reason about?
Now, let’s consider the task of building a document object model, or DOM. An imperative approach would be concerned with how the DOM is constructed:

var headline = document.createElement('h1');
headline.innerText = "Hello World";

It would be very hard to make changes, add features, or scale 10,000 lines of code where the DOM is constructed imperatively.
Now let’s take a look at how we can construct a DOM declaratively using a React component:

const { render } = ReactDOM
const Welcome = () => (
<div id="App">
//your HTML code 
//your react components
</div>
)
render(
<App />,
document.getElementById('home')
)

React is declarative. Here, the Welcome component describes the DOM that should be rendered. The
render function uses the instructions declared in the component to build the DOM, abstracting away
the details of how the DOM is to be rendered. We can clearly see that we want to render our
Welcome component into the element with the ID of 'target'.

DEV Community: Pramila Dalavai

Functional Programming - Pure Functions

Functional Programming in Javascript - Imperative and Declarative