Why does changing a variable name alter behavior of prompt()

Question

An extremely simple example of using prompt goes as follows:

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <script>
        var name = prompt("Please enter your name");
        if (name != null) {
            console.log('problem!!!');
        }
    </script>
</body>
</html>

With this code, whether you click OK, click Cancel, or close the prompt box by clicking the cross -- in all cases you see problem!!! in Chrome dev tools. But if you change name to something else...

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <script>
        var randomName = prompt("Please enter your name");
        if (randomName != null) {
            console.log('problem!!!');
        }
    </script>
</body>
</html>

...then problem!!! ONLY shows up if you click OK. How is that possible? Why does changing variable name change behavior of prompt function?

you should test with `true/false` or empty string `""` – Ashok Shah Dec 27 '16 at 03:50 — Ashok Shah, Dec 27 '16 at 03:50

Klinger · Answer 1 · 2016-12-27T03:59:39.430

3

You might be running in a "better to avoid" identifier problem: See here

On Chrome and Edge (14) attempting to set name as the result of prompt (after esc, cancel, x) results in name being set to the string "null", instead of null. IE 11 sets name to null.

But if you actually press OK then name is set to whatever you typed.

Other variables names actually are set to null as the result of esc,cancel,x.

edited Dec 27 '16 at 03:59

answered Dec 27 '16 at 03:50

Klinger

4,900
1
30
35

score 1 · Answer 2 · answered Dec 27 '16 at 03:53

The reason is that "name" is a global hoisted from the global window. The default value is "", which is not null. The first form has name defined even if the user hits cancel (it simply won't reset it). The second form uses a variable that is not already defined, so it will get the value null if canceled.

score 1 · Accepted Answer · edited May 23 '17 at 12:24

name is global variable on window and var name is not reset or redeclare it. It's still refer to window.name.

And you cannot set window.name = null. DOM will make it "null" instead because it's have to be string as in the DOM spec.

var name;
console.log( typeof name ); //<- you got "string here"
name = null;
console.log( typeof name ); //<- you still got "string here"
console.log( name );        //<- you got string "null" not null

to avoid this problem ES6 introduce let instead.

let name;
console.log( typeof name ); //<- you got "undefined"
name = null;
console.log( typeof name ); //<- you got "object"
console.log( name );        //<- you got null as expected.

see this for more information What's the difference between using "let" and "var" to declare a variable?

score 0 · Answer 4 · answered Dec 27 '16 at 04:08

Here you are creating name variable in global scope but there is already name property present in window scope which is the default scope. You can check that property using

Object.getOwnPropertyDescriptor(window, 'name')

Here you can see that name has its own getter and setters thus even if you assign any value to it, its setter will convert it to string. Thus

name = 34; // will save '34' to it not Integer

Where as in second case randomNumber variable is not defined in global or window scope thus that works as expected.

In your case name was being set to null but was getting saved as string i.e.

name; // 'null'

Thus your if was not getting executed properly.

For more read on name property of window read here.

Why does changing a variable name alter behavior of prompt()

4 Answers4