Sailor Moon learning how to code :p
Why Did I Create The #100DaysofVanillaJS Series?
(This a completely optional part of the tutorial, feel free to skip it!)
My aim is to make this series digestible and easy for everyone to understand, whether you’re a complete beginner to coding or prepping for those all too intense technical interviews.
TC39 is a committee that is in charge of maintaining this document and every year delegates link up and determine what new features need to be added to it. This is why we have ES2015, ES2016, ES2017, 2018, etc!
So how do we run it??
- A web browser
- Any text editor
- Console– To quickly run and debug code without any setup
If you’re not too aware of what Dev Tools are yet, basically this is where you can inspect the elements and performance of a webpage and run code in the console. The console can be considered a playground for you now to create basic variables and functions.
If you’re in Firefox, click on the Firefox Menu in the upper-right-hand corner of the browser and select Web Developer -> Browser Console.
If you’re using a different web browser, you can do a quick lookup on their search engine for how to open developer tools. But in future tutorials, I’ll mainly be using Chrome Dev Tools!
Primitive Data Types
Data types are the different types of data we use in an application. I’ll be diving deeper into some of the data types in future lessons like strings, booleans, and null and undefined since I don’t want to drag this blog post on too long!
|Number||To represent numeric data (positive, negative, whole and decimal)||3, 3.5, 2.00|
|Boolean||Represents information as true or false||true or false|
|Symbol||A unique identifier/value that’s not equal to any other value||const mySymbol = Symbol();|
|Null||Intentional/explicit absence of any value, can be reassigned later||const relationshipStatus = null;|
|Undefined||A variable that is not assigned a value; implicit||const noValue;|
So a neat function that you can use to check the type of a piece of data is by typing typeof. Play around and experiment!
|Addition||+||To Add||2 + 2|
|Division||/||To Divide||32 / 2|
|Remainder or Modulo Operator||%||Returns the remainder that is left after you divide the second number into the first numbers as many times as you can like 3 % 3 leaves 0||5 % 5 = 0 (5 goes into 5 five times right? So that means there is no remainder and you’re left with nothing, which is the answer.)|
|Exponential||**||To raise a number to a certain power||2**2|
A Simple Note About NaN…
When you try to perform mathematical operations (besides additions) with strings, they will return NaN (Not a Number).
Var, Let, & Const
To put it rather simply, variables are how we store a value that we can later reference, use and change in the future. When we get into functions, how we are able to access and reference certain variables will change but for now let’s not worry too much!
The preferred way to set variables where we can easily change the meaning/value is let. We used to declare variables using var but it is no longer considered best practice. There are some reasons why var is no longer considered best practice and we’ll delve deeper into why when we address scope later on. What to keep in mind for now is that var is not strict and can potentially cause errors since you can re-declare the same variable more than once which may lead to confusion as your application grows.
There are a few other best practices to be mindful when we are declaring variables:
- Try to be as descriptive yet concise as you can when you are naming the variable
- We write our variables in camelCase. Examples: let myName, const currentUser
- There are reserved keywords we are not allowed to use when we name variables. Examples of reserved keywords: let (as that would be super confusing),
- You cannot have variables with the same name even if we declare with both let and const. Ex: let myName & const myName will not work!
You can easily re-assign a value to let variables or re-name as they are mutable by default, but const variables cannot be reassigned. You will be met with an error. This will definitely not be the only time we address the differences between var, let and const. The topic will come up again when we address local and global scope in the context of functions so don’t fret!
Comments, Comments, Comments
Comments are how we leave reminders for our future ourselves or teammates about the code we’ve written. They can either be single-line or multi-line comments as demonstrated below:
So what’s next…
We’ll be covering topics such as:
- Object Oriented Programming
- Technical Interview Prep Examples