Modern JavaScript Baumgartner - @ddprrt - Nov 2020
Brendan Eich
JS had to “look like Java” only less so, be Java’s dumb kid brother or boy- hostage sidekick.
Plus, I had to be done in ten days or something worse than JS would have happened.
Java Perl HyperTalk Strings, Arrays, Syntax Event Handlers Regular Expressions Self Scheme AWK Prototype inheritance Closures functions
Eich’s subversive Agenda • Objects without classes • First class functions • Closures • Prototypes • Some Java in f luences
Eich’s subversive Agenda var person = { • Objects without classes name: "Stefan", age: 38 • First class functions } • Closures • Prototypes • Some Java in f luences
Eich’s subversive Agenda function greet(name) { • Objects without classes alert("Hello " + name) } • First class functions • Closures function stefanize(funcs) { funcs("Stefan") • Prototypes } • Some Java in f luences stefanize(greet)
Eich’s subversive Agenda function greet(name) { • Objects without classes return function(greeting) { • First class functions alert(greeting + ", " + name) } • Closures } • Prototypes greet("Stefan")("Salut") • Some Java in f luences
Eich’s subversive Agenda • Objects without classes var lifeform = { Person.prototype = lifeform greet: function() { Dog.prototype = lifeform alert("Hello, " + this.name) • First class functions }, var stefan = new Person("Stefan") species: function() { stefan.greet() alert("I am a " + this.species) • Closures } var waldi = new Dog( } “Waldi”, “Dackel” ) • Prototypes function Person(name) { waldi.greet() this.name = name this.species = "Human" • Some Java in f luences } function Dog(name, kind) { this.name = name this.species = "Dog" this.kind = kind }
Eich’s subversive Agenda • Objects without classes • First class functions • Closures • Prototypes • Some Java in f luences
Eich’s subversive Agenda �/0 types as objects • Objects without classes var message = new String("Hello") • First class functions • Closures • Prototypes • Some Java in f luences
Eich’s subversive Agenda �/0 types as objects • Objects without classes var message = new String("Hello") • First class functions • Closures �/0 And the Y2K bug in Date • Prototypes • Some Java in f luences
Eich’s subversive Agenda �/0 types as objects • Objects without classes var message = new String("Hello") • First class functions • Closures �/0 And the Y2K bug in Date • Prototypes • Some Java in f luences
JavaScript is what comes after C if C++ never happened Stefan Baumgartner
JavaScript is Lisp in C’s clothing. Bryan Cantrill
JavaScript’s inception 1995
1996 Introduction of JScript 1995
1996 1997 ECMAScript Standardization 1995
1999 1996 ECMAScript 3 RegEx, better String handling try/catch, etc. 1997 1995
1999 1996 1997 ECMAScript 4 abandoned 1995 2003 Classes, interfaces, types, …
1999 2009 1996 ECMAScript 5 “strict” mode, property descriptors JSON, …. 1997 1995 2003
1999 2009 1996 1997 1995 2003
1999 2009 1996 1997 1995 2003 2015 ECMAScript 6 / ES2015 Classes, modules, better for loops Destructuring, Promises, Arrow functions Generators …
1999 2009 1996 1997 1995 2003 2015
1999 2009 2017 2018 1996 2016 1997 1995 2003 2015
https://www.ecma-international.org/activities/Languages/Language%20overview.pdf
Modern JavaScript in Action
Block scope assignments �/0 ES5 �/0 ES6+ var x = 0 let x = 0 if(someCondition) { if(someCondition) { var x = 1 let x = 1 } } console.log(x) �/0 x �=> 1 console.log(x) �/0 x �=> 0
Const assignments const x = "Stefan" const person = { name: "Stefan" x = 2 } �/0 Uncaught TypeError: person.age = 38 �/0 Assignment to constant variable. person.name = "Not Stefan" const assignments are block scoped const assignments are immutable reference assignments Objects, Arrays, Sets can still be mutated
Destructuring const position = [10, 20] const x = position[0] const y = position[1] �/0 Destructuring! const [x, y] = position const [a, b, ��../ rest] = [1, 2, 3, 4, 5]; �/0 rest operator ��../ console.log(a); �/0 1 console.log(b); �/0 2 console.log(rest); �/0 [3, 4, 5]
Destructuring function getPosition() { return { x: 50, y: 200, z: 13 }; } const { x, y } = getPosition(); �/0 renames const { z : zIndex } = getPosition(); �/0 defaults const { a = 0 } = getPosition();
Object creation �/0 ES5 var name = "Stefan"; var age = 38; var person = { name: name, age: age, whoami: function() { return "I am " + this.name + " and I am " + this.age + "years old" } }
Object creation �/0 ES6+ const name = "Stefan"; const age = 38; const person = { name, age, whoami() { �/0 String template literals return `I am ${this.name} and I am ${this.age} years old` } } Template literals can have any expression within ${} and are multiline
for loops for (let value of myArray) { �/0 ��../ } for (let index of myArray.keys()) { �/0 ��../ } for (let [index, value] of myArray.entries()) { �/0 ��../ } for (let key in myObject) { }
Functions �/0 Default parameters function setVAT(price, vat = 0.2) { return price * (1 + vat) } �/0 Destructuring function printPerson({ name, age }) { �/0��../ } �/0 Rest arguments function recursivePrint(el, ��../ rest) { console.log(el); recursivePrint(rest) } recursivePrint(1, 2, 3, 4, 5, 6)
Arrow functions const shout = (name) �=? name.toUpperCase() Arrow functions are strictly anonymous Adding a block { } after the arrow requires a return statement Wrap objects in parens to return them immediately Arrow functions are lexical scoped: this is either module scope, class scope, or last function scope
Spread operator �/0 passing arguments as list fn(1, 2, 3) �/0 as array fn( ��../ [1, 2, 3]) �/0 concatenation �/0 z �=> [1, 2, 3, 4, 5, 6, 7] const z = [1, 2, ��../ [3, 4, 5], 6, 7] �/0 cast lists to arrays const imgs = [ ��../ document.querySelectorAll("img")] �/0 merge Objects const person = { ��../ nameAndAge, ��../ personFunctions }
Classes �/0 ES5 �/0 ES6+ function Car () { class Car { this.fuel = 0; constructor () { this.distance = 0; this.fuel = 0 } this.distance = 0 } Car.prototype.move = function () { move () { this.fuel �-. ; this.distance += 2; this.fuel �-. ; this.distance += 2; } } addFuel () { Car.prototype.addFuel = function () { this.fuel �+, ; this.fuel �+, } } }
Notes on classes Classes are - Syntactic sugar for prototype / constructor function Object generation - A more convenient way to add getters, setters, and private properties - A more convenient way to add to the prototype chain via extends Classes are not - A type - An abstraction - Java
Things left out - Maps, Sets, WeakMaps, WeakSets - New functions in Array, Object, Number, String - Re f lection, Proxies, generator functions - Symbols and Iterators - ECMAScript modules - async / await and Promises (we might do that in live coding…)
Wrapping up - JavaScript is not a toy language anymore —> powerful constructs! - ECMAScript standards are released once per year - Objects and functions are still at the heart of JavaScript, it just gets more conventient - Convenience functions are idiomatic —> use them
TypeScript Baumgartner - @ddprrt - Nov 2020
1100001010100011 49827 -15709 £ …
What is a type?
A type is a classi f ication of data that de f ines the operations that can be done on that data, the meaning of the data, and the set of allowed values. Vlad Riscutia
Typing is checked by the compiler and/or run time to ensure the integrity of the data, enforce access restrictions, and interpret the data as meant by the developer. Vlad Riscutia
Does JavaScript have types
http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf
Type Hierarchy in JavaScript https://exploringjs.com/impatient-js/ch_values.html
Type Hierarchy in TypeScript
TypeScript is a superset of JavaScript TS JS
1999 2009 2017 2018 1996 2016 1997 2015 1995 2003 ECMAScript 6 / ES2015
1999 2009 2017 2018 1996 2016 1997 2015 1995 2003 ECMAScript 6 / ES2015 2011 TypeScript’s inception
Anders Hejlsberg
https://channel9.msdn.com/Shows/Going+Deep/Anders-Hejlsberg-and-Lars-Bak-TypeScript-JavaScript-and-Dart
TypeScript is JavaScript!
⭐ Open Source and Open Development " Closely track ECMAScript standard # Innovate in type system $ Best of breed tooling ⏬ Continually lower barrier to entry & Community, community, community
Recommend
More recommend
