Articles
Introduction to JavaScript
Wrapper Objects in JavaScript

Wrapper Objects in JavaScript

This article explains about wrapper objects in JavaScript.

YouTube Video

Wrapper Objects

JavaScript has primitive types and objects to handle them (wrapper objects).

Primitive Types

Primitive types represent a single value and are simple and lightweight. These are immutable (unchangeable) and do not directly have object methods or properties, but they can be temporarily converted into wrapper objects for operations.

string and number are examples of primitive types. On the other hand, wrapper objects start with a capital letter, like String and Number.

Wrapper Objects

To manipulate primitive types, JavaScript temporarily generates wrapper objects (Object wrappers). Wrapper objects contain methods and properties for the primitive types.

Number 

1let numObject = new Number(42);   // Wrapper object
2
3console.log(typeof numObject);    // object
4console.log(numObject.valueOf()); // 42
5
6let numValue = Number(42);        // Return primitive value
7
8console.log(typeof numValue);     // number
9console.log(numValue);            // 42
  • Number is an object type that wraps a primitive number. By explicitly creating a Number object, you can handle numbers like a number, but it is usually recommended to use the primitive number type.

typeof numObject is "object", but typeof 42 is "number".

  • Be aware that using the new operator to generate a new wrapper object yields a different result from calling Number as a function. When called as a function, a primitive number is returned.

String 

1let strObject = new String("Hello"); // Wrapper object
2
3console.log(typeof strObject);    // object
4console.log(strObject.valueOf()); // Hello
  • It is an object type that wraps a primitive string. By using a String object, you can access string properties and methods, but usually a primitive string is used.

typeof strObject is "object", but typeof "Hello" is "string".

  • Like Number, calling String as a function returns a primitive string.

Boolean 

1let boolObject = new Boolean(true); // Wrapper object
2
3console.log(typeof boolObject);    // object
4console.log(boolObject.valueOf()); // true
  • It is an object type that wraps a primitive boolean. You can also explicitly create a Boolean object, but usually a primitive boolean type is used.

typeof boolObject is "object", but typeof true is "boolean".

  • Similar to Number, calling Boolean as a function returns a primitive boolean.

BigInt 

 1let bigIntObject = Object(9007199254740991n); // Wrapper object
 2
 3console.log(typeof bigIntObject);    // object
 4console.log(bigIntObject.valueOf()); // 9007199254740991n
 5
 6let bigIntValue = BigInt(9007199254740991);   // Return primitive BigInt
 7
 8console.log(typeof bigIntValue);     // bigint
 9console.log(bigIntValue);            // 9007199254740991n
10
11// Error
12let bigIntObject2 = new BigInt(9007199254740991n);
  • Objectを使ってBigIntのラッパーオブジェクトを生成できますが、通常はプリミティブ型のbigintを直接使うのが一般的です。

typeof bigIntObjectは"object"であるのに対し、typeof 9007199254740991nは"bigint"です。

  • BigIntを関数として呼び出すとプリミティブなbigintを返しますが、new演算子をつけてBigIntのラッパーオブジェクトを生成することはできません。

Symbol 

1let symObject = Object(Symbol("id")); // Wrapper object for Symbol
2
3console.log(typeof symObject);    // object
4console.log(symObject.valueOf()); //
  • You can use Object to create a wrapper object for Symbol, but generally, you use the Symbol primitive type directly.

Differences between Primitive Types and Wrapper Objects

  • Primitive types are lightweight and memory efficient, but they do not have direct properties or methods. However, in JavaScript, even with primitive types, temporary wrapper objects are automatically created when needed to provide methods and properties.
1let text = "Hello";
2
3// A temporary String object is created,
4// allowing access to the length property
5console.log(text.length);
  • Wrapper objects are explicitly generated objects that can impact memory and performance, so using primitive types is generally recommended.

Conclusion

  • Primitive Types: Lightweight types such as number, string, boolean, null, undefined, and symbol that do not have direct methods.
  • Wrapper Objects: Objects like Number, String, and Boolean that are temporarily converted from primitive types.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

Data Types in JavaScriptOperators in JavaScript