Advanced JS

# Advanced JS | Summary

The purpose of this sprint is to learn:

- Types, values and properties
- Function expressions vs function declarations
- Hoisting
- Closures
- Strict mode
- Context
- The binary system and floating point numbers
- The delegation chain
- Classes and sub-classes
- ESnext syntax and methods
- Polyfilling and transpiling

## Types, values and properties

- Types can be divided into “primitives” and objects.

- Primitive types are: String, Number, Boolean, Symbol, Null, and Undefined.

- Primitive types are immutable.

- The Object type includes arrays and functions.

- Objects are collections of properties.

- Each property has 4 attributes: `value`, `writable`, `enumerable`, `configurable`.

- When you pass a variable you’re passing its value.

- Objects are passed around as the value of their reference.

## Function expressions vs function declarations

- Functions can be anonymous or named (named functions produce a more human-friendly stack trace).
- Function expressions assign a variable to a function.
- Function declarations define a named function variable without requiring variable assignment.

## Hoisting

- Variable and function declarations are put into memory during the compile phase.
- JavaScript only hoists declarations, not assignments.
- Consequently when a function declaration is hoisted, the entire function body is lifted with it. In function expressions instead only the variable declaration is hoisted.

## Closures

- A closure can only happen when you have a function returning a function.
- If the inner function has references to the scope of the outer function, after being returned it keeps exclusive access to it.

## Strict mode

- It limits potentially harmful language features.
- It’s a scope-wide declaration that is activated inserting `'use strict';` as the first code statement.
- It’s good practice to use it, unless you have a specific reason not to.
- Guarantees some engine optimizations (i.e. makes your code run faster).
- It’s activated by default when using ES6 modules and classes.

## Context

- The concept of “context” is a programming convenience, and in JS it’s assigned to the variable `this`.
- `this` is a binding that is made when a function is invoked, and what it references to is determined entirely by the call-site of the function, according to some rules.
- The simplest way to frame these rules is:  `this` is what is to the left of the dot **at call-site**.
- The only exceptions to this rule are:
  - Standalone function invocations (“nothing to the left of the dot”), it binds to the global object.
  - If you make an explicit binding, it binds to whatever you choose (if `null` or `undefined`, the global object).
  - If you use the `new` keyword, it binds to the new class instance created inside the constructor.
  - If you use arrow functions, they don’t have a context, and hence inherit it from the enclosing scope.

## The binary system and floating point numbers

- Bit means “binary digit” (i.e. it can only have 2 values, like 0/1), and it’s the basic unit of information in computing.
- Binary numbers are series of zeroes and ones that represent a sum of powers of 2.
- JavaScript uses [64-bit floating point](https://en.wikipedia.org/wiki/Double-precision_floating-point_format) representation for numbers. 
- Fractions where the denominator is not a power of 2 can’t be exactly represented.
- The best way to handle monetary calculations in JS is to always do the required operations in cents (i.e. using integers: multiply the original amount by 100 at the beginning, and then divide by 100 again at the end).
- More details can be found here: http://floating-point-gui.de/

## The delegation chain

- Properties lookup in JS objects follows a delegation “chain” (aka the “prototype chain”).
- To set a link in this chain when creating a new object use `Object.create(parentObj)`.
- If a property lookup fails until the last step in the chain, `undefined` is returned.
- When a property is defined on an object down the chain, it “obfuscates” the same property in other objects up the chain.

## Classes

- In programming, “class” is a term used to define a group of elements that exhibit the same properties (very much like in natural language).
- The main 3 instantiation styles are: functional, pseudo-classical, and ES6.
- A sub-class has all the properties and methods of its parent class, plus other ones that are unique to it.
- Real classes have instances who are completely independent from each other.
- In JS this doesn’t exist when you use delegation, as modifying an object up the chain affects all objects that delegate to it.

## ESnext

- JavaScript is based on a standard, named “ECMAScript”.
- The standard keeps evolving: new language features are introduced (i.e. syntax and functionality), some can be removed.
- ES6 introduces some [new interesting concepts](http://es6-features.org/), for example: `let` and `const`, arrow functions, default and trailing function parameters,  the spread operator, template literals, enhanced object properties, modules (import / export), class definitions, symbols, maps / sets, and promises.

## Polyfilling and transpiling

- Different control over server and browser environment.
- Check language features support ([caniuse.com](http://caniuse.com/), [node.green](http://node.green/)).
- Polyfilling means adding the code required for the new feature to run properly.
- Transpiling is a way to translate code that uses new features into the equivalent code if it was using older features (e.g. [Babel](https://babeljs.io/)).




> Copyright Codeworks, all rights reserved.