[
{"begin":-1,"ender":-1,"lexer":"markup","lines":0,"stack":"global","token":"<?xml?>","types":"xml"},
{"begin":0,"ender":-1,"lexer":"markup","lines":1,"stack":"xml","token":"version='1.0'","types":"attribute"},
{"begin":0,"ender":-1,"lexer":"markup","lines":1,"stack":"xml","token":"encoding='UTF-8'","types":"attribute"},
{"begin":-1,"ender":-1,"lexer":"markup","lines":1,"stack":"global","token":"<!DOCTYPE html PUBLIC '-//W3C//DTDXHTML1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>","types":"sgml"},
{"begin":-1,"ender":545,"lexer":"markup","lines":1,"stack":"global","token":"<html>","types":"start"},
{"begin":4,"ender":545,"lexer":"markup","lines":1,"stack":"html","token":"xml:lang=\"en\"","types":"attribute"},
{"begin":4,"ender":545,"lexer":"markup","lines":1,"stack":"html","token":"xmlns=\"http://www.w3.org/1999/xhtml\"","types":"attribute"},
{"begin":4,"ender":76,"lexer":"markup","lines":1,"stack":"html","token":"<head>","types":"start"},
{"begin":7,"ender":10,"lexer":"markup","lines":1,"stack":"head","token":"<title>","types":"start"},
{"begin":8,"ender":10,"lexer":"markup","lines":0,"stack":"title","token":"Pretty Diff - Guide, Using jsscope to understand scope, inheritance, and scope chains in JavaScript","types":"content"},
{"begin":8,"ender":10,"lexer":"markup","lines":0,"stack":"title","token":"</title>","types":"end"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<link/>","types":"singleton"},
{"begin":11,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"href=\"../diffview.css\"","types":"attribute"},
{"begin":11,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"media=\"all\"","types":"attribute"},
{"begin":11,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"rel=\"stylesheet\"","types":"attribute"},
{"begin":11,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"type=\"text/css\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<link/>","types":"singleton"},
{"begin":16,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"href=\"guide.css\"","types":"attribute"},
{"begin":16,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"media=\"all\"","types":"attribute"},
{"begin":16,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"rel=\"stylesheet\"","types":"attribute"},
{"begin":16,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"type=\"text/css\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<link/>","types":"singleton"},
{"begin":21,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"href=\"http://prettydiff.com/guide/closure_with_jsscope.xhtml\"","types":"attribute"},
{"begin":21,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"rel=\"canonical\"","types":"attribute"},
{"begin":21,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"type=\"application/xhtml+xml\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<link/>","types":"singleton"},
{"begin":25,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"href=\"http://prettydiff.com/images/favicon.ico\"","types":"attribute"},
{"begin":25,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"rel=\"icon\"","types":"attribute"},
{"begin":25,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"type=\"image/x-icon\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<link/>","types":"singleton"},
{"begin":29,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"href=\"http://prettydiff.com/labels.rdf\"","types":"attribute"},
{"begin":29,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"rel=\"meta\"","types":"attribute"},
{"begin":29,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"title=\"ICRA labels\"","types":"attribute"},
{"begin":29,"ender":76,"lexer":"markup","lines":1,"stack":"link","token":"type=\"application/rdf+xml\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<meta/>","types":"singleton"},
{"begin":34,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"content=\"width=device-width, initial-scale=1\"","types":"attribute"},
{"begin":34,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"name=\"viewport\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<meta/>","types":"singleton"},
{"begin":37,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"content=\"index, follow\"","types":"attribute"},
{"begin":37,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"name=\"robots\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<meta/>","types":"singleton"},
{"begin":40,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"content=\"Pretty Diff - Guide, Using jsscope to understand scope, inheritance, and scope chains in JavaScript\"","types":"attribute"},
{"begin":40,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"name=\"DC.title\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<meta/>","types":"singleton"},
{"begin":43,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"content=\"(pics-1.1 &#x22;http://www.icra.org/pics/vocabularyv03/&#x22; l gen true for &#x22;http://prettydiff.com&#x22; r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 1) gen true for &#x22;http://www.prettydiff.com&#x22; r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 1))\"","types":"attribute"},
{"begin":43,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"http-equiv=\"pics-Label\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<meta/>","types":"singleton"},
{"begin":46,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"content=\"Austin Cheney\"","types":"attribute"},
{"begin":46,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"name=\"author\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<meta/>","types":"singleton"},
{"begin":49,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"content=\"Pretty Diff tool can minify, beautify (pretty-print), or diff between minified and beautified code. This tool can even beautify and minify HTML.\"","types":"attribute"},
{"begin":49,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"name=\"description\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<meta/>","types":"singleton"},
{"begin":52,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"content=\"Global\"","types":"attribute"},
{"begin":52,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"name=\"distribution\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<meta/>","types":"singleton"},
{"begin":55,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"content=\"en\"","types":"attribute"},
{"begin":55,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"http-equiv=\"Content-Language\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<meta/>","types":"singleton"},
{"begin":58,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"content=\"application/xhtml+xml;charset=UTF-8\"","types":"attribute"},
{"begin":58,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"http-equiv=\"Content-Type\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<meta/>","types":"singleton"},
{"begin":61,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"content=\"blendTrans(Duration=0)\"","types":"attribute"},
{"begin":61,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"http-equiv=\"Page-Enter\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<meta/>","types":"singleton"},
{"begin":64,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"content=\"blendTrans(Duration=0)\"","types":"attribute"},
{"begin":64,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"http-equiv=\"Page-Exit\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<meta/>","types":"singleton"},
{"begin":67,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"content=\"text/css\"","types":"attribute"},
{"begin":67,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"http-equiv=\"content-style-type\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<meta/>","types":"singleton"},
{"begin":70,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"content=\"application/javascript\"","types":"attribute"},
{"begin":70,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"http-equiv=\"content-script-type\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"<meta/>","types":"singleton"},
{"begin":73,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"content=\"qL8AV9yjL2-ZFGV9ey6wU3t7pTZdpD4lIetUSiNen7E\"","types":"attribute"},
{"begin":73,"ender":76,"lexer":"markup","lines":1,"stack":"meta","token":"name=\"google-site-verification\"","types":"attribute"},
{"begin":7,"ender":76,"lexer":"markup","lines":1,"stack":"head","token":"</head>","types":"end"},
{"begin":4,"ender":544,"lexer":"markup","lines":1,"stack":"html","token":"<body>","types":"start"},
{"begin":77,"ender":544,"lexer":"markup","lines":1,"stack":"body","token":"class=\"white\"","types":"attribute"},
{"begin":77,"ender":544,"lexer":"markup","lines":1,"stack":"body","token":"id=\"doc\"","types":"attribute"},
{"begin":77,"ender":101,"lexer":"markup","lines":1,"stack":"body","token":"<h1>","types":"start"},
{"begin":80,"ender":95,"lexer":"markup","lines":1,"stack":"h1","token":"<svg>","types":"start"},
{"begin":81,"ender":95,"lexer":"markup","lines":1,"stack":"svg","token":"height=\"2000.000000pt\"","types":"attribute"},
{"begin":81,"ender":95,"lexer":"markup","lines":1,"stack":"svg","token":"preserveAspectRatio=\"xMidYMid meet\"","types":"attribute"},
{"begin":81,"ender":95,"lexer":"markup","lines":1,"stack":"svg","token":"version=\"1.0\"","types":"attribute"},
{"begin":81,"ender":95,"lexer":"markup","lines":1,"stack":"svg","token":"viewBox=\"0 0 2000.000000 2000.000000\"","types":"attribute"},
{"begin":81,"ender":95,"lexer":"markup","lines":1,"stack":"svg","token":"width=\"2000.000000pt\"","types":"attribute"},
{"begin":81,"ender":95,"lexer":"markup","lines":1,"stack":"svg","token":"xmlns=\"http://www.w3.org/2000/svg\"","types":"attribute"},
{"begin":81,"ender":94,"lexer":"markup","lines":1,"stack":"svg","token":"<g>","types":"start"},
{"begin":88,"ender":94,"lexer":"markup","lines":1,"stack":"g","token":"fill=\"#999\"","types":"attribute"},
{"begin":88,"ender":94,"lexer":"markup","lines":1,"stack":"g","token":"stroke=\"none\"","types":"attribute"},
{"begin":88,"ender":94,"lexer":"markup","lines":1,"stack":"g","token":"transform=\"translate(0.000000,2000.000000) scale(0.100000,-0.100000)\"","types":"attribute"},
{"begin":88,"ender":94,"lexer":"markup","lines":1,"stack":"g","token":"<path/>","types":"singleton"},
{"begin":92,"ender":94,"lexer":"markup","lines":1,"stack":"path","token":"d=\"M14871 18523 c-16 -64 -611 -2317 -946 -3588 -175 -660 -319 -1202 -320 -1204 -2 -2 -50 39 -107 91 -961 876 -2202 1358 -3498 1358 -1255 0 -2456 -451 -3409 -1279 -161 -140 -424 -408 -560 -571 -507 -607 -870 -1320 -1062 -2090 -58 -232 -386 -1479 -2309 -8759 -148 -563 -270 -1028 -270 -1033 0 -4 614 -8 1365 -8 l1364 0 10 38 c16 63 611 2316 946 3587 175 660 319 1202 320 1204 2 2 50 -39 107 -91 543 -495 1169 -862 1863 -1093 1707 -568 3581 -211 4965 946 252 210 554 524 767 796 111 143 312 445 408 613 229 406 408 854 525 1320 57 225 380 1451 2310 8759 148 563 270 1028 270 1033 0 4 -614 8 -1365 8 l-1364 0 -10 -37z m-4498 -5957 c477 -77 889 -256 1245 -542 523 -419 850 -998 954 -1689 18 -121 18 -549 0 -670 -80 -529 -279 -972 -612 -1359 -412 -480 -967 -779 -1625 -878 -121 -18 -549 -18 -670 0 -494 74 -918 255 -1283 548 -523 419 -850 998 -954 1689 -18 121 -18 549 0 670 104 691 431 1270 954 1689 365 293 828 490 1283 545 50 6 104 13 120 15 72 10 495 -3 588 -18z\"","types":"attribute"},
{"begin":88,"ender":94,"lexer":"markup","lines":0,"stack":"g","token":"</g>","types":"end"},
{"begin":81,"ender":95,"lexer":"markup","lines":1,"stack":"svg","token":"</svg>","types":"end"},
{"begin":80,"ender":99,"lexer":"markup","lines":1,"stack":"h1","token":"<a>","types":"start"},
{"begin":96,"ender":99,"lexer":"markup","lines":1,"stack":"a","token":"href=\"http://prettydiff.com/\"","types":"attribute"},
{"begin":96,"ender":99,"lexer":"markup","lines":0,"stack":"a","token":"Pretty Diff","types":"content"},
{"begin":96,"ender":99,"lexer":"markup","lines":0,"stack":"a","token":"</a>","types":"end"},
{"begin":80,"ender":101,"lexer":"markup","lines":1,"stack":"h1","token":"- Guide","types":"content"},
{"begin":80,"ender":101,"lexer":"markup","lines":0,"stack":"h1","token":"</h1>","types":"end"},
{"begin":77,"ender":122,"lexer":"markup","lines":1,"stack":"body","token":"<p>","types":"start"},
{"begin":102,"ender":122,"lexer":"markup","lines":1,"stack":"p","token":"id=\"dcolorScheme\"","types":"attribute"},
{"begin":102,"ender":108,"lexer":"markup","lines":0,"stack":"p","token":"<label>","types":"start"},
{"begin":104,"ender":108,"lexer":"markup","lines":1,"stack":"label","token":"class=\"label\"","types":"attribute"},
{"begin":104,"ender":108,"lexer":"markup","lines":1,"stack":"label","token":"for=\"colorScheme\"","types":"attribute"},
{"begin":104,"ender":108,"lexer":"markup","lines":0,"stack":"label","token":"Color Scheme","types":"content"},
{"begin":104,"ender":108,"lexer":"markup","lines":0,"stack":"label","token":"</label>","types":"end"},
{"begin":102,"ender":121,"lexer":"markup","lines":1,"stack":"p","token":"<select>","types":"start"},
{"begin":109,"ender":121,"lexer":"markup","lines":1,"stack":"select","token":"id=\"colorScheme\"","types":"attribute"},
{"begin":109,"ender":113,"lexer":"markup","lines":0,"stack":"select","token":"<option>","types":"start"},
{"begin":111,"ender":113,"lexer":"markup","lines":0,"stack":"option","token":"Canvas","types":"content"},
{"begin":111,"ender":113,"lexer":"markup","lines":0,"stack":"option","token":"</option>","types":"end"},
{"begin":109,"ender":116,"lexer":"markup","lines":1,"stack":"select","token":"<option>","types":"start"},
{"begin":114,"ender":116,"lexer":"markup","lines":0,"stack":"option","token":"Shadow","types":"content"},
{"begin":114,"ender":116,"lexer":"markup","lines":0,"stack":"option","token":"</option>","types":"end"},
{"begin":109,"ender":120,"lexer":"markup","lines":1,"stack":"select","token":"<option>","types":"start"},
{"begin":117,"ender":120,"lexer":"markup","lines":1,"stack":"option","token":"selected=\"selected\"","types":"attribute"},
{"begin":117,"ender":120,"lexer":"markup","lines":0,"stack":"option","token":"White","types":"content"},
{"begin":117,"ender":120,"lexer":"markup","lines":0,"stack":"option","token":"</option>","types":"end"},
{"begin":109,"ender":121,"lexer":"markup","lines":0,"stack":"select","token":"</select>","types":"end"},
{"begin":102,"ender":122,"lexer":"markup","lines":1,"stack":"p","token":"</p>","types":"end"},
{"begin":77,"ender":125,"lexer":"markup","lines":1,"stack":"body","token":"<h2>","types":"start"},
{"begin":123,"ender":125,"lexer":"markup","lines":0,"stack":"h2","token":"Using jsscope to understand scope, inheritance, and scope chains in JavaScript","types":"content"},
{"begin":123,"ender":125,"lexer":"markup","lines":0,"stack":"h2","token":"</h2>","types":"end"},
{"begin":77,"ender":539,"lexer":"markup","lines":1,"stack":"body","token":"<div>","types":"start"},
{"begin":126,"ender":539,"lexer":"markup","lines":1,"stack":"div","token":"id=\"webtool\"","types":"attribute"},
{"begin":126,"ender":172,"lexer":"markup","lines":1,"stack":"div","token":"<div>","types":"start"},
{"begin":128,"ender":131,"lexer":"markup","lines":0,"stack":"div","token":"<h3>","types":"start"},
{"begin":129,"ender":131,"lexer":"markup","lines":0,"stack":"h3","token":"Introduction","types":"content"},
{"begin":129,"ender":131,"lexer":"markup","lines":0,"stack":"h3","token":"</h3>","types":"end"},
{"begin":128,"ender":134,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":132,"ender":134,"lexer":"markup","lines":0,"stack":"p","token":"Scope is perhaps one of the most challenging concepts to understand for experienced programmers who are new to JavaScript. This is primarily because JavaScript is an object oriented language that offers poly-instantiation similar to how these concepts are offered in Java or C++, but unlike these other languages scope follows a separate and unrelated model.","types":"content"},
{"begin":132,"ender":134,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":128,"ender":161,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":135,"ender":161,"lexer":"markup","lines":0,"stack":"p","token":"Since functional programming has always been natively available in JavaScript I never find myself needing to use object oriented programming techniques in this language. I am able to program faster by never needing to use constructors,","types":"content"},
{"begin":135,"ender":139,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":137,"ender":139,"lexer":"markup","lines":0,"stack":"em","token":"bind","types":"content"},
{"begin":137,"ender":139,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":135,"ender":161,"lexer":"markup","lines":0,"stack":"p","token":",","types":"content"},
{"begin":135,"ender":143,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":141,"ender":143,"lexer":"markup","lines":0,"stack":"em","token":"call","types":"content"},
{"begin":141,"ender":143,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":135,"ender":161,"lexer":"markup","lines":0,"stack":"p","token":",","types":"content"},
{"begin":135,"ender":147,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":145,"ender":147,"lexer":"markup","lines":0,"stack":"em","token":"apply","types":"content"},
{"begin":145,"ender":147,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":135,"ender":161,"lexer":"markup","lines":0,"stack":"p","token":", or","types":"content"},
{"begin":135,"ender":151,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":149,"ender":151,"lexer":"markup","lines":0,"stack":"em","token":"Object.create","types":"content"},
{"begin":149,"ender":151,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":135,"ender":161,"lexer":"markup","lines":0,"stack":"p","token":". I only use","types":"content"},
{"begin":135,"ender":155,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":153,"ender":155,"lexer":"markup","lines":0,"stack":"em","token":"this","types":"content"},
{"begin":153,"ender":155,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":135,"ender":161,"lexer":"markup","lines":1,"stack":"p","token":"in callbacks and","types":"content"},
{"begin":135,"ender":159,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":157,"ender":159,"lexer":"markup","lines":0,"stack":"em","token":"new","types":"content"},
{"begin":157,"ender":159,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":135,"ender":161,"lexer":"markup","lines":1,"stack":"p","token":"to access global objects that require it. It is possible to program large decomposable applications in JavaScript without OOP, and doing so will increase your programming speed, reduce the complexity of your code, and shrink the lines of code in your applications.","types":"content"},
{"begin":135,"ender":161,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":128,"ender":171,"lexer":"markup","lines":1,"stack":"div","token":"<blockquote>","types":"start"},
{"begin":162,"ender":171,"lexer":"markup","lines":0,"stack":"blockquote","token":"No matter what language you work in, programming in a functional style provides benefits. You should do it whenever it is convenient, and you should think hard about the decision when it isn't convenient.","types":"content"},
{"begin":162,"ender":170,"lexer":"markup","lines":1,"stack":"blockquote","token":"<span>","types":"start"},
{"begin":164,"ender":170,"lexer":"markup","lines":0,"stack":"span","token":"&mdash;","types":"content"},
{"begin":164,"ender":169,"lexer":"markup","lines":1,"stack":"span","token":"<a>","types":"start"},
{"begin":166,"ender":169,"lexer":"markup","lines":1,"stack":"a","token":"href=\"http://gamasutra.com/view/news/169296/Indepth_Functional_programming_in_C.php\"","types":"attribute"},
{"begin":166,"ender":169,"lexer":"markup","lines":0,"stack":"a","token":"John Carmack","types":"content"},
{"begin":166,"ender":169,"lexer":"markup","lines":0,"stack":"a","token":"</a>","types":"end"},
{"begin":164,"ender":170,"lexer":"markup","lines":0,"stack":"span","token":"</span>","types":"end"},
{"begin":162,"ender":171,"lexer":"markup","lines":1,"stack":"blockquote","token":"</blockquote>","types":"end"},
{"begin":128,"ender":172,"lexer":"markup","lines":1,"stack":"div","token":"</div>","types":"end"},
{"begin":126,"ender":209,"lexer":"markup","lines":1,"stack":"div","token":"<div>","types":"start"},
{"begin":173,"ender":176,"lexer":"markup","lines":0,"stack":"div","token":"<h3>","types":"start"},
{"begin":174,"ender":176,"lexer":"markup","lines":0,"stack":"h3","token":"Key Points","types":"content"},
{"begin":174,"ender":176,"lexer":"markup","lines":0,"stack":"h3","token":"</h3>","types":"end"},
{"begin":173,"ender":208,"lexer":"markup","lines":1,"stack":"div","token":"<ol>","types":"start"},
{"begin":177,"ender":180,"lexer":"markup","lines":1,"stack":"ol","token":"<li>","types":"start"},
{"begin":178,"ender":180,"lexer":"markup","lines":0,"stack":"li","token":"Functions provide scope.","types":"content"},
{"begin":178,"ender":180,"lexer":"markup","lines":0,"stack":"li","token":"</li>","types":"end"},
{"begin":177,"ender":183,"lexer":"markup","lines":1,"stack":"ol","token":"<li>","types":"start"},
{"begin":181,"ender":183,"lexer":"markup","lines":0,"stack":"li","token":"Closure is crossing scope boundaries.","types":"content"},
{"begin":181,"ender":183,"lexer":"markup","lines":0,"stack":"li","token":"</li>","types":"end"},
{"begin":177,"ender":186,"lexer":"markup","lines":1,"stack":"ol","token":"<li>","types":"start"},
{"begin":184,"ender":186,"lexer":"markup","lines":0,"stack":"li","token":"Variables are resolved through a succession of scope, scope chain.","types":"content"},
{"begin":184,"ender":186,"lexer":"markup","lines":0,"stack":"li","token":"</li>","types":"end"},
{"begin":177,"ender":189,"lexer":"markup","lines":1,"stack":"ol","token":"<li>","types":"start"},
{"begin":187,"ender":189,"lexer":"markup","lines":0,"stack":"li","token":"Where in the scope chain variables are declared structures a functional application.","types":"content"},
{"begin":187,"ender":189,"lexer":"markup","lines":0,"stack":"li","token":"</li>","types":"end"},
{"begin":177,"ender":197,"lexer":"markup","lines":1,"stack":"ol","token":"<li>","types":"start"},
{"begin":190,"ender":197,"lexer":"markup","lines":0,"stack":"li","token":"The","types":"content"},
{"begin":190,"ender":195,"lexer":"markup","lines":1,"stack":"li","token":"<a>","types":"start"},
{"begin":192,"ender":195,"lexer":"markup","lines":1,"stack":"a","token":"href=\"../prettydiff.js\"","types":"attribute"},
{"begin":192,"ender":195,"lexer":"markup","lines":0,"stack":"a","token":"Pretty Diff","types":"content"},
{"begin":192,"ender":195,"lexer":"markup","lines":0,"stack":"a","token":"</a>","types":"end"},
{"begin":190,"ender":197,"lexer":"markup","lines":1,"stack":"li","token":"application is an example of functional programming and decomposition.","types":"content"},
{"begin":190,"ender":197,"lexer":"markup","lines":0,"stack":"li","token":"</li>","types":"end"},
{"begin":177,"ender":200,"lexer":"markup","lines":1,"stack":"ol","token":"<li>","types":"start"},
{"begin":198,"ender":200,"lexer":"markup","lines":0,"stack":"li","token":"Leaky functions allow for manually controlled side effects.","types":"content"},
{"begin":198,"ender":200,"lexer":"markup","lines":0,"stack":"li","token":"</li>","types":"end"},
{"begin":177,"ender":207,"lexer":"markup","lines":1,"stack":"ol","token":"<li>","types":"start"},
{"begin":201,"ender":207,"lexer":"markup","lines":0,"stack":"li","token":"ECMAScript 6 will introduce block scope with the","types":"content"},
{"begin":201,"ender":205,"lexer":"markup","lines":1,"stack":"li","token":"<em>","types":"start"},
{"begin":203,"ender":205,"lexer":"markup","lines":0,"stack":"em","token":"let","types":"content"},
{"begin":203,"ender":205,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":201,"ender":207,"lexer":"markup","lines":1,"stack":"li","token":"keyword.","types":"content"},
{"begin":201,"ender":207,"lexer":"markup","lines":0,"stack":"li","token":"</li>","types":"end"},
{"begin":177,"ender":208,"lexer":"markup","lines":1,"stack":"ol","token":"</ol>","types":"end"},
{"begin":173,"ender":209,"lexer":"markup","lines":1,"stack":"div","token":"</div>","types":"end"},
{"begin":126,"ender":253,"lexer":"markup","lines":1,"stack":"div","token":"<div>","types":"start"},
{"begin":210,"ender":213,"lexer":"markup","lines":0,"stack":"div","token":"<h3>","types":"start"},
{"begin":211,"ender":213,"lexer":"markup","lines":0,"stack":"h3","token":"JSScope","types":"content"},
{"begin":211,"ender":213,"lexer":"markup","lines":0,"stack":"h3","token":"</h3>","types":"end"},
{"begin":210,"ender":226,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":214,"ender":226,"lexer":"markup","lines":0,"stack":"p","token":"Each of the following code samples is prepared using the","types":"content"},
{"begin":214,"ender":219,"lexer":"markup","lines":1,"stack":"p","token":"<a>","types":"start"},
{"begin":216,"ender":219,"lexer":"markup","lines":1,"stack":"a","token":"href=\"jshtml.xhtml\"","types":"attribute"},
{"begin":216,"ender":219,"lexer":"markup","lines":0,"stack":"a","token":"jsscope","types":"content"},
{"begin":216,"ender":219,"lexer":"markup","lines":0,"stack":"a","token":"</a>","types":"end"},
{"begin":214,"ender":226,"lexer":"markup","lines":1,"stack":"p","token":"feature of Pretty Diff's","types":"content"},
{"begin":214,"ender":224,"lexer":"markup","lines":1,"stack":"p","token":"<a>","types":"start"},
{"begin":221,"ender":224,"lexer":"markup","lines":1,"stack":"a","token":"href=\"../lib/jspretty.js\"","types":"attribute"},
{"begin":221,"ender":224,"lexer":"markup","lines":0,"stack":"a","token":"jspretty.js","types":"content"},
{"begin":221,"ender":224,"lexer":"markup","lines":0,"stack":"a","token":"</a>","types":"end"},
{"begin":214,"ender":226,"lexer":"markup","lines":1,"stack":"p","token":"library. This feature beautifies the supplied JavaScript and then outputs the code as formatted HTML. It also colors the background of functions and variables to indicate scope depth, which is explained in further detail below.","types":"content"},
{"begin":214,"ender":226,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":210,"ender":249,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":227,"ender":249,"lexer":"markup","lines":0,"stack":"p","token":"The jsscope feature can be accessed in code by providing a value of","types":"content"},
{"begin":227,"ender":231,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":229,"ender":231,"lexer":"markup","lines":0,"stack":"em","token":"true","types":"content"},
{"begin":229,"ender":231,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":227,"ender":249,"lexer":"markup","lines":1,"stack":"p","token":"to the Pretty Diff option","types":"content"},
{"begin":227,"ender":235,"lexer":"markup","lines":1,"stack":"p","token":"<strong>","types":"start"},
{"begin":233,"ender":235,"lexer":"markup","lines":0,"stack":"strong","token":"jsscope","types":"content"},
{"begin":233,"ender":235,"lexer":"markup","lines":0,"stack":"strong","token":"</strong>","types":"end"},
{"begin":227,"ender":249,"lexer":"markup","lines":1,"stack":"p","token":"or by selecting the option","types":"content"},
{"begin":227,"ender":239,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":237,"ender":239,"lexer":"markup","lines":1,"stack":"em","token":"Scope analysis output","types":"content"},
{"begin":237,"ender":239,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":227,"ender":249,"lexer":"markup","lines":1,"stack":"p","token":"from the webtool. It also possible to link directly a jsscope operation by providing an address parameter of","types":"content"},
{"begin":227,"ender":243,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":241,"ender":243,"lexer":"markup","lines":0,"stack":"em","token":"jsscope","types":"content"},
{"begin":241,"ender":243,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":227,"ender":249,"lexer":"markup","lines":1,"stack":"p","token":"and a parameter of","types":"content"},
{"begin":227,"ender":247,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":245,"ender":247,"lexer":"markup","lines":0,"stack":"em","token":"s","types":"content"},
{"begin":245,"ender":247,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":227,"ender":249,"lexer":"markup","lines":1,"stack":"p","token":"that links to a code sample. Example:","types":"content"},
{"begin":227,"ender":249,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":210,"ender":252,"lexer":"markup","lines":1,"stack":"div","token":"<code>","types":"start"},
{"begin":250,"ender":252,"lexer":"markup","lines":0,"stack":"code","token":"http://prettydiff.com/?m=beautify&amp;s=http://prettydiff.com/lib/jspretty.js&amp;jsscope","types":"content"},
{"begin":250,"ender":252,"lexer":"markup","lines":0,"stack":"code","token":"</code>","types":"end"},
{"begin":210,"ender":253,"lexer":"markup","lines":1,"stack":"div","token":"</div>","types":"end"},
{"begin":126,"ender":327,"lexer":"markup","lines":1,"stack":"div","token":"<div>","types":"start"},
{"begin":254,"ender":257,"lexer":"markup","lines":0,"stack":"div","token":"<h3>","types":"start"},
{"begin":255,"ender":257,"lexer":"markup","lines":0,"stack":"h3","token":"Function Scope","types":"content"},
{"begin":255,"ender":257,"lexer":"markup","lines":0,"stack":"h3","token":"</h3>","types":"end"},
{"begin":254,"ender":260,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":258,"ender":260,"lexer":"markup","lines":0,"stack":"p","token":"Many languages offer block scope. Prior to ECMAScript 6 JavaScript only offers global scope and function scope. I will speak to block scope with ECMAScript 6 much later.","types":"content"},
{"begin":258,"ender":260,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":254,"ender":267,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":261,"ender":267,"lexer":"markup","lines":0,"stack":"p","token":"Functions are powerful. They can be treated like dumb object literals and assigned properties. Functions can store instructions, return values, and provide a limited scope to variables. Variables are instantiated with the","types":"content"},
{"begin":261,"ender":265,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":263,"ender":265,"lexer":"markup","lines":0,"stack":"em","token":"var","types":"content"},
{"begin":263,"ender":265,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":261,"ender":267,"lexer":"markup","lines":1,"stack":"p","token":"keyword.","types":"content"},
{"begin":261,"ender":267,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":254,"ender":327,"lexer":"markup","lines":0,"stack":"div","token":"<div class='beautify' data-prettydiff-ignore=\"true\"><h4>A simple code sample showing a single function containing a single variable and a global variable.</h4><ol class='count'><li>1</li><li class=\"fold\" title=\"folds from line 2 to line 4\">- 2</li><li>3</li><li>4</li></ol><ol class='data'><li>var <em class='s0'>globalNumber</em> = 10,<em>&#xA;</em></li><li class='l0'>    <em class='s0'>outer</em>        = function () <em class='s1'>{</em><em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>    var <em class='s1'>a</em> = 20;<em>&#xA;</em></li><li class='l0'><em class='l0'>    </em><em class='s1'>}</em>;<em>&#xA;</em></li></ol></div>","types":"content-ignore"},
{"begin":254,"ender":291,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":269,"ender":291,"lexer":"markup","lines":0,"stack":"p","token":"In the above code sample we can see a function assigned to the reference","types":"content"},
{"begin":269,"ender":273,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":271,"ender":273,"lexer":"markup","lines":0,"stack":"em","token":"outer","types":"content"},
{"begin":271,"ender":273,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":269,"ender":291,"lexer":"markup","lines":1,"stack":"p","token":"in the global scope and containing a single variable named","types":"content"},
{"begin":269,"ender":277,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":275,"ender":277,"lexer":"markup","lines":0,"stack":"em","token":"a","types":"content"},
{"begin":275,"ender":277,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":269,"ender":291,"lexer":"markup","lines":0,"stack":"p","token":". We can also see a second global variable named","types":"content"},
{"begin":269,"ender":281,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":279,"ender":281,"lexer":"markup","lines":0,"stack":"em","token":"globalNumber","types":"content"},
{"begin":279,"ender":281,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":269,"ender":291,"lexer":"markup","lines":0,"stack":"p","token":". Variable","types":"content"},
{"begin":269,"ender":285,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":283,"ender":285,"lexer":"markup","lines":0,"stack":"em","token":"a","types":"content"},
{"begin":283,"ender":285,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":269,"ender":291,"lexer":"markup","lines":1,"stack":"p","token":"resides in the scope provided by its containing function,","types":"content"},
{"begin":269,"ender":289,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":287,"ender":289,"lexer":"markup","lines":0,"stack":"em","token":"outer","types":"content"},
{"begin":287,"ender":289,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":269,"ender":291,"lexer":"markup","lines":0,"stack":"p","token":".","types":"content"},
{"begin":269,"ender":291,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":254,"ender":306,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":292,"ender":306,"lexer":"markup","lines":0,"stack":"p","token":"Functions are private spaces, somewhat like a top secret military base. You can see out to the rest of the world from inside, but the outside cannot peer inside. In the case of our code example the global scope cannot see inside the function's scope, which means variable","types":"content"},
{"begin":292,"ender":296,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":294,"ender":296,"lexer":"markup","lines":0,"stack":"em","token":"a","types":"content"},
{"begin":294,"ender":296,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":292,"ender":306,"lexer":"markup","lines":1,"stack":"p","token":"does not exist in the global scope where","types":"content"},
{"begin":292,"ender":300,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":298,"ender":300,"lexer":"markup","lines":0,"stack":"em","token":"globalNumber","types":"content"},
{"begin":298,"ender":300,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":292,"ender":306,"lexer":"markup","lines":1,"stack":"p","token":"is declared. Since variable","types":"content"},
{"begin":292,"ender":304,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":302,"ender":304,"lexer":"markup","lines":0,"stack":"em","token":"a","types":"content"},
{"begin":302,"ender":304,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":292,"ender":306,"lexer":"markup","lines":1,"stack":"p","token":"does not exist in the global space it cannot used in this area for any operation. It simply doesn't exist and cannot be found.","types":"content"},
{"begin":292,"ender":306,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":254,"ender":325,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":307,"ender":325,"lexer":"markup","lines":0,"stack":"p","token":"The scope of a function can see outside. We know that variable","types":"content"},
{"begin":307,"ender":311,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":309,"ender":311,"lexer":"markup","lines":0,"stack":"em","token":"a","types":"content"},
{"begin":309,"ender":311,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":307,"ender":325,"lexer":"markup","lines":1,"stack":"p","token":"cannot be accessed in the lower function scope from global, so instead let's think about this in the opposite direction. Because the scope of a function can see outside it can access the global scope. The variables","types":"content"},
{"begin":307,"ender":315,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":313,"ender":315,"lexer":"markup","lines":0,"stack":"em","token":"a","types":"content"},
{"begin":313,"ender":315,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":307,"ender":325,"lexer":"markup","lines":1,"stack":"p","token":"and","types":"content"},
{"begin":307,"ender":319,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":317,"ender":319,"lexer":"markup","lines":0,"stack":"em","token":"globalNumber","types":"content"},
{"begin":317,"ender":319,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":307,"ender":325,"lexer":"markup","lines":1,"stack":"p","token":"can be accessed together to perform an addition operation that provides a value of 30,","types":"content"},
{"begin":307,"ender":323,"lexer":"markup","lines":1,"stack":"p","token":"<strong>","types":"start"},
{"begin":321,"ender":323,"lexer":"markup","lines":0,"stack":"strong","token":"but only from inside the function","types":"content"},
{"begin":321,"ender":323,"lexer":"markup","lines":0,"stack":"strong","token":"</strong>","types":"end"},
{"begin":307,"ender":325,"lexer":"markup","lines":0,"stack":"p","token":".","types":"content"},
{"begin":307,"ender":325,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":254,"ender":327,"lexer":"markup","lines":0,"stack":"div","token":"<div class='beautify' data-prettydiff-ignore=\"true\"><h4>A simpled code example of closure.</h4> <ol class='count'><li>1</li><li class=\"fold\" title=\"folds from line 2 to line 5\">- 2</li><li>3</li><li>4</li><li>5</li><li>6</li></ol><ol class='data'><li>var <em class='s0'>globalNumber</em> = 10,<em>&#xA;</em></li><li class='l0'>    <em class='s0'>outer</em>        = function () <em class='s1'>{</em><em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>    var <em class='s1'>a</em> = 20;<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>    return <em class='s1'>a</em> + <em class='s0'>globalNumber</em>;<em>&#xA;</em></li><li class='l0'><em class='l0'>    </em><em class='s1'>}</em>;<em>&#xA;</em></li><li class='l0'>return <em class='s0'>outer</em>(); //returns 30<em>&#xA;</em></li></ol></div>","types":"content-ignore"},
{"begin":254,"ender":327,"lexer":"markup","lines":1,"stack":"div","token":"</div>","types":"end"},
{"begin":126,"ender":334,"lexer":"markup","lines":1,"stack":"div","token":"<div>","types":"start"},
{"begin":328,"ender":331,"lexer":"markup","lines":0,"stack":"div","token":"<h3>","types":"start"},
{"begin":329,"ender":331,"lexer":"markup","lines":0,"stack":"h3","token":"Block Scope","types":"content"},
{"begin":329,"ender":331,"lexer":"markup","lines":0,"stack":"h3","token":"</h3>","types":"end"},
{"begin":328,"ender":333,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":332,"ender":333,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":328,"ender":334,"lexer":"markup","lines":1,"stack":"div","token":"</div>","types":"end"},
{"begin":126,"ender":367,"lexer":"markup","lines":1,"stack":"div","token":"<div>","types":"start"},
{"begin":335,"ender":338,"lexer":"markup","lines":0,"stack":"div","token":"<h3>","types":"start"},
{"begin":336,"ender":338,"lexer":"markup","lines":0,"stack":"h3","token":"Closure","types":"content"},
{"begin":336,"ender":338,"lexer":"markup","lines":0,"stack":"h3","token":"</h3>","types":"end"},
{"begin":335,"ender":350,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":339,"ender":350,"lexer":"markup","lines":0,"stack":"p","token":"Most simply speaking closure is the process of crossing a scope boundary to access a resource. In the second code sample we had to leave the local function scope to find and access the variable","types":"content"},
{"begin":339,"ender":343,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":341,"ender":343,"lexer":"markup","lines":0,"stack":"em","token":"globalNumber","types":"content"},
{"begin":341,"ender":343,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":339,"ender":350,"lexer":"markup","lines":0,"stack":"p","token":". In computer science terms this idea of scope compartmentalization is called","types":"content"},
{"begin":339,"ender":348,"lexer":"markup","lines":1,"stack":"p","token":"<a>","types":"start"},
{"begin":345,"ender":348,"lexer":"markup","lines":1,"stack":"a","token":"href=\"https://en.wikipedia.org/wiki/Scope_%28computer_science%29#Lexical_scoping\"","types":"attribute"},
{"begin":345,"ender":348,"lexer":"markup","lines":0,"stack":"a","token":"lexical scope","types":"content"},
{"begin":345,"ender":348,"lexer":"markup","lines":0,"stack":"a","token":"</a>","types":"end"},
{"begin":339,"ender":350,"lexer":"markup","lines":0,"stack":"p","token":". To understand why this concept is so frustrating to experienced programmers we need to example a more complex code sample.","types":"content"},
{"begin":339,"ender":350,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":335,"ender":367,"lexer":"markup","lines":0,"stack":"div","token":"<div class='beautify' data-prettydiff-ignore=\"true\"><h4>A third code sample showing a function nested inside the outer function.</h4><ol class='count'><li>1</li><li class=\"fold\" title=\"folds from line 2 to line 9\">- 2</li><li>3</li><li class=\"fold\" title=\"folds from line 4 to line 7\">- 4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ol><ol class='data'><li>var <em class='s0'>globalNumber</em> = 10,<em>&#xA;</em></li><li class='l0'>    <em class='s0'>outer</em>        = function () <em class='s1'>{</em><em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>    var <em class='s1'>a</em>     = 20,<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>        <em class='s1'>inner</em> = function () <em class='s2'>{</em><em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>        var <em class='s2'>b</em> = 30;<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>        return <em class='s1'>a</em> + <em class='s2'>b</em> + <em class='s0'>globalNumber</em>;<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em><em class='l1'>    </em>    <em class='s2'>}</em>;<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>    return <em class='s1'>inner</em>();<em>&#xA;</em></li><li class='l0'><em class='l0'>    </em><em class='s1'>}</em>;<em>&#xA;</em></li><li class='l0'>return <em class='s0'>outer</em>(); //returns 60<em>&#xA;</em></li></ol></div>","types":"content-ignore"},
{"begin":335,"ender":354,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":352,"ender":354,"lexer":"markup","lines":0,"stack":"p","token":"In the third code sample we can see three scopes. All the discussed logic about private and public access still applies. The scope of a function can see out, but things cannot see inside.","types":"content"},
{"begin":352,"ender":354,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":335,"ender":357,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":355,"ender":357,"lexer":"markup","lines":0,"stack":"p","token":"When writing object oriented programming in a language like Java public and private states of objects must be manually declared by the code author. In the case of this sample code there are private and public areas, but these states are automatically applied by the nature of functions and their position relative to each other.","types":"content"},
{"begin":355,"ender":357,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":335,"ender":360,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":358,"ender":360,"lexer":"markup","lines":0,"stack":"p","token":"Object oriented programming is powerful because it allows a code author to define an object and conditionally extend that object at a later time only when needed. This means there must be some high level generic object that gradually becomes more specific as children are attached. This is a top down model of organization where vague definitions start in a high level and expect to be consumed by lower level code. This also means the consuming code must specify the object it wishes to extend, which provides some manual effort on behalf of the code author and allows tighter control of code behavior.","types":"content"},
{"begin":358,"ender":360,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":335,"ender":363,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":361,"ender":363,"lexer":"markup","lines":0,"stack":"p","token":"The functional approach is often challenging for programmers experienced with object oriented programming. So much of the manual linking, referencing, and extending are instantly irrelevant as they are automatically known as a component of the code architecture. While OOP is a top down model of programming the functional approach is very much a bottom up model. This bottom up model is called the scope chain.","types":"content"},
{"begin":361,"ender":363,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":335,"ender":366,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":364,"ender":366,"lexer":"markup","lines":0,"stack":"p","token":"The functional programming paradigm is trending up because it requires less effort on the part of the programmer and in some cases executes much faster. Since functional programming is architecturally based instead of reference based it reduces risk and maintenance in the code substantially. Its not completely wonderful though, applications written with the functional programming model tend to consume far greater memory.","types":"content"},
{"begin":364,"ender":366,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":335,"ender":367,"lexer":"markup","lines":1,"stack":"div","token":"</div>","types":"end"},
{"begin":126,"ender":390,"lexer":"markup","lines":1,"stack":"div","token":"<div>","types":"start"},
{"begin":368,"ender":371,"lexer":"markup","lines":0,"stack":"div","token":"<h3>","types":"start"},
{"begin":369,"ender":371,"lexer":"markup","lines":0,"stack":"h3","token":"Scope Chain","types":"content"},
{"begin":369,"ender":371,"lexer":"markup","lines":0,"stack":"h3","token":"</h3>","types":"end"},
{"begin":368,"ender":386,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":372,"ender":386,"lexer":"markup","lines":0,"stack":"p","token":"The scope chain is the process a language uses to resolve non-local references in the lexical inheritance model of programming. Everytime JavaScript encounters a variable reference it attempts to resolve this reference in the local scope. If the reference is declared in the local function then it is easy to find and the program and knows which scope the reference is bound. Looking at the third code sample variable","types":"content"},
{"begin":372,"ender":376,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":374,"ender":376,"lexer":"markup","lines":0,"stack":"em","token":"globalNumber","types":"content"},
{"begin":374,"ender":376,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":372,"ender":386,"lexer":"markup","lines":1,"stack":"p","token":"is used in the scope of function","types":"content"},
{"begin":372,"ender":380,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":378,"ender":380,"lexer":"markup","lines":0,"stack":"em","token":"inner","types":"content"},
{"begin":378,"ender":380,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":372,"ender":386,"lexer":"markup","lines":0,"stack":"p","token":", but is not declared there. To resolve this reference the application must step into the containing scope, function","types":"content"},
{"begin":372,"ender":384,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":382,"ender":384,"lexer":"markup","lines":0,"stack":"em","token":"outer","types":"content"},
{"begin":382,"ender":384,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":372,"ender":386,"lexer":"markup","lines":0,"stack":"p","token":", to find the reference. It still cannot be found, so the application continues looking into the next higher scope, global. Now the reference can be resolved.","types":"content"},
{"begin":372,"ender":386,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":368,"ender":389,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":387,"ender":389,"lexer":"markup","lines":0,"stack":"p","token":"This process of gradually stepping up the higher scopes is JavaScript's primary scope chain. A second hidden scope chain exists for prototypes. In earlier versions of the language prototypes were always faster to access, because even though the prototype resolution chain is not accessed until the primary scope chain is exhausted their existence was always cached in memory, much like classes in Java and C++. In modern execution of the language all references are cached so the only observable benefit to continued use of prototypes is to allow object oriented programming styles instead of purely functional programming styles.","types":"content"},
{"begin":387,"ender":389,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":368,"ender":390,"lexer":"markup","lines":1,"stack":"div","token":"</div>","types":"end"},
{"begin":126,"ender":401,"lexer":"markup","lines":1,"stack":"div","token":"<div>","types":"start"},
{"begin":391,"ender":394,"lexer":"markup","lines":0,"stack":"div","token":"<h3>","types":"start"},
{"begin":392,"ender":394,"lexer":"markup","lines":0,"stack":"h3","token":"Structure and Code Reuse","types":"content"},
{"begin":392,"ender":394,"lexer":"markup","lines":0,"stack":"h3","token":"</h3>","types":"end"},
{"begin":391,"ender":397,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":395,"ender":397,"lexer":"markup","lines":0,"stack":"p","token":"To reduce clutter in your application references should always be defined as locally, which means in the lowest scope available, as possible. If a reference is defined locally in a function, but needs to be accessed from a function not available to the current scope then move the reference declaration into a higher scope to enable access. By balancing the needs of access versus the need to localize references the placement of variables in your application will be natural without extensive manual effort.","types":"content"},
{"begin":395,"ender":397,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":391,"ender":400,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":398,"ender":400,"lexer":"markup","lines":0,"stack":"p","token":"I commonly use arrays as closures. This is particularly helpful when writing language parsers. An array stores all the data about a code sample into fragments I call tokens. A variety of analysis needs to be performed against this data. By declaring the array high in a parsing library it can be accessed by a variety of functions each containing a different type of analysis. This is helpful because I can access the array regardless of scope depth no differently than a local variable and the changes made to the array are made in the scope where the array is declared. There are no objects to extend and no instructions to control reuse or access.","types":"content"},
{"begin":398,"ender":400,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":391,"ender":401,"lexer":"markup","lines":1,"stack":"div","token":"</div>","types":"end"},
{"begin":126,"ender":436,"lexer":"markup","lines":1,"stack":"div","token":"<div>","types":"start"},
{"begin":402,"ender":405,"lexer":"markup","lines":0,"stack":"div","token":"<h3>","types":"start"},
{"begin":403,"ender":405,"lexer":"markup","lines":0,"stack":"h3","token":"Using an Excerpt of Pretty Diff as an Example","types":"content"},
{"begin":403,"ender":405,"lexer":"markup","lines":0,"stack":"h3","token":"</h3>","types":"end"},
{"begin":402,"ender":408,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":406,"ender":408,"lexer":"markup","lines":0,"stack":"p","token":"Even after the concepts of functional programming are taught they tend to remain challenging to experienced programmers from an architectural perspective. If programmers are formally educated to learn programming in the context of object oriented code then application architecture is known primarily in that fashion. This frustration is often evident when a programmer attempts to learn this model of programming in the context of existing models that are more emotionally comforting, which results in working harder than necessary and understanding less than expected. Functional programming is actually massively easier to understand with regards to code architecture because it is rather primitive and the code architecture handles all the challenging concepts automatically, but as a programmer you must be willing to concede that it is okay to give up absolute control of where references are consumed.","types":"content"},
{"begin":406,"ender":408,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":402,"ender":416,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":409,"ender":416,"lexer":"markup","lines":0,"stack":"p","token":"The","types":"content"},
{"begin":409,"ender":414,"lexer":"markup","lines":1,"stack":"p","token":"<a>","types":"start"},
{"begin":411,"ender":414,"lexer":"markup","lines":1,"stack":"a","token":"href=\"../lib/markupmin.js\"","types":"attribute"},
{"begin":411,"ender":414,"lexer":"markup","lines":0,"stack":"a","token":"markupmin.js","types":"content"},
{"begin":411,"ender":414,"lexer":"markup","lines":0,"stack":"a","token":"</a>","types":"end"},
{"begin":409,"ender":416,"lexer":"markup","lines":1,"stack":"p","token":"library is written in a purely functional form. I will use this as an example of functional programming architecture. I recommend opening the markupmin.js file in a code editor that allows code folding on blocks and functions, because the application file is rather large. After the file contents are in your code editor fold absolutely everything so that you can see code that looks like less than 200 lines.","types":"content"},
{"begin":409,"ender":416,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":402,"ender":436,"lexer":"markup","lines":1,"stack":"div","token":"<div class='beautify' data-prettydiff-ignore='true'><ol class='count'><li class='fold' title='folds from line 1 to line 52'>- 1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li class='fold' title='folds from line 8 to line 51'>- 8</li><li>9</li><li>10</li><li>11</li><li>12</li><li class='fold' title='folds from line 13 to line 21'>- 13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li></ol><ol class='data'><li>var <em class='s0'>markupmin</em> = function <em class='s1'>markupmin</em>(<em class='s1'>args</em>) <em class='s1'>{</em><em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>    var <em class='s1'>i</em>       = 0,<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>        <em class='s1'>x</em>       = (typeof <em class='s1'>args</em>.source === \"string\") ? <em class='s1'>args</em>.source.split(\"\") : [<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>            \"E\", \"r\", \"r\", \"o\", \"r\", \":\", \" \", \"n\", \"o\", \" \", \"c\", \"o\", \"n\", \"t\", \"e\", \"n\", \"t\", \" \", \"s\", \"u\", \"p\", \"p\", \"l\", \"i\", \"e\", \"d\", \" \", \"t\", \"o\", \" \", \"m\", \"a\", \"r\", \"k\", \"u\", \"p\", \".\"<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>        ],<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>        <em class='s1'>inchar</em>  = (typeof <em class='s1'>args</em>.inchar === \"string\" &amp;&amp; <em class='s1'>args</em>.inchar.length &gt; 0) ? <em class='s1'>args</em>.inchar : \" \",<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>        <em class='s1'>insize</em>  = (isNaN(<em class='s1'>args</em>.insize) === false &amp;&amp; Number(<em class='s1'>args</em>.insize) &gt;= 0) ? Number(<em class='s1'>args</em>.insize) : 4,<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>        <em class='s1'>jsxItem</em> = function <em class='s2'>markupmin__jsxItem</em>(<em class='s2'>index</em>, <em class='s2'>space</em>) <em class='s2'>{</em><em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>        var <em class='s2'>a</em>      = 0,<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            <em class='s2'>end</em>    = <em class='s1'>x</em>.length,<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            <em class='s2'>count</em>  = 0,<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            <em class='s2'>store</em>  = [],<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            <em class='s2'>tabReg</em> = (function <em class='s3'>markupmin__jsxItem_tabReg</em>() <em class='s3'>{</em><em>&#xA;</em></li><li class='l3'><em class='l0'>    </em><em class='l1'>    </em><em class='l2'>    </em>            var <em class='s3'>b</em>     = 0,<em>&#xA;</em></li><li class='l3'><em class='l0'>    </em><em class='l1'>    </em><em class='l2'>    </em>                <em class='s3'>tabby</em> = [];<em>&#xA;</em></li><li class='l3'><em class='l0'>    </em><em class='l1'>    </em><em class='l2'>    </em>            for (<em class='s3'>b</em> = 0; <em class='s3'>b</em> &lt; <em class='s1'>insize</em>; <em class='s3'>b</em> += 1) {<em>&#xA;</em></li><li class='l3'><em class='l0'>    </em><em class='l1'>    </em><em class='l2'>    </em>                <em class='s3'>tabby</em>.push(\"\\\\\");<em>&#xA;</em></li><li class='l3'><em class='l0'>    </em><em class='l1'>    </em><em class='l2'>    </em>                <em class='s3'>tabby</em>.push(<em class='s1'>inchar</em>);<em>&#xA;</em></li><li class='l3'><em class='l0'>    </em><em class='l1'>    </em><em class='l2'>    </em>            }<em>&#xA;</em></li><li class='l3'><em class='l0'>    </em><em class='l1'>    </em><em class='l2'>    </em>            return new RegExp(\"^(\\\\s*\\\\{\\\\s*\" + <em class='s3'>tabby</em>.join(\"\") + \"+)\");<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em><em class='l2'>    </em>        <em class='s3'>}</em>());<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>        if (<em class='s2'>space</em> === undefined) {<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            <em class='s2'>space</em> = \"\";<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>        }<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>        for (<em class='s2'>a</em> = <em class='s2'>index</em>; <em class='s2'>a</em> &lt; <em class='s2'>end</em>; <em class='s2'>a</em> += 1) {<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            <em class='s2'>store</em>.push(<em class='s1'>x</em>[<em class='s2'>a</em>]);<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            if (<em class='s1'>x</em>[<em class='s2'>a</em>] === \"{\") {<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>                <em class='s2'>count</em> += 1;<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            }<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            if (<em class='s1'>x</em>[<em class='s2'>a</em>] === \"}\") {<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>                <em class='s2'>count</em> -= 1;<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>                if (<em class='s2'>count</em> === 0) {<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>                    <em class='s1'>x</em>[<em class='s2'>a</em>] = \"\";<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>                    break;<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>                }<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            }<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            <em class='s1'>x</em>[<em class='s2'>a</em>] = \"\";<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>        }<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>        <em class='s1'>x</em>[<em class='s2'>a</em>] = <em class='s2'>space</em> + jspretty({<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            inchar : <em class='s1'>inchar</em>,<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            insize : <em class='s1'>insize</em>,<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            jsscope: minjsscope,<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            jsx    : true,<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            mode   : (comments === \"beautify\") ? \"beautify\" : \"minify\",<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            source : <em class='s2'>store</em>.join(\"\")<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>        }).replace(<em class='s2'>tabReg</em>, \"{\").replace(/(\\s*\\}\\s*)$/, \"}\");<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>        if (<em class='s1'>x</em>[<em class='s2'>a</em>] === \"{};\" || <em class='s1'>x</em>[<em class='s2'>a</em>] === \"{}\") {<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>            <em class='s1'>x</em>[<em class='s2'>a</em>] = \"\";<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>        }<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>        return <em class='s2'>a</em>;<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em><em class='l1'>    </em>    <em class='s2'>}</em>;<em>&#xA;</em></li><li class='l0'><em class='l0'>    </em><em class='s1'>}</em>;<em>&#xA;</em></li><li class='l0'>};<em>&#xA;</em></li></ol></div>","types":"content-ignore"},
{"begin":402,"ender":420,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":418,"ender":420,"lexer":"markup","lines":0,"stack":"p","token":"We can see a couple of variables defined at the top and some nested functions. Each function performs a specific task. Some specific tasks require a series of instructions that can be reused apart from the larger structure. This is why multiple functions are used, but some of these functions don't need to be universally available, so they can be conveniently nested for easier reading and faster execution.","types":"content"},
{"begin":418,"ender":420,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":402,"ender":432,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":421,"ender":432,"lexer":"markup","lines":0,"stack":"p","token":"I have written the code in a way that the libraries can be completely independent of the larger Pretty Diff application. The","types":"content"},
{"begin":421,"ender":425,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":423,"ender":425,"lexer":"markup","lines":0,"stack":"em","token":"csspretty","types":"content"},
{"begin":423,"ender":425,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":421,"ender":432,"lexer":"markup","lines":1,"stack":"p","token":"library is being used in the","types":"content"},
{"begin":421,"ender":430,"lexer":"markup","lines":1,"stack":"p","token":"<a>","types":"start"},
{"begin":427,"ender":430,"lexer":"markup","lines":1,"stack":"a","token":"href=\"https://github.com/Glavin001/atom-beautify\"","types":"attribute"},
{"begin":427,"ender":430,"lexer":"markup","lines":0,"stack":"a","token":"atom-beautify","types":"content"},
{"begin":427,"ender":430,"lexer":"markup","lines":0,"stack":"a","token":"</a>","types":"end"},
{"begin":421,"ender":432,"lexer":"markup","lines":1,"stack":"p","token":"project, for instance. This ability to instantly pull a function out of a larger project and execute it independently exemplifies the decomposable nature of functional programming. There is no ceremony or boiler plate that must go with code when a function is subdivided into an independent application, but there must be some internalized planning in the function for it to receive input independent of its containing application.","types":"content"},
{"begin":421,"ender":432,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":402,"ender":435,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":433,"ender":435,"lexer":"markup","lines":0,"stack":"p","token":"Each of the libraries are divided into a few large functions that act as primary sub-components. These sub-components then contain functions of their own, and so on.","types":"content"},
{"begin":433,"ender":435,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":402,"ender":436,"lexer":"markup","lines":1,"stack":"div","token":"</div>","types":"end"},
{"begin":126,"ender":448,"lexer":"markup","lines":1,"stack":"div","token":"<div>","types":"start"},
{"begin":437,"ender":440,"lexer":"markup","lines":0,"stack":"div","token":"<h3>","types":"start"},
{"begin":438,"ender":440,"lexer":"markup","lines":0,"stack":"h3","token":"Leaky Functions","types":"content"},
{"begin":438,"ender":440,"lexer":"markup","lines":0,"stack":"h3","token":"</h3>","types":"end"},
{"begin":437,"ender":447,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":441,"ender":447,"lexer":"markup","lines":0,"stack":"p","token":"Through a clever use of closure it is possible to easily cheat the public/private nature of functional programming. This is what I call leaky functions. Look back at the code sample from the Pretty Diff application and notice the variable","types":"content"},
{"begin":441,"ender":445,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":443,"ender":445,"lexer":"markup","lines":0,"stack":"em","token":"summary","types":"content"},
{"begin":443,"ender":445,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":441,"ender":447,"lexer":"markup","lines":0,"stack":"p","token":". This variable declared outside of the libraries. When used inside the library functions it has access to all of the logic and references that is otherwise hidden in those functions. I use this variable to fully access the library code, perform some deep analysis of how code is parsed, and then leak a report of my analysis. Because of the leaky function concept I can cheat the bottom-up model of functional programming to access the logic than I need and only when I need it. This demonstrates the simple and expressive power of closures.","types":"content"},
{"begin":441,"ender":447,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":437,"ender":448,"lexer":"markup","lines":1,"stack":"div","token":"</div>","types":"end"},
{"begin":126,"ender":502,"lexer":"markup","lines":1,"stack":"div","token":"<div>","types":"start"},
{"begin":449,"ender":455,"lexer":"markup","lines":0,"stack":"div","token":"<h3>","types":"start"},
{"begin":450,"ender":455,"lexer":"markup","lines":0,"stack":"h3","token":"Block Scope ECMAScript 6 and","types":"content"},
{"begin":450,"ender":454,"lexer":"markup","lines":1,"stack":"h3","token":"<em>","types":"start"},
{"begin":452,"ender":454,"lexer":"markup","lines":0,"stack":"em","token":"let","types":"content"},
{"begin":452,"ender":454,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":450,"ender":455,"lexer":"markup","lines":0,"stack":"h3","token":"</h3>","types":"end"},
{"begin":449,"ender":475,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":456,"ender":475,"lexer":"markup","lines":0,"stack":"p","token":"The next version of JavaScript called","types":"content"},
{"begin":456,"ender":461,"lexer":"markup","lines":1,"stack":"p","token":"<a>","types":"start"},
{"begin":458,"ender":461,"lexer":"markup","lines":1,"stack":"a","token":"href=\"http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts\"","types":"attribute"},
{"begin":458,"ender":461,"lexer":"markup","lines":0,"stack":"a","token":"ECMAScript 6","types":"content"},
{"begin":458,"ender":461,"lexer":"markup","lines":0,"stack":"a","token":"</a>","types":"end"},
{"begin":456,"ender":475,"lexer":"markup","lines":1,"stack":"p","token":"will feature a new way to declare references with the","types":"content"},
{"begin":456,"ender":465,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":463,"ender":465,"lexer":"markup","lines":0,"stack":"em","token":"let","types":"content"},
{"begin":463,"ender":465,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":456,"ender":475,"lexer":"markup","lines":1,"stack":"p","token":"keyword. The","types":"content"},
{"begin":456,"ender":469,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":467,"ender":469,"lexer":"markup","lines":0,"stack":"em","token":"var","types":"content"},
{"begin":467,"ender":469,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":456,"ender":475,"lexer":"markup","lines":1,"stack":"p","token":"keyword is limited to function scope, but the","types":"content"},
{"begin":456,"ender":473,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":471,"ender":473,"lexer":"markup","lines":0,"stack":"em","token":"let","types":"content"},
{"begin":471,"ender":473,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":456,"ender":475,"lexer":"markup","lines":1,"stack":"p","token":"keyword will enable block scope. A block of code is generally anything wrapped in curly braces: loops, conditions, and of course functions. References declared with the let keyword will still follow the bottom-up lexical model that the var keyword follows.","types":"content"},
{"begin":456,"ender":475,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":449,"ender":478,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":476,"ender":478,"lexer":"markup","lines":0,"stack":"p","token":"The benefit is that references of extremely limited use can be declared where they are used instead of needing a function. This benefit does not come at conflict to anything previously discussed about functional programming, which also means the let keyword can effectively replace all uses of the var keyword. ECMAScript 6 is not final at the time of this writing and I await to see how its use always my perceptions of functional programming in JavaScript.","types":"content"},
{"begin":476,"ender":478,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":449,"ender":493,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":479,"ender":493,"lexer":"markup","lines":0,"stack":"p","token":"There is one other big difference between the","types":"content"},
{"begin":479,"ender":483,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":481,"ender":483,"lexer":"markup","lines":0,"stack":"em","token":"let","types":"content"},
{"begin":481,"ender":483,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":479,"ender":493,"lexer":"markup","lines":1,"stack":"p","token":"and","types":"content"},
{"begin":479,"ender":487,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":485,"ender":487,"lexer":"markup","lines":0,"stack":"em","token":"var","types":"content"},
{"begin":485,"ender":487,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":479,"ender":493,"lexer":"markup","lines":1,"stack":"p","token":"keywords. Variables declared with","types":"content"},
{"begin":479,"ender":491,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":489,"ender":491,"lexer":"markup","lines":0,"stack":"em","token":"let","types":"content"},
{"begin":489,"ender":491,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":479,"ender":493,"lexer":"markup","lines":1,"stack":"p","token":"are not hoisted. This means a reference used before it is declared, even within the same block, will throw an error. Consider the following code example:","types":"content"},
{"begin":479,"ender":493,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":449,"ender":502,"lexer":"markup","lines":1,"stack":"div","token":"<div class='beautify' data-prettydiff-ignore='true'><ol class='count'><li class='fold' title='folds from line 1 to line xxx'>- 1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li class='fold' title='folds from line 7 to line xxx'>- 7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ol><ol class='data'><li>var <em class='s0'>a</em> = function (<em class='s1'>b</em>) <em class='s1'>{</em><em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>var <em class='s1'>c</em> = 1,<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>    <em class='s1'>d</em> = 2;<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>if (e) {<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>    r;<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em>    t;<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>let <em class='s2'>r</em>;<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>p;<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em><em class='s2'>r</em>;<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>let <em class='s2'>p</em> = 3,<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em>    <em class='s2'>t</em> = 4;<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em><em class='s2'>p</em>;<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em><em class='s2'>r</em>;<em>&#xA;</em></li><li class='l2'><em class='l0'>    </em><em class='l1'>    </em><em class='s2'>t</em>;<em>&#xA;</em></li><li class='l1'><em class='l0'>    </em><em class='s2'>}</em><em>&#xA;</em></li><li class='l0'><em class='s1'>}</em>;<em>&#xA;</em></li></ol></div>","types":"content-ignore"},
{"begin":449,"ender":501,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":495,"ender":501,"lexer":"markup","lines":0,"stack":"p","token":"The jsscope feature attempts to account for the lack of hoisting with a couple of limitations. First, block scope is not highlighted until the first","types":"content"},
{"begin":495,"ender":499,"lexer":"markup","lines":1,"stack":"p","token":"<em>","types":"start"},
{"begin":497,"ender":499,"lexer":"markup","lines":0,"stack":"em","token":"let","types":"content"},
{"begin":497,"ender":499,"lexer":"markup","lines":0,"stack":"em","token":"</em>","types":"end"},
{"begin":495,"ender":501,"lexer":"markup","lines":1,"stack":"p","token":"keyword is reached. Additionally, variables are not indicated with colorful emphasis until they are declared.","types":"content"},
{"begin":495,"ender":501,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":449,"ender":502,"lexer":"markup","lines":1,"stack":"div","token":"</div>","types":"end"},
{"begin":126,"ender":530,"lexer":"markup","lines":1,"stack":"div","token":"<div>","types":"start"},
{"begin":503,"ender":506,"lexer":"markup","lines":0,"stack":"div","token":"<h3>","types":"start"},
{"begin":504,"ender":506,"lexer":"markup","lines":0,"stack":"h3","token":"Faulty Criticisms","types":"content"},
{"begin":504,"ender":506,"lexer":"markup","lines":0,"stack":"h3","token":"</h3>","types":"end"},
{"begin":503,"ender":509,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":507,"ender":509,"lexer":"markup","lines":0,"stack":"p","token":"These are actual criticisms to this approach I have heard. I wish I were making this up.","types":"content"},
{"begin":507,"ender":509,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":503,"ender":529,"lexer":"markup","lines":1,"stack":"div","token":"<ul>","types":"start"},
{"begin":510,"ender":516,"lexer":"markup","lines":1,"stack":"ul","token":"<li>","types":"start"},
{"begin":511,"ender":514,"lexer":"markup","lines":0,"stack":"li","token":"<strong>","types":"start"},
{"begin":512,"ender":514,"lexer":"markup","lines":0,"stack":"strong","token":"This style of coding will produce a big messy file.","types":"content"},
{"begin":512,"ender":514,"lexer":"markup","lines":0,"stack":"strong","token":"</strong>","types":"end"},
{"begin":511,"ender":516,"lexer":"markup","lines":1,"stack":"li","token":"This style of coding may result in a large code file if the given application is large, but large and messy are entirely unrelated just as with literature and novels. This approach to writing code will likely help to make less messy, because the declarations are bound to the architecture that defines the depth of scope for the application. Most JavaScript applications tend to always become large messy files as the result of build systems from application pre-processors, like: Grunt, Gulp, or Browserify. The functional approach commonly results in substantially less code since there are fewer declarations and fewer logical conventions in the code.","types":"content"},
{"begin":511,"ender":516,"lexer":"markup","lines":0,"stack":"li","token":"</li>","types":"end"},
{"begin":510,"ender":522,"lexer":"markup","lines":1,"stack":"ul","token":"<li>","types":"start"},
{"begin":517,"ender":520,"lexer":"markup","lines":0,"stack":"li","token":"<strong>","types":"start"},
{"begin":518,"ender":520,"lexer":"markup","lines":0,"stack":"strong","token":"Everything can access the same variables, which will be a conflict of too many things accessing the variables at once.","types":"content"},
{"begin":518,"ender":520,"lexer":"markup","lines":0,"stack":"strong","token":"</strong>","types":"end"},
{"begin":517,"ender":522,"lexer":"markup","lines":1,"stack":"li","token":"JavaScript execution is so far always synchronous and single threaded. Without events and other externalizing APIs it is impossible that collisions will occur from different things attempting to access a variable at the same time. Even with events and externalizing APIs this is incredibly unlikely to occur and even more unlikely that it will cause a problem.","types":"content"},
{"begin":517,"ender":522,"lexer":"markup","lines":0,"stack":"li","token":"</li>","types":"end"},
{"begin":510,"ender":528,"lexer":"markup","lines":1,"stack":"ul","token":"<li>","types":"start"},
{"begin":523,"ender":526,"lexer":"markup","lines":0,"stack":"li","token":"<strong>","types":"start"},
{"begin":524,"ender":526,"lexer":"markup","lines":0,"stack":"strong","token":"This is not the computer science definition of inheritance.","types":"content"},
{"begin":524,"ender":526,"lexer":"markup","lines":0,"stack":"strong","token":"</strong>","types":"end"},
{"begin":523,"ender":528,"lexer":"markup","lines":1,"stack":"li","token":"Inheritance is an English language word that has existed since Middle English when the language was trying to merge higher French vocabulary with the common Germanic vocabulary regularly in use. All uses of this word in programming subscribe to the proper dictionary definition. Perhaps this statement was meant to describe this use of inheritance as foreign to formalized concepts of object oriented programming, which assumes one believes this is the limit of computer science education.","types":"content"},
{"begin":523,"ender":528,"lexer":"markup","lines":0,"stack":"li","token":"</li>","types":"end"},
{"begin":510,"ender":529,"lexer":"markup","lines":1,"stack":"ul","token":"</ul>","types":"end"},
{"begin":503,"ender":530,"lexer":"markup","lines":1,"stack":"div","token":"</div>","types":"end"},
{"begin":126,"ender":538,"lexer":"markup","lines":1,"stack":"div","token":"<p>","types":"start"},
{"begin":531,"ender":538,"lexer":"markup","lines":0,"stack":"p","token":"If you believe anything in this article is in error or need of improvement please","types":"content"},
{"begin":531,"ender":536,"lexer":"markup","lines":1,"stack":"p","token":"<a>","types":"start"},
{"begin":533,"ender":536,"lexer":"markup","lines":1,"stack":"a","token":"href=\"https://github.com/austincheney/prettydiff/issues\"","types":"attribute"},
{"begin":533,"ender":536,"lexer":"markup","lines":0,"stack":"a","token":"open a bug","types":"content"},
{"begin":533,"ender":536,"lexer":"markup","lines":0,"stack":"a","token":"</a>","types":"end"},
{"begin":531,"ender":538,"lexer":"markup","lines":0,"stack":"p","token":". I have thick skin and appreciate a healthy dose of criticism.","types":"content"},
{"begin":531,"ender":538,"lexer":"markup","lines":0,"stack":"p","token":"</p>","types":"end"},
{"begin":126,"ender":539,"lexer":"markup","lines":1,"stack":"div","token":"</div>","types":"end"},
{"begin":77,"ender":543,"lexer":"markup","lines":1,"stack":"body","token":"<script>","types":"start"},
{"begin":540,"ender":543,"lexer":"markup","lines":1,"stack":"script","token":"src=\"../api/dom.js\"","types":"attribute"},
{"begin":540,"ender":543,"lexer":"markup","lines":1,"stack":"script","token":"type=\"application/javascript\"","types":"attribute"},
{"begin":540,"ender":543,"lexer":"markup","lines":0,"stack":"script","token":"</script>","types":"end"},
{"begin":77,"ender":544,"lexer":"markup","lines":1,"stack":"body","token":"</body>","types":"end"},
{"begin":4,"ender":545,"lexer":"markup","lines":1,"stack":"html","token":"</html>","types":"end"}
]