JavaScript | ラッパーオブジェクトとプリミティブ型

javascrpit JavaScript
スポンサーリンク

1. 基本:プリミティブ値とラッパーオブジェクトの違い

let n1 = 10;
let n2 = new Number(10);

console.log(typeof n1);   // "number"
console.log(typeof n2);   // "object"

console.log(n1 == n2);    // true  (型変換後は等しい)
console.log(n1 === n2);   // false (型が違う)
JavaScript

解説:
new Number(10) は「Number型オブジェクト」であって、数値リテラルの「プリミティブ値」ではない。
== はオブジェクト → プリミティブに変換するため値が一致するが、=== では不一致。


2. オートボクシング:プリミティブでもメソッドが使える理由

let str = "hello";
console.log(str.toUpperCase());   // "HELLO"
console.log(str.length);          // 5
JavaScript

解説:
"hello"String オブジェクトではないけれど、メソッド呼び出し時に
new String("hello") が一時的に作られて .toUpperCase() が実行される。
処理が終わるとオブジェクトは破棄される。

3. プロパティを付けても残らない(破棄される)

let str = "abc";
str.x = 99;
console.log(str.x);   // undefined
JavaScript

解説:
str.x = 99 は一時的な String オブジェクトに x を追加しただけ。
すぐ破棄されるため次の行では存在しない。

4. Boolean の罠:オブジェクトは常に truthy

let b1 = false;
let b2 = new Boolean(false);

if (b1) console.log("b1 true"); else console.log("b1 false");  // b1 false
if (b2) console.log("b2 true"); else console.log("b2 false");  // b2 true ❗
JavaScript

解説:
new Boolean(false) はオブジェクト → truthy。
中身が false でも、条件式では常に「真」になる。

5. 数値リテラルの構文トラップ

// console.log(1.toString()); // 構文エラー ❌
console.log((1).toString());   // "1"
console.log(1..toString());    // "1"
JavaScript

解説:
1.toString() は「小数点」と解釈され構文エラー。
括弧で囲むか、. を2つ続けると動く(2つ目のドットがプロパティアクセス)。

6. undefined / null はラッパーなし(TypeError)

let u;
let n = null;

console.log(typeof u); // "undefined"
console.log(typeof n); // "object"

// u.toString(); // ❌ TypeError: Cannot read properties of undefined
// n.valueOf();  // ❌ TypeError: Cannot read properties of null
JavaScript

解説:
undefinednull にはラッパーオブジェクトが存在しないため、
メソッドやプロパティアクセスは即エラー。


7. 明示的に変換したいとき

let x = "42";
console.log(Number(x));   // 42
console.log(String(100)); // "100"
console.log(Boolean("")); // false
console.log(Boolean("hi")); // true
JavaScript

解説:
new を使わず、関数として呼び出すことでプリミティブ変換できる。
Number() / String() / Boolean() は安全な型変換。

8. Object() でラッパーを明示的に作る

let a = 5;
let o = Object(a);

console.log(o instanceof Number);  // true
console.log(typeof o);             // "object"
JavaScript

解説:
Object(プリミティブ) はその型に対応するラッパーを返す。
Object(5)new Number(5) と同等。

9. valueOf() と toString() の挙動比較

let numObj = new Number(12.34);
console.log(numObj.valueOf());   // 12.34
console.log(numObj.toString());  // "12.34"

let strObj = new String("abc");
console.log(strObj.valueOf());   // "abc"
console.log(strObj.toString());  // "abc"
JavaScript

解説:
valueOf() はプリミティブ値を返す。
toString() は文字列化した表現を返す。
等価演算子で比較されるとき、valueOf() が呼ばれることが多い。

10. 比較時の型変換の流れ

let numObj = new Number(100);

console.log(numObj == 100);   // true (valueOf() で比較)
console.log(numObj === 100);  // false (型が違う)
console.log(numObj.valueOf() === 100); // true
JavaScript

解説:
== ではラッパーオブジェクト → プリミティブに変換(内部的に valueOf() 呼び出し)。
=== では変換されない。

11. BigInt と Symbol の特別扱い

let big = BigInt(123);
console.log(typeof big); // "bigint"
// new BigInt(123); // ❌ TypeError

let sym = Symbol("x");
console.log(typeof sym); // "symbol"
// new Symbol("x"); // ❌ TypeError
JavaScript

解説:
BigIntSymbolコンストラクタではない
new で呼ぶとエラー。

12. プリミティブのコピー動作

let a = "hello";
let b = a;  // 値コピー(独立)
b = "world";

console.log(a); // "hello"
console.log(b); // "world"
JavaScript

解説:
プリミティブは 値渡し
一方、オブジェクトは参照渡し(次の例参照)。

13. ラッパーオブジェクトは参照を共有する

let x = new String("hi");
let y = x;

y.extra = "OK";

console.log(x.extra); // "OK" ✅
JavaScript

説:
オブジェクトは参照がコピーされるため、プロパティの追加・変更が共有される。
これがプリミティブとの大きな違い。

14. instanceof の違い

let s1 = "abc";
let s2 = new String("abc");

console.log(s1 instanceof String); // false
console.log(s2 instanceof String); // true
JavaScript

解説:
プリミティブは String のインスタンスではない。
ラッパーオブジェクトだけが instanceof String にマッチする。

15. 実務バグ例(リアルに起きる)

// ❌ 間違った真偽チェック
let isOk = new Boolean(false);

if (isOk) {
  console.log("実行されてしまう…"); // 実行される
}
JavaScript

理由: isOk はオブジェクトなので truthy。
修正方法:

let isOk = Boolean(false); // または false
if (isOk) { ... }  // 実行されない(正しい)
JavaScript

まとめ

種類生成例注意点
プリミティブlet x = 5;"number"メソッド使用OK(自動ボクシング)
ラッパーオブジェクトlet x = new Number(5);"object"比較・真偽判定で混乱しやすい
明示的変換Number("5")"number"推奨(安全)
自動変換"5" * 2 → 10演算時に自動暗黙の型変換に注意
タイトルとURLをコピーしました