Autoboxing in JavaScript

In JavaScript, as well as in various object-oriented programming languages, primitive values are distinct from methods and attributes. To utilize them, they need to be converted into object data types through a wrapping process. Primitive data types serve as the fundamental components of a programming language. JavaScript comprises six primitive types: object, string, number, undefined, and symbol.

The process of enclosing a primitive value within an Object is referred to as boxing. When an Object is instantiated in JavaScript, such as when calling the toUpperCase method, JavaScript automatically transforms the primitive data type into its corresponding object type. This newly created object type is then linked to the relevant built-in, allowing the application of prototype methods to primitive data types.

Use of Autoboxing in JavaScript

Autoboxing is a technique utilized in JavaScript. When you attempt to access a method or property, JavaScript seamlessly transforms a primitive type into its corresponding object wrapper; after performing the operation, it subsequently eliminates the temporary object.

Autoboxing in JavaScript refers to the automatic transformation of primitive data type values into their corresponding object forms. This phenomenon occurs in two distinct scenarios:

• ✅ Primitive types can temporarily act like objects when methods or properties are invoked due to autoboxing. This happens when utilizing .call or .apply (provided that strict mode is not in effect) and a primitive value is supplied as the this context.
• ✅ When making an attempt to access a primitive value using the "property.split" method, the actual primitive value remains unchanged following the operation.

Primitive Types

Creating a string and determining its length is straightforward; however, how does the String primitive type interact with properties on the String object?

Primitive types lack methods and properties. While the code presented suggests that primitives possess methods, this is not accurate in this context. It functions almost magically, as JavaScript incorporates an autoboxing feature for these types.

const var_name = "good";
console.log(var_name.length); // 4

Primitive types are encapsulated within their corresponding objects, often referred to as built-in objects, whenever we invoke a method or property on them. In the example mentioned earlier, we are dealing with a string. Consequently, autoboxing provides methods and properties that facilitate access to this string and helps in linking primitive types to their respective built-in objects.

I want to highlight a few situations first, and then we can talk about them.

