JavaScript Study Guide

• The Basics
  • Features of ES6
  • Data Types
  • Loosely vs. Strictly Equal
• Context and Scope
  • Context
  • Scope
  • this keyword and context
  • Currying
• Event Loop
  • Overview
  • Promises vs. Async/Await
• Garbage Collection
• eventListeners
• The Different Engines

NERD Study Guide

• React
  • Architecture
  • Virtual DOM
• Redux
• HTML
• CSS
• Express
• SQL

---

JavaScript Study Guide

Variable Declaration

• var: Before ES6, it was the only variable. Scoped to global scope (everything can access it) or function scoped (only accessible within the function)
• let: declares a new variable that be reassigned later on (note: possible with var)
• const: declares new variable that cannot be reassigned (note: reassigning will throw an 'Uncaught TypeError'); default variable unless reassignment is necessary

Data Types

Primitive Data Types

What are primitive data types?

• A primitive is a data that is not an object and has no methods.
• JS has 7 primitive data types: string, number, bigint, boolean, null, undefined, and symbol (new in ES6)
• Primitives are immutable and can only be reassigned a new value.
  • Note 1: Do NOT confuse the primitive itself to the variable assigned to the primitive value.
  • Note 2: commonly referred to as "assign by copy" or "assign by value-copy"

String Methods

• .join()

• .split('')

• toUpperCase()

• toLowerCase()

• join('')

• .indexOf()

What is the difference between null and undefined?

What is null?

Two features to understand:

• null is an empty or non-existent value
• null must be assigned

let a = null
console.log(a) // null

What is undefined?

• undefined usually means a variable has been declared, but not defined

let b
console.log(b) // undefined

Type Coercion

typeof keyword

• returns a string indicating the type of the unevaluated operand

let a = null
let b
console.log(typeof a) // object
console.log(typeof b) // undefined 

Explicit Coercion

• type conversion done in code using the inbuilt functions (e.g., Number(), String(), Boolean())

Implicit Coercion

• Surrounding Context -Since JS is a weakly-typed languages, values can be converted between different types automatically
  • Occurs usually when operators are applied to different types (e.g.,)
• ==:

\\ `==` is much less predictable than `===` 
console.log(5 == 5) // true
console.log(5 == '5') // true
console.log(true == 'true') // false
console.log('1' == true) // true 

Loosely vs. Strictly Equal (== vs. ===)

• Loose equality: Compare two values for equality after converting both values to a common type.
• Strict equality: Comparing two values for equality, neither value is implicitly converted to some other value before being compared.

References

• Javascript Coercion Explained
• Equality comparisons and sameness

Truthiness and Falsiness

• always falsy: false, 0, '' or "" (empty string), null, undefined, NaN
• truthy: everything else including '0', 'false', [] (empty array), {} (empty object), function(){} (an 'empty' function)

Shortcuts

• !: not operator
• !!: Putting double bang in front of something will give you its truthiness
• Other Logical Operators (e.g., &&, ||)

How many types of objects are there?

TK

Arrays

What is an Array?

• list-like data structure in Javascript

Properties

• .indexOf
• .length - returns property for the number of elements

Methods (TK - go back and state which ones are immutable and mutable)

• .push() method - adds to the end of an array

• .pop() method - removes and returns the the most recent element popped off

• .shift

• .slice

• .reverse

• .splice(index, count [optional], inputElements [optional]) - mutates the original array by adding or removing elemnts from the middle of an array (rather than from either end) and returns the original array with those elements removed

• concat

TK TK TK - find place

Functional Programming

• .map
• .filter
• .reduce
• .forEach

TK

Mutators

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Nested Arrays

TK

References

• Primitive MDN Page
• Javascipt - Null vs. Undefined
• Explaining Value vs. Reference in Javascript
• Parameters & Arguments in JavaScript

TK TK TK - find place end

exampleString = 'abaacdade'
const frequencyCounter = (string) => {
  const recordedChars = {}
  const charArr = string.split('')
  for (let i=0; i<charArr.length; i++){
    if (recordedChars[charArr[i]] > 0){
      recordedChars[charArr[i]] = recordedChars[charArr[i]] + 1
    }
    else{
      recordedChars[charArr[i]] = 1
    }
  }
  return recordedChars
}

console.log(frequencyCounter(exampleString))

Objects

• an object is a collection of key-value pairs

Bracket vs. Dot Notation

• bracket notation needs quotes to access key unless you are intentionally accessing the variable that contains the key name

for... in loop

Wrapper Objects

Object Methods

Enumerability and ownership of properties

TK

• .getOwnPropertyNames() - method that returns an array of all properites (including non-enumerable properties except for those which use Symbol) found directly in a given object
• .prototype.hasOwnProperty() - method returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it)
• .assign() - method copies all enumerable own properties from one or more source objects to a target object. It returns the target object
• .keys() - method returns an array of a given object's own enumerable property names, in the same order as we get with a normal loop
• .values() - method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well)

Creating New Objects

