Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript: The Magic Parts
Search
Hannes Moser
October 21, 2016
Programming
0
170
JavaScript: The Magic Parts
How do I write JavaScript.
Hannes Moser
October 21, 2016
Tweet
Share
More Decks by Hannes Moser
See All by Hannes Moser
Docker
eliias
0
510
HTTPS Everywhere
eliias
1
320
Digitales Zeitalter
eliias
0
100
The full-stack education paradoxon
eliias
2
130
The FullStack Education Paradox
eliias
1
74
I 💖teaching
eliias
1
140
Other Decks in Programming
See All in Programming
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
Laravel Boost 超入門
fire_arlo
3
220
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
170
RDoc meets YARD
okuramasafumi
4
170
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
Improving my own Ruby thereafter
sisshiki1969
1
160
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Navigating Team Friction
lara
189
15k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Site-Speed That Sticks
csswizardry
10
820
How GitHub (no longer) Works
holman
315
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Thoughts on Productivity
jonyablonski
70
4.8k
Agile that works and the tools we love
rasmusluckow
330
21k
Transcript
JavaScript: The Magic Parts Hannes Moser
–Douglas Crockford If a feature is sometimes useful and sometimes
dangerous and if there is a better option then always use the better option.
–Hannes Moser I am going to use any feature I
am able find within the language!
–Douglas Crockford I made every mistake with JavaScript you could
make.
Libraries
Modules modulecounts.com
npm Modules modulecounts.com
Modules modulecounts.com
npm install pad-left
npm install yolo
npm install swag
choo react, redux & saga lodash yo-yo
∞ Libraries
absurdjs.com
Object Literals
Object Literals const a = 1 const b = 2
const o = { a, b, c() { return 'I am C3PO' } }
Functional Programing
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
Modules
Modules: Export export default { run } export const G
= 9.81
Modules: Import import athlete from 'athlete' import {G} from 'athlete'
const a = athlete.run() / G
Template Strings
Template Strings const foo = 'Hello' const bar = 'World'
console.log(`${foo}, ${bar}!`) // Hello, World!
Tagged Template Strings import html from 'html' const lftCol =
html`<div class="col-sm-6">left</div>` const rgtCol = html`<div class="col-sm-6">right</div>` const dom = html` <div class="container"> <div class="row"> ${lftCol} ${rgtCol} </div> </div> ` document.body.appendChild(dom)
Destructuring
Destructuring const [a, b] = [1, 2, 3] // a
=== 1, b === 2
Destructuring const {a, b} = {a:1, b:2} // a ===
1, b === 2
Destructuring: Fail-soft const [a, b = 2] = [1] //
a === 1, b === 2
Destructuring: Nesting const {op:a, lhs:{op:b}, rhs:c} = ast()
Defaults
Defaults function trim(str, char = ' ') { … }
trim(' lala land ')
Magic Parts
Named Parameters
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)" })
Named Parameters import assign from 'lodash/assign' function (config) { config
= assign({baseurl: '/'}, config) }
Named Parameters function url({baseurl: '/'}) { … } url({})
Named Parameters function url({baseurl: '/'} = {}){ … } url()
// "/"
Class-free Objects
Class-free Objects: Prototypes function Pokemon(name) { this.name = name //
handle ... } Pokemon.prototype.collect = function() { … } const pikachu = new Pokemon("Pikachu")
Class-free Objects: ES2015 Classes class Pokemon { constructor(name) { this.name
= name // handle ... } collect() { … } } const pikachu = new Pokemon("Pikachu")
Class-free Objects: Constructor Function function pokemon({name} = {}) { function
collect() { … } return { collect } } const pikachu = pokemon({name: 'Pokemon'})
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()
Clean Interfaces
Clean Interfaces export default function pokemon() { function collect() {
… } return {collect} } const pikachu = pokemon() pikachu.bad = function() { … } // no problem at all
Clean Interfaces: Freeze export default function pokemon() { function collect()
{ … } return Object.freeze({collect}) } const pikachu = pokemon() pikachu.bad = function() { … } // throws TypeError or fails silently
Ain't No Party Like a Third-Party JavaScript Party
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' })
Malvertising malware.html
Unicode
Unicode const ಠ_ಠ = "uhu" console.log(ಠ_ಠ) // "uhu"
for-of
for-of const a = [1, 2] for([idx, val] of a.entries())
{ console.log(idx, val) }
mandatory parameters
mandatory parameters function mandatory() { throw new Error("Missing Parameter") }
function foo(a = mandatory()) { … } foo() // Error: Missing Parameter foo(1)
mixins
mixins const Validation = Sup => class extends Sup {
validate(schema) { … } } class Person { … } class Employee extends Validation(Person) { … }
that’s not async
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))
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) }) }) }
async/await const file = await open('hannes.json') const result = process(file)
const html = render(result) console.log(html)
Thank You
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