Status: Work in Progress. Updated: 4 February 2020
Truthy & Falsy
- Truthy: a value that is considered true when encountered in a Boolean context.
- All values are truthy unless they are defined as falsy.
- Falsy values:
- false (The keyword false)
- 0 (The number zero)
- 0n (BigInt, when used as a boolean, follows the same rule as a Number. 0n is falsy.)
- “”, ”, “ (This is an empty string (the length of the string is zero). Strings in JavaScript can be defined with double quotes “”, single quotes ”, or Template literals “.)
- null (The absence of any value)
- undefined (The primative value)
- NaN (not a number)
- See also:
Immediately-Invoked Function Expression (IIFE) (“iffy”)
- Is an unnamed function (so no global scope pollution) that is executed as immediately after it is defined.
- It can only be called once and not again later, because their is no name hanging on global scope to call.
- All variables and functioned defined within an IFFE are in their own local/private scope.
- It is also known as a Self-Executing Anonymous Function.
- You can return a value from an IIFE and store the result in a variable.
- You can also pass in arguments to the anonymous function.
- What scenarios would you want to use an IIFE in real life (what’s an example)? I did work on a project once that used it, but can’t remember how it helped us.
- https://developer.mozilla.org/en-US/docs/Glossary/IIFE
Scope
- The context of execution.
- The context in which values and expression can be referenced.
- Global scope: In front-end web development this is the highest level (generally page level) and any variable or function defined in global scope can be access by another other function.
- Local scope: Think of it as the scope contained within a function. Variables and nested functions defined within a function cannot be accessed by external functions.
- A nested function can access variables and functions defined in parent (and ancestor) scope, but parents cannot access variables and functions defined in children.
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope
- https://www.w3schools.com/js/js_scope.asp
Lexical Scoping
- Describes how a parser resolves variable names when functions are nested.
- The word “lexical” refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available.
- So, nested functions have access to variables declared in their outer scope.
Hoisting
- Unlike other languages, in JavaScript you can define a variable (e.g.
var myVariable;) in you code after you access it (set a value or read it). - In other languages trying to access a variable before you first define it will cause an “undefined variable” type error.
- Hosting allows this later definition.
- It “conceptually” moves (hoists) the definition of the variable to the top of the scope it is defined in, so it is already available when the lines that access it are executed.
- JavaScript does not rearrange your code.
- What happens is during code compilation the variables definitions (also function definitions) are found and loaded into memory at the top of their scope.
- This scope can include Global Scope and Local Scope. Local scope may be the full scope of a function.
- As of ES2015, variables defined with “let” can be hoisted to the top of their “block” level scope (the scope defined within a set of opening an closing curly braces (i.e. “{” and “}”). For example, within an if() or for() statement.
- Then during the next phase – code execution – they are available.
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope
Closures
- In JavaScript a function can be defined within another function.
- The inner function has access to variables in the scope of the outer function and other parent-of-parent (ancestor) functions.
- Closure is the ability for the inner function to continue accessing the variables of the parent scope when it is being executed later.
- i.e. the outer function returns the inner function (or an object containing the inner function) and that inner function is run some time later in code execution.
- Each instance of the returned inner function has access to its own copy of the variables in parent scope.
- It allows you create units of “closed” and re-usable functionality, with data (variables) that do no clutter global scope.
- https://www.w3schools.com/js/js_function_closures.asp
- https://developer.mozilla.org/en-US/docs/Glossary/Closure
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
Namespaces