JavaScript as Development Platform

javascript
as development platform

CONVENTIONS
SOURCE CODE

BAD PRACTICE LEGACY CODE
var global = 10; function factorial(x) {
if (x <= 1) {
function foo() { return 1;
global++; }
}
return x * arguments.callee(x - 1);
}
GOOD PRACTICE
(function () {
var local = 10;
CODE SNIPPET
function foo() { function foo() {
local++; console.log(‘foo’);
} }
})();

WHAT IS javascript

The world`s most misunderstood
programming language

SOURCES OF CONFUSION
JAVA PREFIX

Completely independent from Java
Has syntax similarities

SCRIPT POSTFIX

Doesn’t mean that JS isn`t real
programming language
Full-fledged Object Oriented language

WEAK LEARNING SOURCES

Standard has complicated structure makes it hard to
read and understand
Almost all books are universally bad
Internet full of bad advices and practices

LEARNING SOURCES
BOOKS
Javascript: the definitive guide Javascript: the GOOD parts

WHAT IS Javascript

A scripting language designed as
lightweight alternative to Java for Web

history
1992

James Gosling at Sun Microsystems
has been working on superior
language to C++ called Oak

history
1992

Microsoft released Windows 3.1
and preview of Microsoft
Windows NT for developers

history
1995

Oak has failed as a language for
interactive television and has been
repurposed for Web. At this time
language has been renamed to Java.

history
1995

Sun Microsystems officially
announced HotJava browser with
support of Java-applets.

history
1995

Web becomes hot and Microsoft
ships Internet Explorer 1.0 and
Internet Explorer 2.0 few month later

history
1995

Brendan Eich at Netscape
Communication Corporation begun
working on lightweight and simple
alternative to Java for Web browser

history
1995

Later on Netscape released
Netscape Navigator 2.0 with support
of LiveScript and Java-applets

history
1995

Anticipated by opportunity to free
Web from Microsoft, Sun and Netscape
formed the alliance

As the result LiveScript has been
renamed to JavaScript

history
1996

Microsoft reverse-engineered
JavaScript and named it JScript to
avoid trademark issues with Sun

history
1996

Microsoft released Internet Explorer 3
with support of JScript

history
1996

To prevent Microsoft from mutating
the language, Sun and Netscape made
their way to ECMA to standardize the
language

history
1996

Sun and Netscape have failed and
Microsoft gathered full control on
standardization process. Microsoft
insisted on preserving some design
errors in the language

history
1998

ECMA International introduces
ECMA-262 1st + 2nd edition of
JavaScript language

VIEW STANDARD

STANDARD
ECMA 262

ECMA-262 is active standard that defines JavaScript
Uses term ECMAScript
Structured in a way that makes it hard to read

VIEW STANDARD

STANDARD
TIMELINE

1997 1998 1999 2000-2009 2009 Future

1st edition 2nd edition 3rd edition 4th edition 5th edition Harmony edition

June June December December

WHAT IS javascript

One of the most popular
programming languages

Javascript
POPULARITY
AS OF BEGINNING OF 2013

One of the most popular
programming languages

KEY persons
Brendan eich

Inventor of JavaScript language
at Netscape

KEY persons
DOUGLAS CROCKFORD

Active member of JavaScript
community
Author of JSLint and JSMin
Inventor of JSON data format

WHAT IS Javascript

A programming language designed to
be simple and flexible

DESIGN PRINCIPLES
PROGRAMMING

Lightweight & Simple
Scripting
Dynamic
Multi-paradigm

DESIGN PRINCIPLES
TARGET AUDIENCE

WEB AUTHORS Professional programmers

DESIGN PRINCIPLES
SCALABILITY

Limited scalability
Lack of modularity
Linkage through global space
Dynamicity over static typing

DESIGN PRINCIPLES
MULTI-PARADIGM language

OBJECT ORIENTED FUNCTIONAL Imperative

DESIGN PRINCIPLES
OBJECT ORIENTED LANGUAGE

OBJECT ORIENTED CODE SNIPPET
function Plane(mass) {
this.mass = mass;
};

var lightPlane = new Plane(10),
heavyPlane = new Plane(1000);

DESIGN PRINCIPLES
Functional language

FUNCTIONAL CODE SNIPPET
var
combine = function (a, b) {
return function () {
a();
b();
};
},

combined = combine(
function () {
console.log('Logging');
},
function () {
alert('Alerting');
}
);

combined();

DESIGN PRINCIPLES
OBJECT ORIENTED LANGUAGE

Imperative CODE SNIPPET
function bound(x, min, max) {
var value = x;

value = Math.min(value, max);
value = Math.max(value, min);

return value;
}

WHAT IS Javascript

A programming language that is more
than just a Web toy

Runtime
Host environments

JavaScript executes in a
JAVASCRIPT ENGINE
context of Engine
Host environment
powers JavaScript Engine
HOST SPECIFIC API

HOST ENVIRONMENTS
TYPES

WEB BROWSER OUT OF BROWSER

HOST ENVIRONMENTS
RESPOSIBILITIES

REPOSNSIBLE FOR NOT RESPONSIBLE FOR

Input/Output Code execution
Graphics Memory management
Storage
Networking
Host specific API

WHAT IS Javascript

JavaScript is a primary language of
Web browser

HOST ENVIRONMENTS
WEB BROWSER

WEB BROWSER HOST

JAVASCRIPT ENGINE

HOST SPECIFIC API

DOCUMENT OBJECT MODEL BROWSER Object MODEL

WEB BROWSER
DOCUMENT OBJECT MODEL

Representation of document as
objects hierarchy
Language & browser independent
Standardized by W3C
Revisions are called DOM levels

WEB BROWSER
BROWSER Object MODEL

API for interfacing native browser
functionality
Deals with windows and frames
All functions and object starting at
window
No corresponding standard

