Java Script@2018

JavaScript
@2018
Mobile / Web / Server

“A language that doesn’t
affect the way you think
about programming is
not worth learning.”
– Alan J. Perlis
2
3
JavaScript @2018
1. Introduction
2. Functional Programming
3. Scope & Closures
4. this & Objects
5. Delegation OOP
6. ES6 & Classes
7. Asynchrony
8. DOM & Events
4
JavaScript @2018
9. New in ECMAScript 6
10. New in ECMAScript 8
5
1.
JavaScript @2018
1. Introduction
6
1.
SDLC C/C++ Compiling Linking *.exe
OS
~Software
HW
Development
Life Cycle
Java Compiling JVM JIT
OS
HW
JS JSVM JIT
OS AOT
HW
7
1.
SDLC
Ahead-of-Time
Compiler
JS JSVM AOT
OS
https://angular.io/guide/aot-compiler HW
8
1.
Java & JavaScript 1995
“JavaScript” is as
related to “Java”
as “Carnival”
is to “Car” – Nick Balestra
@nickbalestra
9
1.
Java & JavaScript 1995
Java: “class” OOP

JavaScript: “object” OOP
10
1.
JavaScript @2018
Java JavaScript
Strongly-typed Loosely-typed
Static Dynamic
Classical Prototypal
Classes Functions
Constructors Functions
Methods Functions 11
1.
JavaScript @2018
Details of the Object Model (MDN)
https://developer.mozilla.org/
12
1.
JavaScript 2015
ES3 ECMAScript 3 (1999)
ES5 ECMAScript 5 (strict mode)
ES6 ECMAScript 6 (2015-classes)
13
1.
JavaScript 2015
Tool: Chrome Developer Tools
14
1.
JavaScript 2015
15
1.
JavaScript 2015
D JS
JS
JS Express
JS
DB T JS
Node
Angular
C JS
16
1.
JavaScript @2018
➔ https://github.com/
ericelliott/essential-
javascript-links
17
1.
JavaScript @2018
➔ Engines
V8 - Google
SpyderMonkey - Mozilla
Chakra - Microsoft
JavaScriptCore - Apple
18
1.
JavaScript @2018
➔ Threading
JavaScript VM
Single Threaded
event loop
19
1.
JavaScript @2018
➔ Single Threaded
event loop
i.e., no deadlocks, no race
conditions*, no starving ...
20
1.
JavaScript @2018
➔ Types
JavaScript has typed
values, not typed variables.
21
1.
JavaScript @2018
➔ Built-in Types
string null
number undefined
boolean object
22
1.
JavaScript @2018
➔ Built-in Types
symbol (New to ES6)
23
1.
JavaScript @2018
➔ typeof
let a;
typeof a; // undefined
a = "hello world";
typeof a; // string
24
1.
JavaScript @2018
➔ typeof
a = 42;
typeof a; // number
a = true;
typeof a; // boolean
25
1.
JavaScript @2018
➔ typeof
a = null;
typeof a; // object !
a = undefined;
typeof a; // undefined
26
1.
JavaScript @2018
➔ const
const c; // SyntaxError: Missing
// initializer in const
// declaration
27
1.
JavaScript @2018
➔ const
const c = 1;
c; // 1
c = 2; // TypeError: Assignment
// to constant variable
28
1.
JavaScript @2018
➔ typeof
let a = {}; // literal object
typeof a; // object
a.b = 1; // add & init property
a.b; // 1
29
1.
JavaScript @2018
➔ typeof
a = {
b: "c",
};
typeof a; // object
30
1.
JavaScript @2018
31
1.
JavaScript @2018
➔ string
a = "hello world";
a = 'hello world';
a = `hello world`;
32
1.
JavaScript @2018
➔ string
let b = Math.PI;
a = `π = ${b}`; // "π = " +
Math.PI
// π = 3.141592653589793
33
1.
JavaScript @2018
➔ number
let c = 3.14159; // 64-bit
// ~9 quadrillion
// 15 zeros
34
1.
JavaScript @2018
➔ number
let x = +Infinity; // +infinity
let y = -Infinity; // -infinity
let n = NaN; // n != n
35
1.
JavaScript @2018
➔ number
let x = Infinity; // +infinity
let y = -Infinity; // -infinity
let n = NaN; // NaN != NaN
typeof n; // number
36
1.
JavaScript @2018
➔ number
NaN == NaN; // false
null == undefined; // true
null === undefined; // false
37
1.
JavaScript @2018
➔ number
null == 0; // false
null === 0; // false
38
1.
JavaScript @2018
➔ object
let obj = {
a: "hello world",
b: 7,
c: true,
};
39
1.
JavaScript @2018
➔ object
obj.a; // "hello world"
obj.b; // 7
obj.c; // true
40
1.
JavaScript @2018
➔ object
obj["a"]; // "hello world"
obj["b"]; // 7
obj["c"]; // true
let x = "c";
obj[x]; // true
41
1.
JavaScript @2018
➔ object / methods
let a = {
x: 5,
s: "string",
toString: function() {
return `x=${this.x} s=${this.s}`;
}
}; 42
1.
JavaScript @2018
let a = {
x: 5,
s: "string"
};
a.toString = function() {
}; 43
1.
JavaScript @2018
let a = {
x: 5, s: "string", toString: toString
};
function toString() {
};
44
1.
JavaScript @2018
let a = {
x: 5, s: "string"
};
function toString() {
};
45
1.
JavaScript @2018
toString.apply(a);
toString.call(a);
toString.call({x: 5, s: "string"});
46
1.
JavaScript @2018
let f = toString.bind(a);
console.log(f());
47
1.
JavaScript @2018
➔ arrays
let a = [
"hello world",
7,
true
];
48
1.
JavaScript @2018
➔ arrays
a[0]; // "hello world"
a[1]; // 7
a[2]; // true
a.length; // 3
typeof a; // object
49
1.
JavaScript @2018
➔ arrays
a.push(1.0);
a.length; // 4
a.pop(); // 1
a.length; // 3
50
1.
JavaScript @2018
➔ arrays
let a = [1, 2, 3];
function pow(e) { return e*e; }
function sum(t, e) { return t+e; }
a.map(pow).reduce(sum); // 14
51
1.
JavaScript @2018
➔ arrays
let a = [2, 10, 1];
a.sort(); // [1, 10, 2]
'10' comes before '2' in Unicode

