SECTION 1 – Getting Started
1 – Introduction and the Goal of the Course
The goal is to understand how JavaScript works under the hood.
2 – Setup
3 – Big Words and JavaScript
4 – Watching this Course in High-Definition
5 – Understanding Frameworks and the Weird Parts
SECTION 2 – Execution Contexts and Lexical Environments
6 – Conceptual Aside: Syntax Parsers, Execution Contexts and Lexical Environments
Syntax parser – A program that reads the code and determines what it does and if it’s grammar is valid – Is done character by character
Lexical Environment – Where something sits physically in the code that is writen.
Execution Contexts – A wrapper to help manage the code that is running.
7 – Conceptual Aside: Name/Value pairs and Objects
A name is something that maps to a unique value. The value can be multiple more key/value pairs.
Object – It’s a collection of name/value pairs.
8 – Downloading source-code for this Course
9 – The Global Environment and the Global Object
When the JavaScript engine starts in the browser, it create a execution context known as the global environment and a global object variable ‘this’
Each tab has its own global context.
10 – The Execution Context – Creation and Hoisting
The declarations are always moved to the top.
The execution context starts with 2 phases. The first one in which the syntax parser goes through the code and determines what are the variables and functions that need to be defined before they can be accessed.
In the 2nd phase, the actual code starts getting processed.
So in the 1st phase, the variables without their value and the function definitions are moved to the top of the code.
11- Conceptual Aside: JavaScript and undefined
12 – The Execution Context – Code Execution
13 – Conceptual Aside: Single Threaded, Synchronous Execution
Single Threaded – Performing only 1 command at a time
Synchronous – One at a time and in order
14 – Function Invocation and the Execution Context
Invocation – Running a function, in JavaScript by using a parentheses ()
Whenever a function is executed, a new execution context is created and the variables and methods regarding to that function rest in it.
15 – Functions, Context and Variable Environments
Variable Environment – Where the variable lives in memory
function b() {
var myVar;
}
function a() {
var myVar = 2;
b();
}
var myVar = 1;
a();
console.log(myVar); // Need a little clarity here as when var keyword is used, it should be placed on the global context.16 – The scope chain
Scope Chain is the link of the outer environments with the last at the global object.
17 – Scope, ES6 and let
Scope is where the variable is available in the code.
let allows the JavaScript engine allows for block-scoping of variables.
18 – What about Asynchronous Callbacks
Once the execution stack is empty, will the Javascript engine start looking inito the event queue for processing,
So long running functions can hinder the engine’s capability to process events.
SECTION 3 – Types and Operators
19 – Types and Javascript
The type of a variable is figured out during execution.
20 – Primitive Types
Primitive types is something that is not an Object. It represents a single vlaue.
undefined – Represents a lack of existence.
null – Also stands for lack of existence, but that is user set.
boolean
number
string
symbol (es6)
21 – Operators
Operators are a function that is synactically wirtten different
The operators sit a infix notation
+(a, b) replaced with a + b
22 – Operator Precedence and Associativity
Operator precendence specifies which operator gets executed first.
Operator Associativity – When operators have same precedence, the the associatity of the operator determines if tt will be execueted from let-to-right or right-to-left.
23 – PDF Link
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
24 – Coercion
Converting from one type to another
var a = 1 + '2';
console.log(a); // 12 - Due to coercion
25 – Comparison Operators
console.log(1 < 2 < 3); // true
console.log(3 < 2 < 1); // true - Due to operator precedence and coercion
26 – Equality Comparison Table
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
27 – Existence and Booleans
var a = 0;
if (a || a === 0) {
// Do something
}28 – Default Values
someVar || ‘Some Default Value’
29 – Framework Aside: Default Values
window.libraryName = window.libraryName || ‘My Library’;
SECTION 4 – Objects and Functions
30 – Objets and the Dot
An object is a reference to memory and can have name-value pairs which can have Primitive properties, and/or Object proerties, and/or Function methods
var person = new Object();
person['firstName'] = 'Murari';
var attrFirstName = 'firstName';
console.log(person[attrFirstName]); // Murari
console.log(person.firstName); // MurariThe dot operator has more precedence than the square bracket member access.
31: Objects and Object Literals
Creating an Object:
=> var person = new Object();
=> var person = {};
32: Framework Aside – Faking namespaces
namespace – A container for variables and functions.
As JavaScript has no namespace mechanism, it can be faked by using Objects.
Example for language:
var english = {};
var spanish = {};
and then
english.greeting = 'Hello';
spanish.greeting = 'Hola';
This might help avoid literal overlapping.
33: JSON and Object Literals
JavaScript Object Notation – String representation of an object to facilitate lighter transmission of data on the internet.
34: Functions are Objects
First Class Functions – Everything you can do with other types, you can do with functions.
Assign them to variables, ass them around, create them on the fly.
A function is an Object which has the code as a property and can be invoked.
function greet() {
console.log('hi');
}
greet.language = 'english';
console.log(greet); // Will just log the function descrtption
console.log(greet.language) // Will log 'english'
35: Function Statements and Function Expressions
Expression is a unit of code that results in a value, which not necessarily have to be saved to some variable.
For example, a = 3 is an expression, because it returns a value.
For example, the IF is a Statement because it doesn’t return a value, but we can do something in it.
Functions can be passed around to functions:
myFunc(function() {
console.log('Doing something');
});
36: Conceptual Aside – By Value vs By Reference
Primitve types are passed around by value. So when they are referenced, a copy of them is made on a new address and referenced to the new variable.
Objects are passed by reference, because the location is copied rather than the value itself.
Mutate – Change something
Immutable – Something that can’t be changed
When we pass a new object to an already intialized variable, the new value is placed in a new location and the reference is returned.
Any other variable referencing to the earlier location, will continue to hold the previous object values.
37 – Objects, Functions and this
The execution content will always include the variable ‘this’ whose value is determined by how the execution content is invoked.
38: Conceptual Aside – Arrays
A collection of anything is an array. Can hold numbes, strings, boolean, objects and functions too.
The functions can be invoked too. like arr[3](‘my Name’);
39: ‘arguments’ and spread
arguments is an array-like structure which holds all the parameters passed into the function.
printMine(firstName, lastName, language) {
console.log(arguments) // ['Murari', 'Nayak', 'en']
}
The arguments are not a complete array becuase they miss some properties of the array object.
40: Framework Aside – Function Overloading
Function overloading isn’t avaiable in javascript, but this can be emulated.
41: Conceptual Aside: Syntax Parsers
The JavaScript engine is reading the code character by character using a set of rules about what is valid syntax, determining what the developer wants to do,
all this even before the code is even executed.
42: Dangerous Aside: Automatic Semicolon Insertion
JavaScript has the automatic tendency to insert semicolons where it thinks is necessary.
To see the problem associated with automatic semicolor insertion:
function getName() {
return
{
name: 'Murari'
}
}
console.log(getName()); // This will log undefined as when the JavaScript engine sees the return keyword, it would place a semicolon after it.To avoid the problem one should always put semicolons where it should be and use proper JavaScript coding methods.
function getName() {
return {
name: 'Murari'
}
}
console.log(getName()); // This would log the object.
43: Framework Aside – Whitespace
Invisible characters that make the code more readable Example: returns, tabs. spaces.
JavaScript is liberal on the usage of whitespaces, s this can be used to create comments and putblank lines in the code to make it more readable.
44: Immediately Invoked Function Expressions (IIFE)
// Function statement
function greet('name) { }
greet('Murari');
// Function expression
var greetNew = function(name) { }
greetNew('Mohan');
// IIFE
var greeting = function(name) { }('Nayak') // Invoked when the function expression is defined.
// IIFE most commonly used
(function(name) { }('Mohan')) ~ (function(name) { })('Mohan')
Looking at the above IIFE, it seems that the whole function as well as its invocation is placed in between parentheses.
This is because a function can’t be loosely put in JavaScript as in the case of numbers, strings or objects.
4;
'I am a string';
{ name: 'Murari' }
function(name) { } // This would throw an error as because when the compiler sees the keyword function it expects a definition after it. So we wrap the function in moon brackets to make sure it is treated as an expression.45: Framework Aside: IIFEs and safe Code
As any IIFE is immediately invoked and it’s entire execution context is created separately, this is one of the most preferred way followed by frameworks, who wrap their entire code inside an IIFE for making their definitation safe.
If the access to the global context is required, it can be passed as a parameter to the IIFE.
(function(global, name) {
global.name = name; // This is intentional affecting of the global namespace and not by mistake
}(window, 'Murari'));46: Understanding Closures
function greet(greeting) {
return function(name) {
console.log(greeting + ' ' + name;
}
}
The function greet returns a function, So when the greet(‘Hi’) is called and an execution context is created.
Once the greet() returns a function, the execution context is removed, but the memory that it takes still stays.
So when the returned function is executed at a later time, the reference to the greet() is recalled and the access to the greeting variable is provided.
So when the returned function is executed, even if the execution context of greet() has been popped off, the access to greeting variable still stays.
This method of closing in all the variables that are required for executing the returned function is called a closure.
47: Understanding Closures – Part 2
function buildFunctions() {
var arr = [];
for (var i =0; i< 3; i++) {
arr.push(function() {
console.log(i);
});
}
return arr;
}
var fs = buildFunctions();
fs[0]();
fs[1]();
fs[2]();
All these will log 3 as by the time the functions in the array is called, the i has been incremented to 3
To make the closure behave as we want to:
function buildFunctions() {
var arr = [];
for (var i =0; i< 3; i++) {
let j = i;
arr.push(function() {
console.log(j);
});
}
return arr;
}
var fs = buildFunctions();
fs[0]();
fs[1]();
fs[2]();
or by using IIFE
function buildFunctions() {
var arr = [];
for (var i =0; i< 3; i++) {
arr.push((function(j) {
return function() {
console.log(j);
}
})(i));
}
return arr;
}
var fs = buildFunctions();
fs[0]();
fs[1]();
fs[2]();
48: Framework Aside – Function Factories
function makeGreeting(language) {
return function(firstName, lastName) {
if (language === 'es') {
console.log('Hola ' + firstName);
}
if (language === 'en') {
console.log('Hello ' + firstName);
}
}
}
var greetEnglish = makeGreeting('en');
var greetSpanish = makeGreeting('es');
greetEnglish('John');
greetSpanish('Doe');
49: Closures and Callbacks
function sayHiLater() {
var greeting = 'Hi';
setTimeout(function() {
console.log(greeting); // Should log 'Hi', even after the main function sayHiLater() has finished executing by the time the 1000 ms have passed.
}, 1000);
}
sayHiLater();
This is an example of closures using the concept of callback functions.
The callback event listeners are also examples of closures.
Callback is a function which is given to another function to be run, when that functions finishes executing.
50: call(), apply() and bind()
var person = {
firstName: 'Murari',
lastName: 'Nayak',
getFullName: function() {
return this.firstName + ' ' + this.lastName;
}
};
var logName = function(lang1, lang2) {
console.log(this.getFullName());
};
logName(); // This will throw error as because this.getFullName() has reference of this to the global context.
We can manage the context by using the bind function available on the function object.
var logPersonName = logName.bind(person);
logPersonName(); // This will log the full name because the 'this' variable now refers to the person object.
Calling bind() over a function object returns another function with the new context, and the returned function can be invoked later.
The bind can also be passed while the function is defined:
var newFunc = function() { }.bind(newContext);
The call() function available on the function objects can also help manage the context of the called function, and also takes the parameters additionally.
logName.call(person, lang1, lang2);
One advantage of the call() is that it executes the functions directly rather than returning a new function as in the case of bind();
The apply() does the same thing as that of call(), with one difference as that in the case of apply(), the arguments are passed as an array.
logName(person, [lang1, lang2]); // This helps when there are an unknown number of arguments as in the case of addition.
These 3 functions can also be used on IIFE. For example:
(function(lang1, lang2) {
…
}).call(person, lagn1, lang2);
Benefits of call, apply, bind
// Function borrowing.
person2 = {
firstName: 'Robin',
lastName: 'Hood'
};
person.getFullName.apply(person2);
Here we accessed the function of person object but passed the context of person2 to be used.
Function currying: Creatine a copy of a function with some preset parameters, very helpful in arithmetic operations
var multiply = function(a, b) {
return a*b;
}
var multiplyByTwo = multiply.bind(this, 2); // Making one of the arguments constant
console.log(multiplyByTwo(5)); // So can just pass the 2nd argument and this will work
51: Functional Programming
Function being first-class in JavaScript, a lot of things can be done by being able to pass around function as arguments.
function mapForEach(arr, fn) {
var newArr = [];
for (var i =0; i < arr.length; i++) {
newArr.push(
fn(arr[i])
);
}
return newArr;
}
var arr1 = [1,2,3];
var arr2 = mapForEach(arr1, function(item) {
return item * 2;
}); // [2,4,6]
var arr3 = mapForEach(arr1, function(item) {
return item > 2;
}); // [false, false, true]
var checkPastLimit = function(limiter, item) {
return item > limiter;
}
// Here this function takes in 2 parameters, whereas the mapForEach callback takes only 1.
// This can be managed by using the bind method to fix one of the arguments prior calling. var arr4 = mapForEach(arr1, checkPastLimit.bind(this, 1)); // [false, true, true]
// Simplifying checkPastLimit()
var checkPastLimitSimple = function(limiter) {
return function(limiter, item) {
return item > limiter;
}.bind(this, limiter);
}
var arr5 = mapForEach(arr1, checkPastLimitSimple(2)); // [false, false, true]
52: Functional Programming – Part 2
Explanation about Underscore.js
It has an excellent implementation of the advacned concepts as well as functional programing.
Every step they have taken to build the library has been explained in the source code as well as in their website.
Also lodash which is a very similar output implementation of unerscore.
var arr6 = _.map(arr1, function(item) { return item * 3 }); /// [3,6,9]
var arr7 = _.filter([2,3,4,5,6,7], function(item) { return item % 2 === 0 }); // [2,4,6]
SECTION 5 – Object-Oriented Javascript and Prototypal Inheritance
53: Conceptual Aside: Classical vs Prototypal Inheritance
Inheritance – One object gets access to the properties and methods of another object.
54: Understanding the Prototype
var person = {
firstName: 'Default1',
lastName: 'Default2',
getFullName: function() {
return this.firstName + ' ' + this.lastName;
}
};
var murari = {
firstName: 'Murari',
lastName: 'Nayak'
};
murari.__proto__ = person; // very wrong way. should never be done this way
console.log(murari.getFullName()); // Murari Nayak
console.log(murari.firstName); // Murari
The javascript compiler moves down the prototype chain to find properties.
55: Everything is an Object or a Primitive
var a = {};
a.__proto___ = Object
var b = function() { };
b.__proto__.__proto__ = Object
var c = [];
c.__proto__.__proto__ = Object
56: Reflection and Extend
Reflection means that an Object can look at itself and be able to change its own properties and methods.
for (var prop in murari) {
console.log(prop + ': ' + murari[prop]); // This will list all the properties of the 'murari' Object as well as the 'person' Object
}
// To make sure that we get only the Object's own properties, we can use the hasOwnProperty method available on the base Object class
for (var prop in murari) {
if (murari.hasOwnProperty(prop)) { // checking if the property is part of the given object
console.log(prop + ': ' + murari[prop]); // This will list all the properties of the 'murari' Object as well as the 'person' Object
}
}
The Reflection concept can be used to create Extend mechanism. While this is not available in vanilla javascript, a lot of libraries provide it to make things easy.
As in underscorsjs
_.extend(murari, john, jim);
This would copy all the properties from john and jim and add/update it in ‘murari’ Object.
SECTION 6 – Building Objects
57: Function Constructors, ‘new’ and the History of JavaScript
var murari = new Person();
When the new keyword is used before calling a function, a special thing happens that a new Object is created and the context of the function is returned in it.
The new is an operator and can be found in the operator list.
function Person() {
this.firstname = ‘murari’;
}
This will return a new object when called as new Person().
But if something is returned in the function, then the function will return whatever was returned.
function Person() {
this.firstName = ‘Murari’;
return ‘Something else’;
}
var murari = new Person();
console.log(murari); // ‘Something else’; But I checked and it works similar to the fact when nothing is returned.
In a normal function, if nothing is returned, it returns undefined. But when new keyword is used, it returns the context of the function to a brand-new blank Object.
Function constructors are just functions with parameters.
58: Function constructors and ‘.prototype’
Functions are special objects which also have a special attribute called the prototype which can be used to set the __proto__ of an object.
function Person() {
this.firstName = 'Murari';
this.lastName = 'Nayak';
}
Person.prototype.getFullName = function() {
return this.firstName + ' ' + this.lastName;
};
Now this makes the function getFullName function available for all instances of Person created using the new keyword.
In well-known libraries, the functions are added to the prototype rather than the Object itself, the reason being efficiency.
Because, if the function is added to the Object itself, a copy of that function is made, and so thousand of the object’s instances will create thousand instance of the function.
But adding to the prototype will make sure that only one instance of the function is created and the function can be accessed from any of the Object’s instance.
59: Dangerous Aside: ‘new’ and functions
As the functions can also be called without using the new keyword, there are cases when people can forget to use the keyword and the constructor function will be returning undefined and further actions on it can create problems.
So as a convention, any function constructor should start with a capital alphabet, so that when someone looks into the code and sees a function call wtih a capital letter and a missing new keyword, they can realise that the new keyword is missing and make fixes accordingly.
60: Conceptual Aside: Built-In Function Constructors
We can use the built-in function constructors on the primitives too.
var str = new String('This is a string");
String.prototype.hasFourChars = function (str) {
return str.length === 4;
}
"some".hasFourChars(str); // true
But the same thing can't be run on numbers.
4.someFunction() // Would show SyntaxError
61: Dangerous Aside: Built-In Function Constructors
var a = 3;
var b = new Number(3);
console.log(a == b); // true
console.log(a === b); // false
This is because a is a number primitive, while b is a Object wrapping a number primitive.
62: Dangerous Aside – Arrays and for..in
Arrays are objects in JavaScript that too opens up some problems.
var arr = ['Murari', 'Mohan', 'Nayak'];
We can iterate through this array as of an object like,
for (var prop in arr) {
console.log(prop + ': ' + arr[prop]);
}
This will loop through all the items and log
0: Murari
1: Mohan
2: Nayak
But problem will arise when someone adds some information to the prototype of the array.
Array.prototype.someProp = ‘Some info’;
Now the above for..in loop will also log the ‘someProp’ attribute as it is part of the object.
So this type of parsing is avoided in JavaScript and the proper way of ‘for ‘ loop is used to loop arrays:
for (var i = 0; i < arr.length; i++) {
// Do something
}
63: Object.create and Pure Prototypal Inheritance
A newer implementation for creating objects is the prototypal way. In this, we build an Object and other objects are created from it.
var person = {
firstName: ‘Default1’,
lastName: ‘Default2’,
greet: function() {
return ‘Hi ‘ + this.firstName;
}
};
var murari = Object.create(person);
console.log(murari.greet()); // Default1
This will create a blank object with the prototype set to the person object.
So, now the firstName and lastName properties can be set on the new Object and the functions will act on them accordingly.
murari.firstName = ‘Murari’;
console.log(murari.greet()); // Murari
Polyfill – A piece of code that adds a feature which the engine may lack.
Example:
if (!Object.create) {
Object.create = function(o) {
if (arguments.length > 1) {
throw new Error('Only one parameter allowed');
}
function F() { }
F.prototype = o;
return new F();
}
}
64: ES6 and Classes
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
greet() {
return 'Hi ' + this.firstName;
}
} // This is still and object and not a template as in the case of other languages.
var murari = new Person('Murari', 'Nayak');Setting prototypes in the class way:
class InformalPerson extends Person {
constructor(firstName, lastName) {
super(firstName, lastName);
}
greet() {
return 'Yo ' + this.lastName;
}
}The extends keyword will set the proto
Syntactic Sugar – A different way of typing something that doesn’t change how it works under the hood.
SECTION 7: Odds and Ends
65: Initialization
Some information about initialization of data while starting to build out an application and not be intimidated.
66: typeof, instanceof and Figuring Out What Something Is
typeof someVar would return the type of the variable as a string. For example
typeof someNumber; typeof someString; typeof someObject;
One thing to note is that if we try to check the type of an Array, it will return an Object
typeof someArray; // object
To check for array type, we can use
Object.prototype.toString.call(d);
typeof undefined; // undefined
typeof null; // object – Something confusing
instanceof determines if the given Object type is present in the prototype of the instance provided
murari instanceof Person; / true
If any part of the proto chain, Person would be found, that means murari is an instanceof Person.
67: strict Mode
This is an opt-in option provided by the JavaScript engine
To use this, one can add the string “use strict” on the top of the file so that JavaScript can be a little stricter on the rules. This can be used at the top of the file to follow stricter rules on the whole file, or can be used in functions which make stricter checking to be applied on the function only. This is because the “use strict” works on the execution contexts.
function getSecondPerson() {
"use strict"; // The function is in strict mode.
var person2;
persom2 = {}; // This will throw error, as it has been mistyped, so the variable doesn't exist.
console.log(persom2);
}
var person1;
persom1 = { };
console.log(persom1); // will log {} because this is being executed without strict mode.
getSecondPerson();68: Strict Mode Reference
SECTION 8: Examining Famous Frameworks and Libraries
69 – Learning From Other’s Good Code
Github -> Explore -> JavaScript frameworks => pick any library and go through it trying to understand how they have written the code.
70 – Deep Dive Into Source Code: jQuery – Part 1
jQuery is just a library that makes syntactically right code and is cross-browser friendly, again helping write lesser code.
It helps let us manipulate the DOM(which says how things should look).
71 – Deep Dive Into Source Code: jQuery – Part 2
72 – Deep Dive Into Source Code: jQuery – Part 3
jQuery has a method:
$(“ui.people”).addClass(“some-class”).removceClass(“people”).
Both the addClass and removeClass method will act on the “ui.people” selector by a process called Method Chaining.
Method Chaining – Calling one method after another and each method affects the parent object.
The whole code when executed and stored in the jQuery local variable of the library is then set to the window object by,
window.jQuery = window.$ = jQuery;
This makes it accessible to the outer world.
SECTION 9: Let’s Build a Framework / Library
73 – Requirements
Greetr library:
- When given firstName, lastName, and optional language, it should be able to generate formal and informal greetings
- Support english and spanish language
- Reusable library / framework
- Easy to type with G$() structure
- Support jQuery
74 – Structuring Safe Code
(function(global, $) {
}(window, jQuery));
75 – Our Object and It’s Prototype
(function(global, $) {
var Greetr = function(firstName, lastName, language) {
return new Greetr.init(firstName, lastName, language);
}
Greetr.prototype = {};
Greetr.init = function(firstName, lastName, language) {
this.firstName = firstName || 'Default1';
this.lastName = lastName || 'Default2';
this.language = language || 'en';
}
Greetr.init.prototype = Greetr.prototype;
global.Greetr = global.G$ = Greetr;
}(window, jQuery));And now we can call it by using:
var g = G$(‘Murari’, ‘Nayak’);
console.log(g); // Should log the Greetr object created in the library.
76 – Properties and Chainable Methods
var languages = ['en', 'es'];
var greetings = {
en: 'Hello',
es: 'Hola'
};
var formalGreetings = {
en: 'Greetings',
es: 'Saludos'
};
// The above vars are in the scope of this library and not be able to be accessed outside of here. // Closures
Greetr.prototype = {
formatGreeting: function() {
},
greeting: function() {
},
greet: function(formal) {
console.log();
return this;
},
validate: function() {
if (languages.indexOf(this.language) === -1) {
throw 'Lanuage not in list';
}
},
setLang: function(lang) {
this.language = lang;
this.validate();
return this;
}
};
77 - Adding jQuery Support
Greetr.prototype = {
…
HTMLGreeting: function(selector, format) {
if (!$) {
throw 'jQuery not loaded';
}
if (!selector) {
throw 'Missing selector';
}
var msg;
if (formal) {
msg = this.formatGreeting();
} else {
msg = this.greeting();
}
$(selector).html(msg);
return this;
}
}
78 – Good Commenting
As in JavaScript, something can be done in many ways, it makes it more necessary on JavaScript to comment out code for other people.
79 – Let’s use our Framework
In some libraries, it’s possible to fund that they start with a semicolon. That is there to make sure if some other library that has been loaded before it hasn’t properly finished using semicolons.
;(function() {
}());
$('#login').click(function() {
var loginGrtr = G$('Murari', 'Nayak');
$('#logindiv').hide();
loginGrtr.setLang($('#lang').val()).HTMLGreeting('#greeting', true).log();
});
80 – A Side Note
Review about the course
SECTION 10: Bonus Lectures
81 – Typescript, ES6 and Transpiled Languages
Transpile – Convert the syntax of one language to another
Traceur is the transpiler being used to transpile Typescript to JavaScript to be used in the browsers.
Preferably use the Typescript to start with new projects as it provides a lot of functionalities.
82 – Transpiled Languages Reference
For more on Typescript head to: http://www.typescriptlang.org and try out writing Typescript code in your browser here: http://www.typescriptlang.org/Playground
For more on Traceur head to: https://github.com/google/traceur-compiler and try out writing ES6 code in Traceur in your browser here: https://google.github.io/traceur-compiler/demo/repl.html#
SECTION 11 – BONUS: Getting Ready for ECMAScript 6
83 – Existing and Upcoming Features
84 – ES6 Features Reference
To read a list of features existing or coming in ES6, head here: https://github.com/lukehoban/es6features
SECTION 12 – Conclusion
85 – Learning to Love the Weird Parts