Comprehensive analysis of null in JavaScript

This article brings you relevant knowledge about javascript. Null is a primitive type, which means it intentionally does not contain any object value. Let’s take a look at everything about null in JavaScript: What does it mean, how to detect it, the difference between null and undefined, and why extensive use of null can cause code maintenance difficulties, etc. I hope it will be helpful to everyone.

【Related recommendations: javascript video tutorial, web front-end】

JavaScript There are two types: primitive types (strings, booleans, numbers, symbols) and objects

Objects are a complex data structure. The simplest JavaScript objects are ordinary objects - a collection of keys and related values ​​

let myObject = {
  name: 'Eric Cartman'
};

But in many cases it is not possible to create an object. In this case, JavaScript provides a special value null - indicating that the object is missing

let myObject = null;

In this article, you will learn about ## Everything about null in #JavaScript: what it means, how to detect it, the difference between null and undefined, and why # is used a lot ##null Will cause difficulty in code maintenance, etc.1. The concept of null

JavaScript

is described in the specificationnull null is a primitive type that intentionally does not contain any object value

If you see

null

(assigned to a variable or returned by a function), then at that location it should have is an object, but for some reason, an object was not createdFor example, the function

greetObject()

creates an object, but it can also returnnull## when the object cannot be created. #:

function greetObject(who) {
  if (!who) {
    return null;
  }
  return { message: `Hello, ${who}!` };
}

greetObject('Eric'); // => { message: 'Hello, Eric!' }
greetObject();       // => null

When a string parameter is passed in to the above function, as expected, the function returns an object{ message: 'Hello, Eric!' }

However, when no parameters are passed in the function, the function returns null

. It is reasonable to return

null because the who parameter has no value, resulting in the greeting object being unable to be created1.1 A more appropriate metaphor for null

Consider a more apt metaphor for

null

, you can think of a variable as a box. Just like variables can hold objects, boxes can hold items like teapots etc. But once you receive a box, open it, there's nothing! Someone made a mistake and gave you an empty box. The box does not contain any content, or in other words, it contains a

null value

2. How to detect null

Checknull

OK The method is to use the strict equality operator

const missingObject = null;
const existingObject = { message: 'Hello!' };

missingObject  === null; // => true
existingObject === null; // => false

missingObject === null The result is true

because the

missingObject variable contains a null value. If the variable contains a non-null value, such as an object, the expression existingObject === null evaluates to false2.1 null is a false valuenull

and

false

, 0, ",

undefined, NaN are all false values. If they are encountered in a conditional statement , then JavaScript will coerce them to false

Boolean(null); // => false

if (null) {
  console.log('null is truthy');
} else {
  console.log('null is falsy'); // logs 'null is falsy'
}

2.2 typeof nulltypeof value

type operators can determine The type of value. For example, type 15 is

number

,

typeof { prop: 'Value' } is equal to object. Interesting Yes, null What is the result of value type

typeof null; // => 'object'

What about a missing object type Is it judged as

object

? It turns out that

typoef null

is treated as

object. This is a bug in the early JavaScript implementation. Do not use The typeof operator detects null

values. As mentioned earlier, use the strict equality operator

myVar === null if you want To use typeof to check whether a variable is an object, you must exclude the null

situation

function isObject(object) {
  return typeof object === 'object' && object !== null;
}

isObject({ prop: 'Value' }); // => true
isObject(15);                // => false
isObject(null);              // => false

3. The trap of nullnull

usually appears unexpectedly in situations where you expect to use an object. Then, if you try to extract a property from

null

,

JavaScript will throw an error Let's use the greetObject() function again and try to access the message

property from the returned object

let who = '';

greetObject(who).message; 
// throws "TypeError: greetObject() is null"

because the who variable is a empty string, so the function returns null

. When accessing the

message property from null, a TypeError error will be thrown You can pass Use the optional chaining operator to handle null

let who = '';

greetObject(who)?.message ?? 'Hello, Stranger!';  
// => 'Hello, Stranger!'

or use the two alternatives described in the next section.

4. null 的替代方案

当你不能构造一个对象时，很容易返回 null。但这种做法也有缺点

一旦 null 出现在执行堆栈中，你总是必须检查它

我们尽量避免返回 null：

• 返回默认对象而不是 null
• 抛出错误而不是返回 null

让我们回忆一下 greetObject() 函数返回 greeting 对象

当缺少参数时，可以返回一个默认对象，而不是返回 null

function greetObject(who) {
  if (!who) {
    who = 'Stranger';
  }
  return { message: `Hello, ${who}!` };
}

greetObject('Eric'); // => { message: 'Hello, Eric!' }
greetObject();       // => { message: 'Hello, Stranger!' }

或者抛出一个错误

function greetObject(who) {
  if (!who) {
    throw new Error('"who" argument is missing');
  }
  return { message: `Hello, ${who}!` };
}

greetObject('Eric'); // => { message: 'Hello, Eric!' }
greetObject();       // => throws an error

这些实践可以让你完全避免处理 null

5. null vs undefined

undefined 就是未初始化的变量或对象属性的值

例如，如果在声明变量时没有赋初值，那么访问该变量的结果为 undefined

let myVariable;

myVariable; // => undefined

null 和 undefined 之间的主要区别是，null 表示丢失了的对象，而 undefined 表示未初始化的状态

严格相等运算符 === 区分 null 和 undefined

null === undefined; // => false

而松散相等运算符 == 则认为 null 和 undefined 相等

null == undefined; // => true

我使用松散相等运算符检查变量是否为 null 或 undefined

function isEmpty(value) {
  return value == null;
}

isEmpty(42);                // => false
isEmpty({ prop: 'Value' }); // => false
isEmpty(null);              // => true
isEmpty(undefined);         // => true

6. 总结

null 是 JavaScript 中的一个特殊值，表示丢失的对象

严格相等运算符判断变量是否为空: variable === null。

typoef 操作符用于确定变量的类型(number, string, boolean)。但是，typeof 在 null 情况下会引起误解: typeof null 结果为 object

null 和 undefined 在某种程度上是等价的，但null 表示一个丢失的对象，而 undefined 表示未初始化状态

尽可能避免返回 null 或将变量设置为 null。因为这种做法会导致 null 值的扩展和需要对 null 的验证。相反，尝试使用具有默认属性的对象，或者甚至抛出错误会是更好的实践

你会使用什么方法来检查 null?

【相关推荐：javascript视频教程、web前端】

The above is the detailed content of Comprehensive analysis of null in JavaScript. For more information, please follow other related articles on the PHP Chinese website!