MENU

【初心者向け】JavaScriptのtypeof入門|nullと配列の落とし穴を回避【ITTI】

目次

typeofとは?JavaScriptの型を調べる基本

JavaScriptを学び始めると必ず出てくるのが typeof 演算子。

「typeofって何?」「nullや配列を判定するときに変な結果が出るのはなぜ?」と悩む人も多いです。

この記事では、typeofの基本的な使い方から、初心者がつまずきやすい注意点までを、コード例と一緒にわかりやすく解説します。

typeofとは?

typeof は、変数や値のデータ型を文字列で返す演算子です。

要するに

typeofが名探偵としましょう。

ユーザー「ヘイ!typeof!この付箋って何なんだ!」

typeof「あーこれは偽っすね」

こんな感じで、typeof は名探偵みたいに「正体」を教えてくれるイメージです。

書き方はシンプル

typeof 
typeof()

typeofの基本的な使い方

数値(Number)

let num = 123;
console.log(typeof num);




実行結果

"number"

ユーザー「ヘイ!typeof!このnumって何なんだ!」

typeof「あーこれは、数字なので、numberっすね」

文字列(String)

let str = "Hello";
console.log(typeof str);



実行結果

"string"

ユーザー「ヘイ!typeof!このstrって何なんだ!」

typeof「あーこれは、文字なので、stringっすね」

真偽値(Boolean)

let flag = true;
console.log(typeof flag);



実行結果

"boolean"

ユーザー「ヘイ!typeof!このflagって何なんだ!」

typeof「あーこれは、真なので、booleanっすね」

未定義(Undefined)

let x;
console.log(typeof x); // "undefined"



実行結果

"undefined"

ユーザー「ヘイ!typeof!このxって何なんだ!」

typeof「あーこれは、、変数はあるけど、まだ値が入ってないので undefined っすね」

typeofで注意が必要なケース

typeof null が “object” になる理由

let n = null;
console.log(typeof n);



実行結果

"object".   本来の結果は"null"

これは JavaScriptの歴史的な仕様バグ。

本来なら “null” と返ってほしいところですが、JavaScriptの初期設計ミスがそのまま仕様として残ってしまいました。JavaScriptが誕生した1995年当時、値を内部的に表す仕組みで「null」がオブジェクトと同じ扱いになってしまったのです。その後修正すると既存のコードが壊れてしまうため、歴史的なバグをあえて残したままになっています。

要するに

JavaScript「あーやべえ!バグ見つけちゃった。でも、今すぐ修理してしまうとフロントエンドエンジニア達が大混乱するので、修理するのはやめてバグを残しとこう‥。」

null を判定したいときは

let n = null;
console.log(n === null);



実行結果

true

で確認するのが正解。

え?なんで、n === nullで判定しなければならないのか?本来の答えはtrueなのか?

理由は

1.`typeof null` が信用できないから

2. null と undefined を区別したいから

3. バグを防ぐため

寸劇は

ユーザー「この n は null なのか?」

===「Yes!null だから true!」

ユーザー「じゃあこの m は null なのか?」

===「No!null じゃないから false!」

ユーザー「typeof!じゃあ null の型は?」

typeof「えーっと…’object’ っすね(昔のバグのせいで…)」

要するに、n === null での判定結果は true か false の二択しかありません。 一方、typeof null は歴史的なバグのせいで “object” を返します。本来なら “null” と返るのが直感的でしたが、仕様として修正されずに残っているのです。

typeof 配列(Array)は “object”

let arr = [1, 2, 3];
console.log(typeof arr);



実行結果

"object" → 言いたいことが違う

配列かどうかを判定したいときは

Array.isArray(arr);



実行結果

true →合ってる

を使う。

Array.isArray()とはその付箋が配列かどうかを判定するためのメソッド。

寸劇

ユーザー「へい!typeof!この arr が配列なのか?」

typeof「うーん…オブジェクトっすね」

ユーザー「はぁ?配列かどうか知りたいんだけど?」

typeof「ごめん!そこまではわからないっす…」

ユーザー「チッ!もええ!おい!Array.isArray!この arr が配列なのか?」

Array.isArray「わかるぜ!配列だから true!」

要するに、Array.isArrayは配列か調べてくれるコード。

typeof 関数(Function)

let func = function() {};
console.log(typeof func);



実行結果

"function"

関数は“呼び出せるオブジェクト”なので特別に ‘function’ が返る

let obj = {};
console.log(typeof obj);



実行結果

"object"

関数がないから実行できないので “object” が返る。

寸劇

ユーザー「typeof!この func は何者?」

typeof「これは呼び出せるから ‘function’ だよ!」

ユーザー「じゃあこの obj は?」

typeof「これはただの入れ物だから ‘object’!」

要するに、func はfunction()っていう関数があるので、実行結果は “function”

一方、obj はfunction()がないし、{} はただのオブジェクトリテラルで呼び出せないから ‘object’ が返ります。

型一覧表

123(数値)                “number”

abc(文字列)               “string”

true(真偽値)              ”boolean”

undefined(未定義)            “undefined”

null(歴史的バグ)             ”object”(バグ)

[1,2,3](配列)              ”object”

{}(オブジェクトリテラル)         “object”

function(){}(呼び出せるオブジェクト)    “function”

42n(任意精度整数)            “bigint”

Symbol(“id”)(一意な識別子)       ”symbol”

まとめ

  typeof は変数や値の型を文字列で返す演算子

  null と配列は “object” と返るので注意

  配列は Array.isArray()、nullは === null で判定する

  関数は “function” が返る特別扱い

基本的な型判定には typeof が便利。ただし null と配列は例外なので専用の方法を使うのが正解

最後まで読んで頂きありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フロントエンドを基礎から学びつつ、UXデザインで“わかりやすさ”を形にしています。

コメント

コメントする

目次