Notes from Training: Learn JS Ecmascript 6 - Egghead

683 words · 4 min read

Notes

arrow function
  syntax
    var createGreeting = function(x,y) {..}
    -->
    var arrowGreeting = (x,y) => ...;
    --> if one parameter
    var arrowGreeting = x => ...;
  ex: accessing this in outer scope
    opt1:
      var d = {
        name: ".."
        receive: function() {
          var that = this;
          this.handle(.., function(..) {
            that.name;
    opt2: removing that = this
      var d = {
        name: ".."
        receive: function() {
          this.handle(.., x => this.name)
var vs. let
  es5: var declaration
    let m = "hi"
    { let m = "bye" }
    # m is overridden
  es6: let declaration uses block scoping
    let m = "hi"
    { let m = "bye" }
    # m is not overridden
default values
  function greet(x, name = "John") {..}
  greet("hello")
  # x <- "hello"
const
  es6: to make variables constant
    const x = "..."
  this is constant reference (not value)
    const x = {}
    x.foo = "a"
shorthand properties
  shorthand
    let first = "ali"
    let person = {first}
    # person.first is "ali"
    --> as if
    let person = {first: first}
object enhancements
  declaring a function on an object
    -- es6:
      var car = {
        go() { console.log("help"); }
      };
      car.go()
    -- es5:
      var car = {
        go: function() { console.log("help"); }
  trick: computed property
    -- es6
      var car = {
        ["go"]: function() { .. }
      car.go()
    -- same:
      car["go"]()
    -- same:
      var drive = "go"
      var car = {
        [drive]: function() {..}
      car.go()
spread operator
  ex
    console.log([1,2])
    # [1,2]
    console.log(...[1,2])
    # 1 2
  ex: push elements into other array
    let first = [1,2]
    let second = [3,4]
    first.push(...second)
    # [1,2,3,4]
string templates
  es5
    var h = "Hello "
    h + "World"
  es6
    `${h} World`
  can do expression
    `${3+2}`
    `${new Date().getHours()}`
destructuring assignment
  es5
    var obj = { color: "blue" }
    obj.color
  es6
    opt1
      var {color} = { color: "blue" }
      color 
      # blue
    opt2: multiple properties
      var {color, pos} = { color: "blue", pos: 3 }
      color 
      pos
    opt3: function that returns
      function generateObj() { 
        return {color: "blue", pos: 3 }
      var {color} = generateObj()
      color 
    opt4: rename names
      var {color: col} = generateObj()
      col
    opt5: array destructuring
      var [first,,] = ["red", "blue", "yellow"]
      first
      # red
    opt6: forEach arrow syntax
      people.forEach( ({firstName}) => console.log(firstName) )
modules
  math/addition.js
    function sumTwo(..) {..}
    export { sumTwo }
  main.js
    import {sumTwo} from 'math/addition'
    sumTwo(..)
  opts
    export function sumTwo(..)
    import {sumTwo as add} from 'math/addition'
    import * as addition
      addition.sumTwo()
    export var users
    lodash
      import * as _ from 'lodash'
      _.where(users, {age: 36})
converting an array like object into an array with ArrayFrom
  Array.from
    const products = document.querySelectorAll('.product')
    # NodeList type
    -->
    const products = Array.from(document.querySelectorAll('.product'))
  use like array
    products
      .filter(product => parseFloat(product.innerHTML < 10)
      .forEach(product => product.style.color = 'red')
    # highlighting products less than 10 $
promises 
  basic skeleton
    var d = new Promise()
    d.then()
    d.catch()
  ex
    var d = new Promise((resolve, rejct) => {
      if (true) {
        resolve('hello')
      } else {
        reject('no bueno')
      }
    })
    d.then((data) => console.log('success: ', data)
    # data: hello
    d.catch((error) => console.error('error: ', data)
  ex: setTimeout
    var d = new Promise((resolve, rejct) => {
    setTimeout( () => {
        if (true) {
          resolve('hello')
        } else {
          reject('no bueno')
        }
      }, 2000)
    })
  ex: error in then
    d.then( (data) => .., (error) => )
  ex: chain then, error together
    d.then()
      .error()
  ex: chain multiple then
    d.then(..)
      .then(..)
      .error(..)
generators
  basic
    function* greet() {
      ..
    let greeter = greet()
    # greeter is an object with next() function
    let next = greeter.next()
    console.log(next)
  we need to yield something
    function* greet() {
      yield "hello"
maps and weakmaps
  basic
    var m = new Map()
    m.set("foo", "bar")
    m.set("hello", "world")
    m.get("foo")
  for
    for (var value of m.values())
    for (var key of m.keys())
    for (var [key,value] of m.entries())
  functions and objects as keys
    m.set({}, 'bar')
    m.set(function(){}, 'x')
rest (remaining) parameters vs arguments keyword
  arguments
    function m() {
      console.log(arguments)
    }
    m(1,2,3)
    # object Arguments{0,1,2}
  rest ...
    add: function(category, ...items) 
parameter object destructuring with required values
  basic
    function ajax({
      type = "get",
      ...
      } = {}) {...}
    ajax({})
    # default values
  required parameter
    function required(name) {
      throw new Error(..)
    function ajax({
      url = required("url")
    # if url is not passed, throws error
let keyword

 Tech    24 Nov, 2017

Any work (images, writings, presentations, ideas or whatever) which I own is always provided under
Creative Commons License Creative Commons Attribution-Share Alike 3.0 License

Mert Nuhoglu is a Trabzon-born programmer and data scientist.

You may also like...