A detailed introduction to JavaScript primitive values and wrapper objects

Preface
text

Primitive types

Primitive values

Wrapper objects

Object
Constructor
Ordinary function (Function)

Primitive not Object

No properties, no functions
Stand User (I can't translate this)

Summary

Preface

As JavaScript becomes more and more popular, more and more developers are beginning to get in touch with and use JavaScript.

At the same time, I also found that many developers do not have a clear understanding of the most basic primitive values and package objects in JavaScript.

So in this article, Zhapi will introduce them to you in detail.

🧐 Without further ado, let’s go!

text

Primitive types

Primitive types are also called "base types".

There are currently the following primitive types in JavaScript:

string
number
boolean
null
undefined
bigint (big integer, ES6)
symbol

📝 As follows:

typeof 'chenpipi'; // "string"
typeof 12345; // "number"
typeof true; // "boolean"
typeof null; // "object"
typeof undefined; // "undefined"
typeof 12345n; // "bigint"
typeof Symbol(); // "symbol"

💡 Special attention

Although typeof null returns "object", this does not mean that null is an object. This is actually a bug in JavaScript, and it has been like this since the birth of JavaScript.
In the original implementation of JavaScript, values in JavaScript were represented by a tag indicating the type and the actual data value. The type tag of an object is 0. Since null represents a null pointer (value 0x00 on most platforms), the type tag of null is 0, and typeof null therefore returns "object".
The history of “typeof null”: https://2ality.com/2013/10/typeof-null.html

Primitive values

Primitive values are values (data) of primitive types.

A primitive value is data that is not an object and has no methods.

A primitive value is a non-object data that does not have any methods.

That is to say, primitive values such as string, number and boolean do not have any properties or methods.

😨 At this time, have those friends with a keen sense of smell already noticed that something is wrong?

It’s cumin! I added cumin! (Manually cross out the dog head)

🤓 There is a very interesting point here, but before discussing this issue, let us first understand the packaging object.

Wrapper objects

All primitive types except null and undefined have their corresponding wrapper objects:

String
Number
Boolean
BigInt (ES6)
Symbol (flag? ES6)

Object

Object is a reference type.

First, the wrapper object itself is an object and also a function.

String instanceof Object; // true
String instanceof Function; // true

Constructor

Instance

String, Number, and Boolean all support the use of the new operator to create corresponding packaging object instances.

📝 For example, the declaration of String (excerpt):

interface StringConstructor {
  new(value?: any): String;
  (value?: any): string;
  readonly prototype: String;
}
declare var String : StringConstructor;

📝 The data obtained using the new operator is an object:

// string typeof 'pp'; // "string"
typeof new String('pp'); // "object"
new String() instanceof Object; // true
// number typeof 123; // "number"
typeof new Number(123); // "object"
new Number() instanceof Object; // true
// Boolean typeof true; // "boolean"
typeof new Boolean(true); // "object"
new Boolean() instanceof Object; // true

📝 We can call the valueOf() function of the wrapped object instance to get its original value:

// String let s = new String('pp');
s.valueOf(); // "pp"
typeof s.valueOf(); // "string"
// Number let n = new Number(123);
n.valueOf(); // 123
typeof n.valueOf(); // "number"
// Boolean let b = new Boolean(true);
b.valueOf(); // true
typeof b.valueOf(); // "boolean"

“Outliers” (Attention)

BigInt and Symbol are both "incomplete classes" and do not support the new operator.

📝 For example, the declaration of BigInt (excerpt):

interface BigIntConstructor {
  (value?: any): bigint;
  readonly prototype: BigInt;
}
declare var BigInt : BigIntConstructor;

You can see that there is no new operator related function in the BigInt declaration.

Ordinary function (Function)

Wrapper objects can also be used as normal functions.

The String(), Number() and Boolean() functions can be used to perform explicit type conversion on any type of data.

In addition, the Object() function can also be used for explicit type conversion, but this article will not expand on this.

String

📝 Example code:

typeof String(); // "string"
String(); // ""
String('pp'); // "pp"
String(123); // "123"
String(true); // "true"
String(false); // "false"
String(null); // "null"
String(undefined); // "undefined"
String([]); // ""
String({}); // "[object Object]"

💡 Tip 1

When we use the String() function to convert an object, JavaScript will first access the toString() function on the object. If it is not implemented, it will search up the prototype chain.
🌰 For example: executing String({ toString() { return 'pp'; } }) returns "pp", not "[object Object]".
Therefore, the String() function cannot be used to determine whether a value is an object (it will fail).

💡 Tip 2

The commonly used way to judge the object is Object.prototype.toString({}) === '[object Object]'.
🌰 For example: executing Object.prototype.toString({ toString() { return 'pp'; } }) returns "[object Object]".

Number

📝 Example code:

typeof Number(); // "number"
Number(); // 0
Number(''); // 0
Number('pp'); // NaN
Number(123); // 123
Number(true); // 1
Number(false); // 0
Number(null); // 0
Number(undefined); // NaN
Number([]); // 0
Number({}); // NaN

💡 Tips

For the Number() function, perhaps the most useful conversion is to convert true and false to 1 and 0.

Boolean

📝 Example code:

typeof Boolean(); // "boolean"
Boolean(); // false
Boolean(''); // false
Boolean('pp'); // true
Boolean(0); // false
Boolean(1); // true
Boolean(null); // false
Boolean(undefined); // false
Boolean([]); // true
Boolean({}); // true

💡 Tips

In some cases, we will use 0 and 1 in the data to represent true and false states. In this case, we can use Boolean() to determine the state.

BigInt

The BigInt() function is used to convert an integer to a big integer.

This function accepts an integer as a parameter. If the passed parameter is a floating point number or any non-numeric type data, an error will be reported.

📝 Example code:

BigInt(123); // 123n
BigInt(123n); // 123n
typeof 123n; // "bigint"
typeof BigInt(123); // "bigint"

BigInt & Number

It should be noted that BigInt and Number are not strictly equal (loosely equal).

📝 Example code:

123n === 123; // false
123n == 123; // true

Symbol

The Symbol() function is used to create a value of type symbol.

This function accepts a string as a descriptor (parameter). If a value of another type is passed in, it will be converted to a string (except undefined).

Note that each symbol value is unique, even if their descriptors are the same.

And symbol type data can only be created through the Symbol() function.

📝 Example code:

// The return value below is simulated by Devtools, not the actual value Symbol('pp'); // Symbol(pp)
Symbol(123); // Symbol(123)
Symbol(null); // Symbol(null)
Symbol({}); // Symbol([object Object])

// typetypeof Symbol('pp'); // "symbol"
Symbol('pp') === Symbol('pp'); // false

// Descriptor Symbol('pp').description; // "pp"
Symbol(123).description; // "123"
Symbol({}).description; // "[object Object]"
Symbol().description; // undefined
Symbol(undefined).description; // undefined

Primitive not Object

🎃 The interesting part is coming~

No properties, no functions

Earlier in this article, it was mentioned that “a primitive value is a non-object data that does not have any methods.”

We all know that objects can have properties and methods.

But strings are not objects, so you can't add properties to them.

📝 Do a little experiment:

let a = 'chenpipi';
console.log(a.length); // 8
// Try to add a new attribute a.name = 'Danzu Wu';
console.log(a.name); // undefined
// Try to modify an existing property typeof a.slice; // "function"
a.slice = null;
typeof a.slice; // "function"

🎬 Zhapi Small Theater

At this time, a stubborn friend used the rebuttal skill.

You jerk, stop fooling people here. When I usually write bugs or not code, I can obviously call methods on strings, numbers and Boolean values!

📝 For example, the following code can be executed normally and get the expected results:

// string let s = 'chenpipi';
s.toUpperCase(); // "CHENPIPI"
'ChenPiPi'.slice(4); // "PiPi"
// Number let n = 123;
n.toString(); // "123"
(123.45).toFixed(2); // "123.5"
// Boolean value let b = true;
b.toString(); // "true"
false.toString(); // "false"

💡 Useless trivia

Have you noticed that a function cannot be called directly after a numeric literal? For example, executing 123.toString() will report a SyntaxError (syntax error).
This is because numbers (floating point numbers) themselves use decimal points, and calling functions also requires a decimal point, which causes ambiguity (strings and Boolean values do not have this problem).
In this case, we can use parentheses () to wrap the number, such as (123).toString(); or use two consecutive decimal points.. to call the function, such as 123..toString().

🤔 That's weird

So since strings are not objects, why do strings have attributes and methods?

On second thought, numbers are just numbers, how can there be any methods in numbers?

This is indeed illogical, but it also contradicts reality.

What's going on? ? ?

Stand User (I can't translate this)

The answer is revealed~

😎 Operating in secret

Take string as an example. When we read the properties or methods of a string in the code, JavaScript will silently perform the following operations:

Create a temporary wrapper object instance by using new String();
Execute our code logic through the created object (read properties or execute functions);
Temporary objects are no longer used and can be destroyed.

📝 For example:

let a = 'chenpipi';
console.log(a); // "chenpipi"
// ------------------------------
let b1 = a.length;
console.log(b1); // 8
// The above code is equivalent to:
let b2 = (new String(a)).length;
console.log(b2); // 8
// ------------------------------
let c1 = a.toUpperCase();
console.log(c1); // "CHENPIPI"
// The above code is equivalent to:
let c2 = (new String(a)).toUpperCase();
console.log(c2); // "CHENPIPI"

The same goes for numbers and booleans, but numbers are created using new Number(), while booleans are created using new Boolean().

📝 In addition to the above examples, the most powerful proof is their constructor:

'chenpipi'.constructor === String; // true
(12345).constructor === Number; // true
true.constructor === Boolean; // true

All of this is done in the dark by JavaScript, and the temporary objects generated in the process are one-time (thrown away after use).

😮 I see

Wuhu, now it makes sense!

This also explains why we can access properties and methods on strings, but cannot add or modify properties.

That's because the target we are actually operating on is the temporary object created by JavaScript, not the string itself!

So our addition or modification operation is actually effective, but it is only effective on a temporary object!

📝 Like this:

// In code:
let a = 'chenpipi';
a.name = 'Daniel Wu';
console.log(a.name); // undefined

// equivalent to:
let a = 'chenpipi';
(new String(a)).name = 'Daniel Wu';
console.log(a.name); // undefined

// equivalent to:
let a = 'chenpipi';
let temp = new String(a);
temp.name = 'Daniel Wu';
console.log(a.name); // undefined

Summary

🎉 The above is the full content of this article.

Finally, let’s summarize:

Most primitive types have corresponding wrapper objects;
Some wrapper objects can be new, some cannot;
Wrapper objects are generally used for explicit type conversion;
There are properties and methods on objects;
There are no properties or methods on primitive values;
Primitive values cannot have properties or methods either;
But we can manipulate primitive values like objects;
This is because JavaScript does something sneaky when executing code;
JavaScript uses temporary wrapper objects to perform operations on primitive values.

We don't usually pay attention to this when we write code, and in fact it doesn't affect our writing of code.

So, isn't this article a waste of time?

🙉 Yes, but not entirely~

Know yourself and know your enemy, and you will win every battle.

After learning these useless little knowledge, you can have a deeper understanding of JavaScript. At least you can use it to brag (dog head~).

Related Materials

JavaScript Advanced Programming (4th Edition)

JavaScript: The Definitive Guide (6th Edition)

Primitive - MDN: https://developer.mozilla.org/en-US/docs/Glossary/Primitive

The history of “typeof null”: https://2ality.com/2013/10/typeof-null.html

This is the end of this article about JavaScript primitive values and wrapper objects. For more relevant JS primitive values and wrapper objects content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: