What's the difference between variable definition and declaration in JavaScript?

Question

Is this a variable definition or declaration? And why?

var x;

..and is the memory reserved for x after this st

Answer 1

> var x;
undefined
> x
undefined // now it looks like x is defined to the value undefined
> y
ReferenceError: y is not defined

Although it is usually said that Javascript is an interpreted language, but there is also a compilation step that happens very fast just before the interpreter runs. The job of this compilation step is to create scope chains, where variables are declared(no read/write operation here, just simple name-keeping) in their respective scopes. These variables will point to some memory location but value in it will be undefined until some execution is carried out by the interpreter.

> Compiler run:

When compiler sees var x;, it will simply book-keep this variable in its respective scope.

The next x; and y; are simply ignored in the compilation step as they are execution statements.

> Interpreter run:

When interpreter sees var x;, it will skip this as there is no read/write operation here.

Now when interpreter sees x;(execution statement), "x" will already be declared in the scope, and it will hold value "undefined", which is what you get on the console.

But when interpreter sees y; similarly, there has been no previous declaration or name-keeping for it in the compilation step, and thus we get the ReferenceError as expected.

Hope someone finds this comment useful.

Answer 2

In simple terms,

undefined means value to the variable is not defined.

not defined means the variable itself is not defined.

var x; //value is not defined. So, x //undefined

//y variable is not declared or defined. So, y // y is not defined

Answer 3

var x;

This is a variable declaration. In Js if you don't assign any value to variable in declaration. It will get undefined by default.

var x; // declaring x
console.log(x); // output: undefined

But if you have not even declared the variable in you try to access it. It says that the variable is not defined.

console.log(y);  // Output: ReferenceError: y is not defined

If you need access to objects between JS files, it's good practice to expose one object to the global namespace and declare fields and methods on that object.

File 1:

var myObject;
myObject.myField = "Field!";   

File 2:

myObject.prototype.myFunction = function () {
    return this.myField;
};

I have taken from a really good discussion on : Equivalent of C extern declaration in JavaScript

https://github.com/ganqqwerty/123-Essential-JavaScript-Interview-Questions

Answer 4

var x, y, z;

var x;

var h = 4;

i = 4;

all the above are global variables if placed at the top, (outside any functions)

Lets say that the javascript has a function start

function start() {
      x = 5*5;
}

the global variable x is now equal to 25

Where as if the var x; was not placed outside of any functions, that variable x would just be local to that function.

Answer 5

I will give you a long answer for better explanation.

When the javascript engine is not able to find a particular variable in memory, it will throw an error. To be more specific, when the javascript engine (Execution Context) is not able to "reference" a variable in memory, it will throw a ReferenceError. This is not exactly the same as a Declaration Error, at least in javascript.

There is a deference between a not defined error and the value undefined.

So doing

var a = undefined;

and

var a;

will both log the same result i.e. undefined. This is because, when you simply do a var a; the javascript engine allocates memory for the variable and automatically sets it's value to undefined, which is different from saying that a doesn't exist at all - in which case it will throw a ReferenceError.

Hoisting

console.log(a);    // undefined
var a = 'something';

will log undefined because, the javascript engine knows there's a variable declared somewhere in the code - which means to say that the javascript engine actually does something before it executes the code - one of the thing it does is hoists variables. To put it simply, the above code is the same as

var a;             // hoisted (declared and defined the value `undefined`)
console.log(a);    // undefined
a = 'something'    // update the defined value to `something`

So, yes, declaration and definition happen together in javascript (automatically - if you don't do it yourself) and the default defined value is undefined.

ES6

Just an additional note

const a;

will throw a SyntaxError where a initializer (definition) is necessary. const is the only time when you need to declare and define manually.

Answer 6

You declare JavaScript variables with the var keyword: var carname;

After the declaration, the variable is empty (it has no value).

To assign a value to the variable, use the equal sign var carname="Volvo";

In computer programs, variables are often declared without a value. The value can be something that has to be calculated, or something that will be provided later, like user input. Variable declared without a value will have the value undefined.

The variable carname will have the value undefined after the execution of the following statement: var carname;

var hoisting

In JavaScript, a variable can be declared after being used.

 bla = 2
 var bla;
  // ...

  // is implicitly understood as:

 var bla;
 bla = 2;

For that reason, it is recommended to always declare variable at the top of functions. Otherwise, it may lead to confusing cases

When declaring a variable without assigning a value to it, there still needs to be some memory available for it, otherwise you cannot make a reference to the variable later in the program. I don't think it's a noticeable amount of memory being used and won't make a difference.