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 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). non-traditional I am publishing blogs on tutorials I have gone through on . This one is on Kyle Simpson’s Advanced 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 Front End Masters JavaScript “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 , 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. is everywhere in JavaScript programming. So, to learn JavaScript requires solid understanding of lexical scope: how to it, use it to hide variables by making them . lexical scope Scope traverse private If you want to cheat lexical scope, and create private variables you can use the Immediately . The open/close parentheses immediately invokes a JavaScript function. In the IIFE below, the variable foo is being protected from the global name space. Invoked Function Expressions (IIFEs) var foo = “foo”;(function(){var foo = “foo2”;console.log(foo);})(); console.log(foo); Block Scope The key word attaches to the . In a , the keyword 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. let block scope for loop let // 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 and not at its lexical scope. call stack 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 , local variables, call stack). means how the function is called when it is called. ‘ ’ this Execution context 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 to make variables private IIFEs