最新！JavaScript入門講座ーデータの型を例を使ってわかりやすく解説

JavaScriptではあまり気を使わない部分かも知れませんが、実はデータの型というものが存在します。データの型はJavaScriptやRuby、Pythonといった動的型付け言語と呼ばれている言語には実は厳密に定義しなくてもプログラムはかけます。

しかし、基本的には値の型はしっかりと把握しなければなりません。また、これを学んでいる皆様は将来的に型を厳密に定義するTypeScriptを勉強すると思いますので、データの型を知っておく必要があります。

今回は、JavaScriptでのデータの型についてわかりやすく解説していきます。

JavaScriptのデータ型を解説

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

まず、JavaScriptではデータの型は大きく分けて二つに分類されます。それが、プリミティブ型とオブジェクト型です。この二つは明確に違いを設けてあります。それぞれ見ていきましょう。

プリミティブ型

プリミティブ型とは、JavaScriptで文字列や数値を初期化するときなどに認識される基本的な型になります。プリミティブ型のデータは基本的に一つの変数に対して一つの値、単一の値のみを持ちます。
また、基本的にプリミティブ型は値自体を変更できないという性質を持っています。
この性質をイミューテタブルといいます。

実際の、プリミティブ型のデータ型は以下のようになります。

これらがプリミティブ型に分類されるデータ型になります。数値や文字列、論理値などのよく使われるものなのでわかるかと思います。
nullというのは値が存在しないことを表すデータになります。undefinedは変数を定義したのみで値を初期化していない変数のことです。

nullとundefined型は似ているようで違うので注意しておきましょう。

オブジェクト型

オブジェクト型はプリミティブ型に含まれまいものがオブジェクト型になります。オブジェクト型はプリミティブ型と比べて様々な種類があります。オブジェクト型は一つの変数に複数個の値を持ちます。

オブジェクト型のデータ型は以下になります。しかし、ここで紹介するものはその中でも一部です。

これらは一部です。それだけ、他のデータ型が多いのです。
関数や配列などの解説はもっと詳しく別の記事で解説していきます。
ここでは、オブジェクト型にはこんなものがあるんだな、というくらいの理解で全く問題ありません。

プリミティブ型の型を出力しよう

では、実際に先ほど紹介した型を出力していきましょう。変数に代入された型を確認する方法が以下になります。

これは引数となっている変数のデータ型を出力してくます。実際に、デバックなどで変数の型がどうなっているのかを確かめるなどの使い方があります。
基本的にこれはプリミティブ型の変数に使います。

let num = 2941;
let bignum = 9391048418412419484325n;
let str = "TypeScript";
let bool = true;
let define;
let nul = null;
let sym = Symbol();


console.log(typeof(num));
console.log(typeof(bignum));
console.log(typeof(str));
console.log(typeof(bool));
console.log(typeof(define));
console.log(typeof(nul));
console.log(typeof(sym));

$ node data.js

number
bigint
string
boolean
undefined
object
symbol

実行するとこのようになります。
出力結果を見ると、それぞれがどのようなデータの型なのかを知ることができます。ただ、nullの型がオブジェクトとなっているのは、JavaScriptの仕様になっています。ただ、これはプリミティブ型ということを覚えておきましょう。

では、それぞれの型について軽くみていきましょう。

数値型

数値型は整数、不動小数点が含まれています。JavaScriptにおいては、整数と少数の区別がなく、一緒の数値型として認識されます。

let int = 13;
let dec = 3.141592653589;
let e = 4.5e-10;

console.log(typeof(int));
console.log(typeof(dec));
console.log(typeof(e));

数値は四則演算も当然行うことができます。これらはどれもnumber型になります。ちなみに、4.5e-10というのは、よくある冪乗の別の書き方で、4.5✖️10^-10という意味です。

$ node data.js

number
number
number

長整数型

長整数型とは、数値型とは別に追加された新しいデータ型です。数値型では扱うことのできない大きな整数を扱うためのデータ型で、数値の最後にnをつけることによって表現できます。

長変数型はbigintという型を出力します。

let bigint1 = 19401n;
let bigint2 = 10000n;

console.log(typeof(bigint1));
console.log(typeof(bigint2));
console.log(bigint1+bigint2);

$ node data.js

bigint
bigint
29401n

同じ型どうし、つまり長変数同士の四則演算も可能です。数値方との四則演算はできません。

文字列

文字列は0文字以上の文字の羅列になります。シングルクォーテーションもしくはダブルクォーテーションのどちらかで囲みます。

この場合はstringを返します。

let msg = "世の中はお金持ちがルールを決める";

console.log(msg);
console.log(typeof(msg));

$ node data.js

世の中はお金持ちがルールを決める
string

論理値型

論理値型はtrueもしくはfalseどちらかの値しかとりません。これらは別記事で解説していく、IF文などの条件式で利用したり、論理演算子などで返される値です。

論理値型はbooleanという型を返します。

let bool = false;

console.log(bool);
console.log(typeof(bool));
console.log(typeof(10 < 9));

$ node data.js

false
boolean
boolean

変数に代入したfalseや、値を比較した時の型もこのようになります。

undefined型とnull型

ここではundefined型とnull型の二つを解説します。変数を定義したとき、何も値を代入せず初期化すると、undefined型になります。nullは予約後であるnullを変数に代入します。しかし、返される型はobject型になっているという、JavaScriptの仕様があることに注意しましょう。

let def;
let nul = null;

console.log(typeof(def));
console.log(typeof(nul));

$ node data.js

undefiend
object

シンボル型

シンボル型はこれも最近導入されたデータ型になります。これは変数を定義して初期化するたびに他の変数とは違ったユニークな値を作成する型になります。
これは作成するたびに別の変数が定義されていくので、値が被ったりする心配がありません。

シンボル型はsymbol型を返します。

let sym1 = Symbol();
let sym2 = Symbol();

console.log(sym1 === sym2);
console.log(typeof(sym1));
console.log(typeof(sym2));

$ node data.js

false
symbol
symbol

実行結果を見ると、同じ型であるはずなのに、等価演算子が返している結果はfalseになっています。

まとめ

では、今回のまとめに入っていきましょう。
今回はこのようなことを学びました。

今回はここまでとなります。お疲れ様でした。

参考文献

文法とデータ型 - JavaScript | MDN

この節では JavaScript の基本文法、変数宣言、データ型、リテラルについて説明します。

developer.mozilla.org

データ型とリテラル · JavaScript Primer #jsprimer

JavaScriptの値の種類にあたるデータ型についてを紹介します。データ型には大きく分けてプリミティブ型とオブジェクトがあり、それぞれのデータ型を簡単なコード例とともに紹介していきます。一部のデータ型にはリテラルというデータ型を簡単に記述するための構文が用意されており、リテラルについても合わせて紹介していきます。

jsprimer.net

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

www.freecodecamp.org