What is a wrapper object in Javascript? Provide an example of how a wrapper object would work.
In order to best explain what wrapper objects are and how they work in Javascript, let’s first consider a simple example of a string in Javascript.
var strng = "ProgrammerInterview is Great!"; //the letter variable will hold a "P": var letter = strng.charAt(0);
In the code above, the strng variable is set to a string – “ProgrammerInterview is Great!”. Then, the first letter of that string is retrieved and stored in the letter variable – this would be the letter “P”.
Strings are not objects in Javascript
You may or may not know that in Javascript, objects are composed of properties. Those properties are accessed by using the dot notation – the “.”. And, if there is a function defined inside an object, that function is called a method. A method is also considered to be a property of an object.
In Javascript, Strings are not actually objects. So, the question is in our example above, why does it appear that charAt is a method belonging to a string object named strng?
Well, what’s actually happening is that a wrapper object is being created. What is a wrapper object? Well, as soon as we make the call to charAt – in effect, what looks like a method access of a String object named strng – then Javascript will actually convert the string value to an object. You can think of it as Javascript making a call to new String(strng) behind the scenes.
The wrapper object will inherit all of the string methods, like charAt. And as soon as the property – in this case the charAt method – is correctly used, then the object that has just been created is thrown away. So, another word for the wrapper object is a “transient object”, because transient means something that appears just temporarily and then disappears.
Wrapper objects also apply to both numbers and booleans in Javascript, so that methods can be called on those types as well. Remember that the whole point of a wrapper object is to allow methods to be called on non-objects.
Finally, let’s consider one last example:
var someString = "hello"; someString.size = 5; // s will be undefined: var s = someString.size;
In the code above, someString is obviously a string set to “hello”. We then create a temporary String object and set a property named “size” on the someString string. The object, however, is then thrown away. So, when we try to access the size property in the third line, the variable “s” will actually be undefined, because that property does not exist since the String object created was only temporary.
The whole point of the code above is to demonstrate the fact that when you try to set the value of a property on a string then it simply won’t work, because it’s just set on temporary object. But, when you try to read the value of a property (like we did in our earlier example using charAt), then it works just fine. This is because of the fact that the string will act like an object temporarily and allow you to use a method – well, it’s actually a wrapper object, but hopefully you understand the difference now!