JavaScriptのtypeofを使おう｜データ型一覧付きで解説

（最終更新月：2023年11月）

✔以下のような疑問を持つ方へ向けて作成されています

✔当記事で取り上げること

• javascriptのtypeofの仕様
• typeofの正確な使用法とその応用
• typeofを用いた具体的な実例

当記事では、javascriptのtypeofの基本的な機能から、その応用方法まで、現実のシナリオをもとに細かく説明します。

一緒にtypeofの使い方をマスターしましょう。

JavaScriptとtypeofを理解するための前提知識

こちらでは、JavaScriptとその基本的なデータ型、そしてtypeofの使い方についてお伝えしていきます。

JavaScriptを学ぶ上で、データ型とその判別方法について理解することで、より効率的なコーディングが可能です。

• JavaScriptとその基本的なデータ型の紹介
• typeofの使い方とその重要性

JavaScriptとその基本的なデータ型の紹介

JavaScriptは、ウェブページの動的な動作を制御するための言語です。

主なデータ型には、以下のようなものがあります。

• Number
• String
• Boolean
• Object
• Undefined
• Symbol

これらのデータ型を理解することで、変数の扱いや関数の動作を適切に制御できます。

typeofの使い方とその重要性

typeofは、JavaScriptで変数や値のデータ型を判別するための演算子です。

typeof "Hello"

"string"を返します。

データ型を正確に知ることで、バグの原因を特定したり、期待する動作を得るための条件分岐を書く際に役立ちます。

JavaScriptにおけるtypeofの基本

こちらでは、typeofの基本的な使い方や注意点について詳しく見ていきましょう。

typeofを正確に使うことで、コードの安定性を向上させられます。

• 主なデータ型とそれぞれのtypeofの結果
• typeofの実践的せたとエラー
• 括弧の必要性と用途

主なデータ型とそれぞれのtypeofの結果

以下は、主なデータ型とそれぞれのtypeofの結果です。

typeof 123; // "number"
typeof "Hello"; // "string"
typeof true; // "boolean"
typeof {}; // "object"
typeof undefined; // "undefined"
typeof Symbol(); // "symbol"

これらの結果を覚えておくことで、データ型の判別がスムーズにおこなえます。

typeofの実践的せたとエラー

typeofを使用する際の一般的なエラーには、未定義の変数や関数を調べることが挙げられます。

typeof notDefinedVariable

"undefined"を返します。

このように、typeofは変数が未定義であってもエラーをスローしません。

括弧の必要性と用途

typeofを使用には、括弧を使用することで読みやすさが向上します。

typeof(123)
typeof("Hello")

とくに複雑な式や関数の戻り値を評価する際には、括弧を使用することを推奨します。

データ型とtypeofの詳細

こちらでは、JavaScriptの基本的なデータ型と、特殊なデータ型に対するtypeofの挙動について詳しく解説します。

これらの詳細を理解することで、より深いコーディング知識を身につけられるでしょう。

• 基本となるデータ型のtypeof検証
• 特殊なデータ型（null、NaN、Infinity）のtypeof検証

基本となるデータ型のtypeof検証

JavaScriptの基本的なデータ型と、それに対するtypeofの結果を再確認します。

typeof 10; // "number"
typeof "text"; // "string"
typeof true; // "boolean"
typeof []; // "object"
typeof function() {}; // "function"

これらの結果を基に、データ型の判別やコードの挙動を予測できます。

特殊なデータ型（null、NaN、Infinity）のtypeof検証

JavaScriptには、特殊なデータ型や値も存在します。

これらのtypeofの結果を確認しましょう。

typeof null; // "object" (これはJavaScriptの歴史的なバグです)
typeof NaN; // "number"
typeof Infinity; // "number"

これらの特殊な値も、日常のコーディングで遭遇する可能性があるため、その挙動を理解しておくことが重要です。

typeofを使った演習

こちらでは、typeofを使用した実際のコーディング例や演習を紹介します。

これにより、typeofの実践的な使用方法を身につけることができます。

• typeofによる基本的な分岐処理
• 実際の新たな例のtypeof使用法

typeofによる基本的な分岐処理

typeofを使用して、データ型に応じた処理を分岐させる基本的な例を見てみましょう。

let value = "Hello";
if (typeof value === "string") {
    console.log("This is a string!");
} else {
    console.log("This is not a string!");
}

このように、typeofを使用することで、変数のデータ型に応じた処理を実装することができます。

実際の新たな例のtypeof使用法

typeofは、APIからのレスポンスやユーザー入力など、不確定なデータの型を判別する際にも役立ちます。

function processData(input) {
    if (typeof input === "number") {
        return input * 10;
    } else if (typeof input === "string") {
        return input.toUpperCase();
    }
    return input;
}

この関数は、数値が入力された場合は10倍にし、文字列が入力された場合は大文字に変換します。

typeof演算子で返る値の一覧表

以下は、typeof演算子を使用したときの主な返り値とその説明です。

typeof undefined;     // "undefined" : 値が割り当てられていない変数
typeof "abc";         // "string"    : 文字列
typeof 123;           // "number"    : 数値
typeof true;          // "boolean"   : 真偽値
typeof {};            // "object"    : オブジェクト
typeof [];            // "object"    : 配列もオブジェクトとして扱われる
typeof null;          // "object"    : null値
typeof function() {}; // "function"  : 関数
typeof Symbol();      // "symbol"    : シンボル

この表を参照することで、typeofの結果としてどのような文字列が返されるかを瞬時に確認できます。

まとめと考察

当記事では、JavaScriptのtypeofについて見てきました。

• JavaScriptは動的型付け言語であり、変数のデータ型は実行時に決定
• この特性のため、typeof演算子は非常に重要
• 正確なデータ型を知ることで、意図しないバグを防ぐことができ、コードの安定性を向上させられる

いろいろと手を動かしながら、身につけていきましょう。