0bie

Array Methods

• Array Methods
  • join():
  • reverse():
  • sort():
  • concat():
  • slice():
  • splice():
• push() and pop():

0bie

• Functions
• Methods
• this

Functions

• When a function is invoked on or through an object, that object is the invocation context or this value for the function.

• Functions designed to initialize a newly created object are called constructors

0bie

Scope Resolution

• The ability to store values and pull values out of variables is what gives a program state.

• A well defined set of rules for storing variables in some location, and for hiding those variables at a later time: SCOPE

• Abstract Syntax Tree (AST): The grammatical structure of a program

• Any snippet of JS has to be compiled before (usually right before) it's executed

0bie

• Call-site: The location in code where a function is called (not where it's declared). Usually the call-site we care about is in the invocation before the currently executing function

• Call-stack: The stack of functions that have been called to get us to the current moment in execution

• Closure:

  • When a function still has reference to its outer scope (parameters, variables, functions) even after that outer function has been executed.

  • Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope E.g

0bie

Object property descriptors

Provide a way to draw a distinction between the characteristics of properties, such as whether the property was read-only or not.

var myObject = {
  a: 2
};

Object.getOwnPropertyDescriptor(myObject, 'a'); // => {value: 2, writable: true, enumerable: true, configurable: true}

0bie

// callback examples
function loadImage(src, parent, callback) {
  const img = document.createElement('img');
  img.src = src;
  img.onload = callback;
  parent.appendChild(img);
}

const imgContainer = document.body;

0bie

// Sessions

// A place to store data that you want access to across requests.
// Each user that visits your site has a unique session
// Sessions can be used to store and access user data as they access your application
// Sessions allow a web app to store state

// Simple session in Express:
import express from 'express';
import session from 'express-session';

0bie

// Passing a value of 0 to the `setTimeout` method deffers the callback to the end of the stack or until the stack is clear
setTimeout(function() {
  console.log('test');
}, 0);
// `setTimoeout` is not a guaranteed time to exucution, it's a minimum time to execution
// Passing a value of 0 to `setTimeout` doesn't run the code immediately, it runs the code as soon as the stack is clear (nextish)
// The event loop pushes any deffered executions in the task/callback que only after the stack is clear
// The stack can continue to run while waiting for a request from the web API
// The browser can't perform a render while code is running on the stack
// Avoid putting slow/heavy duty code on the stack because it prevents browsers from rendering the UI

0bie

// Lifecycle phases:

// Initiialization: Defaults & initial values for `this.props` and `this.state`
// `getDefaultProps()` is called once and cached when the class is created
// We can't rely on `this.props` in `getDefaultProps()`
// `getInitialState()` is invoked once right before the mounting phase

var Counter = React.createClass({
  getDefaultProps: function() {
    console.log('getDefaultProps');

0bie

// Observer Pattern Notes
// The instance (subject) maintans a collection of objects (observers)
// The instance notifies the objects when changes to the state occur

class Observable {
  // each instance starts with an empty array of observers that react to state changes
  constructor() {
    this.observers = [];
  }