Wrapper Objects in JavaScript

In the Global Object in JavaScript blog, we have learned about the Global Object. The Global Object provides variables and functions accessible from anywhere in our program. In this blog, we will learn about other Object i.e. Wrapper Objects.

What is a Wrapper Object?

The temporary objects created when we access a property of a string,number, or boolean are known as wrapper objects.

Working of Wrapper Objects

In JavaScript strings are considered as primitive data types and not objects. In order to get better understanding, let’s take an example

var strObject = "Welcome to JavaScript Blog";
console.log("Length of a String:",strObject.length);
// Output will be "Length of a String: 26"

In the above example, we have initialized a string with the text “Welcome to JavaScript Blog”. Then, in order to calculate the length of a string, we used the length property. By seeing this example, a question may rise into your mind that if strings are not objects, then why does the string have properties like length, toString, etc.?

The simple answer to this is that whenever we want to use a property of a string (let's say, strObject) in JavaScript, the language turns the string into an object using new String(strObject). This transformed object is called a wrapper object. It inherits all the methods of a string and helps in finding the requested property. After resolving the property, the wrapper object is no longer needed and gets discarded.

Now let’s see the above example in detail

var strObject = "Welcome to JavaScript Blog";
console.log("Length of the String", strObject.length);

In the above example the String object gets created, and with the help of the length property, it finds the length of the string. Now let’s understand what happens in the background when the above two statements are written.

var strObject = "Welcome to JavaScript Blog";
var tempObject = new String(strObject);
tempObject.length;

In the above example, what JavaScript does is create a new Object ofstrObject, assign it to the tempObject, and then use the length property. As soon as the length finishes its work, JavaScript discards that trampObject. You may be eager to see how length may be doing its work. Let’s take a look at different example

var strObject = "Welcome";

Welcome
0 = "W"
1 = "e"
2 = "l"
3 = "c"
4 = "o"
5 = "m"
6 = "e"

Length of the String is : 6

In the above example, strObject is assigned a text named “Welcome”. Each character will have the index position starting from 0 to 6. As there are 6 characters in the word “Welcome”, so its length is 6.

Similar to the length property, method is also called a property of an object. Let’s take a look into the example

var stringValue = "Welcome to JavaScript Blog";
var strObject = stringValue.charAt(9);
console.log(strObject); // Outputs: o

In the above example, stringValue is assigned a text, i.e., “Welcome to JavaScript Blog”. strObject will store the character of the 9thindex, i.e.,o Now let’s see how a String object is created in the background call method.

var stringValue = "Welcome to JavaScript Blog";
var strObject = new String(stringValue).charAt(9);
console.log(strObject); // Outputs: o

In the above example, a String object will be created and will call the method charAt(). Once the character is displayed, the object will disappear or be discarded.

Similar to String, Wrapper Objects can also be applied to numbers as well as boolean. Just like the same way we have seen for String, the same concept is applicable for boolean and numbers, i.e., We can call methods or properties of numbers and boolean. Let’s take a look at the example using String, Number and Boolean

//Creating a String
var str1 = "Welocme to JavaScript Blog";
var str2 = new String(str1);
console.log(str2.length); // Outputs: 26

//Creating a number
var num1 = 9;
var num2 = new Number(num1);
console.log(num2.toFixed(2)); // Outputs: 9.00

// Creating a boolean
var boolValue1 = true;
var boolValu2 = new Boolean(boolValue1);
console.log(boolValu2.valueOf()); // Outputs: true

Output

26
9.00
true

Understanding wrapper objects is crucial for working with JavaScript, as they play a role in certain operations, especially when dealing with functions that expect objects rather than primitive values.