JavaScript Fundamentals

JavaScriptFundamentals.md

JavaScript Crash Course

A list of things to learn / talk about in order to learn the fundamentals of JavaScript and modern tools for dev

History

• Initially released in 1995
• Based on Scheme, bent to look like Java (because it was cool at the time)
• Standardized as ECMAScript, by TC39
• JavaScript is a language implementation based on the ECMAScript standard
• Now its everywhere!

Basic JavaScript

• Everything is an object
  • Objects (not classes)
• Functions
  • Also object, use console.dir on a function to see

Advanced JavaScript

• this keyword (assigned at runtime)
  • window (browsers) / global (node)
  • object definition
  • callback (setTimeout for example)
  • function() {}.bind()
• new keyword (constructor functions)
  • Binds a new object ({}) to this
  • Sets the __proto__ of that object to the functions prototype object
  • Implicitly returns that new object
• Prototypal inheritance
  • All objects have a __proto__ to lookup when a property is not found
  • Functions also have a prototype object for constructors
• ES6 classes (more on that later)
  • Constructors are JavaScripts version of classes

Modularizing (without modules)

• Using a <script> tag
• Modularizing by using many <script> tags
• Poluting the global namespace, use a window object namespace instead
  • Order matters!

Actual modules

• NodeJS uses CommonJS: module.exports and require
  • module.exports: default vs named
  • There is also AMD, UMD and RequireJS
• Modules in the browser would good... theres a package for that

Packages

• NPM
• Yarn

Bundling

• Using browserify to use modular code in the browser
  • Uses closures to keep the namespace clean
  • Browserify uses transforms
• Using webpack instead of browserify
  • Webpack uses loaders
  • Does more: code splitting, more specific config, etc.

Transpiling

• ES5
• ES6/ES2015, ES7/ES2016, ESNext
  • Primer
    • Var, let, const
    • Template strings
    • Concise object methods
    • Arrow functions
    • Destructuring
    • Modules (instead of CommonJS)
• Babel
  • REPL, browserify tranform, webpack loader

React

• create-react-app
• Functional components
• JSX
• Props
• Stateful components with ES6 classes
• Immutable State

Good video in this:
https://youtu.be/zE9iro4r918