javascript as development platform
DESCRIPTION
JavaScript as Development platform gives overview of JavaScript as Runtime and Programming Language. From this presentation you can find out more about advanced language features and usage patterns.TRANSCRIPT
![Page 1: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/1.jpg)
javascriptas development platform
![Page 2: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/2.jpg)
CONVENTIONSSOURCE CODE
var global = 10; function foo() { global++;}
BAD PRACTICE
(function () { var local = 10; function foo() { local++; }})();
GOOD PRACTICE
function factorial(x) { if (x <= 1) { return 1; } return x * arguments.callee(x - 1);}
LEGACY CODE
function foo() { console.log(‘foo’);}
CODE SNIPPET
![Page 3: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/3.jpg)
WHAT IS javascript
The world`s most misunderstood programming language
![Page 4: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/4.jpg)
SOURCES OF CONFUSIONJAVA PREFIX
Completely independent from Java
Has syntax similarities
![Page 5: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/5.jpg)
SOURCES OF CONFUSIONSCRIPT POSTFIX
Doesn’t mean that JS isn`t real programming language Full-fledged Object Oriented language
![Page 6: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/6.jpg)
SOURCES OF CONFUSIONWEAK LEARNING SOURCES
Standard has complicated structure makes it hard to read and understand
Internet full of bad advices and practices
Almost all books are universally bad
![Page 7: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/7.jpg)
LEARNING SOURCESBOOKS
Javascript: the definitive guide Javascript: the GOOD parts
![Page 8: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/8.jpg)
WHAT IS Javascript
A scripting language designed as lightweight alternative to Java for Web
![Page 9: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/9.jpg)
history1992
James Gosling at Sun Microsystems has been working on superior language to C++ called Oak
![Page 10: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/10.jpg)
history1992
Microsoft released Windows 3.1 and preview of Microsoft Windows NT for developers
![Page 11: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/11.jpg)
history1995
Oak has failed as a language for interactive television and has been repurposed for Web. At this time language has been renamed to Java.
![Page 12: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/12.jpg)
history1995
Sun Microsystems officially announced HotJava browser with support of Java-applets.
![Page 13: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/13.jpg)
history1995
Web becomes hot and Microsoft ships Internet Explorer 1.0 and Internet Explorer 2.0 few month later
![Page 14: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/14.jpg)
history1995
Brendan Eich at Netscape Communication Corporation begun working on lightweight and simple alternative to Java for Web browser
![Page 15: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/15.jpg)
history1995
Later on Netscape released Netscape Navigator 2.0 with support of LiveScript and Java-applets
![Page 16: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/16.jpg)
history1995
Anticipated by opportunity to free Web from Microsoft, Sun and Netscape formed the alliance
As the result LiveScript has been renamed to JavaScript
![Page 17: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/17.jpg)
history1996
Microsoft reverse-engineered JavaScript and named it JScript to avoid trademark issues with Sun
![Page 18: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/18.jpg)
history1996
Microsoft released Internet Explorer 3with support of JScript
![Page 19: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/19.jpg)
history1996
To prevent Microsoft from mutating the language, Sun and Netscape made their way to ECMA to standardize the language
![Page 20: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/20.jpg)
history1996
Sun and Netscape have failed and Microsoft gathered full control on standardization process. Microsoft insisted on preserving some design errors in the language
![Page 21: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/21.jpg)
history1998
ECMA International introduces ECMA-262 1st + 2nd edition of JavaScript language
![Page 22: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/22.jpg)
STANDARDECMA 262
VIEW STANDARD
ECMA-262 is active standard that defines JavaScript
Uses term ECMAScriptStructured in a way that makes it hard to read
![Page 23: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/23.jpg)
STANDARDTIMELINE
VIEW STANDARD
1st edition
June
1997 1998
2nd edition
June
1999
3rd edition
December
2000-2009
4th edition
2009
5th edition
December
Future
Harmony edition
![Page 24: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/24.jpg)
WHAT IS javascript
One of the most popular programming languages
![Page 25: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/25.jpg)
Javascript POPULARITY
One of the most popular programming languages
AS OF BEGINNING OF 2013
![Page 26: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/26.jpg)
KEY personsBrendan eich
Inventor of JavaScript language at Netscape
![Page 27: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/27.jpg)
KEY personsDOUGLAS CROCKFORD
Active member of JavaScript community
Author of JSLint and JSMin
Inventor of JSON data format
![Page 28: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/28.jpg)
WHAT IS Javascript
A programming language designed to be simple and flexible
![Page 29: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/29.jpg)
DESIGN PRINCIPLESPROGRAMMING
Lightweight & SimpleScriptingDynamic
Multi-paradigm
![Page 30: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/30.jpg)
DESIGN PRINCIPLESTARGET AUDIENCE
WEB AUTHORS Professional programmers
![Page 31: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/31.jpg)
DESIGN PRINCIPLESSCALABILITY
Limited scalabilityLack of modularityLinkage through global spaceDynamicity over static typing
![Page 32: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/32.jpg)
DESIGN PRINCIPLESMULTI-PARADIGM language
OBJECT ORIENTED FUNCTIONAL Imperative
![Page 33: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/33.jpg)
DESIGN PRINCIPLESOBJECT ORIENTED LANGUAGE
OBJECT ORIENTEDfunction Plane(mass) { this.mass = mass;};
var lightPlane = new Plane(10), heavyPlane = new Plane(1000);
CODE SNIPPET
![Page 34: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/34.jpg)
DESIGN PRINCIPLESFunctional language
var combine = function (a, b) { return function () { a(); b(); }; },
combined = combine( function () { console.log('Logging'); }, function () { alert('Alerting'); } );
combined();
CODE SNIPPETFUNCTIONAL
![Page 35: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/35.jpg)
DESIGN PRINCIPLESOBJECT ORIENTED LANGUAGE
function bound(x, min, max) { var value = x;
value = Math.min(value, max); value = Math.max(value, min);
return value;}
CODE SNIPPETImperative
![Page 36: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/36.jpg)
WHAT IS Javascript
A programming language that is more than just a Web toy
![Page 37: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/37.jpg)
RuntimeHost environments
JAVASCRIPT ENGINE
HOST SPECIFIC API
JavaScript executes in a context of Engine
Host environment powers JavaScript Engine
![Page 38: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/38.jpg)
HOST ENVIRONMENTSTYPES
WEB BROWSER OUT OF BROWSER
![Page 39: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/39.jpg)
HOST ENVIRONMENTS RESPOSIBILITIES
REPOSNSIBLE FOR NOT RESPONSIBLE FOR
Input/OutputGraphics Storage Networking Host specific API
Memory management
Code execution
![Page 40: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/40.jpg)
WHAT IS Javascript
JavaScript is a primary language of Web browser
![Page 41: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/41.jpg)
HOST ENVIRONMENTSWEB BROWSER
JAVASCRIPT ENGINE
WEB BROWSER HOST
DOCUMENT OBJECT MODEL BROWSER Object MODEL
HOST SPECIFIC API
![Page 42: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/42.jpg)
WEB BROWSERDOCUMENT OBJECT MODEL
Representation of document as objects hierarchy
Language & browser independentStandardized by W3C
Revisions are called DOM levels
![Page 43: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/43.jpg)
WEB BROWSERBROWSER Object MODEL
API for interfacing native browser functionality
Deals with windows and frames
All functions and object starting at window
No corresponding standard
![Page 44: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/44.jpg)
WEB BROWSERBROWSER Object MODEL
Window object
Navigatorobject
Frames[]array
Documentobject
Forms[]array
links[]array
images[]array
screenobject
![Page 45: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/45.jpg)
ENGINE RUNTIMEESSENTIALS
Interpreted (no compilation step)Dynamically typed
Garbage collected
Class-freeRuntime extensibilityDuck typing
![Page 46: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/46.jpg)
ENGINE RUNTIMEEXECUTION
Single threaded
Asynchrony via message loop
Linkage through global variables
![Page 47: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/47.jpg)
ENGINE RUNTIMEScript distribution
Script are consumed as plain textInterpreted 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
![Page 48: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/48.jpg)
ENGINE RUNTIMEScript compression
Less traffic consumption
WHY?
Faster load time
techniques
GZipMinificationObfuscation
![Page 49: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/49.jpg)
Runtime engineScript inclusion
Statically<script> tag
Runtime evaluation
Dynamically DOM API
![Page 50: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/50.jpg)
Static inclusionScript tag
Script can be put anywhereon a page with <script> tag
<script src="path/to/script.js" type="text/javascript"></script>
CODE SNIPPET
![Page 51: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/51.jpg)
Static inclusionType attribute
<script> tag should have matching </script> tag, except when document has application/xhtml+xml MIME type
<script src="path/to/script.js" type="text/javascript"/>
BAD PRACTICE
<script src="path/to/script.js" type="text/javascript"></script>
GOOD PRACTICE
![Page 52: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/52.jpg)
Static inclusionXhtml validation
Type attribute is optional, but required for XHTML validation
<script src="path/to/script.js"></script>
CODE SNIPPET
![Page 53: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/53.jpg)
static inclusionInline scripts
<script> tag supports inlining, but generally it is considered as bad practice
<script>console.log('Inline script');
</script>
CODE SNIPPET
![Page 54: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/54.jpg)
static inclusionExecution ordering
Scripts attached in that way execute in order, even if script2 got loaded sooner
<script src="path/to/script1.js" type="text/javascript"></script><script src="path/to/script2.js" type="text/javascript"></script>
CODE SNIPPET
![Page 55: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/55.jpg)
static inclusionExecution ordering
Same holds for inline scripts
<script src="path/to/script1.js" type="text/javascript"></script>
<script>console.log('Inline script');
</script>
CODE SNIPPET
![Page 56: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/56.jpg)
static inclusionrendering
Script loading and execution blocks page rendering
<script src="link/to/script.js"></script>
<a id="link" href="url/to/somewhere.html">Link</a>
CODE SNIPPET var link = document.getElementById('link');
console.log(link != null); // false
Script.js
![Page 57: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/57.jpg)
static inclusionrendering
Consider moving script to the bottom of the document
<body> <div class="page-content">Ipsum lerrra conde ir salle.</div>
<script src="js/script1.js"></script> <script src="js/script2.js"></script></body>
GOOD PRACTICE
Not every script can be moved
![Page 58: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/58.jpg)
static inclusionAsync loading
Scripts can be loaded asynchronously using async attribute
<script src="link/to/script.js" async></script>
CODE SNIPPET
Script loading does not block rendering
![Page 59: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/59.jpg)
Static inclusionASYNC loading
Ordering will not be preserved
<script src="link/to/script1.js" async></script><script src="link/to/script2.js" async></script>
CODE SNIPPET
No execution time guarantee
All async scripts are guaranteed to execute sometime before window load event
![Page 60: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/60.jpg)
Static inclusiondefer loading
Scripts can be loaded in defer manner using defer attribute
<script src="link/to/script.js" defer></script>
CODE SNIPPET
Script loading does not block rendering
![Page 61: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/61.jpg)
STATIC INCLUSIONdefer loading
Ordering will be preserved
<script src="link/to/script1.js" defer></script><script src="link/to/script2.js" defer></script>
CODE SNIPPET
Scripts are guaranteed to start execution right before DOMContentLoaded event
![Page 62: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/62.jpg)
static INCLUSIONAsync+defer loading
Causes legacy browsers to fallback to defer if async is not supported
<script src="link/to/script1.js" async defer></script>
CODE SNIPPET
Modern browsers treat defer + async as async
![Page 63: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/63.jpg)
static INCLUSIONLOADING TIMELINE
<script>
<script async>
<script defer>
Scripting
HTML Parser
Scripting
HTML Parser
Scripting
HTML Parser
Networking Execution Parsing
![Page 64: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/64.jpg)
dynamic inclusionDOM API
Script can be attached programmatically using DOM API
![Page 65: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/65.jpg)
DYNAMIC INCLUSIONasynchronous
var head = document.getElementsByTagName('head')[0], script = document.createElement('script');
script.src = 'script.js';head.appendChild(script);
CODE SNIPPET
AsynchronousScript ordering will not be preserved
![Page 66: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/66.jpg)
Dynamic inclusionasynchronous
var head = document.getElementsByTagName('head')[0], script = document.createElement('script');
script.async = false;script.src = 'script.js';head.appendChild(script);
CODE SNIPPET
AsynchronousScript ordering will be preserved
Older browsers require tricky solutions
![Page 67: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/67.jpg)
DYNAMIC INCLUSIONDEFERRED
var head = document.getElementsByTagName('head')[0], script = document.createElement('script');
script.src = 'script.js';script.defer = 'defer';head.appendChild(script);
CODE SNIPPET
DeferredHas no effect when loaded via DOM API
![Page 68: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/68.jpg)
DYNAMIC INCLUSIONRuntime evaluation
Scripts can be evaluated at Runtime with Eval
Eval is “EVIL”
Compromises security
Hurts performance
Makes code hard to debug
![Page 69: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/69.jpg)
script INCLUSIONParallel loading
Number of parallel HTTP connections per hostname is limited
Typically varies from 2 ~ 6
Consider CDN and subdomain usage
VIEW More
![Page 70: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/70.jpg)
WHAT IS Javascript
JavaScript is a language that has many design errors
![Page 71: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/71.jpg)
ENGINE RUNTIMEStrict 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
![Page 72: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/72.jpg)
STRICT Modeactivation
Activated with a Use Strict Directive in a Directive Prologue
'use strict';
var f = function () { console.log('Execution under strict mode');};
f();
CODE SNIPPET
![Page 73: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/73.jpg)
STRICT Modescoping
Applied to a code unit 'use strict';
eval = 10; // SyntaxError
var f = function () { eval = 20; // SyntaxError};
CODE SNIPPET
To a Function
To a code file
Affects all inner contexts
Defined lexically (statically)eval = 10; // 10var f = function () { 'use strict'; eval = 20; // SyntaxError};
CODE SNIPPET
![Page 74: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/74.jpg)
STRICT Modeinheritance
Directly Evaled code inherits Strict Mode
Functions created via new Function () dont inherit Strict Mode
Indirectly Evaled code doesn`t inherit Strict Mode
![Page 75: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/75.jpg)
STRICT ModeError checking
'use strict';
eval = 10; // SyntaxError
var f = function () { eval = 20; // SyntaxError};
CODE SNIPPET
Compile time runtime
(function () { 'use strict'; global_variable = 10; // Reference Error})();
CODE SNIPPET
![Page 76: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/76.jpg)
STRICT Moderestrictions
Reserved words
Implements
Interface
Let
Package
Private
Protected
Public
Static
Yield
"use strict"; var let = 10; // SyntaxError
CODE SNIPPET
![Page 77: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/77.jpg)
STRICT Moderestrictions
Octal literals are not allowed
"use strict"; var x = 010; // SyntaxError
CODE SNIPPET
Assignment to an undeclared identifier
"use strict";a = 10; // ReferenceError
CODE SNIPPET
![Page 78: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/78.jpg)
STRICT Moderestrictions
Assignment to read-only property
"use strict";
var foo = Object.defineProperties({}, { bar: { value: 10, writable: false // by default }, baz: { get: function () { return "baz is read-only"; } }});
foo.bar = 20; // TypeErrorfoo.baz = 30; // TypeError
CODE SNIPPET
![Page 79: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/79.jpg)
STRICT Moderestrictions
Shadowing of inherited read-only properties
"use strict";
var foo = Object.defineProperty({}, "x", { value: 10, writable: false});
var bar = Object.create(foo);bar.x = 20; // TypeError
CODE SNIPPET
![Page 80: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/80.jpg)
STRICT Moderestrictions
Eval and arguments
"use strict"; // SyntaxError in both casesvar arguments;var eval; // also SyntaxErrorfunction eval() {}var foo = function arguments() {};
CODE SNIPPET
Cannot appear as variable declaration of function name
![Page 81: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/81.jpg)
STRICT Moderestrictions
Eval and arguments
"use strict"; // SyntaxErrorfunction foo(eval, arguments) {}
CODE SNIPPET
Not allowed as argument names
Not assignable
(function (x) { alert(arguments[0]); // 30 arguments = 40; // TypeError})(30);
CODE SNIPPET
![Page 82: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/82.jpg)
STRICT Moderestrictions
Argument and callee properties
"use strict";
function foo() { alert(foo.arguments); // SyntaxError alert(foo.caller); // SyntaxError}
CODE SNIPPET
![Page 83: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/83.jpg)
STRICT Moderestrictions
delete operator restrictions
"use strict"; var foo = {}; function bar(x) { delete x; // SyntaxError} bar(10); // SyntaxError delete foo; // SyntaxErrordelete bar; // SyntaxError
CODE SNIPPET
![Page 84: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/84.jpg)
STRICT Moderestrictions
With statement
"use strict"; // SyntaxErrorwith ({a: 10}) { alert(a);}
CODE SNIPPET
this value
"use strict";
function foo() { console.log(this); // undefined}
foo();
CODE SNIPPET
Null no longer coerced to window
![Page 85: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/85.jpg)
STRICT Moderestrictions
this value
"use strict";
function foo() { console.log(this); // undefined}
foo();
CODE SNIPPET
Null and undefined are no longer coerced to window
"use strict";
Number.prototype.test = function () { console.log(typeof this); // number};
(1).test(); // number
CODE SNIPPET
Primitives are not converted to wrapper objects
![Page 86: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/86.jpg)
STRICT Moderestrictions
this valueHelps to avoid missing new
keyword issues
"use strict";
function A(x) { this.x = x;}
// forget "new" keyword,// error, because undefined.x = 10var a = A(10);
var b = new A(10); // OK
CODE SNIPPET
![Page 87: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/87.jpg)
STRICT ModeUsage guidelines
Do not apply strict mode to whole script file blindly
Will not work when concatenated with some other scriptCan break other scripts if after concatenation put firstEvaled code will inherit Strict Mode
Consider wrapping your scripts with self-calling function
![Page 88: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/88.jpg)
WHAT IS Javascript
JavaScript is a language that has simple but flexible type system
![Page 89: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/89.jpg)
Type systemessentials
Class-free type system
Loose typingEverything is an object
Technically JavaScript has primitive types but they can be programmed as real objects
![Page 90: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/90.jpg)
Type systemessentials
Two groups of typesPrimitive typesObject types
Primitives are not real objectsSome primitives has object wrapper
![Page 91: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/91.jpg)
Type systemTypes
Primitive types Object types
NumberString
Booleannull
undefined
Object
Array
FunctionRegExp
Date
![Page 92: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/92.jpg)
numbersessentials
Single type represents integer and floating point numbers
IEEE 754 64 bit numbers
Be aware of floating point errors0.1 + 0.2 !== 0.3Can be avoided by scaling
![Page 93: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/93.jpg)
numbersruntime
Number object wrapper
var foobar = 0.5;typeof foobar; // "number"var foobar = 1;typeof foobar; // "number"
CODE SNIPPET
Runtime type
var a = 10;var b = new Number(a);
console.log(typeof b); // object
CODE SNIPPET
![Page 94: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/94.jpg)
numbersSpecial values
Special valuesNaN
-Infinity
Infinity
![Page 95: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/95.jpg)
numbersnan
var foobar = NaN;typeof foobar; // "number"
CODE SNIPPET
Paradoxical type
Watch out, easy to overwrite!
var NaN = "string";typeof NaN; // "string"
CODE SNIPPET
![Page 96: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/96.jpg)
numbersnan
var foobar = "string" * 2, bar = "string" / 2;var foo = +"string", barfoo = +[1, 2, 3], foobar2 = undefined – 2;
CODE SNIPPET
Getting NaN
![Page 97: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/97.jpg)
stringsessentials
Unicode UTF-16
ImmutableZero-based indexing
Built-in string manipulation routines don't take surrogate pairs into account
No dedicated Char type
![Page 98: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/98.jpg)
stringsdeclaration
Literal declaration
var a = "string";var b = 'string';
CODE SNIPPET
![Page 99: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/99.jpg)
stringsruntime
String object wrapper
Runtime type
var a = 'foo';var b = new String(a);
console.log(typeof b); // object
CODE SNIPPETvar foobar = "variable types";typeof foobar; // "string"
CODE SNIPPET
![Page 100: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/100.jpg)
booleanessentials
Two possible predefined values
Generally Boolean produced by comparisons
truefalse
a === 1
Any value can be converted to Boolean
![Page 101: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/101.jpg)
BooleanFalsy values
undefinednull0-0NaNEmpty string
var falsyValue = 0;if (!falsyValue) { alert("falsy value!");}
var falsyValue = "";if (!falsyValue) { alert("falsy value!");}
var falsyValue = NaN;if (!falsyValue) { alert("falsy value!");}
CODE SNIPPET
![Page 102: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/102.jpg)
Booleanruntime
Boolean object wrapper
Runtime type
var a = true;var b = new Boolean(a);
console.log(typeof b); // object
CODE SNIPPETvar foobar = true;typeof foobar; // "boolean"
CODE SNIPPET
![Page 103: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/103.jpg)
Nullessentials
Language keywordIndicates absence of value JavaScript never sets uninitialized variables to null
![Page 104: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/104.jpg)
Nullruntime
Has no object wrapper
Runtime type
var foobar = null;typeof foobar; // "object"
CODE SNIPPET
![Page 105: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/105.jpg)
undefinedessentials
IndicatesVariable is not defined Variable is defined, but has no value assigned
![Page 106: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/106.jpg)
undefinedruntime
Has no object wrapper
Runtime type
var foobar;typeof foobar; // "undefined"
CODE SNIPPET
![Page 107: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/107.jpg)
Undefinedruntime
Producing undefined value
(function (undefined) { console.log(typeof undefined);})();
CODE SNIPPET
Can be overridden
(function () { var undefined = 10; console.log(typeof undefined);})();
CODE SNIPPET
![Page 108: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/108.jpg)
objectessentials
Unordered collection of key-value pairs
Fundamental data type
Have no fixed schemaRuntime extendable
Linked with another object via prototype
![Page 109: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/109.jpg)
ENGINE RUNTIMEObject originators
Host objects NATIVE OBJECTS User-defined
![Page 110: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/110.jpg)
Object originatorsHost 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
![Page 111: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/111.jpg)
Object originatorsNative 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
NATIVE OBJECTS
![Page 112: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/112.jpg)
Object originatorsUser-defined objects
User-defined object are defined by programmer
Full control
User-defined
OK to extend these
![Page 113: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/113.jpg)
objectInternal layout
[[prototype]] referenceClass discriminator
Extensible flag
Can`t be set for user-defined objects
Defined in ES5
![Page 114: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/114.jpg)
objectdeclaration
Object literal syntax
var person = { firstName: 'Douglas', lastName: 'Crockford', age: 45};
CODE SNIPPET
var person = {};person.firstName = 'Douglas';person.lastName = 'Crockford';person.age = 45;
CODE SNIPPET
![Page 115: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/115.jpg)
objectdeclaration
Constructor function
var person = new Object();person.firstName = 'Douglas';person.lastName = 'Crockford';person.age = 45;
BAD PRACTICEvar person = Object.create(Object.prototype, { firstName: { writable: true, configurable: true, value: 'Douglas' }, lastName: { writable: true, configurable: true, value: 'Crockford' }, age: { writable: true, configurable: true, value: 45 }});
CODE SNIPPET
Object.create
![Page 116: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/116.jpg)
objectProperty assessors
obj['property'];obj.property;
CODE SNIPPET
Two ways to access the object’s property
![Page 117: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/117.jpg)
objectConstructor property
Constructor property points to constructor function
Can be messed up at runtime
var object = {};console.log(object.constructor === Object);
CODE SNIPPET
![Page 118: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/118.jpg)
objectprototype
Prototype links object with another object
Simple form of inheritance
Internal [[prototype]] field
Set at creation based on Function.prototype value
No schema (classes) involved
Object inherits directly from another object
![Page 119: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/119.jpg)
prototypechaining
{}
[[prototype]]
Object.prototype
[[prototype]]
NULL
![Page 120: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/120.jpg)
prototypeProperty resolution
Search for property in current object
If not found search in a prototype
Move along prototype chain until null is reached
![Page 121: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/121.jpg)
prototypeProperty resolution
Example
var object = {};console.log(object.toString());
CODE SNIPPET
toString is not declared in object but rather in Object.prototype
![Page 122: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/122.jpg)
prototypeinspection
Undocumented field
Constructor`s prototype
var object = {};console.log(object.constructor.prototype);
CODE SNIPPET
getPrototypeOf
var object = {};console.log(object.__proto__);
BAD PRACTICE
var object = {};console.log(Object.getPrototypeOf(object));
CODE SNIPPET
![Page 123: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/123.jpg)
objectreflection
for in
var obj = { property: "foobar", method: function() {}};for (var i in obj) { alert("The value of key " + i +" is " + obj[i]);}
CODE SNIPPET
hasOwnProperty
for (var i in obj) { if (obj.hasOwnProperty(i)) { alert("The value of key " + i +
" is " + obj[i]); }}
CODE SNIPPET
![Page 124: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/124.jpg)
objectreflection
__count__
var obj = { property: "foobar", method: function() {}};obj.__count__; // 2
BAD PRACTICE
in
var obj = { a: 10};
var hasProperty = ('a' in obj);
CODE SNIPPET
![Page 125: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/125.jpg)
arrayessentials
Zero-based 32bit indexing
Ordered collection of values
DynamicNo need for memory reallocation
Specialized form of objects with length property
![Page 126: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/126.jpg)
Arrayruntime
Runtime type
var array = [1, 2, 3];typeof array; // object
CODE SNIPPET
![Page 127: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/127.jpg)
Arrayruntime
The most reliable way of array detection
Object.prototype.toString.call(array) === "[object Array]"
CODE SNIPPET
Array detection (fails in multi-frame scenario)
array instanceof Array
CODE SNIPPET
![Page 128: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/128.jpg)
arraydeclaration
Array literal
var array = [];
CODE SNIPPETvar array = new Array();
BAD PRACTICE
Array constructor
![Page 129: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/129.jpg)
arraybehavior
Dynamic grow & shrink
var array = [1, 2, 3];array.push(4);array.pop(); // 4
CODE SNIPPET
Length property
var array = [1, 2, 3];console.log(array.length); // 3
CODE SNIPPET
![Page 130: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/130.jpg)
arrayperformance
JavaScript arrays are special type of objectMuch slower than real arrays
![Page 131: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/131.jpg)
operatorsoperator =
var foobar = 1;var foo = 2;var bar = foo = foobar = 3; // bar == 3, foo == 3, foobar == 3
CODE SNIPPET
“=“Multiple assignment
Assignment order is from right to left
![Page 132: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/132.jpg)
Operators operator +
var foobar = "This " + "is " + "a variable.";CODE SNIPPET
String concatenation
Casting to number
var foobar = +true; // 1var foobar = +false; // 0
CODE SNIPPET
![Page 133: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/133.jpg)
Operators operator +
var foobar = 5 + 1; // 6CODE SNIPPET
Adding
String priority
var foobar = "1" + 0; // 10 !typeof foobar; // "string"var foobar = 0 + "1"; // 01typeof foobar; // "string"
CODE SNIPPETvar foobar = function() {};var foobar2string = "" + foobar; //"function() {}"typeof foobar2string; // "string"
CODE SNIPPET
![Page 134: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/134.jpg)
Operators operators += and ++
var foobar = 1;foobar += 1; // 2
CODE SNIPPET
Addition Casting to string
var foobar = "1";foobar += 5; // "15"
CODE SNIPPET
var foobar = "5";foobar++;typeof foobar; // "number"
CODE SNIPPET
Casting to number
![Page 135: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/135.jpg)
Operators operators += and ++
var foo = 1;var bar = 2;foo += bar += 3; // foo == 6; bar == 5;
CODE SNIPPET
Multiple assignments
var foo = "1";var bar = "2";foo += bar += " is a string";// foo == "12 is a string; // bar == "2 is a string";
CODE SNIPPET
![Page 136: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/136.jpg)
Operators operators -= and --
var foobar = 1;foobar -= 1; // 0
CODE SNIPPET
Decrement
-= does not behave like +=
var foobar = "1";foobar -= 5; // -4 (number)
CODE SNIPPETvar foobar = "5";foobar--;// 4typeof foobar; // "number"
CODE SNIPPET
![Page 137: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/137.jpg)
Operators operators -= and --
var foo = 3;var bar = 2;foo -= bar -= 1; // foo == 2; bar == 1;
CODE SNIPPET
Multiple assignments
var foo = "1";var bar = "2";foo -= bar -= " is a string";// foo == NaN// bar == NaN
CODE SNIPPET
![Page 138: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/138.jpg)
Operators operator | |
var foo = false;var bar = function() {};var foobar = foo || bar; // foobar === barfoobar();
CODE SNIPPET
Assignment
var foo = false;var bar = false;var barfoo = 5;var foobar = foo || bar || barfoo; // foobar === 5
CODE SNIPPET
var foo = true;var bar = function() {};var foobar = foo || bar; // foobar === truefoobar(); // error
CODE SNIPPET
![Page 139: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/139.jpg)
Operators operator &&
var foo = true;var bar = function() {};var foobar = foo && bar; // foobar === barfoobar();
CODE SNIPPET
Assignment
var foo = true;var bar = function() { alert("hello world!"); };foo && bar(); // hello word!
CODE SNIPPET
var foo = false;var bar = function() {};var foobar = foo && bar; // foobar === falsefoobar(); // error
CODE SNIPPET
Inline conditions
![Page 140: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/140.jpg)
Operators operators && and | |
var foo = true;var bar = false;var barfoo = false;var foobar = foo && bar || barfoo || 5; // foobar === 5
CODE SNIPPET
Good order makes a difference
![Page 141: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/141.jpg)
OperatorsOperator !
Negation
var foo = 5;!foo; // falsevar foo = 0;!foo; // truevar foo = "0";!foo; // falsevar foo = "1";!foo; // false
CODE SNIPPET
Double negation (converts to Boolean)
var foo = 5;!!foo; // true
CODE SNIPPET
![Page 142: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/142.jpg)
Operatorsoperator ~
var foo = 5.743534;~~foo; // 5typeof ~~foo; // "number"
CODE SNIPPET
Bitwise operator
var foo = -1;~foo; // 0
CODE SNIPPET
-(n + 1) when “n” is an integer
Numbers rounding
![Page 143: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/143.jpg)
Operatorscomparison operators ( > , >= , <, <=, ==, ===, !=, !==)
var a = 0, b = 5, c = a || b > a
alert(c); // "true"
CODE SNIPPET
Return value of Boolean type
Can be used as part of more complex expression
![Page 144: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/144.jpg)
OperatorsString 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"
CODE SNIPPET
alert("cat" > "cats"); // "false"
CODE SNIPPET
![Page 145: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/145.jpg)
OperatorsComparison of Different types
Values are converted to numbers except for the case when both values are strings
alert("2" > 1); // "true"alert("02" == 2); // "true"alert(0 == false); // "true"
CODE SNIPPET
![Page 146: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/146.jpg)
OperatorsStrict Equality(===, !==)
Usual equality check can't distinguish the values that belong to different types but have the same number representationStrict equality operator is used to check equality without type conversion
alert("02" === 2); // "false"alert(0 === false); // "false"
CODE SNIPPET
![Page 147: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/147.jpg)
OperatorsComparison with NULL and Undefined
null and undefined are not equal to 0 in comparisonsnull and undefined are equal only to each other
alert(null > 0); // "false"alert(null == 0); // "false"alert(null >= 0); // "true"
CODE SNIPPET
When converted to a numbernull is 0 undefined is NaN
alert(undefined > 0); // "false"alert(undefined < 0); // "false"alert(undefined == 0); // "false"
CODE SNIPPET
![Page 148: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/148.jpg)
OperatorsObject 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)
![Page 149: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/149.jpg)
Operatorsstring Conversion of objects
toString is declared in Object.prototypetoString can be overridden in user-defined objecttoString should return any primitive value, otherwise it will cause an error
var user = { firstName: "John"};
alert(user) // "[object Object]"
CODE SNIPPET
alert(user); // [object Object]
var user = { firstName: "John", toString: function () { return "user " + this.firstName }};
alert(user) // "user John"
CODE SNIPPET
![Page 150: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/150.jpg)
OperatorsString conversion of objects
Built-in objects have their own implementation of toString
alert([1, 2]); // toString for Arrays – list of elements "1, 2"alert(new Date()); // toString for Date – string representation of datealert(function () {}); // toString for Function – source code of function
CODE SNIPPET
![Page 151: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/151.jpg)
OperatorsNumber 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 objectvalueOf should return any primitive value, otherwise it will be ignored
In case valueOf is ignored or not declared toString method is used instead
![Page 152: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/152.jpg)
OperatorsNumber 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)
alert(new Date()); // toString - string representation of datealert(+new Date()); // valueOf – number of milliseconds from 01.01.1970
CODE SNIPPET
![Page 153: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/153.jpg)
OperatorsComparisons 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)
var a = {}, b = {}, c = a; alert(a == b); // "false"alert(a == c); // "true"
CODE SNIPPET
![Page 154: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/154.jpg)
OperatorsComparisons with objects
var obj = { valueOf: function () { return 1; }}; alert(obj == true); // "true"alert(obj + "test"); // "1test"
CODE SNIPPETvar a = { valueOf: function () { return 1; }};
var b = { valueOf: function () { return 2; }}; alert(b > a); // "true"
CODE SNIPPET
![Page 155: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/155.jpg)
WHAT IS Javascript
JavaScript is a language that has unique execution nuances
![Page 156: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/156.jpg)
ENGINE RUNTIMEExecution Context
Abstract concept for differentiation of executable code
Defined in ECMA-262
Every time when control is transferred to executable code, control enters an execution context.
Consistent concept, but multiple implementations
![Page 157: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/157.jpg)
Execution contextTypes of executable code
There are 3 types of JavaScript codeGlobal code
Function code
Eval code
Every code is evaluated in its context
![Page 158: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/158.jpg)
Execution contextProgram runtime
Program Runtime represented as stack of EC
EC0
EC1
EC2
EC3
EC4
active EC
GLOBAL EC
Pushed every time on entering a function
![Page 159: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/159.jpg)
Execution contextFunction code
(function foo(flag) { if (flag) { return; } foo(true);})(false);
CODE SNIPPET// first activation of fooECStack = [ <foo> functionContext globalContext]; // recursive activation of fooECStack = [ <foo> functionContext – recursively <foo> functionContextglobalContext];
CODE SNIPPET
Executable code EC stack
![Page 160: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/160.jpg)
Execution contextEval code
Very special type of codeExecutes in its own context but affects calling context
In Strict Mode evaled code evaluates in its own sandbox
![Page 161: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/161.jpg)
Execution contextEval code
// influence global contexteval('var x = 10');
(function foo() { // and here, variable "y" is // created in the local context // of "foo" function eval('var y = 20');})();
alert(x); // 10alert(y); // "y" is not defined
CODE SNIPPETECStack = [ globalContext]; // eval('var x = 10');ECStack.push({ context: evalContext, callingContext: globalContext}); ECStack.pop(); // eval exited contextECStack.push(<foo> functionContext); // foo function call
// eval('var y = 20');ECStack.push({ context: evalContext, callingContext: <foo> functionContext}); ECStack.pop(); // return from eval ECStack.pop(); // return from foo
CODE SNIPPET
Executable code EC stack
![Page 162: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/162.jpg)
Execution contextLOGICAL layout
EC may be represented as simple object
Execution context
VARIABLE OBJECT
Scope chain
THIS VALUE
![Page 163: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/163.jpg)
Execution contextVariable object
A Variable Object (VO) is tied to ECAbstract store for
Variables (var, VariableDeclaration)
Function declarations (FunctionDeclaration, FD)Function format parameters
![Page 164: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/164.jpg)
Variable ObjectLogical layout
Declaration
var a = 10;
function test(x) { var b = 20;};
test(30);
CODE SNIPPET// Variable object of the global contextVO(globalContext) = { a: 10, test: <reference to function>}; // Variable object of the "test" function contextVO(test functionContext) = { x: 30, b: 20};
CODE SNIPPET
Variable Object
![Page 165: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/165.jpg)
Variable Objecttypes
GLOBAL context VO
(vo ===this===global)
Function context VO
(VO === AO, <arguments> object and <formal parameters>
are added)
![Page 166: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/166.jpg)
Variable ObjectGlobal context vo
Allows indirect referencing through window object
Singleton
Lifetime tied to application lifetime
global = { Math: <...>, String: <...> ... ... window: global};
CODE SNIPPET
![Page 167: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/167.jpg)
Variable Objectfunction context vo
Doesn`t allow indirect referencing
VO(functionContext) === AO;
CODE SNIPPET
VO`s role plays Activation ObjectAn activation object is created on entering the
context of a function and initialized by property arguments which value is the Arguments object
![Page 168: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/168.jpg)
Variable ObjectActivation object
AO = { arguments: <ArgO>};
CODE SNIPPETArguments containscallee - the reference to the current functionlength - quantity of real passed argumentsproperties-indexes
![Page 169: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/169.jpg)
Variable ObjectActivation object
function foo(x, y, z) { alert(foo.length); // 3 alert(arguments.length); // 2
// reference of a function to itself 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);
CODE SNIPPET
Variable number of parameters
Runtime function inspection
![Page 170: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/170.jpg)
Execution contextExecution stages
Two stages of code handlingEntering the context where all the data are created
The code execution stage
Formal parameter initialization
Function declaration
Variable declaration
![Page 171: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/171.jpg)
Execution contextEntering Execution context
For each formal parameterProperty 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
![Page 172: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/172.jpg)
Execution contextEntering 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
![Page 173: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/173.jpg)
Execution contextEntering 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.
![Page 174: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/174.jpg)
Execution contextEntering Execution context
Executable code
function test(a, b) { var c = 10; function d() { } var e = function _e() { }; (function x() { });}
test(10); // call
CODE SNIPPETAO(test) = { a: 10, b: undefined, c: undefined, d: <reference to FunctionDeclaration "d"> e: undefined, arguments: <Args>};
CODE SNIPPET
Activation Object
![Page 175: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/175.jpg)
Execution contextExecution phase
Variables and function declarations are hoisted, but not assignments
foo();
function foo() { console.log(bar);}
var bar = 10;
CODE SNIPPETvar bar;
function foo() { alert(bar);}
foo();
bar = 10;
CODE SNIPPET
Original source Internal representation
![Page 176: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/176.jpg)
Execution contextFunction -level scoping
ES3 has no block-level scoping definedVariable declared in a block visible everywhere in
a function
(function () { { var a = 10; }
console.log(a); // 10})();
CODE SNIPPET
![Page 177: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/177.jpg)
Execution contextFunction -level scoping
ES6 Harmony allows block-level scoping with let keyword
(function () { { let a = 10; }
console.log(a); // Reference error})();
CODE SNIPPET
![Page 178: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/178.jpg)
Execution contextLOGICAL layout
EC may be represented as simple object
Execution context
VARIABLE OBJECT
Scope CHAIN
THIS VALUE
![Page 179: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/179.jpg)
Execution contextScope chain
List of all (parent) variable objects for the inner contexts
Created at function call
Consists ofVariable Object of currently executing code unit
Internal [[Scope]] field
![Page 180: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/180.jpg)
Scope chainLogical layout
Used for identifier lookup
activeExecutionContext = { VO: {...}, // or AO this: thisValue, Scope: [ // Scope chain // list of all variable objects // for identifiers lookup ] }
CODE SNIPPET
Scope = AO + [[Scope]]
CODE SNIPPET
Traversing scope chain2D lookup with prototypes
![Page 181: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/181.jpg)
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 creationImplements Lexical (Static) Scoping
![Page 182: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/182.jpg)
Scope chainscoping
var x = 10;
function foo() { var y = 20;
function bar() { var z = 30; alert(x + y + z); }
bar();}
foo(); // 60
CODE SNIPPETbarContext.Scope = barContext.AO + bar.[[Scope]] // i.e.: barContext.Scope = [ barContext.AO, fooContext.AO, globalContext.VO];
CODE SNIPPET
Executable code Scope chain
![Page 183: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/183.jpg)
Scope chainclosure
Closure is a functional concept
Consist of 2 partsFunction or function pointer
Referencing environment – a table of references to variables form outer scope
![Page 184: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/184.jpg)
Closureexample
var f = function outer() { var a = 10;
return function inner() { return a; }};
f1 = f();console.log(f1()); // 10
CODE SNIPPET
Inner is a function
Scope of outer function forms referencing environment
![Page 185: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/185.jpg)
Closurenuances
Referencing environment consist of references to outer variables
Closures on iterator variables work in counterintuitive way
![Page 186: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/186.jpg)
Closurenuances
var array = [0, 1, 2];
for (var i = 0; i < array.length; i++) { array[i] = function () { console.log(i); };}
array[0](); // 3
CODE SNIPPET
incorrect Correct
var array = [0, 1, 2];
for (var i = 0; i < array.length; i++) { (function (i) { array[i] = function () { console.log(i); }; })(i);}
array[0](); // 0
CODE SNIPPET
![Page 187: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/187.jpg)
Closurenuances
Watch out for context switches
var person = { firstName: 'Douglas', say: function () { function sayName() { console.log(this); // window or undefined return this.firstName; }
return sayName(); }};
person.say();
CODE SNIPPETvar person = { firstName: 'Douglas', say: function () { var me = this;
function sayName() { return me.firstName; } return sayName(); }};
person.say();
CODE SNIPPET
![Page 188: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/188.jpg)
Execution contextLOGICAL layout
EC may be represented as simple object
Execution context
VARIABLE OBJECT
Scope chain
THIS VALUE
![Page 189: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/189.jpg)
Execution contextThis value
Special context objectNot tied to particular object
Can be set at runtime
Property of ECNever participates in identifier lookup
Determined only once when entering EC
Immutable
![Page 190: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/190.jpg)
This valueGlobal scope
Executable code
// explicit property definition of the global objectthis.a = 10; // global.a = 10alert(a); // 10
// implicit definition via assigning to unqualified identifierb = 20;alert(this.b); // 20
// also implicit via variable declaration because variable object of the global context// is the global object itselfvar c = 30;alert(this.c); // 30
CODE SNIPPET
![Page 191: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/191.jpg)
This valueCall expression
Value of this is determined by the form of a call expression
function foo() { alert(this);}
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
CODE SNIPPET
![Page 192: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/192.jpg)
This valueCall expression
Manual setting of ThisValueFunction.prototype.call
Function.prototype.apply
Function.prototype.bind
ThisValue as first parameter
![Page 193: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/193.jpg)
This valueCALL
ThisValue as first parameterComma-separated list of parameters
function a(c) { alert(this.b); alert(c);}
// this === {b: 20}, this.b == 20, c == 30a.call({ b: 20 }, 30);
CODE SNIPPET
Executes a function
![Page 194: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/194.jpg)
This valueapply
ThisValue as first parameter
function a(c) { alert(this.b); alert(c);}
// this === {b: 30}, this.b == 30, c == 40a.apply({ b: 30 }, [40])
CODE SNIPPET
Executes a function
Array of parameters
![Page 195: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/195.jpg)
This valuebind
ThisValue as first parameter
function a(c) { alert(this.b); alert(c);}
// this === {b: 30}, this.b == 30, c == 40(a.bind({ b: 30 }, 40))();
CODE SNIPPET
Returns a function
Comma-separated list of parameters
![Page 196: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/196.jpg)
WHAT IS Javascript
JavaScript is a language that has unique implementation of OOP
![Page 197: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/197.jpg)
patterns & practicesmodularity
Modules are building blocks of the app
Key propertiesLoose coupling
High cohesion
Facilitate clean and flexible architecture
![Page 198: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/198.jpg)
patterns & practicesmodularity
Language has no built-in concept of modulesModules are simulated using
Functions
Local variables
Closures
Dozen of design patterns available
![Page 199: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/199.jpg)
modularityModule pattern
Provides encapsulation forPrivacy
State
Structure
Physical shielding of private and public members
![Page 200: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/200.jpg)
modularityModule pattern
Language features usedSelf-calling functions
Closures
var MY_APP_ONE = (function () { // Private variables var secret1 = 'Hello'; var secret2 = 'World'; // Private functions var privateFoo = function() { };
// Publicly exposed return { foo: function() { // Do stuff }, bar: function() { // Do stuff } };})();
CODE SNIPPET
![Page 201: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/201.jpg)
modularityModule pattern
pros cons
Clean syntaxPrivate members
Hard to refactorHard to extend
Hard to overrideNo way of dependency management
![Page 202: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/202.jpg)
modularityREVEALING Module pattern
Very similar to Module Pattern
All members declared as privatePublic members then “revealed” by return statement
![Page 203: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/203.jpg)
modularityRevealing Module pattern
Language features usedSelf-calling functions
Closures
var MY_APP_ONE = (function () { // Private variables var secret1 = 'Hello'; var secret2 = 'World';
// Private functions var privateFoo = function () {};
var publicFoo = function () {}; var publicBar = function() {};
// Publicly exposed return { foo: publicFoo, bar: publicBar };})();
CODE SNIPPET
![Page 204: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/204.jpg)
modularityModule revealing pattern
pros cons
Clean syntaxPrivate members
Hard to extend
Even harder to overrideCommon syntax for
accessing private and public members
No way of dependency management
![Page 205: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/205.jpg)
modularityAMD
Developed as standard for async module loading
On demand async module loading
Built-in dependency management
Has corresponding specification
![Page 206: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/206.jpg)
modularityAMD
Concise APIdefine
require
Namespace-free architecture
Modules referred to by name or path
![Page 207: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/207.jpg)
modularityAMD
Language features usedSelf-calling
functionsClosures
// shirt.jsdefine({ color: "black", size: "large"});
// logger.jsdefine(["shirt"], function (shirt) { return { logTheShirt: function () { console.log( "color: " + shirt.color + ", size: " + shirt.size ); } };});
CODE SNIPPET
![Page 208: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/208.jpg)
modularityAMD
pros cons
Clean syntaxAsync loading
Async nature may lead to spaghetti codeDependency management Requires build tool to be used in minified file
![Page 209: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/209.jpg)
modularityCommonjs modules 1.1
Developed as part of CommonJS project
On demand synchronous module loading
Built-in dependency managementHas corresponding specification
![Page 210: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/210.jpg)
modularityCommonjs modules 1.1
Concise APIrequire
module.exports
Modules referred to by name or path
One module one script file mappingCan`t be used in minification scenarios
![Page 211: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/211.jpg)
modularityCommonjs modules 1.1
Language features usedClosure
s
// hello.jsexports.hello = function () { return 'Hello World';};
//app.jsvar example = require('./example.js');example.hello();
CODE SNIPPET
![Page 212: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/212.jpg)
modularityCommonjs modules 1.1
pros cons
Clean syntax
Sync loading is inappropriate in Web browser
Dependency management
Doesn`t support minification scenarios
![Page 213: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/213.jpg)
patterns & practicesinheritance
No classical inheritanceLots of ways to achieve inheritance
Pseudo-classical
Prototypal
Functional
Don’t try to pretend you`re programming on some other language
![Page 214: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/214.jpg)
inheritancePseudo-classical
Invented to make classical style inheritance possible
Native JavaScript objects follow this pattern
![Page 215: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/215.jpg)
Pseudo-classical patternKey ideas
Key ideasThe object is created by a constructor function
Methods and default properties are put into prototype
Properties are put into constructor function
![Page 216: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/216.jpg)
Pseudo-classical patternBase class
Examplefunction Animal(name) { this.name = name} Animal.prototype = { constructor: Animal, canWalk: true, sit: function() { this.canWalk = false alert(this.name + ' sits down.') }} var animal = new Animal('Pet') // (1)
CODE SNIPPET
canWalk property will be overridden in concrete instanceConstructor assignment makes instanceof operator work
![Page 217: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/217.jpg)
Pseudo-classical patternBase class
Initially
{ canWalk: ‘true’, sit: function}
Animal.prototype
{ name: ‘Pet’}
instance
[[prototype]]
{ canWalk: ‘true’, sit: function}
Animal.prototype
{ name: ‘Pet’, canWalk: ‘false’}
instance
[[prototype]]
After sit
![Page 218: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/218.jpg)
Pseudo-classical patternInheritance function
Inherit base class prototypeand allow extensibility
function extend(Child, Parent) { var F = function () { }; F.prototype = Parent.prototype;
Child.prototype = new F(); Child.prototype.constructor = Child; Child.superclass = Parent.prototype;}
CODE SNIPPET
![Page 219: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/219.jpg)
Pseudo-classical patternDerived class
Example function Rabbit(name) { Rabbit.superclass.constructor.apply(this, arguments);}
extend(Rabbit, Animal);
Rabbit.prototype.jump = function () { this.canWalk = true; alert(this.name + ' is jumping.');};
CODE SNIPPET
Superclass constructor called to initialize properties defined in base class
![Page 220: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/220.jpg)
Pseudo-classical patternMethod overriding
Superclass call
Rabbit.prototype.sit = function () { alert(this.name + ' is about to sit!'); Rabbit.superclass.sit.apply(this, arguments);};
CODE SNIPPET
![Page 221: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/221.jpg)
Pseudo-classical patternencapsulation
Convention based encapsulation
Animal.prototype.walk = function () { alert('walking');};
Animal.prototype._run = function () { alert('running');}
CODE SNIPPET
Common practice is to prefix protected members with _
![Page 222: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/222.jpg)
Pseudo-classical patternstatics
Static properties and functions
function Animal() { Animal.count++}
Animal.count = 0
new Animal()new Animal()
alert(Animal.count); // 2
CODE SNIPPET
Assigned directly to the constructor
![Page 223: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/223.jpg)
inheritanceprototypal
Prototypal inheritance is native to JavaScript
May or may not use concept of class
![Page 224: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/224.jpg)
PrototypalKey ideas
Key ideasThe object is created by special function
Freedom of choice where to put properties and methods
This function links object with prototype
![Page 225: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/225.jpg)
PrototypalObject creation
Links empty object with specified prototype
function object(o) { function F() { } F.prototype = o; return new F();}
CODE SNIPPET
ES5 has dedicated function
Object.create(prototype, propertyDescriptors)
CODE SNIPPET
![Page 226: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/226.jpg)
Prototypalexample
Derived object inherits from base via prototype
var base = { a: 1};
var derived = object(base);
derived.print = function() { console.log(this.a);};
derived.print();
CODE SNIPPET
![Page 227: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/227.jpg)
inheritanceParasitic
Object inherits base class properties by extending it
May or may not use concept of class
![Page 228: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/228.jpg)
parasiticKey ideas
Key ideasDerived object extends base object
Fast property resolution
Prototype is not used at all
![Page 229: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/229.jpg)
WHAT IS Javascript
JavaScript is a script language distant from actual hardware
![Page 230: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/230.jpg)
Performance optimizationreasoning
Premature optimization is EvilPerformance optimizations needs to based on actual profiling data
Pareto principle: 90/10Consider algorithmic optimizations first
![Page 231: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/231.jpg)
Performance optimizationFunction calls
Avoid intensive functions calling
while (i) { fn(i); var i = fn2(); fn3(i);};
CODE SNIPPET
![Page 232: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/232.jpg)
Performance optimizationLocal variables
Use local variables
var fn = function() { var events = library.utils.events; var proxy = library.services.proxy;};
CODE SNIPPET
![Page 233: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/233.jpg)
Performance optimizationLICM
Loop invariant code motion
var arr = [1, 2, 3, 4];for (var i = 0; i < arr.length; i++) {};
CODE SNIPPET var arr = [1, 2, 3, 4];for (var i = 0, j = arr.length; i < j; i++) {};
CODE SNIPPET
var arr = [1, 2, 3, 4];var i = arr.length;while(i--) {};
CODE SNIPPET
![Page 234: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/234.jpg)
Performance optimizationMemoization
Memoization
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 SNIPPET
![Page 235: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/235.jpg)
Performance optimizationCode optimization
Yielding
Avoid try {} catch() {}
Avoid bit operators
![Page 236: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/236.jpg)
Performance optimizationKeep it simple
Simpler - faster
var min = Math.min(a, b);arr.push(val);
CODE SNIPPET
Slow
Fast
var min = a < b ? a : b;arr[arr.length] = val;
CODE SNIPPET
![Page 237: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/237.jpg)
Special thanksReviewers & inspirations
Damian WielgosikHis amazing depth knowledge of JS inspired my presentation. Check out his Just Advanced JavaScript on SlideShare.
Pavel HizhukHis amazing understanding of type casting and comparisons reflected directly in this presentation.
![Page 238: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/238.jpg)
Special thanksReviewers & inspirations
My GirlfriendFor constant support and patience in listening my crazy saying about how badly something implemented, for sleepless nights and funny jokes :)
![Page 239: JavaScript as Development Platform](https://reader038.vdocuments.mx/reader038/viewer/2022103016/554fb07fb4c905ad218b51ff/html5/thumbnails/239.jpg)
The end