JavaScript Course Notes

These are some notes I took when going through the course JavaScript: Understanding The Weird Parts on Udemy. It’s an excellent course for anyone looking to learn the details of how JavaScript works, just make sure to wait to buy it until Udemy launches one of its flash sales (those sales happen frequently). These notes are really more for myself, and act more as a point of reference should I ever need to look something up, rather than a fully functioning article.

Definitions

  • Arguments – The parameters you pass to a function (JavaScript has keyword arguments that contains all your arguments).
  • Arrays – Can hold collections of anything [].
  • Asynchronous – Multiple lines of code being executed at a time.
  • Callback Function – A function you give to another function to be run when the other function is finished (the function you invoke calls back by calling the function you passed in as an argument when it finishes ie call function “a” and give it function “b” as a parameter, when “a” finishes running it calls function “b” as its parameter)
  • Closure – An inner function still having access to an outer functions variables and memory despite the outer function’s execution context not being in existence after it has been called.
  • Coercion – Converting a value from one type to another (happens frequently due to JavaScript being dynamically typed).
  • Currying – Creating a copy of a function but with some preset parameters (useful with math, usually needs bind())
  • Dynamic Typing – Users can’t tell JavaScript engine what type of data a variable holds, the engine figures that out for itself.
  • Event Queue – Keeps track of events (like a click event) and notifications of events in a queue. Isn’t checked until execution contexts list is empty.
  • Execution Contexts – Wrapper that helps manage the code that is running. It manages the current lexical environment that’s running.
  • Expression – A unit of code that results in a value (it doesn’t have to save to a variable).
  • First Class Function – Everything you can do with other types, you can do with functions. (ie assign to variables, create on the fly, attach properties and methods, and pass around)
  • Function Constructor – A function that specifically is used to construct an object. The this variable points to a new empty object, and the object is returned from the function automatically.
  • Global – Not inside a function.
  • Hoisting – Refers to JavaScript’s ability to call functions anywhere, no matter what order they are placed within the code.
  • Immutable – Something that can’t be changed.
  • Inheritance – One object gets access to the properties and methods of another object.
  • Invocation – Calling or running a function.
  • Lexical Environment – Where something sits physically in the code you write, usually where you write something that’s important. Lexical means having to do with words or grammar.
  • Method – A value of an object that is a function.
  • Method Chaining – Calling one method after another, and each method affects the parent object.
  • Mutate – To change something
  • Name/Value Pair – A name that maps to a unique value. A name can be defined more than once, but it may only have one value in any type of context. Value’s can include another name/value pair.
  • Namespace – A container for variables and functions. Typically used to keep functions and variables with the same names separate (container is oftentimes an object).
  • Object – A collection of name/value pairs. new Object()
  • Object Literals – var obj = {}. Preferred over new Object(). Can be created on the fly and passed through functions.
  • Operators – A special function that is syntactically written differently. These usually take two parameters and return one result (+ – < > etc.)
  • Operator Associativity – What order operators get called in, left to right, or right to left when functions have the same precedence.
  • Operator Precedence – Which operator function gets called first.
  • Outer Environment – Code outside of functions.
  • Polyfill – Code that adds a feature that an engine may lack.
  • Primitive Types – A type of data that represents a single value and is not an object.
    • Undefined – represents a lack of existence, variables shouldn’t be set to this.
    • Null – represents a lack of existence, variables can be set to this.
    • Boolean – either true or false.
    • Number – is a floating point number, it’s the only number type in JavaScript.
    • String – a sequence of characters in between ” or “”.
    • Symbol – used in ES6.
    • NaN – not a number, tried to convert something to a number, failed, returned NaN.
  • Property – Value of an object that is a primitive.
  • Reflection – An object that can look at itself, listing and changing its properties and methods.
  • Scope – Refers to where a variable is available in your code and whether it’s a true variable or a copy.
  • Single Threaded – One command being executed at a time. (usually not under the hood).
  • Static Typing – Users tell their programming languages engine what type each variable is.
  • Synchronous – One line of code being executed at a time in order.
  • Syntactic Sugar – A different way to type something that doesn’t change how it works under the hood.
  • Syntax Parser – A program that reads your code and determines what it does and if its grammar is valid.
  • Transpile – To convert the syntax of one programming language to another.
  • Variable Environment – Where variables live and how they relate to each other in memory.
  • White Space – Invisible characters that create literal space in your code (carriage returns, tabs, and spaces).

