Demystifying JavaScript's Behavior with Primitives and Objects

Have you ever wondered why JavaScript sometimes treats primitive values like objects? Let's dive into this intriguing behavior and uncover how JavaScript seamlessly combines primitives and objects.

Part 1: The Mystery of Strings

In this simple example, I declared a variable name and assigned it the value "samia" However, when I accessed name.length, it returned 5, as if name was an object, not a primitive string.

let name = "samia";
console.log(name.length); // Output: 5

Part 2: Using methods with primitives

Let's take another example, and explains what happens under the hood.

let name = "samia"
console.log(name.toUpperCase()) // SAMIA

Again we can access the method toUpperCase() just like we usually do with objects, What's happening here, why does it look like javascript is treating name variable as an object?

Part 3: Unwrapping the Mystery

Whenever it seems like we're treating primitives as objects, these steps happen:

1- Auto-Boxing: The process where JavaScript temporarily treats primitives as objects to access methods is known as "auto-boxing" or "boxing".
When you access a property or method on a primitive, JavaScript automatically converts (boxes) the primitive into its object wrapper (e.g., String, Number, Boolean) behind the scenes. This is done on-the-fly without creating explicit object instances.

2- Method Execution: After the primitive is temporarily boxed, the method (e.g., toUpperCase()) is executed on the boxed value. The method runs, and any necessary transformations are applied to the primitive value.

3- Unboxing: Once the method execution is complete, JavaScript "unboxes" the value, returning it to its original primitive state. There's no lasting object created; it's just a momentary conversion for method access.

Conclusion

JavaScript's ability to seamlessly blend primitives and objects is all part of its elegant design, aimed at making your coding life easier. It's like having the best of both worlds—efficient primitives when you need them and handy object wrappers when you don't.

So, the next time you encounter JavaScript treating a primitive like an object, you'll know it's all part of the magic behind the scenes.

Resource
https://javascript.info/primitives-methods