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

Viewed 17558

Is this a variable definition or declaration? And why?

var x;

..and is the memory reserved for x after this statement?

EDIT: In C extern int x; is a declaration, int x = 5; is a definition. What's the analog in JS? Wikipedia says a declaration allocates memory and the definition assigns a value to this allocated memory.

SECOND EDIT: I think the explanation of @Deryck sounds great, but there's some output that disagrees with his explanation:

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

If the ReferenceError output would say y is not declared it would make sense. But often I read that JS has two non-values: null and undefined. So var x would be a definition with the value undefined.

9 Answers

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.

> 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.

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

Various trivia regarding the difference between undefined and null completely aside, the short answer is: there is no equivalence in Javascript. There are no bare "forward declarations". Javascript variable declarations are definitions. Variables that have been defined but not explicitly initialized will contain the value 'undefined'. There is no "external linkage".

If you refer to an identifier that is not in any accessible scope (perhaps because it doesn't exist the first place), you will get your "ReferenceError: y is not defined". This has nothing to do with variable value or storage.

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

Related