bgoonz / Javascript-Practice

JavasScript

JavaScipt is a dynamic weakly typed language which is compiled at runtime.

How is JS Executed? using a js engine like v8 or spidermonkey which parses the code and then compiles to machine code and then exicutes machine code

Dynamic Typing (not pre-compiled) means that you don't tell the engine what type of data a variable holds, it figures it out while your code is running

Weakly Typed means that different types can be converted to other types automatically

Primitive Types a type of data that represents a single value Reference Types a type of data that represents a reference to a location in memory where the object is stored

Operators a special function that is syntactically (written) differently, generally, operators take two parameters and return one result

Primitive Types

Data Type	Wrapper Object	Description
number	Number	Any number, including numbers with decimals: 1, -2, 99, 3.14.
bigint	BigInt	Any number, greater than 253-1 or less than -(253-1) with n appended to the number: 1234567890123456n.
string	String	Any grouping of characters on your keyboard (letters, numbers, spaces, symbols, etc.) surrounded by single '' or double "".
boolean	Boolean	This data type only has two possible values --- either true or false.
null	None	This data type represents the intentional absence of a value, and is represented by the keyword null.
undefined	None	This data type is denoted by the keyword undefined. It also represents the absence of a value though it has a different use than null.
symbol	Symbol	A newer feature to the language, symbols are unique identifiers, useful in more complex coding. No need to worry about these for now.

---

• JavaScript code is generally executed from top to bottom, line by line, in the order that the code is written.

---

Functions in JavaScript

• Functions are a way to package functionality that you wish to reuse.
• functions are hoisted to the top of the file

Scope

• Scope is the context in which our variables are declared. We think about scope in relation to blocks because variables can exist either outside of or within these blocks.
• a block is a chunk of code bounded by {}
• Global Scope refers to variables that are accessible to every part of the program.
• Block Scope refers to variables that are accessible only within the block they are defined.
• Local Scope refers to variables that are declared within a function.

Shadowing when a variable is declared in a local scope that has the same name as a variable in the global scope

• when a variable is shadowed, the local variable takes precedence over the global variable

---

If Statements

• if statements are used to make decisions in code
• if statements are truthy or falsy
• if statements can be chained together using else if

const isLoggedIn = true;
if (isLoggedIn) {
  // This code will execute because isLoggedIn is true => A valid condition
}

//----------------------------------
const isLoggedIn = true;
if (!isLoggedIn) {
  // This code will NOT execute because isLoggedIn is true but ! inverts it (in this check)
} else {
  // This would execute because !isLoggedIn yields false => else block executes
}

const isLoggedIn = true;
if (isLoggedIn !== true) {
  // This would NOT execute
} else {
  // This would execute because isLoggedIn is true and hence !== true yields false
}

Beware of comparing objects and arrays objects and arrays are reference types and are not compared by value but by reference

---

Operator Precedence

