Why does the following code not cause an error in JavaScript?

Question

in js we must first declare a variable then we can use it but when I wrote these two lines of code, it works Properly!!

name = 'ali';
console.log(name);

Because on default the variable is declared as a var if he doesn't find it. — Jens Ingels, Aug 11 '20 at 14:32
The reason is because all the undeclared variables are automatically declared with "var". Though doing such thing is not considered a good practice. — Pranav Rustagi, Aug 11 '20 at 14:33
Historically, undeclared variables in JavaScript become global variables (properties of the `window` object in the browser) regardless of the scope they are declared in. If you want the compiler to alert you if you make this mistake, `strict mode` includes that -- you just add a `"use strict";` statement at the top of your outermost function, or at the top of your entire script. (See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) — Cat, Aug 11 '20 at 14:45
*in js we must first declare a variable then we can use it* <-- Not true. If you assign, but don't declare a variable it becomes a globally declared variable. However, in this case, when `name` isn't resolved along the scope chain and the Global object is reached, it will find that `name` does exist as a property of the `window` object and simply set `ali` as the value of that pre-existing object property. — Scott Marcus, Aug 11 '20 at 15:01

score 1 · Answer 1 · answered Aug 11 '20 at 14:37

1

It's recommended that you declare variables, but it's not needed (unless you are in strict mode)

From a technical point of view, with the example you gave is also not a variable declaration per se, but you're setting a property of the global object.

answered Aug 11 '20 at 14:37

Lennart Steinke

584
5
11

score 0 · Answer 2 · answered Aug 11 '20 at 14:38

0

There's a temptation to think that all of the code you see in a JavaScript program is interpreted line-by-line, top-down in order, as the program executes. While that is substantially true, there's one part of that assumption that can lead to incorrect thinking about your program.

When you see name = 'ali';, you probably think of that as one statement. But JavaScript actually thinks of it as two statements: var name; and name = ali;. The first statement, the declaration, is processed during the compilation phase. The second statement, the assignment, is left in place for the execution phase.

So your snippet then should be thought of as being handled like this:

var name;
name = 'ali';
console.log(name);

So, one way of thinking, sort of metaphorically, about this process, is that variable and function declarations are "moved" from where they appear in the flow of the code to the top of the code. This gives rise to the name "Hoisting".

answered Aug 11 '20 at 14:38

Navitas28

745
4
13

*But JavaScript actually thinks of it as two statements: var name; and name = ali;* <-- That's not really true in this case. When `name = 'ali'` is encountered the system attempts to locate a `name` variable along the scope chain. In this case, it will not find such a variable, so it see's the assignment as a property assignment of the Global object (`window`). And, `window` actually does have a `name` property, so `ali` becomes the value of that. – Scott Marcus Aug 11 '20 at 15:05
Even if the variable is not named `name` and `some_random_name` which is not present in global object still js engine won't through undefined because js compilation is divided into two phases `compilation phase` and `execution phase`, in compilation phase it will take all the variables and sort of metaphorically declare them – Navitas28 Aug 11 '20 at 15:10
Yes, but that is not what is happening in this particular case. `name = 'ali'` is not being turned into `var name` in this case. See my answer. – Scott Marcus Aug 11 '20 at 15:25

Scott Marcus · Answer 3 · 2020-08-11T15:31:08.837

In this particular case, because you are testing this concept with an identifier named name, the actual answer is different than the others posted here, which would be correct if the identifier name was not a property of the Global window object, but in your case name is a property of window.

So, what is happening here is that when you assign a value to name, the system begins searching the scope chain for an identifier named name and if it can't find it along the scope chain, it checks the Global scope, which in a browser is where window is. Since the window object does have a name property, all that happens in your example is that you are setting a value for it (it defaults to an empty string). And, then you log that property.

If your question used a different identifier name - - one that was not the name of a Global object property, then because it has no declaration keyword, it would be effectively act like a Global variable because again, it would try to find that name along the scope chain, not find it and instead find the Global object (window). Then, it would create a new property on that object and you'd have a new Global property to use.

A couple of examples:

// Test to see if there is a Global name property:
console.log(!!window.name);    // true

// Test to see if there is a Global Scott property:
console.log(!!window.Scott);   // false

// Create a Global Scott property
Scott = "Marcus";

// Test to see if there is a Global Scott property now:
console.log(!!window.Scott, window.Scott);   // true "Marcus"

Why does the following code not cause an error in JavaScript?

3 Answers3