2nd Week of #100DaysOfCode with JavaScript. What did I Learn so far?
Consistency is key, as usual.
So I talked about my first week of the 100 days of code challenge in a previous article which you can find here. This has been a interesting journey and the more I learn JavaScript, the more difficult it gets. That can be discouraging for beginners like myself but I like the challenge! What that being said, lets go over what I learned this week.
Topic I learned this week: JavaScript Functions
So JavaScript functions is the only thing that I learned this week. That may not seem like a lot but to me that is a huge deal because functions is one of those concepts that I will be using over and over again.
In JavaScript (or programming in general) you often perform a similar action in many places of your script. A quick example of this would be if you wanted to show a nice looking message when a user logs in and out of of your site. Functions is the perfect solution for this without repetition. This is important because of a concept called D.R.Y (Do Not Repeat Yourself).
Declaring a function
When creating a function, you must declare it first by using the function keyword, followed by the name of the function, followed by parentheses “()” immediately after the function name(no space between them), followed by brackets “{ }” . Lets take a look at the actual code.
So as you can see above, I declared a function named calculateTwoNumbers. It is important to remember that you ALWAYS want to name your functions based on what action the function is doing . In this function I want to calculate two numbers (hence the name) and this is how you would start the function.
Now the function is actually going to do something. In line 1, I added values inside the parentheses which we call parameters or arguments. The parameters must be separated by commas if it is more than one. When the function is called (which it is being called on line 6) the given values (1, 2) is copied to the local variables (a, b) and the function uses those values to calculate. On line 3, the return keyword adds a + b which is 1 + 2, calculates it and then RETURNS the result to the function and then ends the function. The function just stores that result until it is called at a later time.
Local Variables
A local variable is a variable that is declared inside of the function. This means that the variable is only visible inside of that function. Lets look at a example of how local variables work.
In this example I defined variables a and b inside of the function. Since these variables are defined inside of the function that means they are local. Variables that are local can not be called outside of the function. On line 9 I tried to console.log (which this just writes something on the browser console) the variables a + b. When I ran that on the browser I got a error that says “a” is not defined. However, the variables a and b are defined, just not globally. Lets look at how you would declare a global variable.
As you can see, variable a and b are defined outside the function which makes them global now. So now you can call these variables from anywhere in the script. Just know that it is good practice to define variables locally. There may be certain situations where you should define variables locally but most variables resides in their function.
Default values
If a parameter is not given, then its default becomes undefined. Lets look at a new example to understand what this means. First I will give a code snippet of a function with parameters and then a code snippet with a undefined parameter.
The cool thing about learning is that a week ago if I seen this I wouldn't really know what this function is doing, now I do! So this function is basically going to show a message from a contact and the message of the contact. Notice How I defined the variable contact outside of the function and the function still modified a copy of it since its global. The message would show in a browser as “Message from Nick: Hello”. Lets look at what happens if I take the “hello” parameter out of the function call.
In the browser, the message shows as “message from Nick: undefined”. This is not a error, since there is no value for text JavaScript automatically assumes text === undefined (text is equal to undefined).
References I used to understand these concepts
The Complete JavaScript Course 2020
Summary
Overall, There is a few (or maybe a lot idk i’m still learning) things about JavaScript functions that I might've missed but I am sure that I have the overall concept of functions down. I really do this to teach myself more than to teach others but if you get something from this then great!
