So when I first started learning javascript the hardest thing for me to grasp was the idea of functions.
I understood the basic concept theoretically but when it came to implementing the concept the whole idea went out the window.
So I wanted to write this so if your like me then this example will give a more clear perspective in you approaching writing functions.
Have you ever just finished a fantastic meal and after you ate you wanted something sweet to compliment the meal.
When then happens to me something cheap and affordable for this fix is brownies, so I decide to make brownies.
When this first happened to me I had no idea of how to make brownies but I figured it wasn’t hard to learn.
I bought the pre-made package from Kroger and saw the other ingredients I needed to start my sweet treat.
I got the cooking oil, eggs, and my water.
I then began to follow the instructions on the back of the box…
- pour the brownie mix in a bowl
- add 2 eggs, or 3 for more cake like brownie
- add 1/2cup of oil
- add 1/4 cup of water
- mix until even consistency
- pour into baking pan and place in the oven at 350º
Walla! Now in about 30-45 mins I now have a delicious set of brownies.
It was great I now had my brownies and I knew how to bake them the next time I wanted something sweet.
Then I thought to myself I wish there was a way I could just press a button and everything I just did would do it again.
Introducing the function.
A function is simply a set of instructions, steps or guide that operate, or perform when you call on it, i.e press a button.
Does that make sense?
Ok now that you get the concept here is a quick example of what a function would look like if it was written in code with the same example we used with the brownie.
First you would “declare” the function and give it a name…
function makeBrownies { }
the above example is how write begin to write your function.
You write the operation name “function” and then give it a custom name that you can remember or makes sense.
This will be necessary when we call it later.
Now for those curly things next to your custom name called curly braces or brackets.
Within the brackets is where you define the steps you want the function to follow.
so to write this out as an example it would look something like this…
function makeBrownies {
- pour the brownie mix in a bowl
- add 2 eggs, or 3 for more cake like brownie
- add 1/2cup of oil
- add 1/4 cup of water
- mix until even consistency
- pour into baking pan and place in the oven at 350º
}
for sake of this example I am oversimplifying for understanding
Now that you have the body of the function written out with the instructions and steps to follow it is now time call it.
Calling a function simply means when you want to use the function you call it.
To call a function simply write the name of the function followed by a set of parenthesis, so…
makeBrownies()
Once you have called the function when the program runs and it encounters the the call it will operate and perform the function you defined and walla you have a new set of brownies.
And everytime you press the button, i.e. call the function it will perform based on your instructions.
Easy right? make sense?
Once i got this functions made more sense.
Which is why methods for javascript objects is nothing but a function.
Get it?
It’s the method of an object, the how an object can function or what it can do.
Understanding is powerful, but it doesn’t mean much if you don’t practice.
That’s why I created a practice sheet so you can practice what you just learned to solidify the concepts.
No worries I created a cheat sheet so you know what the answers are and you can repeat creating functions again and again until it makes sense.
Enter your email below to get access to your free practice worksheet to understanding the basics of functions.
I hope this helps and happy coding.