Design Portfolio


JavaScript: Understanding the Weird Parts (Part 1)

I started my first Udemy.com course this week. I bought JavaScript: Understanding the Weird Parts since it came highly recommended on Newbie Coder Warehouse and it is an intermediate JavaScript course. I believe I am ready for that.

Conceptual Aside

  • syntax parsers - a program that reads your code and determines what it does and if the syntax (think grammar) is valid
    • When you write code, another program (compiler, interpreter written by someone else) converts your code into a set of instructions the computer can understand
    • This intermediate program that translates your code can also include extra stuff. This is an important element of understanding JavaScript.
  • execution contexts - a wrapper to help manage the code that is running
  • lexical environments - where something physically sits in the code you write; where the code is written and what surrounds it
    • lexical - having to do with words or grammar
    • In a programming language, the location where something is written is important.

Name/Value Pairs and Objects

  • name/value pair - a name which maps to a unique value
    • name may be defined more than once but can only have one value in any given contex
    • however, that value may be more name/value pairs
  • object - a collection of name/value pairs
    street: 'Main',
    number: 20,
        floor: 10,
        number: 1001,

The Global Environment and the Global Object

  • whenever code is run in JavaScript, it is run inside and execution context
  • global execution context - the base execution context
    • global - accessible everywhere and to everything in your code; not inside a function
  • JS engine creates global execution context and 'this'
    • the window is the browser's global object
    • a separate tab is a separate window, each window is its own execution context

The Execution Context: Creation and 'Hoisting'

  • the execution context is created in two phases

  • Creation Phase

  • global object - 'this' - outer environment

  • set up memory space for variables and functions

  • "Hoisting" - not actually moving code to the top of the page

  • before your code is executed line by line, the JS engine has already set up memory space for the variables and functions you've created in your entire code
  • all variables are intitially set as undefined and functions sit in memory in their entirety
    • this is why it is a bad idea to rely on hoisting in any way

JavaScript and 'undefined'

  • "not defined" and "undefined" are not the same thing
    • undefined is a special value that means the variable has not been set
  • never set a variable to undefined
  • it is better to let undefined mean "I, the programmer, never set the value"
    • this will help with debugging

The Execution Context: Code Execution

  • code runs line by line
    • interpreting it, converting it, compiling it, executing it on the computer into something the computer can understand

Single Threaded, Synchronous Execution

  • single threaded - one command is being executed at a time
  • in the browser, JS may not be the only thing running but from a programmer's perspective, JS behaves in a single threaded manner
  • synchronous - one at a time and in order

Function Invocation and the Execution Stack

  • invocation - running a function, calling a function
    • in JS, using parenthesis ()
  • whenever you invoke a function, you create and execute that code
  • when the function is finished, the computer resumes the code where it left off

Functions, Context, and Variable Environments

  • variable environment - where the variables live and how they relate to each other in memory
function b() { //execution context b()
        var myVar; //myVar is undefined
function a () { //execution context a()
        var myVar = 2; //myVar = 2
var myVar = 1; // global execution context, myVar = 1
  • myVar exists 3 times but each time is distinct and they do not touch each other

The Scope Chain

  • when we request or do something with a variable, JS does more than just look in the variable environment of the currently executing context
  • it also references variable's outer environment, this is the scope chain
  • b() and a() both reference the outer environment, global context
  • all sections of the above code are in the same lexical environment - the global environment
  • JS cares about the lexical environment when it comes to the outer reference that every execution context gets

Since all 3 pieces of code are in the same global lexical environment, when we call myVar in b(), we pull the global myVar since b() does not have a myVar.

Scope, ES6, and let

  • scope - where the variable can be accessed; where a variable is available in the code and if it's truly the same variable or a new copy
  • let - allows the JS engine to use block scoping; used or can be used instead of var
if (a > b) {
    let c = true;
  • during the execution phase, the variable is still placed in memory and set as undefined but the variable cannot be used until the line of code is run during the execution phase that actually declares that variable
  • using c before running let c = true; would produce an error
  • let is declared inside a block and is only available in that block at that period of time
  • block - curly braces {} running the code
    • if a loop has a let statement inside, a different variable will be produced in memory each time the loop is run
    • this concept allows for block scoping

Asynchronous Callbacks

  • asynchronous - more than one at a time
  • since JS is synchronous, how does it handle asynchronous events like click events and callbacks?
  • there are other engines running besides the JS engine when you load it in the browser
    • these include the rendering engine and the HTTP request
    • different engines can run asynchronously
    • code inside the JS engine can only run synchronously
  • event queue - stuff like click events get placed here
    • the event queue gets looked at by JS when the execution stack is empty
  • the browser is asynchronously putting things into the event queue but the JS code is still run line by line