Learning JavaScript, Day 19 – Parameters, Returns, and Arguments
I am wearing my beloved HTML Programmer hoodie and my My Neighbor Totoro socks, and I am completely ready to start learning more about Functions. Yep.
Except now I'm listening to Roy Mette's Pirates (of the East Coast of the Americas and the Caribbean Sea and I just want to spend all my time chilling out to "Jean Lafitte"
But I said I'd learn more JavaScript, and by god, I'm gonna.
Function Parameters
I am very amused that they keep on using the "Fahrenheit to Celsius" example. But it's so good at showing you how you can put parameters into your functions.
function toCelsius(farenheit) {
return (5/9) * (farenheit-32);
}
let value = toCelsius(77);
document.getElementById("demo").innerHTML =
"The value is " + value;
You can keep on changing that number in toCelsius to be anything, and the function will keep chugging along, changing your temperature to Celsius.
It also says that functions can have as many parameters as you want, as long as you separate them by commas, but the examples they keep showing only have one or two parameters. So now I have to try to make one with more.
function pirates(pirate1, pirate2, pirate3) {
return pirate1 + ", " + pirate2 + ", and " + pirate3;
}
let pirateList =
pirates("Anne Bonny", "Mary Reade", "Calico Jack Rackham");
document.getElementById("demo").innerHTML =
"Pirates: " + pirateList;
Pirates: Anne Bonny, Mary Reade, and Calico Jack Rackham
Welp, that works. Nice.
You can also put in default parameters, in case you forget to put it in.
function pirates(pirate1, pirate2, pirate3 = "Charles Vane") {
return pirate1 + ", " + pirate2 + ", and " + pirate3;
}
let pirateList = pirates("Anne Bonny", "Mary Reade");
document.getElementById("demo").innerHTML =
"Pirates: " + pirateList;
Pirates: Anne Bonny, Mary Reade, and Charles Vane
Because I forgot to put in Calico Jack as the third pirate, Charles Vane steps up.
Function Return
return sends the value out of the function into whatever code invoked it. The function will stop running once it hits return, and sends the value on.
You can invoke a function inside another expression, which they show by doing arithmetic, but I bet it works with strings as well.
function pirates(pirate1, pirate2) {
return pirate1 + " and " + pirate2;
}
let pirateList = "Pirates: " +
pirates("Anne Bonny", "Mary Reade");
document.getElementById("demo").innerHTML = pirateList;
Pirates: Anne Bonny and Mary Reade
Yep.
If there isn't a return in the function, the value is undefined.
And you can use return to stop a function early if there's a condition in place.
function pirates(pirate1, pirate2) {
if (pirate1 == "Jack Sparrow") {
return "Historical pirates only, please.";
}
return "Pirates: " + pirate1 + " and " + pirate2;
}
let pirateList = pirates("Jack Sparrow", "Anne Bonny");
document.getElementById("demo").innerHTML = pirateList;
Historical pirates only, please.
I change pirateList to be Anne Bonny and Jack Rackham, I get
Pirates: Anne Bonny and Jack Rackham
Apparently console.log() will show the output but doesn't return a value. I suppose that would be annoying if I used console.log(), but I don't think I really will.
Function Arguments
So in pirates(pirate1, pirate2), pirate1 and pirate2 are the parameters, but when I do pirates("Anne Bonny", "Mary Reade"), Anne and Mary are the arguments.
It then gets into the "argument object", where they use a lot of arithmetic to show what they mean, but I think this makes it more confusing.
Basically, the argument object is just everything you put in as a argument, and you can do all the things you do with an array to it.
It also matters what order you put the arguments in as, because, basically, each argument matches up with each parameter.
And arguments can be variables as well, so you don't even have to include what the argument actually is, just the variable that you'll be putting info into.
let jack = "Calico Jack Rackham";
let anne = "Anne Bonny";
function pirates(pirate1, pirate2) {
return pirate1 + " and " + pirate2;
}
let pirateList = "Pirates: " + pirates(jack, anne);
document.getElementById("demo").innerHTML = pirateList;
Pirates: Calico Jack Rackham and Anne Bonny
If you leave off an argument, then the missing values will be undefined. Which is where the default parameter comes in.
function pirates(pirate1, pirate2, pirate3) {
return pirate1 + ", " + pirate2 +
", and " + pirate3;
}
let pirateList = pirates("Anne Bonny", "Mary Reade");
document.getElementById("demo").innerHTML =
"Pirates: " + pirateList;
returns
Pirates: Anne Bonny, Mary Reade, and undefined
So you really have to bring in a default parameter to make sure you don't get that undefined.
function pirates(pirate1, pirate2, pirate3 = "Charles Vane") {
return pirate1 + ", " + pirate2 +
", and " + pirate3;
}
let pirateList = pirates("Anne Bonny", "Mary Reade");
document.getElementById("demo").innerHTML =
"Pirates: " + pirateList;
Pirates: Anne Bonny, Mary Reade, and Charles Vane
There's also the rest parameter (...), which lets you have as many arguments as you want. They show it with numbers, but
function pirates(...pirate) {
return pirate;
}
let pirateList = pirates("Anne Bonny", "Mary Reade",
"Calico Jack Rackham", "Charles Vane",
"Edward Teach", "Bartholomew Black", "Israel Hands");
document.getElementById("demo").innerHTML = pirateList;
Anne Bonny,Mary Reade,Calico Jack Rackham,Charles
Vane,Edward Teach,Bartholomew Black,Israel Hands
I mean, that's awkward looking, and I bet rest works better with numbers, but that's good to see, because it means I don't have to keep on coming up with pirate1, pirate2, pirate3, and so on.
Day 18 — Results
- You can have as many parameters as you want in a function, just separate them by commas.
- You also put a default value for a parameter in the function, in case you forget the argument later on.
returnsends out the value of the function into the code.- Functions stop running once they hit
return. - If you don't have a
returnin the function, the value's undefined. - Parameters are the names of things, arguments are the values of things.
- It matters what order you put your arguments in.
- You can have variables as arguments.
- If you leave off an argument, it becomes undefined.
- If you use the rest parameter (
...), you can have as many arguments as you want.
Next up is Function Expressions, so I think Arguments are a good stopping point. Expressions are going to need a lot more brain power.
Today's Sticker

I am occasionally tempted by the mystery packs at Kawaii Pen Shop and when I do get one, there's always at least one sticker pack in there.
I can't remember which one this came in, but I do have a hell of a lot of cute cat stickers.