“Programming isn’t about what you know; it’s about what you can figure out.”
— Chris Pine
In the last section we went over 3 primitive data types and the different ways to declare them. There are two other types I neglected to tell you about: null and undefined . To quickly illustrate the difference, here’s a quality meme:
Cases for these values will become clear as we go along, but for now if you understand that null means the value of a variable is empty right now and undefined means there’s no defined value for an existing variable then you’re on the right path.
“You should imagine variables as tentacles, rather than boxes. They do not contain values; they grasp them — two variables can refer to the same value.” — Marijn Haverbeke
rewrite this code in your pen
But take note of something new within our console.log(). Those aren’t normal quotes we’re using, they’re the backtick (`) found in the top left corner on the same button as the tilde (~). A backtick allows us to use string interpolation, which is different than the concatenation we used in the last section. And within our backtick wrapping, you’ll notice a very strange looking expression. Placing a variable inside of a ${} inside of the backticks creates a two-in-one evaluation. The variable name in the ${} is replaced with it’s value when printed or compiled. So our console.log()s on line 2 will print out “color1 is the color red”.
We already knew that color1 is red. But what will happen in the other console.log()s? Did anything surprise you about the output? We can use one variable as the value for another, which can be very handy. But once we assign its initial value, there’s no further association. That’s because these primitive values are stored in their own containers and make copies of each other.
it’s not complicated, do the math
Computers gotta compute. So let’s the learn about the different operators.
Of course we have access to our basic arithmetic operators, (+, -, *, /) and use them to do some simple maths. But JS has something very useful for us.
Developers have to write a lot of code to make things work, but there are certain short cuts we have been given to make the task a little less strenuous. The increment operator is a very useful one. A simple ++ after a number will tell JS to add 1. And we will decrease by 1 if we use -- ! If we logged x++ from the above code, it would print “3”, but if you used our decimator operator (x-— ) it would print “1”.
As we have now seen a few times, JS variables can alter their values. This is where we need to expand our thinking.
type that code into your pen, and log x
What is even happening here? If we break it down we can follow the logic.
let x = 1;
We declared a variable called “x” and then assigned it the value of 1.
x += 2;
We are updating the value of x! x is now equal to “x + 2”, but instead of creating a new variable to hold that value, we just put it back into x. If we log x’s value after this, we will get 3. x changes, and that’s okay! Go ahead and test this with different values to make sure you really understand the math happening behind the scenes. += really just means “initial value plus the new value, and keep it in its original container”
You cannot use this operation on any “const” variable, because their value cannot be modified or updated. You can, however, also perform -= *= /= which will behave the same way, but use their respective operator instead.
let’s talk about modulus baby
A modulus (%) is a way to find the remainder from division.
When we perform division by hand, it’s very easy to tell what the remainder is. We see it there on the bottom as a left over number that can not fit evenly.
The modulus operator will provide us with only the remainders value.
This may seem useless, why would we ever need to access only the remainder?
A very easy application of this is to see if numbers are even or odd.
10 % 2 will give us 0 which means 10 was perfectly divisible by 2, making 10 an even number. 9 % 2 will give us 1 which means 9 is an odd number.
Later we will get into specific use cases and how remainders can help us tell our code what to do. But for now, it’s important to just understand the logic.
stop comparing yourself to others and start comparing values
A strong understanding of math is not required to code, but picking up your old algebra textbook wouldn’t hurt you. If we think back, we will recall comparison operators.
> < >= <=
These are extremely useful to us because we will be comparing values constantly. JS even has a few comparisons you might not know about.
type the above code into your pen
One of those operations will print true and one will print false
Take a minute to think about why they might be working in different ways (hint: we saw something similar happen in the last lesson)
We are comparing two different data types and our first operator will enact “type conversion” (changing the data type of a variable to match the data type of another) on any variables as needed, it then evaluates them on an even playing field. This means the evaluation is not very strict and we can compare different data types based on their abstract values. Sometimes in our code we need to match things as different data types but represent the same value. This is where == comes in handy. I can match a phone number 4158675309 to a string with the same digits '4158675309'
The second comparison we see is much more strict and is actually evaluating two different aspects, the value AND type. === will equal false if it is comparing two different data types, as there is no conversion happening and it looks for an exact match.
type the above code into your pen
An ! (sometimes called a “bang”) in JS is our way of negating a value.
The above code will print false then true
What happens here in plain english is we tell our machine “the value of x is NOT loosley equal to the value of y” which prints false because we have already demonstrated that our machine considers those two loosley the same.
The second console.log() translates to “the value of x is NOT exactly equal to the value of y” which prints true because they are two different data types.
To take this thought process a step further, any variable that exists is automatically true, because it exists. This might seem redundant, but it saves us time later because we don’t have to declare a variable to be true. It will be very useful for us in the future to know that something like !x will log false unless your value is already undefined.
link to previous lesson || link to next lesson
thank you for taking the time to read through these. i really do appreciate having your attention for these few minutes. as i said before, please let me know if you have any questions or feedback about this lesson.
