Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Paul Jackson
Paul Jackson
8,943 Points

passing arguments

I'm having trouble grasping what arguments and parameters are and how to use them. The following analogy makes sense to me... 

function goToCoffeeShop(drink) {
    //some code here
}

goToCoffeeShop('coffee');
goToCoffeeShop('iced tea');

I understood it when Dave first started talking about it but as we got into more complex Javascript I lost it somewhere along the way.

function print(message) {
  var div = document.getElementById('output');
  div.innerHTML = message;
}

The value, message, given to div.innerHTML inside the above function has nothing to do with the parameter correct? Maybe I just got confused by the part at the end with all the things named list, playlist, printList, listhtml, etc... I just am not sure where things are supposed to go.

2 Answers

Matthew Rigdon
Matthew Rigdon
8,223 Points 
function print(message) {
  var div = document.getElementById('output');  // assigns the element that has "output" as an ID to - var div
  div.innerHTML = message; // div.innerHTML is using the element from the previous line and calling method on it to get just the HTML portion.
}

The message referred to at the end of the code is the parameter. This code is pointless in my opinion, since it overwrites the var "div" and reassigns it to message. Let me use your other example to explain this better:

function goToCoffeeShop(drink) {
    //some code here
}

This function takes in a parameter "drink." Drink is a variable that you can reference ONLY inside of that function. So we could do the following:

function goToCoffeeShop(drink) {
    console.log(drink);
}

goToCoffeeShop("coffee"); // where ever you see "drink" in the function, you can replace it with "coffee"
                                       // you will see a log that says "coffee"
goToCoffeeShop("chai latte"); // log will show "chai latte"

Now for your original question, use the following example:

function goToCoffeeShop(drink) {
    var choice = "tea"; // just assigning a random variable with "tea"
    choice = drink; // this step reassigns "choice" to whatever drink is, which was coffee... see below
    console.log(choice);
}

goToCoffeeShop("coffee");  // console will log "coffee" since "tea" is overwritten
Paul Jackson
Paul Jackson
8,943 Points

Okay, that concept makes sense to me, that the parameter is what goes in the parentheses when creating the function and the argument is what's passed in when you call the function. To my understanding, it doesn't really matter what you name the parameter (obviously you'd want to name it something relevant for better clarity). The parameter is a basically placeholder for whatever argument you're going to pass into it.

And in the other example, we're telling the computer that when we pass in an argument for "message" it should replace the innerHTML inside the element with the id 'output'.

Please tell me that's right, because I feel like the light bulb just went on :D

Matthew Rigdon
Matthew Rigdon
8,223 Points

Please tell me that's right, because I feel like the light bulb just went on :D

Yes, that is it! I was mistaken when I originally wrote that. You gave me a light bulb moment as well! Haha.

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

Parameters are what the function itself uses are the variable(s). Example

function funcName (parameter1, parameter2) {
  return parameter1 + " " + parameter2
}

The argument(s) on the other hand are the values that are passed into the function. Example 

function funcName (parameter1, parameter2) {
  return parameter1 + " " + parameter2;
}


funcName (argument1, argument2);

//argument1 = parameter1
//argument2 = parameter2

I hope this helps.

Paul Jackson
Paul Jackson
8,943 Points

I appreciate the input Chyno. I do understand which is which. Just get a little confused at times where the parameters inside the curly braces are used and why.