JavaScriptrecap

What constitutes “bad”?Syntax – but may be personal preference?Rules that are complex or hard to rememberInconsistenciesIf a feature can be used in a dangerous

manner – is that bad?If the language is harder to learn because it’s

different from the dominant languages - is that bad?

If a feature is error prone (i.e., easy to do incorrectly) – is that bad?

Think for yourselfhttp://www.youtube.com/watch?v=MFtijdklZ

Do

SyntaxMath.floor(2.99945) vs 2.99945.floor

InconsistenciesArrays can have negative index, BUT causes

problems with some built-in methods+/- with mixed operators

‘6’ + 3 = ‘63’‘6’ – 3 = 3

with statementbehavior depends on whether property is

definedshorthand syntax, but doesn’t match longer

syntax in all cases

DangerousEval()

Not safe (possible injection), slowSometimes misused: eval("person."+ property) vs. person[property]

Useful – but no example cited

== vs ===Common to do some type conversions (e.g., 1.0 == 1 in

Java)0 == ‘’ // true0 == ‘0’ // trueFalse == ‘0’ // truefalse == ‘false’ // falsenull == undefined // truenull == false // false‘\t\r\n ‘ == 0 // true

0 is “falsy” and so is an empty string ‘\t\r\n’

Error prone/confusingBlockless statements (like C++, if only one

statement, don’t need braces… concise, but can result in undesired behavior)

Automatic semicolon insertionScoping issues. JS moves variable

declarations to beginning of function. No block scope. No private scope.

Six different ways to set “this”Use of “new” keyword to instantiate

prototype

Programming in the largeBrowser incompatibilities make difficultGlobal variables (but see strict mode). All top-

level variables are combined into one global object.

No native support for namespace, but can be simulated using namespace object

OtherSearch engine spiders can’t read JavaScript,

may limit search engine results

What constitutes “good”?Error handlingEfficientEasy to learnWritabilityPowerful features

Error handling/SecurityFail silently

not so good in general-purpose language; useful for web, so small errors don’t keep pages from loading

Can’t access local files/directoriesCross Site Scripting (XSS). Possible because

of dynamic nature of JavaScript. Must take care when accepting input from users.

JavaScript now supports exception handlingwindow.onerror. Handy for stack trace (need

Blink rendering engine)

Efficiencyrun on browser, offload work from serverobjects as maps

Writability ternary operators (concise)anonymous functions

Function expressions (no name) vs function statements

Function arguments (arguments object, don’t need to list them all)

default values

Powerful featuresSparse array – items can be undefinedFunctions as first-class objectsModule patternGenerators (allows infinite lists)Closures

Ex: set body font, use ems everywhere else, easy to resize entire page when body font changes

BUT: take up memory (may even cause memory leak, if circular), affect processing speed

Can be used to simulate private variables

Closure examplevar addScore = (function(points)

var score = 0;return function (points)

return score+=points;)()

Idea: if points stored in global var, anything could change. This way, score is protected in a closure.

Relatedvar scoreChanger = (function(points) var score = 0; var operation =

add: function(points) return score += points;,sub: function(points) return score -= points;,mult: function(points) return score *= points;,div: function(points) return score /= points;return operation;)()

Invoke as: scoreChanger.add(1)

Prototypes - prosEasy to implement, due to JavaScript objects

as mapsCan dynamically add functions

Prototypes - consError prone – may modify code you don’t

understandNo real private variablesCan be slow to search entire prototype chainCan extend native prototypes, which can

cause confusionMultiple meanings to prototype. Prototype of

an object is not function.prototype.May be confusing to programmers used to

class-based inheritance (learnability issue)

References Young, Alex, “History of JavaScript: Part 1,” http://dailyjs.com/2010/05/24/history-of-javascript-1/ Accessed Oct. 2014 [2] Chapman, Stephen, “A Brief History of JavaScript,” http://javascript.about.com/od/reference/a/history.htm Accessed Oct. 2014 [3] Cooper, Sean, “Whatever Happened to Netscape?” http://www.engadget.com/2014/05/10/history-of-netscape/ Accessed Oct. 2014 [4] “ECMAScript,” http://en.wikipedia.org/wiki/ECMAScript Accessed Oct. 2014 [5] Gravell, Rob, "Don't Fear Sparse Arrays in JavaScript" http://www.htmlgoodies.com/beyond/javascript/dont-fear-sparse-arrays-in-javascript.html Accessed

Oct. 2014. [6] “JavaScript Features You Should Never Use & Alternatives,” http://www.dreamincode.net/forums/topic/109965-javascript-features-you-should-never-use-

