undefined in javascript

什么情况下JavaScript会产生undefined类型？

1. 显式undefined类型

const a = undefined;
console.log(a); // undefined.

2. 未初始化的变量

let a;
console.log(a); // undefined.

3. 访问对象中不存在的属性

const person = {
  name: 'zdd',
  age: 41,
};

console.log(person.gender); // undefined.

// Array in JavaScript is also Object.
const a = [1, 2, 3];
console.log(a[3]); // undefined

4. 函数没有返回值

function test() {
  console.log('hello, world!');
}

console.log(test()); // undefined.

5. 调用函数没有传递对应的参数

function add(a, b) {
  console.log(a); // output undefined.
  console.log(b); // output undefined.
  return a + b;
}

add(); // no arguments passed in.

undefined != not defined

let a;
console.log(a); // undefined.
console.log(b); // error, b is not defined

undefined vs void 0

既然已经有了undefined，为什么有很多JavaScript库中还使用void 0呢？ 原因就是undefined是一个值，而不是关键字，能被用户串改，看下面的代码：

const undefined = 1; // undefined被用户篡改！

const add = (a, b) => {
  // 这里判断参数是否传入，结果失效了，因为undefined值在前面被改成了1
  if (a === undefined || b === undefined) {
    console.error('请输入两个数');
  } else {
    return a + b;
  }
};

add(1, 2); // 这里会执行add函数中的if分支，是不是很崩溃？

使用void 0就不会有这个问题。

const undefined = 1;

const add = (a, b) => {
  // 写成void 0就没有问题了，无论undefined被改成什么，都不影响。
  if (a === void 0 || b === void 0) {
    console.error('请输入两个数');
  } else {
    return a + b;
  }
};

console.log(add(1, 2));

void expression - 先对expression求值，然后返回undefined

undefined in regex

In regex, you can use test to check whether a string matches a pattern.

console.log(/^hello/.test('hello, world!')); //true

If you didn’t pass any parameter to test, it will try to match string undefined.

console.log(/undefined/.test()); // true

This is equivalent to the following code, since undefined convert to string is 'undefined', so the result is true.

console.log(/undefined/.test(undefined));

See here for details of test in javascript regex.

undefined vs null

Conceptually, undefined indicates the absence of a value, while null indicates the absence of an object (which could also make up an excuse for [typeof null === "object"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof#typeof_null)). The language usually defaults to undefined when something is devoid of a value:

• A [return](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return) statement with no value (return;) implicitly returns undefined.
• Accessing a nonexistent object property (obj.iDontExist) returns undefined.
• A variable declaration without initialization (let x;) implicitly initializes the variable to undefined.
• Many methods, such as [Array.prototype.find()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) and [Map.prototype.get()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/get), return undefined when no element is found.

null is used much less often in the core language. The most important place is the end of the prototype chain — subsequently, methods that interact with prototypes, such as [Object.getPrototypeOf()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf), [Object.create()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create), etc., accept or return null instead of undefined.

null is a keyword, but undefined is a normal identifier that happens to be a global property. In practice, the difference is minor, since undefined should not be redefined or shadowed.

undefined convert to other types

console.log(String(undefined)); // "undefined"
console.log(Number(undefined)); // NaN
console.log(Boolean(undefined)); // false

注意null转换为其他类型时与undefined的区别

console.log(String(null)); // "null"
console.log(Number(null)); // 0
console.log(Boolean(null)); // false

References：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#undefined_type

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void