【JavaScript】データ型について解説。【分かりやすい】

JavaScriptのデータ型について、教えてほしい！

実はJavaScriptのデータ型は8種類あって、それらは大きく分けて2つに分けられます。

この様な基礎的な知識は、仕様書や技術書などを読む時に使うので大切です。

組み込み関数など、JavaScriptの様々な仕様をより正しく理解する際に、「JavaScriptにおけるデータ型の理解」は必要なので、この際にしっかり確認しておくといいでしょう！

こんな方にも、データ型という概念から解説していますので安心して下さい。

では、内容へ入ります！

データ型とは？？

まず、「データ型ってなに？？」というところから解説します。

「そんなの分かるよ！」、という方は読み飛ばして下さい。

プログラミングにおいては、「データ型」という概念が存在していて、それはデータを特徴やその扱い方などによって分類したものになります。

具体例があると必要性がイメージしやすいと思うので、一つ挙げますね。

let hoge = 1 + 1;
console.log( hoge ); // 2

この様なコードで、「 1 + 1 」の部分が「数字」として扱われるので、hoge は ２ となります。

ですが下記の様な場合は少し違った結果が得られます。

let hoge = "1" + "1";
console.log( hoge ); // "11"

この様に書くと、"1"が「文字列」として扱われるので、単に文字列の連結が行われて、結果は「 “11” 」となります。

こんな感じで、「どの種類のデータを扱っているのか？」が変わると、挙動が変わってくるのがプログラミングの世界です。

データ型の例として、「数字」と「文字列」の二つを挙げましたが、これらはプログラミング言語によってどのような種類が存在するのかが異なっています。

そして、この記事では、「JavaScriptにはどんな種類のデータ型があるのか？」を解説する記事となっている、ということですね。

では、具体的な内容へ入ります！

JavaScriptにおけるデータ型の種類

まず、JavaScriptにはどんなデータ型があるかを確認します。

string

「string型」は文字列であることを表します。

先程の例のように数字の「１」と文字列の「”１”」は異なるので注意しましょう。

JavaScriptで下記の様なコードを書くと、ユーザーに任意の入力を受けつけることが可能ですが、受け取った値は数字だったとしても、文字列として扱われるので注意が必要です。

let number = prompt();

console.log( typeof number ); // "string"

prompt()で、ユーザーに入力を受けつけるダイアログを表示することができます。

let でnumber という変数の宣言、それと同時にユーザーから受け取った値を代入しています。

この記事の中で後々詳しく使い方を解説しますが、typeofを使って、変数に入っているデータ型を判別できます。すると「string」となっていることが確認できます。

そしてユーザーから数字を入力してもらって、それを頼りに場合分けを行っている場合などは、注意が必要です。

let number = prompt();

if ( number === 23 ) {
    // 命令
}

「===」は「厳密等価演算子」といって、データ型も含めてチェックします。

上の様に、「厳密等価演算子」を使っている場合、もし「23」という数字を半角でユーザーが入力していたとしても、このif文の中の命令は実行さらることはありません。

なぜなら、promptで受け取った値は、文字列型だから、です。

number

number型は、そのデータが数字であることを表します。

四則演算などに使われるデータ型ですね。

実は、算術演算がしたい時に、毎回、number型なのかstring型なのか気にしなくてもJavaScriptでは柔軟に計算することが可能です。

• + 加算
• – 減算
• * 乗算
• / 除算

などの算術演算子を使った場合、暗黙的に型変換が行われています。

let number = "23" - "4";

console.log( number ); //19

この様に、string型の”23″と”4″に対して、減算の演算子である( – ) を使うと、それぞれがnumber型に変換されて、算術演算が適用されます。

それは便利ですね、！

let sum = "19" + "4";

console.log( sum ); //194

+ 演算子を使って計算しようとすると、「文字列の連結」が優先されるので、結果は194になってしまいます。

+ 演算子を使う時だけ、「扱うデータがnumber型なのかstring型なのか？」に注意しましょう。想定外の結果になります。

let sum = Number( "19" ) +  Number( "4" );

console.log( sum ); //23

この様に、「 Number() 」を使うことで明示的に型変換ができます。

結果もしっかり23になっているので、加算ができています。

BigInt

実はJavaScriptの、Number型の整数は、「2の53乗-1」 (9007199254740991)より大きい、

もしくは、

「-(2の53乗-1)」(-9007199254740991)より小さい、

つまりそれより大きな絶対値をもつ「整数」を正確に扱うことが、できません。

ですが、BigInt型はそれよりも大きな「整数」を扱うことができるように、特別に用意されたデータ型です。

const bigInt = 8257275290509250952765729349457829757599n;

この様に、整数の末尾にnを追加することで、BigInt型のデータを作ることができます。

Boolean

Boolean型は、2種類のデータだけから構成されています。

この２つからなるデータ型です。

論理型とも呼ばれ、論理値がその構成要素です。

trueは、「真」を表し、

falseは、「偽」を表しています。

if文などの判定で使われます。

null

nullという特別なデータ型もあります。

nullは、文字通り、「空、何もない、不明」などの意味を表します。

nullというデータ型には、複数のデータが入っている訳ではなく、「null」という値の一つだけです。

ひとつのデータから構成されるデータ型ですが、特別な挙動を取るため、他と区別されています。

このnullは他のどのデータ型にも属しません。

const a = null;

この様に書くと、aという名前の変数には、「null」というデータ型のデータが代入されます。

undefined

undefinedも「undefined」というそれ自身による、一つのデータで構成されている、データ型です。

undefinedは、「何も代入されていない」ことを意味します。

nullと同じく、他のデータ型と区別されています。

