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
- Transpile
- Polyfill
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
Your feedback is welcomed and encouraged!!
@recursivecodes
@recursivecodes
