JavaScript

Scott Wells
Scott Wells
4,737 Points

I understand callbacks, but I'm not understanding the purpose of passing an argument to a function.

I think I understand the usefulness of a callback - a function that is invoked when another function is invoked, either now or later?

However, for functions in general, I don't quite understand the purpose of an argument and how it relates to the function. The code from this lesson:

const div1 = document.getElementById('first');
const div2 = document.getElementById('second');
const div3 = document.getElementById('third');

function makeRed(element) {
    element.style.backgroundColor = "red";
}

function makeBlue(element) {
    element.style.backgroundColor = "blue";
}

function addStyleToElement(element, callback) {
    callback(element);
}

addStyleToElement(div1, makeRed);

addStyleToElement(div2, makeBlue);

When the function makeRed is called, it changes the background color of the element to 'red'. But we never declared 'element' as a variable or defined what it was.

function makeRed(element) {
    element.style.backgroundColor = "red";
}

Later in the code we have:

function addStyleToElement(element, callback) {
    callback(element);
}

addStyleToElement(div1, makeRed);

I really have no idea what's going on here. The function 'addStyleToElement' inputs two arguments: 'element' and 'callback'. Then it reverses them or something weird when 'addStyleToElement' is invoked. Then the following line invokes 'addStyleToElement' again, but now it has different arguments? Does the order of the arguments matter? Does it affect what they do?

Is this essentially the same thing?

function addStyleToElement(x, y) {
    y(x);
}

Thanks in advance. I've read all over the internet about this and I haven't found anybody that can example it for dummies.

3 Answers

Jennifer Nordell
MOD
Jennifer Nordell
Treehouse Moderator

Hi there, Scott Wells ! There are already some brilliant answers left here, but I'd like to throw in my two cents if that's ok. The purpose of an argument is to give a value where there is none. When the function is defined, those parameters are essentially variables that have no value. Arguments are what we send into the function at the time we call it to give that parameter a value.

Imagine for a moment that you want to run a function on the last ten users to log in. Well, that list is going to change over time and depending on the traffic of your site, it might change very quickly. So we send in that list as it is right now and run that function.

I have, historically, used a PDF document that I wrote to illustrate the different parts of a function, their terminology, and why we need them. However, today I finally bit the bullet and posted it on Medium. It's a bit lengthy, but if you follow it to its conclusion, I feel like you will have a better understanding of arguments and perhaps functions in general. You can view the article here.

Hope this helps! :sparkles:

Scott Wells
Scott Wells
4,737 Points

Thank you! Your article cleared up my confusion with the different parts of a function and what they do. Also, now I want a cheeseburger and onion rings. Cheers!

Liam Clarke
MOD
Liam Clarke
Treehouse Moderator 16,893 Points

Hi Scott

The parameters/arguments you pass in a function are a way of using that information in a cleaner way, as well as allowing us to reuse the function multiple times.

These arguments can be named anything you like within a function.

function addStyleToElement( valueOfFirst, valueOfSecond ) {
    valueOfSecond( valueOfFirst);
}


addStyleToElement( first, second );

So although the variable names are different, the values are passed to the argument.

This becomes very useful when using callbacks, Ajax, for example, you can pass in information to load different data based on the arguments you put in, thus allowing you to make one ajax function that can do multiple different requests.

Hope this helps! If not just let me know and il break down a more useful example of arguments and callbacks

Scott Wells
Scott Wells
4,737 Points

In the original code I posted above, does the 'element' in...

function makeRed(element) {
    element.style.backgroundColor = "red";
}

... share any relationship to the 'element' in ...

function addStyleToElement(element, callback) {
    callback(element);
}

Or are they unrelated because they are in separate functions?

Matthew Griffith
Matthew Griffith
Full Stack JavaScript Techdegree Student 18,651 Points

So, on a basic level, 'element' is just a param that the function uses to get information to use within the function. What the words you use here does not matter. It could say:

function addStyleToElement(cats-and-dogs, donkey-kong) {};

What does matter is that you consistently use them throughout the function.

When you call ...

addStyleToElement(div1, makeRed);

...your function basically takes the info in the div1 variable and inserts it into the param 'element'. Then it takes the function makeRed and inserts it into the 'callback ' param. But, because its a function, in calls the makeRed function. The makeRed function takes the div1 info and process it.

In this case, the line with callback(element) is the equivalent to:

document.getElementById('first').style.backgroundColor = "red";

thus, changing the background of the element with the id 'first' to the red.

Callbacks allow you to recycle code.

Jennifer Nordell
Jennifer Nordell
Treehouse Moderator

Hi there, Matthew Griffith1 I took the liberty of changing your "comment" to an answer. Thanks for helping out in the Community! :sparkles: