Learnings 📙 (es6, eslint)

es6.md

ES6

Things I've learnt from Wesbos.com course

Scoping

var variables can be updated or mutated, which means you can re-delare a var again.

var variables are function scope. Which means their only available inside the function that they were created. Or, global scope if they've been created outside a function.

const and let are block scope which means they are confined inside any block, even if statements.

Convention

• use const by default
• only use let if rebinding is needed
• (var shouldn’t be used in ES6)

https://mathiasbynens.be/notes/es6-const

Arrow function

• more consise
• implicit returns (means you can write one liners)
• it doesn't re-bind the value of this

You can return an object by wrapping the block in parethasese.

When not to use this If you don't want to bind this to the function.

const beemer = new Car('bmw', 'blue');
const subie = new Car('Subaru', 'white');

Car.prototype.summarize = function() {
    return `This car is a ${this.make} in the colour ${this.colour}`;
};

You also don't get access to the arguments object when used inside of an arrow function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments

Strings

New functions

• .startsWith()
• .endsWith()
• .includes()
• .repeat()

New Array menthods

• Array.from() create an array from an iterabble
• Array.of(1, 2) create an array from values
• Array.some() check at least one condition is true
• Array.every() check to see if every condition is true

Promises

const postsPromise = fetch('http://wesbos.com/wp-json/wp/v2/posts');

postsPromise
  .then(data => data.json())
  .then(data => { console.log(data) })
  .catch((err) => {
    console.error(err);
  })

Classes

When you put a method on the original constructor it will be inherited by all the other instances. There are two ways to make a class in ES6:

1. Class decleration

class Dog {}

2. Class expression

const Dog = class {}

Static methods are methods that only live on the parent class itself and cannot be accessed by instances e.g Array.from().

Sets

WeakSets

Its a Set that contains objects (only) that are held weakly which means that if they are deleted from the code you are running, they are also delted from the Set.

1. Can only ever contain objects
2. Its not iterable You can't enumerate or loop over it
3. There isn't a .clear() // collected by the garbage collection when deleted in the code

Maps

Works similar to Sets however, they have a key: value pair. You can loop over them in 2 ways:

1. foreach which will give you a key and value
2. for of which returns an array that you can destructor (below)

const dogs = new Map();

dogs.set('Snickers', 3);
dogs.set('Sunny', 2);
dogs.set('Hugo', 10);

dogs.forEach((val, key) => console.log(val, key));

for (const [key, val] of dogs) {
  console.log(key, val);
}

Async Await

eslint.md

Eslint

Setting up Eslint, for quick refrence

getting started

eslint-loader

webpack config npm install eslint-loader --save-dev

Babel eslint loader

https://github.com/babel/babel-eslint

Add .eslintrc file config

{
  "rules": {
    "strict": 0,
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  },
  "plugins": [
    "react"
  ],
  "parser": "babel-eslint",
}

Add other npm packages

npm install eslint-loader --save-dev npm i eslint-plugin-html --save-dev npm i -D eslint-plugin-react npm i -D babel-eslint

Add to webpack

"rules": [{
    enforce: "pre",
    test: /\.tsx$/,
    exclude: /node_modules/,
    loader: "eslint-loader",
  },
  // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
  {
    test: /\.tsx?$/,
    loader: "awesome-typescript-loader"
  },
  // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
  {
    enforce: "pre",
    test: /\.js$/,
    loader: "source-map-loader"
  },  
}]

to comment out things // es-list-disable-line