Javascript part 7
Today we talk about logical operators, &&, ||, and ternary operators.
&& = AND
|| = OR
This rite here is how we use the “&&” symbol. First off we set the variable “num” to equal 10 down below.
Then we run if statement saying if “num” is greater than 5 “&&”(and) “num” is less then/equal to 10…Then return “unicycle”(I am sorry if this is confusing at first). The “&&” operators must both return true on both side for it to run the string below it, or it will say “undefined.”
(translation: if the first part “num > 5” is false, the second part of the code won't even run, that is a pro tip we talk about later in this article.)
We use these logical operators(&&, ||) to shorten our code and keep it nice and “DRY.” (I was confused when first using these but, they do come in handy)
In another example above, we set the variable number to thirteen like before. Then we use an “if statement”, we say if “number” is greater than 10 “||”(or) “number” is less than 15. Return “that is our number.”
The “||”, OR symbol only needs one of these operands to be true, to return the string below it.
The example under that one was for to see if nothing matches. all that you get is undefined. since “number” is NOT greater than 20 “||”(or) “number” is not less than 1.
Just remember this
&& = must have both sides true
|| = must have one side true
Short-circuit Evaluations:
This means is when you use “&&” or “||” the second evaluation only gets run, if the first one is not enough to determine the rest of the expression.
If we use the “&&” and the first one is false, it will see that and won't even run the second part of the code. look at the example below
In the example above, I just set up a variable “test” to equal true and then set up two functions, called “isTrue” and “isFalse.” for example below. We put an if statement and put the variable “test” in the if statement; if that returns true, it will run the “isTrue” function. (it does it swimmingly!)
The second part of the example above will do the same thing but, with less code. We put it in a single line. It will see a test; if test is “true”, it will go to the other side of “&&” and run that code, which is the “istrue” function. If the “test” were false, it would stop on the test and not run anything else.(A bigger explanation from before)
In the example below, we use the “||” statement, “test” is actually false this time, so it sees that and doesn't do anything else but returns “test is false.”(← miss spell in function)
basically with the or statement “||” it reads “test” variable sees that its false and doesn't run “isFalse” function.
Last example:
Here we use the “||” symbol as a way to set default variables values. We write a function called “thatGuy,” and we pass it in argument(“name” is just a placeholder for when someone actually passes in a name, later on when you call the function.) Then “name” variable will either be equal to the name they pass in “||” OR it will equal “ben”(by default). Then it will console .log “my best friend ” + “name” together. Then we call “thatGuy()” function with no argument and we get “my best friend ben” . then we call “thatGuy()”function and we pass in “Willy” and out comes “my best friend willy.”
Ternary operators:
this is one of my favorite thing to use because it's easy to understand, clean, and powerful.
Basically a shortcut for the “if” statements. It takes three operands; the first one is the condition (code you want to find out if true or false). The second is what happens if it is true, and the third is what happens if it is false. I'll show you the long way first with an if/else statement, then a ternary operator example.
First part of that example we set the variable “age” to equal 19, then saying “if” age is greater than or equal to 19 then “your an adult” else “your a child”.
After that we do it the “less code way” If age is greater than or equal to 19 “?”(← the question mark is a must or it won't work). after that if true return “your an adult” :(← semicolon is also required to split between true and false)if false return “your a child.”
We could go even bigger with it, not only output strings or text.
Here we set “firstCheck” and “secondCheck” equal to false. Then we set a variable to equal a ternary operator. We say firstCheck? (is it true or false?) false, so it sees secondCheck variable, and that's a whole new ternary in its self. Now we ask (is that true or false?) it's false, so then we output “access granted.” Technically we did another string, but we put a ternary inside of a ternary. (I have never done it but, I thought I show you)
one more example to drive the point home…
Lastly, if we would make a club age checker method, this is how it would go(hahaha).
We take age and set it to 17, and we also set stop to nothing.
If age is greater than 18, run the console.log method, saying “ok, you can go” and stop = false(saying you don't need to stop).
If there, not 18, then run console.log and output “sorry, you are much too young” and turn stop = true(essentially not letting you pass). simple but effective.
Ok, that was fun; hope you learned even just a little bit.
It's not really about how much can I retain at once, it's more about how many times can I see this information over and over.
check out some javascript….
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 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 9 (Fetching data with JSON)
React part 10 (loading bar and fetch errors)
React part 12(React Router Dom, Exact, and Links)
The Social Media…