alternatives/ Accessed Oct. 2014 [7] Stannard, Kevan, “10 Interesting JavaScript Features” http://blog.stannard.net.au/2011/01/07/10-interesting-javascript-features/ Accessed Oct. 2014 [8] “Strangest Language Feature” http://stackoverflow.com/questions/1995113/strangest-language-feature Accessed Oct. 2014 [9] “Inheritance and the Prototype Chain,” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/

Inheritance_and_the_prototype_chain Accessed Oct. 2014

References [10] “Best JavaScript Syntactic Sugar,” http://stackoverflow.com/questions/180841/best-javascript-syntactic-sugar

Accessed Oct. 2014 [11] Mickel, “Useful Features of JavaScript That You Have Never Seen Before,” https://pixeltango.com/articles/web-development-articles/useful-features-of-

javascript-that-you-have-never-seen-before/ Accessed Oct. 2014 [12] “Hidden Features of JavaScript?” http://stackoverflow.com/questions/61088/hidden-features-of-javascript Accessed

Oct. 2014 [13] L., Adam, “Boolean Conditionals vs Ternary,” http://jsperf.com/boolean-conditionals-vs-ternary Accessed Oct. 2014 [14] “W3C DOM Compatibility - HTML,” http://www.quirksmode.org/dom/html/

Accessed Oct. 2014 [15] “try...catch,” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/

try...catch Accessed Oct. 2014

ReferencesPluralsight: Javascript the Good Parts Video by

Douglas Crockford http://www.pluralsight.com/courses/javascript-

good-parts Function Expressions and Function Statements http://stackoverflow.com/questions/1013385/

what-is-the-difference-between-a-function-expression-vs-declaration-in-javascrip

Mastering the Module Pattern by Todd Motto http://toddmotto.com/mastering-the-module-

patter

References

http://www.oreillynet.com/pub/a/javascript/excerpts/javascript-good-parts/bad-parts.html

http://thoughtsonscripts.blogspot.com/2011/11/javascript-good-part-bad-part.html

http://darkhelmet.github.io/javascript-the-bad-parts/#/globals

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

Referenceshttp://www.kenneth-truyers.net/ http://toddmotto.com/ http://blogs.msdn.com/b/ericlippert/archive/

2003/09/17/53028.aspx https://developer.mozilla.org/en-US/docs/Web/JavaScript/ www.w3schools.com/jsref/jsref_prototype_math.asp http://stackoverflow.com/questions/4508313/advantages-of-

using-prototype-vs-defining-methods-straight-in-the-constructor http://stackoverflow.com/questions/3462464/the-benefits-of-

javascript-prototype http://stackoverflow.com/questions/6585478/the-disadvantages-

of-javascript-prototype-inheritance-what-are-they http://stackoverflow.com/questions/500431/what-is-the-scope-of-

variables-in-javascript

References “Bad Parts: Appendix B JavaScript: The Good Parts." Oreilly.net. http://www.oreillynet.com/pub/a/javascript/excerpts/javascriptgoodparts/ badparts. html [2] "Fast Slim Correct: The History and Evolution of JavaScript." Slideshare. http://www.slideshare.net/crashposition/fastslimcorrecttheevolutionofjavascript [3] "How Does JavaScript .prototype Work?" StackOverflow. http://stackoverflow.com/questions/572897/howdoesjavascriptprototypework [4] "JavaScript Closures." W3Schools. http://www.w3schools.com/js/js_function_closures.asp [5] "JavaScript: Its Evolution as a Language." InfoQ. http://www.infoq.com/news/2007/07/javascriptevolution [6] "JavaScript Prototype Property." W3Schools. http://www.w3schools.com/jsref/jsref_prototype_math.asp [7] "JavaScript: The Good Parts." IT EBooks. http://itebooks. info/book/274/ [8] "JS Stacktraces. The Good, the Bad, and the Ugly. Bugsnag." Bugsnag. https://bugsnag.com/blog/jsstacktraces/

References [9] "Learning Advanced JavaScript." eJohn.org http://ejohn.org/apps/learn/#67 [10] "Prototypal Inheritance in JavaScript." JavaScript.Crockford.com. http://javascript.crockford.com/prototypal.html [11] "The Prototype Object of JavaScript." JavaScriptKit. http://www.javascriptkit.com/javatutors/proto.shtml [12] "Understand JavaScript Closures With Ease." JavaScriptIsSexy. http://javascriptissexy.com/understandjavascriptclosureswithease/? WPACFallback=1 &WPACRandom=1413222480674 [13] "Understanding JavaScript Prototypes." JavaScript JavaScript. http://javascriptweblog.wordpress.com/2010/06/07/

understandingjavascriptprototypes/ [14] "What Is a Practical Use for a Closure in JavaScript?" Stack Overflow. http://stackoverflow.com/questions/2728278/whatisapracticaluseforaclosureinjava script

JavaScript examplestudent_examples.html