Requesting help to understand Javascript variable scope

Question

I am afraid many people are going to find my question quite trivial, but I need to ask it.

(As requested by a lot of people, I have edited the code so that you can reproduce it.)

I have a JavaScript global variable defined within a script tag, as shown below:

<!DOCTYPE html>
<html lang="en">
<head> 
<!--JQUERY-->
<script type="text/javascript" src="js_test/jquery-1.8.2.min.js" ></script>

<script type="text/javascript">
    var store_categories = []; 
    function init_filtering() {
        store_categories.push('data');
        alert ("alert1: "+ store_categories);
    }
</script>


<script type="text/javascript">$( init_filtering );</script>

</head>  
<body>

<script type="text/javascript">
    alert ("alert2: "+ store_categories);
</script>

</body>
</html>

When the page is loaded, alert2 appears first with blank value and then alert1 appears showing 'data' as value.

Can anyone please tell me what is happening?

You don't have any values in that array. Where (when) do you add them? Worksforme, btw - show us your whole code or at least a demo that reproduces the issue — Bergi
– Bergi, Commented Nov 2, 2012 at 14:20
Hi asprin; thanks for your reply...will you please elaborate a little :-) — Shahriar N Khondokar
– Shahriar N Khondokar, Commented Nov 2, 2012 at 14:21
Your code, as show (removing the ellipsis to prevent syntax errors), works as expected. It produces two alerts, both saying "data". Produce a minimal example that doesn't work as you want it and the reason will probably be obvious. — Odalrick
– Odalrick, Commented Nov 2, 2012 at 14:48

Quentin · Accepted Answer · 2012-11-02 16:25:09Z

2

alert ("alert2: "+ store_categories); runs immediately.

$( init_filtering ); is an unhelpful (see self-documenting code) shortcut to make init_filtering run when the DOM is ready (i.e. after </html> has parsed).

answered Nov 2, 2012 at 16:25

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shahriar N Khondokar Over a year ago

Thanks for the explanation Quentin. To provide some additional information, in my actual code, alert2 is in a condition:if ($_SERVER['REQUEST_METHOD'] == 'POST') { but still alert2 is showing blank.So, can you please suggest a solution so that alert2 can show the value of the store_categories variable?

Quentin Over a year ago

@ShahriarNKhondokar — Do the same thing you do to the init_filtering function. Delay calling it until after init_filtering has run.

anthony sottile · Accepted Answer · 2012-11-02 16:25:30Z

1

$(function() {...}) executes equivalent to $.ready() whereas your inline script will execute as soon as it is parsed in the document.

This means that the function you specify is deferred until the page loads.

An empty array toString is an empty string which is why you see nothing in your first alert.

answered Nov 2, 2012 at 16:25

anthony sottile

72.1k19 gold badges199 silver badges248 bronze badges

Collectives™ on Stack Overflow

Requesting help to understand Javascript variable scope

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related