You'll notice, eventually, that functions are extremely important in JavaScript programming. In almost every tutorial or text book about JS, there's always an example with a function, without even introducing what they are. Why?
Because functions are everywhere.
When I started JS, one of the first few things I learned to do is to modify content on the website from just the click of a button (an html button element, that is). We do this by creating a JS event (events explored later) on an element that, once the element was interacted with, will trigger a function. That event is an HTML attribute called onClick=" ". Usually, and this is an old method, we'd put the function we'd like to run when the button is clicked on inside of the double quotes ("") of the onClick attribute. See below:
<input type="number" id="num1" />
<input type="number" id="num2" />
<button onclick="addNumbers()">Click Here</button>
<div id="results"></div>
Here you can see two input tags that are accepting number values. If you've explored HTML (which you should...because why are you here if you've not??), you would know how input fields work. Then, at the very bottom, you'll see a div tag with the id of "results".
In the button tag, you can see the event attribute onClick accepts the name of the function within the double quotes. This is the function that will be invoked (or called) when the button is clicked.
But that's not all. Notice that the parenthesis does not have any parameters. This function does not require any arguments to be able to run. See the below:
function addNumbers(){
let firstnumber = document.getElementById('num1').value;
let secondnumber = document.getElementById('num2').value;
let result = firstnumber + secondnumber;
document.getElementById('results').innerHTML = result;
}
The function gets the value of the two inputs and assigns them each to a variable. Then it performs it's calculations, and places the results within the html div tag with id 'results'.
Functions like the above kind of acts as a global function, in that all of the codes/assets required to run when the button is clicked, is located inside of the function.
How do variables work in functions? 🤷♂️
We touched a little on scopes in Variables II. There, we explained how variables behave when inside or outside of functions.
To recap, when you create a function, you create a scope. All variables defined within this scope can only be accessed within.
Example:
function checkChildren(){
var child = 'Joseph';
}
console.log(child);
Running the last line console.log(child); would result in an error, since the variable 'child' was not defined in the global scope. However, if I were to change the location of the console.log, say...inside of the function like so...
function checkChildren(){
var child = 'Joseph';
console.log(child);
}
...I'd see 'Joseph' printed on the console. That's because, console.log is looking for the variable inside of the scope that it's in. So if it's outside of the function (global), it's going to noticed that there's no child variable defined. However, once it's inside of the checkChildren function, it finds the variable and logs its value.
When a function accepts an external value (argument) within it's parameters, it acts like the below:
//Actual Function
function oddOrEven( number ){
//code here
}
oddOrEven(2);
//What's actually happening
number = 2;
So in this way, you wouldn't have to redefine the variable within in the function again. Just use it! ✔
function oddOrEven( number ){
return number;
}
That's it for Functions II. In the future, we'll explore the advance topics of functions in JS.
Happy Coding! 🎉✨🎇
Don't forget to follow me social media accounts :) :
Twitter/X - steph_codes
Threads - steph.codes
Instagram - steph.codes