Advanced JavaScript with Kyle Simpson

My blogs chronicle my experience as a technologist making my way into Silicon Valley. I am a queer person of color, gender non-conforming, immigrant, and ex-foster youth. I come from a non-traditional coding background. I studied a few CS courses in college and ended up majoring in the humanities before becoming a teacher. Teaching web development to under served teens turned me on to coding. After finishing at a coding school, I began working at start ups in San Francisco. Half of my blogs are about technical subjects and the other half are about equality and tech access (my journey).

I am publishing blogs on tutorials I have gone through on Front End Masters. This one is on Kyle Simpson’s Advanced JavaScript workshop. Kyle is the author and teacher of one of the most popular programming languages in existence today, the popular series of JavaScript books called “You Don’t Know Javascript.”

Admittedly, this was not one of the ‘sexy’ front end masters’ courses on say, React, React Native or Angular 2, however, if you want to become a good Javascript developer, you have to have SOLID knowledge of fundamentals and suffice it to say, Kyle Simpson teaches you that in this tutorial.

Besides being an expert on JS, Kyle is also a good teacher. Coming from a teaching background, I have experienced the good, the bad and the ugly both as a learner and teacher. He speaks clearly, interacts directly with the audience (in the workshop video) and hammers the concept until we’ve got it.

Big takeaways:

• Scope
• Closure
• ‘this’ and ‘new’
• Object Oriented Programming (OOP)
• Async Patterns
• Do’s and Don’ts

SCOPE

Lexical scope

Kyle gives us an ingenious analogy for lexical scope, addresses inside a building. If you don’t find the address on a specific floor, then go up to the next level and quickly your search expands out like concentric circles. Scope is everywhere in JavaScript programming. So, to learn JavaScript requires solid understanding of lexical scope: how to traverse it, use it to hide variables by making them private.

If you want to cheat lexical scope, and create private variables you can use the Immediately Invoked Function Expressions (IIFEs). The open/close parentheses immediately invokes a JavaScript function. In the IIFE below, the variable foo is being protected from the global name space.

var foo = “foo”;(function(){var foo = “foo2”;console.log(foo);})();

console.log(foo);

Block Scope

The let key word attaches to the block scope. In a for loop, the keyword let attaches to the `i` and inside the `for loop`’s code block. Tradeoffs are, the let key word allows for variable reuse but it does not hoist that variable.

// i accessible to letfor(let i = 0; i < list.length; i++){//i accessible here tooreturn i}

Dynamic Scope

In the code below, the `function foo` has access to the `var bar` because it looks at the call stack and not at its lexical scope.

function foo() {console.log(bar); //dynamic!}

function baz() {var bar = “bar”;foo();}

baz();

Closure & Hoisting

Hoisting

When variable declarations and function declarations are moved to the top during the compile phase.

function showName () {console.log ("First Name: " + name);var name = "Ford";console.log ("Last Name: " + name);}showName (); // First Name: undefined// Last Name: Ford// Undefined prints because the local variable name is hoisted to the top of the function// Local variable gets called the first time

// This is how the code is actually processed by the JavaScript engine:function showName () {  // name is hoisted (note that is undefined at this point,      since the assignment happens below)  var name;   // First Name: undefined  console.log ("First Name: " + name);   // name is assigned a value  name = "Ford"; // now name is Fordconsole.log ("Last Name: " + name); // Last Name: Ford}

In hoisting, functions are called first, variables declarations next, executions and then function expressions.

Closure

is the capability of a function to access and remember its lexical scope even when that function is executed outside of its lexical scope. A necessary mechanism in Javascript that allows usability for first-class functions

Closure Example #1

function foo(){var bar = “bar”;function baz() {console.log(bar);}bam(baz);}

function bam(baz) {//can still access the variable bar — that is closurebaz();}

foo();

Closure Example #2

function foo(){var bar = “bar”;return function() {console.log(bar);}}

function bam() {//can still access the variable bar — that is closurefoo()();}

bam();

‘This’

Every function while it is executing, has a reference to its current execution context (includes more than ‘this’, local variables, call stack). Execution context means how the function is called when it is called.

Rules — depends on the ‘call site’ — place in code where a function gets executed.

• Hard binding — predictable use of ‘this’

function foo(){console.log(this.bar);}var obj = { bar: “bar” };var obj2 = { bar: “bar2” };var orig = foo;

foo = function(){ orig.call(obj); };foo();foo.call(obj2)

Is there a utility function that does this? Yes, there is — bind:

function bind(fn, o){return function() {fn.call(o);};}

function foo() {console.log(this.bar);}

var obj = { bar: “bar” };

var obj2 = { bar: “bar2” };

foo = bind(foo, obj);

foo();

foo.call(obj2);

2. Explicit binding rule — at the call site if there is a call or apply that is explicitly specifying a ‘this’

function foo(){console.log(this.bar);}

var bar = “bar1”;

var obj = { bar: “bar2” };

foo(); //default binding

foo.call(obj); //explicit binding

3. Implicit binding rule — see below how ‘this’ binds to an object property reference

var implicitBinding = { bar: “bar2”, foo: foo };implicitBinding.foo(); //’this’ binds to object property reference

4. Default binding rule — if you are in ‘strict mode’ default the ‘this’ key word to the undefined value. if not, default the ‘this’ key word to the global object

function foo() {console.log(this.bar) //this is bound to an object with property}foo(); //call site looks like this and default binding applies

4 questions about the ‘this’ keyword:

• Was the function called with the ‘new’ keyword?
• Was the function called with ‘call’ or ‘apply’, making it an explicit binding?
• Was the function called via a containing/owning object (context)? (implicit binding)
• DEFAULT: global object (except strict mode)

New

4 things happen when the ‘new’ keyword is placed in front a function call:

• A new object is created.
• The new object is linked to a different object.
• New object is bound to the ‘this’ keyword
• If that function does not return anything, it will implicitly insert a return this

function foo() {this.baz = “baz”;console.log(this.bar + “ “ + baz);}

var bar = “bar”;var baz = new foo();

Do’s and Don’ts

• Don’t use unnamed anonymous function. It is bad practice, (gasp face emoji) — because you cannot call the function recursively.
• Do not use ‘with’ or ‘eval’ — eval modifies the existing lexical scope to add a new declaration at runtime, makes your code slower
• Use IIFEs to make variables private