Difference between undefined and null in JavaScript

undefined is a global variable and at the same time a data type. The variable undefined is of type undefined .

A declared variable without value assumes implicitly the value undefined and its type is undefined

var variable1;
console.log('variable 1 es', variable1);
console.log('el tipo de variable1 es', typeof variable1);

Under certain conditions undefined can be overwritten and that has consequences (in strict mode and modern browsers, should not be able). However, although its rewriting is currently not possible, try it does not throw an error :

undefined = 5; // no se redefine en realidad, pero no tira error
console.log('undefined es', undefined);

null change is not a variable . It is a type of data. A primitive . A variable must be declared explicitly as null to indicate that does have value , but this is an empty value. And the type of that variable is not null but object . (This last is an anomaly that has always existed).

var variable2=null;
console.log('variable 2 es', variable2);
console.log('variable 2 es de tipo ',typeof variable2);

null not only can not be redeclared, but to try it throws an error:

null=5;

Another anomaly: two variables with value null are of type object and, without being the same variable, they are strictly equal (this is not true for js objects in general)

var variable1=null,
variable2=null;
console.log('variable1 es === a variable2?', variable1 === variable2);

If you compare undefined with null , since the data types are different, undefined is not strictly equal to null . But if you make a non-strict comparison, they are the same.

console.log('Undefined es === a null?', undefined === null);
console.log('Undefined es == a null?', undefined == null);

Finally, if you have a variable with a value, nothing prevents you from assigning it value undefined

var a=5;
a = undefined;
console.log(a);

But it is a convention that you use undefined to verify if a variable or property exists, and instead use null if you want to empty it.

As I found in the official documentation of ECMA it is undefined

  

undefined is a property of the global object, that is, a global scope variable. The initial value of undefined is the primitive undefined value. In modern browsers (JavaScript 1.8.5 / Firefox 4+), undefined is a non-configurable, non-writable property according to the ECMAScript 5 specification. Even if this is not the case, avoid overwriting it. A variable that has not been assigned a value is undefined. A method or statement also returns undefined if the variable being evaluated does not have a value assigned to it. A function returns undefined if a value has not been returned

I found this in ECMA

And about null

  

The null value is a literal (not a property of the global object such as undefined). In APIs, null is normally returned where an object is expected but it is not relevant. When comparing with null or undefined it is necessary to take into account the differences between the operators of equality (==) and identity (===) (with the first a type conversion is performed).

Explanation with examples:

The default value of a variable or attribute is undefined . In older browsers this value was established as an attribute of the Window class, and could be redefined. That could give many problems and therefore in many ancient literature recommended never make a direct comparison. Nowadays browsers do not allow to redefine it and a direct comparison always works:

var hola;

console.log(hola)

//comparación directa
if (hola===undefined) {
  console.log('Hola no tiene valor definido');
}

if (typeof hola === 'undefined') {
  console.log('Hola sigue sin valor definido');
}

if (undefined==null) {
  console.log('Cuidado al compararlo con null, == no los distingue')
}

if (!(undefined === null)) {
  console.log('En cambio === los distingue');
}

The value null is useful when you want to expressly distinguish between "value not defined" and "without value":

var resultado;



function test() {
  if (resultado === undefined) {
     console.log('No se ha definido aún');
  } else if (resultado===null) {
     console.log('se ha definido como null');
  }
}

setTimeout(()=> resultado=null)

test();


setTimeout(()=> test());

It also serves to detect undefined attributes. And, of course, it's a "false" value, which is useful when you want to call a function that may not be present:

var objeto= {
  a: 1,
  c: function () {
      console.log('hola');
     }
}

console.log('el atributo a es:' + objeto.a);
console.log('el atributo b es:' + objeto.b);

if (objeto.d) { // no existe, la condición no se cumple
   objeto.d();
}

if (objeto.c && typeof objeto.c === 'function') {
   objeto.c();
}