Natives vs Boxing Wrappers in JavaScript

In JavaScript, you work with primitive values (like strings, numbers) but still call methods on them.
That's possible because of boxing (wrapper objects).

🎯 1. What are Natives?

Natives = built-in types and functions provided by JavaScript
🔹 Primitive (Native Types)

"hello"   // string
42        // number
true      // boolean
null
undefined
Symbol()
BigInt(10)

👉 These are primitive values
👉 They are not objects

🔹 Object Natives

Object
Array
Function
Date
RegExp

👉 These are actual objects / constructors
🧩 2. The Problem

Primitives are not objects, so:

let str = "hello";

👉 This should NOT work:

str.toUpperCase(); // ❓ how?

Because:

"hello" is NOT an object

⚙️ 3. What is Boxing (Wrapper Objects)?

Boxing = temporarily converting a primitive into an object so you can use methods

🔬 Behind the Scene

let str = "hello";
str.toUpperCase();

Internally becomes:

new String("hello").toUpperCase();

👉 JS engine automatically wraps the primitive

🧠 This is called Autoboxing

🔁 Full Internal Flow

Primitive → Wrapper Object → Method Call → Discard Wrapper

🧪 Example

let num = 10;
num.toFixed(2);

Internally:

new Number(10).toFixed(2);

👉 Then wrapper is destroyed

⚙️ 4. Types of Wrapper Objects

🧩 5. Important Difference

Primitive

let a = "hello";

Wrapper Object

let b = new String("hello");

⚠️ These are NOT the same

typeof a // "string"
typeof b // "object"

⚠️ Comparison Problem

"a" === new String("a") // false ❌

👉 Because:

primitive vs object
🔬 Deep Internal Behavior
When you access a method:

"hello".length

Engine does:

1. Wrap primitive → String object
2. Access property
3. Return value
4. Destroy wrapper

🧠 Why Boxing Exists

To allow:

"hello".toUpperCase()
(10).toFixed(2)
true.toString()

👉 Without making primitives heavy objects

⚡ 6. Unboxing (Reverse Process)

When needed, object converts back to primitive:

let x = new Number(10);
x + 5 // 15

👉 Uses:

valueOf()
toString()
🧩 Example

let obj = new Number(10);
obj.valueOf(); // 10

⚠️ 7. Why You Should NOT Use Wrapper Objects
❌ Bad Practice

let str = new String("hello");

Problems:

1. Unexpected behavior

if (new Boolean(false)) {
  console.log("true"); // runs ❌
}

👉 Objects are always truthy

1. Performance overhead Object creation Memory usage
2. Confusing comparisons

🧠 8. Primitives vs Objects Summary

🔥 Real Example (Step-by-step)

"abc".includes("a");

Internally:

1. "abc" → new String("abc")
2. call includes()
3. return true
4. destroy wrapper

🧭 Mental Model

“JS temporarily puts primitives inside objects when needed”

🎯 Final Takeaways
Natives = built-in types (primitive + object)
Boxing = wrapping primitive into object temporarily
Happens automatically (autoboxing)
Wrapper objects (new String) should be avoided