Fun With Simple Functions

Wow...I can't believe I'm actually starting to understand what a function in JavaScript is and how it operates. I thought there was no way I would fully understand it but surprise surprise I actually understood it!

I found this amazing site that for some strange reason helps me to "connect the dots" and help it click in my brain. If you're also learning JavaScript like I am this is a great site to learn it from:

Kirupa Website

Now once I understood how functions are used and how they work (at the very least a simple rudimentary understanding of it) I decided to create my own code using what I understood about JavaScript functions for two reasons:

  1. So I can practice through coding repetition how that particular function with arguments is written.

  2. So I can create something simple using what I understood so far without Googling for answers. I wanted to see if I could try to figure it out without retorting to finding the answers online. I wanted to use my own brain first in trying to figure it out. If I couldn't figure it out after getting stuck for a long time on it then I promised myself to Google it so that I could understand where I went wrong and what important bits of code I was missing. But first my strategy was to try to figure it out first using just my brain and what I have just learned so far on JavaScript functions.

  3. I decided to create a very simple alert with a function. This is how it looks like:

    Coding JavaScript Function example

    The only problem with this was when I did the callback function. Notice the alert within the function where it says:

    alert("There are a total of " + villain + heroes + " villains and heroes that attended this years's villain convention.");

    And do you see the callback functions bellow? All it did was add the first number to the second number together. For example like this:

    • villainConvention(7, 4); (74 is the answer)

    • villainConvention(8, 3); (83 is the answer)

    • villainConvention(100, 4); (1004 is the answer)

    The same thing happened when instead of the "addition symbol" I used the multiplication symbol. It just multiplied the first number to the second. Like this:

    • villainConvention(7, 4); (28 is the answer)

    • villainConvention(8, 3); (24 is the answer)

    • villainConvention(100, 4); (400 is the answer)

    Okay...so for some reason it's not doing what I am asking it to do. Actually, let me rephrase that. It's doing EXACTLY what I asked it to do. But not what I WANTED it to do. I wanted to figure out how many total villains showed up at this famous evil convention and I also wanted to know how many heroes also showed up at this convention to ruin the fun for the villains. I don't want to add both numbers together (either through addition or multiplication). I want to get two separate headcounts! Not a combination of both of them! This is just not going to work.

    So I started thinking...what if instead of me putting together both the "villain and heroes" argument by using addition and or multiplication to try to get some kind of response I instead separate the arguments without any math involved? So that way the callback function arguments work the way I want it to? And this is exactly what I did. Just like this:

    Coding JavaScript Function example

    And guess what? It worked!!! It worked just like I wanted it to! So instead of the callback argument numbers adding and or multiplying each other they are now simply just replacing the name of the argument with the correct values. For example:

    • villainConvention(7, 4); (7 villains and 4 heroes is the answer)

    • villainConvention(8, 3); (8 villains and 3 heroes is the answer)

    • villainConvention(100, 4); (100 villains and 4 heroes is the answer)

    Yes! This is exactly what I originally wanted it to do. And I figured it out all on my own just by playing around with the code and testing it out on my browser until I got it to do what I wanted it to do. It felt awesome when I figured it out all on my own!

    I also decided to take it a bit further and see if I could make my small little coding project a little bit more complicated using everything that I had just learned. I love video games and one of my favorite games on my Xbox is "Tomb Raider A Survivor is Born" and the sequel "Rise of the Tomb Raider."

    Here is the code I used to make this JavaScript function work:

    Lara Croft coding example

    Lara Croft coding example

    And it worked! The JavaScript function code did exactly what I wanted it to do! I know it's a very simple JavaScript function but the fact is that once I understood the logic of how a basic function works I was able to use my creativity to create something with it. And I did!

    Now if these arguments were numbers that I wanted to add and or multiply instead of having just phrases I then wouldn't have needed to declare all these variables like I did to all these phrases. All I would do is simply put the numbers I wanted to add or multiply in the callback function and call it a day like I did with my villain convention code. I didn't have to declare any variables in that villain convention code at all. But it seems that things get a lot more complicated when you want to callback phrases instead of numbers.

    I know there are probably other ways of coding this example that I have not discovered yet. But...at least I can say that what I did worked for me! And I'm looking very much forward to learning other methods that would come to the same conclusion or an even faster conclusion.

    Since I learned how a simple JavaScript function works and I was able to create a few interesting projects with it, you know what that means right? You know it! It's time for the Woohoo Dance!

    Girl hit on head while dancing