<\/span><\/h4>\n\n\n\nAlthough you can change the state of a variable defined locally in a pure function, it is not recommended. Take a look at the code below.<\/p>\n\n\n\n
const score = [12,13];\n\nfunction updateScore(newScore, array) {\n const clonedScore = [...array];\n clonedScore[clonedScore.length] = newScore;\n return clonedScore;\n}\n\nconsole.log(updateScore(17, score));<\/code><\/pre>\n\n\n\nThe updateScore()<\/code> function above is using clonedScore[clonedScore.length] = newScore<\/code> to alter its state. Although that operation does not make updateScore()<\/code> an impure function, it’s not the best practice.<\/p>\n\n\n\nThe recommended way is to pass all the values as function parameters, as shown in the code below.<\/p>\n\n\n\n
const score = [12,13];\n\nfunction updateScore(newScore, array) {\n return [...array, newScore];\n}\n\nconsole.log(updateScore(17, score));<\/code><\/pre>\n\n\n\nSimple and clear! The above code does the same thing as the previous one, but it’s now much simpler and easy to understand.<\/p>\n\n\n\n
<\/span>What is an Impure Function?<\/span><\/h2>\n\n\n\nAn impure function is unpredictable and contains one or more side effects. It’s a function that depends on or modifies data outside its lexical scope.<\/p>\n\n\n\n
Take a look at the example below.<\/p>\n\n\n\n
var score = 0;\n\nfunction addScore(a,b){ \n score = 5; \n return a + b + score\n}\n\nconsole.log(addScore(10,15))<\/code><\/pre>\n\n\n\nThe score<\/code> variable is declared outside the addScore()<\/code> function scope and initially set to zero. However, its state is changed inside the addScore()<\/code> function in the line score = 5<\/code>. Automatically, the addScore()<\/code> function becomes an impure function because it’s modifying the state of a code block outside its scope, making it have some side effects.<\/p>\n\n\n\nFrom the description, you can deduce that two main properties make a function impure.<\/p>\n\n\n\n
- It is unpredictable<\/li>
- It causes some side effects<\/li><\/ul>\n\n\n\n
Let’s look at one more example of an impure function that looks similar to a pure function. Take a look at the code below.<\/p>\n\n\n\n
\/\/IMPURE FUNCTION\n\nconst myArray = (arrOne, val) => {\n arrOne.push(val);\n return arrOne;\n};\n\nconsole.log(myArray([1, 2, 3], 4));\n\/\/Returns: [1,2,3,4]<\/code><\/pre>\n\n\n\nAt first glance, this function appears to have no side effects, and one can easily conclude it as a pure function. However, take an in-depth look at this line – arrOne.push(val)<\/code>. Here, the myArray()<\/code> function directly mutates the memory in place of the arrOne<\/code> array. In short, it is modifying the original array passed to the function.<\/p>\n\n\n\nTo achieve the same result with a pure function, you can use the spread operator to make a copy of the original array. Any operations done on this newly copied array won’t affect the original. See the code below.<\/p>\n\n\n\n
\/\/PURE FUNCTION\n\nconst myArray = (arrOne, val) => {\n return [...arrOne, val]\n};\n\nconsole.log(myArray([1, 2, 3], 4));\n\/\/Returns: [1,2,3,4]<\/code><\/pre>\n\n\n\nWhat if you were working with objects? Take a look at the code below.<\/p>\n\n\n\n
\/\/IMPURE FUNCTION\n\nconst myObject = (obj, key, val) => {\n obj[key] = val;\n return obj;\n};\nconsole.log(myObject({name:\"John Doe\"},\"age\",36));\n\/\/Returns: { name: 'John Doe', age: 36 }<\/code><\/pre>\n\n\n\nThe myObject()<\/code> function above is considered impure because it’s mutating the passed object parameter. Check this line – obj[key] = val<\/code>. <\/p>\n\n\n\nTo convert this to a pure function, you can use the spread operator, as shown below.<\/p>\n\n\n\n
\/\/PURE FUNCTION\n\nconst myObject = (obj, key, val) => {\n return {...obj,[key]:val};\n};\nconsole.log(myObject({name:\"John Doe\"},\"age\",36));\n\/\/Returns: { name: 'John Doe', age: 36 }<\/code><\/pre>\n\n\n\nIn the above code, we copy the object’s contents and do not modify it directly.<\/p>\n\n\n\n