JavaScript: ES6 & Beyond

Dustin Tauer

dustin@easelsolutions.com

@dtauer

https://github.com/dtauer/infotec-2017

https://slides.com/dtauer/infotec2017-javascript

WIFI SSID: Conference Center

WIFI Username: YAHOO

WIFI Password: YAHOO!

- Variables

- Template Literals

- Arrow Functions
- Gather/Spread/Destructuring
- Iterables/Symbols
- Promises
- Async Functions
- Workflow

let & const

var thisWay = "Old School"

let location = "Omaha"

const name = "Dustin"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements

Template Literals

const first = "Hello";
const last = "World";

var oldWay = first + " " + last

var newWay = `${first} ${last}` // Weird back tick `

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Arrow Functions


var doSomething = function(){

}

var doSomethingElse = () => {

}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Spread/Destructuring

//Spread Operator ...
function bunchOfParams(...params){
    //Different than the arguments parameter
}

function twoPlusMore(a, b, ...c){
    //c is an array
}

//Destructuring
var person = {name: "dustin", location:"Minnesota"}
var name = person.name
var {location} = person

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Iterables/Symbols

https://developer.mozilla.org/en-US/docs/Glossary/Symbol

Promises

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

let myFirstPromise = new Promise((resolve, reject) => {
    //do something asynchronous
    resolve() //call resolve when done
});


myFirstPromise
    .then((successMessage) => {
        //result from myFirstPromise
    })
    .then()
    .then()
    .catch(e)

Async Functions

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

async function myFirstAsync() {
    //do something asynchronous
    return "something"
});


await myFirstAsync()
    .then((result) => {
        //result == "something
    })

Workflow: Babel.js

https://babeljs.io/

Compile new syntax (ES6 & ES7) to

ES5 JavaScript (more browser capability)

Resources

Thanks!

Dustin@easelsolutions.com

https://github.com/dtauer/infotec-2017