Modern JavaScript 

Types

let b = true;
const n = 1;
let s = "test";
let a = ["x", "y", "z", 5];
let o = {
	a: 1,
	b: 2,
	"c d": 3,
	[s]: 4
};
let x = null;

Truthiness

let a = true;
let b = 5;
let c = 0;
if (a && b) {
    // Will be executed
}

let temp = a && b; // 5
let temp2 = c || b; // 5

Falsy: false, null, undefined, 0, NaN and ""

Functions

let sum = (a, b) => {
    return a + b;
}
sum(2, 2); // 4

let list = [1, 2, 3];
let doubled = list
    .map(element => element * 2);
    // [2, 4, 6]

Classes

class MyClass extends MySuperclass {
    constructor(name = "world") {
        super();
        this.name = name;
    }

    doStuff() {
        return "Hello " + this.name;
    }

    static doOtherStuff() {
    	//...
    }
}

let obj = new MyClass();

Threading

  • Everything is in a single thread

  • Shared with browser rendering

  • (*** queue of callbacks)

  • setTimeout(..., 0); goes to the end

  • Limited support for multi-threading via "Workers"

Prototypal inheritance

  • Almost like classic inheritance...

  • Class definition "prototype" is a shared object

  • (*** Prototype chain)

  • Beware of mutable objects on prototype

  • All prototypes are writable...

Terrible ideas

String.prototype.capitalize = () => {
    return this.charAt(0).toUpperCase() +
        this.substr(1);
}

Object.prototype.toXML = () => {
    // Awesome stuff!
}

Promises

let getMappedData = () => {
    return getDataFromServer()
        .then(data => {
            //...
            return data.map(...);
        })
        .catch(error => {
            //...
        });
}

getMappedData()
    .then(mappedData => {...});

Import/export

let getMappedData = () => {
    return getDataFromServer()
        .then(data => {
            //...
            return data.map(...);
        })
        .catch(error => {
            //...
        });
}

getMappedData()
    .then(mappedData => {...});

Gotchas

let gotcha = ("1" == 1); // true
let sensible = ("1" === 1); // false

let unexpected = parseInt("08"); // 10
let parsed = parseInt("08", 10); // 8

let wat = "abcdefg".substring(3, 2); // "c"
let normal = "abcdefg".substr(3, 2); // "de"

let ugly = () =>
{
    return
    {
        data: "demo"
    }
}

ugly(); // undefined

Gotchas

let gotcha = ("1" == 1); // true
let sensible = ("1" === 1); // false

let unexpected = parseInt("08"); // 10
let parsed = parseInt("08", 10); // 8

let wat = "abcdefg".substring(3, 2); // "c"
let normal = "abcdefg".substr(3, 2); // "de"

let ugly = () =>
{
    return;
    {
        data: "demo"
    }
}

ugly(); // undefined

React

export default class MyComponent extends React.Component {
    render() {
        return (
            <div>
                <p>Hello {this.props.name}</p>
                <OtherComponent type="test"
                                name={this.props.name} />
            </div>
        );
    }
}

Flux

  • Store
    • ​The single source of truth for models
    • Listen for actions
  • View components
    • Listen to stores
    • Visualize models
    • Trigger actions in resposne to interaction
  • Actions to change models
    • Are dispatched to a store

Development

  • Chrome inspector
  • console.log(...);
  • debugger
  • Hot loader
  • How can the new syntax work in old browsers?
  • How do the tests run without a browser?
  • Why doesn't


    work?
  • How do all the files end up in the browser?

Everything You Have

Been Told Is A Lie

import dynamicStuff from "./stuff/" + name;

Questions?

Links

Modern JavaScript

By Bo Gotthardt

Made with Slides.com

Modern JavaScript

  • 674

More from Bo Gotthardt