WEB BROWSER
BROWSER Object MODEL

Navigator
Window
object
object

Frames[] Forms[]
array array

Document links[]
object array

images[]
array
screen
object

ENGINE RUNTIME
ESSENTIALS

Interpreted (no compilation step)
Dynamically typed
Class-free
Runtime extensibility
Duck typing

Garbage collected

ENGINE RUNTIME
EXECUTION

Single threaded
Asynchrony via message loop
Linkage through global variables

ENGINE RUNTIME
Script distribution

Script are consumed as plain text
Interpreted or compiled in-place
*.js is a format for script files
Mime-type:
Officially: application/javascript
Practically: text/javascript or no MIME type at all

ENGINE RUNTIME
Script compression

WHY? techniques

Less traffic consumption GZip
Faster load time Minification
Obfuscation

Runtime engine
Script inclusion

Statically
<script> tag

Dynamically
DOM API
Runtime evaluation

Static inclusion
Script tag

Script can be put anywhere
on a page with <script> tag

CODE SNIPPET
<script src="path/to/script.js" type="text/javascript"></script>

Static inclusion
Type attribute

<script> tag should have matching </script> tag, except
when document has application/xhtml+xml MIME type
BAD PRACTICE
<script src="path/to/script.js" type="text/javascript"/>

GOOD PRACTICE
<script src="path/to/script.js" type="text/javascript"></script>

Static inclusion
Xhtmlvalidation

Type attribute is optional, but
required for XHTML validation

CODE SNIPPET
<script src="path/to/script.js"></script>

static inclusion
Inline scripts

<script> tag supports inlining, but generally
it is considered as bad practice

CODE SNIPPET
<script>
console.log('Inline script');
</script>

static inclusion
Execution ordering

Scripts attached in that way execute in
order, even if script2 got loaded sooner

CODE SNIPPET
<script src="path/to/script1.js" type="text/javascript"></script>

static inclusion
Execution ordering

Same holds for inline scripts

CODE SNIPPET

<script>
console.log('Inline script');
</script>

static inclusion
rendering

Script loading and execution blocks page
rendering

CODE SNIPPET Script.js
<script src="link/to/script.js"></script> var link =
document.getElementById('link');
<a id="link" href="url/to/somewhere.html">Link</a>
console.log(link != null); // false

static inclusion
rendering

Consider moving script to the bottom of
the document
Not every script can be moved

GOOD PRACTICE
<body>
<div class="page-content">Ipsum lerrra conde ir salle.</div>

<script src="js/script1.js"></script>
<script src="js/script2.js"></script>
</body>

static inclusion
Asyncloading

Scripts can be loaded asynchronously
using async attribute
Script loading does not block rendering

CODE SNIPPET
<script src="link/to/script.js" async></script>

Static inclusion
ASYNC loading

Ordering will not be preserved
No execution time guarantee
All async scripts are guaranteed to execute
sometime before window load event

CODE SNIPPET
<script src="link/to/script1.js" async></script>
<script src="link/to/script2.js" async></script>

Static inclusion
defer loading

Scripts can be loaded in defer manner
using defer attribute
Script loading does not block rendering

CODE SNIPPET
<script src="link/to/script.js" defer></script>

STATIC INCLUSION
defer loading

Ordering will be preserved
Scripts are guaranteed to start execution
right before DOMContentLoaded event

CODE SNIPPET
<script src="link/to/script1.js" defer></script>
<script src="link/to/script2.js" defer></script>

static INCLUSION
Async+deferloading

Causes legacy browsers to fallback to defer if
async is not supported
Modern browsers treat defer + async as async

CODE SNIPPET
<script src="link/to/script1.js" async defer></script>

static INCLUSION
LOADING TIMELINE

Scripting
<script>
HTML Parser

Scripting
<script async>
HTML Parser

Scripting
<script defer>
HTML Parser

Networking Execution Parsing

dynamic inclusion
DOM API

Script can be attached programmatically
using DOM API

DYNAMIC INCLUSION
asynchronous

Asynchronous
Script ordering will not be preserved

CODE SNIPPET
var head = document.getElementsByTagName('head')[0],
script = document.createElement('script');

script.src = 'script.js';
head.appendChild(script);

Dynamic inclusion
asynchronous

Asynchronous
Script ordering will be preserved
Older browsers require tricky solutions
CODE SNIPPET

script.async = false;

DYNAMIC INCLUSION
DEFERRED

Deferred
Has no effect when loaded via DOM API
CODE SNIPPET

script.defer = 'defer';

DYNAMIC INCLUSION
Runtime evaluation

Scripts can be evaluated at Runtime with
Eval
Eval is ―EVIL‖
Hurts performance
Makes code hard to debug
Compromises security

VIEW More

script INCLUSION
Parallel loading

Number of parallel HTTP connections per
hostname is limited
Typically varies from 2 ~ 6
Consider CDN and subdomain usage

WHAT IS Javascript

JavaScript is a language that has
many design errors

ENGINE RUNTIME
Strict EXECUTION Mode

Allows to opt-out to strict variant of
JavaScript
Intended to correct initial design errors
Prohibits usage of error-prone and insecure features

Standardized in ECMA 262-5

STRICT Mode
activation

Activated with a Use Strict Directive in a
Directive Prologue

CODE SNIPPET
'use strict';

var f = function () {
console.log('Execution under strict mode');
};

f();

STRICT Mode
scoping
CODE SNIPPET
Applied to a code unit 'use strict';

eval = 10; // SyntaxError
To a Function
To a code file eval = 20; // SyntaxError
};

Affects all inner contexts
CODE SNIPPET
Defined lexically (statically) eval = 10; // 10

'use strict';
};

STRICT Mode
inheritance

