Why does this JavaScript/jQuery functionality work - undeclared variable

Question

If I try to declare s as a variable it errors out. It is acting like s isn't a variable and really doesn't like any changes to the syntax at all. I've actually written a decision tree webpage that relies on this concept a lot and I'm not sure why it works.

<!DOCTYPE html>
<html>
<head>
 <title>Class Tests</title>

 <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="UTF-8"/>
    <script src=" jQuery3.2.1.js"></script>
    <script src=" jQuery_UI.js"></script>
</head>

    <script>

        function selection(select){
            s = select;                  
        }

         $(document).ready(function(){
            $("button").click(function(){

           alert("boop " + s);

            });
        });

    </script>
    <body>
         <button onclick=selection('Genius')>Genius</button>
        <button onclick=selection('System')>Systems</button>
        <button onclick=selection('Personal')>Personal</button>
    </body>
</html>

If you declare a variable without `var` (or `const` or `let`), you're creating a "global variable". After running the `selection` function, in your console, try typing `window.s`; you'll find it's likely defined. If you were to put `var s;` as the first line of your `script`, it would also work. — Heretic Monkey, Jan 31 '19 at 20:49
Just FYI on this, since I noticed it after the formatting edit - script tags should be placed inside the `` or `` tags, not between (https://www.w3.org/TR/html4/interact/scripts.html#h-18.2.1). LPT - If you put the script at the end of the body (after the rest of the body HTML), you don't need to use `$(document).ready()`, since the HTML will be parsed before the script is run. — , Jan 31 '19 at 21:02
Thank you, thank you and... thank you. Let me ask you this... how can i best change this to get rid of this big dirty global variable? — Jason Ballweg, Jan 31 '19 at 21:45
Figured out a workaround. thank you again for your help $(document).ready(function(){ $("button").click(function(){ var clickButtonCl = this.className; // "this" is the element clicked if(clickButtonCl == "Genius"){ $("body").css("background-color", "pink"); }else if(clickButtonCl == "System"){ $("body").css("background-color", "orange"); }else if(clickButtonCl == "Personal"){ $("body").css("background-color", ""); } — Jason Ballweg, Jan 31 '19 at 22:09

score 0 · Answer 1 · answered Jan 31 '19 at 20:52

0

A variable is undeclared when it does not use the var keyword. It gets created on the global object (that is, the window), thus it operates in a different space as the declared variables.

Find out more on this link

answered Jan 31 '19 at 20:52

noiaverbale

1,550
13
27

Vadi · Answer 2 · 2019-01-31T21:49:11.910

Setting your s like this:

function selection(select){
    s = select; 
}

is similar (for variable scope) to:

var s;

function selection(select) {
    s = select; 
}

So s exists as a property of window, and available both inside of selection function and for alert("boop " + s);, because window is a global object. But if you declare and assign a value to variable with var inside a function:

function selection(select) {
    var s = select; 
}

s will have only a scope of function selection, and retrieving it here:

alert("boop " + s);

causes an error, because it doesn't exist here.

score 0 · Answer 3 · answered Jan 31 '19 at 21:03

Variables that are assigned without var keyword are called undeclared. These are created in the global scope. So your s variable is available in the click handler.

Now this only happens in non-strict mode, so if you put 'use strict' directive inside or above the selection function you'll get an error.

<!DOCTYPE html>
<html>
<head>
 <title>Class Tests</title>

 <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="UTF-8"/>
    <script src=" jQuery3.2.1.js"></script>
    <script src=" jQuery_UI.js"></script>
</head>

    <script>

        'use strict'

        function selection(select){
            s = select;                  
        }

         $(document).ready(function(){
            $("button").click(function(){

           alert("boop " + s);

            });
        });

    </script>
    <body>
         <button onclick=selection('Genius')>Genius</button>
        <button onclick=selection('System')>Systems</button>
        <button onclick=selection('Personal')>Personal</button>
    </body>
</html>

Why does this JavaScript/jQuery functionality work - undeclared variable

3 Answers3