DEV Community

benboorstein
benboorstein

Posted on • Edited on

My Raw Notes for the Week of 11-22-2021

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.
Enter fullscreen mode Exit fullscreen mode
CODE:

// JS
// An important functionality difference between non-arrow functions and arrow functions:

// non-arrow function type 1
function experiment(a, b) {
  return arguments
}
console.log(experiment(2, 1)) // [2, 1]

// non-arrow function type 2
let experiment = function(a, b) {
  return arguments
}
console.log(experiment(2, 1)) // [2, 1]

// arrow function
let experiment = (a, b) => {
  return arguments
}
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* suspects
const videoData = [
  {
    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}
    ]
  }
]

const suspectObjPresent = videoData.filter(suspectObj => { return suspectObj.present })
const namesPresentSuspects = suspectObjPresent.map(suspectObj => { return suspectObj.name })
console.log(namesPresentSuspects) // ['Miss Scarlet', 'Reverend Green', 'Colonel Mustard', 'Professor Plum']

//-------------------------------------------------------------------

// JS
const createTuple = (a, b, c, d) => { // FYI a Tuple is a data structure that has a collection of arrays, each array with two values
  return [[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 speak

const createTuple = (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']]]

//-------------------------------------------------------------------

// JS
const createTuple = 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)
const add = function(a, b = 2) {
  console.log(arguments) // [3]
  return a + b
}
console.log(add(3)) // 5

// default parameters (just for learning)
const add = function(a = 2) {
  console.log(arguments) // []
  return a
}
console.log(add()) // 2

// default parameters (just for learning)
const add = function(a = 2) {
  console.log(arguments) // [3]
  return a
}
console.log(add(3)) // 3

//-------------------------------------------------------------------

// JS
// this is written in ES6
const add = function(a, b = 2) {
  console.log(arguments) // [3]
  return a + b
}
console.log(add(3)) // 5

// rewrite the above in ES5
const add = function(a, b) {
  b = b || 2 // i.e., b = b if b has value, and otherwise b = 2
  console.log(arguments) // [3]
  return a + b
}
console.log(add(3)) // 5

//-------------------------------------------------------------------

// JS
const constructArr = 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)
  const arr = Array.from(arguments) // this line takes 'arguments' and turns it into an array. Note 'Array.prototype.slice.call(arguments)' is the ES5 way
  console.log(arr) // ['was', 'it', 'in'] (now an actual array)
  arr.push('the billiards room?')
  console.log(arr) // ['was', 'it', 'in', 'the billiards room?']
  return arr.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
Enter fullscreen mode Exit fullscreen mode

Top comments (0)