This content originally appeared on DEV Community and was authored by Prosen Ghosh
What is Pure Function?
There are 2 simple rules for a function to be a Pure Function.
1. There will be always the same output for the same input.
2. There will be no side effects.
Let's see a code.
const add = (a,b) => a + b;
add(1,2); // 3
Here the add function is a pure function.
Because this function will take any 2 arguments a and b and it will give the same result for that argument which is always a + b.
Let's see another code,
let user = {
firstName: "Michael",
lastName: "Jackson",
gender: "M"
}
function getFullName(user) {
return `${user.firstName} ${user.lastName}`;
}
console.log(getFullName(user)); // Michael Jackson
In the code snippet getFullName is a pure function, because getFullName is not mutating the state.
what is Impure Function?
1. Create/update database.
2. http/s call.
3. Change the file system.
4. Mutate the state.
etc
Math.random();
Math.random() is an impure function because it always returns a different output.
So is the console.log is a pure function, it returns undefined for any input.
No. console.log is not a pure function because it has side effects, console.log is using another share environment to log into the console.
const add = function (a,b){
console.log("added");
return a + b;
}
add(1,2); // 3
We can see from the above code snippet, we are getting the same output for the same input, and console.log is not effecting our output, then it is not a pure function. Because the add function has a side effect.
let user = {
firstName: "Michael",
lastName: "Jackson",
gender: "M"
}
function getFullName(user) {
user.firstName = user.gender === "M" ? `Mr. ${user.firstName}`: `Mrs. ${user.firstName}`;
return `${user.firstName} ${user.lastName}`;
}
console.log(getFullName(user)); // Mr. Michael Jackson
Here in the code snippet getFullName is an impure function, because getFullName is mutating the state. Inside the function definition we are assigning a value to the object property.
Pure vs Impure
Impure function mutates the external state.
let cart = {
items: [{
name: "X",
price: 10,
quantity: 1
}]
}
function addItem(cart){
let newCart = {...cart}
newCart.items.push({
name: "Y",
price: 5,
quantity: 2
});
return newCart;
}
console.log(cart); // {items: Array(1)}
let newCart = addItem(cart); // changing state
console.log(cart); // {items: Array(2)}
console.log(newCart); // {items: Array(2)}
Pure function does not mutate external state. We can make the above function pure by making a little change.
let cart = {
items: [{
name: "X",
price: 10,
quantity: 1
}]
}
function deepClone(value){
return JSON.parse(JSON.stringify(value)); // for example purpose
}
function addItem(cart){
let newCart = deepClone(cart);
newCart.items.push({
name: "Y",
price: 5,
quantity: 2
});
return newCart;
}
console.log(cart); // {items: Array(1)}
let newCart = addItem(cart); // changing state
console.log(cart); // {items: Array(1)}
console.log(newCart); // {items: Array(2)}
In the snippet we can see, the pure function does not change the cart, instead it is making a copy of the cart and sending as a return value. Due to this the original card is not being changed.
If you are using react, redux then you will see the use of pure function.
Pure function can be easily predicted, it is convenient to test. Pure function makes state management easier.
This content originally appeared on DEV Community and was authored by Prosen Ghosh
Prosen Ghosh | Sciencx (2021-06-29T17:18:44+00:00) Pure Function In JavaScript. Retrieved from https://www.scien.cx/2021/06/29/pure-function-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.