Write reusable javascript with functions freecodecamp

Hello everyone! I just finished my night shifts for the week and looking forward to seeing what FreeCodeCamp has in store for us this time around. Looking at the lessons on JavaScript, were almost at the halfway mark. Let’s get back into it!

—

Writing Reusable JavaScript Functions

This reminds me a little bit of the CSS class declarations, which I use regularly when writing up HTML. The code in JS can be divided into reusable parts/chunks called functions. For example:

Here, we are effectively saying that when we call or invoke functionName(); , the code will print out all the “logged” code within the {} brackets, which is in this case: “Hello World”.

Passing Values to Functions with Arguments

Parameters act a bit like the hashtags which we place in HTML code before we have our URL handy, or placeholder text in a text field (remember the ipsum language?).

Parameters are variables that act like placeholders for values which we will later apply to a function when it’s called. Typically, functions have one or more parameters. These values are called arguments. This harks me back to my brief python days..

FreeCodeCamp has an example function with two parameters, in this case they are named “param1” and “param2”:

This looks very similar to the chapter above, except we have now added variables within the () brackets on the first line.

When we then assign two arguments inside the curly brackets, the two parameters will take on the value of the new arguments we assign to them.

Here I have altered the example above and called the function afterwards (line 5), let’s see how that looks:

For the challenge given, I had to create a function which when called, outputs the sum of the two arguments (seen on line 5 and 6). Here’s how that looks:

Note: Notice the little “+” operator on line 2 between the parameters inside the {} brakets. Also notice how the function functionWithArgs is reused above when it was called for twice, with different arguments (line5 and 6).

Global Scope and Functions

Now we’re really getting into the interesting parts of JavaScript!

The term scope refers to the visibility of a variable. Variables defined outside of a function block are set by default to have Global scope. This means that within your code they can be viewed and called everywhere in JavaScript.

So therefore, variables without the var keyword (which tells the code that we are defining a variable) have Global scope. So, always define your variables with the var keyword!

Local Scope and Functions

On the other hand, variables defined within a function, including their parameters, have Local scope, meaning they are only visible within that function. Here’s my example:

Here, we see that the variable myVar (referred to here as “foo”) has local scope (line 2), as it is defined (line 2), and logged (line 3), within the function myLocalScope (line 2–4). When myLocalScope is then called (line 6), we see that it returns both the string and the local variable together (first line in the output): “inside myLocalScope foo”.

However, when we then try to log the variable myLocalScope outside the function’s curly brackets (line 7) it returns “ReferenceError: Can’t find variable: myVar”, as it is not globally defined.

Global vs. Local in Functions

It’s possible to have a local and global variable share the same name, however, the local variable takes precedence (higher priority) over the global variable when present. Have a look at this:

Here, we have a global variable (line 1) outside the function, and a local variable (line 5) within the function. Both share the name outerWear. When the variable myOutfit is called (line 10), the output will return “sweater”, even though that variable has been previously defined globally as “T-Shirt”, so we can see how the local variable takes priority here.

Return a Value from a Function using Return

Lastly, let’s see how return is used. We saw it in the above chapter, but what does it actually do? We can pass a value into a function using arguments. The return statement takes the value out from a function for use. Have a look:

Here, the value num is taken back out of the function plusThree to say that plusThree will “return” a value of a number (num) plus (+) 3. As FreeCodeCamp says it:

plusThree takes an argument for num and returns a value equal to num + 3.

Here, I wrote up that the function timesFive and applied the return statement to say that the timesFive is equal to any number (num) multiplied by 5 (line 2). Then on line 5, I defined a variable answer and use the number 2 as an example, this will return 10.

—

Aaaaand let’s call it there. That was really fun! I’m enjoying how this is picking up. Hope to write again soon. See you!