JavaScriptのtypeof演算子を使って値のデータ型を判定する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのtypeof演算子を使って値のデータ型を判定する方法について解説しています。最初にJavaScriptのデータ型の種類について説明します。次にtypeof演算子によるデータ型の判定方法、instanceof演算子との違いを覚えましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのtypeof演算子を使って値のデータ型を判定する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

typeof演算子を使って値のデータ型を判定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

データ型とは

Javascript内では、値は何らかの型に分類され、それぞれの分類に合った動きをしてくれます。例えば下記の例を見て下さい

  • ”1”+”2”
  • 1+2

上記では、結果が異なるのは、おわかりになるかと思います。因みに上が”12”で下が3になります。この様に値の型はプログラムを作成する際には、とても重要な意味を持ちます。

では、どの様な方の種類があるのかを紹介いたします。

  • Boolean (真偽値)
  • null
  • undefined (未定義)
  • Number (数値)
  • BigInt (長整数)
  • String (文字列)
  • Symbol (シンボル)
  • Object (オブジェクト)。
  • function(ファンクション)

 

typeof演算子とは

先程もお話したとおり、プログラミングにおいて値の型はとても重要です。通常は、変数などを自身で宣言して利用するため型を知っている事が多いのですが、どこからでも呼ばれる可能性がある関数やクラスなどを作成する際には、引き渡された値の型を確認する必要などが出来くることがあります。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

typeof演算子の使い方

  •  typeof 値

と、使い方はいたって簡単で、「typeof」の後ろに判定したい値を記載します。

// Booleans
typeof true  'boolean';

// null
typeof null  'null';
 
// Undefined
typeof undefined → 'undefined';

// Numbers
typeof 11  'number';

// BigInt
typeof 11n  'bigInt';

// Strings
typeof '11' → 'string';

// Symbols
typeof Symbol() → 'symbol'

// Objects
typeof [1, 1, 1→ 'object';

//Fnction
typeof function() {} → 'function';

 

データ型を判定する方法

型の判定を行うのは簡単で、”==”で確認が行えます。

<script type="text/javascript">
if (typeof 11 == 'number'){
console.log( 'typeof 11 = ' + (typeof 11) );
}
if (typeof "11" == 'string'){
console.log( 'typeof "11" = ' + (typeof "11" ) );
}
if (typeof function() {} == 'function'){
console.log( 'function() {} = ' + (typeof function() {} ) );
}
</script>

 

typeof演算子とinstanceof演算子の違い

typeofと似たような演算子にinstanceof演算子というものがあります。こちらは、オブジェクトが値が何の型を継承(インスタンス)であるかをチェックするのに利用できます。

<script type="text/javascript">
var a = 11
if (a instanceof Number){
console.log( 'aはnumberのインスタンスです。' );
}
//配列は、ArrayでありObjectでもあります
var arr = [1,2,3,4]
if (arr instanceof Array){
console.log( 'aはArrayのインスタンスです。' );
}
if (arr instanceof Object){
console.log( 'aはObjectのインスタンスです。' );
}
//直接はオブジェクトになっていないので、String型と判断されない
if ("str" instanceof String){
console.log( '"str"はStringのインスタンスです。' );
} else {
console.log( '"str"はStringのインスタンスではないです。' );
}
</script>

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。