I am try to under stand this javascript code but tired of it?

Question

    <!DOCTYPE html>
    <html>
    <body onload="myFunction()">
    <script>
    var go="globle";
    function myFunction() {
    var go="local";
    document.write(go);
         }
    document.write(go);
    </script>

    </body>
    </html>

when I run this code it will print local.But when I run the following code:

    <!DOCTYPE html>
    <html>
    <body onload="myFunction()">
    <script>
    var go="globle";
    function myFunction() {
    var go="local";
        }
    document.write(go);
    </script>

    </body>
    </html>

This code print globle. Why not the first code printing both local and globle. And also when I run first code my html body is also not executed.

score 1 · Answer 1 · answered Nov 26 '16 at 18:12

1

You are using document.write, which deletes everything when called.

The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.

Change it console.log(go) and you will see the expected output.

answered Nov 26 '16 at 18:12

fafl

7,222
3
27
50

This isn't the issue here, document.write is never called for go="local" in the second example. – Gerrit0 Nov 26 '16 at 18:16
@Gerrit0 `document.write()` is an issue in the first example because the output should be `globallocal` and instead the OP is only getting `local` because the `global` output is being overwritten by the `local` output. – Scott Marcus Nov 26 '16 at 19:00
You are correct, sorry, apparently I misread the question and mistook it for a scope problem. – Gerrit0 Nov 26 '16 at 19:06
thanks @fafl for the help – Rana Ehtasham Ali Nov 27 '16 at 16:37
*which deletes everything when called* Not necessarily true. `document.write()` will replace the existing document when that document has already completed being written to the client. If the document is still being built, `document.write()` will append to it. – Scott Marcus Nov 27 '16 at 16:53

Scott Marcus · Answer 2 · 2016-11-26T19:14:46.450

Your first example is flawed because of the use of document.write. When you use that AFTER a document has been built, it wipes out the earlier document and writes a new one. The results you were seeing from the first example were distorted by this.

Really, your examples are just demonstrating Global vs. Function scope in JavaScript. Anything declared with var in a function has local scope to that function and will be removed from memory when the function it is declared within terminates or is no longer held in memory.

Take a look at the comments I've added to your slightly modified code:

// We are going to replace all the document.write() calls with
// console.log() calls because you are experiencing information being
// written to the document and then the document is being overwritten 
// with new information.

// The result will be "global, local" because the code in "myFunction" is
// not going to run until the window is loaded. The last line of code in 
// this example will actually run first.
window.onload = myFunction;

var go="global";  // Just declare a Global variable (available everywhere)

function myFunction() {
    // Declare a local variable, available only in the function
    // Since this variable uses the same name as the global one
    // when this function is executing, this variable will override
    // (hide) the other one.
    var go= "local";  
  
   console.log(go);  // The local one is used
}

// Now, we are outside the function and the local version of "go" is 
// out of scope. It's gone and can't be accessed. But, the global version
// is still available
console.log(go);  // The global one is used

Here's your second example:

// Again, we're replacing document.write with console.log

// Even though we're calling the "myFunction" function when the
// window is loaded, that function only sets a local variable
// that will be destroyed when the function ends. It never does
// anything with that variable.
window.onload = myFunction;

var go="global";

function myFunction() {
    // This will be destroyed as soon as the function is done
    // which is the line right after it gets declared!
    var go="local";  
}

// Again, the scope of this line of code is global and so the global value is used
console.log(go);

thankx @ScottMarcus I got hte point – Rana Ehtasham Ali Nov 27 '16 at 16:36 — Rana Ehtasham Ali, Nov 27 '16 at 16:36

I am try to under stand this javascript code but tired of it?

2 Answers2