<commit_before><?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
<html xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
    <head>
        <title>Pretty Diff - Guide, Guide, Using jsscope to understand scope,
            inheritance, and scope chains in JavaScript</title>
        <link href="../diffview.css" media="all" rel="stylesheet" type="text/css"/>
        <link href="guide.css" media="all" rel="stylesheet" type="text/css"/>
        <link href='http://prettydiff.com/documentation.xhtml' rel='canonical' type='application/xhtml+xml'/>
        <link href="http://prettydiff.com/images/favicon.ico" rel="icon" type="image/x-icon"/>
        <link href="http://prettydiff.com/labels.rdf" rel="meta" title="ICRA labels" type="application/rdf+xml"/>
        <meta content="width=device-width, initial-scale=1" name="viewport"/>
        <meta content="index, follow" name="robots"/>
        <meta content="Pretty Diff - Guide, Using jsscope to understand scope, inheritance, and scope chains in JavaScript" name="DC.title"/>
        <meta content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://prettydiff.com" 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 "http://www.prettydiff.com" 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))' http-equiv="pics-Label"/>
        <meta content="<NAME>" name="author"/>
        <meta content="Pretty Diff tool can minify, beautify (pretty-print), or diff between minified and beautified code. This tool can even beautify and minify HTML." name="description"/>
        <meta content="Global" name="distribution"/>
        <meta content="en" http-equiv="Content-Language"/>
        <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type"/>
        <meta content="blendTrans(Duration=0)" http-equiv="Page-Enter"/>
        <meta content="blendTrans(Duration=0)" http-equiv="Page-Exit"/>
        <meta content="text/css" http-equiv="content-style-type"/>
        <meta content="application/javascript" http-equiv="content-script-type"/>
        <meta content="qL8AV9yjL2-ZFGV9ey6wU3t7pTZdpD4lIetUSiNen7E" name="google-site-verification"/>
    </head>
    <body class="white" id="doc">
        <h1>
            <svg height="2000.000000pt"
                preserveAspectRatio="xMidYMid meet"
                version="1.0"
                viewBox="0 0 2000.000000 2000.000000"
                width="2000.000000pt"
                xmlns="http://www.w3.org/2000/svg">
                <g fill="#999"
                    stroke="none"
                    transform="translate(0.000000,2000.000000) scale(0.100000,-0.100000)">
                    <path 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"/></g>
            </svg>
            <a href="http://prettydiff.com/">Pretty Diff</a>
            - Guide</h1>
        <p id="dcolorScheme"><label class="label" for="colorScheme">Color
            Scheme</label>
            <select id="colorScheme"><option>Default</option>
                <option>Canvas</option>
                <option>Shadow</option>
                <option selected="selected">White</option></select>
        </p>
        <h2>Using jsscope to understand scope, inheritance, and scope chains in
            JavaScript</h2>
        <div>
            <div><h3>Introduction</h3>
                <p>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.</p>
                <p>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
                    <em>bind</em>,
                    <em>call</em>,
                    <em>apply</em>, or
                    <em>Object.create</em>. I only use
                    <em>this</em>
                    in callbacks and
                    <em>new</em>
                    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.</p>
            </div>
            <div><h3>Key Points</h3>
                <ol>
                    <li>Functions provide scope.</li>
                    <li>Closure is crossing scope boundaries.</li>
                    <li>Variables are resolved through a succession of scope, scope
                        chain.</li>
                    <li>Where in the scope chain variables are declared structions a
                        functional application.</li>
                    <li>The
                        <a href="../prettydiff.js">Pretty Diff</a>
                        application is an example of functional programming and
                        decomposition.</li>
                    <li>Leaky functions allow for manually controlled side effects.</li>
                    <li>ECMAScript 6 will introduce block scope with the
                        <em>let</em>
                        keyword.</li>
                </ol>
            </div>
            <div><h3>JSScope</h3>
                <p>Each of the following code samples is prepared using the
                    <em>jsscope</em>
                    feature of Pretty Diff's
                    <a href="../lib/jspretty.js">jspretty.js</a>
                    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.</p>
                <p>The jsscope feature can be accessed in code by providing a value of
                    <em>true</em>
                    to the Pretty Diff option
                    <strong>jsscope</strong>
                    or by selecting the option
                    <em>
                        Scope analysis output</em>
                    from the webtool. It also possible to link directly a jsscope operation
                        by providing an address parameter of
                    <em>jsscope</em><commit_msg>updating lanague of closure guide<commit_after><?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
