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