An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
Pure Function In JavaScript
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 stateconsole.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 stateconsole.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.
Original Link: https://dev.to/_prosen/pure-function-in-javascript-c2n
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To