Let's dig in!
Data Types
Data types in JavaScript is divided into three groups:
1. Numbers.
This can be in any form...integers, decimals fractions or whole numbers. JavaScript accepts numbers in any format because determining whether a number is an integer or a decimal is done by the language’s runtime environment which makes it easy.
2) Strings: “Hello there”
Strings in simple form are fields of text, encased in quotes. Numbers can also be represented in strings as shown below In JavaScript, this is also a string: "456"; typeof "456"; typeof "hello world"; You should know by now that your passwords are also in string form.
3) Boolean: True, False
Boolean is the namesake of the mathematician George Bool. Booleans has two values which is: true and false. typeof true; typeof false;
These values are important when it comes to adding logic to programs. For example, adding loops or conditions to a program. Let us move on to what makes data important.
Operators
Imagine having data but not able to use it. Here is where operators come in. Each data types share some set of operators that help come up with solutions to problems.
Here are four important categories of operators that you should know.
1)Arithmetic Operators
Here we have:
a) Addition (+) For numbers: 9876 + 5432; For string: “hi” +” Sandra”;
This is called ‘concatenation’ in JavaScript, an addition of two strings. A space can be added in the middle so the two words don’t glob together. As shown below.
“hi “+” Sandra”; will give us: hiSandra “hi” +”” +” Sandra”; will give us: hi Sandra
For Boolean: true + false;
For Boolean values, what the computer actually sees is true: 1, false: 0
so, when we add true + false, we actually have 1 + 0 or 0 + 1 = 1
b) Subtraction (-) Number:1234 - 1234; String: NaN (Not a Number) is the error you'll get when you try to subtract String values. Boolean: true or false; or false or true;
c) division (/) Number:1234 / 1234; String: NaN Boolean: true / false; or false/true;
d) multiplication () Number:1234 1234; String: NaN Boolean: truefalse; or falsetrue;
e) modulo (%) This operator functions to tells us the remainder of a division of two values. Number: 10%3; String: NaN Boolean: true%false; or false%true;
f) Increment ++ ++ is a way of adding 1 to any value, depending on where the incremeter is placed. For us to use incremeter we need variables because JavaScript's interpreter can't read ++20 if 20 is not saved inside a variable. Why so? Because plus, plus is what we call syntactic sugar, created to make life easier for developers. So, instead of saying 20 + 1, we remove the 1.
A variable should be defined so that you won't get errors because plus is not technically a real arithmetic operator. Before we jump into variables, you can try this on your own on your laptop. Type this into a code editor:
var number = 5; console.log(number++); will print 5 console.log(++number); will print 7
Tip: var number = 5; is called an expression in JavaScript. You should note that console.log() is a web tool that prints JavaScript code to a console. All web browsers has a console you can access You will notice the console is printing different figures, why? Writing the variable before ++ gives us the original value before it can be incremented and vice versa.
g) decrement (--) Number: -- number String: NaN Boolean: --true More arithmetic shortcuts are:
+= Plus Equals, -= Minus Equals, *= Times Equals, /= Divided Equals
For example, you have var score = 5; and, instead of incrementing score by 1, you want to increment it by 6. Normally you’d write score = score + 6; With Plus Equals you simply have to write it as score += 6; You can try these different operators on your editor.
2. Comparison Operators
These are logical operators that returns either true or false. Most applications we use today were built with these operators.
equals == not equal != greater > less < greater/equal< = less/equal> =
There’s also a special triple equals(===). This checks to make sure that the types are the same as well. Operators are useful for conditional logic. Let’s use an if/else statement to test out an equal’s operator.
If (you are having a fun time learning here){ Make sure to give a clap at the end' }else { 'comment on what areas you do not understand!' } Try this real if/else statement.
if(9==4){ console.log('correct'); }else { console.log('wrong!'); }
You can use different data types in your if/else statement including the operators you’ve learned so far.
3. Logical Operators
Here we have:
Logical and &&, Logical or ||, Logical not !.
Logical operators are used to add complexity to our conditional statements. Practically, to add maximum control over a condition, you’d use && because all of the conditions must be met in order to be true.
Also, if you want the condition to be more inclusive, you’d use || because only one condition has to be true to get a return value of true.
if(7==7&&9==9&&8==5){ console.log('correct'); }else { console.log('wrong'); }
Now Variables!
Just imagine having to write this formula over and over again:
1/4(20 * 50); Or this really long string:
"idontevenknowhatimtypingherjustpressingsomekeysonhere";
What a variable does mostly is allow us to save data so that we can use it again. Ok, let’s declare two variables:
var keyword, asssistantWord;
Now for some takeaways:
The var keyword can creates two types of variable: global variable and local variable. In JavaScript, we have blocks, similar to neighbourhood blocks. Within our if/else statements, we wrote a block of code that ran based on certain conditions we wrote. The two variables declared above can be accessed within that block, because we declared them in a global scope.
On the other hand, local variables are just variables that are declared within a block. i.e., any code within curly braces forms a block.
if(8==8){ var number = 8; }
In this example, I declared and initialized my variable simultaneously. The equals sign shown there is not the same as the equal sign you use in mathematics. It simply means that you want to assign a particular data to a variable you made up. This operator used is called an assignment operator. (The 4th type of operator)
Remember what we said about global and local variables. You must have already guessed that if I were to use this variable outside of the block, we should get an error.
if(8==8){ var number = 8; } console.log(number); oops...we can still access the block. How so?
Well, the thing with the var keyword is that it loves to expose itself in public. Even though it is defined within a block, it will still want to be seen by everyone. The only way to restrict it is by using a function.
function test(){ var number = 8; } console.log(8);
So, how do I write an if/else statement? Es6 has brought a new way to declare variables with the let keyword. Let’s try it!
if(8==8){ let number = 8; } console.log(number);
Nice. Now we truly have global and local variables. Let’s take a look at our previously declared variable, var keyword, asssistantWord, you will notice that we declared more than one variable at a time, separated by a comma.
You also notice how in the second variable; the second word begins with a capital letter. This is called camel case, using a capital letter to begin the next word. This is usually done to make your code legible and readable for you or other that, may want to look at your code.
The Variable Warehouse
So, what can we put inside of a variable?
Numerical statement:
keyword = 1/2(90 * 180);
Strings:
assistantKeyword = "idontevenknowhatimtypingherjustpressingsomekeysonhere";
Boolean:
let true_ = true;
Why the underscore? Well, you can’t name a variable anything that is already named by those who’ve designed the language.
Logical statement
let crossCheck = (5==5&&8==8&&3==3);
The parenthesis is there for readability. You can plug this right into your if statement and it’ll work beautifully. if(crossCheck){ console.log("true"); }
Nb: I did not have to type check === true because the if statement automatically checks for true or false.
Functions
var aFunction = function(){ return 'hello'; }
variables can also contain functions. These types of functions are called anonymous functions because they are not named. Arrays
var anArray = [2,4,6,8]; simply put, Arrays are a collection of data.
Objects
var anObject = {you: "here", them: "there"}; while, Objects holds a collection of data.
Closing Note
Variables are not changing anytime soon, so you might just as well take an interest in them now as they can really make your work easier as a JavaScript programmer.