Javascript part 4

Today we talk about “functions” in javascript.

(This is an important topic because we use functions quite a bit in Javascript.)

functions:

functions are fundamental building blocks for javascript. A function is a javascript procedure to set statements that perform a task or calculate a value. In English, we build a machine to do tasks for us instead of outputting “hello world” ten times like this.

etc..., etc…

Instead of that, you would build a function or “a machine” to perform this task for you.

In the first step, We must define the function inside the scope of where you want to call it. A function statement most of the time will have a “function” keyword(look at the example below).

The second word after the function is usually the name of the function, which you use to call the function. So this one would be “square”, so to to RUN this function all you would have to do it call “square()”. ( it is usually a good idea to call it something you relate to the task it is doing. In this case, I'm just squaring any number you would pass in.).

This machine above or function takes in an argument which we name “number”, the user will pass in any number they want( remember number is just a placeholder, you can call it anything you want)

Above we run the whole process of the “square” function. We call “square()” and pass in 10 into the function. I want to explain this because it took me a while to figure this out. We built a “machine,” which takes in an argument(a random object) which in this case we call “number ”. So when you call the function it can take values or “numbers” of your liking. “number” is just a placeholder, so the machine doesn't break(and if you don't pass in the argument at all, it will break.) We also put the “return” keyword, so the function knows what to output when calling that function or “machine.”

Here is another example, we first set the variable to “someVar” and the value to “hat.”

Then we tell “myFunction()” to return the value of “someVar.” we call “myFunction()” on the next line, and it returns “hat.” (its a good habit to always set the variable before the function or it will not read it.)

Also important to mention is SCOPE;

in the example above, I set “someVar” outside of “myFunction” this is ok because the keyword “var” gives us global scope (or access to that variable anywhere). If we put the “someVar” inside the function, it would have “local scope.” We will talk more about scope in a later section.

Now, stay with me!

If for some reason you have two of the same variable names…the local scope takes priority over the global scope (check the example below.)

You see we set two of the same variables that use the same name, called “someVar”. then we have two different values, in two different locations. The function first reads the variable inside the function and says, “Okay, great; we have a match ” outputs “shoes.” Then doesn't even look any further.

If you look at the example below, you will notice that I call “someVar” by itself, and NOW it returns just “hat” because we are outside of that function. So we get back “someVar” with the value of “hat.” (that's the best I can explain scope at this time.)

ADVANCED function fun:

We will talk about nested functions now. (Also took me for a loop when first learning it.)

We can take functions and put them inside of functions like so.

A lot going on here; I will try my best to make sense of it.

So I like to look at it from the inside out. I start with function “square” it's taking in an argument of “x” then returns “ x * x”(multiply). that was one whole function, then we have “addSquares,” which has “square” function inside of it. It takes two arguments, “a” and “b.”

its returns “square(a)” + “square(b).” we can only call “square” within the “addSquares” method. If we had it outside of it, it would be out of scope, and it would run an error saying “square not defined” or something like that.

With that being said, “square()” can use the outer information or functions, variables, and arguments.

The “addSquares()” can not use the variables and arguments of the inner function inside “square.” These are called closures ( google for more information).

to finish up here, here we pass in two arguments “2, 3”. function “addSquares()” sees that then goes to the return, sees “square(a)” , looks inward to “square()” function then passes in the number “2”. Runs that inside multiples “2” squared. then repeats that same process for “3”. so now we have “4” and “9”, back into “addSquare()” and we add them all up and return the answer of “13”. (that was more or less true lookup scoping from functions here for more details.)

Okay, I think that was enough for today; let your brain take all that in, and ill see you on the next one.

check out some more….

Javascript 1 (variables and data types)

Javascript 2 (numbers and strings)

Javascript 3 (bracket notation and 20 diff string methods)

Javascript 4 (functions and how they work)

Javascript 5 (hoisting, comparison operators, and if-else statements)

Javascript 6 (diff. Equal signs, null, and undefined)

Javascript 7 (logical operator, &&, || and ternary operators)

Javascript 8 (switch statements and arrays)

Javascript 9 (commonly used arrays in javascript)

Javascript 10 (Math. And parseInt Usage)

Javascript 11 (for loops and nested for loops)

Javascript 12(while loops and for..in and for..of loops)

Javascript 13(8 diff array methods)

Javascript 14(objects and ways to use objects)

Javascript 15(JSON and fetch request)

Javascript 16(“this” keyword)

Javascript 17(strict mode and error handling)

Javascript 18(setInterval/setTimeout and Dates)

React info…

React part 1 (How to start a react app)

React part 2 (components and dynamic values)

React part 3 (Multiple components and small styling)

React part 4 (click events with functions and react dev tools)

React part 5 (link to: useState hook and how to output lists in react)

React part 6 (Props and reusable components)

React part 7 (passing functions as props and use effect hook)

React part 8 (continue with useEffect hook, dependencies with useEffect, and setting up the JSON server to fetch)

React part 9 (Fetching data with JSON)

React part 10 (loading bar and fetch errors)

React part 11(custom hooks)

React part 12(React Router Dom, Exact, and Links)

The Social Media…

Github

Instagram

Facebook

Linked-In

Medium

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jonathan Bleibdrey

Jonathan Bleibdrey

Software engineer, Creator, Ball of Energy