The difference between null and undefined in JavaScript

In JavaScript development, I was asked: What is the difference between null and undefined? It’s hard to answer for a while, especially undefined, because it involves the implementation principle of undefined.

As we all know: null == undefined

But: null !== undefined

So what is the difference between the two?

null

This is an object, but it is empty. Because it is an object, typeof null returns 'object' .

null is a JavaScript reserved keyword.

null will automatically convert to 0 when participating in numerical operations. Therefore, the following expression will get the correct value after calculation:

Expression: 123 + null　Result value: 123

Expression: 123 * null　　Result value :0

undefined

undefined is a special property of the global object (window), and its value is undefined. But typeof undefined returns 'undefined' .

Although undefined has a special meaning, it is indeed a property, and it is a property of the global object (window). Please look at the following code:

alert('undefined' in window);   //输出：true
var anObj = {};
alert('undefined' in anObj);    //输出：false

As you can see, undefined is a property of the window object, but it is not a property of the anObj object.

Note: Although undefined is a property with special meaning, it is not a reserved keyword in JavaScript.

When undefined participates in any numerical calculation, the result must be NaN.

By the way, NaN is another special property of the global object (window), and so is Infinity. None of these special attributes are reserved keywords of JavaScript.

Improving undefined performance

When we use undefined values ​​in the program, we actually use the undefined property of the window object.

Similarly, when we define a variable but do not assign it an initial value, for example:

var aValue;

At this time, JavaScript will set its initial value to a reference to the window.undefined property during so-called pre-compilation.

So, when we compare a variable or value with undefined, it is actually compared with the undefined property of the window object. During this comparison process, JavaScript will search for the property named 'undefined' of the window object, and then compare the reference pointers of the two operands to see if they are the same.

Since the window object has many attribute values, it will take time to search for the undefined attribute of the window object in each comparison with undefined. This can be a performance problem in functions that require frequent comparisons to undefined. Therefore, in this case, we can define a local undefined variable ourselves to speed up the comparison of undefined. For example:

function anyFunc()
    {
        var undefined;          //自定义局部undefined变量
         
        if(x == undefined)      //作用域上的引用比较
         
         
        while(y != undefined)   //作用域上的引用比较
         
    };

Among them, when defining an undefined local variable, its initial value will be a reference to the window.undefined property value. The newly defined local undefined variable exists in the scope of the function. In subsequent comparison operations, there is no change in the way the JavaScript code is written, but the comparison speed is very fast. Because the number of variables in the scope will be far less than the properties of the window object, the speed of searching for variables will be greatly improved.

This is why many front-end JS frameworks often define a local undefined variable themselves.