ECMA What?

Getting Up To Speed With The JavaScript World.

 

@recursivecodes

Todd Sharp

Why Am I Here?

You’ve been a developer for a while. You’re familiar with JavaScript and written plenty of apps in your day. But you’ve been out of the loop for a while. There’s been a lot of changes in the JS world and after this talk you’ll be up to speed and ready to get started with modern day JS.

@recursivecodes

ECMA???

A standard which represents a scripting language specification called ECMAScript.

@recursivecodes

ECMA-262 is...

ECMA???

A general purpose scripting language that conforms to the ECMAScript specification

@recursivecodes

JavaScript is...

ECMA???

A confusing bit of history is that JavaScript was created in 1996. It was then submitted to Ecma International in 1997 for standardization, which resulted in ECMAScript. At the same time, because JavaScript conformed to the ECMAScript specification, JavaScript is an example of an ECMAScript implementation.

 

@recursivecodes

That leaves us with this fun fact: ECMAScript is based on JavaScript, and JavaScript is based on ECMAScript.

Timeline

ECMAScript 5 (ES5): The 5th edition of ECMAScript, standardized in 2009. This standard has been implemented nearly completely in all modern browsers

 

ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015): The 6th edition of ECMAScript, standardized in 2015. This standard has been almost completely implemented in most modern browsers.

 

ECMAScript 2016 (ES2016/ES7): The 7th edition of ECMAScript. It was released in 2016. This standard has been partially implemented in most modern browsers.

 

ECMAScript 2017 (ES2017/ES8): The 8th edition of ECMAScript. It was released in June, 2017. This standard has been partially implemented in most modern browsers.

@recursivecodes

But What Can I Use Today?

@recursivecodes

What If I Want To Use Something That's Not Supported Yet?

@recursivecodes

Blocks??

@recursivecodes

let

  • Declare a block scope variable
  • Cannot be redeclared
  • Available in current block and sub-blocks
  • Unlike 'var' which is scoped to the enclosing function

 

@recursivecodes

A Note About 'let'

if (true) {
  let a = 'a';
  let a = 'b';
}

You can not redeclare a variable using let within the same function or block scope.  Attempting to do so will raise a SyntaxError.

@recursivecodes

const

  • Declares a read-only, named constant that is block scoped
  • Cannot be redeclared
  • Cannot be reassigned
  • You will use this more than you think you might

@recursivecodes

let/const

Use let when you will need to reassign the value of the variable (IE: a for loop index or a boolean flag, etc).
 

Use const pretty much everywhere else.  Note, const means it can not be changed, but it does not mean the value is immutable.  You can assign key values to an object declared with const and you can push/pop/slice/etc an array declared const. Immutability (to a certain extent) can be achieved with Object.freeze() or third party code.

 

You probably won't use var that much anymore.

@recursivecodes

Property Value Shorthand

A less repetitive way to assign properties of an object

@recursivecodes

Computed Property Names

Using dynamic key names in object literals.

@recursivecodes

Function Argument Defaults

function login( user='admin', password='hunter2') {
    return { joking: true };
}

@recursivecodes

Rest Parameters

function rest(...args) {
    console.log(args);
}

console.log( rest( 1, 2, 3 ) );

// [1,2,3]

Access an arbitrary amount of (undefined) function parameters as an array

@recursivecodes

Classes

JavaScript classes, introduced in ES6, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance.

 

The class syntax does not introduce a new object-oriented inheritance model to JavaScript.

@recursivecodes

Modules

Give us the ability to create modularized, reusable code chunks so that our codebase is well structured and reusable.

@recursivecodes

Template Literals

Easier and cleaner string concatenation!

@recursivecodes

Arrow Functions

Short, clean and concise way to declare a function with slight differences in scope handling compared to traditional functions

@recursivecodes

Arrow Functions

Are handy, but they are NOT a 'silver bullet'!

@recursivecodes

Synchronous vs Asynchronus

Synchronous

Code evaluated in sequence and executed one after another.  Each statement waits for the previous to complete before executing (Usually blocks further execution)

Asynchronous

Subsequent lines of code do not wait for completion before they are executed.  Best example:  Ajax request.

(Non-blocking)

@recursivecodes

Promises

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

@recursivecodes

Fetch

Simplified XMLHttpRequest that returns a Promise

@recursivecodes

Async/Await

A "cleaner" way to work with promises and other asynchronous operations

@recursivecodes

Array Enhancements

  • Array.forEach()
  • Array.includes()
  • Array.findIndex()
  • Array.find()
  • Array.filter()
  • Array.every()
  • Array.map()
  • Array.reduce()
  • etc...

@recursivecodes

Object Enhancements

  • Object.assign()
  • Object.entries()
  • Object.keys()
  • Object.values()
  • etc...

@recursivecodes

New Types

  • Map
  • *WeakMap (not iterable)
  • Set
  • *WeakSet (not iterable)

* weak means the object key references are weakly held meaning the objects referenced by those keys are subject to garbage collection

All of these types maintain insertion order

@recursivecodes

Homework

@recursivecodes

Resources

@recursivecodes

@recursivecodes