For undeclared variables, typeof foo will return the string "undefined", whereas the identity check foo === undefined would trigger the error "foo is not defined".

For local variables (which you know are declared somewhere), no such error would occur, hence the identity check.

undefined means a variable has been declared but has not yet been assigned a value :

var testVar;
console.log(testVar); //shows undefined
console.log(typeof testVar); //shows undefined

null is an assignment value. It can be assigned to a variable as a representation of no value :

var testVar = null;
console.log(testVar); //shows null
console.log(typeof testVar); //shows object

From the preceding examples, it is clear that undefined and null are two distinct types: undefined is a type itself (undefined) while null is an object.

Proof :

console.log(null === undefined) // false (not the same type)
console.log(null == undefined) // true (but the "same value")
console.log(null === null) // true (both type and value are the same)

and

null = 'value' // Uncaught SyntaxError: invalid assignment left-hand side
undefined = 'value' // 'value'

An undeclared variable (that is, one that doesn't exist) does not have a type - and so its type is undefined. I believe that the generally accepted way to test if something is undefined is

typeof var === 'undefined'

rather than

var === undefined

since if the variable does not exist, you cannot access it. The latter case might be more useful if you are sure the variable should exist, since the difference between the two is that an undeclared variable will return false in the first case but cause an error in the second case.

Make sure that you use the triple-equals operator though if you're using the second variant; the (more usual) double-equals operator performs type coercion, so null == undefined is true while null === undefined is false. Sometimes you might want the first behaviour, though often you'll want the second, especially if you're testing against undefined, so it's important to recognise the difference. (This is another benefit of the first case since it's not possible to make this subtle error).

Yes, variables can have a value of undefined and you can explicitly assign values to them. Assigning undefined to a variable though is probably confusing, since it's a bit of a paradox (you've defined the variable as undefined) and it's not possible to distinguish that variable from either variables that don't exist or uninitialised variables. Use null if you want to signify that a variable has no value currently, or if you want to "undeclare" the variable altogether, use delete {varname}. Assigning undefined to a variable does not remove that variable's declaration; and it will still appear in the list of its owning object's properties if you iterate over them, so I can't think of any situation this would benefit you.

Edit: In response to the comment, when comparing the values with === (or ==), the variable must be deferenced to obtain its current value in order to do the comparison. Since the variable doesn't exist, this dereferencing fails (no real surprises so far). While you might expect the typeof operator to work in a similar way (get the current value, see what its type is) it specifically works with undefined variables. The "short version" (as used by the Mozilla reference ) is simply that "The typeof operator returns a string indicating the type of the unevaluated operand."

The long version, extracted from the ECMAScript spec, is that there's a special case for undefined variables:

11.4.3 typeof UnaryExpression is evaluated as follows:

1. Evaluate UnaryExpression (as per 10.1.4 this returns "a value of type Reference whose base object is null and whose property name is the identifier" if the variable is undeclared).
2. If Type(Result(1)) is not Reference, go to step 4. (It is a Reference)
3. If GetBase(Result(1)) is null, return "undefined". (This is the special case matching undefined variables)

As for your comment to the first question, "how can you classify what does not exist" - it's easy! Simply divide all concepts into things that do exist (e.g. squirrel, rock) and those that don't exist (unicorns, warp drives). That's what undefined means; regardless of its semantics in English, its Javascript meaning is that the variable hasn't been declared or populated yet, and so while the concept of "a variable called foo" is valid, there exists no variable with that name holding a real value.

The problem is that undefined compared to null using == gives true. The common check for undefined is therefore done like this:

typeof x == "undefined"

this ensures the type of the variable is really undefined.

There are two things you should understand about undefined:

• the type undefined that can have only one value
• the variable undefined

To explain:

• There are so many values of type number (10, 10.01, 1e1). But there can be only one value of type undefined, and that value is stored in the variable undefined.

• That value has no literal representation either. For example, number values 1, 100, 1e-1 are all literals of type number, but the value stored in the variable undefined has no literal form.

• undefined is a variable, just a normal variable, that JavaScript declares and assigns it the value of type undefined in the global scope. So you can do all the following...

  typeof undefined;                       // "undefined"
  
  undefined = 100;
  typeof undefined;                       // "number"
  
  undefined = void 0;
  typeof undefined;                       // "undefined"
  
  window.undefined === undefined;         // true
  window.undefined === void 0;            // true
  

• if you don't want to use the variable undefined, you can generate the value of type undefined by the expression void 0 -- whose sole purpose is to return a value of type undefined.

...can anyone please explain to me why this thing has been inserted into JavaScript...

JavaScript has had a history of bad design - not because of the people who designed it but because no one could foresee that this little scripting capability they were adding to Netscape would one day underpin the business of billion dollar companies.

...we have null value...

Although null can do things undefined does, it is more or less related to objects rather than scalars. Indeed, JavaScript considers null itself an object -- typeof null returns "object".