JavaScriptのtypeof演算子の基本
プログラミングを始めたばかりだと、値の「種類（型）」がわからなくて戸惑うことがよくあります。typeof は「これは数なの？文字なの？」を簡単に確かめるための道具。考えすぎなくて大丈夫、まずは触ってみましょう。
使い方と返ってくる文字列
typeof 値
typeof 変数
- 動作: 調べた結果を「文字列」で返す（例:
"number","string"）。 - よく使う型: number, string, boolean, undefined, object, function, bigint, symbol。
代表例
typeof 42 // "number"
typeof "こんにちは" // "string"
typeof true // "boolean"
typeof undefined // "undefined"
typeof { a: 1 } // "object"
typeof [1, 2, 3] // "object" ← 配列でも"object"
typeof function(){} // "function"
typeof 10n // "bigint"
typeof Symbol("x") // "symbol"
よくある落とし穴
- nullは”object”: 歴史的な理由で、
typeof nullは"object"。 - 配列は”object”:
typeof [1,2]も"object"。配列かどうかは別の方法で判定する。 - NaNは”number”: 数でありながら「Not-a-Number」。計算ミスのサイン。
実用的な判定パターン
- 数値かどうか
const x = 10;
if (typeof x === "number") {
console.log("数値です");
}
- 文字列かどうか
const name = "Taro";
if (typeof name === "string") {
console.log("文字列です");
}
- 関数かどうか
function greet() {}
if (typeof greet === "function") {
console.log("関数です");
}
- 配列かどうか（正しい方法）
const v = null;
if (v === null) {
console.log("nullです");
}
- nullかどうか（正しい方法）
const v = null;
if (v === null) {
console.log("nullです");
}
- NaNの判定（正しい方法）
const v = Number("abc"); // NaN
if (Number.isNaN(v)) {
console.log("NaNです");
}
例題で理解を深める
例題1: 入力値を安全に処理する
- 目的: 数値なら足し算、文字なら長さ、その他は無視。
function describe(value) {
if (typeof value === "number") {
return value + 10; // 数値なら計算
} else if (typeof value === "string") {
return value.length; // 文字列なら長さ
} else {
return "対象外"; // それ以外
}
}
console.log(describe(5)); // 15
console.log(describe("abc")); // 3
console.log(describe(true)); // "対象外"
- ポイント:
typeofは分岐に向いている。結果が文字列なので===で比べる。
例題2: 配列とオブジェクトを区別する
- 目的: それぞれに合った処理をする。
function processData(data) {
if (Array.isArray(data)) {
return `配列の長さ: ${data.length}`;
} else if (data === null) {
return "値はnullです";
} else if (typeof data === "object") {
return `オブジェクトのキー数: ${Object.keys(data).length}`;
} else {
return "配列/オブジェクトではありません";
}
}
console.log(processData([1,2,3])); // "配列の長さ: 3"
console.log(processData({a:1,b:2})); // "オブジェクトのキー数: 2"
console.log(processData(null)); // "値はnullです"
console.log(processData("hi")); // "配列/オブジェクトではありません"
- ポイント: 配列判定は
Array.isArray、nullは=== null、それ以外のオブジェクトはtypeof === "object"。
例題3: 計算エラー（NaN）を見つける
- 目的: 変換に失敗したら丁寧に扱う。
function toNumberSafe(text) {
const num = Number(text);
if (Number.isNaN(num)) {
return "数値に変換できません";
}
return num;
}
console.log(toNumberSafe("123")); // 123
console.log(toNumberSafe("12a")); // "数値に変換できません"
- ポイント:
typeof NaNは"number"なので、NaNチェックはNumber.isNaNを使う。
ちょっと進んだ使い方
- 未定義（undefined）の検出
let x;
if (typeof x === "undefined") {
console.log("まだ値が設定されていません");
}
- bigintとsymbolの判定
const big = 9007199254740993n;
const sym = Symbol("id");
console.log(typeof big === "bigint"); // true
console.log(typeof sym === "symbol"); // true
- 型ごとに安全に処理するユーティリティ
function typeOf(value) {
if (value === null) return "null";
if (Array.isArray(value)) return "array";
return typeof value; // 基本はこれでOK
}
console.log(typeOf([1])); // "array"
console.log(typeOf(null)); // "null"
console.log(typeOf({})); // "object"
console.log(typeOf(1)); // "number"
よくある間違いと対策
- 配列判定にtypeofを使う
- 対策:
Array.isArray(value)を使う。
- 対策:
- nullをオブジェクトと勘違い
- 対策:
value === nullで見分ける。
- 対策:
- NaNを文字列やundefinedと混同
- 対策:
Number.isNaN(value)で明確に判定。
- 対策:
まとめと次のステップ
- 結論:
typeofは「基本の型（number・string・boolean・undefined・object・function・bigint・symbol）」を文字列で返す便利な演算子。 - 例外: 配列は
"object"、nullも"object"、NaNは"number"。 - 次の一歩: 配列判定は
Array.isArray、nullは=== null、NaNはNumber.isNaN。この3点をセットで覚えると、初歩のバグをグッと減らせます。