Javascript part 5

Jonathan Bleibdrey
7 min readJan 4, 2021

--

Today we talk about hoisting, comparison operators, and if-else statements.

hoisting(get the hardest one out of the way):

variable declarations and function declarations (variables and functions ) are processed (inputted without their values) before any code is executed. (translation: variables and functions actual names get read first before the value is added to system.)

So declaring a function anywhere in your code will be “set” first before any of the code will actually run(same with variables). Functions will be hoisted to the top almost equivalent to declaring it to the top. It will look like the functions are used before they are declared, and that's what “hoisting ” is. (Note: when you use variable definitions, they are NOT hosted to the top.)

Here we see what happens if you don't declare it and define it simultaneously.

We get that “definedLater” is declared first and returns “undefined” because it runs the variable first then reads the definition later. The declarations are always moved up to the top, but the value will not be shown until the definition is defined. (its best practice to always define on the top)

On the bottom example, we define and declare together but, hoisting brings up the variable name but leaves the value in its place. That's why we get undefined first(because it knows the name defineTogther but the value is not hoisted). As you can see, we run “defineTogther” after ,then outputs the value after the case.

Don't worry if this doesn't make sense it took me a while to understand it.

Another example down below, we call a function “doSomethingElse()” before declaring what the function does. Yet it still outputs “I did it,” which's a good sign of hoisting. It hoisted up the function to the “top,” so you could call it no matter where you are in your code.( it doesn't matter where you define the function, it will get hoisted to the “top,” you're able to call it from where ever you want)

This sample below will run an error because variable “functionVar” declaration gets hoisted to the top, but the “function()” value gets left where it is(as we said before the values of variables will not be hoisted). So running “functionVar()” will also through an error due to hoisting.

The BEST rule is to declare all your “variables” on top of your function scope. Define your variables before you have to use them. But define your functions abilities on the bottom, so you keep them out of the way.

(on to the good stuff)

If….Else statements:

we use “if..else” statements to single-handily see if the data has a particular element we are looking for. It is like a fact checker, It wont stop until it finds that particular “object”. (think of it as an assembly line)

We get started with setting a variable to “funFun” and that value is true. We then use an “if ...else” statement. We pass in the variable “funFun”(if you don't cross-check it with anything, it will automatically check if it's true or false.) The “if” statement will run the code, see if “funFun” is true and then run the console.log(). In this case, it is true, so it returned “free fun for everyone.”

Now the second part of this, we set that same variable to false. We pass in the “funFun” variable again. Now the “if …else” statement will run the code; if it doesn't return true, it will skip “free fun for everyone” and go straight to the “else” statement. Which returns, “nope, didn't work.”

It gets easier dont worry, the more you use it the better off you will be. On to the next

comparison operators:

we have all seen these in math but, we also use these in coding quite a bit. They are:

> more then

< less than (Pro tip: you can remember this because it looks like an “L”)

<= less than or equal to

>= greater than or equal to

== equal-equal will check to see if it's similar to another element. even if it’s not the same data type( there are three different equal signs, don't get fooled)

!= not equal to(most of the time you see ! it will always mean “not”)

let's do some problems now with these;

Here we use comparison operators inside our “if…else statement”. Starting from the top, we set the variable “age” to equal 18. We then give it something to compare to; we say if the age variable is greater than or equal to 18,do this… we check the first equation and it is actually true so print’s out “your an adult.”

Then next problem we change the age to 1, it runs the code and see’s the first line and says nope not true he/she is not older/equal to 18. then run’s the second line then asks “is the age less than 2?” yup, that's true and outputs “your a baby.”

That last part is super important to know; you should always put them in the order you want them to be checked. Say I put the last line of code(age < 18) before the code checking to see if they're younger than 2. it would see that line of code and say “yes 2 is less than 18” and stop there, not even seeing if they're actually younger then two. All it cares about is getting to the first true or the end of the line.

Take a deep breath, we will get through this!

Let's talk a bit about the equal-equal sign “==.” Like we did before, we set the variable “age” to 16. we run our “if..else” statement, and it says “if age equals equals 16,” return “it's your birthday.” which means if “age” equals whatever number I put here to compare with, it returns “true” and output “it's your birthday.”

Then if it's anything other than 16, it would return false or “it's not your birthday.”

THESE ARE ALL DIFFERENT

= this will set a variable

== this will check to see if it's equal to an element your comparing it to. even if the data types are different.

=== this will do the same and check to see if it's equal BUT, it has to be the same data type (so it would have to be two strings or two numbers that match, or will give you an error.)

Lastly, we talk about != which means “not equal.”

We use != to check if you want anything else besides that exact value. For example, if you wanted to make an only 18 Swedish club, we put (age != 18), saying since you are not eighteen, you're not coming into this club. But if it is 18, then you can come on in. Their is multiple ways to use this but I would check out these docs on the matter, right here

The rest you can figure out by good old fashion repetition.

Ok, that's all I got for today; see you next time.

check out some more….

Javascript 1 (variables and data types)

Javascript 2 (numbers and strings)

Javascript 3 (bracket notation and 20 diff string methods)

Javascript 4 (functions and how they work)

Javascript 5 (hoisting, comparison operators, and if-else statements)

Javascript 6 (diff. Equal signs, null, and undefined)

Javascript 7 (logical operator, &&, || and ternary operators)

Javascript 8 (switch statements and arrays)

Javascript 9 (commonly used arrays in javascript)

Javascript 10 (Math. And parseInt Usage)

Javascript 11 (for loops and nested for loops)

Javascript 12(while loops and for..in and for..of loops)

Javascript 13(8 diff array methods)

Javascript 14(objects and ways to use objects)

Javascript 15(JSON and fetch request)

Javascript 16(“this” keyword)

Javascript 17(strict mode and error handling)

Javascript 18(setInterval/setTimeout and Dates)

React info…

React part 1 (How to start a react app)

React part 2 (components and dynamic values)

React part 3 (Multiple components and small styling)

React part 4 (click events with functions and react dev tools)

React part 5 (link to: useState hook and how to output lists in react)

React part 6 (Props and reusable components)

React part 7 (passing functions as props and use effect hook)

React part 8 (continue with useEffect hook, dependencies with useEffect, and setting up the JSON server to fetch)

React part 9 (Fetching data with JSON)

React part 10 (loading bar and fetch errors)

React part 11(custom hooks)

React part 12(React Router Dom, Exact, and Links)

The Social Media…

Github

Instagram

Facebook

Linked-In

Medium

--

--