Explicación con ejemplos:

El valor por defecto de una variable o atributo es `undefined`. En navegadores antiguos este valor estaba establacido como un atributo de la clase Window, y podía ser redefinido. Eso podía dar muchos problemas y por ello en mucha literatura antigua recomendaban nunca hacer una comparación directa. Hoy día los navegadores no permiten redefinirlo y una comparación directa funciona siempre:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->


    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');
    }

<!-- end snippet -->

El valor `null` es útil cuando quieres expresamente distinguir entre "valor no definido" y "sin valor":

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    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());


<!-- end snippet -->


También sirve para detectar atributos no definidos. Y, por supuesto, es un valor "falso", lo cual es útil cuando quieres llamar a una función que quizá no está presente:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    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();
    }

<!-- end snippet -->