european computer
manufacturers association

standard 262, revison 9

ECMA-262

ECMAscript

javascript

"11" < "2"

true

still using jquery?

  • http://youmightnotneedjquery.com/
  • https://www.lewagon.com/blog/from-jquery-to-dom-and-es6
  • https://github.com/nefe/You-Dont-Need-jQuery

 

 

Looking back in time, jQuery was created to cope with JavaScript implementation differences between browsers. But time have changed. For the better.

Create a sum-function in es5

  • sumIt(1,2,3,4);
  • sumIt(566,234);
function sumIt() {
    var a = arguments, n = 0;
    for (var i = 0; i < a.length; i++) { n+= a[i]; }
    return n;
}
function sumIt() {
    var a = arguments, i = a.length, n = 0;
    while(i--) { n+= a[i]-0; }
    return n;
}

Create a sum-function in es6+

  • sumIt(1,2,3,4);
  • sumIt(566,234);
function sumIt(...args) {
    return args.reduce((a,b) => a + b, 0);
}
...args = rest/spread

(a,b) => a + b = arrow function

scope

function fn () {
  let x = 0
  if (true) {
    let x = 1 // only inside this `if`
  }
}

for (let i = 0; i < arr.length; i++) { /* ... */ }
 
const MY_PARAM = 1

var globalVar = 1;

promises

new Promise((resolve, reject) => {
  if (ok) { resolve(result) }
  else { reject(error) }
})

promise
  .then((result) => { ··· })
  .catch((error) => { ··· })
  .finally(() => {  }
)

ASYNC / AWAIt

async function run () {
  const user = await getUser()
  const tweets = await getTweets(user)
  return [user, tweets]
}
async function fetchAsync(url) {
  return (await fetch(url)).json();
}


fetchAsync(
  this.settings.api + encodeURIComponent(this.input.value)
).then(data => {
  // Do something with data
}
).catch(err => {
  console.info(err);
})


(async function(url) {
  let data = await (await fetch(url)).json();
  console.log(data);
})

DESTRUCTORING

const [first, last] = ['Nikola', 'Tesla']

[this.locale, this.region] = 
document.documentElement.getAttribute('lang').split('-');

SPREAD

const options = {
  ...defaults,
  visible: true
}
 
// without Object spread
const options = Object.assign(
  {}, defaults,
  { visible: true })

const users = [
  ...admins,
  ...editors,
  'rstacruz'
]
 
//without Array spread
const users = admins
  .concat(editors)
  .concat([ 'rstacruz' ])

// NO DEEP CLONING!

MODULES

import 'helpers'
// aka: require('···')

import Express from 'express'
// aka: const Express = require('···').default || require('···')

import { indent } from 'helpers'
// aka: const indent = require('···').indent

import * as Helpers from 'helpers'
// aka: const Helpers = require('···')

import { indentSpaces as indent } from 'helpers'
// aka: const indent = require('···').indentSpaces

<script type="module">
  import autoSuggest from '/assets/js/autoSuggest.js';
</script>

TEMPLATE literals

const name = "Bob";
const time = "today";

`Hello ${name}, how are you ${time}?`

createDay(day) {
  return day.value ? `
  <td class="${this.settings.classNames.pickerDay}"
    aria-label="${day.disabled ? this.settings.labels.disabled : day.date}"
    data-timestamp="${day.timestamp||0}"
    role="button"
    tabindex="-1">
    <span>${new Intl.NumberFormat(this.settings.dateOutput).format(day.value)}</span>
  </td>` : `<td></td>`;
}

class

github.com/madsstoumann/fe-school

ES6+

By Mads Stoumann

ES6+

For a small workshop on ES6, create ES6 class AutoSuggest

  • 40