SlideShare a Scribd company logo
WHAT’S NEW IN
JAVASCRIPT?
Sabre Labs • Lunch-n-Learn / Tech Talk • Aug 1, 2018
WHY DOES IT MATTER?
MORE DATA
Source: octoverse.github.com
“The State of the Octoverse 2017”
REALLY?
Yes, really.

Recommended for you

Avoiding Callback Hell with Async.js
Avoiding Callback Hell with Async.jsAvoiding Callback Hell with Async.js
Avoiding Callback Hell with Async.js

This talk was given at JSSummit 2013. Entitled "Avoiding Callback Hell with Async.js", my talk focused on common pitfalls with asynchronous functions and callbacks in JavaScript, and using the async.js library and its advanced control flows to create cleaner, more manageable code.

node.jsnodejavascript
Asynchronní programování
Asynchronní programováníAsynchronní programování
Asynchronní programování

Držte si klobouky, protože se proletíme letem světem – asynchronně, od PHP, přes Javascript, Web, C# až po Kotlin.

asyncasync jsphp
Avoiding callback hell in Node js using promises
Avoiding callback hell in Node js using promisesAvoiding callback hell in Node js using promises
Avoiding callback hell in Node js using promises

This document discusses using promises in Node.js to avoid callback hell. It explains that Node.js is event-based and non-blocking, allowing it to handle multiple requests simultaneously. However, nested callbacks can result in unwieldy callback pyramids or "callback hell". Promises provide a way to write asynchronous code in a more linear way using method chaining. Key benefits include separation of concerns between wrapping asynchronous functions and controlling flow, as well as more readable code. The document provides examples of chaining, nesting, combining, and creating promises using deferred objects in the Q promise library.

q promisesnode jscallback hell
NOT CONVINCED?
JavaScript (+ TypeScript) has it all…
• Imperative programming? Yes.
• Object-oriented programming? Yes.
• Functional programming? Yes.
• Procedural programming? Yes.
• Event-driven programming? Yes.
• Asynchronous programming? Yes.
• Reflection? Yes.
• Portability? Yes.
• Closures? Yes.
• Lambdas? Yes.
• Variable scoping? Yes.
• Strong and weak typing? Yes and yes.
• Garbage collection? Yes.
• Timers? Yes.
• Pattern matching? Yes.
• Destructuring? Yes.
• Cascading? Yes.
• Exception handling? Yes.
• Non-blocking I/O? Yes.
• JSON? Of course!
• Debug tools? Many.
• Good for front end dev? Yes.
• Good for back end dev? Yes.
What's New in JavaScript
VERSIONS
# Name Description
1 ECMAScript 1 (1997) First edition
2 ECMAScript 2 (1998) Editorial changes
3 ECMAScript 3 (1999) Added RegEx and try/catch
4 ECMAScript 4 Never released
5 ECMAScript 5 (2009) Added strict mode, JSON, and more
5.1 ECMAScript 5.1 (2011) Editorial changes
6 ECMAScript 2015 (ES6) Added obscene amount of new features
7 ECMAScript 2016 (ES7) Added exponential operator and Array.prototype.includes
8 ECMAScript 2017 (ES8) Added async/await, string padding, and more
9 ECMAScript 2018 (ES9) Added rest/spread operators, async iteration, and more
ECMASCRIPT 2015 (ES6)
Just the highlights / useful parts

Recommended for you

Why Redux-Observable?
Why Redux-Observable?Why Redux-Observable?
Why Redux-Observable?

This document discusses the benefits of using Redux-Observable over Redux-Thunk for handling asynchronous logic in Redux applications. It begins by showing an example of how a search functionality would be implemented using Redux-Thunk, which requires additional logic for canceling requests. It then demonstrates how the same search functionality can be implemented more concisely and readably using Redux-Observable through the use of Epics. Overall, the document argues that Redux-Observable provides a simpler and more efficient way to solve common asynchronous problems compared to Redux-Thunk.

reduxobservablerxjs
The State of JavaScript (2015)
The State of JavaScript (2015)The State of JavaScript (2015)
The State of JavaScript (2015)

- JavaScript has come a long way from its early days of form validation and image rollovers in 1995 to modern innovations like ES2015, Promises, async/await, and Web Assembly. - Today, JavaScript features like classes, arrow functions, and template strings in ES2015 are widely adopted, and new standards like Promises, generators, and async programming have revolutionized asynchronous JavaScript. - Emerging web platform technologies like Web Components, Service Workers, and CSS Paint enable new kinds of custom elements, offline/progressive web apps, and painting APIs, while proposals like decorators, value types, and module loading continue pushing the language forward.

node.jsjavascript
Add Some Fun to Your Functional Programming With RXJS
Add Some Fun to Your Functional Programming With RXJSAdd Some Fun to Your Functional Programming With RXJS
Add Some Fun to Your Functional Programming With RXJS