code point order
52
1.
JavaScript @2018
➔ arrays
function compare(x, y) {
return x-y; // x > y
}
a.sort(compare); // [1, 2, 10]

53
1.
JavaScript @2018
➔ arrays / methods
concat constructor copyWithin
entries every fill filter find
findIndex forEach includes indexOf
join keys lastIndexOf map pop push
54
1.
JavaScript @2018
➔ arrays / methods
reduce reduceRight reverse shift
slice some sort splice
toLocaleString toString unshift
https://developer.mozilla.org/en-US/docs/Web/
JavaScript/Reference/Global_Objects/Array
55
1.
JavaScript @2018
➔ functions
function foo() {}
function bar() { return undefined; }
foo() === bar(); // true
56
1.
JavaScript @2018
➔ functions
function foo() {
return 7;
}
typeof foo; // function
typeof foo(); // number
57
1.
JavaScript @2018
➔ functions
foo.bar = "hello world";
typeof foo.bar; // string
* functions are a subtype of objects

* functions are first-class values
58
1.
JavaScript @2018
➔ functions
foo.bar = function() {
console.log("bar");
}
foo.bar(); // bar
59
1.
JavaScript @2018
➔ functions / hoisting
hoisted(); // "foo"
function hoisted() {
console.log("foo");
}
60
1.
JavaScript @2018
Function declarations in JavaScript
are hoisting the function
definition.
61
1.
JavaScript @2018
notHoisted(); // TypeError
let notHoisted = function() {

console.log("bar");
};
62
1.
JavaScript @2018
Function expressions are not
hoisted.
63
1.
JavaScript @2018
➔ functions / private & public
methods
64
1.
JavaScript @2018
function apiService() {
function private_f() { return 'private'; }
function public_f() { return 'public'; }
this.public_f = public_f;
}
65
1.
JavaScript @2018
let svc = new apiService();
svc.public_f(); // public
svc.private_f(); // svc.private_f is
// not a function
66
1.
JavaScript @2018
➔ arrow functions
function f(x) { return x*x; }
let f = x => x*x;

f(5); // 25
(x => x*x)(5); // 25
67
1.
JavaScript @2018
➔ arrow functions
() => 0 // valid
(() => 0)(); // 0
(() => {})(); // undefined
// always anonymous
68
1.
JavaScript @2018
➔ arrow functions
(() => 7)(); // 7
(() => {return 7;})(); // 7
let a = {};
(() => a)(); // Object
69
1.
JavaScript @2018
➔ arrow functions
(() => () => 0)(); // 0
(x => x*x)(3); // 9
(x, y => x+y)(3,4); // RefError
((x, y) => x+y)(3,4); // 7
70
1.
JavaScript @2018
➔ arrow functions
let a = [1, 2, 3];
a.map(x => x*x); // [1, 4, 9]
let a = [1, 2, 3];

a.map((x,y) => x+y); // [1, 3, 5]
71
1.
JavaScript @2018
➔ IIFE (“iffy”)
// Immediately Invoked Function Expressions
(function() {
console.log("Hello!");
}());
// "Hello!" 72
1.
JavaScript @2018
➔ IIFE / lambda version
(() => {
console.log("Hello!");
})();
// "Hello!"
73
1.
JavaScript @2018
➔ IIFE = module
let x = (function() {
return 7;
}());
x; // 7
74
1.
JavaScript @2018
➔ IIFE = module
// Revealing Module Pattern
let svr = (function() {
... // private & public properties
return {
... // object literal w/exported services
};
}()); 75
1.
JavaScript @2018
➔ IIFE = module
(function f() {
// f’s lexical scope
// preserve global name space
}());
76
1.
JavaScript @2018
➔ IIFE = module
(function(exports) {
exports.f1 = function() { ... }
exports.f2 = function() { ... }
}(this.exported = {}));
77
1.
JavaScript @2018
➔ AMD
/**
* Asynchronous Module Definition
* How are pieces of JavaScript code
* defined today?
*/
78
1.
JavaScript @2018
➔ AMD
<script src=bootstrap.js></script>
<script src=jquery.js></script>
// Error: Bootstrap's JavaScript

// requires jQuery
79
1.
JavaScript @2018
➔ AMD
// Eloquent JavaScript
// Marijn Haverbeke
// Chapters 10, 14 & 17
// (see Resources/JavaScript)
80
1.
JavaScript @2018
➔ IIFE / defensive semicolon
;(function f() {
// ...
}());
81
2.
JavaScript @2018
2. Functional
Programming
82
2.
JavaScript @2018
➔ functional programming
function print(msg) {
console.log(msg);
}
83
2.
JavaScript @2018
function printArray(a) {
for (let i = 0; i < a.length; i++) {
print(a[i]);
}
}
84
2.
JavaScript @2018
function printArray(a) {
for (let n of a) {
print(n);
}
}
85
2.
JavaScript @2018
let a = [1, 2, 3];
printArray(a); // 1
// 2
// 3
86
2.
JavaScript @2018
function forEach(a, action) {
for (let n of a) {
action(n);
}
}
87
2.
JavaScript @2018
let a = [1, 2, 3];
forEach(a, print); // 1
// 2
// 3
88
2.
JavaScript @2018
function sum() {
let t = 0;
forEach(a, function(n) {
t += n;
});
return t;
} 89
2.
JavaScript @2018
console.log(sum()); // 6
sum(): Functions that operate on

other functions are called
higher-order functions.
90
2.
JavaScript @2018
function power(exp) {
return function(n) {
let r = n;
for (let i = 1; i < exp; i++) { r *= n; }
return r;
}
} 91
2.
JavaScript @2018
let pow2 = power(2);
let pow3 = power(3);
pow2(10); // 100
pow3(10); // 1000
92
2.
JavaScript @2018
➔ currying / arity
function f0() {}
function f3( a, b, c ) {}
f0.length; // 0
f3.length; // 3
93
2.
JavaScript @2018
➔ currying / std functions
function sum( x ) {
return function( y ) {
return function( z ) {
return x+y+z;
}
}
} 94
2.
JavaScript @2018
➔ currying / arrow functions
(x) => (y) => (z) => x+y+z
((x) => (y) => (z) => x+y+z)

