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
Гармония кода с ECMAScript 6
Search
Андрей Листочкин (Andrey Listochkin)
April 16, 2015
Programming
0
79
Гармония кода с ECMAScript 6
Андрей Листочкин (Andrey Listochkin)
April 16, 2015
Tweet
Share
More Decks by Андрей Листочкин (Andrey Listochkin)
See All by Андрей Листочкин (Andrey Listochkin)
Everybody Stand Back! I Know Regular Expressions
listochkin
0
190
Command-line scripting with Rust. Wait, what?!
listochkin
0
360
Server Memory - BuildStuff Ukraine 2019
listochkin
0
49
Server Memory - Chernivtsi JS 2019
listochkin
1
150
10 Years Later
listochkin
0
370
Managing Managers - DevTalks iHUB
listochkin
0
62
Time, Numbers, Text
listochkin
1
600
Software Licensing: A Minefield Guide
listochkin
0
150
We Make Bots. For Real
listochkin
0
430
Other Decks in Programming
See All in Programming
CSC509 Lecture 03
javiergs
PRO
0
340
AI Agent 時代的開發者生存指南
eddie
2
1.3k
CSC305 Lecture 05
javiergs
PRO
0
220
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
570
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
590
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
オープンソースソフトウェアへの解像度🔬
utam0k
15
2.9k
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Devvox Belgium - Agentic AI Patterns
kdubois
1
120
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
390
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
350
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Leading Effective Engineering Teams in the AI Era
addyosmani
6
440
What's in a price? How to price your products and services
michaelherold
246
12k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Context Engineering - Making Every Token Count
addyosmani
6
260
Embracing the Ebb and Flow
colly
88
4.8k
Into the Great Unknown - MozCon
thekraken
40
2.1k
GitHub's CSS Performance
jonrohan
1032
470k
Bash Introduction
62gerente
615
210k
Transcript
None
None
JavaScript
Mongo, Riak,PostgreSQL Node.js, Nashorn Browsers, Windows, OS X iOS, Android,
Firefox OS Tessel
ECMAScript
1995 JavaScript
1996 ECMA
1999 EcmaScript 3
2008 EcmaScript 4
2009 EcmaScript 5
2015 EcmaScript 6
ES6
EcmaScript 2015
1997 1998 1999 2009 2015
2015 2016 2017 2018 ...
None
None
Ember 2013
transpilers
ES6 => ES5/ES3
compile-to-JS language
GWT CoffeeScript TypeScript ...
Traceur es-next 6to5
None
Not all features can be transpiled
Proxy API
None
ES 2017 ES 2016 Babel ES6
ES.Next
None
Modules Classes Generators Promises Destructuring ...
"Toy" Language
"Real" language
Fixes
f.apply(null, args)
f(...args)
var self = this; getJson('/posts', function (xhr) { self.posts =
xhr.data; });
getJson('/posts', (xhr) => { this.posts = xhr.data; });
function UserService(baseUrl) { this.baseUrl = baseUrl; } UserService.prototype.getUser = function
getUser(id, callback) { ... }; var userService = new UserService('/users');
class UserService { constructor(baseUrl) { this.baseUrl = baseUrl; } getUser
(id, callback) { ... } } let userService = new UserService('/users');
None
define(function (require) { var _ = require('lodash'); var UserService =
require('services').UserService; function UserController() { ... } return UserController; });
import * as _ from 'lodash'; import UserService from 'services';
class UserController { ... } export default UserController;
Symbols Classes Modules
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
iterators generators promises Object.assign
let fibonacci = { [Symbol.iterator]: function* () { let pre
= 0, cur = 1; for (;;) { let temp = pre; pre = cur; cur += temp; yield cur; } } } for (let n of fibonacci) { if (n > 1000) break; console.log(n); }
let fibonacci = { [Symbol.iterator]: function* () { let pre
= 0, cur = 1; for (;;) { let temp = pre; pre = cur; cur += temp; yield cur; } } } for (let n of fibonacci) { if (n > 1000) break; console.log(n); }
let fibonacci = { [Symbol.iterator]: function* () { let pre
= 0, cur = 1; for (;;) { let temp = pre; pre = cur; cur += temp; yield cur; } } } for (let n of fibonacci) { if (n > 1000) break; console.log(n); }
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
Maps, Sets
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
Math.max(...numbers); let set = new Set([12, 45, 12, 7]); let
array = [...set];
ES7 / 2016
Decorators Async Functions Object.observe
Ember React Angular Aurelia iojs
None
frontendua.im github.com/dev-ua