Concepts

Arrays – Avoid iterating over arrays using for and in.

Asynchronous – JavaScript is synchronous, but it uses asynchronous callbacks with other engines outside of JavaScript, like with HTTP requests or a rendering engine within the browser. Click events and others will be executed after JavaScript is done executing its execution contexts.

Booleans and Coercion – Coercion and Booleans (works every value except 0, because 0 is false) workaround (a || a === 0)

By Reference – Passing variables by reference. Ex. b=a (or a is passed in a function) a is stored in memory at an address, and b is stored in that exact same address as a. All objects interact with each other by reference. When passing by reference the equals operator can set up new memory space, nixing the equality between two variables on a single object.

By Value – Passing variables by value. Ex. b=a (or a is passed in a function) a is stored in memory at an address, b points to a new address where a copy of that value is placed into memory. Usually used for primitives. If you change value of a, value of b remains the same because it is a copy.

Classic vs. Prototypal Inheritance –

  1. Classical
    1. Verbose
    2. Lots of keywords
  2. Prototypal
    1. Flexible
    2. Extensible
    3. Easy to understand

Execution Context (Global) – The base of JavaScript, being run through the compiler. Creates a global object that can be used anywhere and it creates this. Has two phases, the first is hoisting, the second is code execution. Every execution context has its own variable environment. Every function called creates a new execution context.

Hoisting – JavaScript has a two part creation process. The first part of the creation phase sets up memory space for variables and functions (called hoisting). This is why it can read functions anywhere, but variables must be declared in the correct order. Variables are set to equal undefined if they’re called before they’re defined.

Invoking Functions – Every time a function is invoked a new execution context is created (usually on top of the global execution context). Invoking Function structure:

  1. Execution Context Created (separate from object), context contains:
    1. Variable Environment
    2. Has reference to outer variable environment
    3. has ‘this’ variable
    4. Arguments (a list of all variables being passed in, contained in something that is array like)
    5. call() method
    6. apply() method
    7. bind() method
    8. name (can be anonymous)
    9. code (can be executed)
    10. prototype (only active once new keyword is used)

Function (call, apply, bind) – JavaScript function object has access to these three methods which can be used to set the ‘this’ keyword.

  1. bind() – sets the ‘this’ variable to an object, doesn’t execute the function. Can be called in function expressions.
  2. call() – sets the ‘this’ variable to an object and can pass additional parameters. Executes the function. Can be called on Immediately Invoked Function Expressions.
  3. apply() – sets the ‘this’ variable to an object and but can only pass additional parameters as an array. Can be called on Immediately Invoked Function Expressions.

Immediately Invoked Function Expression – Function expression that immediately calls itself. Has two execution contexts, one outside the parenthesis (global) and one inside the first parenthesis.

Function (closure) – Functions called within functions will reference variables saved in the outer function. This still happens even though the execution context of the outer function removes itself after being called. Internal functions can only tell you what’s in memory right now, not what was in it when it was created (careful of loops and arrays). In ES6 using let j=i (like self=this) could solve this (doesn’t work in Chrome), otherwise needs to be solved with IIFE.

Function (factory) – Is a function that returns or makes things for you. Generates many different execution contexts, so closure is possible without IIFE’s.

Function (this) – Points to the global object (window) initially and also if placed inside a function or functions. Invoking a function causes ‘this’ to point towards the global variable. If a function is invoked inside of an object (or method is created) the ‘this’ keyword points to the object holding the function. If a function is created within a function the ‘this’ keyword once again points towards the global object. Let keyword meant to help clear some of nested function ‘this’ issues up.