(1)(2)(3); // 6
95
2.
JavaScript @2018
➔ currying
(x, y, z) => x+y+z
((x, y, z) => x+y+z)(1, 2, 3); // 6
96
2.
JavaScript @2018
➔ currying
a(1)(2)(3); // 6
let b = a( 1 );
let c = a( 1 )( 2 );
b(2)(3); // 6
c(3); // 6
97
2.
JavaScript @2018
➔ currying
The first function is the result of
currying the second function. Calling
a curried function with only some of
its arguments is sometimes called
partial application.
98
2.
JavaScript @2018
➔ monkey-patching
if (!Number.isNaN) {
Number.isNaN = function isNaN(x) {
return x !== x;
};
}
99
2.
JavaScript @2018
➔ coercion / explicit
let a = "7";
let b = Number(a);
b; // 7
100
2.
JavaScript @2018
➔ coercion / implicit
let a = "7";
let b = a * 2; // a implicitly
// coerced to 7
b; // 14
101
2.
JavaScript @2018
➔ falsy & truthy
"" (empty string)
0, -0, NaN (invalid number)
null, undefined
false
102
2.
JavaScript @2018
➔ falsy & truthy
Any value that's not on the previous
"falsy" list is "truthy":
Boolean(+Infinity) // true
Boolean(-Infinity) // true
103
2.
JavaScript @2018
➔ falsy & truthy
Boolean("0"); // true
Boolean(Number("0")); // false
function f() {};

Boolean(f); // true
104
2.
JavaScript @2018
➔ equality
let a = "7";
let b = 7;
Boolean(a == b); // true

Boolean(a === b); // false
105
2.
JavaScript @2018
➔ equality
let a = 7;
let b = "foo";
Boolean(a > b); // false
Boolean(a < b); // false
Boolean(a == b); // false
106
2.
JavaScript @2018
➔ "use strict"; New in ES5
function foo() {
a = 1; // ‘let’ missing
console.log( a );
}
foo(); // 1
107
2.
JavaScript @2018
"use strict"; // turn on strict mode
function foo() {
a = 1; console.log( a );
}
foo(); // ReferenceError
108
2.
JavaScript @2018
function foo() {
}
foo(); // 1, continues ...
109
2.
JavaScript @2018
function bar() { // continued
"use strict";
}
bar(); // ?
110
2.
JavaScript @2018
➔ keywords
break case catch class const
continue debugger default delete do
else enum export extends false
finally for function if implements
111
2.
JavaScript @2018
➔ keywords
import in instanceof interface let
new null package private
protected public return static super
switch this throw true try typeof
let void while with yield
112
3.
JavaScript @2018
3. Scope & Closures
113
3.
JavaScript @2018
➔ scope
Defined as the set of rules that govern
how the Engine can look up a variable by
its identifier name and find it, either
in the current Scope, or in any of the
Nested Scopes it's contained within.
114
3.
JavaScript @2018
➔ lexical
scope
115
3.
JavaScript @2018
➔ lexical scope
Lexical scope means that scope is defined
by author-time decisions of where
functions are declared.
116
3.
JavaScript @2018
➔ lexical scope (JS)
function foo() { console.log(a); } // 2
function bar() { let a = 3; foo(); }
let a = 2;
bar();
117
3.
JavaScript @2018
➔ dynamic scope
Lexical scope cares where a function was
declared, but dynamic scope cares where a
function was called from.
118
3.
JavaScript @2018
➔ dynamic scope (Perl …)
function foo() { console.log(a); } // 3
function bar() { let a = 3; foo(); }
let a = 2;
bar();
119
3.
JavaScript @2018
➔ function scope
function foo(a) {
let b = 2;
}
b; // ReferenceError
120
3.
JavaScript @2018
➔ block scope
for (var i = 0; i < 10; i++) {
console.log( i );
}
i; // 10
121
3.
JavaScript @2018
➔ block scope
for (let i = 0; i < 10; i++) {
console.log( i );
}
i; // ReferenceError
122
3.
JavaScript @2018
➔ block scope
if (true) {
let a = 2;
const b = 3;
}
a; // 2
b; // ReferenceError 123
3.
JavaScript @2018
➔ scope chain
Context object:
– [[scope]]
– Variable / Activation Object
– "this" context value
124
3.
JavaScript @2018
➔ scope chain
Global environment:
– The global environment is a unique
Lexical Environment which is created
before any ECMAScript code is executed.
125
3.
JavaScript @2018
➔ scope chain
Global object:
– The unique (singleton) global object is
created before control enters any
execution context.
126
3.
JavaScript @2018
➔ the chicken or the egg?
a = 2;
let a;
console.log( a ); // ?
127
3.
JavaScript @2018
console.log( a ); // ?
let a = 2;
128
3.
JavaScript @2018
a = 2;
let a;
console.log( a ); // 2
129
3.
JavaScript @2018
console.log( a ); // ReferenceError
let a = 2;
130
3.
JavaScript @2018
declaration = “egg”
assignment = “chicken”
declaration → compilation time