Directly Evaled code inherits Strict Mode
Indirectly Evaled code doesn`t inherit
Strict Mode
Functions created via new Function ()
dont inherit Strict Mode

STRICT Mode
Error checking

Compile time runtime

CODE SNIPPET CODE SNIPPET
'use strict'; (function () {
'use strict';
eval = 10; // SyntaxError global_variable = 10; // Reference Error
})();
};

STRICT Mode
restrictions

Reserved words
CODE SNIPPET
Implements Protected "use strict";
var let = 10; // SyntaxError
Interface Public
Let Static
Package Yield
Private

STRICT Mode
restrictions

Octal literals are not allowed
CODE SNIPPET
"use strict";
var x = 010; // SyntaxError

Assignment to an undeclared identifier
CODE SNIPPET
"use strict";
a = 10; // ReferenceError

STRICT Mode
restrictions

Assignment to read-only property
CODE SNIPPET
"use strict";

var foo = Object.defineProperties({}, {
bar: {
value: 10,
writable: false // by default
},
baz: {
get: function () {
return "baz is read-only";
}
}
});

foo.bar = 20; // TypeError
foo.baz = 30; // TypeError

STRICT Mode
restrictions

Shadowing of inherited read-only properties

CODE SNIPPET
"use strict";

var foo = Object.defineProperty({}, "x", {
value: 10,
writable: false
});

var bar = Object.create(foo);
bar.x = 20; // TypeError

STRICT Mode
restrictions

Eval and arguments
Cannot appear as variable declaration of function name

CODE SNIPPET
"use strict";

// SyntaxError in both cases
var arguments;
var eval;

// also SyntaxError
function eval() {}
var foo = function arguments() {};

STRICT Mode
restrictions

Eval and arguments
Not allowed as argument names Not assignable

"use strict"; (function (x) {
alert(arguments[0]); // 30
// SyntaxError arguments = 40; // TypeError
function foo(eval, arguments) {} })(30);

STRICT Mode
restrictions

Argument and callee properties

CODE SNIPPET
"use strict";

function foo() {
alert(foo.arguments); // SyntaxError
alert(foo.caller); // SyntaxError
}

STRICT Mode
restrictions

delete operator restrictions
CODE SNIPPET
"use strict";

var foo = {};

function bar(x) {
delete x; // SyntaxError
}

bar(10); // SyntaxError

delete foo; // SyntaxError
delete bar; // SyntaxError

STRICT Mode
restrictions

With statement this value
CODE SNIPPET Null no longer coerced to window
"use strict";
CODE SNIPPET
"use strict";
// SyntaxError
with ({a: 10}) { function foo() {
alert(a); console.log(this); // undefined
} }

foo();

STRICT Mode
restrictions

this value
Null and undefined are no longer Primitives are not converted to
coerced to window wrapper objects
"use strict"; "use strict";

function foo() { Number.prototype.test = function () {
console.log(this); // undefined console.log(typeof this); // number
} };

foo(); (1).test(); // number

STRICT Mode
restrictions

this value CODE SNIPPET
"use strict";
Helps to avoid missing new
function A(x) {
keyword issues this.x = x;
}

// forget "new" keyword,
// error, because undefined.x = 10
var a = A(10);

var b = new A(10); // OK

STRICT Mode
Usage guidelines

Do not apply strict mode to whole script
file blindly
Will not work when concatenated with some other script
Can break other scripts if after concatenation put first
Evaled code will inherit Strict Mode

Consider wrapping your scripts with self-
calling function

WHAT IS Javascript

simple but flexible type system

Type system
essentials

Class-free type system
Loose typing
Everything is an object
Technically JavaScript has primitive types but they
can be programmed as real objects

Type system
essentials

Two groups of types
Primitive types
Object types

Primitives are not real objects
Some primitives has object wrapper

Type system
Types

Primitive types Object types

Number Object
String Array
Boolean Function
null RegExp
undefined Date

numbers
essentials

Single type represents integer and floating
point numbers
IEEE 754 64 bit numbers
Be aware of floating point errors
0.1 + 0.2 !== 0.3
Can be avoided by scaling

numbers
runtime

Runtime type Number object wrapper
var foobar = 0.5; var a = 10;
typeof foobar; // "number" var b = new Number(a);
var foobar = 1;
typeof foobar; // "number" console.log(typeof b); // object

numbers
Special values

Special values
NaN
-Infinity
Infinity

numbers
nan

Paradoxical type
CODE SNIPPET
var foobar = NaN;
typeof foobar; // "number"

Watch out, easy to overwrite!
CODE SNIPPET
var NaN = "string";
typeof NaN; // "string"

numbers
nan

Getting NaN
CODE SNIPPET
var foobar = "string" * 2,
bar = "string" / 2;
var foo = +"string",
barfoo = +[1, 2, 3],
foobar2 = undefined – 2;

strings
essentials

Unicode UTF-16
Built-in string manipulation routines don't take
surrogate pairs into account

Immutable
Zero-based indexing
No dedicated Char type

strings
declaration

Literal declaration
CODE SNIPPET
var a = "string";
var b = 'string';

strings
runtime

Runtime type String object wrapper
var foobar = "variable types"; var a = 'foo';
typeof foobar; // "string" var b = new String(a);

console.log(typeof b); // object

boolean
essentials

Two possible predefined values
true
false
Generally Boolean produced by comparisons
a === 1

Any value can be converted to Boolean

Boolean
Falsyvalues
CODE SNIPPET
undefined
var falsyValue = 0;
if (!falsyValue) {

null
alert("falsy value!");
}

0 var falsyValue = "";

-0 if (!falsyValue) {

NaN }

Empty string var falsyValue = NaN;
if (!falsyValue) {
}

Boolean
runtime

Runtime type Boolean object wrapper
var foobar = true; var a = true;
typeof foobar; // "boolean" var b = new Boolean(a);

console.log(typeof b); // object

Null
essentials

Language keyword
Indicates absence of value
JavaScript never sets uninitialized
variables to null

Null
runtime

Runtime type
CODE SNIPPET
var foobar = null;
typeof foobar; // "object"

Has no object wrapper

undefined
essentials

Indicates
Variable is not defined
Variable is defined, but has no value assigned

undefined
runtime

Runtime type
CODE SNIPPET
var foobar;
typeof foobar; // "undefined"

Has no object wrapper

Undefined
runtime

Producing undefined value Can be overridden
(function (undefined) { (function () {
console.log(typeof undefined); var undefined = 10;
})(); console.log(typeof undefined);
})();

object
essentials

Fundamental data type
Unordered collection of key-value pairs
Have no fixed schema
Runtime extendable
Linked with another object via prototype

ENGINE RUNTIME
Object originators

Host objects NATIVE OBJECTS User-defined

Object originators
Host objects

Host objects
Host objects are objects that are
supplied to JavaScript by the browser
environment
Examples of these are window,
document, forms, etc
Poorly defined

Object originators
Native objects

NATIVE OBJECTS
Native objects are those objects
supplied by JavaScript runtime
Examples of these are String,
Number, Array, Image, Date, Math,
etc
Be very cautious extending these

Object originators
User-defined objects

User-defined
User-defined object are defined by
programmer
Full control
OK to extend these

object
Internal layout

[[prototype]] reference
Class discriminator
Can`t be set for user-defined objects