This document discusses using RxJS (Reactive Extensions for JavaScript) to add interactivity and animation to an autocomplete search widget. Key events are turned into observables and used to make AJAX requests and trigger animations. Observables are merged, concatenated, and flattened to coordinate the asynchronous events and animations over time. Functional programming concepts like map, filter, and reduce are used to transform and combine the observable streams.

rxjsjavascript
TEMPLATE LITERALS
var message = `Hi, my name is ${first} ${last}.`;
console.log(`Received: ${JSON.stringify(obj)}`);
ARROW FUNCTIONS
${'.btn'}.click(event => {this.sendData();}); // jQuery example
var msgs = ids.map(value => `ID is ${value}`); // implicit return value
request('https://wordsapiv1.p.mashape.com/words/example',
(err, res, body) => {
if (err) { return console.error(err); }
console.log('statusCode:', res.statusCode);
console.log('body:', body);
}
);
BLOCK-SCOPED VARIABLES
if (some.value == some.other.value) {
let localCounter = 0;
const TAX = .0825;
:
:
}
SPREAD OPERATOR
function (...args) { }
var arr1 = [1, '2', 3];
var arr2 = [...arr1, '4', 5];
var sarahManning = {...kendallMalone}; // shallow obj cloning
// this one is only supported in ES9 and above!
var newObject = {...template, newAttr, oldAttr: newValue};

Recommended for you

Asynchronous programming done right - Node.js
Asynchronous programming done right - Node.jsAsynchronous programming done right - Node.js
Asynchronous programming done right - Node.js

This document discusses asynchronous programming and avoiding race conditions. It covers how asynchronous actions allow the main program flow to continue processing without blocking on I/O. It also discusses how asynchronous programming works with callbacks and promises rather than sequential execution. It provides examples of using libraries like Async to control asynchronous flows and common pitfalls to avoid like double callbacks and unexpected asynchronous behavior.

node.jsasyncprogramming
Promise pattern
Promise patternPromise pattern
Promise pattern

Promise patterns provide an asynchronous programming model for JavaScript using promises. Promises allow separating business logic from asynchronous API providers by defining a standard asynchronous API. Common patterns are callbacks, events, and promises. Promises improve on callbacks and events by allowing parallel asynchronous operations, error handling, and progress tracking in a standardized way.

Introduction to reactive programming & ReactiveCocoa
Introduction to reactive programming & ReactiveCocoaIntroduction to reactive programming & ReactiveCocoa
Introduction to reactive programming & ReactiveCocoa

Reactive programming models asynchronous data streams as signals that produce events over time. ReactiveCocoa is a framework that implements reactive programming in Objective-C. It uses signals to represent asynchronous data streams and operators to transform and combine signals. ReactiveCocoa code separates the logic to produce and consume data, making it more modular, reusable, testable and by reducing state and mutability. While the syntax is different, learning to think reactively can improve code quality and stability.