assignment → execution time
131
3.
JavaScript @2018
let a = 2; // two statements
// 1st declaration
// 2nd assignment
132
3.
JavaScript @2018
The egg (declaration) comes before
the chicken (assignment).
133
3.
JavaScript @2018
Only the declarations themselves are
hoisted, while any assignments or
other executable logic are left in
place.
134
3.
JavaScript @2018
➔ closure
function makeAdder(x) { // `x` is an inner variable
// inner function àdd()` uses `x`,
// so it has a "closure" over it
function add(y) {
return y + x;
};
return add;
}
135
3.
JavaScript @2018
➔ closure
let addOne = makeAdder(1);
let addTen = makeAdder(10);
addOne(1); // 2
addTen(1); // 11
136
3.
JavaScript @2018
➔ closure
Closure is when a function is able
to remember and access its lexical
scope even when that function is
executing outside its lexical scope.
137
3.
JavaScript @2018
➔ closure (fail)
for (var i = 1; i <= 5; i++) {
setTimeout( function(){
console.log(i); // 6, 6, 6, ...
}, i*1000 );
}
138
3.
JavaScript @2018
➔ closure (fail)
for (let i = 1; i <= 5; i++) {
(function() {
console.log(i); // 6, 6, 6, ...
}, i*1000 );
}());
} 139
3.
JavaScript @2018
➔ closure (OK)
for (var i = 1; i <= 5; i++) {
(function() {
var j = i;
setTimeout( function(){ console.log(j); },
j*1000 ); // 1, 2, 3, ...
}());
} 140
3.
JavaScript @2018
➔ closure (shorter)
for (let i = 1; i <= 5; i++) {
(function(j) {
console.log(j); // 1, 2, 3, ...
}, j*1000 );
}(i));
} 141
3.
JavaScript @2018
➔ closure (block scope)
for (let i = 1; i <= 5; i++) {
console.log(i); // 1, 2, 3, ...
}, i*1000 );
}
142
3.
JavaScript @2018
➔ module (pattern)
function Module() {
let x = "cool";
function foo() { console.log(x); }
return { foo: foo }
}
143
3.
JavaScript @2018
let m = Module();
m.foo(); // cool
144
3.
JavaScript @2018
➔ module / Singleton
let single = (function Module() {
let x = "cool";
return { foo: foo }
}());
145
3.
JavaScript @2018
function Module(x) {
return { foo: foo }
}
146
3.
JavaScript @2018
let m1 = Module("m1");
let m2 = Module("m2");
m1.foo(); // m1
m2.foo(); // m2
147
3.
JavaScript @2018
➔ module / State
// exercise
let api = State(a);
api.service(); // service-a
api.setState(b);
api.service(); // service-b
148
3.
JavaScript @2018
➔ module (ES6)
ES6 modules must be defined in
separate files (one per module).
149
3.
JavaScript @2018
➔ module (ES6)
Each module can both import other
modules (specific API members), as
well export their own public API
members.
150
3.
JavaScript @2018
➔ module / foo.js (ES6)
function hello(who) {
return "Hello " + who;
}
export hello;
151
3.
JavaScript @2018
➔ module / bar.js (ES6)
import hello from "foo";
function sayHello(name) {
console.log(
hello(name).toUpperCase());
}
export sayHello;
152
3.
JavaScript @2018
➔ module / x.js (ES6)
import * as bar from "bar";
bar.sayHello("Juan"); // HELLO JUAN
153
4.
JavaScript @2018
4. this & Objects
154
4.
JavaScript @2018
➔ this
function identify() {
return this.name.toUpperCase();
}
let me = { name: "Kyle" };
let you = { name: "Reader" };
155
4.
JavaScript @2018
➔ this
identify(me); // TypeError
identify.call(me); // KYLE
identify.call(you); // READER
156
4.
JavaScript @2018
➔ this
function identify(ctx) {
return ctx.name.toUpperCase();
}
identify(me); // KYLE
identify(you); // READER
157
4.
JavaScript @2018
➔ this
function Person(name) {
this.name = name;
}
let me = Person("Kyle");
let you = new Person("Reader");
158
4.
JavaScript @2018
➔ this
me.name; // TypeError
window.name; // Kyle
you.name; // Reader
159
4.
JavaScript @2018
➔ this
this is not an author-time binding
(Java et al.), but a runtime binding.
160
4.
JavaScript @2018
➔ this / default binding
function f() {
console.log(this);
}
f(); // [object Window]
161
4.
JavaScript @2018
➔ this / default binding
"use strict"; // ES5
function f() {
console.log(this);
}
f(); // undefined
162
4.
JavaScript @2018
➔ this / implicit binding
function foo() {
console.log(this.a);
}
let obj = { a: 7, foo: foo };
obj.foo(); // 7
163
4.
JavaScript @2018
➔ this / lost binding
let bar = obj.foo;
bar(); // undefined
164
4.
JavaScript @2018
let bar = obj.foo;
bar(); // TypeError
165
4.
JavaScript @2018
setTimeout(obj.foo, 100);
// TypeError
166
4.
JavaScript @2018
➔ this / explicit binding
let obj = { a: 7 };
foo.call(obj); // 7
foo.apply(obj); // 7
let f = foo.bind(obj); // ES5
f(); // 7
167
4.
JavaScript @2018
➔ this / hard binding
let obj = { a: 7 };
let bar = function() {
foo.call(obj);
};
setTimeout(bar, 100); // 7
168
4.
JavaScript @2018
➔ this / hard binding
bar.call(window); // 7
bar.call(undefined); // 7
169
4.
JavaScript @2018
➔ this / new binding
function Foo(x) {
this.x = x;
}
let foo = new Foo(7);
foo.x; // 7
170
4.
JavaScript @2018
➔ this / precedence
1. new binding
2. explicit binding (call, apply,
bind)
3. implicit binding (obj.foo())
4. default binding
171
4.
JavaScript @2018
➔ this / tutorial
http://javascriptissexy.com/this
172
4.
JavaScript @2018
➔ objects / literal syntax
let obj = {
key: value,
...
};
173
4.
JavaScript @2018
➔ objects / constructed
let obj = new Object();
obj.key = value;
...
174
4.
JavaScript @2018
➔ objects / not all ...
typeof "abc"; // string
typeof String; // function
typeof 7; // number
typeof Number; // function
175
4.
JavaScript @2018
typeof true; // boolean
typeof Boolean; // function
typeof null; // object

typeof undefined; // undefined
176
4.
JavaScript @2018
typeof {}; // object
typeof new Object(); // object
typeof Array; // function

typeof RegExp; // function
177
4.
JavaScript @2018
typeof Error; // function
typeof Symbol; // function
Symbol("foo") === Symbol("foo");

