Introduction to primitive wrapper types
JavaScript provides three primitive wrapper types: Boolean, Number, and String types.
The primitive wrapper types make it easier to use primitive values including booleans,
numbers, and strings.
See the following example:
let language = 'JavaScript';
let s = language.substring(4);
console.log(s); // Script
Code language: JavaScript (javascript)
In this example, The variable language holds a primitive string value. It doesn’t have any
method like substring(). However, the above code works perfectly.
When you call a method on a variable that holds a number, a string, or a boolean, JavaScript
performs the following steps behind the scenes:
Create an object of a corresponding type.
Call a specific method on the instance.
Delete the instance immediately.
So the following code
let language = 'JavaScript';
let str = language.substring(4);Code language: JavaScript (javascript)
is technically equivalent to the following code:
let language = 'JavaScript';
// behind the scenes of the language.substring(4);
let tmp = new String(language);
str = temp.substring(4);
temp = null;Code language: JavaScript (javascript)
Primitive wrapper types vs. reference types
When you create an object of a reference type using the new operator, the object will stay in
the memory until it goes out of scope.
The following variable s will stay on the heap until it goes out of the scope:
let s = new String('JavaScript');
console.log(s);Code language: JavaScript (javascript)
However, an automatically created primitive wrapper object exists for one line of code only.
See the following example:
let s = 'JavaScript';
s.language = 'ECMAScript';
console.log(s.language); // undefined
Code language: JavaScript (javascript)
In this example, we attempted to access the language property of the s variable and received
a value of undefined instead of 'ECMAScript':
console.log(s.language); // undefinedCode language: JavaScript (javascript)
The reason is that the following code creates a String object and assigns a value to the
language property.
s.language = 'ECMAScript';Code language: JavaScript (javascript)
However, the String object with the language property only exists during the execution of
this line of code.
It’s not recommended to explicitly create primitive wrapper objects like the following:
let n = new Number(10);
let s = new String('JS');
let b = new Boolean(false);
Code language: JavaScript (javascript)
However, you should know which methods are available for a primitive value in order to
manipulate it more effectively.
//this the example worked out in class mam
<html>
<body>
<script>
let arr=[]; //arr with no elements follwing the syntax of primitive wrapper type
console.log("arr content are:"+arr); //displaying the contnent
arr[0]=1;//assigning first element
arr=[3,4,5,6];//assigning multipla other elements; [0]th value is overridden
console.log("content of arr now are:" +arr);
console.log("lenght of arr is :"+arr.length);//works with house keeping actions of creating
object, perform function, //deleted
the object created
arr.length=2;//reseting the length of arr
console.log("lenght of arr is :"+arr.length);
console.log("content of arr now are:" +arr);
arr[3]="xxx"; //[0]: 3, [1]:4, [2]:no value, [3]:its "xxx"
console.log("lenght of arr is :"+arr.length);
console.log("content of arr now are:" +arr);
console.log("type of arr is : "+typeof(arr));
console.log("type of arr[0] is : "+typeof(arr[0]));
console.log("type of arr[2] is : "+typeof(arr[2]));
console.log("type of arr[3] is : "+typeof(arr[3]));
let arr1=new Array(); // following reference type -- using new keyword; exclusive declaration of arr1
as object
console.log("arr1 content are:"+arr1);
console.log("lenght of arr1 is :"+arr1.length);//performs action
let arr2=new Array(3);//seting initial size of arr2 to be 3
console.log("arr2 content are:"+arr1);
console.log("lenght of arr1 is :"+arr2.length); // objects are deleted when it goes out of scope
arr2[0]="xxx";//demostrating arr2 object containing hetrogenous elements
arr2[1]=true;
arr2[2]=12;
arr2[3]=12.4;
console.log("arr2 content are:"+arr2);
console.log("lenght of arr1 is :"+arr2.length);//dynamically grows as elements are added
</script>
</body>
</html>