Function Arguments – JavaScript functions that have arguments will still run if they have no arguments passed into them. Function object has name property that’s optional, and it contains the value of what you name your function (no name = anonymous), and it has a code property which contains a value that contains the code you write in the function (is actually a property). Code property is invocable. Can use three dots (…) before an argument to put as many arguments as you want in a function (they’re passed in through an array like object) … (still new, works on Chrome).

Function Expression – A function that returns a value. Usually anonymous. Function stored in variable “address.” Function also creates an object.

Function Constructors – creates new object using a function ie. var name = new Person(). New keyword creates the object, and the function adds properties and methods to that object. The prototype property on a function is not the prototype of that specific function, but rather the object being created by the constructor. Properties are usually created in the constructor functions, while methods are created on the prototype objects. Constructor names should begin with a capital letter.

Function Constructors (built in) – Built in constructors have their methods stored on their prototype object. They look like they’re creating primitives, but they are in fact creating objects (can be dangerous with comparisons and booleans). You can added to built in constructors by adding on to their prototype. Can call prototype on built in function constructions to see all available methods in console, ex. String.prototype.

  1. new Number()
  2. new String()
  3. new Date() (look into momentjs.com library)

Function Statement – A function that executes code.

Functions – Are first class in JavaScript, are objects.

JavaScript and Undefined – undefined means the variable exists within the program, but it hasn’t been set.

JavaScript and Not defined – means the variable doesn’t exist at all.

JSON – JavaScript Object Notation – Inspired by JavaScript object literals. Just a string of data. Properties must be wrapped in quotes. All JSON is valid JavaScript literal syntax, but not all JavaScript literal syntax is valid JSON. JSON.stringify() will convert an object literal to a JSON string. JSON.parse() will convert a JSON string to an object literal.

Objects – Have properties (dots) attached to them. Dot operators are actually functions that take two arguments. Dot operators should be used to create new properties, although computed member access …[…] could be used as well, but should only be used if you want to use dynamic strings. (Compared to a Ruby hash property equals key and value equals value). Properties include:

  1. Primitives (strings, numbers, etc.)
  2. Objects (property type)
  3. Functions (called methods)
  4. Prototype (special JavaScript property that contains a reference to another Object)

Object.create and Pure Prototypal Inheritance – Create an object and use that object as the prototype for creating other objects.

Operators – examples like + and – are actually in fixed functions that use the two numbers on either side of them as parameters, it returns numbers. < and > operators return booleans. (associativity of equal signs is right to left). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

Prototype – A property attached to all JavaScript objects (except the base JavaScript Object) that contains a reference to another object. It can be accessed by Objects other than the one originally attached to it. Can use _.extend (with underscore.js library) to combine methods and properties of object on to one object. Methods are usually created on prototype objects to save memory space. Object.prototype.nameOfProperty is used to create prototype, usually set equal to a function. Undefined error will popup if you forget “new” keyword. Methods available:

  1. Set object, array, or function to variable, then in console call yourObj.__proto__. to see available methods

Prototype Chain – Refers to the stack of prototypes created by an object and their related properties and methods.

Scope Chain – Refers to the stack of various execution contexts created by functions that JavaScript must navigate through in order to access variables. If a function can’t find a variable locally, it will check to see if it can find it globally.

Strict Equals (===) – Does comparisons without coercion.

Syntax Parsers – Can make changes to your code before it’s even executed. Reads character by character. Syntax parser automatically puts semi-colons where it thinks they should be (if you hit enter for example), really dangerous with ‘return’.

Typeof vs Instanceof – The typeof checks what type a variable is (string, number, etc.). Arrays will give you back object instead of array, Object.prototype.toString.call(array) will give back an object Array. Null will return object, this is a bug. The instanceof method checks the prototype chain for an object of whatever you pass into it, returns true false value.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s