• Object.create() MDN Page

Object Patterns

Object Constructors

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

• constructor() - method

Object Factory Functions

Control Flow in Javascript

What is control flow?

• It's the order in which the computer executes statements in a script.
• Code is run in order from the first line in the file to the last line unless a computer comes across structures that can change control flow, such as conditionals and loops

Conditionals

Conditional Statements in JS

• if: directs to block of code below if true
• else: directs to block of code below if false
• else if: directs to block of code below if true and above conditional statements are false
• switch: matches the expression's value to a case clause and executes statements associated with the case

if (condition1) {
  //  block of code to be executed if condition1 is true
} else if (condition2) {
  //  block of code to be executed if the condition1 is false and condition2 is true
} else {
  //  block of code to be executed if the condition1 is false and condition2 is false
}

switch (expression) {
  case value1:
    //Statements executed when the
    //result of expression matches value1
    [break;]
  case value2:
    //Statements executed when the
    //result of expression matches value2
    [break;]
  ...
  case valueN:
    //Statements executed when the
    //result of expression matches valueN
    [break;]
  [default:
    //Statements executed when none of
    //the values match the value of the expression
    [break;]]
}

Ternaries

• shortcut for the if statement
• for false statements, the condition could be expressions: null, NaN, 0, the empty string (""), and undefined

// syntax example 1
condition ? exprIfTrue : exprIfFalse

