DEV Community

benboorstein
benboorstein

Posted on

Quick Notes Based On "Functions" Section of Frontend Masters' "Complete Intro to Web Development, v2"

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

    function addTwo() {
       return 5 + 2
    }

    console.log(addTwo())

    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:

    function addTwo(num) {
       return num + 2
    }

    console.log(addTwo(5))

    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:

    const birthCity = 'Ann Arbor'
    const birthState = 'Michigan'
    const birthCountry = 'USA'

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

    console.log(logBirthPlace(birthCity, birthState, birthCountry))

    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.

Discussion (0)