// false
178
4.
JavaScript @2018
➔ objects / built in
String Number
Boolean Object
Function Array
Date RegExp Error
Symbol (ES6)
179
4.
JavaScript @2018
➔ objects / contents
let obj = {
a: 7
};
obj.a; // 7
obj["a"]; // 7
180
4.
JavaScript @2018
➔ objects / contents
In objects, property names are
always strings.
181
4.
JavaScript @2018
➔ objects / ES6
let prefix = "foo";
let obj = {
[prefix + "bar"]: 7
}
obj["foobar"]; // 7
182
4.
JavaScript @2018
➔ objects / deep copy
let clone = JSON.parse(
JSON.stringify(obj));
// ES6
let clone = Object.assign({}, obj);
183
4.
JavaScript @2018
➔ objects / descriptors
let obj = {
a: 7
};
Object.getOwnPropertyDescriptor(
obj, "a");
184
4.
JavaScript @2018
// Object {
// value: 7,
// writable: true,
// enumerable: true,
// configurable: true
// } 185
4.
JavaScript @2018
let obj = {};
186
4.
JavaScript @2018
Object.defineProperty( obj, "a", {
value: 7,
writable: true,
configurable: true,
enumerable: true
}); 187
4.
JavaScript @2018
let obj = {};
Object.defineProperty( obj, "a", {

value: 7,
});
188
4.
JavaScript @2018
// Object {
// value: 7,
// writable: false,
// enumerable: false,
// configurable: false
// } 189
4.
JavaScript @2018
➔ objects / writable
The ability for you to change the value
of a property is controlled by
writable.
190
4.
JavaScript @2018
➔ objects / writable
value: 7,
writable: false,
...
obj.a = 2;
obj.a; // 7 ("use strict"; TypeError)
191
4.
JavaScript @2018
➔ objects / configurable
As long as a property is currently
configurable, we can modify its
descriptor definition, using the same
defineProperty(..) utility.
192
4.
JavaScript @2018
value: 7,
configurable: false,
...
value: 7,
configurable: true, // TypeError
... // no way back ! 193
4.
JavaScript @2018
➔ objects / enumerable
value: 7,
configurable: false,
...
delete(obj.a);
obj.a; // 7
194
4.
JavaScript @2018
value: 7,
enumerable: false,
...
for ( let attr in obj ) {
// 'a' not shown
} 195
4.
JavaScript @2018
➔ objects / immutability
let obj = {};
Object.defineProperty(obj, "a", {
value: 2,
writable: false,
configurable: false
}); 196
4.
JavaScript @2018
➔ objects / immutability
let obj = { a: 7 };
Object.preventExtensions( obj );
obj.b = 3;
obj.b; // undefined
197
4.
JavaScript @2018
➔ objects / seal
let obj = { a: 7 };
Object.seal( obj );
// ~ Object.preventExtensions( obj )
// + configurable: false
198
4.
JavaScript @2018
➔ objects / freeze
let obj = { a: 7 };
Object.freeze( obj );
// ~ Object.seal( obj )
// + writable: false
199
4.
JavaScript @2018
➔ objects / [[Get]]
let obj = { a: 7 };
obj.a; // 7
obj.b; // undefined (!= null)
200
4.
JavaScript @2018
➔ objects / [[Put]]
let obj = {
f: function() {} // writable: false
};
obj.f = function() {};
// "use strict"; → TypeError
201
4.
JavaScript @2018
➔ objects / getters & setters
let obj = {
get a() { // creates a read-only
return 7; // pseudo property "a"
}
};
202
4.
JavaScript @2018
obj.a = 1;
obj.a; // 7
"use strict";
obj.a = 1; // TypeError
203
4.
JavaScript @2018
let obj = {
set a( val ) {
this.a = val; // stack overflow !
}
};
obj.a = 7; 204
4.
JavaScript @2018
let obj = {
_a_: 7,
get a() { return this._a_; },
set a( val ) { this._a_ = val; }
};
205
4.
JavaScript @2018
obj.a; // 7
obj.a = 1;
obj.a; // 1
obj._a_; // ?
206
4.
JavaScript @2018
➔ objects / existence
let obj = {
a: 7
}
a in obj; // ReferenceError
"a" in obj; // true
"b" in obj; // false 207
4.
JavaScript @2018
let obj = {
a: 7
}
obj.hasOwnProperty("a"); // true
obj.hasOwnProperty(7); // false
// obj.hasOwnProperty() ? 208
4.
JavaScript @2018
let obj = {
a: 7
}
obj.hasOwnProperty( "a" ); // true
// hasOwnProperty() ? 209
4.
JavaScript @2018
let obj = {
a: 7
}
Object.keys( obj ); // ["a"]
Object.values( obj ); // TypeError
// ff 47 210
4.
JavaScript @2018
let it = ["a", 2, function() {}];
for ( let value of it ) {
console.log( value ); // a,
// 2,
// function() {}
} 211
4.
JavaScript @2018
let it = "string";
for ( let value of it ) {
console.log(
value
); // s t r i n g
} 212
4.
JavaScript @2018
function f() {
for ( let value of arguments ) {
console.log( value ); // 1 a
}
}
f( 1, "a" ); 213
4.
JavaScript @2018
➔ objects / classes
JavaScript has had some class-like
syntactic elements (like new and
instanceof).
Does that mean JavaScript actually has
classes? Plain and simple: No.
214
4.
JavaScript @2018
➔ objects / classes
ES6 "class": syntactic sugar
215
4.
JavaScript @2018
➔ objects / constructors
function Figure( color ) {
this.color = color; // add attr and
} // initialize it
216
4.
JavaScript @2018
// better
let Figure = function( color ) {
this.color = color;
}
217
4.
JavaScript @2018
let figure = new Figure(
"blue"
);
218
4.
JavaScript @2018
sets __proto__
➔ objects / new key
1. Creates a new object