<html xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
    <head>
        <title>Pretty Diff - Guide, Guide, Using jsscope to understand scope,
            inheritance, and scope chains in JavaScript</title>
        <link href="../diffview.css" media="all" rel="stylesheet" type="text/css"/>
        <link href="guide.css" media="all" rel="stylesheet" type="text/css"/>
        <link href='http://prettydiff.com/documentation.xhtml' rel='canonical' type='application/xhtml+xml'/>
        <link href="http://prettydiff.com/images/favicon.ico" rel="icon" type="image/x-icon"/>
        <link href="http://prettydiff.com/labels.rdf" rel="meta" title="ICRA labels" type="application/rdf+xml"/>
        <meta content="width=device-width, initial-scale=1" name="viewport"/>
        <meta content="index, follow" name="robots"/>
        <meta content="Pretty Diff - Guide, Using jsscope to understand scope, inheritance, and scope chains in JavaScript" name="DC.title"/>
        <meta content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://prettydiff.com" 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 "http://www.prettydiff.com" 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))' http-equiv="pics-Label"/>
        <meta content="<NAME>" name="author"/>
        <meta content="Pretty Diff tool can minify, beautify (pretty-print), or diff between minified and beautified code. This tool can even beautify and minify HTML." name="description"/>
        <meta content="Global" name="distribution"/>
        <meta content="en" http-equiv="Content-Language"/>
        <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type"/>
        <meta content="blendTrans(Duration=0)" http-equiv="Page-Enter"/>
        <meta content="blendTrans(Duration=0)" http-equiv="Page-Exit"/>
        <meta content="text/css" http-equiv="content-style-type"/>
        <meta content="application/javascript" http-equiv="content-script-type"/>
        <meta content="qL8AV9yjL2-ZFGV9ey6wU3t7pTZdpD4lIetUSiNen7E" name="google-site-verification"/>
    </head>
    <body class="white" id="doc">
        <h1>
            <svg height="2000.000000pt"
                preserveAspectRatio="xMidYMid meet"
                version="1.0"
                viewBox="0 0 2000.000000 2000.000000"
                width="2000.000000pt"
                xmlns="http://www.w3.org/2000/svg">
                <g fill="#999"
                    stroke="none"
                    transform="translate(0.000000,2000.000000) scale(0.100000,-0.100000)">
                    <path 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"/></g>
            </svg>
            <a href="http://prettydiff.com/">Pretty Diff</a>
            - Guide</h1>
        <p id="dcolorScheme"><label class="label" for="colorScheme">Color
            Scheme</label>
            <select id="colorScheme"><option>Default</option>
                <option>Canvas</option>
                <option>Shadow</option>
                <option selected="selected">White</option></select>
        </p>
        <h2>Using jsscope to understand scope, inheritance, and scope chains in
            JavaScript</h2>
        <div>
            <div><h3>Introduction</h3>
                <p>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.</p>
                <p>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
                    <em>bind</em>,
                    <em>call</em>,
                    <em>apply</em>, or
                    <em>Object.create</em>. I only use
                    <em>this</em>
                    in callbacks and
                    <em>new</em>
                    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.</p>
            </div>
            <div><h3>Key Points</h3>
                <ol>
                    <li>Functions provide scope.</li>
                    <li>Closure is crossing scope boundaries.</li>
                    <li>Variables are resolved through a succession of scope, scope
                        chain.</li>
                    <li>Where in the scope chain variables are declared structures a
                        functional application.</li>
                    <li>The
                        <a href="../prettydiff.js">Pretty Diff</a>
                        application is an example of functional programming and
                        decomposition.</li>
                    <li>Leaky functions allow for manually controlled side effects.</li>
                    <li>ECMAScript 6 will introduce block scope with the
                        <em>let</em>
                        keyword.</li>
                </ol>
            </div>
            <div><h3>JSScope</h3>
                <p>Each of the following code samples is prepared using the
                    <em>jsscope</em>
                    feature of Pretty Diff's
                    <a href="../lib/jspretty.js">jspretty.js</a>
                    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.</p>
                <p>The jsscope feature can be accessed in code by providing a value of
                    <em>true</em>
                    to the Pretty Diff option
                    <strong>jsscope</strong>
                    or by selecting the option
                    <em>
                        Scope analysis output</em>
                    from the webtool. It also possible to link directly a jsscope operation
                        by providing an address parameter of
                    <em>jsscope</em>
{'fraction_non_alphanumeric': 0.10723447922011288, 'fraction_numerical': 0.10069266290405336, 'mean_word_length': 1.8050008994423457, 'pattern_counts': {'":': 0, '<': 235, '<?xml version=': 2, '>': 235, 'https://': 0, 'lorem ipsum': 0, 'www.': 10, 'xml': 14}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2247525', 'n_tokens_mistral': 5517, 'n_tokens_neox': 4196, 'n_words': 1555}