| Precedence | Operator type | Associativity | Individual operators | | ---------- | ---------------------------------- | ------------------------------- | -------------------- | ------------- | --- | --- | --- | | 18 | Grouping | n/a | ( … ) | | 17 | Member Access | left-to-right | … . … | | | Optional chaining | | … ?. … | | | Computed Member Access | n/a | … [ … ] | | | new (with argument list) | | new … ( … ) | | | Function Call | | … ( … ) | | 16 | new (without argument list) | n/a | new … | | 15 | Postfix Increment | n/a | … ++ | | | Postfix Decrement | | … -- | | 14 | Logical NOT (!) | n/a | ! … | | | Bitwise NOT (~) | | ~ … | | | Unary plus (+) | | + … | | | Unary negation (-) | | - … | | | Prefix Increment | | ++ … | | | Prefix Decrement | | -- … | | | typeof | | typeof … | | | void | | void … | | | delete | | delete … | | | await | | await … | | 13 | Exponentiation (**) | right-to-left | … ** … | | 12 | Multiplication (*) | left-to-right | … * … | | | Division (/) | | … / … | | | Remainder (%) | | … % … | | 11 | Addition (+) | left-to-right | … + … | | | Subtraction (-) | | … - … | | 10 | Bitwise Left Shift (<<) | left-to-right | … << … | | | Bitwise Right Shift (>>) | | … >> … | | | Bitwise Unsigned Right Shift (>>>) | | … >>> … | | 9 | Less Than (<) | left-to-right | … < … | | | Less Than Or Equal (<=) | | … <= … | | | Greater Than (>) | | … > … | | | Greater Than Or Equal (>=) | | … >= … | | | in | | … in … | | | instanceof | | … instanceof … | | 8 | Equality (==) | left-to-right | … == … | | | Inequality (!=) | | … != … | | | Strict Equality (===) | | … === … | | | Strict Inequality (!==) | | … !== … | | 7 | Bitwise AND (&) | left-to-right | … & … | | 6 | Bitwise XOR (^) | left-to-right | … ^ … | | 5 | Bitwise OR ( | ) | left-to-right | … | … | | 4 | Logical AND (&&) | left-to-right | … && … | | 3 | Logical OR ( | | ) | left-to-right | … | | … | | | Nullish coalescing operator (??) | | … ?? … | | 2 | Assignment | right-to-left | … = … | | | | | … += … | | | | | … -= … | | | | | … **= … | | | | | … *= … | | | | | … /= … | | | | | … %= … | | | | | … <<= … | | | | | … >>= … | | | | | … >>>= … | | | | | … &= … | | | | | … ^= … | | | | | … | = … | | | | | … &&= … | | | | | … | | = … | | | | | … ??= … | | | Conditional (ternary) operator | right-to-left | … ? … : … | | | | (Groups on expressions after ?) | | | | Arrow (=>) | right-to-left | … => … | | | yield | n/a | yield … | | | yield* | | yield* … | | | Spread (...) | | ... … | | 1 | Comma / Sequence | left-to-right | … , … |

---

Truthy and Falsy

const name = "John";

if (name === "John") {
  console.log("Hello John");
}
//will print Hello John because the condition is true

if (name) {
  // will exicute because the name exists and is thus truthy.
}

• all numbers except for 0 are truthy
• all strings except for an empty string are truthy
• all objects are truthy except for null
• all arrays are truthy
• the value undefined is falsy
• the value null is falsy
• the value NaN is falsy

---

Coercion vs Conversion

It's important to understand that JavaScript is able to use variables in conditions - even without comparison operators.

This is kind of obvious, if we consider a boolean variable, for example:

1. let isLoggedIn = true;
2. if (isLoggedIn) {
3. ...
4. }

Since if just wants a condition that returns true or false, it makes sense that you can just provide a boolean variable or value and it works - without the extra comparison (if (isLoggedIn === true) - that would also work but is redundant).

Whilst the above example makes sense, it can be confusing when you encounter code like this for the first time:

1. let userInput = 'Max';
2. if (userInput) {
3. ... // this code here will execute because 'Max' is "truthy" (all strings but empty strings are)
4. }

JavaScript tries to coerce ("convert without really converting") the values you pass to if (or other places where conditions are required) to boolean values. That means that it tries to interpret 'Max' as a boolean - and there it follows the rules outlined in the previous lecture (e.g. 0 is treated as false, all other numbers are treated as true etc.)

It's important to understand that JavaScript doesn't really convert the value though.

userInput still holds 'Max' after being used in a condition like shown above - it's not converted to a boolean. That would be horrible because you'd invisibly lose the values stored in your variables.

Instead,

1. if (userInput) { ... }

is basically transformed (behind the scenes) to

1. if (userInput === true) {

And here, the === operator generates and returns a boolean. It also doesn't touch the variable you're comparing - userInput stays a string. But it generates a new boolean which is temporarily used in the comparison.

And that's exactly what JavaScript automatically does when it finds something like this:

1. if (userInput) { ... }

---