Quick Notes Based On "Functions" Section of Frontend Masters' "Complete Intro to Web Development, v2"
Tags: javascript, fundamentals, functions, frontendmasters
Published: 2021-08-12 03:49:32

What I did (in code) - 1 of 3:

&nbsp;&nbsp;&nbsp; `function addTwo() {`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `return 5 + 2`
&nbsp;&nbsp;&nbsp; `}`

&nbsp;&nbsp;&nbsp; `console.log(addTwo())`

&nbsp;&nbsp;&nbsp; Logs: `7`

What I did (in English) - 1 of 3:
- The first block of code above (everything above `console.log...`) is the function definition (which can also be called a "function declaration" or "function statement").
- The function's name is `addTwo`, and because it's a function, it needs `()` after it.
- Inside the curly braces is what the `addTwo` function "returns". According to MDN, "The return statement ends function execution and specifies a value to be returned to the function caller." In the case of this `addTwo` function, what's returned is simple: `5 + 2`.
- Log to the console `addTwo()`. What is this? The `addTwo()` within the `()` of `console.log()` is the "function call". Notice that `addTwo()` here does not have the JavaScript keyword `function` in front of it (as it does in the function definition) nor any variable name or `=` or anything else in front of it. This is how you know it's the function call and not part of the function definition.

What I did (in code) - 2 of 3:

&nbsp;&nbsp;&nbsp; `function addTwo(num) {`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `return num + 2`
&nbsp;&nbsp;&nbsp; `}`

&nbsp;&nbsp;&nbsp; `console.log(addTwo(5))`

&nbsp;&nbsp;&nbsp; Logs: `7`

What I did (in English) - 2 of 3:
- This example is the same as the first example, with one small difference: Instead of using the number `5` directly in the body of the function definition, `num` (for "number") is being used instead. How do we know what `num` represents? Because `num` is "passed in" to `function addTwo(num)` and we can see that `5` is what's "passed in" to the function call. `num` is known as the "parameter", and `5` is known as the "argument". So the `addTwo` function takes a parameter of `num` which represents (i.e., is a stand-in for) the function call's argument, which is `5`. Why set this function up this way instead of the first way since it seems to just make things more complicated? Because having parameters makes a function more reusable. In other words, we can call this function as many times as we want, each time with a different argument. For instance, we could pass in an argument of `5`, as we did, or an argument of `6` or `7` or `103` or `3246945`, and so on.

What I did (in code) - 3 of 3:

&nbsp;&nbsp;&nbsp; `const birthCity = 'Ann Arbor'`
&nbsp;&nbsp;&nbsp; `const birthState = 'Michigan'`
&nbsp;&nbsp;&nbsp; `const birthCountry = 'USA'`

&nbsp;&nbsp;&nbsp; `function logBirthPlace(city, state, country) {`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `` console.log(`You were born in ${city}, ${state}, ${country}.`) ``
&nbsp;&nbsp;&nbsp; `}`

&nbsp;&nbsp;&nbsp; `console.log(logBirthPlace(birthCity, birthState, birthCountry))`

&nbsp;&nbsp;&nbsp; Logs: `You were born in Ann Arbor, Michigan, USA.`

What I did (in English) - 3 of 3:
- This example shows that a function can take multiple parameters and that, as a result, a function call can take multiple arguments.

What I practiced:
- Same as above.

What I learned:
- From the above code, I didn't learn anything new. 
- From other parts of this section of instruction, I learned that generally it's a good idea (it's a good habit to form) to make function names verbs, because functions do something. I believe this was already my practice most of the time, but I hadn't thought of it in these simple terms before.

What I still might not understand:
- How to better describe (i.e., describe more explicitly, more clearly) a function definition, how `return` works, and how a function call works.