2. Links object to its "prototype"
3. Sets the "this" binding
4. Returns the object
219
4.
JavaScript @2018
➔ objects / inheritance 1
function Line( color, thickness ) {
Figure.call( this, color );
this.thickness = thickness;
}
220
4.
JavaScript @2018
// better
let Line = function(
color, thickness ) {
Figure.call( this, color );
} 221
4.
JavaScript @2018
let line = new Line(
"red",
1.0
);
222
4.
JavaScript @2018
➔ object / prototypes
All objects in JavaScript are
descended from Object; all objects
inherit properties and methods from
Object.prototype.
223
4.
JavaScript @2018
➔ object / prototypes (1)
Object.prototype
writable → no
configurable → no
enumerable → no
224
4.
JavaScript @2018
Object.getPrototypeOf(); // function
Object.setPrototypeOf(); // function
225
4.
JavaScript @2018
// literal
let obj = {
color: "green"
};
226
4.
JavaScript @2018
Prototype Chain:
{obj}
→ {Object.prototype}
→ null
227
4.
JavaScript @2018
// clone + wrapper
let obj = Object.create({
color: "green"
});
228
4.
JavaScript @2018
Prototype Chain:
{obj}
→ {literal}
→ null
229
4.
JavaScript @2018
let base = {
color: "green"
};
let obj = Object.create( base );
230
4.
JavaScript @2018
Object.getPrototypeOf( obj ) ===
base; // true
Object.getPrototypeOf( base ) ===

Object.prototype; // true
231
4.
JavaScript @2018
Object.getPrototypeOf(
Object.prototype ); // null
232
4.
JavaScript @2018
Prototype Chain:
{obj}
→ {base}
→ null
233
4.
JavaScript @2018
let obj = Object.create( null );
Object.getPrototypeOf( obj ); // null
Prototype Chain:
{obj} → null
234
4.
JavaScript @2018
let obj = {};
// equivalent to:
let obj = Object.create(
Object.prototype );
235
4.
JavaScript @2018
➔ objects / prototypes (3)
// "constructor"
this.color = color;
}
let obj = new Figure( "green" );
236
4.
JavaScript @2018
Prototype Chain: this is the reason
{obj} why you prefer to
add methods to
→ {Figure.prototype} Figure.prototype:
just one instance
→ null
237
4.
JavaScript @2018
this.color = color; }
Figure.getColor = function() {
return this.color; }
238
4.
JavaScript @2018
"red", 1.0
);
line.getColor(); // TypeError
239
4.
JavaScript @2018
this.color = color;
this.getColor = function() {
return this.color;
}
} 240
4.
JavaScript @2018
"red", 1.0
);
line.getColor(); // red (cost?)
// Figure.prototype =
// better 241
4.
JavaScript @2018
this.color = color;
}
Figure.prototype.getColor = function() {
return this.color;
} 242
4.
JavaScript @2018
➔ objects / prototypes
let figure = new Figure(
"green",
);
figure.getColor(); // green
// just 1 getColor
// function 243
4.
JavaScript @2018
"red", 1.0
);
line.getColor(); // TypeError
244
4.
JavaScript @2018
Line.prototype = Object.create(
Figure.prototype );
line.getColor(); // red
245
4.
JavaScript @2018
function Figure( color ) {
this.color = color;
}
Figure.prototype.getColor = function() {
return this.color;
} 246
4.
JavaScript @2018
function Line( color, thickness ) {
this.color = color;
}
Line.prototype = Object.create(
Figure.prototype ); 247
4.
JavaScript @2018
"red", 1.0
);
line.getColor(); // red
248
4.
JavaScript @2018
➔ objects / TypeScript
class Figure {
color: string;
constructor( color: string ) {
this.color = color;
}
... 249
4.
JavaScript @2018
...
getColor() {
return this.color;
}
}
250
4.
JavaScript @2018
➔ objects / ES6
class Line extends Figure
thickness: number;
constructor( color, thickness ) {
super( color );
}
} 251
4.
JavaScript @2018
➔ objects / ES6
More in Section 6: ES6 & Classes
252
This course ...
253
4.
JavaScript @2018
https://www.typescriptlang.org/play/
TypeScript → JavaScript
254
5.
JavaScript @2018
5. Delegation OOP
255
5.
JavaScript @2018
➔ objects / Delegation OOP
"Objects linked to other objects."
256
5.
JavaScript @2018
let Task = {
setID: function(id) { this.id = id; },
getID: function() { return this.id; }
};
257
5.
JavaScript @2018
let Compiler = Object.create( Task );
Compiler.compile( id, code ) {
this.setID( id );
this.code = code;
}
258
5.
JavaScript @2018
let compiler = Object.create(Compiler);
compiler.compile(101, "code") {...}
compiler.getID(); // 101
// (no new used ...)
259
5.
JavaScript @2018
let Figure = {
setColor: function( color ) {
this.color = color; },
getColor: function() {
return this.color; }
} 260
5.
JavaScript @2018
let Line = Object.create( Figure );
Line.paint = function( color ) {
this.setColor( color );
console.log( "painting in " +
this.getColor() );
} 261
5.
JavaScript @2018
let line = Object.create( Line );
line.paint("blue"); // painting in blue
262
5.
JavaScript @2018
– Simpler
– More flexible
– Behavior delegation as a pattern
can actually lead to simpler code
architecture
263
6.
JavaScript @2018
6. ES6 & Classes
264
4.
JavaScript @2018
➔ ES6 / constructor (one!)
class Figure {
constructor(color) {
this.color = color;
}
getColor() { return this.color; }
} 265
4.
JavaScript @2018
➔ ES6 / classes
Note Function declarations are
hoisted and class declarations are
not.
266
4.
JavaScript @2018
➔ ES6 / classes
Note The bodies of class
declarations and class expressions
are executed in strict mode.
267
4.
JavaScript @2018
➔ ES6 / classes
let f = new Figure(); // Reference
// Error
class Figure {}
268
4.
JavaScript @2018
➔ ES6 / class expressions
// unnamed
let Figure = class {
this.color = color;
}
}; 269
4.
JavaScript @2018
➔ ES6 / class expressions
// named
let Figure = class Figure {
this.color = color;
}
}; 270
4.
JavaScript @2018
➔ ES6 / inheritance
class Line extends Figure
constructor(color, thickness) {
super(color);
}
} 271
4.
JavaScript @2018
➔ ES6 / static methods
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
... 272
4.
JavaScript @2018
static distance(a, b) {
let dx = a.x - b.x;
let dy = a.y - b.y;
return Math.sqrt(...);
}
} 273
4.
JavaScript @2018
let p1 = new Point(0, 0);
Point.distance(p1, p2); // 1.414213

