Functions
in HTML, functions serve as ways to group together related bits of JavaScript code. Grouped code is easier to read, debug, and improve.
Objectives
Define abstraction
Explain that functions are abstractions
Explain how to call a function
Define "Generalization"
Demonstrate "Generalization" by using parameters and arguments
Demonstrate return values
Define Abstraction
Abstraction comes from Latin roots which mean "to pull away." It's the "take-away" or "impression" of a whole thing. As humans, we often take sets of single actions or things and abstract them into another word.
That word that we "pull away" is the "abstraction." Literally it means "the pulled away thing." You might not think about it often, but your brain is full of abstractions.
Single Units
Abstraction
John, Paul, George, Ringo
The Beatles
Get two pieces of bread, put jam on ...
Make a peanut butter and jelly sandwich
Hermione, Harry, Ron
Troublesome Gryffindors
visit site, make userid, make password...
Sign up for Flatbook
get in the lift, hit "G" button, exit elevator, walk to subway...
Go home
We create abstractions to make it easier to shorten our sentences. We'd never get anything done if we couldn't abstract! We also use abstractions to decide what doesn't fit or what should fit. "Vivaldi" doesn't belong with The Beatles, but he does fit with "Baroque Masters."
Abstractions help us think about complex activities. Humans brought the pattern of "abstracting work" to JavaScript. Abstractions that hold work are called functions.
Explain That Functions Are Abstractions
Functions combine series of steps under a new name. That's why they're abstractions. We'll call that the function name. More formally:
A function is an object that contains a sequence of JavaScript statements. We can execute or call it multiple times.
To call a function means to run the independent pieces that make it. Synonyms to call that you might see are execute and invoke.
Let's describe a series of single, non-abstract, tasks:
To abstract these single actions into a collective name, we do:
This code is a function declaration.
Here we have abstracted 6 activities into 1 activity: exerciseByronThePoodle
.
ASIDE: Abstractions themselves can be lumped together as if they were single things. The abstraction
dailyDogCareForByron
probably includesfeedByronThePoodle
,giveWaterToByronThePoodle
etc.
Explain How To Call a Function
To execute a function you add ()
after its name. To execute the function we just defined in JavaScript, you run: exerciseByronThePoodle()
. When we ran document.querySelector()
, we were calling a function. Math.floor()
is another function. That ()
is also known as the invocation operator because it tells JavaScript to...invoke the function.
LEARNING TIP: Try defining a small function in the JavaScript console to test this out. You can copy the syntax provided above.
A function must be declared before it can be called. Calling exerciseByronThePoodle()
before the function has been declared causes an error for JavaScript.
Define "Generalization"
Looking at our abstraction, exerciseByronThePoodle()
, it's pretty concrete, the opposite of abstract. It's concrete because it only works for Byron the Poodle. Our function would be more abstract if it were written for all dogs and it just-so-happened that Byron the Poodle was one of the eligible things to undergo the function's processes. The process of moving from concrete to abstract is called "generalization" (or "abstraction," by some).
Demonstrate "Generalization" By Using Parameters And Arguments
Let's make exerciseByronThePoodle()
more general. Looking at the console.log()
statements, we repeatedly refer to a dog's name and a dog's breed. Both of these are Strings
. If we were to write them as JavaScript variables inside the function we might write dogName
and dogBreed
.
Let's use String
interpolation to generalize the body of our function
If we call this function, we'll get the exact same result as the original exerciseByronThePoodle()
.
But there are some advances here. We define the dogName
and dogBreed
in only one place. That means we can change things a bit easier now by changing these variables instead of using find-and-replace (2 * 6 = 12
) twelve times.
Our problem now is that our function has the dogName
and dogBreed
locked in. If we could make it possible to tell each call of the function "Hey use these String
s instead" we could get more general.
That's the purpose of parameters. Parameters are locally-scoped variables that are usable ("scoped") to inside the function. In our example, our variables dogName
and dogBreed
should become parameters. They're defined inside of the function declaration's ()
.
JavaScript will assign the arguments of "Byron" and "poodle" to the parameters dogName
and dogBreed
when this function is called like so:
The full function declaration for exerciseDog
is:
When the function is called, it assigns dogName = "Byron"
and dogBreed = "poodle"
. The parameters are usable inside the function body as if they had been set with let
inside the function.
Because our function is now more general, we can:
If expected arguments aren't given, the parameters won't be set. The parameters' values will be undefined
. This is just like non-initialized variables; set them else they're undefined
. This will not cause an error in JavaScript. This can lead to humorous bugs like:
We can assign default arguments to our parameters. While it's not as attention- grabbing as a real error, it's a helpful signal that we've run off the rails.
In summary, we went from:
a list of operations
to a wrapped abstraction called a function
to a more general version of the function
Demonstrate Return Values
Sometimes it's helpful to send something back to the place where the function was called. It's like a "summary" of what happened in the function. In real life, we expect the function "bake a cake" to return a "cake". Or we expect "Visit the ATM" to return paper money. Functions in JavaScript can also return things. Consider:
In JavaScript, when a function is called, when it encounters a return
statement it "returns" the value of the thing that appears to the right of the word. The thing could be a String
, a Number
or an expression like 1 + 1
(which returns, 2
, sensibly enough).
When a return
is reached in the code, no further code behavior happens. Above, if weatherToday
is truthy
the only thing that happens is the evaluation of the String
.
Return values can be saved to variables. Or they can be used as inputs to other functions.
Conclusion
In this lesson we learned about the idea of abstraction, both in real life and in code. Abstractions reduce complexity by allowing us to think in groups of activities or things instead of being fully zoomed-in all the time. JavaScript functions are defined:
Functions are "called" by entering the function's name followed by the invocation operator, ()
. "Invoke" or "execute" mean the same thing. Arguments that the function declaration expects should be passed inside of the invocation operator. Functions can, but are not obligated to, return return values at the end of their execution. Return values are often results of a process, grand totals, or success / failure data.
Resources
Last updated