I had therapy today. It was a hard session. And I’m having trouble writing here right now. But it was a good session because it did help a bit.
I’ve started decorating my planner for next year. Is it a bit too early? Yes. Do I care? No. It’s relaxing and fun. Maybe I will post pics of my planner next year. After blurring the words, of course.
JavaScript was hard today. Most of it because I just couldn’t really focus on it today. My head wasn’t allowing me to focus.
Sorry my post today is lacking. I’m just not feeling it on writing right now.
JavaScript notes…
———————————-
If you haven’t already figured it out, the issue in the previous challenge was with the splice call in the tabClose() function. Unfortunately, splice 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 splice method changed the original array, and resulted in a bug.
Recall that in functional programming, changing or altering things is called mutation, and the outcome is called a side effect. A function, ideally, should be a pure function, 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.
Fill in the code for the function incrementer so it returns the value of the global variable fixedValue increased by one.
// The global variable
let fixedValue = 4;
function incrementer() {
// Only change code below this line
// Only change code above this line
}
// The global variable
let fixedValue = 4;
function incrementer() {
// Only change code below this line
return fixedValue + 1
// Only change code above this line
}
The last challenge was a step closer to functional programming principles, but there is still something missing.
We didn’t alter the global variable value, but the function incrementer would not work without the global variable fixedValue being there.
Another principle of functional programming is to always declare your dependencies explicitly. This means if a function depends on a variable or object being present, then pass that variable or object directly into the function as an argument.
There are several good consequences from this principle. The function is easier to test, you know exactly what input it takes, and it won’t depend on anything else in your program.
This can give you more confidence when you alter, remove, or add new code. You would know what you can or cannot change and you can see where the potential traps are.
Finally, the function would always produce the same output for the same set of inputs, no matter what part of the code executes it.
Let’s update the incrementer function to clearly declare its dependencies.
Write the incrementer function so it takes an argument, and then returns a result after increasing the value by one.
// The global variable
let fixedValue = 4;
// Only change code below this line
function incrementer() {
// Only change code above this line
}
// The global variable
let fixedValue = 4;
// Only change code below this line
function incrementer(valueToIncrement) {
return valueToIncrement + 1;
// Only change code above this line
}
So far, we have seen two distinct principles for functional programming:
Don’t alter a variable or object – create new variables and objects and return them if need be from a function. Hint: using something like const newArr = arrVar, where arrVar is an array will simply create a reference to the existing variable and not a copy. So changing a value in newArr would change the value in arrVar.
Declare function parameters – any computation inside a function depends only on the arguments passed to the function, and not on any global object or variable.
Adding one to a number is not very exciting, but we can apply these principles when working with arrays or more complex objects.
Rewrite the code so the global array bookList is not changed inside either function. The add function should add the given bookName to the end of the array passed to it and return a new array (list). The remove function should remove the given bookName from the array passed to it.
Note: Both functions should return an array, and any new parameters should be added before the bookName parameter.
// The global variable
const bookList = ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"];
// Change code below this line
function add(bookName) {
bookList.push(bookName);
return bookList;
// Change code above this line
}
// Change code below this line
function remove(bookName) {
const book_index = bookList.indexOf(bookName);
if (book_index >= 0) {
bookList.splice(book_index, 1);
return bookList;
// Change code above this line
}
}
// the global variable
var bookList = ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"];
/* This function should add a book to the list and return the list */
// New parameters should come before bookName
// Add your code below this line
function add(arr, bookName) {
let newArr = [...arr]; // Copy the bookList array to a new array.
newArr.push(bookName); // Add bookName parameter to the end of the new array.
return newArr; // Return the new array.
}
/* This function should remove a book from the list and return the list */
// New parameters should come before the bookName one
// Add your code below this line
function remove(arr, bookName) {
let newArr = [...arr]; // Copy the bookList array to a new array.
if (newArr.indexOf(bookName) >= 0) {
// Check whether the bookName parameter is in new array.
newArr.splice(newArr.indexOf(bookName), 1); // Remove the given paramater from the new array.
return newArr; // Return the new array.
}
}
var newBookList = add(bookList, 'A Brief History of Time');
var newerBookList = remove(bookList, 'On The Electrodynamics of Moving Bodies');
var newestBookList = remove(add(bookList, 'A Brief History of Time'), 'On The Electrodynamics of Moving Bodies');
console.log(bookList);
