Slide 1

Slide 1 text

JavaScript:
 The Magic Parts Hannes Moser

Slide 2

Slide 2 text

–Douglas Crockford If a feature is sometimes useful and sometimes dangerous and if there is a better option then
 always use the better option.

Slide 3

Slide 3 text

–Hannes Moser I am going to use any feature I am able find within the language!

Slide 4

Slide 4 text

–Douglas Crockford I made every mistake with
 JavaScript you could make.

Slide 5

Slide 5 text

Libraries

Slide 6

Slide 6 text

Modules modulecounts.com

Slide 7

Slide 7 text

npm Modules modulecounts.com

Slide 8

Slide 8 text

Modules modulecounts.com

Slide 9

Slide 9 text

npm install pad-left

Slide 10

Slide 10 text

npm install yolo

Slide 11

Slide 11 text

npm install swag

Slide 12

Slide 12 text

choo react, redux & saga lodash yo-yo

Slide 13

Slide 13 text

∞ Libraries

Slide 14

Slide 14 text

absurdjs.com

Slide 15

Slide 15 text

Object Literals

Slide 16

Slide 16 text

Object Literals const a = 1 const b = 2 const o = { a, b, c() { return 'I am C3PO' } }

Slide 17

Slide 17 text

Functional Programing

Slide 18

Slide 18 text

Arrow Functions const a = [1, 2, 3, 4, 5, 6] const sumOfIncrementByOneAndOddNumbers = a .map(v => v += 1) .filter(v => v % 2 !== 0 ? v : false) .reduce((sum, v) => sum + v, 0) // 15

Slide 19

Slide 19 text

Modules

Slide 20

Slide 20 text

Modules: Export export default { run } export const G = 9.81

Slide 21

Slide 21 text

Modules: Import import athlete from 'athlete' import {G} from 'athlete' const a = athlete.run() / G

Slide 22

Slide 22 text

Template Strings

Slide 23

Slide 23 text

Template Strings const foo = 'Hello' const bar = 'World' console.log(`${foo}, ${bar}!`)
 // Hello, World!

Slide 24

Slide 24 text

Tagged Template Strings import html from 'html' const lftCol = html`
left
` const rgtCol = html`
right
` const dom = html`
${lftCol} ${rgtCol}
` document.body.appendChild(dom)

Slide 25

Slide 25 text

Destructuring

Slide 26

Slide 26 text

Destructuring const [a, b] = [1, 2, 3]
 // a === 1, b === 2

Slide 27

Slide 27 text

Destructuring const {a, b} = {a:1, b:2}
 // a === 1, b === 2

Slide 28

Slide 28 text

Destructuring: Fail-soft const [a, b = 2] = [1]
 // a === 1, b === 2

Slide 29

Slide 29 text

Destructuring: Nesting const {op:a, lhs:{op:b}, rhs:c} = ast()

Slide 30

Slide 30 text

Defaults

Slide 31

Slide 31 text

Defaults function trim(str, char = ' ') { … } trim(' lala land ')

Slide 32

Slide 32 text

Magic Parts

Slide 33

Slide 33 text

Named Parameters

Slide 34

Slide 34 text

Named Parameters function complex(name, priority, user, title) { … } complex(
 „Hannes Moser",
 undefined,
 null,
 „Mag.(FH)„
 ) // I like this more complex({ name: "Hannes Moser",
 title: "Mag.(FH)" })

Slide 35

Slide 35 text

Named Parameters import assign from 'lodash/assign' function (config) { config = assign({baseurl: '/'}, config) }

Slide 36

Slide 36 text

Named Parameters function url({baseurl: '/'}) { … } url({})

Slide 37

Slide 37 text

Named Parameters function url({baseurl: '/'} = {}){ … } url() // "/"

Slide 38

Slide 38 text

Class-free Objects

Slide 39

Slide 39 text

Class-free Objects: Prototypes function Pokemon(name) { this.name = name // handle ... } Pokemon.prototype.collect = function() { … } const pikachu = new Pokemon("Pikachu")

Slide 40

Slide 40 text

Class-free Objects: ES2015 Classes class Pokemon { constructor(name) { this.name = name // handle ... } collect() { … } } const pikachu = new Pokemon("Pikachu")

Slide 41

Slide 41 text

Class-free Objects: Constructor Function function pokemon({name} = {}) { function collect() { … } return { collect } } const pikachu = pokemon({name: 'Pokemon'})

Slide 42

Slide 42 text

Class-free Objects: Parasitic Inheritance import parasite from 'parasite' function pokemon({name} = {}) { const super = parasite({name}) function collect() { … } super.collect = collect return } const pikachu = pokemon({name: ‚Pokemon'}) pikachu.eat() && pikachu.collect()

Slide 43

Slide 43 text

Clean Interfaces

Slide 44

Slide 44 text

Clean Interfaces export default function pokemon() { function collect() { … } return {collect} } const pikachu = pokemon() pikachu.bad = function() { … } // no problem at all

Slide 45

Slide 45 text

Clean Interfaces: Freeze export default function pokemon() { function collect() { … } return Object.freeze({collect}) } const pikachu = pokemon() pikachu.bad = function() { … } // throws TypeError or fails silently

Slide 46

Slide 46 text

Ain't No Party Like a Third-Party JavaScript Party

Slide 47

Slide 47 text

Malwaretising import $ from 'jquery' // your friendly malvertising service const pref = $.post $.post = function(...args) { pref({ url: 'https://example.com' }) return pref.call(null, ...args) } // example $.post({ url: 'https://example.net' })

Slide 48

Slide 48 text

Malvertising malware.html

Slide 49

Slide 49 text

Unicode

Slide 50

Slide 50 text

Unicode const ಠ_ಠ = "uhu" console.log(ಠ_ಠ) // "uhu"

Slide 51

Slide 51 text

for-of

Slide 52

Slide 52 text

for-of const a = [1, 2] for([idx, val] of a.entries()) { console.log(idx, val) }

Slide 53

Slide 53 text

mandatory parameters

Slide 54

Slide 54 text

mandatory parameters function mandatory() { throw new Error("Missing Parameter") } function foo(a = mandatory()) { … } foo() // Error: Missing Parameter
 foo(1)

Slide 55

Slide 55 text

mixins

Slide 56

Slide 56 text

mixins const Validation = Sup => class extends Sup { validate(schema) { … } } class Person { … } class Employee extends Validation(Person) { … }

Slide 57

Slide 57 text

that’s not async

Slide 58

Slide 58 text

that’s not async const file = open('hannes.json') const result = process(file) const html = render(result) html .then(str => console.log(str)) .catch(err => console.error(err))

Slide 59

Slide 59 text

that’s not async function open(file) { return new Promise((resolve, reject) => { fs.readFile(file, (err, data) => { if (err) { return reject(err) } return resolve(data) }) }) }

Slide 60

Slide 60 text

async/await const file = await open('hannes.json') const result = process(file) const html = render(result) console.log(html)

Slide 61

Slide 61 text

Thank You

Slide 62

Slide 62 text

Sources • ECMAScript® 2016 Language Specification • Douglas Crockford: The Better Parts • Axel Rauschmayr: 2ality.com, Exploring ES6 • Rebecca Murphy: Ain't No Party Like a Third-Party JavaScript Party • Snippets: https://github.com/eliias/the-magic-parts