Introduction
Let's jump right into it - what is this blog about? To put it simply, my experience taking programming courses has taught me that some concepts are often explained poorly, or taken for granted by experienced programmers. I'm kicking this blog off with one topic that seems to confuse a lot of beginners, not because of its complexity but because of low-quality explanations.
That's right, today we'll be looking at why in every beginner Javascript course I've taken, half of the class stares at their first function with complete confusion.
Let's get coding!
Understanding the problem
const name = "Mark";
function displayName(string) {
console.log(string)
}
displayName(name)
So, what could be so confusing about this very simple code example?
Here's the problem. By this point in a true beginner's Javascript instruction, they've been taught how variables work and they've been taught that a variable must first be created in the code to call it later.
So where do things go wrong? It's the function parameter.
Experienced programmers take this for granted, but a brand new student will have thoughts like "when was string
defined? What is string
? How does string
get replaced by name later?"
One variation of a question I see asked when functions are first being presented is:
"Why does
string
work if we never defined it?"
Here are examples of the replies I usually hear instructors give:
"We're able to console log
string
because we defined it in the argument.""
string
works because we call the function later while insertingname
.""The function knows to replace
string
withname
when we call it - you can do this with any other variable."
These answers aren't incorrect and they're even helpful! But they miss the mark in terms of the misunderstanding that's happening here.
This knowledge issue is usually two-fold
The student so far has learned that you must define a variable using
var
,let
orconst
to use the variable without error.The instructor has explained the syntax of using parameters, but has not actually defined a parameter.
So let's take a look at an example of an answer that could be the one that the student is looking for:
"When we type in
string
, it's just like defining a variable except it only exists inside of the function. When we insert an argument later, the function knows to turn anystring
keyword inside of the function code into the argument that we added."
Image by storyset on Freepik
Instead of just explaining what a parameter does, defining parameters without relying on technical jargon is a crucial approach that many instructors miss.
Here's a simple example to demonstrate this with:
// We're adding the age variable to show how parameter labeling works.
const name = "Mark";
const age = 32
// The function parameter now has the same label as a global variable.
function displayFunction(name) {
console.log(name)
}
// When we call displayFunction(age), JS ignores the name variable.
displayFunction(name);
displayFunction(age);
With this code, we can prove that even though a global variable called name
exists, the parameter name
does not refer to the name
variable but instead is contained locally within the function.
This incredibly simple detail is one that I've seen keep certain students (speaking from experience) behind their peers until it finally clicks that the parameters being named aren't referencing specific variables or calling pre-defined keywords. This problem is usually made worse by the crippling fear that your question will make you look silly - a fear that everyone hopefully overcomes.
But this does mean a number of true beginner students will be held back in their understanding of functions, so this concept shouldn't be taken for granted!