Extensible flag
Defined in ES5

object
declaration

Object literal syntax
var person = {
var person = {};
firstName: 'Douglas',
person.firstName = 'Douglas';
lastName: 'Crockford',
person.lastName = 'Crockford';
age: 45
person.age = 45;
};

object
declaration

Constructor function Object.create
BAD PRACTICE CODE SNIPPET
var person = Object.create(Object.prototype, {
var person = new Object(); firstName: {
writable: true,
person.firstName = 'Douglas'; configurable: true,
person.lastName = 'Crockford'; value: 'Douglas'
},
person.age = 45; lastName: {
writable: true,
configurable: true,
value: 'Crockford'
},
age: {
writable: true,
configurable: true,
value: 45
}
});

object
Property assessors

Two ways to access the object’s property

CODE SNIPPET
obj['property'];
obj.property;

object
Constructor property

Constructor property points to constructor
function
Can be messed up at runtime

CODE SNIPPET
var object = {};
console.log(object.constructor === Object);

object
prototype

Prototype links object with another object
Internal [[prototype]] field
Set at creation based on Function.prototype value

Simple form of inheritance
No schema (classes) involved
Object inherits directly from another object

prototype
chaining

{} Object.prototype NULL
[[prototype]] [[prototype]]

prototype
Property resolution

Search for property in current object
If not found search in a prototype
Move along prototype chain until null is
reached

prototype
Property resolution

Example
toString is not declared in object but rather in
Object.prototype

CODE SNIPPET
var object = {};
console.log(object.toString());

prototype
inspection