p1.distance(p1, p2); // Error
274
4.
JavaScript @2018
Point.distance(p1, p2); // 1.414213

p1.distance(p1, p2); // Error
275
4.
JavaScript @2018
➔ ES6 / method overriding
class Animal {
speak() {
return "I am an animal";
}
}
276
4.
JavaScript @2018
class Dog extends Animal {
speak() {
return super.speak()
+ " and I bark";
}
} 277
4.
JavaScript @2018
let dog = new Dog();
dog.speak(); // I am an animal
// and I bark
278
4.
JavaScript @2018
class Animal {
constructor(name) {
this.name = name; }
speak() {
return "I am " + this.name; }
} 279
4.
JavaScript @2018
class Dog extends Animal {}
let dog = new Dog("Snoopy");
dog.speak(); // I am Snoopy
280
7.
JavaScript @2018
7. Asynchrony
281
4.
JavaScript @2018
➔ Asynchrony
asynchronous != parallel
parallel ~ multi-threaded/process
asynchronous ~ can be w/one thread
282
4.
JavaScript @2018
➔ Asynchrony
JavaScript: single threading loop
"run-to-completion"
behavior
283
4.
JavaScript @2018
➔ Asynchrony
function foo() { a = a + 1; }
function bar() { a = a * 2; }
ajax("http://some.url", foo());
ajax("http://some.url", bar());
284
4.
JavaScript @2018
➔ Asynchrony
a; // value? non-deterministic
// known as "race condition",
// however "a" is incremented
// OR doubled, exclusively
285
4.
JavaScript @2018
➔ Asynchrony / non-interact
let r = []; // OK
function f1(data) { r.foo = data; }
function f2(data) { r.bar = data; }
ajax("http://some.url", f1(result));
286
4.
JavaScript @2018
➔ Asynchrony / interacting
let r = []; // race condition
function f1(data) { r[0] = data; }
function f2(data) { r[1] = data; }
287
4.
JavaScript @2018
➔ Asynchrony / wrong
let a, b; // undefined
function f1(res) { a = res; f(); }
function f2(res) { b = res; f(); }
function f() { console.log(a + b); }
288
4.
JavaScript @2018
➔ Asynchrony / wrong
ajax("http://some.url", f1(r));
ajax("http://some.url", f2(r));
console? // NaN (always!)
289
4.
JavaScript @2018
➔ Async / the problem
// ajax ~ XMLHttpRequest
let data = ajax("http://some.url");
// race condition
console.log(data); // ~undefined
290
4.
JavaScript @2018
➔ Async / callbacks
// 1. now
ajax("...", function(...) {
// 3. later
});
// 2. now+
291
4.
JavaScript @2018
ajax("http://some.url",
function(data) { // callback
console.log(data);
}
);
292
4.
JavaScript @2018
ajax("http://some.url", {
ok: function() {...},
error: function() {...}
});
293
4.
JavaScript @2018
callback ~ "call you back later"
http://callbackhell.com/
294
4.
JavaScript @2018
➔ Async / event loop
let now = new Date();
setTimeout(function() {
let after = new Date();
console.log(after - now); // >500
}, 500);
295
4.
JavaScript @2018
➔ Async / promises
A placeholder that essentially makes
a value time independent → it's a
future value.
296
4.
JavaScript @2018
Promises are an easily repeatable
mechanism for encapsulating and
composing future values.
297
4.
JavaScript @2018
A promise is a proxy for a value not
necessarily known at its creation time.
With promises, rather than an
asynchronous call accepting a callback,
it instead returns a promise (object).
298
4.
JavaScript @2018
So how do we access the data in a
promise? We use ".then()".
Assuming function getUsers() returns a

promise:
299
4.
JavaScript @2018
function getFirstUser() {
return getUsers().then(
function(users) {
return users[0];
});
} 300
4.
JavaScript @2018
A Promise typically has one of these 4
states:
pending – ongoing, hasn’t been

