.github
api-server
client
config
curriculum
challenges
_meta
arabic
chinese
english
01-responsive-web-design
02-javascript-algorithms-and-data-structures
basic-algorithm-scripting
basic-data-structures
basic-javascript
debugging
es6
functional-programming
add-elements-to-the-end-of-an-array-using-concat-instead-of-push.english.md
apply-functional-programming-to-convert-strings-to-url-slugs.english.md
avoid-mutations-and-side-effects-using-functional-programming.english.md
combine-an-array-into-a-string-using-the-join-method.english.md
combine-two-arrays-using-the-concat-method.english.md
implement-map-on-a-prototype.english.md
implement-the-filter-method-on-a-prototype.english.md
introduction-to-currying-and-partial-application.english.md
learn-about-functional-programming.english.md
pass-arguments-to-avoid-external-dependence-in-a-function.english.md
refactor-global-variables-out-of-functions.english.md
remove-elements-from-an-array-using-slice-instead-of-splice.english.md
return-a-sorted-array-without-changing-the-original-array.english.md
return-part-of-an-array-using-the-slice-method.english.md
sort-an-array-alphabetically-using-the-sort-method.english.md
split-a-string-into-an-array-using-the-split-method.english.md
understand-functional-programming-terminology.english.md
understand-the-hazards-of-using-imperative-code.english.md
use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.english.md
use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria.english.md
use-the-filter-method-to-extract-data-from-an-array.english.md
use-the-map-method-to-extract-data-from-an-array.english.md
use-the-reduce-method-to-analyze-data.english.md
use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria.english.md
intermediate-algorithm-scripting
javascript-algorithms-and-data-structures-projects
object-oriented-programming
regular-expressions
03-front-end-libraries
04-data-visualization
05-apis-and-microservices
06-information-security-and-quality-assurance
08-coding-interview-prep
09-certificates
portuguese
russian
spanish
schema
test
.babelrc
.editorconfig
.npmignore
.travis.yml
CHANGELOG.md
LICENSE.md
commitizen.config.js
commitlint.config.js
create-challenge-bundle.js
getChallenges.js
gulpfile.js
index.js
lib.js
md-translation.js
package-entry.js
package-lock.json
package.json
utils.js
docs
search-indexing
tools
utils
.editorconfig
.eslintignore
.eslintrc.json
.gitattributes
.gitignore
.gitpod.yml
.node-inspectorrc
.prettierignore
.prettierrc
.snyk
.travis.yml
.vcmrc
CODE_OF_CONDUCT.md
CONTRIBUTING.md
Dockerfile.tests
LICENSE.md
README.md
SECURITY.md
change_volumes_owner.sh
docker-compose-shared.yml
docker-compose.tests.yml
docker-compose.yml
lerna.json
libcimp_index_js.patch
package-lock.json
package.json
patch_npm_and_install.sh
sample.env
bfa5c26288
* Use dfn tags
* remove misused <dfn> tags
* Revert "remove misused <dfn> tags"
This reverts commit b24968a968.
* Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.english.md
Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
* Make "array" lowercase
Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
* Fix dfn usage
* Address last dfn tags
77 lines
2.4 KiB
Markdown
77 lines
2.4 KiB
Markdown
---
|
|
id: 587d7b8e367417b2b2512b5e
|
|
title: Avoid Mutations and Side Effects Using Functional Programming
|
|
challengeType: 1
|
|
forumTopicId: 301228
|
|
---
|
|
|
|
## Description
|
|
<section id='description'>
|
|
If you haven't already figured it out, the issue in the previous challenge was with the <code>splice</code> call in the <code>tabClose()</code> function. Unfortunately, <code>splice</code> changes the original array it is called on, so the second call to it used a modified array, and gave unexpected results.
|
|
This is a small example of a much larger pattern - you call a function on a variable, array, or an object, and the function changes the variable or something in the object.
|
|
One of the core principles of functional programming is to not change things. Changes lead to bugs. It's easier to prevent bugs knowing that your functions don't change anything, including the function arguments or any global variable.
|
|
The previous example didn't have any complicated operations but the <code>splice</code> method changed the original array, and resulted in a bug.
|
|
Recall that in functional programming, changing or altering things is called <dfn>mutation</dfn>, and the outcome is called a <dfn>side effect</dfn>. A function, ideally, should be a <dfn>pure function</dfn>, meaning that it does not cause any side effects.
|
|
Let's try to master this discipline and not alter any variable or object in our code.
|
|
</section>
|
|
|
|
## Instructions
|
|
<section id='instructions'>
|
|
Fill in the code for the function <code>incrementer</code> so it returns the value of the global variable <code>fixedValue</code> increased by one.
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
tests:
|
|
- text: Your function <code>incrementer</code> should not change the value of <code>fixedValue</code>.
|
|
testString: assert(fixedValue === 4);
|
|
- text: Your <code>incrementer</code> function should return a value that is one larger than the <code>fixedValue</code> value.
|
|
testString: assert(newValue === 5);
|
|
|
|
```
|
|
|
|
</section>
|
|
|
|
## Challenge Seed
|
|
<section id='challengeSeed'>
|
|
|
|
<div id='js-seed'>
|
|
|
|
```js
|
|
// the global variable
|
|
var fixedValue = 4;
|
|
|
|
function incrementer () {
|
|
// Add your code below this line
|
|
|
|
|
|
// Add your code above this line
|
|
}
|
|
|
|
var newValue = incrementer(); // Should equal 5
|
|
console.log(fixedValue); // Should print 4
|
|
```
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
## Solution
|
|
<section id='solution'>
|
|
|
|
```js
|
|
var fixedValue = 4
|
|
|
|
function incrementer() {
|
|
return fixedValue + 1
|
|
}
|
|
|
|
var newValue = incrementer(); // Should equal 5
|
|
```
|
|
|
|
</section>
|