// syntac example 2
function example(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

// equivalent to:
function example(…) {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

Loops

• while: loop with (1) while keyword, (2) conditional expression that evaluates to a boolean, (3) a code block that eventually makes a base condition to exit the loop

// initialization outside of loop
while(// condition){
 // code block with update (note: update should go to a final state that breaks out of the loop)
}

// example 
let i=0
while(i<5){
 console.log('hi')
 i++
}

• for: loop with (1) for keyword, (2) three optional expressions, (3) a code block

// for (initialization; condition; update){
//  code block
// }

// example -- note: similar to `while`, these three fields can do a lot more
for (let i=0; i < 5; i++){
 console.log('hi')
}

• continue: jumps over one iteration in the loop and checks the next loop
• break: jumps out of the loop

References

• JavaScript type coercion explained
• Control Flow MDN Page
• JavaScript Switch Statement
• switch MDN Page
• [Conditional (ternary) operator](https://developer.mozilla.org/en US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)
• JavaScript — Null vs. Undefined

Scope

What is Scope?

Scope determines the accessibility of identifiers (e.g., variables) based off where it was created.

Note: JavaScript is lexically scoped

What is Lexical Scope?

• Lexical Scope means the location where a variable is declared determines its scope (see Variable Declaration)

What is Global Scope?

• Global Scope is when a variable declaration is made outside of a function and can be referenced throughout a file

Note: window is the global object in the browser

What is Functional Scope?

• Variable declarations inside of functions are 'locally scoped'

What if a variable is defined locally and globally?

• Variable Shadowing:

TK - https://en.wikipedia.org/wiki/Variable_shadowing

What is Block Scope?

• any block of code (code inside curly braces) has its own scope Note: must use let rather than var to maintain block scope

TK

Features of ES6

ECMAScript is the Javacript's language standard (e.g.,ES6 (ES2015), ES2019)

Variable Declaration (see above)

Template Literals

Template literals can be used to avoid concatenating strings or expressions.

function helloWorld(name){
 return `Hi ${name}!`
}

// same example with template literals
function combiningGroups(groupsize1, groupsize2){
 return `The new group has ${groupsize1 + groupsize2} people.`
}

Arrow Functions

A slightly different way of declaring a function that is shorter syntactically and binds this to its enclosing execution context.

// arrow function
const milesToWalk = (miles) => {
 return miles + 500
}

// original function declaration
function milesToWalk(miles){
 return miles + 500
}

Symbol Primitive

TK

References

• const MDN Page and let MDN Page
• Template literals (Template strings)
• Arrow functions MDN Page

---

Misc - Put Somewhere

Advanced Use of Context: this keyword

• .call or .apply
• call-site of the function

TK

References

• Eyeballing-this.md

What is the difference between a parameter and an argument?

• parameter - the placeholder listed for potential variables when defining a function
• argument - the actual value passed to the function when that function is invoked

Rest Parameter

• syntax that allows us ot represent an indefinite number of arguments as an array

function sum(...theArgs) {
 return theArgs.reduce((previous, current) => {
  return previous + current;
});
  
console.log(sum(1, 2, 3, 4)); // expected output: 10

Closure

i. What is closure?

Good Defn: the combination of a function bundled together (enclosed) with references to its surrounding state (lexical environment)

Layman's Terms: access to an outer function’s scope from an inner function

ii. How is closure used?

Currying

References

• How to understand the keyword this and context in JavaScript
• MDN web docs
• Understanding Scope and Context in JavaScript
• Understanding JavaScript 'this' keyword (Context)
• The many faces of this in javascript
• What is JavaScript Interview: What is Closure?
• Understanding Currying in JavaScript

---

eventListeners

TK

The Different Engines

QuickSort for Chrome, but it's a bit nuanced . Chrome's v8 engine uses a combination of QuickSort and InsertionSort for arrays (length < 10). Mozilla Firefox's SpiderMonkey uses MergeSort for stability.

Merge Sort

References

• Merge Sort Algorithm in JavaScript

---

General Dictionary

currying execute deobfuscate instantiate

---

NERD Study Guide

Why does this thing exist? Which problems does it solve/create?

React

Architecture

Virtual DOM

-- Shadow DOM on drawbacks

References

• Virtual DOM and Internals

Redux

What is Redux?

A state management library that holds and updates the entire state by providing it in a read-only store

Pros: Properties don’t dictate structure (in relation to React)

Cons: Sometimes used unnecessarily, other forms of storage do exist for caching and media delivery

Actions

• An object that is returned by a pure function with no side-effects
• It contains the "type" and updates to the state
• Sent to the store using dispatch() and the store updates the state using the info provided in the action

Reducer

• Pure function that takes the current state and action and performs a state update
• Usually in the form of a switch statement that takes in the action.type and creates a new state with this action

Example

Store

• Holds the entire state in a single object acting as a single source of truth
• Assign it a vairable using createStore(combinedReducer)
• Store passes two arguments to the reducer (previous state and the action)

Thunks

Why use Thunks?

We want everything that takes a long time to occur in one central place. Having the time issues in one place makes our life easier.

References

• Redux Logic Flow — Crazy Simple Summary

HTML

CSS

Javascript Runtime Environments

What is Node?

• A runtime environment software that allows the ability to execute JavaScript programs directly on your operating system outside of the browser (Note: similar to how JavaScript executed in the browser has access to the DOM (e.g., document, window))
• JS programs using node can perform OS-specific functionality such as read/write from files or establish network connections (e.g., __dirname)
• Node's package manager (npm) is similar to pip in Python, gem in Ruby, brew in Unix, and apt in Linux

Event Loop

Overview

The asynchronous, single-threaded nature is not built into the JS language, but it's built on the core JS language inside the browser (or the programming environment) and accessed using the browser API's.

• Heap - a large mostly unstructured region of memory where objects are allocated
• Call Stack - a representation of the single thread provided for JS code execution
• Browser or Web API's - these components are built into the web browser (or the computer environment) to provide extra functionality on top of JS (Note: the point of the API's is to abstract away the complexity involved and provide the extra capabilities)

Blocking

Things that are slow and on that stack (TK).

Concurrency & the Event Loop

The browser is more than the runtime and similarly in node (there's extra things in C) (TK)

Promises vs. Async/Await

a promise is a returned object you attach callbacks to, instead of passing callbacks into a function -- promise constructor takes in one argument: a callback function with two parameters — resolve and reject.

“async” before a function means one simple thing: a function always returns a promise. Other values are wrapped in a resolved promise automatically.

The keyword await makes JavaScript wait until that promise settles and returns its result.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // wait till the promise resolves (*)

  alert(result); // "done!"
}

f();

References

• Ryan Dahl: Original Node.js presentation
• JavaScript: Promises explained with simple real life analogies
• Async/await
• Concurrency model and the event loop
• Event Loop Explained
• Asynchronous JavaScript: From Callback Hell to Async and Await
• Understanding JS: The Event Loop
• Art of Node

---

Garbage Collection

• Pass by reference

References

• Garbage Collection

Express

Express API

Postman

References

• Express
• Build a RESTful API Using Node and Express 4

SQL

Basic Commands

The DBMS

The Database Management System is responsible for translating declarative queries into concrete file system operations

psql client

pg client

Differences between Postgres and MySQL

Useful Practice

• PostgreSQL Exercises
• PostgreSQL Tutorial

References

• PostgreSQL vs MySQL: What's the Difference?

Sequelize (Object Relational Mapping)

• Why you should avoid ORMs (with examples in Node.js)

Eager Loading vs. Lazy Loading

Webpack

"Webpack is a module bundler. It takes disparate dependencies, creates modules for them and bundles the entire network up into manageable output files. This is especially useful for Single Page Applications (SPAs)."

Referenes

• Webpack Tutorial: Understanding How It Works

Babel

What is Babel?

• a toolchain used to convert ES2015+ code into a backwards compatible version of JS in current and older browsers and environments

What can Babel do?

• Transform syntax
• Polyfill features that are missing in the original environment
• Source code transformations (i.e., codemods)
• Other Features

Example of Babel Transpiling

// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

Benefits of Babel in ES6

1. Block scoped variables - see let keyword
2. Classes - TK
3. Promises - TK
4. Modules - can now import/export multiple named values

Reference

• What is Babel?
• Videos about Babel
• How to use ES6 standard with Babel.js

Topics for Another Day

• MVC Pattern
• Test-Driven Development
• Debugging + Chrome Console
• WebAssembly