JavaScript

JavaScript Primitive Wrapper Types | Explained

Whenever a primitive value is read in a program, JavaScript automatically creates an object for the corresponding primitive type known as the Primitive Wrapper type. After creating the primitive wrapper type, JavaScript invokes the specified method and immediately deletes the instance from memory. In this way, primitive values are considered lightweight compared to regular objects.

JavaScript offers primitive wrapper types for the “string”, “number”, “boolean”, “bigint”, and “symbol” data types, making it easier to use these primitive values.

This write-up explained JavaScript Primitive Wrapper Types, but before that, let’s look at the primitive data types.

JavaScript Primitive Data type

Primitive data types are the predefined or built-in data types supported by the JavaScript programming language. It is frequently referred to as the lowest level of a computer language implementation.

The Primitive data types can neither be an object nor the methods. Also, primitive values cannot be modified since they are “immutable“. You can reassign a variable with a new primitive value but not alter the existing one.

JavaScript has seven primitive data types: number, boolean, bigint, string, symbol, null, and undefined.

The below-given section will demonstrate the primitive data types in detail.

String primitive data type

In JavaScript, the “string” primitive data type is represented by the sequence of characters added within the single ‘ ‘ or double quotes ” “.

Example

let string1 = 'primitive data type';

typeof string1;

Output

Number primitive data type

You can utilize the “number” primitive data types for storing decimal and non-decimal values in JavaScript.

Example

let number1 = 090078601;

typeof number1;

Output

Bigint primitive data type

bigint” and “number” data are pretty similar; however, bigint permits you to present the integer values greater than (253). To create a bigint primitive data type value, “n” is appended at the end of the number in the following way:

Example

let biginteger = 9999999999988872553627n;

typeof biginteger;

Output

Boolean primitive data type

JavaScript “boolean” primitive data type comprises two values: true or false.

Example

booleanVal = true;

typeof booleanVal;

Output

Symbol primitive data type

symbol” is a primitive data type value that can be generated by invoking the “Symbol” function, which returns a “unique” value. The Symbol function accepts a string description as an argument which will be printed out when you retrieve the symbol value.

Example

let z = Symbol("We have created a symbol value");

typeof z;

Output

Undefined primitive data type

The “undefined” primitive data type signifies that a variable is declared but not defined yet.

Example

let y;

typeof y;

Output

Null primitive data type

null” is a data type that is used to represent “missing” or “unknown” values. The “typeof” operator returns “object” as the type of “null”, but remember, null is a primitive value, not an object.

Example

let x = null;

typeof x;

Output

At this point, you have understood what primitive data types are; now, we will learn about the concept behind accessing properties or methods of primitive values.

JavaScript Primitive Wrapper Class

Primitive data type values can be manipulated using object notation. For this purpose, JavaScript has defined corresponding object classes for each of the primitive values, except for “null” and “undefined”. These primitive wrapper classes are considered “wrappers” around the JavaScript primitive data types.

Another important point to discuss is that the wrapper classes are utilized for storing the same value both externally and internally; however, the instances or objects of the wrapper classes will remain non-primitive in case of explicit object declaration.

JavaScript Primitive Wrapper object

A JavaScript primitive wrapper object comprises primitive values, and it additionally provides methods and properties for manipulating the values.

For instance, A “string” primitive value is utilized in an object context when accessing its related properties or method. In this case, JavaScript internally generates a primitive “wrapper” object for that specific string primitive wrapper type. Then, the primitive string value is added in the created string wrapper object, which has its methods and properties. This automatically created wrapper object is deleted after invoking the specified method or property.

JavaScript Primitive wrapper objects can also be created manually using the “new” operator. These wrapper objects stay in the memory until their scope goes out. Also, the manually created primitive wrapper objects are of the “object” type.

JavaScript Primitive Wrapper type

The automatically created JavaScript script wrapper object is referred to as “Primitive Wrapper type”. JavaScript offers primitive wrapper types for the “string”, “number”, “boolean”, “bigint”, and “symbol” data types, making it easier to use these primitive values.

Example: JavaScript Primitive Wrapper type

In the below-given example, the “language” variable contains “JavaScript” as its primitive string value. This variable does not have access to the “substring()” method; however, it still retrieves the sub-string from the specified primitive value:

let language = 'JavaScript';

let str1 = language.substring(4);

console.log( 'str1 wrapper type is :' + typeof str1);

console.log(str1);

Output

The above-given code is working perfectly, and now you must be wondering how the “language” variable invoked the “substring()” method that is associated with the string class?

The answer to this question is that whenever you call a method with a primitive value; JavaScript automatically creates an “object” according to the corresponding primitive data type, “string“. After that, it invokes the specified method with the help of the created instance and then deletes the instance immediately from memory.

So technically, our executed program is equivalent to this code:

let language = 'JavaScript';

// when language.substring(4) is invoked;

let tmp = new String(language);

str1 = tmp.substring(4);

console.log(str1);

tmp = null;

Execution of the above-given program will also show the same output:

Now, let’s check out the difference between Manual Primitive Wrapper Object and Automatic Primitive Wrapper Object (Primitive Wrapper type).

Manual Primitive Wrapper Object vs Automatic Primitive Wrapper Object

As mentioned earlier, JavaScript permits you to create primitive wrapper objects manually using the new operator. Unlike primitive wrapper types, manually created objects stay in the memory until these objects go out of scope.

Example: Manual Primitive Wrapper Object vs Automatic Primitive Wrapper Object

In the below-given example, we will create a manual primitive wrapper object named “str1” using the “new” operator and String() wrapper class constructor:

let str1 = new String('JavaScript');

console.log(typeof str1);

console.log(str1);

Given output signifies that we have successfully created an “object” having “String” prototype that stored “JavaScript” as its primitive string value:

Whereas, in the case of automatically created primitive wrapper object or primitive wrapper type, the scope is restricted to a single invoked property and method:

let str1 = 'JavaScript';

str1.language = 'ES6';

console.log(str1.language);

Here, we firstly created a variable “str1” with a string primitive value “JavaScript” in the above example. After reading the primitive value, JavaScript generates a new string primitive object or primitive wrapper type for “str1“. Next, the “str1.language = ‘ES6’” command tries to access the language property of the “str1” string and assign value to it.

The “language” property exists in the memory till this point. Therefore, the output has returned “undefined” instead of the value stored in “str1.language” when the next line is executed:

We have compiled all of the essential information related to the Primitive wrapper types and primitive objects in JavaScript.

Conclusion

JavaScript offers primitive wrapper types for the “string”, “number”, “boolean”, “bigint”, and “symbol” data types, making it easier to use these primitive values. The primitive wrapper types are also called automatically created primitive wrapper objects as they are automatically created when the JavaScript engine reads any primitive value, and these objects get immediately deleted after invoking the specified method or property. This write-up explained JavaScript primitive wrapper types with the help of suitable examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.