1. JavaScript in More Detail
Martin Kruliš
by Martin Kruliš (v1.4)

2. Revision JavaScript Values vs variables Available data types Functions
Weakly-typed, dynamic, C-like, object-oriented, prototyping, functional language
Values vs variables
Variable type is determined by the value
Available data types
number, string, boolean, object, function, and undefined
Functions
1st class citizens (declare function = create value)
Objects
Dynamic name-value collections
by Martin Kruliš (v1.4)

3. JavaScript Built-ins General-purpose Object “Classes”
Wrappers for basic types
Number, String, Boolean, Object, Function
Basic primitives (string, boolean, and number) are automatically converted to their respective wrappers
E.g., when a method is invoked upon them
Provide additional functionality
Array – object wrapper for “traditional” arrays
Date – time and date information
Iterator – implements iterator pattern
RegExp – regular expression
by Martin Kruliš (v1.4)

4. JavaScript Built-ins Non-constructor Functions
encodeURI(str) – encode string for URI
decodeURI(str) – decode URI to normal string
parseInt(str, rdx) – parse textual representation of an integer of given radix
parseFloat(str) – parse textual representation of a floating point number
encode(str) – encode non-ascii chars
decode(str) – reverse function to encode()
eval(str) – to be reviewed later…
by Martin Kruliš (v1.4)

