1st Week of #100DaysOfCode with JavaScript. What did I Learn so far?
Why did I start the #100DaysOfCode challenge?
Throughout my journey of learning to program I learned one of the most important things you could possibly learn, which is being consistent! I took a JavaScript course while being in college a few years ago. Guess how much of that JavaScript I remember and can implement? NONE! Wonder why? I do not remember anything because after I took the course I was not consistently working on bettering my skills in JavaScript. So if you are learning programming, the best advice that I can give is consistency is key. With that being said, I started the #100DaysOfCode challenge to force me to be more consistent. I will be documenting my journey of what I learned in JavaScript every week.
1st Topic I learned: JavaScript Variables
So this topic was pretty easy for me because I had worked with variables in different programming languages. A variable is basically a container for a value. That value can consist of different data types. For example, you can store numbers and strings (text) into a variable. You can store more than those two data types but I want to keep it simple for now.
Lets look at a code snippet of a JavaScript variable and how they work.
So in this code snippet I am declaring a variable. I want Nick to be assigned to the variable firstName. I declared this variable using the keyword var. Its important to note that you can declare a variable using different keywords such as let and const but since I am just learning I will stick with using the keyword var for now. Another important thing is when you want to declare a string as a variable, you must put the string(text) inside quotations using either “ double quotes” or ‘single quotes’. Both ways work but I tend to use single quotes. The semi-colon at the end of the line of code is not required but is extremely recommended. I have it set in my brain that it is required so I always include the semi-colon.
Now lets declare a number as a variable.
In this code snippet I wanted the variable myAge to be 24. I also declared another variable otherAge (which is a example of bad naming for a variable, so always make sure you name a variable related to what is going on so this variable should be timAge instead). This variable has the value of 25 but it is inside a string. Once I open the console on the browser, console.log(‘Tim is ‘ + otherAge + ‘ years old’); will be converted to a actual number instead of a string. guess what I learned this is called? Type Coercion!
Don’ts when declaring variables
2nd Topic I learned : JavaScript Basic Operators
JavaScript basic operators such as arithmetic operators is used to take numeric values as their operands and return a single value. You have probably seen these operators at some point when in school.
Lets take a look at some basic arithmetic operators
Basically, these are the basic arithmetic operators. So you have addition, subtraction, multiplication, and division. Simple right? there are more arithmetic operators but as I said earlier, I want to keep it simple and beginner friendly because I am considered a beginner myself!
Arithmetic operators is not the only operators JavaScript have. Lets talk about the logical operator. As far as I know, logical operators are usually used with boolean (true or false) values. Lets take a look at how this works.
So in this code snippet we declared variable a which is 3, and declared variable b which is -2. So with logical operators we are expecting a true or false value. So what this console.log is saying is “Hey browser, is a greater than 0 AND is b greater than 0?” if BOTH of these values are not true then return false. So even though a is in fact greater than 0, b is not. With the AND(&&) operator both have to be true for the output to be true. With the OR (||) operator, one can be true and the other can be false and the output would be true. So in the code snippet, if it was a || instead of a && the outcome would have been true. There is also another operator called the typeof operator. From my knowledge, this operator just tells you the data type of something so if I went into the browser console and typed typeof 3 the browser would give an output that says number so 3 is a number. Obviously that is a extremely simple example but I feel like this can be very helpful when debugging and at some point down the road I am sure I will use it.
3rd Topic I learned: JavaScript If/Else Statements
This is by far one of my favorite topics I learned so far this week! So basically an if/else statement has a condition and a statement. A condition is a expression that is considered to be truthy (true) or falsey (false). A statement is what is executed if the condition is true. The second statement (Which would be inside the “else” block) will execute if the condition is false. Lets look at a example so this all can make more since.
In this code snippet, the variable firstName has a string value of Nick. The console.log could be a little confusing for beginners seeing it for the first time (it would confuse me a little also) so here is the basic structure of a if/else statement:
if (condition) {
statement 1 to be executed }
else {
statement 2 to be executed }
So what this is saying is “Hey if that condition is true, execute statement 1, or else execute statement 2.” This is just kind of the pseudo-code version of the code snippet above.
4th Topic I learned: JavaScript Ternary Operator “A poor man’s if statement”
This topic is interesting. I talked about the if/else statement, but what if I told you that there is a way to shorten the if statement? Cool right? So basically if you ever want to use a shortcut instead of using a if statement, then try the ternary operator! I could of talked about this operator when I was talking about operators above, but since I talked about if statements this seems like an appropriate spot. Basically, the ternary operator is the only operator that takes three operands which is: a conditional followed by a question mark (?), then a expression that executes if the condition is true which is then followed by a semi-colon (:) and finally the expression that will be executed if the condition is false.
The syntax of a ternary operator looks like this :
condition ? expressionIfTrue : expressionIfFalse
Lets use a real world example instead of pseudo-code.
This is basically saying “Hey, if myAge is greater than 20 write ‘The age is higher than 20’ or else write ‘The age is not higher than 20’. It is not a huge shortcut for a if statement but the less code you have to write the better!
Conclusion
Overall, this has been a interesting week and I learned important concepts. I know that things will get harder to grasp as I keep learning but that’s the fun part. I left out a few topics that I learned such as operator precedence, truthy and falsey values, and switch statements. I did not want this post to be extremely long so I focused on my favorite topics so far. For the record, I am in no way an expert I just wanted to put this article out there because there are someone that might enjoy it. If only one person gets something from this I will be satisfied and if no one gets anything from this then at least I am still drilling these concepts in my head by trying to explain them.
