Skip to content

Latest commit

 

History

History
165 lines (122 loc) · 5.56 KB

ecmascript-fundamentals.md

File metadata and controls

165 lines (122 loc) · 5.56 KB

ECMAScript Fundamentals

ECMAScript State of the Union

What is ECMAScript (ES)

  • Basis of JavaScript
  • Standardized by ECMA International
  • ECMAScript 3 (Dec. 1999)
    • Supported in practically all browsers
  • ECMAScript 5 (Dec. 2009)
    • Very good supported in all major browsers (compat. table)
    • Common basis for most web applications in the public internet
  • ECMAScript 2015 aka 6 (June 2015)
    • Good support in modern browsers (compat. table)
    • Commonly assumed in controlled environments (e.g. intranet, closed groups, embedded browser)
  • ECMAScript 2016 (June 2016)

Highlights of ES2015 aka ES6

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

Highlights of ES2015 aka ES6 (cont.)

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(length) {
    super(length, length);
    this.name = 'Square';
  }
}

Highlights of ES2015 aka ES6 (cont.)

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}

for (let value of iterable) {
  value += 1;
  console.log(value);
}

Highlights of ES2015 aka ES6 (cont.)

"Callback hell"

<!--#include file="ecmascript-fundamentals/0010-promise/callback.js" -->

Promises

<!--#include file="ecmascript-fundamentals/0010-promise/promise.js" -->

Highlight of ES2016+

  • Async functions with async/await similar to C# (will be covered later in more details)
<!--#include file="ecmascript-fundamentals/0020-async/async.js" -->

babel

  • "Transpiler"
  • Transforms modern JavaScript so that you can run it in old environments
  • Especially important for building consumer-facing websites
  • Huge ecosystems of plugins
  • babel demo

Takeaways

  • ECMAScript/JavaScript is no trivial scripting language anymore
  • Powerful, modern programming language
  • Standard is now moving faster than in the past
  • Use babel to enable modern JavaScript in all projects
  • What is missing? Types!

Enter: TypeScript

Further Readings and Exercises