Undocumented field Constructor`s prototype
BAD PRACTICE CODE SNIPPET
var object = {}; var object = {};
console.log(object.__proto__); console.log(object.constructor.prototype);

getPrototypeOf
CODE SNIPPET
var object = {};
console.log(Object.getPrototypeOf(object));

object
reflection

for in hasOwnProperty

var obj = {
property: "foobar", for (var i in obj) {
method: function() {} if (obj.hasOwnProperty(i)) {
}; alert("The value of key " + i +
for (var i in obj) { " is " + obj[i]);
alert("The value of key " + i +" is " + }
obj[i]); }
}

object
reflection

in __count__

CODE SNIPPET BAD PRACTICE
var obj = { var obj = {
a: 10 property: "foobar",
}; method: function() {}
};
var hasProperty = ('a' in obj); obj.__count__; // 2

array
essentials

Ordered collection of values
Zero-based 32bit indexing
Dynamic
No need for memory reallocation

Specialized form of objects with length
property

Array
runtime

Runtime type
CODE SNIPPET
var array = [1, 2, 3];
typeof array; // object

Array
runtime

Array detection (fails in multi-frame scenario)
CODE SNIPPET
array instanceof Array

The most reliable way of array detection
CODE SNIPPET
Object.prototype.toString.call(array) === "[object Array]"

array
declaration

Array literal Array constructor

CODE SNIPPET BAD PRACTICE
var array = []; var array = new Array();

array
behavior

Dynamic grow & shrink Length property

var array = [1, 2, 3];
var array = [1, 2, 3];
array.push(4);
console.log(array.length); // 3
array.pop(); // 4

array
performance

JavaScript arrays are special type of object
Much slower than real arrays

operators
operator =

―=―
Multiple assignment
Assignment order is from right to left

CODE SNIPPET
var foobar = 1;
var foo = 2;
var bar = foo = foobar = 3; // bar == 3, foo == 3, foobar == 3

Operators
operator +

String concatenation
CODE SNIPPET
var foobar = "This " + "is " + "a variable.";

Casting to number
CODE SNIPPET
var foobar = +true; // 1
var foobar = +false; // 0

Operators
operator +

Adding
CODE SNIPPET
var foobar = 5 + 1; // 6

String priority
var foobar = "1" + 0; // 10 ! var foobar = function() {};
typeof foobar; // "string" var foobar2string = "" + foobar;
var foobar = 0 + "1"; // 01 //"function() {}"
typeof foobar; // "string" typeof foobar2string; // "string"

Operators
operators += and ++

Addition Casting to string
var foobar = 1; var foobar = "1";
foobar += 1; // 2 foobar += 5; // "15"

Casting to number
CODE SNIPPET
var foobar = "5";
foobar++;

Operators
operators += and ++

Multiple assignments
CODE SNIPPET
var foo = 1;
var bar = 2;
foo += bar += 3; // foo == 6; bar == 5;

CODE SNIPPET
var foo = "1";
var bar = "2";
foo += bar += " is a string";
// foo == "12 is a string;
// bar == "2 is a string";

Operators
operators -= and --

Decrement
CODE SNIPPET
var foobar = 1;
foobar -= 1; // 0

-= does not behave like +=
var foobar = "5";
var foobar = "1"; foobar--;
foobar -= 5; // -4 (number) // 4

Operators
operators -= and --

Multiple assignments
CODE SNIPPET
var foo = 3;
var bar = 2;
foo -= bar -= 1; // foo == 2; bar == 1;

CODE SNIPPET
var foo = "1";
var bar = "2";
foo -= bar -= " is a string";
// foo == NaN
// bar == NaN

Operators
operator | |

Assignment
var foo = false; var foo = true;
var bar = function() {}; var bar = function() {};
var foobar = foo || bar; // foobar === bar var foobar = foo || bar; // foobar === true
foobar(); foobar(); // error

CODE SNIPPET
var foo = false;
var bar = false;
var barfoo = 5;
var foobar = foo || bar || barfoo;
// foobar === 5

Operators
operator &&

Assignment
var foo = true; var foo = false;
var bar = function() {}; var bar = function() {};
var foobar = foo && bar; // foobar === bar var foobar = foo && bar; // foobar === false
foobar(); foobar(); // error

Inline conditions
CODE SNIPPET
var foo = true;
var bar = function() { alert("hello world!"); };
foo && bar(); // hello word!

Operators
operators && and | |

Good order makes a difference
CODE SNIPPET
var foo = true;
var bar = false;
var barfoo = false;
var foobar = foo && bar || barfoo || 5; // foobar === 5

Operators
Operator !

Negation Double negation (converts
to Boolean)
var foo = 5; var foo = 5;
!foo; // false !!foo; // true
var foo = 0;
!foo; // true
var foo = "0";
!foo; // false
var foo = "1";
!foo; // false

Operators
operator ~

Bitwise operator
Numbers rounding
CODE SNIPPET
var foo = 5.743534;
~~foo; // 5
typeof ~~foo; // "number"

-(n + 1) when ―n‖ is an integer
CODE SNIPPET
var foo = -1;
~foo; // 0

Operators
comparison operators ( > , >= , <, <=, ==, ===, !=, !==)

Return value of Boolean type
Can be used as part of more complex expression
CODE SNIPPET
var a = 0,
b = 5,
c = a || b > a

alert(c); // "true"

Operators
String comparison

Strings are compared using alphabetical order
―Alphabetical order‖ is defined by the numerical order of the
16-bit Unicode values that make up the strings
alert("b" > "a"); // "true" alert("cat" > "cats"); // "false"

Operators
Comparison of Different types

Values are converted to numbers except for the case
when both values are strings

CODE SNIPPET
alert("2" > 1); // "true"
alert("02" == 2); // "true"
alert(0 == false); // "true"

Operators
Strict Equality(===, !==)

Usual equality check can't distinguish the values that belong
to different types but have the same number representation
Strict equality operator is used to check equality without
type conversion
CODE SNIPPET
alert("02" === 2); // "false"
alert(0 === false); // "false"

Operators
Comparison with NULL and Undefined

null and undefined are not equal to 0 in comparisons
null and undefined are equal only to each other
When converted to a number
null is 0
undefined is NaN
alert(null > 0); // "false" alert(undefined > 0); // "false"
alert(null == 0); // "false" alert(undefined < 0); // "false"
alert(null >= 0); // "true" alert(undefined == 0); // "false"

Operators
Object Conversion

toString and valueOf are methods for string and number
conversion respectively
String and number conversion can be overridden
If the operation requires a primitive value the object is
converted to the primitive first and then operation is
performed
Number conversion is used to convert object to primitive
(exception is built-in Date object)

alert(user); // [object Object]

Operators
string Conversion of objects

toString is declared in Object.prototype
toString can be overridden in user-defined object
toString should return any primitive value, otherwise it will
cause an error
var user = { var user = {
firstName: "John" firstName: "John",
}; toString: function () {
return "user " + this.firstName
alert(user) // "[object Object]" }
};

alert(user) // "user John"

Operators
String conversion of objects

Built-in objects have their own implementation of toString
CODE SNIPPET
alert([1, 2]); // toString for Arrays – list of elements "1, 2"
alert(new Date()); // toString for Date – string representation of date
alert(function () {}); // toString for Function – source code of function

Operators
Number conversion of objects

valueOf is declared in Object.prototype but it returns object
itself and therefore is ignored
valueOf can be overridden in user-defined object
valueOf should return any primitive value, otherwise it will
be ignored
In case valueOf is ignored or not declared toString method
is used instead

Operators
Number conversion of objects

Most built-in objects don't have valueOf implementation
and therefore string and number conversion gives the same
results (exception is Date object which supports both string
and number conversion)

CODE SNIPPET
alert(new Date()); // toString - string representation of date
alert(+new Date()); // valueOf – number of milliseconds from 01.01.1970

Operators
Comparisons with objects

If both operands are objects operators (==, !=) check if
operands are or aren't references to the same object
In all other cases number conversion is used to get primitive
type and then perform operation (this is also true for
arithmetic operators)
CODE SNIPPET
var a = {},
b = {},
c = a;

alert(a == b); // "false"
alert(a == c); // "true"

Operators
Comparisons with objects

var obj = { var a = {
valueOf: function () { valueOf: function () {
return 1; return 1;
} }
}; };

alert(obj == true); // "true" var b = {
alert(obj + "test"); // "1test" valueOf: function () {
return 2;
}
};

alert(b > a); // "true"

WHAT IS Javascript

unique execution nuances

ENGINE RUNTIME
Execution Context

Abstract concept for differentiation of
executable code
Every time when control is transferred to executable
code, control enters an execution context.
Defined in ECMA-262
Consistent concept, but multiple implementations

Execution context
Types of executable code

There are 3 types of JavaScript code
Global code
Function code
Eval code

Every code is evaluated in its context

Execution context
Program runtime

Program Runtime EC0 active EC
represented as stack of EC
EC1
Pushed every time on
EC2
entering a function
EC3

EC4 GLOBAL EC

Execution context
Function code

Executable code EC stack
(function foo(flag) { // first activation of foo
if (flag) { ECStack = [
return; <foo> functionContext
} globalContext
foo(true); ];
})(false);
// recursive activation of foo
ECStack = [
<foo> functionContext – recursively
<foo> functionContext
globalContext
];

Execution context
Evalcode

Very special type of code
Executes in its own context but affects
calling context
In Strict Mode evaled code evaluates in its own sandbox

Execution context
Evalcode

Executable code EC stack
ECStack = [
// influence global context globalContext
eval('var x = 10'); ];

// eval('var x = 10');
(function foo() { ECStack.push({
// and here, variable "y" is context: evalContext,
callingContext: globalContext
// created in the local context });
// of "foo" function
ECStack.pop(); // eval exited context
eval('var y = 20'); ECStack.push(<foo> functionContext); // foo function call
})();
// eval('var y = 20');
ECStack.push({
alert(x); // 10 context: evalContext,
callingContext: <foo> functionContext
alert(y); // "y" is not defined });

ECStack.pop(); // return from eval
ECStack.pop(); // return from foo

Execution context
LOGICAL layout
Execution
context
EC may be represented as
simple object
VARIABLE OBJECT

Scope chain

THIS VALUE

Execution context
Variable object

A Variable Object (VO) is tied to EC
Abstract store for
Variables (var, VariableDeclaration)
Function declarations (FunctionDeclaration, FD)
Function format parameters

Variable Object
Logical layout

Declaration Variable Object
var a = 10; // Variable object of the global context
VO(globalContext) = {
function test(x) { a: 10,
var b = 20; test: <reference to function>
}; };

test(30); // Variable object of the "test" function
context
VO(test functionContext) = {
x: 30,
b: 20
};

Variable Object
types

Function context VO
GLOBAL context VO
(VO === AO, <arguments> object and
(vo===this===global)
<formal parameters> are added)

Variable Object
Global context vo

Allows indirect referencing through
window object
Lifetime tied to application
lifetime CODE SNIPPET
global = {
Singleton Math: <...>,
String: <...>
...
...
window: global
};

Variable Object
function context vo

Doesn`t allow indirect referencing
VO`s role plays Activation Object
An activation object is created on entering the context
of a function and initialized by property arguments
which value is the Arguments object

CODE SNIPPET
VO(functionContext) === AO;

Variable Object
Activation object

Arguments contains CODE SNIPPET
AO = {
callee - the reference to the current function arguments: <ArgO>
};
length - quantity of real passed arguments
properties-indexes

Variable Object
Activation object
CODE SNIPPET
function foo(x, y, z) {
alert(foo.length); // 3
Variable number of parameters alert(arguments.length); // 2

// reference of a function to itself

Runtime function inspection alert(arguments.callee === foo); // true

// parameters sharing
alert(x === arguments[0]); // true
alert(x); // 10

arguments[0] = 20;
alert(x); // 20

x = 30;
alert(arguments[0]); // 30

z = 40;
alert(arguments[2]); // undefined

arguments[2] = 50;
alert(z); // 40
}

foo(10, 20);

Execution context
Execution stages

Two stages of code handling
Entering the context where all the data are created
Formal parameter initialization
Function declaration
Variable declaration

The code execution stage

Execution context
Entering Execution context

For each formal parameter
Property of the VO with a name and value of
formal parameter is created
For not passed parameters — property of VO
with a name of formal parameter and value
undefined is created

Execution context

For each function declaration
A property of the variable object with a name and value
of a function-object is created
If the variable object already contains a property with
the same name, replace its value and attributes

Execution context

For each variable declaration
a property of the variable object with a variable name
and value undefined is created
if the variable name is already declared, declaration
does not disturb the existing property.

Execution context

Executable code Activation Object
function test(a, b) { AO(test) = {
var c = 10; a: 10,
function d() { } b: undefined,
var e = function _e() { }; c: undefined,
(function x() { }); d: <reference to FunctionDeclaration "d">
} e: undefined,
arguments: <Args>
test(10); // call };

Execution context
Execution phase

Variables and function declarations are
hoisted, but not assignments
Original source Internal representation

foo(); var bar;

function foo() { function foo() {
console.log(bar); alert(bar);
} }

var bar = 10; foo();

bar = 10;

Execution context
Function -level scoping

ES3 has no block-level scoping defined
Variable declared in a block visible everywhere in a
function

CODE SNIPPET
(function () {
{
var a = 10;
}

console.log(a); // 10
})();

Execution context
Function -level scoping

ES6 Harmony allows block-level scoping
with let keyword

CODE SNIPPET
(function () {
{
let a = 10;
}

console.log(a); // Reference error
})();

Execution context
LOGICAL layout
Execution
context
EC may be represented as
simple object
VARIABLE OBJECT

Scope CHAIN

THIS VALUE

Execution context
Scope chain

List of all (parent) variable objects for the
inner contexts
Created at function call
Consists of
Variable Object of currently executing code unit
Internal [[Scope]] field

Scope chain
Logical layout

CODE SNIPPET
Used for identifier lookup activeExecutionContext = {
VO: {...}, // or AO
Traversing scope chain this: thisValue,
Scope: [ // Scope chain
2D lookup with prototypes // list of all variable objects
// for identifiers lookup
]
}

CODE SNIPPET
Scope = AO + [[Scope]]

Scope chain
[[scope]] property

[[Scope]] is a chain of all parent VO, which are above
the current function context
[[Scope]] is saved to the function at its creation
Implements Lexical (Static) Scoping

Scope chain
scoping

Executable code Scope chain
var x = 10; barContext.Scope = barContext.AO +
bar.[[Scope]] // i.e.:
function foo() {
var y = 20; barContext.Scope = [
barContext.AO,
function bar() { fooContext.AO,
var z = 30; globalContext.VO
alert(x + y + z); ];
}

bar();
}

foo(); // 60

Scope chain
closure

Closure is a functional concept
Consist of 2 parts
Function or function pointer
Referencing environment – a table of references to variables form
outer scope

Closure
example

CODE SNIPPET
Inner is a function var f = function outer() {
var a = 10;
Scope of outer function forms return function inner() {
referencing environment }
return a;

};

f1 = f();
console.log(f1()); // 10

Closure
nuances

Referencing environment consist of references to outer
variables
Closures on iterator variables work in
counterintuitive way

Closure
nuances

incorrect Correct

var array = [0, 1, 2]; var array = [0, 1, 2];

for (var i = 0; i < array.length; i++) { for (var i = 0; i < array.length; i++) {
array[i] = function () { (function (i) {
console.log(i); array[i] = function () {
}; console.log(i);
} };
})(i);
array[0](); // 3 }

array[0](); // 0

Closure
nuances

Watch out for context switches
var person = { var person = {
firstName: 'Douglas', firstName: 'Douglas',
say: function () { say: function () {
function sayName() { var me = this;
console.log(this); // window or undefined
return this.firstName; function sayName() {
} return me.firstName;
}
return sayName(); return sayName();
} }
}; };

person.say(); person.say();

Execution context
This value

Special context object
Not tied to particular object
Can be set at runtime

Property of EC
Never participates in identifier lookup
Determined only once when entering EC
Immutable

This value
Global scope

Executable code
CODE SNIPPET
// explicit property definition of the global object
this.a = 10; // global.a = 10
alert(a); // 10

// implicit definition via assigning to unqualified identifier
b = 20;
alert(this.b); // 20

// also implicit via variable declaration because variable
object of the global context
// is the global object itself
var c = 30;
alert(this.c); // 30

This value
Call expression

CODE SNIPPET
Value of this is determined function foo() {
alert(this);
by the form of a call }

expression foo(); // global or undefined (strict mode)

alert(foo === foo.prototype.constructor); // true

// but with another form of the call expression
// of the same function, this value is different

foo.prototype.constructor(); // foo.prototype

This value
Call expression

Manual setting of ThisValue
Function.prototype.call
Function.prototype.apply
Function.prototype.bind

ThisValue as first parameter

This value
CALL

CODE SNIPPET
ThisValue as first parameter function a(c) {
alert(this.b);
Comma-separated list of }
alert(c);

parameters // this === {b: 20}, this.b == 20, c == 30
a.call({ b: 20 }, 30);

Executes a function

This value
apply

CODE SNIPPET
alert(this.b);
Array of parameters }
alert(c);

Executes a function // this === {b: 30}, this.b == 30, c == 40
a.apply({ b: 30 }, [40])

This value
bind

CODE SNIPPET
alert(this.b);
Comma-separated list of }
alert(c);

parameters // this === {b: 30}, this.b == 30, c == 40
(a.bind({ b: 30 }, 40))();
Returns a function

WHAT IS Javascript

unique implementation of OOP

patterns & practices
modularity

Modules are building blocks of the app
Key properties
Loose coupling
High cohesion

Facilitate clean and flexible architecture

modularity

Language has no built-in concept of modules
Modules are simulated using
Functions
Local variables
Closures

Dozen of design patterns available

modularity
Module pattern

Provides encapsulation for
Privacy
State
Structure

Physical shielding of private and public
members

modularity
Module pattern

CODE SNIPPET
Language features used var MY_APP_ONE = (function () {
// Private variables

Self-calling functions var secret1 = 'Hello';
var secret2 = 'World';

Closures // Private functions
var privateFoo = function() {
};

// Publicly exposed
return {
foo: function() {
// Do stuff
},
bar: function() {
// Do stuff
}
};
})();

modularity
Module pattern

pros cons

Clean syntax Hard to refactor
Private members Hard to extend
Hard to override
No way of dependency
management

modularity
REVEALING Module pattern

Very similar to Module Pattern
All members declared as private
Public members then ―revealed‖ by return
statement

modularity
Revealing Module pattern

CODE SNIPPET
Language features used var MY_APP_ONE = (function () {
// Private variables
var secret1 = 'Hello';
Self-calling functions var secret2 = 'World';

Closures // Private functions
var privateFoo = function () {};

var publicFoo = function () {};
var publicBar = function() {};

// Publicly exposed
return {
foo: publicFoo,
bar: publicBar
};
})();

modularity
Module revealing pattern

pros cons

Clean syntax Hard to extend
Private members Even harder to
Common syntax for accessing override
private and public members No way of dependency
management

modularity
AMD

Developed as standard for async module
loading
On demand async module loading
Built-in dependency management
Has corresponding specification

modularity
AMD

Concise API
define
require

Namespace-free architecture
Modules referred to by name or path

modularity
AMD

CODE SNIPPET
Language features used // shirt.js
define({
color: "black",
Self-calling functions size: "large"
});

Closures // logger.js
define(["shirt"], function (shirt) {
return {
logTheShirt: function () {
console.log(
"color: " + shirt.color +
", size: " + shirt.size
);
}
};
});

modularity
AMD

pros cons

Clean syntax Async nature may lead
Async loading to spaghetti code
Dependency management Requires build tool to
be used in minified file

modularity
Commonjsmodules 1.1

Developed as part of CommonJS project
On demand synchronous module loading
Built-in dependency management
Has corresponding specification

modularity
Commonjsmodules 1.1

Concise API
require
module.exports

Modules referred to by name or path
One module one script file mapping
Can`t be used in minification scenarios

