41 | This page runs a series of a examples using arrow functions in ECMAScript 42 | 6 using 43 | Babel transpilation. 44 | Open up your debugging console to view the output. 45 |
46 | 47 |48 | For more information on how arrow functions work and their level of 49 | support, check out the 50 | Arrow Functions 55 | blog post that is part of the 56 | Learning ES6 59 | blog series. 60 |
61 | 62 |63 | Source code 67 | | Native example | 68 | Traceur example | 69 | Index of examples 70 |
71 | 72 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /examples/arrow-functions-native.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using arrow functions in ECMAScript 42 | 6 without any transpilation. This means your browser must support ES6 43 | arrow functions in order to successfully run the code. Open up your 44 | debugging console to view the output. 45 |
46 | 47 |48 | Browser support: 51 | Chrome, Firefox & Edge 52 |
53 | 54 |55 | For more information on how arrow functions work and their level of 56 | support, check out the 57 | Arrow Functions 62 | article that is part of the 63 | Learning ES6 66 | series. 67 |
68 | 69 |70 | Source code 74 | | Babel example | 75 | Traceur example | 76 | Index of examples 77 |
78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /examples/arrow-functions-traceur.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using arrow functions in ECMAScript 42 | 6 using 43 | Traceur 46 | transpilation. Open up your debugging console to view the output. 47 |
48 | 49 |50 | For more information on how arrow functions work and their level of 51 | support, check out the 52 | Arrow Functions 57 | blog post that is part of the 58 | Learning ES6 61 | blog series. 62 |
63 | 64 |65 | Source code 69 | | Native example | 70 | Babel example | 71 | Index of examples 72 |
73 | 74 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /examples/block-scoping-babel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |let and const (Babel)
40 |
43 | This page runs a series of a examples using block-level scoping with
44 | let and const in ECMAScript 6 using
45 | Babel transpilation.
46 | Open up your debugging console to view the output.
47 |
50 | For more information on how block scoping works and its level of support,
51 | check out the
52 | Block-level scoping with let and const
57 | article that is part of the
58 | Learning ES6
61 | series.
62 |
65 | Source code 69 | | Native example | 70 | Traceur example | 71 | Index of examples 72 |
73 | 74 | 75 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /examples/block-scoping-native.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |let and const (Native)
42 |
45 | This page runs a series of a examples using block-level scoping with
46 | let and const in ECMAScript 6 without any
47 | transpilation. This means your browser must support ES6
48 | let and const in order to successfully run the
49 | code. Open up your debugging console to view the output.
50 |
53 | Browser support: 56 | Chrome, Firefox & Edge 57 |
58 | 59 |
60 | For more information on how block scoping works and its level of support,
61 | check out the
62 | Block-level scoping with let and const
67 | article that is part of the
68 | Learning ES6
71 | series.
72 |
75 | Source code 79 | | Babel example | 80 | Traceur example | 81 | Index of examples 82 |
83 | 84 | 85 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /examples/block-scoping-traceur.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |let and const (Traceur)
42 |
45 | This page runs a series of a examples using block-level scoping with
46 | let and const in ECMAScript 6 using
47 | Traceur
50 | transpilation. Open up your debugging console to view the output.
51 |
54 | For more information on how arrow functions work and their level of
55 | support, check out the
56 | Block-level scoping with let and const
61 | article that is part of the
62 | Learning ES6
65 | series.
66 |
69 | Source code 73 | | Native example | 74 | Babel example | 75 | Index of examples 76 |
77 | 78 | 79 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /examples/classes-babel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using classes in ECMAScript 6 using 42 | Babel transpilation. 43 | Open up your debugging console to view the output. 44 |
45 | 46 |47 | For more information on how classes and their level of support, check out 48 | the 49 | Classes 54 | article that is part of the 55 | Learning ES6 58 | series. 59 |
60 | 61 |62 | Source code 66 | | Native example | 67 | Traceur example | 68 | Index of examples 69 |
70 | 71 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /examples/classes-native.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using classes in ECMAScript 6 42 | without any transpilation. This means your browser must support ES6 class 43 | syntax in order to successfully run the code. Open up your debugging 44 | console to view the output. 45 |
46 | 47 |48 | Browser support: 51 | All JavaScript engines except for Firefox 52 |
53 | 54 |55 | For more information on how classes work and their level of support, check 56 | out the 57 | Classes 62 | article that is part of the 63 | Learning ES6 66 | series. 67 |
68 | 69 |70 | Source code 74 | | Babel example | 75 | Traceur example | 76 | Index of examples 77 |
78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /examples/classes-traceur.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using classes in ECMAScript 6 using 42 | Traceur 45 | transpilation. Open up your debugging console to view the output. 46 |
47 | 48 |49 | For more information on how classes work and its level of support, check 50 | out the 51 | Classes 56 | article that is part of the 57 | Learning ES6 60 | series. 61 |
62 | 63 |64 | Source code 68 | | Native example | 69 | Babel example | 70 | Index of examples 71 |
72 | 73 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /examples/destructuring-babel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using destructuring in ECMAScript 6 42 | using 43 | Babel transpilation. 44 | Open up your debugging console to view the output. 45 |
46 | 47 |48 | For more information on how destructuring works and its level of support, 49 | check out the 50 | Destructuring 55 | article that is part of the 56 | Learning ES6 59 | series. 60 |
61 | 62 |63 | Source code 67 | | Native example | 68 | Traceur example | 69 | Index of examples 70 |
71 | 72 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /examples/destructuring-native.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using destructuring in ECMAScript 6 42 | without any transpilation. This means your browser must support ES6 43 | destructuring syntax in order to successfully run the code. Open up your 44 | debugging console to view the output. 45 |
46 | 47 |48 | Browser support: 51 | Firefox & Safari 52 |
53 | 54 |55 | For more information on how destructuring works and its level of support, 56 | check out the 57 | Destructuring 62 | article that is part of the 63 | Learning ES6 66 | series. 67 |
68 | 69 |70 | Source code 74 | | Babel example | 75 | Traceur example | 76 | Index of examples 77 |
78 | 79 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /examples/destructuring-traceur.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using destructuring in ECMAScript 6 42 | using 43 | Traceur 46 | transpilation. Open up your debugging console to view the output. 47 |
48 | 49 |50 | For more information on how destructuring works and its level of support, 51 | check out the 52 | Destructuring 57 | article that is part of the 58 | Learning ES6 61 | series. 62 |
63 | 64 |65 | Source code 69 | | Native example | 70 | Babel example | 71 | Index of examples 72 |
73 | 74 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /examples/enhanced-object-literals-babel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using enhanced object literals in 42 | ECMAScript 6 using 43 | Babel transpilation. 44 | Open up your debugging console to view the output. 45 |
46 | 47 |48 | For more information on how enhanced object literals work and their level 49 | of support, check out the 50 | Enhanced object literals 55 | article that is part of the 56 | Learning ES6 59 | series. 60 |
61 | 62 |63 | Source code 67 | | Native example | 68 | Traceur example | 69 | Index of examples 70 |
71 | 72 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /examples/enhanced-object-literals-native.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using enhanced object literals in 42 | ECMAScript 6 without any transpilation. This means your browser must 43 | support ES6 enhanced object literal syntax in order to successfully run 44 | the code. Open up your debugging console to view the output. 45 |
46 | 47 |48 | Browser support: 51 | Edge, Chrome, Opera, Firefox & Safari 52 |
53 | 54 |55 | For more information on how enhanced object literals work and their level 56 | of support, check out the 57 | Enhanced object literals 62 | article that is part of the 63 | Learning ES6 66 | series. 67 |
68 | 69 |70 | Source code 74 | | Babel example | 75 | Traceur example | 76 | Index of examples 77 |
78 | 79 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /examples/enhanced-object-literals-traceur.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using enhanced object literals in 42 | ECMAScript 6 using 43 | Traceur 46 | transpilation. Open up your debugging console to view the output. 47 |
48 | 49 |50 | For more information on how enhanced object literals work and its level of 51 | support, check out the 52 | Enhanced object literals 57 | article that is part of the 58 | Learning ES6 61 | series. 62 |
63 | 64 |65 | Source code 69 | | Native example | 70 | Babel example | 71 | Index of examples 72 |
73 | 74 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /examples/es6/arrow-functions.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | 'use strict'; 3 | 4 | // create wrapper arrow function expression of console.log 5 | var log = message => console.log(message); 6 | 7 | log('Testing out arrow functions!'); 8 | 9 | // instead of specifying a traditional anonymous function 10 | // expression to map we can use an arrow function 11 | log([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(value => value * value)); 12 | 13 | // arrow functions are function expressions and can be 14 | // assigned to variables 15 | var descendingSortFunc = (a, b) => b - a, 16 | values = [2, 7, 5, 6], 17 | sortedValues = values.sort(descendingSortFunc); 18 | 19 | log(values); 20 | log(sortedValues); 21 | 22 | // SYNTAX GOTCHA: objects my be wrapped in parenthesis 23 | 24 | // returns an array of undefined values because the 25 | // {} is interpreted as an empty code block that returns 26 | // nothing 27 | log([4, 6, 2].map(x => {})); 28 | 29 | // also returns an array of undefined values because the 30 | // {foo: x} is interpreted as a code block with the label 31 | // foo: that has an expression x that is NOT returned 32 | log([4, 5, 1].map(x => {foo: x})); 33 | 34 | // successfully returns an array of empty objects 35 | log([4, 5, 1].map(x => ({}))); 36 | 37 | // successfully returns an object with "foo" as key 38 | // and number as value 39 | log([4, 5, 1].map(x => ({foo: x}))); 40 | 41 | // Immediately-invoked arrow functions work too! 42 | // Just be sure to put the parenthesis around the 43 | // arrow function expression and not around the whole thing 44 | (message => { 45 | for (var charNo = 0; charNo < message.length; charNo++) { 46 | log(message.charAt(charNo)); 47 | } 48 | }) ('hello'); 49 | 50 | // Arrow functions use lexical scoping for *this*, so it 51 | // can be referenced like you would expect within anonymous 52 | // functions 53 | var car = { 54 | speed: 0, 55 | accelerate: function() { 56 | this.accelerator = setInterval( 57 | () => { 58 | // *this* is the same as it is outside 59 | // of the arrow function! 60 | this.speed++; 61 | log(this.speed); 62 | }, 63 | 100 64 | ); 65 | }, 66 | cruise: function() { 67 | clearInterval(this.accelerator); 68 | log('cruising at ' + this.speed + ' mph'); 69 | } 70 | }; 71 | 72 | car.accelerate(); 73 | 74 | setTimeout( 75 | () => car.cruise(), 76 | 5000 77 | ); 78 | 79 | // Arrow functions are identified as functions 80 | log(typeof function() { }); // 'function' 81 | log(typeof (() => {})); // 'function' 82 | log(function() { } instanceof Function); // true 83 | log((() => {}) instanceof Function); // true 84 | 85 | 86 | function generateArrowFunctionReturningLexicalArguments() { 87 | // returns an arrow function expression 88 | // which itself returns the arguments used 89 | // when generating the arrow function 90 | return () => arguments; 91 | } 92 | 93 | var arrowFunction = generateArrowFunctionReturningLexicalArguments(5, 'foo', [5,4,3]); 94 | 95 | // log arguments object with 96 | // 5, 'foo', and [5,4,3] 97 | log(arrowFunction()); 98 | }) (); 99 | -------------------------------------------------------------------------------- /examples/es6/classes.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | { // class declarations 5 | class InheritanceError extends Error { } 6 | 7 | // Define base Note class 8 | class Note { 9 | constructor(id, content, owner) { 10 | // make `Note` an abstract base class 11 | if (new.target === Note) { 12 | throw new InheritanceError('Note cannot be directly constructed.') 13 | } 14 | 15 | this._id = id; 16 | this._content = content; 17 | this._owner = owner; 18 | } 19 | 20 | static add(...properties) { 21 | // `this` will be the class on which `add()` was called 22 | // increment counter 23 | ++this._idCounter; 24 | 25 | let id = `note${this._idCounter}`; 26 | 27 | // construct a new instance of the note passing in the 28 | // arguments after the ID. This is so subclasses can 29 | // get all of the arguments needed 30 | let note = new this(id, ...properties); 31 | 32 | // add note to the lookup by ID 33 | this._noteLookup[id] = note; 34 | 35 | return note; 36 | } 37 | 38 | static get(id) { 39 | return this._noteLookup[id]; 40 | } 41 | 42 | // read-only 43 | get id() { return this._id; } 44 | 45 | get content() { return this._content; } 46 | set content(value) { this._content = value; } 47 | 48 | get owner() { return this._owner; } 49 | set owner(value) { this._owner = value; } 50 | 51 | toString() { 52 | return `ID: ${this._id} 53 | Content: ${this._content} 54 | Owner: ${this._owner}`; 55 | } 56 | } 57 | 58 | // Static "private" properties (not yet supported in class syntax) 59 | Note._idCounter = -1; 60 | Note._noteLookup = {}; 61 | 62 | class ColorNote extends Note { 63 | constructor(id, content, owner, color='#ff0000') { 64 | // super constructor must be called first! 65 | super(id, content, owner); 66 | this._color = color; 67 | } 68 | 69 | get color() { return this._color; } 70 | set color(value) { this._color = value; } 71 | 72 | toString() { // computed method names are supported 73 | // Override `toString()`, but call parent/super version 74 | // first 75 | return `${super.toString()} 76 | Color: ${this._color}`; 77 | } 78 | } 79 | 80 | // `add` factory method is defined on `Note`, but accessible 81 | // on ColorNote subclass 82 | let colorNote = ColorNote.add('My note', 'benmvp', '#0000ff'); 83 | 84 | // output: ID: note0 85 | // Content: My Note 86 | // Owner: benmvp 87 | // Color: #0000ff 88 | console.log(`${colorNote}`); 89 | 90 | // output: true 91 | console.log(Note.get('note0') === colorNote); 92 | 93 | try { 94 | new Note(72, 'Vanilla note', 'benmvp'); 95 | } 96 | catch (e) { 97 | // output: true 98 | console.log(e instanceof InheritanceError); 99 | } 100 | }; 101 | 102 | { // class expressions 103 | // A class expression 104 | const Note = class { 105 | constructor(id, content, owner) { 106 | this.id = id; 107 | this.content = content; 108 | this.owner = owner; 109 | } 110 | }; 111 | 112 | // A immediately-invoked class expression, creating a one-off singleton 113 | let noteSingleton = new (class { 114 | constructor(id, content, owner) { 115 | this.id = id; 116 | this.content = content; 117 | this.owner = owner; 118 | } 119 | }) (0, 'some content', 'benmvp'); 120 | console.log(noteSingleton); 121 | 122 | // a class declaration inheriting from a class expression 123 | class ColorNote extends (class { 124 | constructor(id, content, owner) { 125 | this.id = id; 126 | this.content = content; 127 | this.owner = owner; 128 | } 129 | }) { 130 | constructor(id, content, owner, color='#ff0000') { 131 | // super constructor must be called first! 132 | super(id, content, owner); 133 | this.color = color; 134 | } 135 | } 136 | } 137 | }) (); 138 | -------------------------------------------------------------------------------- /examples/es6/destructuring.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | { 5 | // object pattern matching 6 | let {lName, fName} = {fName: 'John', age: 15, lName: 'Doe'}; 7 | 8 | // array pattern matching 9 | let [first, second, third] = [8, 4, 100, -5, 20]; 10 | 11 | // output: Doe, John 12 | console.log(lName + ', '+ fName); 13 | 14 | // output: 100, 4, 8 15 | console.log(third, second, first); 16 | }; 17 | 18 | { 19 | let config = {delay: 500, title: 'Hi!', info: {name: 'Elijah'}}, 20 | 21 | // full & shorthand syntax can be mixed 22 | // `delay` uses shorthand syntax 23 | {info: {name: one}, delay, empty: three, title: four} = config; 24 | 25 | // output: 'Elijah', 500, undefined, 'Hi!' 26 | // missing properties have `undefined` value 27 | console.log(one, delay, three, four); 28 | }; 29 | 30 | { 31 | const bKey = 'b'; 32 | 33 | /*** computed values work too! ***/ 34 | let {[bKey]: b, a, c} = {a: 1, b: 2, c: 3}; 35 | 36 | // outputs: 1, 2, 3 37 | console.log(a, b, c); 38 | 39 | 40 | /*** destructuring works w/o variable declarations ***/ 41 | b = {}; 42 | ( {a, b: b.count} = {a: 1, b: 2} ); 43 | 44 | // output: 1, {count: 2} 45 | console.log(a, b); 46 | }; 47 | 48 | { 49 | // nested array literal pattern syntax 50 | let myArray = [1, ['hello'], true], 51 | [first, [secondNest], third] = myArray; 52 | 53 | // output: 1, 'hello', true 54 | console.log(first, secondNest, third); 55 | }; 56 | 57 | { 58 | // skipping indices in array literal pattern 59 | let sequence = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34], 60 | [first, , third, fourth, , , seventh] = sequence 61 | ; 62 | 63 | // output: 0, 1, 2, 8 64 | console.log(first, third, fourth, seventh); 65 | }; 66 | 67 | { 68 | let json = { 69 | shapes: ['circle', 'square', 'triangle'], 70 | colors: 5, 71 | fill: true, 72 | author: { 73 | firstName: 'Ben', 74 | lastName: 'Ilegbodu', 75 | city: 'Pittsburg' 76 | } 77 | }, 78 | { 79 | fill, 80 | author: {lastName, firstName, city}, 81 | shapes: [, secondShape], 82 | colors: numColors 83 | } = json; 84 | 85 | // output: true, square, 5 86 | console.log(fill, secondShape, numColors); 87 | // output: Ilegbodu, Ben, Pittsburg 88 | console.log(lastName, firstName, city); 89 | }; 90 | 91 | { 92 | // using array destructuring to swap 2 variables 93 | let a = 1, 94 | b = 2; 95 | 96 | [b, a] = [a, b]; 97 | 98 | // output: 2, 1 99 | console.log(a, b); 100 | }; 101 | 102 | { 103 | // destructuring class objects 104 | let { 105 | protocol: scheme, 106 | host: domain, 107 | pathname: path, 108 | search: query, 109 | hash, 110 | href: url 111 | } = location; 112 | 113 | // output: true 114 | console.log( 115 | (scheme + '//' + domain + path + query + hash) == url 116 | ); 117 | }; 118 | 119 | { 120 | // destructuring return values 121 | let [, areaCode, exchange, lineNumber] = 122 | /^(\d\d\d)-(\d\d\d)-(\d\d\d\d)$/ 123 | .exec('650-555-1234'); 124 | 125 | // output: 650, 555, 1234 126 | console.log(areaCode, exchange, lineNumber); 127 | }; 128 | 129 | { 130 | // function w/ multiple return values & destructuring 131 | 132 | const find = function(list, token) { 133 | for (let i = 0; i < list.length; i++) { 134 | if (list[i].indexOf(token) > -1) 135 | return {index: i, val: list[i]}; 136 | } 137 | 138 | // match not found 139 | return {index: -1, val: undefined}; 140 | }; 141 | let fruits = ['apple', 'grape', 'peach', 'pear'], 142 | {index, val} = find(fruits, 'ape'); 143 | console.log(index, val); 144 | }; 145 | }) (); 146 | -------------------------------------------------------------------------------- /examples/es6/enhanced-object-literals.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | function getCar(make, model, value) { 5 | let valueKey = 'value', 6 | appreciateKey = 'appreciate'; 7 | 8 | return { 9 | // with property value shorthand 10 | // syntax, you can omit the property 11 | // value if key matches variable 12 | // name 13 | make, // same as make: make 14 | model, // same as model: model 15 | 16 | _value: value, 17 | 18 | // computed property keys now work with 19 | // object literals 20 | ['make' + make]: true, 21 | 22 | // Method definition shorthand syntax 23 | // omits `function` keyword & colon 24 | depreciate() { 25 | this.value -= 2500; 26 | }, 27 | 28 | // computed property keys also work 29 | // withe method definition shorthand 30 | [appreciateKey]() { 31 | this.value += 1000; 32 | }, 33 | 34 | // ES5 property accessors still work 35 | // the same 36 | get value() { 37 | return this._value; 38 | }, 39 | 40 | // computed property keys also work 41 | // with property accessors 42 | set [valueKey](value) { 43 | if (value < 0) 44 | throw new Error('invalid value'); 45 | 46 | this._value = value; 47 | } 48 | }; 49 | } 50 | 51 | let car = getCar('Kia', 'Sorento', 40000); 52 | 53 | // output: { 54 | // make: 'Kia', 55 | // model:'Sorento', 56 | // _value: 40000, 57 | // makeKia: true, 58 | // depreciate: function(), 59 | // value: Getter 60 | // } 61 | console.log(car); 62 | 63 | car.depreciate(); 64 | car.appreciate(); 65 | 66 | // output: 38500 67 | console.log(car.value); 68 | }) (); 69 | -------------------------------------------------------------------------------- /examples/es6/iterators-iterables.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | function isIterable(obj) { 5 | return obj && typeof obj[Symbol.iterator] === 'function'; 6 | } 7 | 8 | function take(iterable, count) { 9 | // get default `@@iterator` from original iterable 10 | let iterator = iterable[Symbol.iterator](); 11 | 12 | // return new (anonymous) iterable 13 | return { 14 | next() { 15 | // implementing `next()` makes it an iterator 16 | 17 | if (count > 0) { 18 | // if there are items remaining, return the next 19 | // one from the iterable 20 | count--; 21 | 22 | 23 | // return the value from original iterable's iterator. 24 | // if there are less values in it than `count`, this 25 | // will just return `{done: true}` early! 26 | return iterator.next(); 27 | } 28 | else { 29 | // otherwise just say we're done 30 | return {done: true}; 31 | } 32 | }, 33 | [Symbol.iterator]() { 34 | // implementing default `@@iterator` makes it an iterable 35 | return this; 36 | } 37 | }; 38 | } 39 | 40 | let values = ['alpha', 'beta', 'charlie']; 41 | let defaultIterator = values[Symbol.iterator](); 42 | 43 | // output: {value: 'alpha', done: false} 44 | console.log(defaultIterator.next()); 45 | 46 | // output: {value: 'beta', done: false} 47 | console.log(defaultIterator.next()); 48 | 49 | // output: {value: 'charlie', done: false} 50 | console.log(defaultIterator.next()); 51 | 52 | // output: {value: undefined, done: true} 53 | console.log(defaultIterator.next()); 54 | 55 | // output: true 56 | console.log(isIterable(values)); 57 | 58 | // output: true 59 | console.log(isIterable('Ben')); 60 | 61 | // output: true 62 | console.log(isIterable(new Set())); 63 | 64 | class MyIterator { 65 | constructor() { 66 | this.step = 0; 67 | } 68 | [Symbol.iterator]() { 69 | return this; 70 | } 71 | next() { 72 | this.step++; 73 | 74 | if (this.step === 1) 75 | return {value: 'Ben'}; 76 | else if (this.step == 2) 77 | return {value: 'Ilegbodu'}; 78 | 79 | return {done: true}; 80 | } 81 | } 82 | 83 | let iter = new MyIterator(); 84 | 85 | // output: {value: 'Ben'} 86 | console.log(iter.next()); 87 | 88 | // output: {value: 'Ilegbodu'} 89 | console.log(iter.next()); 90 | 91 | // output: {done: true} 92 | console.log(iter.next()); 93 | 94 | // output: {done: true} 95 | console.log(iter.next()); 96 | 97 | let myIter2 = new MyIterator(); 98 | 99 | for (let item of myIter2) { 100 | console.log(item); 101 | } 102 | 103 | let fibonacci = { 104 | [Symbol.iterator]() { 105 | let previous = 0, current = 1; 106 | return { 107 | next() { 108 | [previous, current] = [current, previous + current]; 109 | return {value: current}; 110 | } 111 | } 112 | } 113 | } 114 | 115 | // iterables with `for-of` loop 116 | for (var number of fibonacci) { 117 | // stop after the number is greater than 1000 118 | if (number > 1000) 119 | break; 120 | 121 | console.log(number); 122 | } 123 | 124 | // iterables w/ destructuring 125 | let [, secondFib, , fourthFib] = fibonacci; 126 | 127 | // output: 2, 5 128 | console.log(secondFib, fourthFib); 129 | 130 | // output: [1, 2, 3, 5, 8, 13] 131 | console.log(Array.from(take(fibonacci, 6))); 132 | }) (); 133 | -------------------------------------------------------------------------------- /examples/es6/new-collections.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | class Player { 5 | constructor(name) { 6 | this.name = name; 7 | } 8 | } 9 | 10 | { // Map 11 | let steph = new Player('Stephen Curry'); 12 | let kobe = new Player('Kobe Bryant'); 13 | let lebron = new Player('LeBron James'); 14 | let allStarVotes = new Map(); 15 | 16 | allStarVotes.set(steph, 50) 17 | .set(kobe, 0) 18 | .set(lebron, 22); 19 | 20 | // make a clone of allstarVotes 21 | let allStarVotesCopy = new Map(allStarVotes); 22 | 23 | // output: 50 24 | console.log(allStarVotes.get(steph)); 25 | 26 | // output: false 27 | console.log(allStarVotes.has('Kevin Durant')); 28 | 29 | allStarVotes.delete(kobe); 30 | 31 | // output: 2 32 | console.log(allStarVotes.size); 33 | 34 | allStarVotes.clear(); 35 | 36 | // output: 2 37 | console.log(allStarVotes.size); 38 | 39 | // log each player name since player 40 | // is a key in the map 41 | for (let player of allStarVotesCopy.keys()) { 42 | console.log(player.name); 43 | } 44 | 45 | // log each all star vote count since 46 | // count is a value in the map 47 | for (let count of allStarVotesCopy.values()) { 48 | console.log(count); 49 | } 50 | 51 | // log each player name and his votes count 52 | // Uses array destructuring to assign [key, value] 53 | // pair into separate variables' 54 | for (let [player, count] of allStarVotesCopy.entries()) { 55 | console.log(`${player.name} (${count})`); 56 | } 57 | 58 | // log each player name and his votes count 59 | // together. Ex: 'Stephen Curry (50) 60 | // Uses array destructuring to assign [key, value] 61 | // pair into separate variables 62 | for (let [player, count] of allStarVotes) { 63 | console.log(`${player.name} (${count})`); 64 | } 65 | 66 | // functional verion of calling `.entries()` 67 | // `map` is a reference to `allStarVotes` 68 | allStarVotesCopy.forEach((count, player, map) => { 69 | console.log(`${player.name} (${count})`); 70 | console.log(map === allStarVotesCopy); 71 | }); 72 | 73 | let durant = new Player('Kevin Durant'); 74 | let cp3 = new Player('Chris Paul'); 75 | let theBrow = new Player('Anthony Davis'); 76 | 77 | let russell = new Player('Russell Westbrook'); 78 | let carmelo = new Player('Carmelo Anthony'); 79 | 80 | let moreAllStarVotes = new Map([ 81 | [durant, 20], 82 | [cp3, 5], 83 | [theBrow, 10] 84 | ]); 85 | let rawData = [ 86 | [russell, 12], 87 | [carmelo, 15] 88 | ]; 89 | 90 | let mergedMap = new Map([...allStarVotesCopy, ...moreAllStarVotes, ...rawData]); 91 | 92 | console.log(mergedMap); 93 | } 94 | 95 | { // WeakMap 96 | let steph = new Player('Stephen Curry'); 97 | let kobe = new Player('Kobe Bryant'); 98 | let lebron = new Player('LeBron James'); 99 | let allStarVotesWeak = new WeakMap(); 100 | 101 | allStarVotesWeak.set(steph, 50) 102 | .set(kobe, 0) 103 | .set(lebron, 22); 104 | 105 | // output: 50 106 | console.log(allStarVotesWeak.get(steph)); 107 | 108 | // output: false 109 | console.log(allStarVotesWeak.has('Kevin Durant')); 110 | 111 | allStarVotesWeak.delete(kobe); 112 | 113 | // set up metadata click map 114 | let clickMap = new WeakMap(); 115 | 116 | // on each click, add the div to the map 117 | // (with initial click) or increment its 118 | // click count 119 | $('p').click(function() { 120 | let pNode = this; 121 | let clicks = clickMap.get(pNode); 122 | 123 | if (!clicks) { 124 | clicks = 0; 125 | } 126 | 127 | clicks.set(pNode, ++clicks); 128 | }); 129 | } 130 | 131 | { // Set 132 | function union(setA, setB) { 133 | return new Set([...setA, ...setB]); 134 | } 135 | function intersection(setA, setB) { 136 | return new Set([...setA].filter(item => setB.has(item))); 137 | } 138 | 139 | function difference(setA, setB) { 140 | return new Set([...setA].filter(item => !setB.has(item))); 141 | } 142 | 143 | let steph = new Player('Stephen Curry'); 144 | let kobe = new Player('Kobe Bryant'); 145 | let lebron = new Player('LeBron James'); 146 | 147 | let allStars = new Set(); 148 | 149 | allStars.add(steph) 150 | .add(kobe) 151 | .add(steph) // duplicates are removed 152 | .add(lebron); 153 | 154 | // create a clone by passing set as constructor of another 155 | let allStarsClone = new Set(allStars); 156 | 157 | // output: false 158 | console.log(allStars.has('Kevin Durant')); 159 | 160 | // output: true 161 | console.log(allStars.has(kobe)); 162 | 163 | allStars.delete(kobe); 164 | 165 | // output: 2 166 | console.log(allStars.size); 167 | 168 | allStars.clear(); 169 | 170 | // output: 2 171 | console.log(allStars.size); 172 | 173 | // easily iterate over a set using `for-of` 174 | for (let allStar in allStarsClone) { 175 | console.log(allStar.name); 176 | } 177 | 178 | // can also iterate using `.forEach()` 179 | allStarsClone.forEach((value, key, setRef) => { 180 | console.log(value.name); 181 | 182 | // In a set the value & key are the same 183 | console.log(value === key); 184 | 185 | // The third parameter is a reference to the 186 | // instance 187 | console.log(setRef === allStarsClone); 188 | }); 189 | 190 | let setUnion = union( 191 | new Set(['a', 'b', 'c', 'd']), 192 | new Set(['d', 'e', 'f', 'g']) 193 | ); 194 | 195 | // output: 8 196 | console.log(setUnion.size); 197 | 198 | let setIntersection = intersection( 199 | new Set(['a', 'b', 'c', 'd']), 200 | new Set(['d', 'e', 'f', 'g']) 201 | ); 202 | 203 | // output: 1 204 | console.log(setIntersection.size); 205 | 206 | let setDifference = difference( 207 | new Set(['a', 'b', 'c', 'd']), 208 | new Set(['d', 'e', 'f', 'g']) 209 | ); 210 | 211 | // output: 3 212 | console.log(setDifference.size); 213 | } 214 | }) (); 215 | -------------------------------------------------------------------------------- /examples/es6/template-literals.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | { // simple examples 5 | let firstName = 'Ben', 6 | lastName = `Ilegbodu`; 7 | 8 | // Basic template literal is surrounding by 9 | // backticks so single/double quotes do need 10 | // to be escaped 11 | // output: He said, "It's your fault!" 12 | console.log(`He said, "It's your fault!"`); 13 | 14 | // Template literals support interpolation. 15 | // The values within `firstName` and `lastName` 16 | // are substituted into where the tokens are 17 | // output: Name: Ilegbodu, Ben 18 | console.log(`Name: ${lastName}, ${firstName}`); 19 | 20 | // Template literals support multi-line strings 21 | // output: This is 22 | // multi-line text, so that 23 | // newline characters are 24 | // 25 | // 26 | // not needed. All whitespace 27 | // is respected, including tabs. 28 | // 29 | // 30 | console.log(`This is 31 | multi-line text, so that 32 | newline characters are 33 | 34 | 35 | not needed. All whitespace 36 | is respected, including tabs. 37 | 38 | `); 39 | } 40 | 41 | { // template literals are strings 42 | let templateLiteral = `This is a literal`; 43 | 44 | // output: string 45 | console.log(typeof templateLiteral); 46 | 47 | // output: 17 48 | console.log(templateLiteral.length); 49 | 50 | // output: is a literal 51 | console.log(templateLiteral.substr(5)); 52 | 53 | // output: a 54 | console.log(templateLiteral.charAt(8)); 55 | } 56 | 57 | { // template literals using expression interpolation 58 | let timeOfDay = (new Date).getHours(), 59 | mealCost = 7.99, 60 | tax = 0.09; 61 | 62 | // any sort of expression can go inside the 63 | // substitution token 64 | // output: Morning/Evening meal: $8.71 65 | console.log(`${timeOfDay < 12 ? 'Morning' : 'Evening'} meal: $${(mealCost * (1 + tax)).toFixed(2)}`); 66 | 67 | let replacements = { 68 | firstName: 'Ben', 69 | lastName: 'Ilegbodu' 70 | }, 71 | {firstName, lastName} = replacements; 72 | 73 | // you have to destructure an object first in order 74 | // to use its key-values as substitution values 75 | // output: Name: Ilegbodu, Ben 76 | console.log(`Name: ${lastName}, ${firstName}`); 77 | 78 | // output: Name: ${lastName}, Ben 79 | console.log(`Name: \${lastName}, ${firstName}`); 80 | } 81 | 82 | { // multi-line template literals + interpolation 83 | let eventCardInfo = { 84 | title: 'Nodevember 2015', 85 | url: 'http://nodevember.org/', 86 | tagline: 'Two days of Node and JavaScript', 87 | tags: ['JavaScript', 'Node'] 88 | }, 89 | {title, url, tagline, tags} = eventCardInfo, 90 | html = `${tagline}
93 |41 | This page runs a series of a examples using generators in ECMAScript 6 42 | using 43 | Babel transpilation. 44 | Open up your debugging console to view the output. 45 |
46 | 47 |48 | For more information on how generators work and their level of support, 49 | check out the 50 | Generators 55 | blog post that is part of the 56 | Learning ES6 59 | blog series. 60 |
61 | 62 |63 | Source code 67 | | Native example | 68 | Traceur example | 69 | Index of examples 70 |
71 | 72 | 73 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /examples/generators-native.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using generators in ECMAScript 6 42 | without any transpilation. This means your browser must support ES6 43 | generators in order to successfully run the code. Open up your debugging 44 | console to view the output. 45 |
46 | 47 |48 | Browser support: 51 | Chrome, Firefox & Edge 52 |
53 | 54 |55 | For more information on how generators work and their level of support, 56 | check out the 57 | Generators 62 | article that is part of the 63 | Learning ES6 66 | series. 67 |
68 | 69 |70 | Source code 74 | | Babel example | 75 | Traceur example | 76 | Index of examples 77 |
78 | 79 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /examples/generators-traceur.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using generators in ECMAScript 6 42 | using 43 | Traceur 46 | transpilation. Open up your debugging console to view the output. 47 |
48 | 49 |50 | For more information on how generators work and their level of support, 51 | check out the 52 | Generators 57 | blog post that is part of the 58 | Learning ES6 61 | blog series. 62 |
63 | 64 |65 | Source code 69 | | Native example | 70 | Babel example | 71 | Index of examples 72 |
73 | 74 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /examples/iterators-iterables-babel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using iterators & iterables in 42 | ECMAScript 6 using 43 | Babel transpilation. 44 | Open up your debugging console to view the output. 45 |
46 | 47 |48 | For more information on how iterators & iterables work and their level 49 | of support, check out the 50 | Iterators & Iterables 55 | article that is part of the 56 | Learning ES6 59 | series. 60 |
61 | 62 |63 | Source code 67 | | Native example | 68 | Traceur example | 69 | Index of examples 70 |
71 | 72 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /examples/iterators-iterables-native.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using iterators & iterables in 42 | ECMAScript 6 without any transpilation. This means your browser must 43 | support the iterator protocol/interface in order to successfully run the 44 | code. Open up your debugging console to view the output. 45 |
46 | 47 |48 | Browser support: 51 | All JavaScript engines 52 |
53 | 54 |55 | For more information on how iterators & iterables work and their level 56 | of support, check out the 57 | Iterators & Iterables 62 | article that is part of the 63 | Learning ES6 66 | series. 67 |
68 | 69 |70 | Source code 74 | | Babel example | 75 | Traceur example | 76 | Index of examples 77 |
78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /examples/iterators-iterables-traceur.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using iterators & iterables in 42 | ECMAScript 6 using 43 | Traceur 46 | transpilation. Open up your debugging console to view the output. 47 |
48 | 49 |50 | For more information on how iterators & iterables work and their level 51 | of support, check out the 52 | Iterators & Iterables 57 | article that is part of the 58 | Learning ES6 61 | series. 62 |
63 | 64 |65 | Source code 69 | | Native example | 70 | Babel example | 71 | Index of examples 72 |
73 | 74 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /examples/libs/traceur-bootstrap.js: -------------------------------------------------------------------------------- 1 | // Copyright 2011 Traceur Authors. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | new traceur.WebPageTranscoder(document.location.href).run(); 16 | -------------------------------------------------------------------------------- /examples/new-collections-babel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using the new collection objects in 42 | ECMAScript 6 using 43 | Babel transpilation. 44 | Open up your debugging console to view the output. 45 |
46 | 47 |48 | For more information on how these new collection APIs work and their level 49 | of support, check out the 50 | New Collections 55 | article that is part of the 56 | Learning ES6 59 | series. 60 |
61 | 62 |63 | Source code 67 | | Native example | 68 | Traceur example | 69 | Index of examples 70 |
71 | 72 | 73 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /examples/new-collections-native.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
41 | This page runs a series of a examples using the new collection objects in
42 | ECMAScript 6 without any transpilation. This means your browser must
43 | support the Map, Set, WeakMap &
44 | WeakSet APIs in order to successfully run the code. Open up
45 | your debugging console to view the output.
46 |
49 | Browser support: 52 | All JavaScript engines 53 |
54 | 55 |56 | For more information on how these new collection APIs work and their level 57 | of support, check out the 58 | New Collections 63 | article that is part of the 64 | Learning ES6 67 | series. 68 |
69 | 70 |71 | Source code 75 | | Babel example | 76 | Traceur example | 77 | Index of examples 78 |
79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /examples/new-collections-traceur.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using the new collection objects in 42 | ECMAScript 6 using 43 | Traceur 46 | transpilation. Open up your debugging console to view the output. 47 |
48 | 49 |50 | For more information on how these new collection APIs work and their level 51 | of support, check out the 52 | New Collections 57 | article that is part of the 58 | Learning ES6 61 | series. 62 |
63 | 64 |65 | Source code 69 | | Native example | 70 | Babel example | 71 | Index of examples 72 |
73 | 74 | 75 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /examples/parameter-handling-babel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using default parameters, rest 42 | parameters, the spread operator and parameter destructuring in ECMAScript 43 | 6 using 44 | Babel transpilation. 45 | Open up your debugging console to view the output. 46 |
47 | 48 |49 | For more information on how parameter handling works and its level of 50 | support, check out the 51 | Parameter handling 56 | article that is part of the 57 | Learning ES6 60 | series. 61 |
62 | 63 |64 | Source code 68 | | Native example | 69 | Traceur example | 70 | Index of examples 71 |
72 | 73 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /examples/parameter-handling-native.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using default parameters, rest 42 | parameters, the spread operator and parameter destructuring in ECMAScript 43 | 6 without any transpilation. This means your browser must support ES6 44 | parameter handling syntax in order to successfully run the code. Open up 45 | your debugging console to view the output. 46 |
47 | 48 |49 | Browser support: 52 | Traceur, Babel, Firefox, Edge, Chrome, Opera, Safari & Node 53 |
54 | 55 |56 | For more information on how parameter handling works and its level of 57 | support, check out the 58 | Parameter handling 63 | article that is part of the 64 | Learning ES6 67 | series. 68 |
69 | 70 |71 | Source code 75 | | Babel example | 76 | Traceur example | 77 | Index of examples 78 |
79 | 80 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /examples/parameter-handling-traceur.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using default parameters, rest 42 | parameters, the spread operator and parameter destructuring in ECMAScript 43 | 6 using 44 | Traceur 47 | transpilation. Open up your debugging console to view the output. 48 |
49 | 50 |51 | For more information on how parameter handling works and its level of 52 | support, check out the 53 | Parameter handling 58 | article that is part of the 59 | Learning ES6 62 | series. 63 |
64 | 65 |66 | Source code 70 | | Native example | 71 | Babel example | 72 | Index of examples 73 |
74 | 75 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /examples/promises-babel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using promises in ECMAScript 6 using 42 | Babel transpilation. 43 | Open up your debugging console to view the output. 44 |
45 | 46 |47 | For more information on how promises and their level of support, check out 48 | the 49 | Promises 54 | article that is part of the 55 | Learning ES6 58 | series. 59 |
60 | 61 |62 | Source code 66 | | Native example | 67 | Traceur example | 68 | Index of examples 69 |
70 | 71 | 72 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /examples/promises-native.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using promises in ECMAScript 6 42 | without any transpilation. This means your browser must support ES6 43 | promise syntax in order to successfully run the code. Open up your 44 | debugging console to view the output. 45 |
46 | 47 |48 | Browser support: 51 | All JavaScript engines 52 |
53 | 54 |55 | For more information on how promises work and their level of support, 56 | check out the 57 | Promises 62 | article that is part of the 63 | Learning ES6 66 | series. 67 |
68 | 69 |70 | Source code 74 | | Babel example | 75 | Traceur example | 76 | Index of examples 77 |
78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /examples/promises-traceur.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using promises in ECMAScript 6 using 42 | Traceur 45 | transpilation. Open up your debugging console to view the output. 46 |
47 | 48 |49 | For more information on how promises work and its level of support, check 50 | out the 51 | Promises 56 | article that is part of the 57 | Learning ES6 60 | series. 61 |
62 | 63 |64 | Source code 68 | | Native example | 69 | Babel example | 70 | Index of examples 71 |
72 | 73 | 74 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /examples/template-literals-babel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using template string literals in 42 | ECMAScript 6 using 43 | Babel transpilation. 44 | Open up your debugging console to view the output. 45 |
46 | 47 |48 | For more information on how template string literals work and their level 49 | of support, check out the 50 | Template string literals 55 | article that is part of the 56 | Learning ES6 59 | series. 60 |
61 | 62 |63 | Source code 67 | | Native example | 68 | Traceur example | 69 | Index of examples 70 |
71 | 72 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /examples/template-literals-native.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using template string literals in 42 | ECMAScript 6 without any transpilation. This means your browser must 43 | support ES6 template string syntax in order to successfully run the code. 44 | Open up your debugging console to view the output. 45 |
46 | 47 |48 | Browser support: 51 | All JavaScript engines 52 |
53 | 54 |55 | For more information on how template string literals work and their level 56 | of support, check out the 57 | Template string literals 62 | article that is part of the 63 | Learning ES6 66 | series. 67 |
68 | 69 |70 | Source code 74 | | Babel example | 75 | Traceur example | 76 | Index of examples 77 |
78 | 79 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /examples/template-literals-traceur.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |41 | This page runs a series of a examples using template string literals in 42 | ECMAScript 6 using 43 | Traceur 46 | transpilation. Open up your debugging console to view the output. 47 |
48 | 49 |50 | For more information on how template string literals work and its level of 51 | support, check out the 52 | Template string literals 57 | article that is part of the 58 | Learning ES6 61 | series. 62 |
63 | 64 |65 | Source code 69 | | Native example | 70 | Babel example | 71 | Index of examples 72 |
73 | 74 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /examples/transpiled-es5/arrow-functions-babel.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function () { 4 | 'use strict'; 5 | 6 | // create wrapper arrow function expression of console.log 7 | var log = function log(message) { 8 | return console.log(message); 9 | }; 10 | 11 | log('Testing out arrow functions!'); 12 | 13 | // instead of specifying a traditional anonymous function 14 | // expression to map we can use an arrow function 15 | log([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (value) { 16 | return value * value; 17 | })); 18 | 19 | // arrow functions are function expressions and can be 20 | // assigned to variables 21 | var descendingSortFunc = function descendingSortFunc(a, b) { 22 | return b - a; 23 | }, 24 | values = [2, 7, 5, 6], 25 | sortedValues = values.sort(descendingSortFunc); 26 | 27 | log(values); 28 | log(sortedValues); 29 | 30 | // SYNTAX GOTCHA: objects my be wrapped in parenthesis 31 | 32 | // returns an array of undefined values because the 33 | // {} is interpreted as an empty code block that returns 34 | // nothing 35 | log([4, 6, 2].map(function (x) {})); 36 | 37 | // also returns an array of undefined values because the 38 | // {foo: x} is interpreted as a code block with the label 39 | // foo: that has an expression x that is NOT returned 40 | log([4, 5, 1].map(function (x) { 41 | foo: x; 42 | })); 43 | 44 | // successfully returns an array of empty objects 45 | log([4, 5, 1].map(function (x) { 46 | return {}; 47 | })); 48 | 49 | // successfully returns an object with "foo" as key 50 | // and number as value 51 | log([4, 5, 1].map(function (x) { 52 | return { foo: x }; 53 | })); 54 | 55 | // Immediately-invoked arrow functions work too! 56 | // Just be sure to put the parenthesis around the 57 | // arrow function expression and not around the whole thing 58 | (function (message) { 59 | for (var charNo = 0; charNo < message.length; charNo++) { 60 | log(message.charAt(charNo)); 61 | } 62 | })('hello'); 63 | 64 | // Arrow functions use lexical scoping for *this*, so it 65 | // can be referenced like you would expect within anonymous 66 | // functions 67 | var car = { 68 | speed: 0, 69 | accelerate: function accelerate() { 70 | var _this = this; 71 | 72 | this.accelerator = setInterval(function () { 73 | // *this* is the same as it is outside 74 | // of the arrow function! 75 | _this.speed++; 76 | log(_this.speed); 77 | }, 100); 78 | }, 79 | cruise: function cruise() { 80 | clearInterval(this.accelerator); 81 | log('cruising at ' + this.speed + ' mph'); 82 | } 83 | }; 84 | 85 | car.accelerate(); 86 | 87 | setTimeout(function () { 88 | return car.cruise(); 89 | }, 5000); 90 | 91 | // Arrow functions are identified as functions 92 | log(typeof function () {}); // 'function' 93 | log(typeof function () {}); // 'function' 94 | log(function () {} instanceof Function); // true 95 | log(function () {} instanceof Function); // true 96 | 97 | function generateArrowFunctionReturningLexicalArguments() { 98 | var _arguments = arguments; 99 | 100 | // returns an arrow function expression 101 | // which itself returns the arguments used 102 | // when generating the arrow function 103 | return function () { 104 | return _arguments; 105 | }; 106 | } 107 | 108 | var arrowFunction = generateArrowFunctionReturningLexicalArguments(5, 'foo', [5, 4, 3]); 109 | 110 | // log arguments object with 111 | // 5, 'foo', and [5,4,3] 112 | log(arrowFunction()); 113 | })(); 114 | 115 | //# sourceMappingURL=arrow-functions-babel.js.map -------------------------------------------------------------------------------- /examples/transpiled-es5/arrow-functions-babel.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/arrow-functions.js"],"names":[],"mappings":";;AAAA,CAAC,YAAM;AACN,aAAY,CAAC;;;AAGb,KAAI,GAAG,GAAG,SAAN,GAAG,CAAG,OAAO;SAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;EAAA,CAAC;;AAE1C,IAAG,CAAC,8BAA8B,CAAC,CAAC;;;;AAIpC,IAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,UAAA,KAAK;SAAI,KAAK,GAAG,KAAK;EAAA,CAAC,CAAC,CAAC;;;;AAIjE,KAAI,kBAAkB,GAAG,SAArB,kBAAkB,CAAI,CAAC,EAAE,CAAC;SAAK,CAAC,GAAG,CAAC;EAAA;KACvC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;KACrB,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;;AAEhD,IAAG,CAAC,MAAM,CAAC,CAAC;AACZ,IAAG,CAAC,YAAY,CAAC,CAAC;;;;;;;AAOlB,IAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,UAAA,CAAC,EAAI,EAAE,CAAC,CAAC,CAAC;;;;;AAK5B,IAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,UAAA,CAAC,EAAI;AAAC,KAAG,EAAE,CAAC,CAAA;EAAC,CAAC,CAAC,CAAC;;;AAGlC,IAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,UAAA,CAAC;SAAK,EAAE;EAAC,CAAC,CAAC,CAAC;;;;AAI9B,IAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,UAAA,CAAC;SAAK,EAAC,GAAG,EAAE,CAAC,EAAC;EAAC,CAAC,CAAC,CAAC;;;;;AAKpC,EAAC,UAAA,OAAO,EAAI;AACX,OAAK,IAAI,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;AACvD,MAAG,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;GAC5B;EACD,CAAA,CAAG,OAAO,CAAC,CAAC;;;;;AAKb,KAAI,GAAG,GAAG;AACT,OAAK,EAAE,CAAC;AACR,YAAU,EAAE,sBAAW;;;AACtB,OAAI,CAAC,WAAW,GAAG,WAAW,CAC7B,YAAM;;;AAGL,UAAK,KAAK,EAAE,CAAC;AACb,OAAG,CAAC,MAAK,KAAK,CAAC,CAAC;IAChB,EACD,GAAG,CACH,CAAC;GACF;AACD,QAAM,EAAE,kBAAW;AAClB,gBAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;AAChC,MAAG,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC;GAC1C;EACD,CAAC;;AAEF,IAAG,CAAC,UAAU,EAAE,CAAC;;AAEjB,WAAU,CACT;SAAM,GAAG,CAAC,MAAM,EAAE;EAAA,EAClB,IAAI,CACJ,CAAC;;;AAGF,IAAG,CAAC,OAAO,YAAW,EAAG,CAAC,CAAC;AAC3B,IAAG,CAAC,OAAQ,YAAM,EAAE,AAAC,CAAC,CAAC;AACvB,IAAG,CAAC,YAAW,EAAG,YAAY,QAAQ,CAAC,CAAC;AACxC,IAAG,CAAC,AAAC,YAAM,EAAE,YAAa,QAAQ,CAAC,CAAC;;AAGpC,UAAS,8CAA8C,GAAG;;;;;;AAItD,SAAO;;GAAe,CAAC;EAC1B;;AAED,KAAI,aAAa,GAAG,8CAA8C,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,EAAC,CAAC,EAAC,CAAC,CAAC,CAAC,CAAC;;;;AAItF,IAAG,CAAC,aAAa,EAAE,CAAC,CAAC;CACrB,CAAA,EAAI,CAAC","file":"arrow-functions-babel.js","sourcesContent":["(() => {\n\t'use strict';\n\t\n\t// create wrapper arrow function expression of console.log\n\tvar log = message => console.log(message);\n\n\tlog('Testing out arrow functions!');\n\n\t// instead of specifying a traditional anonymous function \n\t// expression to map we can use an arrow function\n\tlog([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(value => value * value));\n\n\t// arrow functions are function expressions and can be\n\t// assigned to variables\n\tvar descendingSortFunc = (a, b) => b - a,\n\t\tvalues = [2, 7, 5, 6],\n\t\tsortedValues = values.sort(descendingSortFunc);\n\n\tlog(values);\n\tlog(sortedValues);\n\n\t// SYNTAX GOTCHA: objects my be wrapped in parenthesis\n\n\t// returns an array of undefined values because the\n\t// {} is interpreted as an empty code block that returns\n\t// nothing\n\tlog([4, 6, 2].map(x => {}));\n\n\t// also returns an array of undefined values because the\n\t// {foo: x} is interpreted as a code block with the label\n\t// foo: that has an expression x that is NOT returned\n\tlog([4, 5, 1].map(x => {foo: x}));\n\n\t// successfully returns an array of empty objects\n\tlog([4, 5, 1].map(x => ({})));\n\n\t// successfully returns an object with \"foo\" as key\n\t// and number as value\n\tlog([4, 5, 1].map(x => ({foo: x})));\n\n\t// Immediately-invoked arrow functions work too!\n\t// Just be sure to put the parenthesis around the\n\t// arrow function expression and not around the whole thing\n\t(message => {\n\t\tfor (var charNo = 0; charNo < message.length; charNo++) {\n\t\t\tlog(message.charAt(charNo));\n\t\t}\n\t}) ('hello');\n\n\t// Arrow functions use lexical scoping for *this*, so it\n\t// can be referenced like you would expect within anonymous\n\t// functions\n\tvar car = {\n\t\tspeed: 0,\n\t\taccelerate: function() {\n\t\t\tthis.accelerator = setInterval(\n\t\t\t\t() => {\n\t\t\t\t\t// *this* is the same as it is outside\n\t\t\t\t\t// of the arrow function!\n\t\t\t\t\tthis.speed++;\n\t\t\t\t\tlog(this.speed);\n\t\t\t\t},\n\t\t\t\t100\n\t\t\t);\n\t\t},\n\t\tcruise: function() {\n\t\t\tclearInterval(this.accelerator);\n\t\t\tlog('cruising at ' + this.speed + ' mph');\n\t\t}\n\t};\n\n\tcar.accelerate();\n\n\tsetTimeout(\n\t\t() => car.cruise(),\n\t\t5000\n\t);\n\n\t// Arrow functions are identified as functions\n\tlog(typeof function() { }); // 'function'\n\tlog(typeof (() => {})); // 'function'\n\tlog(function() { } instanceof Function); // true\n\tlog((() => {}) instanceof Function); // true\n\n\n\tfunction generateArrowFunctionReturningLexicalArguments() {\n\t\t// returns an arrow function expression\n\t\t// which itself returns the arguments used\n\t\t// when generating the arrow function\n\t return () => arguments;\n\t}\n\n\tvar arrowFunction = generateArrowFunctionReturningLexicalArguments(5, 'foo', [5,4,3]);\n\n\t// log arguments object with\n\t// 5, 'foo', and [5,4,3]\n\tlog(arrowFunction());\n}) ();\n"]} -------------------------------------------------------------------------------- /examples/transpiled-es5/arrow-functions-traceur.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | var log = function(message) { 4 | return console.log(message); 5 | }; 6 | log('Testing out arrow functions!'); 7 | log([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function(value) { 8 | return value * value; 9 | })); 10 | var descendingSortFunc = function(a, b) { 11 | return b - a; 12 | }, 13 | values = [2, 7, 5, 6], 14 | sortedValues = values.sort(descendingSortFunc); 15 | log(values); 16 | log(sortedValues); 17 | log([4, 6, 2].map(function(x) {})); 18 | log([4, 5, 1].map(function(x) { 19 | foo: x; 20 | })); 21 | log([4, 5, 1].map(function(x) { 22 | return ({}); 23 | })); 24 | log([4, 5, 1].map(function(x) { 25 | return ({foo: x}); 26 | })); 27 | (function(message) { 28 | for (var charNo = 0; charNo < message.length; charNo++) { 29 | log(message.charAt(charNo)); 30 | } 31 | })('hello'); 32 | var car = { 33 | speed: 0, 34 | accelerate: function() { 35 | var $__1 = this; 36 | this.accelerator = setInterval(function() { 37 | $__1.speed++; 38 | log($__1.speed); 39 | }, 100); 40 | }, 41 | cruise: function() { 42 | clearInterval(this.accelerator); 43 | log('cruising at ' + this.speed + ' mph'); 44 | } 45 | }; 46 | car.accelerate(); 47 | setTimeout(function() { 48 | return car.cruise(); 49 | }, 5000); 50 | log($traceurRuntime.typeof(function() {})); 51 | log($traceurRuntime.typeof((function() {}))); 52 | log(function() {} instanceof Function); 53 | log((function() {}) instanceof Function); 54 | function generateArrowFunctionReturningLexicalArguments() { 55 | var $__1 = arguments; 56 | return function() { 57 | return $__1; 58 | }; 59 | } 60 | var arrowFunction = generateArrowFunctionReturningLexicalArguments(5, 'foo', [5, 4, 3]); 61 | log(arrowFunction()); 62 | })(); 63 | //# sourceMappingURL=arrow-functions-traceur.js.map 64 | -------------------------------------------------------------------------------- /examples/transpiled-es5/arrow-functions-traceur.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/arrow-functions.js"],"names":[],"mappings":"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","file":"/Users/benmvp/github/benmvp/learning-es6/examples/transpiled-es5/arrow-functions-traceur.js","sourcesContent":["(() => {\n\t'use strict';\n\t\n\t// create wrapper arrow function expression of console.log\n\tvar log = message => console.log(message);\n\n\tlog('Testing out arrow functions!');\n\n\t// instead of specifying a traditional anonymous function \n\t// expression to map we can use an arrow function\n\tlog([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(value => value * value));\n\n\t// arrow functions are function expressions and can be\n\t// assigned to variables\n\tvar descendingSortFunc = (a, b) => b - a,\n\t\tvalues = [2, 7, 5, 6],\n\t\tsortedValues = values.sort(descendingSortFunc);\n\n\tlog(values);\n\tlog(sortedValues);\n\n\t// SYNTAX GOTCHA: objects my be wrapped in parenthesis\n\n\t// returns an array of undefined values because the\n\t// {} is interpreted as an empty code block that returns\n\t// nothing\n\tlog([4, 6, 2].map(x => {}));\n\n\t// also returns an array of undefined values because the\n\t// {foo: x} is interpreted as a code block with the label\n\t// foo: that has an expression x that is NOT returned\n\tlog([4, 5, 1].map(x => {foo: x}));\n\n\t// successfully returns an array of empty objects\n\tlog([4, 5, 1].map(x => ({})));\n\n\t// successfully returns an object with \"foo\" as key\n\t// and number as value\n\tlog([4, 5, 1].map(x => ({foo: x})));\n\n\t// Immediately-invoked arrow functions work too!\n\t// Just be sure to put the parenthesis around the\n\t// arrow function expression and not around the whole thing\n\t(message => {\n\t\tfor (var charNo = 0; charNo < message.length; charNo++) {\n\t\t\tlog(message.charAt(charNo));\n\t\t}\n\t}) ('hello');\n\n\t// Arrow functions use lexical scoping for *this*, so it\n\t// can be referenced like you would expect within anonymous\n\t// functions\n\tvar car = {\n\t\tspeed: 0,\n\t\taccelerate: function() {\n\t\t\tthis.accelerator = setInterval(\n\t\t\t\t() => {\n\t\t\t\t\t// *this* is the same as it is outside\n\t\t\t\t\t// of the arrow function!\n\t\t\t\t\tthis.speed++;\n\t\t\t\t\tlog(this.speed);\n\t\t\t\t},\n\t\t\t\t100\n\t\t\t);\n\t\t},\n\t\tcruise: function() {\n\t\t\tclearInterval(this.accelerator);\n\t\t\tlog('cruising at ' + this.speed + ' mph');\n\t\t}\n\t};\n\n\tcar.accelerate();\n\n\tsetTimeout(\n\t\t() => car.cruise(),\n\t\t5000\n\t);\n\n\t// Arrow functions are identified as functions\n\tlog(typeof function() { }); // 'function'\n\tlog(typeof (() => {})); // 'function'\n\tlog(function() { } instanceof Function); // true\n\tlog((() => {}) instanceof Function); // true\n\n\n\tfunction generateArrowFunctionReturningLexicalArguments() {\n\t\t// returns an arrow function expression\n\t\t// which itself returns the arguments used\n\t\t// when generating the arrow function\n\t return () => arguments;\n\t}\n\n\tvar arrowFunction = generateArrowFunctionReturningLexicalArguments(5, 'foo', [5,4,3]);\n\n\t// log arguments object with\n\t// 5, 'foo', and [5,4,3]\n\tlog(arrowFunction());\n}) ();\n"]} -------------------------------------------------------------------------------- /examples/transpiled-es5/block-scoping-traceur.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | function simpleExample(value) { 4 | var constValue = value; 5 | if (value) { 6 | var varValue = value; 7 | var letValue = value; 8 | console.log('inside block', varValue, letValue); 9 | } 10 | console.log('outside block'); 11 | console.log(varValue); 12 | try { 13 | console.log(letValue); 14 | } catch (e) { 15 | console.log('letValue not accessible', e); 16 | } 17 | } 18 | function varExample() { 19 | var myVar = 7; 20 | console.log('myVar after declaration', myVar); 21 | console.log('laterVar before declaration', laterVar); 22 | laterVar = 10; 23 | if (myVar < 20) { 24 | var myVar = 'foo'; 25 | var innerVar = true; 26 | console.log('myVar inside block', myVar); 27 | } 28 | var laterVar; 29 | console.log('laterVar after declaration', laterVar); 30 | console.log('myVar outside block', myVar === 7); 31 | console.log('innerVar outside block', innerVar); 32 | } 33 | function letExample(value) { 34 | if (value) { 35 | var letValue = value; 36 | console.log('inside block', letValue); 37 | } 38 | try { 39 | console.log(letValue); 40 | console.log('let not faithfully handled'); 41 | } catch (e) { 42 | console.log('letValue not accessible', e); 43 | } 44 | } 45 | function letShadowExample() { 46 | var x = 15; 47 | if (true) { 48 | var x$__1 = 21; 49 | console.log('x inner block', x$__1); 50 | } 51 | console.log('x outer block', x); 52 | } 53 | function constExample() { 54 | var NAME_KEY = 'name'; 55 | var UNFROZEN_OBJ_CONST = { 56 | key: 'adam', 57 | val: 'eve' 58 | }; 59 | var FROZEN_OBJ_CONST = Object.freeze({ 60 | key: 'jesus', 61 | val: 'paul' 62 | }); 63 | UNFROZEN_OBJ_CONST.key = 'moses'; 64 | console.log('const value', NAME_KEY); 65 | console.log('unfrozen object', UNFROZEN_OBJ_CONST); 66 | console.log('frozen object', FROZEN_OBJ_CONST); 67 | } 68 | function temporalDeadZoneExample() { 69 | var func = function() { 70 | console.log('value is: ', value); 71 | }; 72 | var value = 'foo'; 73 | func(); 74 | } 75 | function simpleLoopExample() { 76 | for (var i = 0; i < 5; i++) { 77 | console.log('i=', i); 78 | } 79 | for (var j = 0; j < 5; j++) { 80 | console.log('j=', j); 81 | } 82 | console.log('after i=', i); 83 | } 84 | function callbackLoopVarExample() { 85 | var $body = $('body'); 86 | for (var i = 0; i < 5; i++) { 87 | var $button = $(''); 88 | $button.click(function() { 89 | return console.log('var button ' + i + ' clicked!'); 90 | }); 91 | $body.append($button); 92 | } 93 | } 94 | function callbackLoopNamedFunctionExample() { 95 | var $body = $('body'); 96 | var loop = function(index) { 97 | var $button = $(''); 98 | $button.click(function() { 99 | return console.log('function button ' + index + ' clicked!'); 100 | }); 101 | $body.append($button); 102 | }; 103 | for (var i = 0; i < 5; i++) { 104 | loop(i); 105 | } 106 | } 107 | function callbackLoopLetExample() { 108 | var $body = $('body'); 109 | var $__2 = function(i) { 110 | var $button = $(''); 111 | $button.click(function() { 112 | return console.log('let button ' + i + ' clicked!'); 113 | }); 114 | $body.append($button); 115 | }; 116 | for (var i = 0; i < 5; i++) { 117 | $__2(i); 118 | } 119 | } 120 | function parameterExample(values) { 121 | { 122 | var values$__3 = []; 123 | console.log(values$__3); 124 | } 125 | console.log(values); 126 | } 127 | simpleExample(2); 128 | varExample(); 129 | letExample(2); 130 | letShadowExample(); 131 | constExample(); 132 | temporalDeadZoneExample(); 133 | simpleLoopExample(); 134 | callbackLoopVarExample(); 135 | callbackLoopNamedFunctionExample(); 136 | callbackLoopLetExample(); 137 | parameterExample([2, 3, 16]); 138 | })(); 139 | //# sourceMappingURL=block-scoping-traceur.js.map 140 | -------------------------------------------------------------------------------- /examples/transpiled-es5/classes-babel.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/classes.js"],"names":[],"mappings":"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","file":"classes-babel.js","sourcesContent":["(function() {\n\t'use strict';\n\n\t{ // class declarations\n\t\tclass InheritanceError extends Error { }\n\n\t\t// Define base Note class\n\t\tclass Note {\n\t\t\tconstructor(id, content, owner) {\n\t\t\t\tthis._id = id;\n\t\t\t\tthis._content = content;\n\t\t\t\tthis._owner = owner;\n\t\t\t}\n\n\t\t\tstatic add(...properties) {\n\t\t\t\t// `this` will be the class on which `add()` was called\n\t\t\t\t// increment counter\n\t\t\t\t++this._idCounter;\n\n\t\t\t\tlet id = `note${this._idCounter}`;\n\n\t\t\t\t// construct a new instance of the note passing in the\n\t\t\t\t// arguments after the ID. This is so subclasses can\n\t\t\t\t// get all of the arguments needed\n\t\t\t\tlet note = new this(id, ...properties);\n\n\t\t\t\t// add note to the lookup by ID\n\t\t\t\tthis._noteLookup[id] = note;\n\n\t\t\t\treturn note;\n\t\t\t}\n\n\t\t\tstatic get(id) {\n\t\t\t \treturn this._noteLookup[id];\n\t\t\t}\n\n\t\t\t// read-only\n\t\t\tget id() { return this._id; }\n\n\t\t\tget content() { return this._content; }\n\t\t\tset content(value) { this._content = value; }\n\n\t\t\tget owner() { return this._owner; }\n\t\t\tset owner(value) { this._owner = value; }\n\n\t\t\ttoString() {\n\t\t\t\treturn `ID: ${this._id}\n\t\t\t\t\tContent: ${this._content}\n\t\t\t\t\tOwner: ${this._owner}`;\n\t\t\t}\n\t\t}\n\n\t\t// Static \"private\" properties (not yet supported in class syntax)\n\t\tNote._idCounter = -1;\n\t\tNote._noteLookup = {};\n\n\t\tclass ColorNote extends Note {\n\t\t\tconstructor(id, content, owner, color='#ff0000') {\n\t\t\t\t// super constructor must be called first!\n\t\t\t\tsuper(id, content, owner);\n\t\t\t\tthis._color = color;\n\t\t\t}\n\n\t\t\tget color() { return this._color; }\n\t\t\tset color(value) { this._color = value; }\n\n\t\t\ttoString() { // computed method names are supported\n\t\t\t\t// Override `toString()`, but call parent/super version\n\t\t\t\t// first\n\t\t\t\treturn `${super.toString()}\n\t\t\t\t\tColor: ${this._color}`;\n\t\t\t}\n\t\t}\n\n\t\t// `add` factory method is defined on `Note`, but accessible\n\t\t// on ColorNote subclass\n\t\tlet colorNote = ColorNote.add('My note', 'benmvp', '#0000ff');\n\n\t\t// output: ID: note0\n\t\t// Content: My Note\n\t\t// Owner: benmvp\n\t\t// Color: #0000ff\n\t\tconsole.log(`${colorNote}`);\n\n\t\t// output: true\n\t\tconsole.log(Note.get('note0') === colorNote);\n\n\t\ttry {\n\t\t\tnew Note(72, 'Vanilla note', 'benmvp');\n\t\t}\n\t\tcatch (e) {\n\t\t\t// output: true\n\t\t\tconsole.log(e instanceof InheritanceError);\n\t\t}\n\t};\n\n\t{ // class expressions\n\t\t// A class expression\n\t\tconst Note = class {\n\t\t\tconstructor(id, content, owner) {\n\t\t\t\tthis.id = id;\n\t\t\t\tthis.content = content;\n\t\t\t\tthis.owner = owner;\n\t\t\t}\n\t\t};\n\n\t\t// A immediately-invoked class expression, creating a one-off singleton\n\t\tlet noteSingleton = new (class {\n\t\t\tconstructor(id, content, owner) {\n\t\t\t\tthis.id = id;\n\t\t\t\tthis.content = content;\n\t\t\t\tthis.owner = owner;\n\t\t\t}\n\t\t}) (0, 'some content', 'benmvp');\n\t\tconsole.log(noteSingleton);\n\n\t\t// a class declaration inheriting from a class expression\n\t\tclass ColorNote extends (class {\n\t\t\tconstructor(id, content, owner) {\n\t\t\t\tthis.id = id;\n\t\t\t\tthis.content = content;\n\t\t\t\tthis.owner = owner;\n\t\t\t}\n\t\t}) {\n\t\t\tconstructor(id, content, owner, color='#ff0000') {\n\t\t\t\t// super constructor must be called first!\n\t\t\t\tsuper(id, content, owner);\n\t\t\t\tthis.color = color;\n\t\t\t}\n\t\t}\n\t}\n}) ();\n"]} -------------------------------------------------------------------------------- /examples/transpiled-es5/classes-traceur.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | { 4 | var InheritanceError = function($__super) { 5 | function InheritanceError() { 6 | $traceurRuntime.superConstructor(InheritanceError).apply(this, arguments); 7 | } 8 | return ($traceurRuntime.createClass)(InheritanceError, {}, {}, $__super); 9 | }(Error); 10 | var Note = function() { 11 | function Note(id, content, owner) { 12 | this._id = id; 13 | this._content = content; 14 | this._owner = owner; 15 | } 16 | return ($traceurRuntime.createClass)(Note, { 17 | get id() { 18 | return this._id; 19 | }, 20 | get content() { 21 | return this._content; 22 | }, 23 | set content(value) { 24 | this._content = value; 25 | }, 26 | get owner() { 27 | return this._owner; 28 | }, 29 | set owner(value) { 30 | this._owner = value; 31 | }, 32 | toString: function() { 33 | return ("ID: " + this._id + "\n\t\t\t\t\tContent: " + this._content + "\n\t\t\t\t\tOwner: " + this._owner); 34 | } 35 | }, { 36 | add: function() { 37 | for (var properties = [], 38 | $__10 = 0; $__10 < arguments.length; $__10++) 39 | properties[$__10] = arguments[$__10]; 40 | ++this._idCounter; 41 | var id = ("note" + this._idCounter); 42 | var note = new (Function.prototype.bind.apply(this, $traceurRuntime.spread([null, id], properties)))(); 43 | this._noteLookup[id] = note; 44 | return note; 45 | }, 46 | get: function(id) { 47 | return this._noteLookup[id]; 48 | } 49 | }); 50 | }(); 51 | Note._idCounter = -1; 52 | Note._noteLookup = {}; 53 | var ColorNote = function($__super) { 54 | function ColorNote(id, content, owner) { 55 | var color = arguments[3] !== (void 0) ? arguments[3] : '#ff0000'; 56 | $traceurRuntime.superConstructor(ColorNote).call(this, id, content, owner); 57 | this._color = color; 58 | } 59 | return ($traceurRuntime.createClass)(ColorNote, { 60 | get color() { 61 | return this._color; 62 | }, 63 | set color(value) { 64 | this._color = value; 65 | }, 66 | toString: function() { 67 | return ($traceurRuntime.superGet(this, ColorNote.prototype, "toString").call(this) + "\n\t\t\t\t\tColor: " + this._color); 68 | } 69 | }, {}, $__super); 70 | }(Note); 71 | var colorNote = ColorNote.add('My note', 'benmvp', '#0000ff'); 72 | console.log(("" + colorNote)); 73 | console.log(Note.get('note0') === colorNote); 74 | try { 75 | new Note(72, 'Vanilla note', 'benmvp'); 76 | } catch (e) { 77 | console.log(e instanceof InheritanceError); 78 | } 79 | } 80 | ; 81 | { 82 | var Note$__11 = ($traceurRuntime.createClass)(function(id, content, owner) { 83 | this.id = id; 84 | this.content = content; 85 | this.owner = owner; 86 | }, {}, {}); 87 | var noteSingleton = new (($traceurRuntime.createClass)(function(id, content, owner) { 88 | this.id = id; 89 | this.content = content; 90 | this.owner = owner; 91 | }, {}, {}))(0, 'some content', 'benmvp'); 92 | console.log(noteSingleton); 93 | var ColorNote = function($__super) { 94 | function ColorNote(id, content, owner) { 95 | var color = arguments[3] !== (void 0) ? arguments[3] : '#ff0000'; 96 | $traceurRuntime.superConstructor(ColorNote).call(this, id, content, owner); 97 | this.color = color; 98 | } 99 | return ($traceurRuntime.createClass)(ColorNote, {}, {}, $__super); 100 | }((($traceurRuntime.createClass)(function(id, content, owner) { 101 | this.id = id; 102 | this.content = content; 103 | this.owner = owner; 104 | }, {}, {}))); 105 | } 106 | })(); 107 | //# sourceMappingURL=classes-traceur.js.map 108 | -------------------------------------------------------------------------------- /examples/transpiled-es5/classes-traceur.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/classes.js"],"names":[],"mappings":"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","file":"/Users/benmvp/github/benmvp/learning-es6/examples/transpiled-es5/classes-traceur.js","sourcesContent":["(function() {\n\t'use strict';\n\n\t{ // class declarations\n\t\tclass InheritanceError extends Error { }\n\n\t\t// Define base Note class\n\t\tclass Note {\n\t\t\tconstructor(id, content, owner) {\n\t\t\t\tthis._id = id;\n\t\t\t\tthis._content = content;\n\t\t\t\tthis._owner = owner;\n\t\t\t}\n\n\t\t\tstatic add(...properties) {\n\t\t\t\t// `this` will be the class on which `add()` was called\n\t\t\t\t// increment counter\n\t\t\t\t++this._idCounter;\n\n\t\t\t\tlet id = `note${this._idCounter}`;\n\n\t\t\t\t// construct a new instance of the note passing in the\n\t\t\t\t// arguments after the ID. This is so subclasses can\n\t\t\t\t// get all of the arguments needed\n\t\t\t\tlet note = new this(id, ...properties);\n\n\t\t\t\t// add note to the lookup by ID\n\t\t\t\tthis._noteLookup[id] = note;\n\n\t\t\t\treturn note;\n\t\t\t}\n\n\t\t\tstatic get(id) {\n\t\t\t \treturn this._noteLookup[id];\n\t\t\t}\n\n\t\t\t// read-only\n\t\t\tget id() { return this._id; }\n\n\t\t\tget content() { return this._content; }\n\t\t\tset content(value) { this._content = value; }\n\n\t\t\tget owner() { return this._owner; }\n\t\t\tset owner(value) { this._owner = value; }\n\n\t\t\ttoString() {\n\t\t\t\treturn `ID: ${this._id}\n\t\t\t\t\tContent: ${this._content}\n\t\t\t\t\tOwner: ${this._owner}`;\n\t\t\t}\n\t\t}\n\n\t\t// Static \"private\" properties (not yet supported in class syntax)\n\t\tNote._idCounter = -1;\n\t\tNote._noteLookup = {};\n\n\t\tclass ColorNote extends Note {\n\t\t\tconstructor(id, content, owner, color='#ff0000') {\n\t\t\t\t// super constructor must be called first!\n\t\t\t\tsuper(id, content, owner);\n\t\t\t\tthis._color = color;\n\t\t\t}\n\n\t\t\tget color() { return this._color; }\n\t\t\tset color(value) { this._color = value; }\n\n\t\t\ttoString() { // computed method names are supported\n\t\t\t\t// Override `toString()`, but call parent/super version\n\t\t\t\t// first\n\t\t\t\treturn `${super.toString()}\n\t\t\t\t\tColor: ${this._color}`;\n\t\t\t}\n\t\t}\n\n\t\t// `add` factory method is defined on `Note`, but accessible\n\t\t// on ColorNote subclass\n\t\tlet colorNote = ColorNote.add('My note', 'benmvp', '#0000ff');\n\n\t\t// output: ID: note0\n\t\t// Content: My Note\n\t\t// Owner: benmvp\n\t\t// Color: #0000ff\n\t\tconsole.log(`${colorNote}`);\n\n\t\t// output: true\n\t\tconsole.log(Note.get('note0') === colorNote);\n\n\t\ttry {\n\t\t\tnew Note(72, 'Vanilla note', 'benmvp');\n\t\t}\n\t\tcatch (e) {\n\t\t\t// output: true\n\t\t\tconsole.log(e instanceof InheritanceError);\n\t\t}\n\t};\n\n\t{ // class expressions\n\t\t// A class expression\n\t\tconst Note = class {\n\t\t\tconstructor(id, content, owner) {\n\t\t\t\tthis.id = id;\n\t\t\t\tthis.content = content;\n\t\t\t\tthis.owner = owner;\n\t\t\t}\n\t\t};\n\n\t\t// A immediately-invoked class expression, creating a one-off singleton\n\t\tlet noteSingleton = new (class {\n\t\t\tconstructor(id, content, owner) {\n\t\t\t\tthis.id = id;\n\t\t\t\tthis.content = content;\n\t\t\t\tthis.owner = owner;\n\t\t\t}\n\t\t}) (0, 'some content', 'benmvp');\n\t\tconsole.log(noteSingleton);\n\n\t\t// a class declaration inheriting from a class expression\n\t\tclass ColorNote extends (class {\n\t\t\tconstructor(id, content, owner) {\n\t\t\t\tthis.id = id;\n\t\t\t\tthis.content = content;\n\t\t\t\tthis.owner = owner;\n\t\t\t}\n\t\t}) {\n\t\t\tconstructor(id, content, owner, color='#ff0000') {\n\t\t\t\t// super constructor must be called first!\n\t\t\t\tsuper(id, content, owner);\n\t\t\t\tthis.color = color;\n\t\t\t}\n\t\t}\n\t}\n}) ();\n"]} -------------------------------------------------------------------------------- /examples/transpiled-es5/destructuring-babel.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })(); 4 | 5 | (function () { 6 | 'use strict'; 7 | 8 | { 9 | // object pattern matching 10 | var _fName$age$lName = { fName: 'John', age: 15, lName: 'Doe' }; 11 | var lName = _fName$age$lName.lName; 12 | var fName = _fName$age$lName.fName; 13 | 14 | // array pattern matching 15 | var _ref = [8, 4, 100, -5, 20]; 16 | var first = _ref[0]; 17 | var second = _ref[1]; 18 | var third = _ref[2]; 19 | 20 | // output: Doe, John 21 | console.log(lName + ', ' + fName); 22 | 23 | // output: 100, 4, 8 24 | console.log(third, second, first); 25 | }; 26 | 27 | { 28 | var config = { delay: 500, title: 'Hi!', info: { name: 'Elijah' } }; 29 | 30 | var one = config.info.name; 31 | var delay = config.delay; 32 | var three = config.empty; 33 | var four = config.title; 34 | 35 | // output: 'Elijah', 500, undefined, 'Hi!' 36 | // missing properties have `undefined` value 37 | console.log(one, delay, three, four); 38 | }; 39 | 40 | { 41 | var bKey = 'b'; 42 | 43 | /*** computed values work too! ***/ 44 | var _a$b$c = { a: 1, b: 2, c: 3 }; 45 | var b = _a$b$c[bKey]; 46 | var a = _a$b$c.a; 47 | var c = _a$b$c.c; 48 | 49 | // outputs: 1, 2, 3 50 | console.log(a, b, c); 51 | 52 | /*** destructuring works w/o variable declarations ***/ 53 | b = {}; 54 | 55 | // output: 1, {count: 2} 56 | var _a$b = { a: 1, b: 2 }; 57 | a = _a$b.a; 58 | b.count = _a$b.b; 59 | console.log(a, b); 60 | }; 61 | 62 | { 63 | // nested array literal pattern syntax 64 | var myArray = [1, ['hello'], true]; 65 | var first = myArray[0]; 66 | 67 | var _myArray$1 = _slicedToArray(myArray[1], 1); 68 | 69 | var secondNest = _myArray$1[0]; 70 | var third = myArray[2]; 71 | 72 | // output: 1, 'hello', true 73 | console.log(first, secondNest, third); 74 | }; 75 | 76 | { 77 | // skipping indices in array literal pattern 78 | var sequence = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]; 79 | var first = sequence[0]; 80 | var third = sequence[2]; 81 | var fourth = sequence[3]; 82 | var seventh = sequence[6]; 83 | 84 | // output: 0, 1, 2, 8 85 | console.log(first, third, fourth, seventh); 86 | }; 87 | 88 | { 89 | var json = { 90 | shapes: ['circle', 'square', 'triangle'], 91 | colors: 5, 92 | fill: true, 93 | author: { 94 | firstName: 'Ben', 95 | lastName: 'Ilegbodu', 96 | city: 'Pittsburg' 97 | } 98 | }; 99 | var fill = json.fill; 100 | var _json$author = json.author; 101 | var lastName = _json$author.lastName; 102 | var firstName = _json$author.firstName; 103 | var city = _json$author.city; 104 | 105 | var _json$shapes = _slicedToArray(json.shapes, 2); 106 | 107 | var secondShape = _json$shapes[1]; 108 | var numColors = json.colors; 109 | 110 | // output: true, square, 5 111 | console.log(fill, secondShape, numColors); 112 | // output: Ilegbodu, Ben, Pittsburg 113 | console.log(lastName, firstName, city); 114 | }; 115 | 116 | { 117 | // using array destructuring to swap 2 variables 118 | var a = 1, 119 | b = 2; 120 | 121 | // output: 2, 1 122 | var _ref2 = [a, b]; 123 | b = _ref2[0]; 124 | a = _ref2[1]; 125 | console.log(a, b); 126 | }; 127 | 128 | { 129 | // destructuring class objects 130 | var scheme = location.protocol; 131 | var domain = location.host; 132 | var path = location.pathname; 133 | var query = location.search; 134 | var hash = location.hash; 135 | var url = location.href; 136 | 137 | // output: true 138 | console.log(scheme + '//' + domain + path + query + hash == url); 139 | }; 140 | 141 | { 142 | // destructuring return values 143 | 144 | var _dDDDDDDDDD$$exec = /^(\d\d\d)-(\d\d\d)-(\d\d\d\d)$/.exec('650-555-1234'); 145 | 146 | var _dDDDDDDDDD$$exec2 = _slicedToArray(_dDDDDDDDDD$$exec, 4); 147 | 148 | var areaCode = _dDDDDDDDDD$$exec2[1]; 149 | var exchange = _dDDDDDDDDD$$exec2[2]; 150 | var lineNumber = _dDDDDDDDDD$$exec2[3]; 151 | 152 | // output: 650, 555, 1234 153 | console.log(areaCode, exchange, lineNumber); 154 | }; 155 | 156 | { 157 | // function w/ multiple return values & destructuring 158 | 159 | var _find = function _find(list, token) { 160 | for (var i = 0; i < list.length; i++) { 161 | if (list[i].indexOf(token) > -1) return { index: i, val: list[i] }; 162 | } 163 | 164 | // match not found 165 | return { index: -1, val: undefined }; 166 | }; 167 | var fruits = ['apple', 'grape', 'peach', 'pear']; 168 | 169 | var _find2 = _find(fruits, 'ape'); 170 | 171 | var index = _find2.index; 172 | var val = _find2.val; 173 | 174 | console.log(index, val); 175 | }; 176 | })(); 177 | // full & shorthand syntax can be mixed 178 | // `delay` uses shorthand syntax 179 | 180 | //# sourceMappingURL=destructuring-babel.js.map -------------------------------------------------------------------------------- /examples/transpiled-es5/destructuring-babel.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/destructuring.js"],"names":[],"mappings":"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","file":"destructuring-babel.js","sourcesContent":["(function() {\n\t'use strict';\n\n\t{\n\t\t// object pattern matching\n\t\tlet {lName, fName} = {fName: 'John', age: 15, lName: 'Doe'};\n\n\t\t// array pattern matching\n\t\tlet [first, second, third] = [8, 4, 100, -5, 20];\n\n\t\t// output: Doe, John\n\t\tconsole.log(lName + ', '+ fName);\n\n\t\t// output: 100, 4, 8\n\t\tconsole.log(third, second, first);\n\t};\n\n\t{\n\t\tlet config = {delay: 500, title: 'Hi!', info: {name: 'Elijah'}},\n\n\t\t\t// full & shorthand syntax can be mixed\n\t\t\t// `delay` uses shorthand syntax\n\t\t\t{info: {name: one}, delay, empty: three, title: four} = config;\n\n\t\t// output: 'Elijah', 500, undefined, 'Hi!'\n\t\t// missing properties have `undefined` value\n\t\tconsole.log(one, delay, three, four);\n\t};\n\n\t{\n\t\tconst bKey = 'b';\n\n\t\t/*** computed values work too! ***/\n\t\tlet {[bKey]: b, a, c} = {a: 1, b: 2, c: 3};\n\n\t\t// outputs: 1, 2, 3\n\t\tconsole.log(a, b, c);\n\n\n\t\t/*** destructuring works w/o variable declarations ***/\n\t\tb = {};\n\t\t( {a, b: b.count} = {a: 1, b: 2} );\n\n\t\t// output: 1, {count: 2}\n\t\tconsole.log(a, b);\n\t};\n\n\t{\n\t\t// nested array literal pattern syntax\n\t\tlet myArray = [1, ['hello'], true],\n\t\t\t[first, [secondNest], third] = myArray;\n\n\t\t// output: 1, 'hello', true\n\t\tconsole.log(first, secondNest, third);\n\t};\n\n\t{\n\t\t// skipping indices in array literal pattern\n\t\tlet sequence = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34],\n\t\t\t[first, , third, fourth, , , seventh] = sequence\n\t\t;\n\n\t\t// output: 0, 1, 2, 8\n\t\tconsole.log(first, third, fourth, seventh);\n\t};\n\n\t{\n\t\tlet json = {\n\t\t\t\tshapes: ['circle', 'square', 'triangle'],\n\t\t\t\tcolors: 5,\n\t\t\t\tfill: true,\n\t\t\t\tauthor: {\n\t\t\t\t\tfirstName: 'Ben',\n\t\t\t\t\tlastName: 'Ilegbodu',\n\t\t\t\t\tcity: 'Pittsburg'\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\tfill,\n\t\t\t\tauthor: {lastName, firstName, city},\n\t\t\t\tshapes: [, secondShape],\n\t\t\t\tcolors: numColors\n\t\t\t} = json;\n\n\t\t// output: true, square, 5\n\t\tconsole.log(fill, secondShape, numColors);\n\t\t// output: Ilegbodu, Ben, Pittsburg\n\t\tconsole.log(lastName, firstName, city);\n\t};\n\n\t{\n\t\t// using array destructuring to swap 2 variables\n\t\tlet a = 1,\n\t\t\tb = 2;\n\n\t\t[b, a] = [a, b];\n\n\t\t// output: 2, 1\n\t\tconsole.log(a, b);\n\t};\n\n\t{\n\t\t// destructuring class objects\n\t\tlet {\n\t\t\t\tprotocol: scheme, \n\t\t\t\thost: domain, \n\t\t\t\tpathname: path, \n\t\t\t\tsearch: query,\n\t\t\t\thash,\n\t\t\t\thref: url\n\t\t\t} = location;\n\n\t\t// output: true\n\t\tconsole.log(\n\t\t\t(scheme + '//' + domain + path + query + hash) == url\n\t\t);\n\t};\n\n\t{\n\t\t// destructuring return values\n\t\tlet [, areaCode, exchange, lineNumber] =\n\t\t\t/^(\\d\\d\\d)-(\\d\\d\\d)-(\\d\\d\\d\\d)$/\n\t\t\t\t.exec('650-555-1234');\n\n\t\t// output: 650, 555, 1234\n\t\tconsole.log(areaCode, exchange, lineNumber);\n\t};\n\n\t{\n\t\t// function w/ multiple return values & destructuring\n\t\t\n\t\tconst find = function(list, token) {\n\t\t\tfor (let i = 0; i < list.length; i++) {\n\t\t\t\tif (list[i].indexOf(token) > -1)\n\t\t\t\t\treturn {index: i, val: list[i]};\n\t\t\t}\n\n\t\t\t// match not found\n\t\t\treturn {index: -1, val: undefined};\n\t\t};\n\t\tlet fruits = ['apple', 'grape', 'peach', 'pear'],\n\t\t\t{index, val} = find(fruits, 'ape');\n\t\tconsole.log(index, val);\n\t};\n}) ();\n"]} -------------------------------------------------------------------------------- /examples/transpiled-es5/destructuring-traceur.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | var $__4, 4 | $__5, 5 | $__9, 6 | $__11, 7 | $__12, 8 | $__14, 9 | $__15, 10 | $__16, 11 | $__17, 12 | $__19, 13 | $__20, 14 | $__24, 15 | $__25, 16 | $__26, 17 | $__27, 18 | $__28, 19 | $__29, 20 | $__30, 21 | $__33, 22 | $__34; 23 | { 24 | var $__2 = { 25 | fName: 'John', 26 | age: 15, 27 | lName: 'Doe' 28 | }, 29 | lName = $__2.lName, 30 | fName = $__2.fName; 31 | var $__3 = [8, 4, 100, -5, 20], 32 | first = ($__4 = $__3[Symbol.iterator](), ($__5 = $__4.next()).done ? void 0 : $__5.value), 33 | second = ($__5 = $__4.next()).done ? void 0 : $__5.value, 34 | third = ($__5 = $__4.next()).done ? void 0 : $__5.value; 35 | console.log(lName + ', ' + fName); 36 | console.log(third, second, first); 37 | } 38 | ; 39 | { 40 | var config = { 41 | delay: 500, 42 | title: 'Hi!', 43 | info: {name: 'Elijah'} 44 | }, 45 | $__6 = config, 46 | one = $__6.info.name, 47 | delay = $__6.delay, 48 | three = $__6.empty, 49 | four = $__6.title; 50 | console.log(one, delay, three, four); 51 | } 52 | ; 53 | { 54 | var bKey = 'b'; 55 | var $__8 = { 56 | a: 1, 57 | b: 2, 58 | c: 3 59 | }, 60 | b = $__8[bKey], 61 | a = $__8.a, 62 | c = $__8.c; 63 | console.log(a, b, c); 64 | b = {}; 65 | (($__9 = { 66 | a: 1, 67 | b: 2 68 | }, a = $__9.a, b.count = $__9.b, $__9)); 69 | console.log(a, b); 70 | } 71 | ; 72 | { 73 | var myArray = [1, ['hello'], true], 74 | $__10 = myArray, 75 | first$__36 = ($__11 = $__10[Symbol.iterator](), ($__12 = $__11.next()).done ? void 0 : $__12.value), 76 | secondNest = ($__16 = (($__12 = $__11.next()).done ? void 0 : $__12.value)[Symbol.iterator](), ($__17 = $__16.next()).done ? void 0 : $__17.value), 77 | third$__37 = ($__12 = $__11.next()).done ? void 0 : $__12.value; 78 | console.log(first$__36, secondNest, third$__37); 79 | } 80 | ; 81 | { 82 | var sequence = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34], 83 | $__18 = sequence, 84 | first$__38 = ($__19 = $__18[Symbol.iterator](), ($__20 = $__19.next()).done ? void 0 : $__20.value), 85 | third$__39 = ($__19.next(), ($__20 = $__19.next()).done ? void 0 : $__20.value), 86 | fourth = ($__20 = $__19.next()).done ? void 0 : $__20.value, 87 | seventh = ($__19.next(), $__19.next(), ($__20 = $__19.next()).done ? void 0 : $__20.value); 88 | ; 89 | console.log(first$__38, third$__39, fourth, seventh); 90 | } 91 | ; 92 | { 93 | var json = { 94 | shapes: ['circle', 'square', 'triangle'], 95 | colors: 5, 96 | fill: true, 97 | author: { 98 | firstName: 'Ben', 99 | lastName: 'Ilegbodu', 100 | city: 'Pittsburg' 101 | } 102 | }, 103 | $__21 = json, 104 | fill = $__21.fill, 105 | $__22 = $__21.author, 106 | lastName = $__22.lastName, 107 | firstName = $__22.firstName, 108 | city = $__22.city, 109 | secondShape = ($__26 = $__21.shapes[Symbol.iterator](), $__26.next(), ($__27 = $__26.next()).done ? void 0 : $__27.value), 110 | numColors = $__21.colors; 111 | console.log(fill, secondShape, numColors); 112 | console.log(lastName, firstName, city); 113 | } 114 | ; 115 | { 116 | var a$__40 = 1, 117 | b$__41 = 2; 118 | ($__28 = [a$__40, b$__41], b$__41 = ($__29 = $__28[Symbol.iterator](), ($__30 = $__29.next()).done ? void 0 : $__30.value), a$__40 = ($__30 = $__29.next()).done ? void 0 : $__30.value, $__28); 119 | console.log(a$__40, b$__41); 120 | } 121 | ; 122 | { 123 | var $__31 = location, 124 | scheme = $__31.protocol, 125 | domain = $__31.host, 126 | path = $__31.pathname, 127 | query = $__31.search, 128 | hash = $__31.hash, 129 | url = $__31.href; 130 | console.log((scheme + '//' + domain + path + query + hash) == url); 131 | } 132 | ; 133 | { 134 | var $__32 = /^(\d\d\d)-(\d\d\d)-(\d\d\d\d)$/.exec('650-555-1234'), 135 | areaCode = ($__33 = $__32[Symbol.iterator](), $__33.next(), ($__34 = $__33.next()).done ? void 0 : $__34.value), 136 | exchange = ($__34 = $__33.next()).done ? void 0 : $__34.value, 137 | lineNumber = ($__34 = $__33.next()).done ? void 0 : $__34.value; 138 | console.log(areaCode, exchange, lineNumber); 139 | } 140 | ; 141 | { 142 | var find = function(list, token) { 143 | for (var i = 0; i < list.length; i++) { 144 | if (list[i].indexOf(token) > -1) 145 | return { 146 | index: i, 147 | val: list[i] 148 | }; 149 | } 150 | return { 151 | index: -1, 152 | val: undefined 153 | }; 154 | }; 155 | var fruits = ['apple', 'grape', 'peach', 'pear'], 156 | $__35 = find(fruits, 'ape'), 157 | index = $__35.index, 158 | val = $__35.val; 159 | console.log(index, val); 160 | } 161 | ; 162 | })(); 163 | //# sourceMappingURL=destructuring-traceur.js.map 164 | -------------------------------------------------------------------------------- /examples/transpiled-es5/enhanced-object-literals-babel.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 4 | 5 | (function () { 6 | 'use strict'; 7 | 8 | function getCar(make, model, value) { 9 | var _Object$defineProperties; 10 | 11 | var valueKey = 'value', 12 | appreciateKey = 'appreciate'; 13 | 14 | return Object.defineProperties((_Object$defineProperties = { 15 | // with property value shorthand 16 | // syntax, you can omit the property 17 | // value if key matches variable 18 | // name 19 | make: make, // same as make: make 20 | model: model, // same as model: model 21 | 22 | _value: value 23 | 24 | }, _defineProperty(_Object$defineProperties, 'make' + make, true), _defineProperty(_Object$defineProperties, 'depreciate', function depreciate() { 25 | this.value -= 2500; 26 | }), _defineProperty(_Object$defineProperties, appreciateKey, function () { 27 | this.value += 1000; 28 | }), _Object$defineProperties), _defineProperty({ 29 | value: { 30 | 31 | // ES5 property accessors still work 32 | // the same 33 | 34 | get: function get() { 35 | return this._value; 36 | }, 37 | configurable: true, 38 | enumerable: true 39 | } 40 | }, valueKey, { 41 | 42 | // computed property keys also work 43 | // with property accessors 44 | 45 | set: function set(value) { 46 | if (value < 0) throw new Error('invalid value'); 47 | 48 | this._value = value; 49 | }, 50 | configurable: true, 51 | enumerable: true 52 | })); 53 | } 54 | 55 | var car = getCar('Kia', 'Sorento', 40000); 56 | 57 | // output: { 58 | // make: 'Kia', 59 | // model:'Sorento', 60 | // _value: 40000, 61 | // makeKia: true, 62 | // depreciate: function(), 63 | // value: Getter 64 | // } 65 | console.log(car); 66 | 67 | car.depreciate(); 68 | car.appreciate(); 69 | 70 | // output: 38500 71 | console.log(car.value); 72 | })(); 73 | // computed property keys now work with 74 | // object literals 75 | 76 | // Method definition shorthand syntax 77 | // omits `function` keyword & colon 78 | 79 | // computed property keys also work 80 | // withe method definition shorthand 81 | 82 | //# sourceMappingURL=enhanced-object-literals-babel.js.map -------------------------------------------------------------------------------- /examples/transpiled-es5/enhanced-object-literals-babel.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/enhanced-object-literals.js"],"names":[],"mappings":";;;;AAAA,CAAC,YAAW;AACX,aAAY,CAAC;;AAEb,UAAS,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;;;AACnC,MAAI,QAAQ,GAAG,OAAO;MACrB,aAAa,GAAG,YAAY,CAAC;;AAE9B;;;;;AAKC,OAAI,EAAJ,IAAI;AACJ,QAAK,EAAL,KAAK;;AAEL,SAAM,EAAE,KAAK;;+CAIZ,MAAM,GAAG,IAAI,EAAG,IAAI,2DAIX,sBAAG;AACZ,OAAI,CAAC,KAAK,IAAI,IAAI,CAAC;GACnB,6CAIA,aAAa,EAAC,YAAG;AACjB,OAAI,CAAC,KAAK,IAAI,IAAI,CAAC;GACnB;AAIG,QAAK;;;;;SAAA,eAAG;AACX,YAAO,IAAI,CAAC,MAAM,CAAC;KACnB;;;;KAII,QAAQ;;;;;QAAC,aAAC,KAAK,EAAE;AACrB,QAAI,KAAK,GAAG,CAAC,EACZ,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC;;AAElC,QAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB;;;MACA;EACF;;AAED,KAAI,GAAG,GAAG,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;;;;;;;;;;AAU1C,QAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;;AAEjB,IAAG,CAAC,UAAU,EAAE,CAAC;AACjB,IAAG,CAAC,UAAU,EAAE,CAAC;;;AAGjB,QAAO,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;CACvB,CAAA,EAAI,CAAC","file":"enhanced-object-literals-babel.js","sourcesContent":["(function() {\n\t'use strict';\n\n\tfunction getCar(make, model, value) {\n\t\tlet valueKey = 'value',\n\t\t\tappreciateKey = 'appreciate';\n\n\t\treturn {\n\t\t\t// with property value shorthand\n\t\t\t// syntax, you can omit the property\n\t\t\t// value if key matches variable\n\t\t\t// name\n\t\t\tmake, // same as make: make\n\t\t\tmodel, // same as model: model\n\n\t\t\t_value: value,\n\n\t\t\t// computed property keys now work with\n\t\t\t// object literals\n\t\t\t['make' + make]: true,\n\n\t\t\t// Method definition shorthand syntax\n\t\t\t// omits `function` keyword & colon\n\t\t\tdepreciate() {\n\t\t\t\tthis.value -= 2500;\n\t\t\t},\n\n\t\t\t// computed property keys also work\n\t\t\t// withe method definition shorthand\n\t\t\t[appreciateKey]() {\n\t\t\t\tthis.value += 1000;\n\t\t\t},\n\t\t\n\t\t\t// ES5 property accessors still work\n\t\t\t// the same\n\t\t\tget value() {\n\t\t\t\treturn this._value;\n\t\t\t},\n\n\t\t\t// computed property keys also work\n\t\t\t// with property accessors\n\t\t\tset [valueKey](value) {\n\t\t\t\tif (value < 0)\n\t\t\t\t\tthrow new Error('invalid value');\n\n\t\t\t\tthis._value = value;\n\t\t\t}\n\t\t};\n\t}\n\n\tlet car = getCar('Kia', 'Sorento', 40000);\n\n\t// output: {\n\t// make: 'Kia',\n\t// model:'Sorento',\n\t// _value: 40000,\n\t// makeKia: true,\n\t// depreciate: function(),\n\t// value: Getter\n\t// }\n\tconsole.log(car);\n\n\tcar.depreciate();\n\tcar.appreciate();\n\n\t// output: 38500\n\tconsole.log(car.value);\n}) ();\n"]} -------------------------------------------------------------------------------- /examples/transpiled-es5/enhanced-object-literals-traceur.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | function getCar(make, model, value) { 4 | var $__1; 5 | var valueKey = 'value', 6 | appreciateKey = 'appreciate'; 7 | return ($__1 = {}, Object.defineProperty($__1, "make", { 8 | value: make, 9 | configurable: true, 10 | enumerable: true, 11 | writable: true 12 | }), Object.defineProperty($__1, "model", { 13 | value: model, 14 | configurable: true, 15 | enumerable: true, 16 | writable: true 17 | }), Object.defineProperty($__1, "_value", { 18 | value: value, 19 | configurable: true, 20 | enumerable: true, 21 | writable: true 22 | }), Object.defineProperty($__1, 'make' + make, { 23 | value: true, 24 | configurable: true, 25 | enumerable: true, 26 | writable: true 27 | }), Object.defineProperty($__1, "depreciate", { 28 | value: function() { 29 | this.value -= 2500; 30 | }, 31 | configurable: true, 32 | enumerable: true, 33 | writable: true 34 | }), Object.defineProperty($__1, appreciateKey, { 35 | value: function() { 36 | this.value += 1000; 37 | }, 38 | configurable: true, 39 | enumerable: true, 40 | writable: true 41 | }), Object.defineProperty($__1, "value", { 42 | get: function() { 43 | return this._value; 44 | }, 45 | configurable: true, 46 | enumerable: true 47 | }), Object.defineProperty($__1, valueKey, { 48 | set: function(value) { 49 | if (value < 0) 50 | throw new Error('invalid value'); 51 | this._value = value; 52 | }, 53 | configurable: true, 54 | enumerable: true 55 | }), $__1); 56 | } 57 | var car = getCar('Kia', 'Sorento', 40000); 58 | console.log(car); 59 | car.depreciate(); 60 | car.appreciate(); 61 | console.log(car.value); 62 | })(); 63 | //# sourceMappingURL=enhanced-object-literals-traceur.js.map 64 | -------------------------------------------------------------------------------- /examples/transpiled-es5/enhanced-object-literals-traceur.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/enhanced-object-literals.js"],"names":[],"mappings":"AAAA,AAAC,SAAS,AAAD;AACR,aAAW,CAAC;AAEZ,SAAS,OAAK,CAAE,IAAG,CAAG,CAAA,KAAI,CAAG,CAAA,KAAI;;AAChC,AAAI,MAAA,CAAA,QAAO,EAAI,QAAM;AACpB,oBAAY,EAAI,aAAW,CAAC;AAE7B;WAKC,KAAG;;;;;WACH,MAAI;;;;;WAEI,MAAI;;;;kCAIX,CAAA,MAAK,EAAI,KAAG;WAAI,KAAG;;;;;WAIpB,UAAW,AAAD,CAAG;AACZ,WAAG,MAAM,GAAK,KAAG,CAAC;MACnB;;;;kCAIC,cAAY;WAAb,UAAgB,AAAD,CAAG;AACjB,WAAG,MAAM,GAAK,KAAG,CAAC;MACnB;;;;;oBAIY;AACX,aAAO,CAAA,IAAG,OAAO,CAAC;MACnB;;;kCAIK,SAAO;mBAAG,KAAI,CAAG;AACrB,WAAI,KAAI,EAAI,EAAA;AACX,cAAM,IAAI,MAAI,AAAC,CAAC,eAAc,CAAC,CAAC;AAAA,AAEjC,WAAG,OAAO,EAAI,MAAI,CAAC;MACpB;;;aACA;EACF;AAEA,AAAI,IAAA,CAAA,GAAE,EAAI,CAAA,MAAK,AAAC,CAAC,KAAI,CAAG,UAAQ,CAAG,MAAI,CAAC,CAAC;AAUzC,QAAM,IAAI,AAAC,CAAC,GAAE,CAAC,CAAC;AAEhB,IAAE,WAAW,AAAC,EAAC,CAAC;AAChB,IAAE,WAAW,AAAC,EAAC,CAAC;AAGhB,QAAM,IAAI,AAAC,CAAC,GAAE,MAAM,CAAC,CAAC;AACvB,CAAC,AAAE,EAAC,CAAC","file":"/Users/benmvp/github/benmvp/learning-es6/examples/transpiled-es5/enhanced-object-literals-traceur.js","sourcesContent":["(function() {\n\t'use strict';\n\n\tfunction getCar(make, model, value) {\n\t\tlet valueKey = 'value',\n\t\t\tappreciateKey = 'appreciate';\n\n\t\treturn {\n\t\t\t// with property value shorthand\n\t\t\t// syntax, you can omit the property\n\t\t\t// value if key matches variable\n\t\t\t// name\n\t\t\tmake, // same as make: make\n\t\t\tmodel, // same as model: model\n\n\t\t\t_value: value,\n\n\t\t\t// computed property keys now work with\n\t\t\t// object literals\n\t\t\t['make' + make]: true,\n\n\t\t\t// Method definition shorthand syntax\n\t\t\t// omits `function` keyword & colon\n\t\t\tdepreciate() {\n\t\t\t\tthis.value -= 2500;\n\t\t\t},\n\n\t\t\t// computed property keys also work\n\t\t\t// withe method definition shorthand\n\t\t\t[appreciateKey]() {\n\t\t\t\tthis.value += 1000;\n\t\t\t},\n\t\t\n\t\t\t// ES5 property accessors still work\n\t\t\t// the same\n\t\t\tget value() {\n\t\t\t\treturn this._value;\n\t\t\t},\n\n\t\t\t// computed property keys also work\n\t\t\t// with property accessors\n\t\t\tset [valueKey](value) {\n\t\t\t\tif (value < 0)\n\t\t\t\t\tthrow new Error('invalid value');\n\n\t\t\t\tthis._value = value;\n\t\t\t}\n\t\t};\n\t}\n\n\tlet car = getCar('Kia', 'Sorento', 40000);\n\n\t// output: {\n\t// make: 'Kia',\n\t// model:'Sorento',\n\t// _value: 40000,\n\t// makeKia: true,\n\t// depreciate: function(),\n\t// value: Getter\n\t// }\n\tconsole.log(car);\n\n\tcar.depreciate();\n\tcar.appreciate();\n\n\t// output: 38500\n\tconsole.log(car.value);\n}) ();\n"]} -------------------------------------------------------------------------------- /examples/transpiled-es5/iterators-iterables-babel.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })(); 4 | 5 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 6 | 7 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } 8 | 9 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 10 | 11 | (function () { 12 | 'use strict'; 13 | 14 | function isIterable(obj) { 15 | return obj && typeof obj[Symbol.iterator] === 'function'; 16 | } 17 | 18 | function take(iterable, count) { 19 | // get default `@@iterator` from original iterable 20 | var iterator = iterable[Symbol.iterator](); 21 | 22 | // return new (anonymous) iterable 23 | return _defineProperty({ 24 | next: function next() { 25 | // implementing `next()` makes it an iterator 26 | 27 | if (count > 0) { 28 | // if there are items remaining, return the next 29 | // one from the iterable 30 | count--; 31 | 32 | // return the value from original iterable's iterator. 33 | // if there are less values in it than `count`, this 34 | // will just return `{done: true}` early! 35 | return iterator.next(); 36 | } else { 37 | // otherwise just say we're done 38 | return { done: true }; 39 | } 40 | } 41 | }, Symbol.iterator, function () { 42 | // implementing default `@@iterator` makes it an iterable 43 | return this; 44 | }); 45 | } 46 | 47 | var values = ['alpha', 'beta', 'charlie']; 48 | var defaultIterator = values[Symbol.iterator](); 49 | 50 | // output: {value: 'alpha', done: false} 51 | console.log(defaultIterator.next()); 52 | 53 | // output: {value: 'beta', done: false} 54 | console.log(defaultIterator.next()); 55 | 56 | // output: {value: 'charlie', done: false} 57 | console.log(defaultIterator.next()); 58 | 59 | // output: {value: undefined, done: true} 60 | console.log(defaultIterator.next()); 61 | 62 | // output: true 63 | console.log(isIterable(values)); 64 | 65 | // output: true 66 | console.log(isIterable('Ben')); 67 | 68 | // output: true 69 | console.log(isIterable(new Set())); 70 | 71 | var MyIterator = (function () { 72 | function MyIterator() { 73 | _classCallCheck(this, MyIterator); 74 | 75 | this.step = 0; 76 | } 77 | 78 | _createClass(MyIterator, [{ 79 | key: Symbol.iterator, 80 | value: function value() { 81 | return this; 82 | } 83 | }, { 84 | key: 'next', 85 | value: function next() { 86 | this.step++; 87 | 88 | if (this.step === 1) return { value: 'Ben' };else if (this.step == 2) return { value: 'Ilegbodu' }; 89 | 90 | return { done: true }; 91 | } 92 | }]); 93 | 94 | return MyIterator; 95 | })(); 96 | 97 | var iter = new MyIterator(); 98 | 99 | // output: {value: 'Ben'} 100 | console.log(iter.next()); 101 | 102 | // output: {value: 'Ilegbodu'} 103 | console.log(iter.next()); 104 | 105 | // output: {done: true} 106 | console.log(iter.next()); 107 | 108 | // output: {done: true} 109 | console.log(iter.next()); 110 | 111 | var myIter2 = new MyIterator(); 112 | 113 | var _iteratorNormalCompletion = true; 114 | var _didIteratorError = false; 115 | var _iteratorError = undefined; 116 | 117 | try { 118 | for (var _iterator = myIter2[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { 119 | var item = _step.value; 120 | 121 | console.log(item); 122 | } 123 | } catch (err) { 124 | _didIteratorError = true; 125 | _iteratorError = err; 126 | } finally { 127 | try { 128 | if (!_iteratorNormalCompletion && _iterator['return']) { 129 | _iterator['return'](); 130 | } 131 | } finally { 132 | if (_didIteratorError) { 133 | throw _iteratorError; 134 | } 135 | } 136 | } 137 | 138 | var fibonacci = _defineProperty({}, Symbol.iterator, function () { 139 | var previous = 0, 140 | current = 1; 141 | return { 142 | next: function next() { 143 | var _ref2 = [current, previous + current]; 144 | previous = _ref2[0]; 145 | current = _ref2[1]; 146 | 147 | return { value: current }; 148 | } 149 | }; 150 | }); 151 | 152 | // iterables with `for-of` loop 153 | var _iteratorNormalCompletion2 = true; 154 | var _didIteratorError2 = false; 155 | var _iteratorError2 = undefined; 156 | 157 | try { 158 | for (var _iterator2 = fibonacci[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { 159 | var number = _step2.value; 160 | 161 | // stop after the number is greater than 1000 162 | if (number > 1000) break; 163 | 164 | console.log(number); 165 | } 166 | 167 | // iterables w/ destructuring 168 | } catch (err) { 169 | _didIteratorError2 = true; 170 | _iteratorError2 = err; 171 | } finally { 172 | try { 173 | if (!_iteratorNormalCompletion2 && _iterator2['return']) { 174 | _iterator2['return'](); 175 | } 176 | } finally { 177 | if (_didIteratorError2) { 178 | throw _iteratorError2; 179 | } 180 | } 181 | } 182 | 183 | var _fibonacci2 = _slicedToArray(fibonacci, 4); 184 | 185 | var secondFib = _fibonacci2[1]; 186 | var fourthFib = _fibonacci2[3]; 187 | 188 | // output: 2, 5 189 | console.log(secondFib, fourthFib); 190 | 191 | // output: [1, 2, 3, 5, 8, 13] 192 | console.log(Array.from(take(fibonacci, 6))); 193 | })(); 194 | 195 | //# sourceMappingURL=iterators-iterables-babel.js.map -------------------------------------------------------------------------------- /examples/transpiled-es5/iterators-iterables-babel.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../es6/iterators-iterables.js"],"names":[],"mappings":";;;;;;;;;;AAAA,CAAC,YAAW;AACX,aAAY,CAAC;;AAEb,UAAS,UAAU,CAAC,GAAG,EAAE;AACxB,SAAO,GAAG,IAAI,OAAO,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,UAAU,CAAC;EACzD;;AAED,UAAS,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE;;AAE3B,MAAI,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC;;;AAG3C;AACI,OAAI,EAAA,gBAAG;;;AAGH,QAAI,KAAK,GAAG,CAAC,EAAE;;;AAGX,UAAK,EAAE,CAAC;;;;;AAMR,YAAO,QAAQ,CAAC,IAAI,EAAE,CAAC;KAC1B,MACI;;AAED,YAAO,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC;KACvB;IACJ;KACA,MAAM,CAAC,QAAQ,EAAC,YAAG;;AAEhB,UAAO,IAAI,CAAC;GACf,EACH;EACL;;AAED,KAAI,MAAM,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;AAC1C,KAAI,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC;;;AAGhD,QAAO,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;;;AAGpC,QAAO,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;;;AAGpC,QAAO,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;;;AAGpC,QAAO,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;;;AAGpC,QAAO,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;;;AAGhC,QAAO,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;;;AAG/B,QAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC;;KAE7B,UAAU;AACD,WADT,UAAU,GACE;yBADZ,UAAU;;AAER,OAAI,CAAC,IAAI,GAAG,CAAC,CAAC;GACjB;;eAHC,UAAU;QAIX,MAAM,CAAC,QAAQ;UAAC,iBAAG;AAChB,WAAO,IAAI,CAAC;IACf;;;UACG,gBAAG;AACH,QAAI,CAAC,IAAI,EAAE,CAAC;;AAEZ,QAAI,IAAI,CAAC,IAAI,KAAK,CAAC,EACf,OAAO,EAAC,KAAK,EAAE,KAAK,EAAC,CAAC,KACrB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,EACnB,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,CAAC;;AAE/B,WAAO,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC;IACvB;;;SAhBC,UAAU;;;AAmBhB,KAAI,IAAI,GAAG,IAAI,UAAU,EAAE,CAAC;;;AAG5B,QAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;;;AAGzB,QAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;;;AAGzB,QAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;;;AAGzB,QAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;;AAEzB,KAAI,OAAO,GAAG,IAAI,UAAU,EAAE,CAAC;;;;;;;AAE/B,uBAAiB,OAAO,8HAAE;OAAjB,IAAI;;AACT,UAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;GACrB;;;;;;;;;;;;;;;;AAED,KAAI,SAAS,uBACR,MAAM,CAAC,QAAQ,EAAC,YAAG;AAChB,MAAI,QAAQ,GAAG,CAAC;MAAE,OAAO,GAAG,CAAC,CAAC;AAC9B,SAAO;AACH,OAAI,EAAA,gBAAG;gBACmB,CAAC,OAAO,EAAE,QAAQ,GAAG,OAAO,CAAC;AAAlD,YAAQ;AAAE,WAAO;;AAClB,WAAO,EAAC,KAAK,EAAE,OAAO,EAAC,CAAC;IAC3B;GACJ,CAAA;EACJ,CACJ,CAAA;;;;;;;;AAGD,wBAAmB,SAAS,mIAAE;OAArB,MAAM;;;AAEX,OAAI,MAAM,GAAG,IAAI,EACb,MAAM;;AAEV,UAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;GACvB;;;;;;;;;;;;;;;;;;kCAGgC,SAAS;;KAAnC,SAAS;KAAI,SAAS;;;AAG7B,QAAO,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;;;AAGlC,QAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;CAC5C,CAAA,EAAI,CAAC","file":"iterators-iterables-babel.js","sourcesContent":["(function() {\n\t'use strict';\n\n\tfunction isIterable(obj) {\n\t\treturn obj && typeof obj[Symbol.iterator] === 'function';\n\t}\n\n\tfunction take(iterable, count) {\n\t // get default `@@iterator` from original iterable\n\t let iterator = iterable[Symbol.iterator]();\n\n\t // return new (anonymous) iterable\n\t return {\n\t next() {\n\t // implementing `next()` makes it an iterator\n\n\t if (count > 0) {\n\t // if there are items remaining, return the next\n\t // one from the iterable\n\t count--;\n\n\n\t\t\t\t\t// return the value from original iterable's iterator.\n\t\t\t\t\t// if there are less values in it than `count`, this\n\t\t\t\t\t// will just return `{done: true}` early!\n\t return iterator.next();\n\t }\n\t else {\n\t // otherwise just say we're done\n\t return {done: true};\n\t }\n\t },\n\t [Symbol.iterator]() {\n\t // implementing default `@@iterator` makes it an iterable\n\t return this;\n\t }\n\t };\n\t}\n\n\tlet values = ['alpha', 'beta', 'charlie'];\n\tlet defaultIterator = values[Symbol.iterator]();\n\n\t// output: {value: 'alpha', done: false}\n\tconsole.log(defaultIterator.next());\n\n\t// output: {value: 'beta', done: false}\n\tconsole.log(defaultIterator.next());\n\n\t// output: {value: 'charlie', done: false}\n\tconsole.log(defaultIterator.next());\n\n\t// output: {value: undefined, done: true}\n\tconsole.log(defaultIterator.next());\n\n\t// output: true\n\tconsole.log(isIterable(values));\n\n\t// output: true\n\tconsole.log(isIterable('Ben'));\n\n\t// output: true\n\tconsole.log(isIterable(new Set()));\n\n\tclass MyIterator {\n\t constructor() {\n\t this.step = 0;\n\t }\n\t [Symbol.iterator]() {\n\t return this;\n\t }\n\t next() {\n\t this.step++;\n\n\t if (this.step === 1)\n\t return {value: 'Ben'};\n\t else if (this.step == 2)\n\t return {value: 'Ilegbodu'};\n\n\t return {done: true};\n\t }\n\t}\n\n\tlet iter = new MyIterator();\n\n\t// output: {value: 'Ben'}\n\tconsole.log(iter.next());\n\n\t// output: {value: 'Ilegbodu'}\n\tconsole.log(iter.next());\n\n\t// output: {done: true}\n\tconsole.log(iter.next());\n\n\t// output: {done: true}\n\tconsole.log(iter.next());\n\n\tlet myIter2 = new MyIterator();\n\n\tfor (let item of myIter2) {\n\t console.log(item);\n\t}\n\n\tlet fibonacci = {\n\t [Symbol.iterator]() {\n\t let previous = 0, current = 1;\n\t return {\n\t next() {\n\t [previous, current] = [current, previous + current];\n\t return {value: current};\n\t }\n\t }\n\t }\n\t}\n\n\t// iterables with `for-of` loop\n\tfor (var number of fibonacci) {\n\t // stop after the number is greater than 1000\n\t if (number > 1000)\n\t break;\n\n\t console.log(number);\n\t}\n\n\t// iterables w/ destructuring\n\tlet [, secondFib, , fourthFib] = fibonacci;\n\n\t// output: 2, 5\n\tconsole.log(secondFib, fourthFib);\n\n\t// output: [1, 2, 3, 5, 8, 13]\n\tconsole.log(Array.from(take(fibonacci, 6)));\n}) ();\n"]} -------------------------------------------------------------------------------- /examples/transpiled-es5/iterators-iterables-traceur.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | var $__18, 4 | $__19; 5 | var $__2; 6 | function isIterable(obj) { 7 | return obj && typeof obj[Symbol.iterator] === 'function'; 8 | } 9 | function take(iterable, count) { 10 | var $__2; 11 | var iterator = iterable[Symbol.iterator](); 12 | return ($__2 = {}, Object.defineProperty($__2, "next", { 13 | value: function() { 14 | if (count > 0) { 15 | count--; 16 | return iterator.next(); 17 | } else { 18 | return {done: true}; 19 | } 20 | }, 21 | configurable: true, 22 | enumerable: true, 23 | writable: true 24 | }), Object.defineProperty($__2, Symbol.iterator, { 25 | value: function() { 26 | return this; 27 | }, 28 | configurable: true, 29 | enumerable: true, 30 | writable: true 31 | }), $__2); 32 | } 33 | var values = ['alpha', 'beta', 'charlie']; 34 | var defaultIterator = values[Symbol.iterator](); 35 | console.log(defaultIterator.next()); 36 | console.log(defaultIterator.next()); 37 | console.log(defaultIterator.next()); 38 | console.log(defaultIterator.next()); 39 | console.log(isIterable(values)); 40 | console.log(isIterable('Ben')); 41 | console.log(isIterable(new Set())); 42 | var MyIterator = function() { 43 | var $__2; 44 | function MyIterator() { 45 | this.step = 0; 46 | } 47 | return ($traceurRuntime.createClass)(MyIterator, ($__2 = {}, Object.defineProperty($__2, Symbol.iterator, { 48 | value: function() { 49 | return this; 50 | }, 51 | configurable: true, 52 | enumerable: true, 53 | writable: true 54 | }), Object.defineProperty($__2, "next", { 55 | value: function() { 56 | this.step++; 57 | if (this.step === 1) 58 | return {value: 'Ben'}; 59 | else if (this.step == 2) 60 | return {value: 'Ilegbodu'}; 61 | return {done: true}; 62 | }, 63 | configurable: true, 64 | enumerable: true, 65 | writable: true 66 | }), $__2), {}); 67 | }(); 68 | var iter = new MyIterator(); 69 | console.log(iter.next()); 70 | console.log(iter.next()); 71 | console.log(iter.next()); 72 | console.log(iter.next()); 73 | var myIter2 = new MyIterator(); 74 | var $__6 = true; 75 | var $__7 = false; 76 | var $__8 = undefined; 77 | try { 78 | for (var $__4 = void 0, 79 | $__3 = (myIter2)[Symbol.iterator](); !($__6 = ($__4 = $__3.next()).done); $__6 = true) { 80 | var item = $__4.value; 81 | { 82 | console.log(item); 83 | } 84 | } 85 | } catch ($__9) { 86 | $__7 = true; 87 | $__8 = $__9; 88 | } finally { 89 | try { 90 | if (!$__6 && $__3.return != null) { 91 | $__3.return(); 92 | } 93 | } finally { 94 | if ($__7) { 95 | throw $__8; 96 | } 97 | } 98 | } 99 | var fibonacci = ($__2 = {}, Object.defineProperty($__2, Symbol.iterator, { 100 | value: function() { 101 | var previous = 0, 102 | current = 1; 103 | return {next: function() { 104 | var $__17, 105 | $__18, 106 | $__19; 107 | ($__17 = [current, previous + current], previous = ($__18 = $__17[Symbol.iterator](), ($__19 = $__18.next()).done ? void 0 : $__19.value), current = ($__19 = $__18.next()).done ? void 0 : $__19.value, $__17); 108 | return {value: current}; 109 | }}; 110 | }, 111 | configurable: true, 112 | enumerable: true, 113 | writable: true 114 | }), $__2); 115 | var $__13 = true; 116 | var $__14 = false; 117 | var $__15 = undefined; 118 | try { 119 | for (var $__11 = void 0, 120 | $__10 = (fibonacci)[Symbol.iterator](); !($__13 = ($__11 = $__10.next()).done); $__13 = true) { 121 | var number = $__11.value; 122 | { 123 | if (number > 1000) 124 | break; 125 | console.log(number); 126 | } 127 | } 128 | } catch ($__16) { 129 | $__14 = true; 130 | $__15 = $__16; 131 | } finally { 132 | try { 133 | if (!$__13 && $__10.return != null) { 134 | $__10.return(); 135 | } 136 | } finally { 137 | if ($__14) { 138 | throw $__15; 139 | } 140 | } 141 | } 142 | var $__17 = fibonacci, 143 | secondFib = ($__18 = $__17[Symbol.iterator](), $__18.next(), ($__19 = $__18.next()).done ? void 0 : $__19.value), 144 | fourthFib = ($__18.next(), ($__19 = $__18.next()).done ? void 0 : $__19.value); 145 | console.log(secondFib, fourthFib); 146 | console.log(Array.from(take(fibonacci, 6))); 147 | })(); 148 | //# sourceMappingURL=iterators-iterables-traceur.js.map 149 | -------------------------------------------------------------------------------- /examples/transpiled-es5/parameter-handling-traceur.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | var $__6, 4 | $__7; 5 | { 6 | { 7 | var getData = function(data) { 8 | var useCache = arguments[1] !== (void 0) ? arguments[1] : true; 9 | if (useCache) { 10 | console.log('using cache for', data); 11 | } else { 12 | console.log('not using cache', data); 13 | } 14 | }; 15 | getData(); 16 | getData({q: 'churches+in+Pittsburg'}); 17 | getData({q: 'bbq+in+Nashville'}, undefined); 18 | getData({q: 'conferences+in+California'}, true); 19 | getData({q: 'Houston+Rockets'}, false); 20 | } 21 | { 22 | var getWidth = function() { 23 | console.log('getWidth called'); 24 | return 7; 25 | }, 26 | drawRect = function() { 27 | var width = arguments[0] !== (void 0) ? arguments[0] : getWidth(); 28 | var height = arguments[1] !== (void 0) ? arguments[1] : width * 2; 29 | var options = arguments[2] !== (void 0) ? arguments[2] : {color: 'red'}; 30 | console.log(width, height, options); 31 | }; 32 | drawRect(); 33 | drawRect(17); 34 | drawRect(4, 11); 35 | drawRect(7.5, 11, {color: 'blue'}); 36 | } 37 | { 38 | var drawCube = function(x) { 39 | var y = arguments[1] !== (void 0) ? arguments[1] : 7; 40 | var z = arguments[2]; 41 | console.log('cube', x, y, z); 42 | }; 43 | drawCube(); 44 | drawCube(2.5); 45 | drawCube(9, 15); 46 | drawCube(4, 1.7, 18); 47 | drawCube(11, undefined, 8.8); 48 | drawCube(14, null, 72); 49 | } 50 | { 51 | console.log([1, undefined, 5].map(function() { 52 | var x = arguments[0] !== (void 0) ? arguments[0] : 100; 53 | return x * 2; 54 | })); 55 | } 56 | } 57 | { 58 | { 59 | var join = function(separator) { 60 | for (var values = [], 61 | $__1 = 1; $__1 < arguments.length; $__1++) 62 | values[$__1 - 1] = arguments[$__1]; 63 | return values.join(separator); 64 | }; 65 | console.log(join('//', 'one', 'two', 'three')); 66 | } 67 | { 68 | var maxA = function() { 69 | var $__6, 70 | $__7; 71 | for (var values = [], 72 | $__2 = 0; $__2 < arguments.length; $__2++) 73 | values[$__2] = arguments[$__2]; 74 | if (values.length > 3) 75 | throw Error('max 3 parameters allowed!'); 76 | var $__5 = values, 77 | a = ($__6 = $__5[Symbol.iterator](), ($__7 = $__6.next()).done ? void 0 : $__7.value), 78 | b = ($__7 = $__6.next()).done ? void 0 : $__7.value, 79 | c = ($__7 = $__6.next()).done ? void 0 : $__7.value; 80 | return Math.max(a, b, c); 81 | }; 82 | console.log(maxA(1, 2, 3)); 83 | var maxB = function(a, b, c) { 84 | for (var shouldBeEmpty = [], 85 | $__3 = 3; $__3 < arguments.length; $__3++) 86 | shouldBeEmpty[$__3 - 3] = arguments[$__3]; 87 | if (shouldBeEmpty.length > 0) 88 | throw Error('max 3 parameters allowed!'); 89 | return Math.max(a, b, c); 90 | }; 91 | console.log(maxB(4, 5, 6)); 92 | } 93 | } 94 | { 95 | { 96 | var volume = function(width, length, height) { 97 | return width * length * height; 98 | }; 99 | console.log(volume.apply(undefined, [5.3, 4.9, 6.8])); 100 | console.log(volume.apply((void 0), $traceurRuntime.spread([2, 8, 5]))); 101 | } 102 | { 103 | var merge = function() { 104 | for (var objects = [], 105 | $__4 = 0; $__4 < arguments.length; $__4++) 106 | objects[$__4] = arguments[$__4]; 107 | var masterObj = {}; 108 | for (var i = 0; i < objects.length; i++) { 109 | var obj = objects[i]; 110 | ; 111 | for (var key in obj) 112 | masterObj[key] = obj[key]; 113 | } 114 | return masterObj; 115 | }; 116 | var objectsList = [{ 117 | count: 5, 118 | delay: 2000, 119 | early: true, 120 | message: 'Hello' 121 | }, {early: false}]; 122 | var merged = merge.apply((void 0), $traceurRuntime.spread([{count: 10}], objectsList, [{delay: 1500}])); 123 | console.log(merged); 124 | } 125 | { 126 | var list = [9, 8, 7, 6, 5], 127 | $__5 = list, 128 | first = ($__6 = $__5[Symbol.iterator](), ($__7 = $__6.next()).done ? void 0 : $__7.value), 129 | second = ($__7 = $__6.next()).done ? void 0 : $__7.value, 130 | rest = $traceurRuntime.iteratorToArray($__6); 131 | console.log(rest, second, first); 132 | console.log($traceurRuntime.spread([11, 10], list)); 133 | } 134 | } 135 | { 136 | var ajax = function(url) { 137 | var $__9, 138 | $__10; 139 | var $__8 = arguments[1] !== (void 0) ? arguments[1] : {}, 140 | method = ($__9 = $__8.method) === void 0 ? 'GET' : $__9, 141 | delay = ($__10 = $__8.delay) === void 0 ? 1000 : $__10, 142 | callback = $__8.callback; 143 | console.log(url, method, delay); 144 | setTimeout(function() { 145 | return callback('DONE!'); 146 | }, delay); 147 | }; 148 | ajax('http://api.eventbrite.com/get', { 149 | delay: 2000, 150 | method: 'POST', 151 | callback: function(message) { 152 | console.log(message); 153 | } 154 | }); 155 | } 156 | })(); 157 | //# sourceMappingURL=parameter-handling-traceur.js.map 158 | -------------------------------------------------------------------------------- /examples/transpiled-es5/promises-traceur.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | function wait(delay) { 4 | return new Promise(function(resolve, reject) { 5 | setTimeout(resolve, delay); 6 | }); 7 | } 8 | function fetch(url) { 9 | return new Promise(function(resolve, reject) { 10 | var request = new XMLHttpRequest(); 11 | request.open('GET', url); 12 | request.onload = function() { 13 | if (req.status == 200) { 14 | resolve(request.responseText); 15 | } else { 16 | reject(new Error('request failed!')); 17 | } 18 | }; 19 | request.send(); 20 | }); 21 | } 22 | function fetchAll() { 23 | for (var urls = [], 24 | $__1 = 0; $__1 < arguments.length; $__1++) 25 | urls[$__1] = arguments[$__1]; 26 | return Promise.all(urls.map(fetch)); 27 | } 28 | function timeout(delay) { 29 | return wait(delay).then(function() { 30 | throw new Error('Timed out!'); 31 | }); 32 | } 33 | function fetchWithTimeout(url, delay) { 34 | return Promise.race([fetch(url), timeout(delay)]); 35 | } 36 | wait(3000).then(function() { 37 | console.log('3 seconds have passed!'); 38 | return wait(2000); 39 | }).then(function() { 40 | console.log('5 seconds have passed!'); 41 | x++; 42 | }).catch(function(error) { 43 | console.log(error); 44 | }).then(function() { 45 | console.log('clean up'); 46 | }); 47 | fetch('/json/action-movies.json').then(function(response) { 48 | var data = JSON.parse(response); 49 | console.log('main data', data); 50 | return fetch(data.url); 51 | }).then(function(response) { 52 | console.log('inner data', response); 53 | }).catch(function(e) { 54 | console.error(e); 55 | }); 56 | Promise.resolve('sin').then(function(problem) { 57 | console.log(problem); 58 | }); 59 | console.log('this executes before the fulfillment'); 60 | Promise.reject(new Error('Pride!')).catch(function(e) { 61 | console.error(e); 62 | }); 63 | console.log('this executes before the rejection'); 64 | var fetchPromise = fetch('/json/scary-movies.json'); 65 | console.log(Promise.resolve(fetchPromise) == fetchPromise); 66 | console.log(Promise.reject(fetchPromise) == fetchPromise); 67 | Promise.resolve({then: function(resolve, reject) { 68 | resolve('Ben'); 69 | }}).then(function(name) { 70 | console.log({name: name}); 71 | }); 72 | var $fetch = function(url) { 73 | return Promise.resolve($.get(url)); 74 | }; 75 | $fetch('/json/romantic-movies.json').then(function(response) { 76 | console.log('response', response); 77 | }); 78 | Promise.resolve('Ben').then(function(firstName) { 79 | console.log(firstName); 80 | return firstName + ' A.'; 81 | }).then(function(firstAndMiddle) { 82 | console.log(firstAndMiddle); 83 | return firstAndMiddle + ' Ilegbodu'; 84 | }).then(function(fullName) { 85 | console.log(fullName); 86 | }); 87 | Promise.resolve().then(function() { 88 | throw new Error('oh no!'); 89 | }).catch(function(e) { 90 | console.error(e); 91 | throw new Error('again?!?!'); 92 | }).catch(function(e) { 93 | console.error(e); 94 | }); 95 | fetch('/json/bad-data.json').catch(function() { 96 | return JSON.stringify({name: 'Ben Ilegbodu'}); 97 | }).then(function(response) { 98 | console.log(response); 99 | }); 100 | Promise.reject(new Error('FAIL!')).then(function() {}).then(function() {}).catch(function(e) { 101 | console.error(e); 102 | }); 103 | fetchAll('/json/funny-movies.json', '/json/action-movies.json', '/json/scary-movies.json', '/json/romantic-movies.json', '/json/sad-movies.json').then(function(responses) { 104 | console.log(responses.length); 105 | }).catch(function(e) { 106 | console.error('one or more of the requests failed!', e); 107 | }); 108 | fetchWithTimeout('/json/sad-movies.json', 5).then(function(response) { 109 | console.log('successful response', response); 110 | }).catch(function(e) { 111 | console.error('request error', e); 112 | }); 113 | })(); 114 | //# sourceMappingURL=promises-traceur.js.map 115 | -------------------------------------------------------------------------------- /examples/transpiled-es5/template-literals-babel.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _templateObject = _taggedTemplateLiteral(['\t\tThis is not a\n multi-line string!'], ['\\t\\tThis is not a\\n multi-line string!']), 4 | _templateObject2 = _taggedTemplateLiteral(['(', ')'], ['\\(', '\\)']), 5 | _templateObject3 = _taggedTemplateLiteral(['Name: ', ', ', ''], ['Name: ', ', ', '']), 6 | _templateObject4 = _taggedTemplateLiteral(['\t\tThis ', ' is not a\n multi-line string!'], ['\\t\\tThis ', ' is not a\\n multi-line string!']); 7 | 8 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } 9 | 10 | (function () { 11 | 'use strict'; 12 | 13 | { 14 | // simple examples 15 | var firstName = 'Ben', 16 | lastName = 'Ilegbodu'; 17 | 18 | // Basic template literal is surrounding by 19 | // backticks so single/double quotes do need 20 | // to be escaped 21 | // output: He said, "It's your fault!" 22 | console.log('He said, "It\'s your fault!"'); 23 | 24 | // Template literals support interpolation. 25 | // The values within `firstName` and `lastName` 26 | // are substituted into where the tokens are 27 | // output: Name: Ilegbodu, Ben 28 | console.log('Name: ' + lastName + ', ' + firstName); 29 | 30 | // Template literals support multi-line strings 31 | // output: This is 32 | // multi-line text, so that 33 | // newline characters are 34 | // 35 | // 36 | // not needed. All whitespace 37 | // is respected, including tabs. 38 | // 39 | // 40 | console.log('This is\n\t\t\tmulti-line text, so that\n\t\t\tnewline characters are\n\n\n\t\t\tnot needed. All whitespace\n\t\t\t\tis respected, including tabs.\n\n\t\t'); 41 | } 42 | 43 | { 44 | // template literals are strings 45 | var templateLiteral = 'This is a literal'; 46 | 47 | // output: string 48 | console.log(typeof templateLiteral); 49 | 50 | // output: 17 51 | console.log(templateLiteral.length); 52 | 53 | // output: is a literal 54 | console.log(templateLiteral.substr(5)); 55 | 56 | // output: a 57 | console.log(templateLiteral.charAt(8)); 58 | } 59 | 60 | { 61 | // template literals using expression interpolation 62 | var timeOfDay = new Date().getHours(), 63 | mealCost = 7.99, 64 | tax = 0.09; 65 | 66 | // any sort of expression can go inside the 67 | // substitution token 68 | // output: Morning/Evening meal: $8.71 69 | console.log((timeOfDay < 12 ? 'Morning' : 'Evening') + ' meal: $' + (mealCost * (1 + tax)).toFixed(2)); 70 | 71 | var replacements = { 72 | firstName: 'Ben', 73 | lastName: 'Ilegbodu' 74 | }; 75 | var firstName = replacements.firstName; 76 | var lastName = replacements.lastName; 77 | 78 | // you have to destructure an object first in order 79 | // to use its key-values as substitution values 80 | // output: Name: Ilegbodu, Ben 81 | console.log('Name: ' + lastName + ', ' + firstName); 82 | 83 | // output: Name: ${lastName}, Ben 84 | console.log('Name: ${lastName}, ' + firstName); 85 | } 86 | 87 | { 88 | // multi-line template literals + interpolation 89 | var eventCardInfo = { 90 | title: 'Nodevember 2015', 91 | url: 'http://nodevember.org/', 92 | tagline: 'Two days of Node and JavaScript', 93 | tags: ['JavaScript', 'Node'] 94 | }; 95 | var title = eventCardInfo.title; 96 | var url = eventCardInfo.url; 97 | var tagline = eventCardInfo.tagline; 98 | var tags = eventCardInfo.tags; 99 | var html = '' + tagline + '
\n\t\t\t\t\t\t" + tagline + "
\n\t\t\t\t\t\t