Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript: The Magic Parts

JavaScript: The Magic Parts

How do I write JavaScript.

Hannes Moser

October 21, 2016
Tweet

More Decks by Hannes Moser

Other Decks in Programming

Transcript

  1. JavaScript:

    The Magic Parts
    Hannes Moser

    View Slide

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

    always use the better option.

    View Slide

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

    View Slide

  4. –Douglas Crockford
    I made every mistake with

    JavaScript you could make.

    View Slide

  5. Libraries

    View Slide

  6. Modules modulecounts.com

    View Slide

  7. npm Modules modulecounts.com

    View Slide

  8. Modules modulecounts.com

    View Slide

  9. npm install pad-left

    View Slide

  10. npm install yolo

    View Slide

  11. npm install swag

    View Slide

  12. choo
    react, redux &
    saga
    lodash
    yo-yo

    View Slide


  13. Libraries

    View Slide

  14. absurdjs.com

    View Slide

  15. Object Literals

    View Slide

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

    View Slide

  17. Functional
    Programing

    View Slide

  18. 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

    View Slide

  19. Modules

    View Slide

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

    View Slide

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

    View Slide

  22. Template Strings

    View Slide

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

    // Hello, World!

    View Slide

  24. Tagged Template Strings
    import html from 'html'
    const lftCol = html`left`
    const rgtCol = html`right`
    const dom = html`


    ${lftCol}
    ${rgtCol}


    `
    document.body.appendChild(dom)

    View Slide

  25. Destructuring

    View Slide

  26. Destructuring
    const [a, b] = [1, 2, 3]

    // a === 1, b === 2

    View Slide

  27. Destructuring
    const {a, b} = {a:1, b:2}

    // a === 1, b === 2

    View Slide

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

    // a === 1, b === 2

    View Slide

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

    View Slide

  30. Defaults

    View Slide

  31. Defaults
    function trim(str, char = ' ')
    {

    }
    trim(' lala land ')

    View Slide

  32. Magic Parts

    View Slide

  33. Named Parameters

    View Slide

  34. 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)"
    })

    View Slide

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

    View Slide

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

    }
    url({})

    View Slide

  37. Named Parameters
    function url({baseurl: '/'} = {}){

    }
    url() // "/"

    View Slide

  38. Class-free Objects

    View Slide

  39. Class-free Objects: Prototypes
    function Pokemon(name) {
    this.name = name
    // handle ...
    }
    Pokemon.prototype.collect = function() {

    }
    const pikachu = new Pokemon("Pikachu")

    View Slide

  40. Class-free Objects: ES2015 Classes
    class Pokemon {
    constructor(name) {
    this.name = name
    // handle ...
    }
    collect() {

    }
    }
    const pikachu = new Pokemon("Pikachu")

    View Slide

  41. Class-free Objects: Constructor Function
    function pokemon({name} = {}) {
    function collect() {

    }
    return {
    collect
    }
    }
    const pikachu = pokemon({name: 'Pokemon'})

    View Slide

  42. 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()

    View Slide

  43. Clean Interfaces

    View Slide

  44. Clean Interfaces
    export default function pokemon() {
    function collect() {

    }
    return {collect}
    }
    const pikachu = pokemon()
    pikachu.bad = function() {

    }
    // no problem at all

    View Slide

  45. Clean Interfaces: Freeze
    export default function pokemon() {
    function collect() {

    }
    return Object.freeze({collect})
    }
    const pikachu = pokemon()
    pikachu.bad = function() {

    }
    // throws TypeError or fails silently

    View Slide

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

    View Slide

  47. 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'
    })

    View Slide

  48. Malvertising malware.html

    View Slide

  49. Unicode

    View Slide

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

    View Slide

  51. for-of

    View Slide

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

    View Slide

  53. mandatory
    parameters

    View Slide

  54. mandatory parameters
    function mandatory() {
    throw new Error("Missing Parameter")
    }
    function foo(a = mandatory()) {

    }
    foo() // Error: Missing Parameter

    foo(1)

    View Slide

  55. mixins

    View Slide

  56. mixins
    const Validation = Sup => class extends Sup {
    validate(schema) {

    }
    }
    class Person {

    }
    class Employee extends Validation(Person) {

    }

    View Slide

  57. that’s not async

    View Slide

  58. 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))

    View Slide

  59. 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)
    })
    })
    }

    View Slide

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

    View Slide

  61. Thank You

    View Slide

  62. 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

    View Slide