modularity
Commonjsmodules 1.1

CODE SNIPPET
Language features used // hello.js
exports.hello = function () {
return 'Hello World';
Closures };

//app.js
var example = require('./example.js');
example.hello();

modularity
Commonjsmodules 1.1

pros cons

Clean syntax Sync loading is inappropriate in
Dependency management Web browser
Doesn`t support minification
scenarios

inheritance

No classical inheritance
Lots of ways to achieve inheritance
Pseudo-classical
Prototypal
Functional

Don’t try to pretend you`re programming on some
other language

inheritance
Pseudo-classical

Invented to make classical style inheritance
possible
Native JavaScript objects follow this
pattern

Pseudo-classical pattern
Key ideas

Key ideas
The object is created by a constructor function
Properties are put into constructor function
Methods and default properties are put into prototype

Base class

CODE SNIPPET
Example
function Animal(name) {
canWalk property will be this.name = name
overridden in concrete instance }

Animal.prototype = {
Constructor assignment makes constructor: Animal,
instanceof operator work canWalk: true,
sit: function() {
this.canWalk = false
alert(this.name + ' sits down.')
}
}

var animal = new Animal('Pet') // (1)

Base class

Initially After sit
Animal.prototype Animal.prototype
{ {
canWalk: ‘true’, canWalk: ‘true’,
sit: function sit: function
} }

