No humbug    with ES6

Waiting?

Check your dependencies: Node.js + NPM >= 4.2

Raymond Julin / @nervetattoo

Hello world

Raymond Julin

Technology advisor @ Netlife Research

Long time JS wrestler

Session #1

  1. How to write a function
  2. Kata
  3. ES6 goodiebag
  4. Kata
  5. Questions

Session #2

  1. fetch + Promises
  2. Kata
  3. Assignment
  4. Functional programming
  5. Kata

Setup

git.io/v2Am3

Node.js >= 4.2

How to write a function


a = (a) => (function() { return () => ({a}) }())()

The core of JavaScript

  • Functions are values, just like a string
  • Functions can be passed as arguments
  • Functions can be returned from functions

Constructing a function

function hello (name) {
  console.log('Hello ' + name)
}

var hello2 = function (name) {
  console.log('Hello ' + name)
}

var hello3 = (name) => {
  console.log('Hello ' + name)
}

var hello4 = name => console.log('Hello ' + name)

var h = {
  ello (name) {
    console.log('Hello ' + name)
  }
}

hello('Raymond') // Hello Raymond
hello2('Raymond') // Hello Raymond
hello3('Raymond') // Hello Raymond
hello4('Raymond') // Hello Raymond
h.ello('Raymond') // Hello Raymond

Named vs. unnamed

console.log(hello.name) // hello
console.log(hello2.name) //
console.log(hello3.name) //
console.log(hello4.name) //
console.log(h.ello.name) // ello

Arrow functions

var random = () => {
  var greetings = ['hi', 'hello']
  var index = Math.floor(Math.random() * greetings.length)
  return greetings[index]
}

var greeting = (greeting, name) => greeting + ' ' + name

var speak = message => {
  console.log(message)
}

var scream = message => {
  speak(message.toUpperCase())
}

speak(greeting(random(), 'Raymond'))
scream(greeting(random(), 'Raymond'))
  1. Arrow fn with body & 0 arguments
  2. Arrow fn with multiple arguments & implicit return
  3. Arrow fn with single argument

Regular function

  • Always explicit return
  • Same syntax regardless of arguments
  • Dynamic scope (this)

Arrow function

  • Implicit return unless {}
  • () for 0 or 2+ arguments
  • Lexical scope (this)
var self = this
getJSON(url, function(data) {
  self.update(data)
})
getJSON(url, data => {
  this.update(data)
})

Functions returning functions

function multiply (first, second) {
  return first * second
}

function multiplicatorFunction (factor) {
  return function (num) {
    return multiply(factor, num)
  }
}

// Return function
var byFour = multiplicatorFunction(4)

byFour(4) // 16
byFour(100) // 400

Functions as arguments

function add (first, second) {
  return first + second
}

function arithmetic (factor, operator) {
  return function (num) {
    return operator(factor, num)
  }
}

var byFour = arithmetic(4, multiply)
var addFour = arithmetic(4, add)

byFour(4) // 16
addFour(4) // 8

Kata: Functions

open katas/arrow-functions.js

Classes, template strings, default values and destructuring

class Heading {
  constructor (title, attributes = {}, tagName='h1') {
    this.title = title
    this.attributes = attributes
    this.tagName = tagName
  }

  render () {
    var attrs = this.attributes
    var attributes = Object.keys(attrs)
      .map(key => `${key}="${attrs[key]}"`)
      .reduce((memo, a) => ' ' + memo + a, '')
    return `<${this.tagName}${attributes}>${this.title}</${this.tagName}>`
  }
}

Syntactic sugar

  • Classes are just syntactic sugar
  • No more nitty gritty prototypial inheritance 
class Greeter {
  constructor (greeting) {
    this.greeting = greeting
  }

  speak () {
    console.log(this.greeting + ' world')
  }
}

var greeter = new Greeter('Hi')
greeter.speak()
  • Defines the prototype, thus no properties

Template strings

  • Interpolate any valid expression
  • Write multiline strings without concatanation
var firstName = 'John'
var lastName = 'doe'

var hello = `Hello ${firstName} ${lastName.toUpperCase()}`
// Hello John Doe

var html = `
<html>
  <head>
    <title>Hello ${firstName}</title>
  </head>
</html>`

Template strings

  • Interpolate any valid expression
  • Write multiline strings without concatanation
var firstName = 'John'
var lastName = 'doe'

var hello = `Hello ${firstName} ${lastName.toUpperCase()}`
// Hello John Doe

var html = `
<html>
  <head>
    <title>Hello ${firstName}</title>
  </head>
</html>`

Destructuring

  • Go easily from array/object into multiple variables
// Destructuring
const input = 'Jane Doe:100 dollars'
const [ name, amount ] = input.split(':')

// Also with objects
const config = {
  name: 'Jane Doe',
  amount: '100 dollars',
  nested: {
    name: 'John Doe'
  }
}
const {
  name,
  amount,
  nested: {
    name: name2 // Specify target variable name
  }
} = config
console.log(name, amount, name2);

Destructuring

  • Go easily from array/object into multiple variables
// Destructuring
const input = 'Jane Doe:100 dollars'
const [ name, amount ] = input.split(':')

// Also with objects
const config = {
  name: 'Jane Doe',
  amount: '100 dollars',
  nested: {
    name: 'John Doe'
  }
}
const {
  name,
  amount,
  nested: {
    name: name2 // Specify target variable name
  }
} = config
console.log(name, amount, name2);

Spread + rest

  • Easily deal with variadic functions
  • Variadic => functions handling variable number of arguments
// Spread
const numbers = [1,8,4,5]
const minNumber = Math.min(...numbers)

// Rest
function movieDescription (movie, lead, ...actors) {
  console.log(`${movie} featured ${lead} along with ${actors.join(', ')}`)
}

movieDescription(
  'The Imitation Game',
  'Benedict Cumberbatch',
  'Keira Knightley',
  'Matthew Goode',
  'Rory Kinnear'
)

// Or combined
const support =  [ 'Keira Knightley', 'Matthew Goode', 'Rory Kinnear' ]
movieDescription('The Imitation Game', 'Benedict Cumberbatch', ...support)

No humbug JS with ES6 ES2015

By nervetattoo

Made with Slides.com

No humbug JS with ES6 ES2015

  • 1,122

More from nervetattoo