why is this 'undefined'

Question

I'm new to JavaScript and I'm just trying to understand why 'z' comes back as undefined.

var z = functionWithParameters(4, 3);
function functionWithParameters(x, y) {
    if (typeof z !== 'undefined') {
        document.getElementById("functionWithParameters").innerHTML = z;
        console.log('inside function: ' + z);
        console.log('inside function: z is a ' + typeof z);
    }
    console.log('before return: z = ' + z);
    return x * y;    
}
console.log('outside function: z = ' + z);

    <p id = "functionWithParameters"></p>
    <script>
        functionWithParameters(4, 3);
    </script>

If I run the code as is, without commenting anything, it results with:

before return: z = undefined
outside function: z = 12
inside function: 12  
inside function: z is a number  
before return: z = 12

If I removed: if (typeof z !== 'undefined'), the code results with:

inside function: undefined
inside function: z is a undefined
before return: z = undefined
TypeError: document.getElementById(...) is null[Learn More] (from Firefox),

and the line: console.log('outside function: z = ' + z); does not execute. I though may this was because the function has a return statement, but commenting out the return did not change the results.

Any help with understanding this would be awesome. Thanks for any feedback.

My guess is var hoisting. Thus, `z` isn't given a value and is undefined. — Andrew Li, Apr 09 '17 at 15:37
logic makes no sense. How can a variable that is dependent on return of a function be defined inside that function? — charlietfl, Apr 09 '17 at 15:51
@charlietfl I don't know about this example but it makes sense in recurrence relation algorithm. — Linek, Apr 09 '17 at 16:00
This probably does not matter, but I wrote my function using this page as a reference: https://www.w3schools.com/js/js_functions.asp — , Apr 09 '17 at 16:11
Know about undefined https://codepen.io/grumpy/post/undefined-scope-in-javascript — AL-zami, Sep 19 '17 at 16:53

score 0 · Accepted Answer · edited May 23 '17 at 12:02

0

Read this Stack Overflow answer to the question on an order in which DOM is loaded / executed.

You wrote:

If I removed: if (typeof z !== 'undefined'), the code results with [..] and the line: console.log('outside function: z = ' + z); does not execute. I though may this was because the function has a return statement, but commenting out the return did not change the results.

That's because you execute functionWithParameters function before p tag is loaded which results in document.getElementById("functionWithParameters") throwing an error simply because the p tag you are trying to find doesn't exist at the time.

edited May 23 '17 at 12:02

Community

1
1

answered Apr 09 '17 at 15:56

Linek

1,353
10
20

1

@charlietfl It's not the function execution placed after `p` tag that is throwing this error. It's the script he posted after it which must have been executed before `p` tag was loaded. – Linek Apr 09 '17 at 15:59
Thanks, this was helpful. It makes sense now, and I think I should have realized what was happening. – Apr 09 '17 at 16:26
Hi everyone, thanks for all the feedback. It was all useful but, for me, this answer and the link LineK provided was most helpful. – Apr 09 '17 at 16:33
I've booked marked this link in case I need to reference it again. – Apr 09 '17 at 16:34

score 0 · Answer 2 · answered Apr 09 '17 at 15:58

TypeError: document.getElementById(...) is null[Learn More] (from Firefox)

The function is throwing an exception, so z can never get a value. The reason for this exception is that you're trying to access an element before the document has finished loading.

A simple way of fixing this, is to load put the scripts at the bottom of the html file (before </body>).

JackChouMine · Answer 3 · 2017-04-09T16:21:54.583

You don't understand function execution flow.

        var z = functionWithParameters(4, 3);
        //call functionwithParamarters,and run into function body, 
        //at this time the value of z is undefined, 
        //the if statement block  is not executed,then output z is undefined. 
        //after call functionWithParameters ,z is 12
        function functionWithParameters(x, y) {
            if (typeof z !== "undefined") {
                document.getElementById("functionWithParameters").innerHTML = z;
                console.log('inside function: ' + z);
                console.log('inside function: z is a ' + typeof z);
            }
            console.log('before return: z = ' + z);
            return x * y;
        }
        console.log('outside function: z = ' + z);
        //at this line z is 12
        functionWithParameters(10, 10);
        //z still is 12 , calling functionWithParameters dont change value of z
        //and  if statement block is executed.

score -1 · Answer 4 · edited Apr 09 '17 at 17:34

-1

You set variable z's value as functionWithParameters's return value. So, before function functionWithParameters returns a value, the variable z's value is undefined. This is because it didn't get any value before the function functionWithParameters returns a value.

The reason the console.log doesn't work is because your script has an active error and your script has to stop.

edited Apr 09 '17 at 17:34

Andrew Li

55,805
14
125
143

answered Apr 09 '17 at 15:51

ENvironmentSet

86
8

This is absolutely the correct answer. Z = the return value of function "functionWithParemters" therefore z Is undefined until functionWithParemters returns a value. – S. Walker Apr 09 '17 at 16:05
So, z is undefined until the return statement executes. And inside the function, z shows as undefined for the same reason. I was also loading the javascript in the HTML head tag. Should I load it in the body instead? – Apr 09 '17 at 16:10
@Tony That's what I meant in my answer, your code executes before `p` tag is loaded so it doesn't exist at first function run, you will understand it once you read through the answer I linked in my answer. – Linek Apr 09 '17 at 16:14
The script needs to under the p tag that you want to use. So yes, put the script in the body.
– S. Walker Apr 09 '17 at 16:18
wow.. i'm new one in this community. And i think this commumity is very cool – ENvironmentSet Apr 09 '17 at 16:20

why is this 'undefined'

4 Answers4