Figuring Out the Fundamentals: Function Parameters

Figuring Out the Fundamentals: Function Parameters

·

3 min read

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 inserting name."

"The function knows to replace string with name 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

  1. The student so far has learned that you must define a variable using var, let or const to use the variable without error.

  2. 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 any string 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!