5. Functions Function Scope of Variables
var a1; // global scope (obj. window in browser)
function foo() {
var a2; // local scope of foo()
function innerFoo() {
var a3; // local scope of innerFoo()
function innerInnerFoo() {
// I can see a1, a2, and a3 from here …
a2 = a1; }
We follow the scope chain upwards and find the first variable of the name 'a2'.
by Martin Kruliš (v1.4)

6. Functions Closure function createAdder(x) { return function(y) {
return x + y; }
var add3 = createAdder(3);
var add7 = createAdder(7);
add3(10); // is 13
add7(10); // is 17
The Inner function can see variable x due to scoping rules
When the inner function is created, the closure captures value of x == 3
New function have a new closure where x == 7
Example 1
by Martin Kruliš (v1.4)

7. Functions Closure Pitfalls function createLinks() {
All the links are created in one scope, thus sharing one closure.
Closure Pitfalls
function createLinks() {
for (var i = 1; i <= 5; ++i) {
var link = document.createElement('a');
link.onclick = function(){
alert(i); };
link.textContent = "Link " + i;
document.body.appendChild(link); }
document.onload = createLinks;
Always prints “6”.
The value of i is 6, when the scope is closed.
by Martin Kruliš (v1.4)

8. Functions Closure Pitfalls function fmaddCreate(cfg) {
Objects are passed by reference
Closure Pitfalls
function fmaddCreate(cfg) {
return function(x) {
return cfg.mul * x + cfg.add; }
var config = { mul: 2, add: 3 };
var fmadd = fmaddCreate(config);
fmadd(42); // is 87
config.mul = 3;
fmadd(42); // is 129
Object modification is visible in closure
by Martin Kruliš (v1.4)

9. Members may be added dynamically.
Objects - Revision
Objects
Objects are unordered name-value collections
All members are public
var myObject = {
foo: 10,
bar: function() {
... } };
myObject.bar();
myObject.anotherFoo = 100;
Creates simple object with two members (foo and bar), where foo is a Number and bar is Function (i.e., in some sense a method).
Members may be added dynamically.
by Martin Kruliš (v1.4)

10. Objects Classes There are no classes! But we have prototypes
What do you mean? No classes?!
Wait for ECMA Script 6!
Classes
There are no classes!
But we have prototypes
[[Prototype]]
foo
bar
name
printName()
Object.prototype
NamedObject
myObject
Classes were presented in the next version of the language (ECMAScript 6). More details in the advanced lecture (in summer term).
Searches up the prototype chain, looks for the first printName property
myObject.printName();
myObject.spam = 42;
Creates new property in myObject (no prototype chain traversing)
by Martin Kruliš (v1.4)

11. Prototyping Prototyping instead of Classes var CircleProto = {
radius: 0,
circumference: function() {
return 2 * Math.PI * this.radius; }
var circle = Object.create(CircleProto);
circle.radius = 42;
console.log(circle.circumference());
Prototype takes the role of a class
Creates new empty object which has CircleProto as prototype
Logs
by Martin Kruliš (v1.4)

12. Prototyping Classes vs Prototypes Class-based Language JavaScript
foo
Object.prototype
myObj
MySubclass
MyClass
Class-based Language
foo()
bar()
JavaScript
var MyClass
foo()
[[Prototype]]
bar
var MySubclass
bar()
[[Prototype]]
obj properties
var myObj
Example 2
by Martin Kruliš (v1.4)

13. this refers to global environment
Keyword this
Keyword this
Implicitly declared variable which has different values in different contexts
Global context
this refers to the script environment (e.g., window)
Function context
this value depends on how the function was called
obj.foo();
var foo = obj.foo;
foo();
this refers to obj
this refers to global environment
by Martin Kruliš (v1.4)

14. Object Constructor Object var o = new Object(value);
All objects are descendants of an Object
Interesting properties
create(proto, [props]) – create new object
getOwnPropertyNames(obj) – return array of property names that are native to obj
getPrototypeOf(obj) – get prototype object of obj
preventExtensions(obj) – prevent properties from being added to obj object
seal(obj) – prevent adding/removing properties
freeze(obj) – prevent any property modifications
by Martin Kruliš (v1.4)

15. ECMA Script 6 Classes class Circle extends GeometricShape {
constructor (x, y, r) {
super(x, y);
this.r = r; }
getArea () {
return Math.PI * r * r;
const circle = new Circle(10, 20, 5);
by Martin Kruliš (v1.4)

16. ECMA Script 6
Modules
Way to export/import modular values without polluting the global context (avoiding name collisions)
// mylib.js
export function explain() { return "because 6 x 9"; };
export var universalConst = 42;
// an application using mylib.js
import * as mylib from "mylib";
console.log(mylib.universalConst + " " + mylib.explain());
// another application using mylib
import { explain, universalConst } from "mylib";
console.log(universalConst + " " + explain());
by Martin Kruliš (v1.4)

17. When used with object, the properties can be modified
ECMA Script 6
Block Scoping
var x = 1; // function scope
let y = 2; // block scope
const z = 3; // constant in block scope
Arrow Functions
function foo(x) { return x*x; }
const foo = x => x*x;
When used with object, the properties can be modified
Actually, this is not just a shorthand syntax. They are more lightweight and they bind this at the moment of creation.
by Martin Kruliš (v1.4)

18. ECMA Script 6 Playing with variables and arguments
Default parameter values
function inc(val, by = 1) { return val + by; }
Aggregation of remaining arguments
function merge(al, a2, ...restArrays) {}
Spread collection elements as arguments
var coords = [ 1, 2 ,3 ];
point.moveBy(...coords); // moveBy(1, 2, 3);
var str = "bar";
var chars = [ "f", "o", "o", ...str ]; // b, a, r
by Martin Kruliš (v1.4)

19. ECMA Script 6 Playing with variables and arguments Array matching
var list = [ 1, 2, 3 ];
var [ x, y, z ] = list; // var x=1, y=2, z=3
[ z, x, y ] = [ x, y, z ]; // rotate values x,y,z
Object matching
var { x, y, z } = get3Dpoint();
var { x: y, y: x, attrs: { depth: z } } = get2Dpoint();
Context argument matching
function avgFirst2([a, b]) { return (a + b) / 2; }
function distanceTo({x, y, z = 1}) { … }
by Martin Kruliš (v1.4)

20. Functional Approach Shift in Paradigm
JavaScript is leaning steadily towards functional programming paradigm
const data = [ 1, 2, 3, 4, 5, 6 ];
for (let i = 0; i < data.length; ++i) {
if (data[i] % 2 !== 0) continue;
let x = data[i] * data[i];
console.log(x); }
by Martin Kruliš (v1.4)

21. Functional Approach Shift in Paradigm
JavaScript is leaning steadily towards functional programming paradigm
const data = [ 1, 2, 3, 4, 5, 6 ];
data.filter(x => x % 2 === 0)
.map(x => x * x)
.forEach(x => console.log(x));
by Martin Kruliš (v1.4)

22. Errors Errors/Exceptions JavaScript is very error-prone language
Error usually stops current JavaScript code
Error handling is similar to exception catching:
try { ... secured code ... }
catch(err) { ... error handling ... }
finally { ... finalization code ... }
Can be triggered manually
throw something;
Regular errors are created by Error constructor
Parameter message with human-readable description
Multiple catch blocks are allowed:
try {}
catch(e1 if condition1) { … first handling … } …
catch(e) { … default handling … }
by Martin Kruliš (v1.4)

23. Code Evaluation Explicit Evaluation The eval(code) function
The code is JavaScript code represented as string
The code is interpreted and its last value is returned
eval("3+4"); // returns 7
The eval() should be avoided whenever possible
eval("var res = obj." + propName); is equivalent with var res = obj[propName];
Functions as callbacks can be used in many places to avoid explicit eval() call
Note that eval() is not considered a good programming practice and it is dedicated for very special cases. However, it is a good example of how dynamic interpret languages are being processed.
by Martin Kruliš (v1.4)

24. Discussion
by Martin Kruliš (v1.4)