Functions II - Beginner's JS

Stephon Fraser's photo
Stephon Fraser

Published on Jul 20, 2021

3 min read

Subscribe to my newsletter and never miss my upcoming articles

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 (website button, that is). We do this by creating a JS event 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:


<button onclick="addNumbers()">Click Here</button>

In the above code, you can see that we have 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 do 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;
}

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.

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 get a value returned. 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

 
Share this