This story is a part of — My CS Notebook

Vanilla JS

o   Baseline JavaScripto   When googling answers good to google with Vanilla if you are working with a Framework

JavaScript Framework

o   Angular, React, Vue, Ember, Express, Next

Event Delegation

Event Propagation

§  Blank term for Event Capturing & Event Bubbling§  Propagation is bidirectional and can be broken up into three phases- Capture Phase: window to the event target parent; In this phase only “capturers” are called: registered with true as the third parameter of addEventListener (which is default set to false)- Target Phase: the event target; “capturer” flag or not, all listeners registered on the event target are called- Bubble Phase: from event target back to the window; In this phase only “non-capturers” are called; Note not all event bubble up: specifically ones that are specific to the event target like focus, blur, and load§  Depending how the event is defined it could travel in three ways- Directly at the event target- Down from the window to the target back up to the window- Down from the window to the target§  Accessing propogations- E.target -> refences event target- E.currentTarget -> context of the listener of which the node it was register; equivalent to this in the context of the listener- E.eventPhase -> integer that describes the current phase (CAPTURING PHASE, BUBBLING_PHASE, AT_TARGET)- E.stopPropagation() -> stopsAll all proceeding capture- E.stopImmediatePropagation() -> emergency brake- E.preventDefault() -> Overrides other listeners

Capture & Bubble Phase

o   Event Capturing§  Downward navigation from the window to the targeto   Event Bubbling§  Upward navigation from the target to the window

ClosureClosure in JavaScipt

o   Taking a function with many arguments and splitting it into functions with one argument that return a function of that single argumento   A function that has closure has access to its outer scopeo   A function that has closure has two benefits- Controls Side Effects => This can prevent name clashing and preserve the namespace- Creates Private Variables => E.g. inner function only has access to outer function variableso   Can be referred to as ClosureClosureo   It can be best described in the implementation of currying, non-native to JavaScript, but libraries like lodash have methods to mimic ito   In JavaScript: this allots two benefits- Closure can help preserve the namespace, by preventing name clashing within the function scope.- Closure can help with async work, for example you can nest an async implementation within a function inside a loop and it will print each iteration

Other

Variables

Hoisting

Syntax

o   If, else if, elseo   && = ando   || = oro   == is equal to but not type specifico   === is equal and same typeo   Ternary – condition ? true case : false caseo   Switch Caseo   this -> references scope of closes prototypeo   async / await -> alternate to promiseso   promise -> more concrete way to control async nature of JavaScripto   setTimeout -> async method to hold execution of callback functiono   setInterval -> async method to execute a callback on an intervalo   clearTimeout -> garbage collect timeouto   clearInterval -> garbage collect intervalo   const -> immutable object definitiono   let -> mutable object definitiono   var -> replaced by let and consto   callbacks -> functions passed as parameters to support concurrency

Function Types

o   Regular – function A() (Instantiates new prototype)o   Arrow – () => {} (Uses direct parent’s prototype)

ES6 Functions

Map – iterates over array and returns mutated versionReduce – takes two args (accumulator, currentValue)Filter – Iterates over array compiles new list that only contains values where condition was metSort- Default sort order is ascending and converts the values to strings then compares the UTF-16 unit values- Sort can take a comparison function either a defined or anonymous; The methods signature is firstEl, secondElForEach – Loops through a list without returning anything

Generators

Quick implementation of an Iterator with the use of the keyword yield

Concurrency

Execution of program units is non-linear and non-sequential – this refers to JavaScript’s Asynchronous nature

Functional vs OOP

Can use both!

DOM Manipulation

JavaScript is meant to be a part of a browser and has a bunch of functionalities just for that purposeThe DOM is the “ledger” of how any webpage is structurally built, JavaScript allows you to manipulate this

Babel — Compiler for Next-Gen JavaScript

JavaScript runs on all different types of browsers, all types of browsers have different versions, all clients have different copies of those versions. Babel takes something like ES6 and compiles it into basic form to make sure it works on more browsers

Webpack — A bundler for JavaScript and friends

Bundles modules and libraries into a fewer assets

Portability

JavaScript can make desktop apps too with chromium (Electron and Unreal Engine support this)

This story is a part of — My CS Notebook

Enjoy the read?

Leave a clap or comment

Share with friends or on your favorite social platform

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store