Learning JavaScript, Day 17 – Starting Functions

18 May, 2026

I spent Saturday at a tattoo convention. I wasn't planning on getting anything done, but then there was Holly doing Haunted Mansion tattoos...

There will be a better picture later on, but it's currently healing up, and the back of my calf is surprisingly awkward to photograph, so I will show it off at another day.

It looks so good, though, oh my word.

And while I heal, I will be learning about JavaScript functions, because I am done with arithmetic, I am done with numbers, we're making code blocks to execute hell yeah.

Functions

I really like how they have this block as the first thing you see:

Learn Functions in the Right Order:

• First the idea
• Then how to make them
• Then how to use them

I mean, that's basic there, everyone's going "Well, obviously," but how many other courses just dump you right into "This is one I've made earlier" without explaining anything?

And they break everything into levels of experience, which also helps.

So in the Beginner level, there's:

• What are Functions?
• Calling Functions
• Function Parameters
• Function Return Values

Then in Intermediate:

• Function Arguments
• Function Expressions
• Arrow Functions
• Function Quiz

Then in Advanced:

• JavaScript Definitions
• JavaScript Callbacks
• The this Keyword
• The call() Method
• The apply() Method
• The bind() Method
• Self Invoked - IIFE
• JavaScript Closures
• Function References

(All emphasis theirs.)

We'll see how far I actually get into all this. I might not go through the Advanced stuff, especially since my MSc course starts up next week, and I'll have a heck of a lot of reading to do, but I can, at least, get through the Basic and the Intermediate.

What Are Functions?

Functions are chunks of code you can call over and over again, as many times as you need. Sort of like how you can have CSS for a particular class and just use that class all over the site whenever you need a certain style.

"This is the box that is always blue and with bold text."

"This is the code that gives me the temperature."

You create a function by using

function functionName() { 
	Code to run;
	}

function tells the computer that you're setting up a function, the functionName() is just that, and then you put the code in the {} to make that code run whenever you call the function by its name.

You call a function by just including its name. So, if I did something like this

function iAmACat() {
	return "Meow";
}
let message = iAmACat();
document.getElementById("demo").innerHTML = 
message;

I get back Meow, like I should.

You can include optional parameters in the () when you call the function.

So I can do this

function temp(c) {
	return (c * 1.8) + 32;
}
let temperature = temp(12);
document.getElementById("demo").innerHTML = 
"The temperature is " + temperature + "°F";

Which gives me The temperature is 53.6°F.

(Yes, I will always go back to my weather converter.)

You can use functions over and over again, so I could also do

function temp(c) {
	return (c * 1.8) + 32;
}
let today = temp(12);
let tomorrow = temp(16);
let wednesday = temp(19)
document.getElementById("demo").innerHTML = 
"The temperature now is " + today + "&deg;F<br>" +
"The temperature tomorrow will be " + tomorrow + "&deg;F<br>" +
"The temperature on Wednesday will be " + wednesday + "&deg;F";

And get the temperature for today, tomorrow, and Wednesday.

The temperature now is 53.6°F
The temperature tomorrow will be 60.8°F
The temperature on Wednesday will be 66.2°F

Variables that are included in a function are only in the function, and can't be accessed elsewhere.

You can also use functions as variables, and then, lo and behold, they use an example the opposite of my usual weather script.

let text = "The temperature is " + 
toCelsius(77) + " Celsius.";
document.getElementById("demo").innerHTML = text;

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
} 

C'mon, people, that ain't what we're doing here. I know the temperature in Celsius, it says it right in my toolbar up top.

It does throw me a little that the code goes fahrenheit = 77 without actually definitively indicating that anywhere, but I guess putting it into the () does indicate that. I just keep looking for a let and it isn't there, and I go "but how did you tell it?"

let report = "The temperature now is " + convertTemp(12) + "°F."
document.getElementById("demo").innerHTML = report;

function convertTemp(celsius) {
	return (celsius * 1.8) + 32;
}

I'm not entirely sure why the let and document parts are above the function. When I swap them, it all still works, so it must just be a style thing.

The lesson finishes by saying how useful functions work:

• Parameters: Some values are sent to the function
• Arguments: Some values are received by the function
• Function Code: Some work is done inside the function
• Return Output: Some value is returned from the function

Day 17 — Results

• Functions are written function Name() { code }.
• You can include parameters in the (), like temp(12).
• You can also include variables in the (), like temp(celsius).
• Any variable you define inside the function can't be called outside the function.

I know this doesn't seem like a lot, but the next lesson gets into inputs and returns and I think I need to take it a bit slow.

Today's Sticker

Also at the convention was the amazing Lino Folk with absolutely astounding linocut artwork. I got a neat Black Phillip tea towel (which you can see in the bottom right of this photo), and this excellent Mothman sticker.

I managed to escape that booth with three stickers, a badge, a keychain, and a tea towel. I narrowly avoided buying up all the lino prints, just because I already have piles of art that aren't up on the walls.

I resisted.

Admirably.

However, you should not. Check out the Etsy store.

#kate learns javascript #kate learns web development #programming