ENGLISH:
Gandolfo said this section is about how exactly functions execute.
She provided a diagram for the anatomy of a function.
I am familiar with the parts of the function, but one thing that I'm sometimes not cognizant of is that
*each parameter is simply a variable (a variable that has no value until the function is called)*.
Each argument (as opposed to a parameter) in the function call contains a value.
Remember that a function is a type of object, hence why we can put things like '.call' on a function.
One of the main purposes of "functional programming" is to minimize function "side effects".
On "side effects":
- She defines this way: Side effects are things that are happening, other than the value being returned,
that affect something outside of the function itself (outside of the curly braces of the function).
- I.e., a side effect is anything in a function that affects something outside of that function.
- E.g., 'console.log(...)' is a side effect because console.log() is logging to the console and the console exists outside of the function.
- Another e.g.: Changing the value of an object that's in a different scope.
- It's also the case that:
1) Manipulating the DOM is a side effect.
2) Manipulating the DOM often cannot be avoided in frontend web development.
- Robert: When you perform DOM manipulation, you change the state of the website/webapp,
and you are working with aspects of the program that live outside of your function.
So, DOM manipulation is a side effect because of the word 'manipulation',
and how the function you're writing is likely only taking arguments pertaining to the JavaScript,
but affecting your HTML as a 'side effect'.
- Robert: A pure function is one that has no side effects and returns the same data for the same arguments.
CODE:// JS// An important functionality difference between non-arrow functions and arrow functions:// non-arrow function type 1functionexperiment(a,b){returnarguments}console.log(experiment(2,1))// [2, 1]// non-arrow function type 2letexperiment=function(a,b){returnarguments}console.log(experiment(2,1))// [2, 1]// arrow functionletexperiment=(a,b)=>{returnarguments}console.log(experiment(2,1))// Uncaught ReferenceError: arguments is not defined...// The above error occurs with the arrow function because arrow functions don't have the 'arguments' array-like object.// MDN: The 'arguments' object is a local variable available within all non-arrow functions. You can refer to a function's arguments inside that function by using its arguments object. It has entries for each argument the function was called with, with the first entry's index at 0.// Another important functionality difference, between non-arrow and arrow functions, involves the 'this' keyword, just FYI.//-------------------------------------------------------------------// JS// from the below array of objects, use 'filter' and 'map' to make an array of strings, where the strings are the names of the *present* suspectsconstvideoData=[{name:'Miss Scarlet',present:true,rooms:[{kitchen:false},{ballroom:false},{conservatory:false},{'dining room':false},{'billiard room':false},{library:false}]},{name:'Mrs. White',present:false,rooms:[{kitchen:false},{ballroom:false},{conservatory:false},{'dining room':false},{'billiard room':false},{library:false}]},{name:'Reverend Green',present:true,rooms:[{kitchen:false},{ballroom:false},{conservatory:false},{'dining room':false},{'billiard room':false},{library:false}]},{name:'Rusty',present:false,rooms:[{kitchen:false},{ballroom:false},{conservatory:false},{'dining room':false},{'billiard room':false},{library:false}]},{name:'Colonel Mustard',present:true,rooms:[{kitchen:false},{ballroom:false},{conservatory:false},{'dining room':false},{'billiard room':false},{library:false}]},{name:'Professor Plum',present:true,rooms:[{kitchen:false},{ballroom:false},{conservatory:false},{'dining room':false},{'billiard room':false},{library:false}]}]constsuspectObjPresent=videoData.filter(suspectObj=>{returnsuspectObj.present})constnamesPresentSuspects=suspectObjPresent.map(suspectObj=>{returnsuspectObj.name})console.log(namesPresentSuspects)// ['Miss Scarlet', 'Reverend Green', 'Colonel Mustard', 'Professor Plum']//-------------------------------------------------------------------// JSconstcreateTuple=(a,b,c,d)=>{// FYI a Tuple is a data structure that has a collection of arrays, each array with two valuesreturn[[a,c],[b,d]]}console.log(createTuple('It','be','could','anyone','no one'))// [['It', 'could'], ['be', 'anyone']]// note that the 'no one' string wasn't picked up, so to speakconstcreateTuple=(a,b,c,...d)=>{// notice the 'spread operator', which "gathers all the extra *arguments* at the end and puts them in an array"return[[a,c],[b,d]]}console.log(createTuple('It','be','could','anyone','no one'))// [['It', 'could'], ['be', ['anyone', 'no one']]]//-------------------------------------------------------------------// JSconstcreateTuple=function(a,b,c,d){// note that we've changed it to a non-arrow function because we want to be able to use 'arguments'console.log(arguments)// ['It', 'be', 'could', 'anyone', 'no one']return[[a,c],[b,d]]}console.log(createTuple('It','be','could','anyone','no one'))// [['It', 'could'], ['be', 'anyone']]// just to be clear, 'console.log(arguments)' above logs: ['It', 'be', 'could', 'anyone', 'no one']// so you can see that the 'arguments' keyword / array-like object *picks up the arguments that are passed into the function call*, no more, no less// (the 'arguments' keyword has nothing to do with the 'spread operator')//-------------------------------------------------------------------// JS// default parameters (an actual use case)constadd=function(a,b=2){console.log(arguments)// [3]returna+b}console.log(add(3))// 5// default parameters (just for learning)constadd=function(a=2){console.log(arguments)// []returna}console.log(add())// 2// default parameters (just for learning)constadd=function(a=2){console.log(arguments)// [3]returna}console.log(add(3))// 3//-------------------------------------------------------------------// JS// this is written in ES6constadd=function(a,b=2){console.log(arguments)// [3]returna+b}console.log(add(3))// 5// rewrite the above in ES5constadd=function(a,b){b=b||2// i.e., b = b if b has value, and otherwise b = 2console.log(arguments)// [3]returna+b}console.log(add(3))// 5//-------------------------------------------------------------------// JSconstconstructArr=function(){console.log(arguments)// ['was', 'it', 'in'] (remember 'arguments' returns an array-like object, not an array, even though it looks similar when it's logged)constarr=Array.from(arguments)// this line takes 'arguments' and turns it into an array. Note 'Array.prototype.slice.call(arguments)' is the ES5 wayconsole.log(arr)// ['was', 'it', 'in'] (now an actual array)arr.push('the billiards room?')console.log(arr)// ['was', 'it', 'in', 'the billiards room?']returnarr.join('')}console.log(constructArr('was','it','in'))// was it in the billiards room?// FYI an array-like object has numerical indices, like an array, and it has 'length' on it, like an array, but it doesn't have methods, like 'push()', on it
Top comments (0)
Subscribe
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)