fulfilled or rejected yet
301
4.
JavaScript @2018
➔ Async / promises status
fulfilled – when the promise succeeds
rejected – when the promise failed
settled – it has been fulfilled or
rejected already (immutable)
302
4.
JavaScript @2018
A pending promise can become either
fulfilled with a value, or rejected
with a reason (error). When either of
these happens, the associated handlers
queued up by a promise's then method
are called. 303
4.
JavaScript @2018
A Promise represents a proxy for a
value not necessarily known when the
promise is created. It allows you to
associate handlers to an asynchronous
action's eventual success value or
failure reason. 304
4.
JavaScript @2018
As the Promise.prototype.then() and
Promise.prototype.catch() methods
return promises, they can be chained
—an operation called composition.
305
4.
JavaScript @2018
Diagram:
https://developer.mozilla.org/en-US/doc
s/Web/JavaScript/Reference/Global_Objec
ts/Promise
306
4.
JavaScript @2018
This lets asynchronous methods return
values like synchronous methods:
instead of the final value, the
asynchronous method returns a promise
of having a value at some point in the
future. 307
4.
JavaScript @2018
Promise.all(iterable); // returns a
promise that resolves when all of the
promises in the iterable argument have
resolved, or rejects with the reason of
the first passed promise that rejects.
308
4.
JavaScript @2018
Promise.all(iterable);
// examples:
// AngularJS Resources /
// 1. JavaScript /
// Promises
309
4.
JavaScript @2018
Promise.race(iterable); // returns a
promise that resolves or rejects as
soon as one of the promises in the
iterable resolves or rejects, with the
value or reason from that promise.
310
4.
JavaScript @2018
Promise.reject(reason); // returns a
Promise object that is rejected with
the given reason.
311
4.
JavaScript @2018
Promise.resolve(value); // returns a
Promise.then object that is resolved
with the given value.
312
4.
JavaScript @2018
Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable);
313
4.
JavaScript @2018
➔ Async / resolve(value)
If the value is a thenable (i.e. has a
"then" method), the returned promise
will "follow" that thenable, adopting
its eventual state; otherwise the
returned promise will be fulfilled with
the value. 314
4.
JavaScript @2018
https://www.promisejs.org/
https://www.youtube.com/watch?v=DqMF
X91ToLw?t=10m32s
315
4.
JavaScript @2018
☢ chrome://flags/
http://ungrid.unal.edu.co/promises/imag
e.html
316
8.
JavaScript @2018
8. DOM & Events
317
8.
JavaScript @2018
➔ DOM
Document Object Model
"The browser is a really hostile
programming environment."
– Douglas Crockford
318
8.
JavaScript @2018
➔ DOM
Document Object Model
"Without web browsers, there would
be no JavaScript."
– Marijn Haverbeke
319
8.
JavaScript @2018
➔ DOM / HTML
Head
Body
320
8.
JavaScript @2018 sandbox
window
↳ document
↳ html
↳ head ...
body
↳ ...
321
8.
JavaScript @2018
➔ DOM
/ body
322
8.
JavaScript @2018
➔ DOM / elements
let links = document
.body
.getElementsByTagName("a");
links; // HTMLCollection[159]
323
8.
JavaScript @2018
➔ DOM / elements
let div = document
.getElementById("div-a");
typeof div; // object
324
8.
JavaScript @2018
➔ DOM / "alive"
document.createElement; // function
document.createTextNode; // function
...
document.replaceChild; // function
document.insertBefore; // function
325
8.
JavaScript @2018
326
8.
JavaScript @2018
➔ DOM / shadow
<video id="video" poster="http://media...">
<source id="mp4" src="http://media..."
type="video/mp4">
</video>
// http://ungrid.unal.edu.co/sintel.html
327
8.
JavaScript @2018
328
8.
JavaScript @2018
➔ DOM / shadow
The browsers gray this content out to
indicate that it is inside the Shadow DOM
and not available to the rest of the page:
the markup and styles that power the UI of
the <video> tag are encapsulated.
329
8.
JavaScript @2018
➔ DOM / web components
Shadow DOM is a new part of the HTML
spec which allows developers to
encapsulate their HTML markup, CSS
styles and JavaScript.
330
8.
JavaScript @2018
Collectively, these new tags and APIs
are referred to as Web Components.
331
8.
JavaScript @2018
Web Components is a set of four
technologies:
– HTML Imports
– Templates
– Shadow DOM
– Custom Elements
332
8.
JavaScript @2018
<div class="widget">Hello, world!</div>
<script>
let host = document
.querySelector(".widget");
let root = host.createShadowRoot();
root.textContent = "Hello, shadow DOM!";
</script> 333
8.
JavaScript @2018
http://ungrid.unal.edu.co/shadow.html
// Polymer: for creating Web Components

// Angular: version 2 uses Shadow DOM
// (3rd. course)
334
8.
JavaScript @2018
– Shadow DOM Specification
– Shadow DOM 101
– Shadow DOM 201
– Shadow DOM 301
335
8.
JavaScript @2018
➔ DOM / events
let e = document.getElementById(...);
e.addEventListener("click",
function(event) {...});
e.removeEventListener(...);
336
8.
JavaScript @2018
➔ DOM / propagation
function(event) {
event.stopPropagation();
});
337
8.
JavaScript @2018
➔ DOM / default actions
function(event) {
event.preventDefault();
...
}); 338
8.
JavaScript @2018
➔ DOM / web workers
if ( typeof(Worker) !== "undefined" ) {
// Web worker support!
}
else {
// No Web Worker support ...
} 339
8.
JavaScript @2018
let worker = new Worker("worker.js");
worker.addEventListener("message",
function(event) {
console.log(event.data);
});
340
8.
JavaScript @2018
let worker = new Worker("worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
341
8.
JavaScript @2018
// worker.js
let data = ...;
postMessage(data);
http://ungrid.unal.edu.co/worker.html
342
8.
JavaScript @2018
➔ DOM / shared workers
https://developer.mozilla.org
343
9.
JavaScript @2018
9. New in
ECMAScript 6
344
9.
JavaScript @2018
➔ arrows
➔ classes
➔ enhanced object literals
➔ template strings
➔ destructuring
➔ default + rest + spread
➔ let + const
345
9.
JavaScript @2018
➔ iterators + for..of
➔ generators
➔ unicode
➔ modules
➔ module loaders
➔ map + set + weakmap + weakset
➔ proxies
346
9.
JavaScript @2018
➔ symbols
➔ subclassable built-ins
➔ promises
➔ math + number + string + array + object APIs
➔ binary and octal literals
➔ reflect api
➔ tail calls
347
9.
JavaScript @2018
10. New in
ECMAScript 8
348
10.
JavaScript @2018
➔ async / await
➔ Object.values() & Object.entries()
➔ String padding
➔ Object.getOwnPropertyDescriptors()
➔ Shared Memory and Atomics
349

Java Script@2018

Uploaded by

Copyright:

Available Formats

You might also like

Java Script@2018

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Java Script@2018

Uploaded by

Copyright:

Available Formats

JavaScript

Mobile / Web / Server

Java: “class” OOP

'10' comes before '2' in Unicode

a.sort(compare); // [1, 2, 10]

foo() === bar(); // true

* functions are a subtype of objects

let notHoisted = function() {

let f = x => x*x;

let a = [1, 2, 3];

// Error: Bootstrap's JavaScript

sum(): Functions that operate on

((x) => (y) => (z) => x+y+z)

((x, y, z) => x+y+z)(1, 2, 3); // 6

function f() {};

Boolean(a == b); // true

3. Scope & Closures

declaration → compilation time

bar.sayHello("Juan"); // HELLO JUAN

4. this & Objects

typeof null; // object

typeof Array; // function

Symbol("foo") === Symbol("foo");

Object.defineProperty( obj, "a", {

➔ objects / new key

1. Creates a new object

Object.getPrototypeOf( base ) ===

line.paint("blue"); // painting in blue

6. ES6 & Classes

Point.distance(p1, p2); // 1.414213

Point.distance(p1, p2); // 1.414213

console? // NaN (always!)

Assuming function getUsers() returns a

pending – ongoing, hasn’t been

8. DOM & Events

typeof div; // object

// Polymer: for creating Web Components

You might also like