3. JavaScript History
• Beginnings at Netscape
• JavaScript was originally developed by Brendan Eich,
• The first version was completed in ten days
• JavaScript first called Mocha, which was later renamed
LiveScript in September 1995 and later JavaScript
6. JavaScript Engine
• Google - Chrome - V8
• Mozila - FF – Spider Monkey
• Microsoft - IE - Chakra
• Apple – safari - SquirrelFish
7.
8. Old New Browser Player
• Microsoft Edge (codenamed Spartan) is a web
browser under development by Microsoft.
9. The new var is let
let example
var arr1 = [];
for (var j = 0; j < 10; j++) {
arr1[j] = function () {
return j;
};
}
var arr1 = [];
for (var j = 0; j < 10; j++) {
(function (j) {
arr1[j] = function () {
return j;
};
})(j);
}
let arr = [];
for (let i = 0; i < 10; i++) {
arr[i] = function () {
return i;
};
}
10. Arrow Function
let square = x => x * x;
let add = (a, b) => a + b;
let pi = () => 3.1415;
console.log(square(5));
console.log(add(3, 4));
console.log(pi());
Arrow function example 1
11. Arrow Function
window.name = "Dog4";
function Dog(name){
this.name = name;
}
Dog.prototype.eat = function(){
setTimeout(function(){
console.log(`${this.name} eating`);
},300);
};
let d1 = new Dog('Dog1');
d1.eat();
window.name = "Dog4";
function Dog(name){
this.name = name;
}
Dog.prototype.eat = function(){
setTimeout(function(){
console.log(`${this.name} eating`);
}.bind(this),300);
};
let d2 = new Dog('Dog2');
d2.eat();
window.name = "Dog4";
function Dog(name){
this.name = name;
}
Dog.prototype.eat = function(){
setTimeout(() => {
console.log(`${this.name} eating`);
},300);
};
let d3 = new Dog('Dog3');
d3.eat();
Arrow function example 2
12. Class
// Animal constructor
function Animal(name) {
this.name = name;
}
// Adding walk method to Animal
Animal.prototype.walk = function () {
console.log(this.name + " is walking.");
};
// Dog constructor
function Dog(name, age) {
this.age = age;
// init Animal constructor
Animal.call(this, name);
}
// Inherit the Animal prototype (this create a copy of the prototype)
Dog.prototype = Object.create(Animal.prototype);
// Set the Dog constructor to 'Dog'
Dog.prototype.constructor = Dog;
var dog1 = new Dog("dog1", 3);
dog1.walk();
class Animal {
constructor(name) {
this.name = name;
}
walk() {
console.log(this.name + " is walking.");
}
}
class Dog extends Animal {
constructor(name,age) {
super(name); //call the parent method with super
this.age = age;
}
}
let dog1 = new Dog("dog1",3);
dog1.walk();
Class example
13. Class get and set
Class get, set example
class Person{
constructor(name){
this._name = name;
console.log(`${this._name} Created`);
}
run(){
console.log(`${this._name} is runing!`);
}
get name(){
console.log(`get this ${this._name} name`);
return this._name;
}
set name(name){
console.log(`set this ${name} name`);
this._name = name;
}
}
let p = new Person("ofir");
console.log(p.name);
p.name = "ofir fridman";
console.log(p.name);
14. Proxy
var p = new Proxy(target, handler);
let person = {
name: 'Ofir'
};
let handler = {
get: function (target, key) {
return `Hi ${target[key]}`;
}
};
person = new Proxy(person, handler);
console.log(person.name);
Get example 1
let person = {};
let handler = {
get: function (target, prop) {
if (prop in target) {
return target[prop];
}
target[prop] = new Proxy({}, handler);
return target[prop];
}
};
person = new Proxy(person, handler);
person.details.options.name = "ofir";
console.log(person.details.name);
Get example 2
*Note: current we can test it only in Firefox
15. Proxy
Set example
let person = {};
let handler = {
set: function (target, prop, value) {
if (prop === "id") {
throw new TypeError('You not allow to change id!!!');
}
if (prop === "age") {
if (!Number.isInteger(value)) {
throw new TypeError(`age should be integer. `);
}
}
if (prop === "name") {
target[prop] = value.charAt(0).toUpperCase() + value.slice(1);
}
}
};
person = new Proxy(person,handler);
person.name = "ofir";
console.log(person.name);
person.id = 123;
person.age = 12.2;
*Note: current we can test it only in Firefox
16. Iterators
Iterable
[1,2,n]
Iterator
next()
{value: 1, done: false}
{value: 2, done: false}
{value: n, done: false}
{value: n+1, done: true}
Example Iterators
let sum =0;
let numbers = [1,2,3,4];
let iterator = numbers.values();
let next = iterator.next();
while(!next.done){
sum += next.value;
next = iterator.next();
}
console.log(`sum = ${sum}`);
sum = 0;
for(let i of numbers){
sum += i;
}
console.log(`sum = ${sum}`);
20. External links
Wikipedia
Brendan Eich
w3schools
Browser Statistics
JavaScript engine
You Tube
ECMAScript 6 - The Future is Here - Uri Shaked
ES6: A realistic use of proxies
MDN
Proxy
Classes
let
Arrow functions
Iterators and generators
Pluralsight
JavaScript Fundamentals for ES6
+ Slides
EcmaScript 6 Today! By Abdul Habrah
ECMAScript 6 with Kit Cambridge
