If a var in JavaScript is defined twice, which definition should the interpreter take?

Question

I'm new to JavaScript and am trying to understand the concepts of hoisting and scope.

Case 1

var name;

function logName(num) {
  console.log(name, num);
}

logName(1);
name = "Auro";
logName(2);

and I have the following output in the console

Auro 1
Auro 2

If I understand hoisting correctly, JS engine hoists the declaration of a variable first and then automatically assigns a value undefined to it. Only when it encounters the assignment (=) operator, does it actually assign the intended value to it.

If my understanding above is correct, then the first time the logName function was called, the variable name should have printed undefined, but it is printing the value.

Case 2

var name;

function logName(num) {
  console.log(name, num);
}

logName(1);
name = "Auro";
logName(2);
name = "Baner";

Output in the console:

Baner 1
Auro 2

This confuses me even more. Here the first call to the function logName picked the later assignment to the variable and printed Baner, however, the second call picked the previous assignment, that is Auro.

What is going on here? What am I missing?

In *neither* of those examples do I get what you claim to get. — crashmstr, May 29 '19 at 17:22
Are you testing these in the console multiple times? If you are, I'd guess that `name` is still around from the last time you ran it — loganfsmyth, May 29 '19 at 17:23
Also, https://stackoverflow.com/questions/20945498/var-name-produces-strange-result-in-javascript. — melpomene, May 29 '19 at 17:23
Problem here is a bad variable name! https://developer.mozilla.org/en-US/docs/Web/API/Window/name — epascarello, May 29 '19 at 17:26
Issue could also be addressed with an IIFE to reduce the scope. — Taplar, May 29 '19 at 17:27
@CodeManiac True. First log doesn't output, only re-run gives that. Thanks for pointing it out — Auro, May 29 '19 at 17:35
@loganfsmyth Yep, that's what I was doing without realizing. — Auro, May 29 '19 at 17:35

score 5 · Accepted Answer · answered May 29 '19 at 17:25

5

In the global scope, name refers to window.name, that is the name property of the window - which in the examples you gave are sif1 and sif2 (possibly "Snippet IFrame 1/2").

Since window.name already exists, var name; in the global scope does nothing. The variable is already defined.

Until you overwrite it - and note that again you are setting the global window.name property. And, depending on browser settings, this can persist across reloads of the page (since you're naming the entire window). This explains why you see the value "stick".

answered May 29 '19 at 17:25

Niet the Dark Absol

320,036
81
464
592

Nice call out on the iframe names. When I updated the question to make them snippets, that threw me for a loop, ^_^ – Taplar May 29 '19 at 17:26
If you press blue 'Run...' button twice then browser will open new tab in your compuer too - or it works like that only in my local browser? – Kamil Kiełczewski May 29 '19 at 17:27
1

@KamilKiełczewski That would be because, having renamed `window.name`, the "Run" button can no longer find a frame with the desired name and so a new window/tab is opened - with that name. – Niet the Dark Absol May 29 '19 at 17:28

Kamil Kiełczewski · Answer 2 · 2019-05-29T17:34:26.660

0

As addition to other answers I can say, that just not use var but use ES6 let or const instead and 'surprising behaviour' will disappear.

let name;

function logName(num) {
  console.log(name, num);
}

logName(1);
name = "Auro";
logName(2);
name = "Baner";

edited May 29 '19 at 17:34

answered May 29 '19 at 17:22

Kamil Kiełczewski

85,173
29
368
345

score 0 · Answer 3 · answered May 29 '19 at 17:28

No none of the specified output matches, as initially you have value of name equal to window.name, so initially the value of name variable will be equal to winow.name and once overwrite it you get the new value

let's understand how this all works

You can understand as such there are two phase of code execution

Creation phase
Execution phase

Creation phase:- During creation phase function is hoisted at top as it is, while the variable are hoisted but there is no value assigned to it ( or you can say it's value is undefined )

Execution phase:- During execution context it assigns value to variable when it reaches line where assignment is happening

var name;

function logName(num) {
  console.log(name, num);
}

logName(1);
name = "Auro";
logName(2);
name = "Baner";

If a var in JavaScript is defined twice, which definition should the interpreter take?

3 Answers3