[[prototype]] [[prototype]]
instance instance
{
{
name: ‘Pet’,
name: ‘Pet’
canWalk: ‘false’
}
}

Inheritance function

Inherit base class prototype
and allow extensibility

CODE SNIPPET
function extend(Child, Parent) {
var F = function () { };
F.prototype = Parent.prototype;

Child.prototype = new F();
Child.prototype.constructor = Child;
Child.superclass = Parent.prototype;
}

Derived class

CODE SNIPPET
Example function Rabbit(name) {
Superclass constructor called to Rabbit.superclass.constructor.apply(this,
arguments);
initialize properties defined in }
base class extend(Rabbit, Animal);

Rabbit.prototype.jump = function () {
this.canWalk = true;
alert(this.name + ' is jumping.');
};

Method overriding

Superclass call

CODE SNIPPET
Rabbit.prototype.sit = function () {
alert(this.name + ' is about to sit!');
Rabbit.superclass.sit.apply(this, arguments);
};

encapsulation

CODE SNIPPET
Convention based encapsulation
Animal.prototype.walk = function () {
Common practice is to prefix alert('walking');
};
protected members with _
Animal.prototype._run = function () {
alert('running');
}

statics

CODE SNIPPET
Static properties and functions function Animal() {
Assigned directly to the constructor Animal.count++
}