reactivereactivecocoafunctional
ITERATORS & GENERATORS
for (let n of numbers) { … }
function* range (start, end, step) {
while (start < end) {
yield start;
start += step;
}
}
for (let i of range(1, 20, 2)) { … }
function* ?
WTF!
INTERNATIONALIZATION
var coll = new Intl.Collator("de");
words.sort(coll.compare);
var nf = Intl.NumberFormat("en-US");
elem.value = nf.format(number);
var euro = Intl.NumberFormat("de-DE", {style:"currency", currency: "EUR"})
var response = `Your balance is ${euro.format(bal)`;
var dtf = Intl.DateTimeFormat("en-US", options);
console.log(dtf.format(new Date()) + " something happened”);
Also: Intl.PluralRules could be handy but has limited support at the moment.
OTHER FEATURES TO BE AWARE OF
• Classes
• Default function parameters
• Destructuring assignment and object property assignment
• Modules (export/import)
• Promises
• Proxying
• Reflection
• Sets, WeakSets, Maps, and WeakMaps
• Symbols
• Typed arrays
• Array methods find() and findIndex()
• String methods startsWith(), endsWith(), includes(), repeat()
ECMASCRIPT 2016 (ES7)
This is going to be really brief

Recommended for you

Practical JavaScript Promises
Practical JavaScript PromisesPractical JavaScript Promises
Practical JavaScript Promises

This document discusses JavaScript promises and asynchronous programming. It covers how promises represent asynchronous operations as objects, how to chain promises together using .then(), and how promises can be created using the closure or deferred syntax. It also discusses promise terminology, states, error handling, and common promise patterns and use cases. High-order functions and promise utility functions provided by promise libraries are presented. Guidelines for testing promises are also included.

promisesjavascript
Swift core
Swift coreSwift core
Swift core

The document provides information about Swift Core, which includes the core libraries and functionality of the Swift programming language. It lists some of the key Swift libraries like swiftAST and swiftLLVMParses. It also describes the documentation build process and lists important files that define the language like Attr.def, Builtin.def, and MappedTypes.def. The document outlines how to install and develop Swift in Xcode and highlights some core language functions.

ios
JavaScript Promise
JavaScript PromiseJavaScript Promise
JavaScript Promise

This document discusses JavaScript promises as an abstraction pattern for handling asynchronous code. It explains why promises are useful by describing some of the issues with callback-based asynchronous code, such as callback hell and lack of readability. The document then provides examples of how to create and use promises to handle sequential and parallel asynchronous tasks in a more maintainable way using chaining and batching. It also discusses how promises are supported in browsers, Node.js, and common promise libraries like Q, RSVP, when.js, and Bluebird.

javascriptpromisepattern
EXPONENTIATION
var googol = 10 ** 100;
var euler = Math.E ** (Math.PI * i) + 1; // use your imagination
ARRAY INCLUDES
> ['red', 'yellow', 'green', 'blue'].includes['red’]
true
> [2, 3, 5, 7, 11, 13, 17, 19, 23, 29].includes[1]
false
ECMASCRIPT 2017 (ES8)
I can’t await to tell you what I async of ES8
ARE CALLBACKS DRIVING YOU MAD?
example from
callbackhell.com

Recommended for you

Callbacks, promises, generators - asynchronous javascript
Callbacks, promises, generators - asynchronous javascriptCallbacks, promises, generators - asynchronous javascript
Callbacks, promises, generators - asynchronous javascript

This document discusses callbacks, promises, and generators for handling asynchronous code in JavaScript. It begins by explaining callbacks and the issues they can cause like "callback hell". It then introduces promises as an alternative using libraries like Q that allow chaining asynchronous operations together. Generators are also covered as a way to write asynchronous code that looks synchronous when combined with promises through libraries like CO. Overall, it recommends using an asynchronous pattern supported by a library to manage complex asynchronous code.

javascriptgeneratorsq
Kinect de-theremin
Kinect de-thereminKinect de-theremin
Kinect de-theremin

This document discusses using the Kinect sensor with Node.js. It describes connecting the Kinect to Node.js using the Audio Data API and Socket.IO for real-time data streaming. Code examples are provided for an Express server to handle requests and websockets, and using TCP/IP to receive Kinect sensor data and broadcast it over websockets.

audionodejskinect
Promises, Promises
Promises, PromisesPromises, Promises
Promises, Promises

Promises provide a consistent way to write asynchronous code in JavaScript by abstracting callbacks into objects. Some key benefits of promises include: handling errors through rejection instead of nested callbacks, ability to chain operations together through promise methods like .then(), and restoring synchronous-like control flow. The document discusses how promises improve on traditional callback-based patterns and provides examples of converting common asynchronous patterns to use promises.

promisesjavascript
THERE’S A BETTER WAY
var promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('Done'), 2000);
});
async function suspense() {
console.log('Wait for it...’);
var result = await promise;
console.log(result);
}
suspense();
How is this
better?
THERE’S MORE!
• Promise.all(iterable)
• Aggregates the results of multiple Promises (e.g., array)
• Waits for all Promises to be fulfilled
• Fails fast if any Promise is rejected
NEW FEATURES FOR WEB WORKERS
• Web Worker?
• Background script (thread) for a web application
• Good for prefetching data, real-time text formatting, image/video analysis, background I/O,
processing large JSON responses, etc.
• Not to be confused with Service Workers
• Event-driven scripts that run independently of web pages
• Useful for browser push notifications and building progressive web apps
• SharedArrayBuffer
• Buffer that can be shared between web workers
• Nice, right? Nope… it’s currently disabled in all major browsers b/c of Spectre vulnerability
• Atomics
• Global variable that enables synchronization with other workers
• Now also useless L
ECMASCRIPT 2018 (ES9)
Released as ECMA-262 in June, 2018

Recommended for you

Tasks: you gotta know how to run them
Tasks: you gotta know how to run themTasks: you gotta know how to run them
Tasks: you gotta know how to run them

This presentation covers from the basics of what is an async task and how it works to more advanced features of Celery.

djangopythoncelery
Playing With Fire - An Introduction to Node.js
Playing With Fire - An Introduction to Node.jsPlaying With Fire - An Introduction to Node.js
Playing With Fire - An Introduction to Node.js

node.js is an evented server-side Javascript framework powered by the Google V8 Javascript engine. It is a platform ideal for creating highly scalable web applications. It has the same simplicity of frameworks such as Sinatra, but is designed to be more peformant from the ground up. This performance is achieved by making all network I/O non blocking and all file I/O asynchronous. We will go over how that impacts the development experience, and walk through a simple web application. Javascript is foundational to this type of I/O because it is already evented by design. We will also take a brief look a similar evented frameworks such as ruby`s EventMachine.

node.jsserverjavascript
JavaScript 2016 for C# Developers
JavaScript 2016 for C# DevelopersJavaScript 2016 for C# Developers
JavaScript 2016 for C# Developers

This document summarizes a JavaScript training by Rick Beerendonk. It covers ECMAScript versions from 2015 to 2017, as well as React and Redux. The training includes components, properties, state, events, actions, reducers and stores. Sample code and slides are available on GitHub. Contact information is provided to sign up for the training.

javascript ecmascript react
ASYNCHRONOUS ITERATION
async function* createAsyncIterable(array) {
for (const elem of array) { yield elem; }
}
async function f() {
const asyncIterable = createAsyncIterable(['a', 'b']);
const asyncIterator = asyncIterable[Symbol.asyncIterator]();
console.log(await asyncIterator.next()); // { value: 'a', done: false }
console.log(await asyncIterator.next()); // { value: 'b', done: false }
console.log(await asyncIterator.next()); // { value: undefined, done: true }
}
ANOTHER EXAMPLE
REGEXP ENHANCEMENTS
• Named capture groups
/(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/.exec('2018-06-29').groups.year
• Unicode property escapes
Look this up… it’s complicated (but really cool)
• Lookbehind assertions
/(?<=$)[0-9]+/ // captures digits following a dollar sign ($)
• s (dotAll) flag
• /s means dot (.) also matches line terminator chars
• /u means dot (.) also matches unicode characters
OBJECT DESTRUCTURING WITH
REST OPERATOR
let { foo, ...remaining } = { foo: 1, bar: 2, baz: 3, qux: 4 };
console.log(foo); // 1
console.log(remaining); // {bar: 2, baz: 3, qux: 4}
let { ...shallowClone } = { x: 1, foo: () => {…} };
console.log(shallowClone); // {x: 1, foo: ƒ}

Recommended for you

React Native Evening
React Native EveningReact Native Evening
React Native Evening

He will start you at the beginning and cover prerequisites; setting up your development environment first. Afterward, you will use npm to install react-native-cli. The CLI is our go to tool. We use it to create and deploy our app. Next, you will explore the code. React Native will look familiar to all React developers since it is React. The main difference between React on the browser and a mobile device is the lack of a DOM. We take a look a many of the different UI components that are available. With React Native you have access to all of the devices hardware features like cameras, GPS, fingerprint reader and more. So we'll show some JavaScript code samples demonstrating it. We will wrap up the evening by deploying our app to both iOS and Android devices and with tips on getting ready for both devices stores.

javascriptiosreact-native
Es6 hackathon
Es6 hackathonEs6 hackathon
Es6 hackathon

This document provides an overview of an ES6 hackathon focusing on new features in ES6 including block scope, modules, destructuring, arrow functions, classes, template literals, internationalization, spread syntax, generators, sets, promises and more. Attendees will have 30 minutes to work on code challenges exploring these new ES6 features using resources like JSFiddle and TypeScript. The challenges involve updating functions to use new syntax like arrow functions, default parameters and object shorthand, satisfying class assertions, and improving outputs using template strings and internationalization.

es6programmingjavascript
JavaScript Futures—ES2017 and Beyond
JavaScript Futures—ES2017 and BeyondJavaScript Futures—ES2017 and Beyond
JavaScript Futures—ES2017 and Beyond

JavaScript keeps on expanding. As adoption of the extensive new features from ES6 has spread and projects have adapted, the language has continued to evolve under the guidance of Ecma TC39. Over the past two years, another handful of constructs entered the ECMAScript specification. And there are nearly two dozen more proposals on the cusp of being added. One thing is certain: the JavaScript community is not slowing down! How can we determine when it is “safe” to use a new feature? Investigate the new and proposed language features of JavaScript. Understand the TC39 review process. And most of all, become empowered to prepare for what lies ahead.

javascriptwebplanning
DEFINING OBJECT LITERALS WITH
SPREAD OPERATOR
We covered this earlier. More examples:
// clone enumerable own properties of obj
let clone1 = {...obj}
// clone object along with its prototype (class)
let clone2 = {__proto__: Object.getPrototypeOf(obj), ...obj}
// combine two objects
let merged = {...obj1, ...obj2}
FINALLY: FINALLY FOR PROMISES
var promise = new Promise((resolve, reject) => { … });
promise
.then(result => {...})
.catch(error => {...})
.finally(() => {...}) // always do this, even if there’s
// a ‘return’ in then() or catch()
// or exception is not caught
// or catch() (re-)throws exception

More Related Content

What's hot

Luis Atencio on RxJS
Luis Atencio on RxJSLuis Atencio on RxJS
Luis Atencio on RxJS
Luis Atencio
 
Why Grails?
Why Grails?Why Grails?
Why Grails?
Yiguang Hu
 
Letswift19-clean-architecture
Letswift19-clean-architectureLetswift19-clean-architecture
Letswift19-clean-architecture
Jung Kim
 
Avoiding Callback Hell with Async.js
Avoiding Callback Hell with Async.jsAvoiding Callback Hell with Async.js
Avoiding Callback Hell with Async.js
cacois
 
Asynchronní programování
Asynchronní programováníAsynchronní programování
Asynchronní programování
PeckaDesign.cz
 
Avoiding callback hell in Node js using promises
Avoiding callback hell in Node js using promisesAvoiding callback hell in Node js using promises
Avoiding callback hell in Node js using promises
Ankit Agarwal
 
Why Redux-Observable?
Why Redux-Observable?Why Redux-Observable?
Why Redux-Observable?
Anna Su
 
The State of JavaScript (2015)
The State of JavaScript (2015)The State of JavaScript (2015)
The State of JavaScript (2015)
Domenic Denicola
 
Add Some Fun to Your Functional Programming With RXJS
Add Some Fun to Your Functional Programming With RXJSAdd Some Fun to Your Functional Programming With RXJS
Add Some Fun to Your Functional Programming With RXJS
Ryan Anklam
 
Asynchronous programming done right - Node.js
Asynchronous programming done right - Node.jsAsynchronous programming done right - Node.js
Asynchronous programming done right - Node.js
Piotr Pelczar
 
Promise pattern
Promise patternPromise pattern
Promise pattern
Sebastiaan Deckers
 
Introduction to reactive programming & ReactiveCocoa
Introduction to reactive programming & ReactiveCocoaIntroduction to reactive programming & ReactiveCocoa
Introduction to reactive programming & ReactiveCocoa
Florent Pillet
 
Practical JavaScript Promises
Practical JavaScript PromisesPractical JavaScript Promises
Practical JavaScript Promises
Asa Kusuma
 
Swift core
Swift coreSwift core
Swift core
Yusuke Kita
 
JavaScript Promise
JavaScript PromiseJavaScript Promise
JavaScript Promise
Joseph Chiang
 
Callbacks, promises, generators - asynchronous javascript
Callbacks, promises, generators - asynchronous javascriptCallbacks, promises, generators - asynchronous javascript
Callbacks, promises, generators - asynchronous javascript
Łukasz Kużyński
 
Kinect de-theremin
Kinect de-thereminKinect de-theremin
Kinect de-theremin
Kazuyuki Honda
 
Promises, Promises
Promises, PromisesPromises, Promises
Promises, Promises
Domenic Denicola
 
Tasks: you gotta know how to run them
Tasks: you gotta know how to run themTasks: you gotta know how to run them
Tasks: you gotta know how to run them
Filipe Ximenes
 
Playing With Fire - An Introduction to Node.js
Playing With Fire - An Introduction to Node.jsPlaying With Fire - An Introduction to Node.js
Playing With Fire - An Introduction to Node.js
Mike Hagedorn
 

What's hot (20)

Luis Atencio on RxJS
Luis Atencio on RxJSLuis Atencio on RxJS
Luis Atencio on RxJS
 
Why Grails?
Why Grails?Why Grails?
Why Grails?
 
Letswift19-clean-architecture
Letswift19-clean-architectureLetswift19-clean-architecture
Letswift19-clean-architecture
 
Avoiding Callback Hell with Async.js
Avoiding Callback Hell with Async.jsAvoiding Callback Hell with Async.js
Avoiding Callback Hell with Async.js
 
Asynchronní programování
Asynchronní programováníAsynchronní programování
Asynchronní programování
 
Avoiding callback hell in Node js using promises
Avoiding callback hell in Node js using promisesAvoiding callback hell in Node js using promises
Avoiding callback hell in Node js using promises
 
Why Redux-Observable?
Why Redux-Observable?Why Redux-Observable?
Why Redux-Observable?
 
The State of JavaScript (2015)
The State of JavaScript (2015)The State of JavaScript (2015)
The State of JavaScript (2015)
 
Add Some Fun to Your Functional Programming With RXJS
Add Some Fun to Your Functional Programming With RXJSAdd Some Fun to Your Functional Programming With RXJS
Add Some Fun to Your Functional Programming With RXJS
 
Asynchronous programming done right - Node.js
Asynchronous programming done right - Node.jsAsynchronous programming done right - Node.js
Asynchronous programming done right - Node.js
 
Promise pattern
Promise patternPromise pattern
Promise pattern
 
Introduction to reactive programming & ReactiveCocoa
Introduction to reactive programming & ReactiveCocoaIntroduction to reactive programming & ReactiveCocoa
Introduction to reactive programming & ReactiveCocoa
 
Practical JavaScript Promises
Practical JavaScript PromisesPractical JavaScript Promises
Practical JavaScript Promises
 
Swift core
Swift coreSwift core
Swift core
 
JavaScript Promise
JavaScript PromiseJavaScript Promise
JavaScript Promise
 
Callbacks, promises, generators - asynchronous javascript
Callbacks, promises, generators - asynchronous javascriptCallbacks, promises, generators - asynchronous javascript
Callbacks, promises, generators - asynchronous javascript
 
Kinect de-theremin
Kinect de-thereminKinect de-theremin
Kinect de-theremin
 
Promises, Promises
Promises, PromisesPromises, Promises
Promises, Promises
 
Tasks: you gotta know how to run them
Tasks: you gotta know how to run themTasks: you gotta know how to run them
Tasks: you gotta know how to run them
 
Playing With Fire - An Introduction to Node.js
Playing With Fire - An Introduction to Node.jsPlaying With Fire - An Introduction to Node.js
Playing With Fire - An Introduction to Node.js
 

Similar to What's New in JavaScript

JavaScript 2016 for C# Developers
JavaScript 2016 for C# DevelopersJavaScript 2016 for C# Developers
JavaScript 2016 for C# Developers
Rick Beerendonk
 
React Native Evening
React Native EveningReact Native Evening
React Native Evening
Troy Miles
 
Es6 hackathon
Es6 hackathonEs6 hackathon
Es6 hackathon
Justin Alexander
 
JavaScript Futures—ES2017 and Beyond
JavaScript Futures—ES2017 and BeyondJavaScript Futures—ES2017 and Beyond
JavaScript Futures—ES2017 and Beyond
Jeff Strauss
 
JavaScript Editions ES7, ES8 and ES9 vs V8
JavaScript Editions ES7, ES8 and ES9 vs V8JavaScript Editions ES7, ES8 and ES9 vs V8
JavaScript Editions ES7, ES8 and ES9 vs V8
Rafael Casuso Romate
 
ES2015 workflows
ES2015 workflowsES2015 workflows
ES2015 workflows
Jarrod Overson
 
ES6: Features + Rails
ES6: Features + RailsES6: Features + Rails
ES6: Features + Rails
Santosh Wadghule
 
Node.js
Node.jsNode.js
Node.js
Mat Schaffer
 
ES6 - Next Generation Javascript
ES6 - Next Generation JavascriptES6 - Next Generation Javascript
ES6 - Next Generation Javascript
RameshNair6
 
Javascript status 2016
Javascript status 2016Javascript status 2016
Javascript status 2016
Arshavski Alexander
 
ES6 PPT FOR 2016
ES6 PPT FOR 2016ES6 PPT FOR 2016
ES6 PPT FOR 2016
Manoj Kumar
 
Intro to React
Intro to ReactIntro to React
Intro to React
Troy Miles
 
ES6, 잘 쓰고 계시죠?
ES6, 잘 쓰고 계시죠?ES6, 잘 쓰고 계시죠?
ES6, 잘 쓰고 계시죠?
장현 한
 
FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6
FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6
FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6
FrontDays
 
Node Boot Camp
Node Boot CampNode Boot Camp
Node Boot Camp
Troy Miles
 
Expoによるモバイルアプリ開発入門
Expoによるモバイルアプリ開発入門Expoによるモバイルアプリ開発入門
Expoによるモバイルアプリ開発入門
Takayuki Goto
 
ECMAScript2015
ECMAScript2015ECMAScript2015
ECMAScript2015
qmmr
 
Javascript: the important bits
Javascript: the important bitsJavascript: the important bits
Javascript: the important bits
Chris Saylor
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
David Padbury
 
Typescript barcelona
Typescript barcelonaTypescript barcelona
Typescript barcelona
Christoffer Noring
 

Similar to What's New in JavaScript (20)

JavaScript 2016 for C# Developers
JavaScript 2016 for C# DevelopersJavaScript 2016 for C# Developers
JavaScript 2016 for C# Developers
 
React Native Evening
React Native EveningReact Native Evening
React Native Evening
 
Es6 hackathon
Es6 hackathonEs6 hackathon
Es6 hackathon
 
JavaScript Futures—ES2017 and Beyond
JavaScript Futures—ES2017 and BeyondJavaScript Futures—ES2017 and Beyond
JavaScript Futures—ES2017 and Beyond
 
JavaScript Editions ES7, ES8 and ES9 vs V8
JavaScript Editions ES7, ES8 and ES9 vs V8JavaScript Editions ES7, ES8 and ES9 vs V8
JavaScript Editions ES7, ES8 and ES9 vs V8
 
ES2015 workflows
ES2015 workflowsES2015 workflows
ES2015 workflows
 
ES6: Features + Rails
ES6: Features + RailsES6: Features + Rails
ES6: Features + Rails
 
Node.js
Node.jsNode.js
Node.js
 
ES6 - Next Generation Javascript
ES6 - Next Generation JavascriptES6 - Next Generation Javascript
ES6 - Next Generation Javascript
 
Javascript status 2016
Javascript status 2016Javascript status 2016
Javascript status 2016
 
ES6 PPT FOR 2016
ES6 PPT FOR 2016ES6 PPT FOR 2016
ES6 PPT FOR 2016
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
ES6, 잘 쓰고 계시죠?
ES6, 잘 쓰고 계시죠?ES6, 잘 쓰고 계시죠?
ES6, 잘 쓰고 계시죠?
 
FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6
FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6
FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6
 
Node Boot Camp
Node Boot CampNode Boot Camp
Node Boot Camp
 
Expoによるモバイルアプリ開発入門
Expoによるモバイルアプリ開発入門Expoによるモバイルアプリ開発入門
Expoによるモバイルアプリ開発入門
 
ECMAScript2015
ECMAScript2015ECMAScript2015
ECMAScript2015
 
Javascript: the important bits
Javascript: the important bitsJavascript: the important bits
Javascript: the important bits
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
 
Typescript barcelona
Typescript barcelonaTypescript barcelona
Typescript barcelona
 

Recently uploaded

What is OCR Technology and How to Extract Text from Any Image for Free
What is OCR Technology and How to Extract Text from Any Image for FreeWhat is OCR Technology and How to Extract Text from Any Image for Free
What is OCR Technology and How to Extract Text from Any Image for Free
TwisterTools
 
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Asher Sterkin
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
miso_uam
 
Splunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptxSplunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptx
sudsdeep
 
Google ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learningGoogle ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learning
VishrutGoyani1
 
ANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdfANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdf
sachin chaurasia
 
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
SimonedeGijt
 
Migrate your Infrastructure to the AWS Cloud
Migrate your Infrastructure to the AWS CloudMigrate your Infrastructure to the AWS Cloud
Migrate your Infrastructure to the AWS Cloud
Ortus Solutions, Corp
 
Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …
908dutch
 
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptxAddressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Sparity1
 
Overview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptxOverview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptx
Mitchell Marsh
 
Leading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptxLeading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptx
taskroupseo
 
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdfIndependence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Livetecs LLC
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
sofiafernandezon
 
NYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdfNYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdf
AUGNYC
 
Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website
e-Definers Technology
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
shivamt017
 
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
Roshan Dwivedi
 
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
Hironori Washizaki
 
NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial CompanyNBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Softwares
 

Recently uploaded (20)

What is OCR Technology and How to Extract Text from Any Image for Free
What is OCR Technology and How to Extract Text from Any Image for FreeWhat is OCR Technology and How to Extract Text from Any Image for Free
What is OCR Technology and How to Extract Text from Any Image for Free
 
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
 
Splunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptxSplunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptx
 
Google ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learningGoogle ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learning
 
ANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdfANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdf
 
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
 
Migrate your Infrastructure to the AWS Cloud
Migrate your Infrastructure to the AWS CloudMigrate your Infrastructure to the AWS Cloud
Migrate your Infrastructure to the AWS Cloud
 
Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …
 
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptxAddressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
 
Overview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptxOverview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptx
 
Leading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptxLeading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptx
 
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdfIndependence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
 
NYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdfNYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdf
 
Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
 
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
 
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
 
NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial CompanyNBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial Company
 

What's New in JavaScript

  • 1. WHAT’S NEW IN JAVASCRIPT? Sabre Labs • Lunch-n-Learn / Tech Talk • Aug 1, 2018
  • 2. WHY DOES IT MATTER?
  • 3. MORE DATA Source: octoverse.github.com “The State of the Octoverse 2017”
  • 5. NOT CONVINCED? JavaScript (+ TypeScript) has it all… • Imperative programming? Yes. • Object-oriented programming? Yes. • Functional programming? Yes. • Procedural programming? Yes. • Event-driven programming? Yes. • Asynchronous programming? Yes. • Reflection? Yes. • Portability? Yes. • Closures? Yes. • Lambdas? Yes. • Variable scoping? Yes. • Strong and weak typing? Yes and yes. • Garbage collection? Yes. • Timers? Yes. • Pattern matching? Yes. • Destructuring? Yes. • Cascading? Yes. • Exception handling? Yes. • Non-blocking I/O? Yes. • JSON? Of course! • Debug tools? Many. • Good for front end dev? Yes. • Good for back end dev? Yes.
  • 7. VERSIONS # Name Description 1 ECMAScript 1 (1997) First edition 2 ECMAScript 2 (1998) Editorial changes 3 ECMAScript 3 (1999) Added RegEx and try/catch 4 ECMAScript 4 Never released 5 ECMAScript 5 (2009) Added strict mode, JSON, and more 5.1 ECMAScript 5.1 (2011) Editorial changes 6 ECMAScript 2015 (ES6) Added obscene amount of new features 7 ECMAScript 2016 (ES7) Added exponential operator and Array.prototype.includes 8 ECMAScript 2017 (ES8) Added async/await, string padding, and more 9 ECMAScript 2018 (ES9) Added rest/spread operators, async iteration, and more
  • 8. ECMASCRIPT 2015 (ES6) Just the highlights / useful parts
  • 9. TEMPLATE LITERALS var message = `Hi, my name is ${first} ${last}.`; console.log(`Received: ${JSON.stringify(obj)}`);
  • 10. ARROW FUNCTIONS ${'.btn'}.click(event => {this.sendData();}); // jQuery example var msgs = ids.map(value => `ID is ${value}`); // implicit return value request('https://wordsapiv1.p.mashape.com/words/example', (err, res, body) => { if (err) { return console.error(err); } console.log('statusCode:', res.statusCode); console.log('body:', body); } );
  • 11. BLOCK-SCOPED VARIABLES if (some.value == some.other.value) { let localCounter = 0; const TAX = .0825; : : }
  • 12. SPREAD OPERATOR function (...args) { } var arr1 = [1, '2', 3]; var arr2 = [...arr1, '4', 5]; var sarahManning = {...kendallMalone}; // shallow obj cloning // this one is only supported in ES9 and above! var newObject = {...template, newAttr, oldAttr: newValue};
  • 13. ITERATORS & GENERATORS for (let n of numbers) { … } function* range (start, end, step) { while (start < end) { yield start; start += step; } } for (let i of range(1, 20, 2)) { … } function* ? WTF!
  • 14. INTERNATIONALIZATION var coll = new Intl.Collator("de"); words.sort(coll.compare); var nf = Intl.NumberFormat("en-US"); elem.value = nf.format(number); var euro = Intl.NumberFormat("de-DE", {style:"currency", currency: "EUR"}) var response = `Your balance is ${euro.format(bal)`; var dtf = Intl.DateTimeFormat("en-US", options); console.log(dtf.format(new Date()) + " something happened”); Also: Intl.PluralRules could be handy but has limited support at the moment.
  • 15. OTHER FEATURES TO BE AWARE OF • Classes • Default function parameters • Destructuring assignment and object property assignment • Modules (export/import) • Promises • Proxying • Reflection • Sets, WeakSets, Maps, and WeakMaps • Symbols • Typed arrays • Array methods find() and findIndex() • String methods startsWith(), endsWith(), includes(), repeat()
  • 16. ECMASCRIPT 2016 (ES7) This is going to be really brief
  • 17. EXPONENTIATION var googol = 10 ** 100; var euler = Math.E ** (Math.PI * i) + 1; // use your imagination
  • 18. ARRAY INCLUDES > ['red', 'yellow', 'green', 'blue'].includes['red’] true > [2, 3, 5, 7, 11, 13, 17, 19, 23, 29].includes[1] false
  • 19. ECMASCRIPT 2017 (ES8) I can’t await to tell you what I async of ES8
  • 20. ARE CALLBACKS DRIVING YOU MAD? example from callbackhell.com
  • 21. THERE’S A BETTER WAY var promise = new Promise((resolve, reject) => { setTimeout(() => resolve('Done'), 2000); }); async function suspense() { console.log('Wait for it...’); var result = await promise; console.log(result); } suspense(); How is this better?
  • 22. THERE’S MORE! • Promise.all(iterable) • Aggregates the results of multiple Promises (e.g., array) • Waits for all Promises to be fulfilled • Fails fast if any Promise is rejected
  • 23. NEW FEATURES FOR WEB WORKERS • Web Worker? • Background script (thread) for a web application • Good for prefetching data, real-time text formatting, image/video analysis, background I/O, processing large JSON responses, etc. • Not to be confused with Service Workers • Event-driven scripts that run independently of web pages • Useful for browser push notifications and building progressive web apps • SharedArrayBuffer • Buffer that can be shared between web workers • Nice, right? Nope… it’s currently disabled in all major browsers b/c of Spectre vulnerability • Atomics • Global variable that enables synchronization with other workers • Now also useless L
  • 24. ECMASCRIPT 2018 (ES9) Released as ECMA-262 in June, 2018
  • 25. ASYNCHRONOUS ITERATION async function* createAsyncIterable(array) { for (const elem of array) { yield elem; } } async function f() { const asyncIterable = createAsyncIterable(['a', 'b']); const asyncIterator = asyncIterable[Symbol.asyncIterator](); console.log(await asyncIterator.next()); // { value: 'a', done: false } console.log(await asyncIterator.next()); // { value: 'b', done: false } console.log(await asyncIterator.next()); // { value: undefined, done: true } }
  • 27. REGEXP ENHANCEMENTS • Named capture groups /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/.exec('2018-06-29').groups.year • Unicode property escapes Look this up… it’s complicated (but really cool) • Lookbehind assertions /(?<=$)[0-9]+/ // captures digits following a dollar sign ($) • s (dotAll) flag • /s means dot (.) also matches line terminator chars • /u means dot (.) also matches unicode characters
  • 28. OBJECT DESTRUCTURING WITH REST OPERATOR let { foo, ...remaining } = { foo: 1, bar: 2, baz: 3, qux: 4 }; console.log(foo); // 1 console.log(remaining); // {bar: 2, baz: 3, qux: 4} let { ...shallowClone } = { x: 1, foo: () => {…} }; console.log(shallowClone); // {x: 1, foo: ƒ}
  • 29. DEFINING OBJECT LITERALS WITH SPREAD OPERATOR We covered this earlier. More examples: // clone enumerable own properties of obj let clone1 = {...obj} // clone object along with its prototype (class) let clone2 = {__proto__: Object.getPrototypeOf(obj), ...obj} // combine two objects let merged = {...obj1, ...obj2}
  • 30. FINALLY: FINALLY FOR PROMISES var promise = new Promise((resolve, reject) => { … }); promise .then(result => {...}) .catch(error => {...}) .finally(() => {...}) // always do this, even if there’s // a ‘return’ in then() or catch() // or exception is not caught // or catch() (re-)throws exception