nullもundefinedも「値がない」、という意味は同じです。

ですが、nullは代入する値が存在していない、というイメージで、

それに対して、undefindは単に値が代入されていない、といったイメージです。

object

object型は、今まで紹介してきたデータ型とはまた少し違って、複数のデータをまとめることができる特殊なデータ型のことです。

object型の例を挙げると、「配列」、「連想配列(オブジェクト)」などがあります。

配列はデータを順序付けて格納することができるものです。

const array = ["ありがとう", 23, true, null];

この様に、複数の異なるデータ型のデータを格納できます。

単に、何もデータを持っていない配列も作ることが可能です。

const array = [];

プログラミングをする上で、複数のデータをまとめておきたいことも多々あると思うので、とても便利です。

※カンマで区切ることで複数のデータを保持できます。

最後の行のカンマは省略で可能ですが、データが増えることも考えて、つけておくのが無難です。

オブジェクトは複数のデータを名前付きで格納することができる、というものです。

object型、のobjectとは名前は一緒ですが、表している対象が異なります。なのでカタカナで書きました。

const object = {
    Greeting: "こんばんは！",
    boolean: true,
    age: 23,
    from: "Japan",
};

この様に、｛｝で作られてその中に「識別子:データ」、とすることでデータを格納できます。

配列と同じようにカンマ区切りで複数のデータを保持できます。

識別子のことを「(key)キー」と呼び、データのことを「値」と呼びます。

その「キーと値」のセットのことを「プロパティ」と呼びます。

これもかなり便利ですね！

symbol

symbol型のデータは、オブジェクトのkeyに使うことができる、一意の識別子です。

他の人と一緒にコードを書く時など、大規模なコードになると、オブジェクトのプロパティを意図せずに書き換えてしまう可能性も出てきます。そこで使えるのがsymbol型のデータです。

symbol型については、for in 構文などでスキップされるなど、他にも使われる理由がありますが、少し高度な内容になるため、別記事で詳しく解説したいと思います。

symbol型というものもある、ということを押さえておいて下さい。

typeof 演算子

typeof()を使うことで、引数のデータ型が分かります。

const age = 23;

typeof( age ); // number

引数に与えたデータのデータ型を文字列で返してくれます。

データ型によって処理を分けたい場面とか、単にデータ型が知りたい時などに使うことができそうですね。

const age = "23";

typeof age; // string

このように、() を省略することもできます。

では、今まで見てきたデータに対して、typeofを使ってみますね。

typeof "こんばんは！"; // "string"
typeof 23; // "number"
typeof 8257275290509250952765729349457829757599n; // "bigint"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof Symbol("id"); // "symbol"

このようにデータ型が分かります。

nullはobjectとなる仕様(バグによって生まれた)

typeof null; // "object"

nullにtypeofを使うと、なぜか「object」となっていると思います。

JavaScriptでこれはバグ由来の仕様です。

もともとバグでこうなってしまっていましたが、それが今も直されずに「仕様」となりました。

function

const func = function() {
    console.log( "Hello" );
}

console.log( typeof func ); // "function"

関数に対してtypeofを使うと、”function”の文字列が返ってきます。

functionというデータ型はJavaScriptにはありませんが、これはtypeofの仕様上そうなっています。

それが関数かどうか、見分けることが可能ということですね。

オブジェクトと配列の区別ができない

typeofを使っても、引数に渡されたデータがobject型かどうかを判定することは可能ですが、それが配列なのかオブジェクト(連想配列)なのかは判断できません。

typeof {}; // "object"
typeof []; // "object"

このように、どちらも”object”という文字列が返ってきます。

プリミティブとオブジェクト

JavaScriptにおける今までみてきた8種類のデータ型は、その特性から２つに大別することができます。

これらのデータ型の中で、下記の６つを「プリミティブ」といいます。

そして、残りの1つは「オブジェクト」と呼ばれるグループに分類されます。

それでは、それらの共通の特徴について解説していきます。

7つのプリミティブ

プリミティブとは、その名前から推測できる通り、プログラミングにおいて根源的なデータです。

僕自身は「それ以上に割ることができない不変なデータ」、の様な意味で理解しています。

プリミティブ、とは英語で「primitive」と書き、「根源的な、原始的な、素朴な、原型」、などの意味がある英単語です。

例えば、変数に他のプリミティブな値を代入すると、変数自体の値は変わりますが、プリミティブなデータ自体は不変です。

算術演算した後も、新しいプリミティブなデータができるだけ、というようなイメージですね。

1つのオブジェクト

これらは「オブジェクト」と呼ばれるグループで、「プリミティブなデータとは区別」されています。

プリミティブは原始的な一つのデータであるのに対して、オブジェクトは複数の「プリミティブやオブジェクト」の集合です。

nullはtypeofを使うと「”object”」となるが、プリミティブなデータである。

nullは上でもちらっと書きましたが、JavaScriptの言語的なエラーからきています。なのでプリミティブなデータ型の一つですが、typeofを使うと、「”object”」と返ってきます。

有名な話なので、覚えておくといいかもしれません。

まとめ

JavaScriptには8種類のデータ型がある。

JavaScriptのデータ型についての知識をもっておく理由は、仕様書や技術書などでそれらが使われることがあり、それらをを読めるようにするための前提知識であるから。

下記の7つがプリミティブと呼ばれるグループのデータ型。

そして残りの1つが「オブジェクト」と呼ばれるグループに該当して、下記の通り。

JavaScriptにおけるデータ型について解説しました！またなにか確認したいことがあれば、記事に戻っていつでも確認して下さい。

最後まで読んでくれて、ありがとうございました！

ではっ。