Animal.count = 0

new Animal()
new Animal()

alert(Animal.count); // 2

inheritance
prototypal

Prototypal inheritance is native to
JavaScript
May or may not use concept of class

Prototypal
Key ideas

Key ideas
The object is created by special function
This function links object with prototype
Freedom of choice where to put properties and
methods

Prototypal
Object creation

Links empty object with ES5 has dedicated function
specified prototype

function object(o) {
function F() { } Object.create(prototype, propertyDescriptors)
F.prototype = o;
return new F();
}

Prototypal
example

CODE SNIPPET
Derived object inherits var base = {
from base via prototype };
a: 1

var derived = object(base);

derived.print = function() {
console.log(this.a);
};

derived.print();

inheritance
Parasitic

Object inherits base class properties by
extending it
May or may not use concept of class

parasitic
Key ideas

Key ideas
Derived object extends base object
Prototype is not used at all
Fast property resolution

WHAT IS Javascript

JavaScript is a script language distant
from actual hardware

Performance optimization
reasoning

Premature optimization is Evil
Performance optimizations needs to based on actual
profiling data

Pareto principle: 90/10
Consider algorithmic optimizations first

Function calls

Avoid intensive functions calling
CODE SNIPPET
while (i) {
fn(i);
var i = fn2();
fn3(i);
};

Local variables

Use local variables
CODE SNIPPET
var fn = function() {
var events = library.utils.events;
var proxy = library.services.proxy;
};

LICM

Loop invariant code motion
var arr = [1, 2, 3, 4]; var arr = [1, 2, 3, 4];
for (var i = 0; i < arr.length; i++) {}; for (var i = 0, j = arr.length; i < j; i++) {};

CODE SNIPPET
var arr = [1, 2, 3, 4];
var i = arr.length;
while(i--) {};

Memoization

Memoization
CODE SNIPPET
var arr = [1, 2, 3, 4, 4, 2, 3, 1, 2, 3, 4, 5, 6, 1];
var fn = function fn(i) {
fn.cache = fn.cache || {};

if (i in fn.cache) {
return fn.cache[i];
}
return (fn.cache[i] = Math.cos(i));
};

Code optimization

Avoid try {} catch() {}
Avoid bit operators
Yielding

Keep it simple

Simpler - faster
Slow
CODE SNIPPET
var min = Math.min(a, b);
arr.push(val);

Fast
CODE SNIPPET
var min = a < b ? a : b;
arr[arr.length] = val;

Special thanks
Reviewers & inspirations

Damian Wielgosik
His amazing depth knowledge of JS inspired my presentation.
Check out his Just Advanced JavaScript on SlideShare.

Pavel Hizhuk
His amazing understanding of type casting and comparisons
reflected directly in this presentation.

Special thanks
Reviewers & inspirations

My Girlfriend
For constant support and patience in listening my crazy saying
about how badly something implemented, for sleepless nights
and funny jokes :)

JavaScript as Development Platform

More Related Content

What's hot

Viewers also liked

Similar to JavaScript as Development Platform

More from Alexei Skachykhin

Recently uploaded

JavaScript as Development Platform