[JavaScript講座] プリミティブ型とオブジェクト

JavaScriptの型をざっくり分類

JavaScript のデータ値は、大きく分けると 2つ あります。

1. プリミティブ
2. オブジェクト

プリミティブ型の一覧

プリミティブ型は以下の7種類があります。

1. number
2. string
3. boolean
4. null
5. undefined
6. bigint
7. symbol

例：

// number
const n1 = 123;
const n2 = 3.14;

// string
const s1 = "hello";
const s2 = `template ${n1}`;

// boolean
const flag = true;

// null / undefined
const nothing = null;
let notAssigned; // 値を代入していない → undefined

// bigint
const big = 123456789012345678901234567890n;

// symbol
const id = Symbol("id");

ポイント：

• プリミティブ値は「単純な値そのもの」という感覚でOK
• 後からプロパティを追加したり、変更したりはできない

オブジェクト型

プリミティブ 以外は全部オブジェクト です。

• オブジェクトリテラル {}
• 配列 []
• 関数 function () {} / () => {}
• 日付 new Date()
• 正規表現 /abc/
• Map / Set など

例：

const obj = { a: 1, b: 2 }; // オブジェクト
const arr = [1, 2, 3];      // 配列（オブジェクトの一種）
function fn() {}            // 関数（呼び出せるオブジェクト）
const date = new Date();    // Dateオブジェクト

ポイント：

• オブジェクトは 「複数の値をまとめた器」 のイメージ
• 後からプロパティを追加・削除・変更できる
• 参照（アドレス） を通して扱われる（後で詳しく解説します）

プリミティブ vs オブジェクト：コピーの挙動（値 vs 参照）

一番重要な違いは、コピーしたときの挙動 です。

プリミティブは「値がコピーされる」

let a = 10;
let b = a;  // a の値（10）がコピーされる

b = 20;

console.log(a); // 10（変わらない）
console.log(b); // 20

• a と b は「別々の場所」に 10 と 20 を持っている
• b を変えても a には影響しない

イメージ：

• a → [10]
• b → [20]（コピー後に別の値に変えた）

オブジェクトは「参照がコピーされる」

const obj1 = { value: 10 };
const obj2 = obj1; // obj1 が指している「場所」をコピー

obj2.value = 20;

console.log(obj1.value); // 20
console.log(obj2.value); // 20

• obj1 と obj2 は 同じオブジェクト を見ている
• obj2 から書き換えると、obj1 から見ても変わる

イメージ：

• obj1 ──▶ { value: 20 }
• obj2 ──┘ （同じ箱を指している）

この「直接値を持つか」「どこかへの参照（アドレス）を持つか」が、
プリミティブとオブジェクトの 根本的な違い です。

プリミティブは「変更不可（イミュータブル）」という考え方

プリミティブ値は、概念的には 「変更できない」 と考えます。

let str = "hello";
str.toUpperCase();  // "HELLO" を返すが、str は変わらない

console.log(str);        // "hello"
console.log(str.toUpperCase()); // "HELLO"

• str.toUpperCase() は「元の文字列を変更する」のではなく、
  • 「新しい文字列 "HELLO" を返している」だけ
• str は依然として "hello" を保持している

数値や boolean も同じイメージです：

let n = 10;
let m = n + 5; // n を変えるのではなく、新しい値 15 を作っている

console.log(n); // 10
console.log(m); // 15

ポイント：

• プリミティブは「値そのもの」であり、基本的に変更不可と捉える
• 変えたいときは「新しい値を作って、変数に代入し直す」

typeof と instanceof で型を調べる

typeof の基本

typeof は、値の種類を文字列で返す 演算子です。

console.log(typeof 123);         // "number"
console.log(typeof "abc");       // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof 123n);        // "bigint"
console.log(typeof Symbol());    // "symbol"

console.log(typeof {});          // "object"
console.log(typeof []);          // "object"（配列も "object"）
console.log(typeof function () {}); // "function"

ここで必ず覚えておくべき 有名な罠 があります：

console.log(typeof null); // "object"

• 歴史的なバグですが、互換性のために残されています
• 「null は object だ」という意味ではなく、
  • 「昔の仕様の名残で typeof null が “object” になってしまう」

→ null かどうかは value === null で判定するのが安全 です。

instanceof の基本

instanceof は オブジェクトの種類 を調べる演算子です。

const arr = [1, 2, 3];

console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true（配列はオブジェクトの一種）

他の例：

const date = new Date();

console.log(date instanceof Date);    // true
console.log(date instanceof Object);  // true

• instanceof は「右側のコンストラクタのプロトタイプが、左のオブジェクトのプロトタイプチェーン上に存在するか」を見ています（詳しくはプロトタイプの章で解説します）。

実務的に：

• プリミティブかどうかざっくり知りたい → typeof
• あるオブジェクトが特定のクラス（Array, Date など）か知りたい → instanceof

という使い分けが多いです。

Truthy / Falsy のルール

JavaScript では、

if (値) {
  // 真とみなされたときに実行
}

のように、「値を条件として扱う」 場面がよく出てきます。

このとき、その値が

• 「真とみなされる」 → Truthy
• 「偽とみなされる」 → Falsy

のどちらかに分類されます。

Falsy な値

JavaScript で Falsy（偽相当）になるのは 次の7つだけ です。

1. false
2. 0
3. -0
4. 0n（BigInt のゼロ）
5. ""（空文字列）
6. null
7. undefined
8. NaN

これ以外は 全部 Truthy です。

代表的な Truthy 例

if ("hello") {        // truthy
if ("0") {            // truthy
if ("false") {        // truthy
if ([]) {             // truthy（空配列も真）
if ({}) {             // truthy（空オブジェクトも真）
if (42) {             // truthy
if (-1) {             // truthy
if (Infinity) {       // truthy
if (function () {}) { // truthy

特に混乱しやすいのが、

• ""（空文字列） → Falsy
• "0", "false" → String としては空でないので Truthy

という違いです。

簡単な例で「型」と「真偽」を意識する

types-test.js というファイルを作って、次のようなコードを書いてみてください。

const values = [
  0,
  1,
  "",
  "0",
  "hello",
  null,
  undefined,
  NaN,
  [],
  {},
  function () {},
];

for (const v of values) {
  console.log(
    "value:", v,
    "| typeof:", typeof v,
    "| truthy?:", !!v
  );
}

ここでのポイント：

• !!v は、「v を boolean に変換した結果」
  → Boolean(v) と同じ意味
• 実行結果を見ながら、
  • 「どの値が Falsy か」
  • 「typeof が何になるか」
    を確認すると感覚が掴めます。

<<前へ（変数・定数とスコープの基本）

>>次へ（演算子の基本と == / ===）