ga-wdi-boston / js-functions-ins-and-outs Goto Github PK

Replace unlimited with arbitrary.

- In Javascript a function can accept an unlimited number of arguments since every function has an arguments object that is a mechanism to handle arguments not in the function definition. 
+ In Javascript a function can accept an arbitrary number of arguments since every function has an arguments object that is a mechanism to handle arguments not in the function definition. 

https://github.com/ga-wdi-boston/js-functions-ins-and-outs#functions-with-1-or-more-arguments

This example may be incorrect to show error and then fix but it is not clear.
https://github.com/ga-wdi-boston/js-functions-ins-and-outs#code-along---return-new-functions

- const memoFactory = function (memo) {
+ const memoFactory = function () {
  let total = 0

-  return function () {
+  return function (memo) {
    total+= 1
    return total + ": " + memo
  }
}

values implies we expect an array as an argument (which we do later on in arrayTransform), recommending changing it to value

fork, clone, cd, npm

Students were really stuck on partial application, even though the code-along was framed as a focus on a function returning another function. Is there another example we could use that doesn't rely on two parameters partially applied? Maybe a static function returned?

Not able to finish with virtual property example.

See annotations for questions

const memoFactory = function (memo) {
  let total = 0
  // notice the lack of a local variable here for closure, as well as the lack of a parameter in the
  // below, returned function
  return function () {
    total+= 1
    return total + ": " + memo // where should this be? Is it defined?
  }
}

const memo = memoFactory() // looks like memo isn't defined

 // looks like we're passing an argument to a generated function that names no parameters
const entryMonday = memo("Monday was fun")
const entryTuesday = memo("I liked Tuesday") // ditto
const entryWednesday = memo("Ugh Wednesday") // ditto

console.log(entryMonday) // "1: Monday was fun" // no, what is actually produced is "1: undefined"
console.log(entryTuesday) // "2: I liked Tuesday" // no, what is actually produced is "2: undefined"
console.log(entryWednesday) // "3: Ugh Wednesday" // and so on

change objects to reference types via @gaand

Should be moved from lib to bin https://github.com/ga-wdi-boston/js-functions-ins-and-outs/blob/master/lib/scope_practice.js

Link to https://github.com/ga-wdi-boston/js-functions-ins-and-outs#code-along---debugging-variable-scope

In this line of the README objectives: https://github.com/ga-wdi-boston/js-functions-ins-and-outs/blame/master/README.md#L28

This indicates that sometimes when we receive vague feedback about "understanding callbacks", some developers do not properly have the vocabulary in their mind. A visual diagramming of an example might help (like diagramming a sentence in English).

For example, when a developer says "the reduce callback" what they typically mean is "the reduce method", but what experienced developers would hear is "the function the reduce method receives as the first argument".

That confusion makes it impossible to explain what a callback is until the more experienced developer recognizes the mistake.

[1,2,3].reduce((a, b) => { return a + b; });
//        ^---- referred to as callback, therefor:
//        when we say callbacks are "arguments to functions" they get confused

Make them repeat themselves, then refactor to DRY.

@jrhorn424 would like us to come up with a more pleasant example than Developers Cheating.

https://github.com/ga-wdi-boston/js-functions-ins-and-outs/blob/master/lib/school_honesty_lab.js

Potential replacement but new ideas welcome, just created on the fly.

'use strict'

// person one
const personOne = {
  name: 'Mike',
  hungry: true,
  food: []
}

// person two
const personTwo = {
  name: 'Bernard',
  hungry: false,
  food: []
}

// people array
const people = [personOne, personTwo]

// function that adds food if person is hungry and makes them not hungry
const eat = function (person) {
  person.food.push("Cake")
  person.hungry = false
}

// function that removes food if person is not hungry and makes them hungry
const digest = function (person) {
  person.food.unshift()
  person.hungry = true
}

// the function should accept an array of developers and two callback functions
const runMealScript = function (arrayPeople, callBackEat, callBackDigest) {
  // loop through the students array and check who is hungry
  for(let i = 0; i < arrayPeople.length; i++){
    // if they are hungry or not 
    // then pass them as an argument to the correct callback 
    if (arrayPeople[i].hungry === true ){
       callBackEat(arrayPeople[i]) 
    } else {
       callBackDigest(arrayPeople[i]) 
    }       
  }
}

// the function should get passed an array of people
// and two callback functions
runMealScript(people, eat, digest)

Talk about single arguments that are arrays before talking about arguments as an array-like object.

(Not sure if I got this issue right, @gaand will hopefully understand.)

The function called add() is incorrectly subtracting
https://github.com/ga-wdi-boston/js-functions-ins-and-outs#functions-with-1-or-more-arguments

const add = function(num1, num2){ 
-   return num1 - num2 
+   return num1 + num2 
}

- let memoOne = memofactory("Hello World")
+ let memoOne = memoFactory("Hello World")

https://github.com/ga-wdi-boston/js-functions-ins-and-outs#demo---return-new-functions

Per conversation today with @gaand

Ins, Out, and Closure?

See /issues/10

@jrhorn424 asked that this repo get a solution branch.

When we have pre-reading, should we share the whole repository with students, or just the pre-readings in their own "practice" repo?

Also, see ga-wdi-boston/meta/issues/14.

I didn't teach this lesson at all. I felt that what was covered here had already been/will be covered in past/future lessons. I think the only thing that isn't/won't be covered in other lessons is the arguments object but I didn't think that was pertinent enough to warrant having to teach the students in person. I actually didn't know about that myself, so super cool to learn!

That said, we did give this lesson to students and the study as well. We told them to go through these on their own time and informed them that they will have a diagnostic on this Monday morning. I personally don't think they should have a diagnostic on this, but my team disagreed and I was OK with that.

Instead, I delivered this lesson on CSS: https://github.com/ga-wdi-lessons/css-review. It went really well. They were especially impressed with how they can change HTML and CSS with the inspector. I think this is going to set them up well for the DOM lesson.

I also had them do this lesson: https://github.com/ga-wdi-lessons/html-intro on their own prior to the CSS class.

As a preview of next week, we plan to cover layout, DOM and jquery, events and callbacks, scope and context, and es6 features. The plan is to get into APIs and AJAX right after Thanksgiving, but before they start project 1. We will make sure that the team that remains is set up for success on delivering that.

I think setting it up like this will cause great confusion:

const product = function product() {

};

Should be changed to:

const product = function () {
};

(per @gaand)
For the reference type arguments demo

// Write a function that takes an array full of integers, doubles each value, and
// returns a new array with those values.
const arrayTimes2 = function arrayTimes2() {
  let result = [];

  for (let i = 0; i < arguments[0].length; i++) {
    result[i] = arguments[0][i] * 2;
  }

  return result;
};

Frequently suboptimal.

const sum = function (first, second) {
  return first + second
}

const sum = (first, second) => {
  return first + second
}

const sum = (first, second) => first + second

const addOne = num => num + 1

Show the different types and talk about the differences

For demos, code should be linked to in the README (either a script or lib), unless that code is intended to be run in a REPL, in which case it is fine as a fenced block. Do not put it in both places.

In a code-along, starter code should be provided on the master branch. Code should be stored in a file on the solution branch, and the consultant can have that branch open while presenting to walk developers through the code-along.

In a lab, starter code should be provided on the master branch. A solution should be provided on the solution branch.

The solution branch README.md needs to mirror the master branch README.md, and needs to include solutions for the master branch code. I now see that there's additional code merged into the solution branch and it intends to include a big section on scope.

Here's an open PR for discussion on the content in the solution branch: #33. While this topic is being discussed, we should have the solution branch contain the solution code that mirrors the current master branch.

Also discussed in this issue, with solution code dump from @jrhorn424: #17

There is a known bug with the version of node-inspector we are using, related to the C compiler. We should update the version number in package.json.

3rd objective should say "return reference types", not objects - @gaand

array transform should great a new array

Reference types as arguments

Reference types passed as arguments can be modified within the functions.

Demo - primitive data types as arguments

let num = 1

const change = function (num) {
  num++
  console.log(num)
}

change(num) // 2
console.log(num) // 1

This was causing some confusion as to when num was the global variable and when it was the parameter

@ga-wdi-boston/core Anyone have a downstream branch that should be promoted to upstream?

Leaves transform unchanged to demonstrate DRY

var operation = function(add, num1, num2) {
  var result = add(num1, num2);
  return result;
}

var add = function add(n1, n2) {
  var result = n1 + n2;
  result result;
};

var answer = operation(add, num1, num2);

Code walk through, each step explicitly.

The change to from add to callback confused.

global scope also confusing.

change operation to

function(cb, str1) {
  var result  = cb(str1);
  return result;
}

operation('Hello', Array.protoype.toLowerCase);

A lot of this lesson would make more sense if students had a basic understanding of what scope is. I remember my cohort (009) having a lesson on scope, but it doesn't seem to be included now. I think adding a basic intro to scope in a study or as part of this lesson would be very helpful.

functions return functions

• @gaand

JS files names should be hyphenated not underscored ins bin and lib per node best practices.

Matt used map

Other possibilities?

See #34