• ✅ It is a simple string that returns the value that is supplied to it when you console it.
• ✅ A comparison between a string primitive and a string object is being performed here (it is constructed upon call using new). The returned o/p is true since this will just compare the values. Upon examining the newly generated String('hii') output, what appears in the console?
• ✅ Since types differ, the values we are verifying here with type will undoubtedly return false. One is an object, and the other is a string.
• ✅ Why is that incorrect? When we compare two different objects, even though their values are the same, they cannot be the same. Why? The reason for false is because they are compared by reference, which is their memory address, which varies depending on the item.
• ✅ It has the same reasoning as previously. The memory address of the object is represented by its value, which relates to the precise values it contains (Are you familiar with pointers? If not, take a look at this.
• ✅ The String is not an instance of the String class because it is a primitive type. However, autoboxing is done in order to access the property.
• ✅ It is an instance of the String class because the new operator was used to generate it.

Example:

The subsequent illustration demonstrates autoboxing through the utilization of new keywords and fundamental methods. Various JavaScript keywords can be employed to retrieve the value of the String.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> Draw a circle using javascript </title>
</head>
<body style = "background-color:lightgrey;">
<h4> Autoboxing using javascript </h4>
<p id = "demo"></p>
<p id = "demo1"></p>
<p id = "demo2"></p>
<p id = "demo3"></p>
<script>
const varStr = new String('Hello World!');
const varStr1 = 'IHello World!';
const varStr2 = new String('Hello World!');
const output = varStr.valueOf();
document.getElementById('demo').innerHTML = output;
const output1 = typeof varStr1;
document.getElementById('demo1').innerHTML = output1; // 'string'
const output2 = typeof varStr2;
document.getElementById('demo2').innerHTML = output2;// 'object'
const output3 = typeof varStr;
document.getElementById('demo3').innerHTML = output3;  // 'object'
</script>
</body>
</html>

Output:

The output image shows the data's information.

Apply Primitives: When and Why?

Primitives are typically the optimal selection for handling strings, numerical values, or any other primitive data types. What accounts for this efficiency, specifically?

const varStr = "Hello world!";
console.log(varStr.valueOf());

The String referenced earlier is straightforward and lacks any linked methods or properties. Consequently, the value of testStr will be retrieved much more swiftly. What occurs when we access the values of the length properties in the statement that follows? Since testStr is not an instance of a string, JavaScript will automatically box it by associating it with the corresponding wrapper and identifying its type.

JavaScript calls are executed in an alternating manner based on the specific primitive type methods being invoked. Modern JavaScript engines have advanced significantly, allowing for more flexibility, which means that the aforementioned process does not have to be adhered to on every occasion.

Examples

The subsequent illustrations demonstrate the process of autoboxing utilizing JavaScript methods and keywords. By employing the valueOf, length, and various other keywords, we can obtain specific outputs.

Example 1:

The subsequent illustration demonstrates the concept of autoboxing through JavaScript methods and keywords. We can utilize the valueOf method to retrieve a specific string without the necessity of employing the new keyword.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> Autoboxing using javascript </title>
</head>
<body style = "background-color:lightgrey;">
<h4> Autoboxing using javascript </h4>
<p id="demo"></p>
<script>
const varStr = "Hello World!";
const output = varStr.valueOf();
document.getElementById('demo').innerHTML = output;
</script>
</body>
</html>

Output

The output image shows the data's information.

Example 2:

The subsequent example demonstrates the concept of autoboxing through the application of newly introduced keywords and fundamental methods. The valueOf method can be utilized to retrieve a specific string associated with any new keyword.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> Draw a circle using javascript </title>
</head>
<body style = "background-color:lightgrey;">
<h4> Autoboxing using javascript </h4>
<p id = "demo"></p>
<p id = "demo1"></p>
<script>
const varStr = new String('Hello World!');
const output = varStr.valueOf();
document.getElementById('demo').innerHTML = output;
const varStr1 =  new String('hello students!!').valueOf();
const output1 = varStr1.valueOf();
document.getElementById('demo1').innerHTML = output1;
</script>
</body>
</html>

Output

The output image shows the data's information.

Example 3:

The subsequent illustration demonstrates the process of autoboxing by utilizing new keywords along with fundamental methods. Various JavaScript keywords can be employed to retrieve the value of the String.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> Draw a circle using javascript </title>
</head>
<body style = "background-color:lightgrey;">
<h4> Autoboxing using javascript </h4>
<p id = "demo"></p>
<p id = "demo1"></p>
<p id = "demo2"></p>
<p id = "demo3"></p>
<p id = "demo4"></p>
<script>
const varStr = new String('Hello World!');
const output = varStr.valueOf();
document.getElementById('demo').innerHTML = output;
const varStr1 =  new String('hello students!!').valueOf();
const output1 = varStr1.valueOf();
document.getElementById('demo1').innerHTML = output1;
const varStr2 =  new String('hello students!!').valueOf();
const output2 = varStr2.includes("substring");
document.getElementById('demo2').innerHTML = output2;
const varStr3 =  new String('hello Developer!!');
const output3 = varStr3.toString();
document.getElementById('demo3').innerHTML = output3;
</script>
</body>
</html>

Output

The output image shows the data's information.

Example 4:

The subsequent example demonstrates autoboxing by utilizing new keywords alongside fundamental methods. Various JavaScript keywords can be employed to retrieve the value of the String.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> Draw a circle using javascript </title>
</head>
<body style = "background-color:lightgrey;">
<h4> Autoboxing using javascript </h4>
<p id = "demo"></p>
<p id = "demo1"></p>
<p id = "demo2"></p>
<p id = "demo3"></p>
<script>
const varStr = new String('Hello World!');
const varStr1 = 'Hello World!';
const varStr2 = new String('Hello World!');
const output = varStr.valueOf();
document.getElementById('demo').innerHTML = output;
const output1 = varStr1.length;
document.getElementById('demo1').innerHTML = output1;
const output2 = varStr2.toUpperCase();
document.getElementById('demo2').innerHTML = output2;
const output3 = varStr.toLowerCase();;
document.getElementById('demo3').innerHTML = output3;
</script>
</body>
</html>

Output

The output image shows the data's information.

Conclusion

Autoboxing is a fundamental concept that allows for the seamless handling of data across various types. It facilitates the input of data information through a JavaScript keyword, ensuring that the data remains unchanged during operations performed by that keyword.